/*-------------------------------*/
/* BASE Y RESETEO GLOBAL         */
/*-------------------------------*/
@import url('https://fonts.cdnfonts.com/css/neuropol-x');

* {
    box-sizing: border-box; /* Aplicar globalmente para un modelo de caja consistente */
}

body {
    font-family: 'Neuropol X Free', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Oculta el scroll horizontal si aparece */
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    background-color: #0f2027;
}

/* --------- Variables base (heredan de tu CSS) --------- */
:root{
  --neon-primary:#00f3ff; --neon-secondary:#ff00ff; --neon-accent:#39ff14;
  --dark-bg:#0a0a1a; --darker-bg:#050510; --card-bg:rgba(16,18,37,.6);
      /* colores estilo Weltrade */
    --wel-1:#00b8d9; /* cyan */
    --wel-2:#0066ff; /* azul */
    --success:#14f195;
    --danger:#ff5470;
  }

h1, h2, h3, h4, h5, h6, p, li, a, button, span {
    font-family: 'Neuropol X Free', sans-serif;
}

p, li, a {
    font-family: 'Neuropol X Free', sans-serif;
    color: #eee;
    line-height: 1.6;
}
img {
    max-width: 150%;
    display: block;
    height: auto;
}
a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}
a:hover {
    text-decoration: none;
    color: #00aaff;
}

@media (max-width: 768px) {
    .global-animated-background {
        display: none !important;
    }
}

/*-------------------------------------*/
/* TOP MENU (Glass Efecto y Logo Fijo) */
/*-------------------------------------*/
.top-menu-wrapper {
  position: fixed;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.top-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px; /* leve ajuste para que quepa el logo más grande */
  background: linear-gradient(135deg, rgba(10,30,40,.85), rgba(6,20,32,.85));
  border: 1px solid rgba(163, 141, 251, 0.293); /* borde más discreto */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 45px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);  
  pointer-events: auto;
  max-width: 650px;    /* se mantiene */
  width: 80%;          /* se mantiene */
  flex-wrap: nowrap;  
  padding: 4px 20px;       /* menos aire arriba y abajo */
  min-height: 60px;
}

.logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  flex-shrink: 0;
  /* quitamos height fijo */
}

#mainLogo {
  height: 50px;       /* controla el alto real del logo */
  width: auto;
  object-fit: contain;
  max-width: 150px;
}


/* --- ESTILOS PARA EL MENÚ DE USUARIO --- */
.user-menu-container {
  position: relative;
  margin-left: 12px;
  flex-shrink: 0;
}

.user-icon-btn {
  background: transparent;
  border: none;
  color: #00aaff;
  font-size: 1.8em;
  cursor: pointer;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: color .3s ease, transform .2s ease;
}

.user-icon-btn:hover { color: #00fff0; transform: scale(1.1); }


.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px); /* justo debajo del botón */
  right: 0;              /* pegado a la derecha del botón */
  background: linear-gradient(135deg, rgba(0,255,255,0.15), rgba(0,170,255,0.2));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  min-width: 160px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .35s ease-out, opacity .35s ease-out;
  pointer-events: none;
}

.user-dropdown-menu.show {
  max-height: 240px;
  opacity: 1;
  pointer-events: auto;
}

.dropdown-item {
  padding: 12px 16px;
  color: #eee;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
.dropdown-item:hover { background-color: rgba(0,170,255,0.3); color: #00fff0; }


/* Ajuste para el menú de usuario en móvil: siempre a la derecha del botón */
@media (max-width: 768px) {
  .top-menu {
    width: 94%;
    max-width: none;       /* libera límite para móviles */
    padding: 8px 14px;
    border-radius: 22px;
    min-height: 64px;
  }

  .logo-box {
    height: 56px;          /* logo un poco más chico en móvil para equilibrio */
    margin-right: 10px;
  }

  #mainLogo {
    max-width: 180px;      /* evita que coma todo el centro */
  }

  .animated-text {
    font-size: .98em;      /* ajuste fino para que no rompa */
  }

  /* el dropdown ya está anclado a la derecha del ícono por defecto */
}

/* Si quieres ultra-compacto en pantallas muy pequeñas */
@media (max-width: 380px) {
  .animated-text-container { display: none; } /* prioriza logo + usuario */
}


/*-------------------------------*/
/* FLOATING NAVIGATION MENU      */
/*-------------------------------*/
.floating-nav {
    position: fixed;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 10px;
    z-index: 999;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.nav-btn {
    background: transparent;
    border: none;
    color: #00aaff;
    font-size: 2.2em;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.nav-btn:hover:not(.disabled) {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.nav-btn.disabled {
    color: rgba(255, 255, 255, 0.2);
    cursor: not-allowed;
    pointer-events: none;
}

.nav-btn#navUpBtn:not(.disabled) {
    color: #00aaff;
}

.nav-btn#navDownBtn:not(.disabled) {
    color: #ff4500;
}

.nav-btn#navCenterBtn {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.5em;
}

.nav-btn#navCenterBtn:hover:not(.disabled) {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

@keyframes blink-animation {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.nav-btn.blink-animation {
    animation: blink-animation 1s infinite alternate;
}

/*-------------------------------*/
/* SNAP SECTIONS                 */
/*-------------------------------*/
.snap-container {
    width: 100%;
}

.snap-section {
    scroll-snap-align: start;
    min-height: 100vh;
    padding: 80px 20px 20px; /* Ajuste de padding para dejar espacio al menú superior */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    position: relative;
    z-index: 1;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

.section-content-flex {
    max-width: 1000px;
    width: 100%;
    padding: 40px 20px;
    border-radius: 15px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Estilo para el título principal */
.titulo-gradient {
    font-size: 3.5rem; /* Tamaño grande para desktop */
    font-weight: bold;
    background: linear-gradient(90deg, #00fff0, #00aaff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 15px rgba(0, 255, 240, 0.5);
    margin-bottom: 20px;
}

/* Ajustes específicos para ciertas secciones */
#operamos-en .section-content-flex,
#mt5 .section-content-flex {
    /* No necesitan max-width aquí si ya usan .container en HTML */
}

#weltrade .section-content-flex,
#iatrade .section-content-flex {
    max-width: 1100px; /* Mantener para un diseño más amplio en desktop */
    text-align: left; /* Alineación del texto en desktop */
    flex-direction: row; /* Diseño en fila en desktop */
    align-items: center;
    justify-content: space-around;
}

/*-------------------------------*/
/* FOOTER                        */
/*-------------------------------*/
.site-footer {
    background: linear-gradient(to top, #0d1a26, #1a2a3a);
    padding: 60px 0 40px;
    color: #aaa;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: auto; /* Permite que el footer se ajuste a su contenido */
    width: 100%;
    box-sizing: border-box;
}

.site-footer.snap-section {
    flex-direction: column; /* Asegura distribución vertical */
    justify-content: center;
    align-items: center;
    width: 100%;
}

.footer-content-wrapper {
    max-width: 1200px;
    width: 100%;
    padding: 0 20px; /* Padding horizontal para evitar que el contenido toque los bordes */
}

.footer-heading {
    font-size: 2rem;
    color: #00fff0;
    margin-bottom: 25px;
    text-shadow: 0 0 10px rgba(0, 255, 240, 0.3);
}

.footer-text {
    font-size: 0.75em;
    color: #bbb;
    max-width: 700px;
    margin: 0 auto 30px auto;
    line-height: 1.8;
    text-align: center;
}

.social-links {
    margin-top: 30px;
    margin-bottom: 30px;
}

.social-links a {
    color: #00aaff;
    font-size: 1.6em;
    margin: 0 15px;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.social-links a:hover {
    color: #00fff0;
    transform: translateY(-5px) scale(1.1);
}

.copyright-text {
    font-size: 0.85em;
    color: #888;
    margin-top: 30px;
    letter-spacing: 0.5px;
    text-align: center;
}

/*-------------------------------*/
/* MODALES DE VIDEO              */
/*-------------------------------*/
.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center; /* Centrar horizontalmente cuando visible */
    align-items: center; /* Centrar verticalmente cuando visible */
}

.modal-content {
    background-color: #1a2a3a;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 800px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.modal .close {
    color: #aaa;
    font-size: 40px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.modal .close:hover,
.modal .close:focus {
    color: #fff;
    text-decoration: none;
}

.modal iframe {
    width: 100%;
    height: 450px;
    display: block;
    border-radius: 8px;
}

/*------------------------------------*/
/* BOTONES COMBINADOS (ej. Ver Video) */
/*------------------------------------*/
.btn-combined {
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, #00aaff, #00fff0);
    border: none;
    border-radius: 30px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    color: #0f2027;
    box-shadow: 0 5px 15px rgba(0, 170, 255, 0.4);
    transition: all 0.3s ease;
    margin-top: 30px;
    overflow: hidden;
    position: relative;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.btn-combined .btn-left {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    color: #fff;
}

.btn-combined .btn-right {
    flex-grow: 1;
    text-align: center;
}

.btn-combined:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 170, 255, 0.6);
}

.btn-neon {
    background: linear-gradient(90deg, #00fff0, #00aaffab);
    border: none;
    border-radius: 25px;
    padding: 12px 25px;
    font-size: 1.1em;
    font-weight: bold;
    color: #051523;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 255, 240, 0.5);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-neon:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 255, 240, 0.8), 0 0 40px rgba(0, 170, 255, 0.6);
    color: #1b59bc;
}

/*-------------------------------*/
/* CARRUSEL DE LOGOS             */
/*-------------------------------*/
.logo-fade-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    overflow: hidden;
    position: relative;
    max-width: 300px;
    margin: 0 auto;
}

.logo-fade-carousel a {
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.logo-fade-carousel a.active {
    opacity: 1;
}

.logo-fade-carousel img {
    max-height: 70px;
    width: auto;
    object-fit: contain;
}

/*-------------------------------*/
/* ANIMACIÓN DE TEXTO OPERAMOS   */
/*-------------------------------*/
.hero-title-container {
    display: flex;
    align-items: center;
    font-size: 1.5em;
    white-space: nowrap;
    line-height: 1.3;
    height: auto;
}

.static-text {
    color: #fff;
    margin-right: 1.1em;
    flex-shrink: 0;
}

.animated-text-container {
    display: inline-flex;
    align-items: center;
    width: 150px; /* o el ancho calculado en JS */
    height: auto;
    overflow: visible;
}

#typingText {
    font-weight: bold;
    color: #000000;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.7);
}

.typing-cursor {
    display: inline-block;
    margin-left: 4px;
    width: 8px;
    height: 8px;
    background-color: #00ffff26;
    border-radius: 25%; /* 👈 círculo */
    animation: blink 1s step-end infinite;
    visibility: hidden;
}


@keyframes blink {
    50% { opacity: 0; }
}

/*----------------------------------------*/
/* Estilos para las imágenes de los logos (Operamos y otras) */
/*----------------------------------------*/
.imagen-logo {
    max-width: 110px; /* Tamaño máximo para el logo, puedes ajustarlo */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Asegura que la imagen sea un bloque para centrarla */
    margin: 0 auto 20px auto; /* Centra la imagen y añade espacio debajo */
    transition: transform 0.3s ease-in-out; /* Transición suave para el zoom */
    border: 1px solid white; /* Marco blanco de 1px */
    padding: 5px; /* Espacio entre la imagen y el borde */
    box-sizing: content-box; /* Asegura que el padding y el borde se añadan al tamaño total */
}

/* Efecto hover para las imágenes (zoom-image ya lo tienes, esto es un extra) */
.imagen-logo:hover {
    transform: scale(1.05); /* Ligeramente más grande al pasar el ratón */
}

/* Estilos para el texto justificado */
.texto-justificado {
    text-align: justify;
    text-rendering: optimizeLegibility; /* Mejora la legibilidad del texto justificado */
    word-spacing: -0.05em; /* Reduce ligeramente el espacio entre palabras si es necesario */
    letter-spacing: -0.01em; /* Reduce ligeramente el espacio entre letras si es necesario */
}

/* Ajustes adicionales para la sección si es necesario */
.section-content-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*-------------------------------*/
/* IMÁGENES FLOTANTES            */
/*-------------------------------*/
.image-floating {
    animation: floatAnimation 3s ease-in-out infinite;
    max-width: 100%;
}

@keyframes floatAnimation {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.scroll-track span {
    display: inline-block;
    padding: 0 30px;  /* más espacio entre items */
    color: #00fff0;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    user-select: none;
    transition: transform 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
    text-align: center;
    font-size: 1.2em;  /* más grande en desktop */
}

.scroll-track span:hover {
    transform: scale(1.15);
    color: #00aaff;
}

/* Animación más rápida solo en desktop */
.scroll-track.scroll-left {
    animation: scrollLeft 18s linear infinite;
}

.scroll-track.scroll-right {
    animation: scrollRight 18s linear infinite;
}

/* ==== Ajustes para móviles ==== */
@media (max-width: 767.98px) {
    .scroll-strip {
        padding: 10px 15px;
    }
    .scroll-track span {
        font-size: 0.9em;   /* vuelve al tamaño original */
        padding: 0 20px;    /* espacio normal */
    }
    .scroll-track.scroll-left {
        animation: scrollLeft 30s linear infinite; /* velocidad original */
    }
    .scroll-track.scroll-right {
        animation: scrollRight 30s linear infinite;
    }
}


/*-------------------------------*/
/* TARJETAS DE PERFIL Y RESERVA  */
/*-------------------------------*/
.equipo-section {
    padding-bottom: 80px;
}

.perfil-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    align-items: stretch;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.profile-card-diseno,
.reserva-cita-diseno {
    background: linear-gradient(145deg, #1a2a3a, #0d1a26);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    padding: 30px;
    color: #eee;
    text-align: center;
    flex: 1;
    min-width: 300px;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-card-diseno:hover,
.reserva-cita-diseno:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.profile-card-diseno img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #00fff0;
    box-shadow: 0 0 15px rgba(0, 255, 240, 0.5);
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.profile-card-diseno img:hover {
    transform: scale(1.05);
}

.profile-card-diseno h2 {
    font-size: 1.8rem;
    color: #00fff0;
    margin-bottom: 5px;
}

.profile-card-diseno h6 {
    font-size: 1.1rem;
    color: #00aaff;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.profile-card-diseno p {
    font-size: 0.9em;
    color: #bbb;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}

.social-icons {
    margin-top: auto;
}

.social-icons a {
    color: #00aaff;
    font-size: 1.5em;
    margin: 0 12px;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.social-icons a:hover {
    color: #00fff0;
    transform: translateY(-3px) scale(1.1);
}

.reserva-cita-diseno h3 {
    font-size: 1.8rem;
    color: #00fff0;
    margin-bottom: 15px;
}

.reserva-cita-diseno p {
    font-size: 0.95em;
    color: #bbb;
    line-height: 1.6;
    margin-bottom: 30px;
    flex-grow: 1;
}

.reserva-cita-diseno #calendar-button {
    background-color: #00aaff;
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.reserva-cita-diseno #calendar-button:hover {
    background-color: #0088cc;
    transform: translateY(-2px);
}

/*-------------------------------*/
/* ESTILOS PARA LAS MINI CHART CARDS (Movidos de <style> a CSS) */
/*-------------------------------*/
.minichart-card {
    background-color: rgba(36, 28, 61, 0.24);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-left: 5px solid; /* El color se definirá en JS para positivo/negativo */
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.1);
}

.minichart-card .card-title-mini {
    font-size: 0.85rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 0.5rem;
}

.minichart-card .price-variation-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Asegura que ocupe todo el ancho disponible */
    padding: 0 0.5rem; /* Pequeño padding horizontal */
}

.minichart-card .price-info {
    text-align: left;
    flex-grow: 1; /* Permite que la info de precio/variación ocupe el espacio disponible */
    margin-right: 0.5rem; /* Espacio entre el texto y el gráfico */
}

.minichart-card .mini-price {
    font-size: 0.85rem;
    color: #fff;
    margin-bottom: 0.2rem;
    line-height: 1; /* Ajusta la altura de línea */
}

.minichart-card .mini-variation {
    font-size: 0.85rem;
    font-weight: bold;
    white-space: nowrap;
}

.minichart-card .minichart-canvas-container {
    width: 80px; /* Ancho fijo para el gráfico */
    height: 40px; /* Alto fijo para el gráfico */
    flex-shrink: 0; /* Evita que el gráfico se encoja */
    display: flex;
    align-items: center;
    justify-content: center;
}

.minichart-card .minichart-canvas-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Colores para la variación */
.profit-positive {
    color: #00ff00 !important; /* Verde brillante */
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

.profit-negative {
    color: #ff4d4d !important; /* Rojo brillante */
    text-shadow: 0 0 5px rgba(255, 77, 77, 0.5);
}

/*-------------------------------*/
/* RESPONSIVIDAD                 */
/*-------------------------------*/

@media (max-width: 768px) {
    /* Ajustes RESPONSIVE para el top-menu sin romper diseño */
    .top-menu {
        padding: 6px 12px;
        max-width: 95%; /* Usa más ancho disponible pero sin romper */
    }

    .top-menu img {
        height: 40px;
        margin-right: 8px;
    }

    .animated-text-container {
        min-width: 0; /* Permite que el texto colapse si es necesario */
        flex-grow: 1;
        height: 25px;
    }

    .animated-text {
        font-size: 0.85em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .user-icon-btn {
        font-size: 1.5em;
    }

    .user-menu-container {
        order: 2; /* Mueve el icono de usuario al lado del logo si se envuelve */
        margin-left: auto; /* Empuja el icono a la derecha */
    }

    .floating-nav {
        left: 5px;
        gap: 10px;
        padding: 8px;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
    .nav-btn {
        font-size: 1.8em;
        padding: 4px;
    }
    .nav-btn#navCenterBtn {
        font-size: 1.2em;
    }
    .titulo-gradient {
        font-size: 2.5rem;
    }
    h2 {
        font-size: 1.8rem !important;
    }
    #operamos-en .col-md-4 {
        margin-bottom: 30px;
    }
    /* Asegura que las secciones con imagen y texto se apilen correctamente */
    #weltrade .section-content-flex,
    #iatrade .section-content-flex {
        flex-direction: column; /* Apila imagen y texto en vertical */
        text-align: center; /* Centra el texto */
        padding: 20px 15px; /* Reduce padding para móviles */
    }
    #weltrade .col-md-6,
    #iatrade .col-md-6 {
        order: unset !important; /* Desactiva el orden inverso de desktop */
    }
    .profile-card-diseno, .reserva-cita-diseno {
        max-width: 90%;
        margin: 0 auto;
    }
    .perfil-container {
        flex-direction: column;
        align-items: center;
    }
    /* Footer on mobile */
    .site-footer {
        padding: 40px 0 30px;
    }
    .footer-content-wrapper {
        padding: 0 15px;
    }
    .footer-heading {
        font-size: 1.8rem;
    }
    .modal iframe {
        height: 300px;
    }
    .texto-justificado {
        text-align: left; /* Mejora la legibilidad en pantallas pequeñas */
    }
}

@media (max-width: 576px) {
    .top-menu {
        width: 98%;
        max-width: 98%;
        padding: 6px 8px;
    }
    .top-menu img {
        height: 30px; /* Ajuste para pantallas muy pequeñas */
        margin-right: 5px;
    }
    .animated-text {
        font-size: 0.8em;
    }
    .titulo-gradient {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.5rem !important;
    }
    .btn-neon {
        padding: 10px 20px;
        font-size: 0.9em;
    }
    .footer-text {
        font-size: 0.85em;
    }
    .social-links a {
        font-size: 1.4em;
        margin: 0 10px;
    }
    .modal-content {
        width: 95%;
        padding: 15px;
    }
    .modal .close {
        font-size: 30px;
        right: 15px;
    }
    .modal iframe {
        height: 200px;
    }
}


.pill-btn {
  position: absolute;
  bottom: 25px; /* separación del borde inferior */
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #00aaff, #00fff0);
  color: #051523;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 10px 26px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 0 18px rgba(0,243,255,.3);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pill-btn:hover {
  transform: translateX(-50%) translateY(-3px) scale(1.05);
  box-shadow: 0 0 25px rgba(0,243,255,.6);
}


.pill-btn i {
  font-size: 1.2rem;
  animation: bounceY 1.4s infinite ease-in-out;
}

@keyframes bounceY {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

.bancus-cards-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
  overflow: hidden;
}

.bancus-card {
  width: 660px;
  max-width: 100%;
  opacity: 0;
  transform: translateX(100px); /* arrancan fuera de vista */
  transition: all 0.8s ease-out;
  filter: drop-shadow(0 10px 25px rgba(0, 243, 255, 0.3));
  border-radius: 12px;
}

/* cuando se activa la animación */
.bancus-card.show {
  opacity: 1;
  transform: translateX(0);
}

.card-left { transition-delay: 0.2s; }
.card-right { transition-delay: 0.5s; }


/*-------------------------------*/
/*            BANCUS             */
/*-------------------------------*/
.bancus-checklist{
  list-style:none; margin: 10px 0 0 0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.check-item{
  display:flex; align-items:flex-start; gap:10px;
  background: rgba(0, 255, 240, 0.06);
  border:1px solid rgba(0,255,240,.15);
  padding:10px 12px; border-radius:12px;
  box-shadow: inset 0 0 12px rgba(0,255,240,.08);
  transform: translateX(-18px); opacity:0; /* para animación de entrada */
}
.check-item i{
  color:#00fff0; font-size:1.15rem; line-height:1; margin-top:2px;
  filter: drop-shadow(0 0 6px rgba(0,255,240,.6));
}
.check-item span{ color:#e9f6ff; font-size:.95rem; }
.bancus-media-wrap{
  position:relative; display:inline-block;
  filter: drop-shadow(0 20px 40px rgba(0,243,255,.25));
}
.bancus-card-img{
  width: 660px; max-width: 92%;
  border-radius:16px;
  transform: translateX(40px); opacity:0; /* para animación de entrada */
}

/* Responsivo */
@media (max-width: 991.98px){
  .bancus-media-wrap{ margin-top: 10px; }
  .bancus-card-img{ transform: translateX(20px); }
}


/* Suaviza animaciones */
.check-item,
.bancus-card-img {
  will-change: transform, opacity;
}

/* Asegura que la imagen nunca desborde en pantallas pequeñas */
.bancus-card-img {
  height: auto;
  max-width: 100%;
}

/* Reduce un poco el ancho base en tablets */
@media (max-width: 1199.98px){
  .bancus-card-img { width: 380px; }
}

/* Respeto a usuarios con “reducir movimiento” */
@media (prefers-reduced-motion: reduce) {
  .check-item,
  .bancus-card-img {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/*-------------------------------*/
/*        iA Trade               */
/*-------------------------------*/
/* ====== iA Trade (estilos locales y no-invasivos) ====== */
.ia-checklist{
  list-style:none; margin:12px 0 0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.ia-checklist .check-item{
  display:flex; align-items:flex-start; gap:10px;
  background: rgba(0,255,240,.06);
  border:1px solid rgba(0,255,240,.14);
  padding:10px 12px; border-radius:12px;
  box-shadow: inset 0 0 12px rgba(0,255,240,.07);
}
.ia-checklist .check-item i{ color:#00fff0; font-size:1.05rem; margin-top:2px; }
.ia-checklist .check-item span{ color:#e9f6ff; font-size:.95rem; }

.ia-media-wrap{
  position:relative; display:inline-block; width:100%;
  max-width:520px; margin-left:auto; margin-right:auto;
  filter: drop-shadow(0 20px 40px rgba(0,243,255,.22));
}
.ia-visual{
  width:100%; border-radius:14px;
  border:1px solid rgba(0,255,240,.15);
}

/* Badge +33% */
.ia-badge{
  position:absolute; top:-10px; right:-10px;
  background: radial-gradient(120px 60px at 70% 50%, #00fff0 0%, #00aaff 55%, rgba(0,170,255,.35) 100%);
  color:#051523; border-radius:18px; padding:10px 14px;
  box-shadow: 0 0 25px rgba(0,255,240,.45);
  display:flex; align-items:center; gap:8px; z-index:2;
}
.ia-badge .ia-badge-label{
  font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.ia-badge .ia-badge-value{
  font-size:1.05rem; font-weight:800;
}

/* Overlay techno ticks */
.ia-overlay{
  position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1;
  mix-blend-mode: screen;
}
.ia-overlay .tick{
  position:absolute; font: 600 .85rem 'Courier New', monospace;
  padding:2px 6px; border-radius:6px;
  backdrop-filter: blur(2px);
  opacity:.85;
}
.ia-overlay .up{ color:#39ff14; background:rgba(57,255,20,.06); border:1px solid rgba(57,255,20,.2); }
.ia-overlay .down{ color:#ff4d4d; background:rgba(255,77,77,.06); border:1px solid rgba(255,77,77,.2); }

/* posiciones iniciales aleatorias (se ajustan con JS si quieres) */
.ia-overlay .tick:nth-child(1){ top:10%; left:8%; }
.ia-overlay .tick:nth-child(2){ top:22%; right:12%; }
.ia-overlay .tick:nth-child(3){ bottom:18%; left:14%; }
.ia-overlay .tick:nth-child(4){ bottom:28%; right:18%; }
.ia-overlay .tick:nth-child(5){ top:40%; left:26%; }

/* Responsive */
@media (max-width: 991.98px){
  .ia-badge{ right:0; top:-8px; transform: scale(.95); }
}
@media (max-width: 575.98px){
  .ia-badge{ transform: scale(.9); }
}

/* ===== iA Trade — Market Cards ===== */
.ia-media-wrap{
  position:relative; display:block; max-width:520px; margin-inline:auto;
  filter: drop-shadow(0 20px 40px rgba(0,243,255,.18));
}
.ia-badge{
  position:absolute;
  top:-6px;
  right:8px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:9999px;
  background:rgba(0, 243, 255, .12);
  border:1px solid rgba(0, 243, 255, .35);
  box-shadow: 0 0 18px rgba(0, 243, 255, .25);
  backdrop-filter:blur(6px);
}
.ia-badge-label{ font-size:.8rem; opacity:.85; }
.ia-badge-value{ font-weight:700; color:#39ff14; }

.market-stack{
  display:flex; flex-direction:column; gap:14px; padding-top:24px;
}
.market-card{
  background: linear-gradient(145deg, rgba(10,16,28,.7), rgba(12,24,40,.6));
  border:1px solid rgba(0,255,240,.12);
  border-left:3px solid rgba(0,255,240,.35);
  border-radius:14px;
  padding:12px;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 0 20px rgba(0,255,240,.03);
  will-change: transform, opacity;
}
.market-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,243,255,.18), inset 0 0 26px rgba(0,255,240,.05);
}

.market-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;
}
.market-head .pair{
  display:flex; align-items:center; gap:8px; color:#e9f6ff; font-weight:700; letter-spacing:.2px;
}
.market-head .pair i{ color:#00fff0; }

.trend{
  display:flex; align-items:center; gap:6px; font-weight:800; font-size:.9rem;
  padding:4px 8px; border-radius:10px; line-height:1; border:1px solid;
}
.trend-up{ color:#39ff14; background:rgba(57,255,20,.06); border-color: rgba(57,255,20,.28);}
.trend-down{ color:#ff4d4d; background:rgba(255,77,77,.06); border-color: rgba(255,77,77,.28);}

.market-body{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.market-body .price{
  font-weight:800; font-size:1.15rem; color:#fff;
  text-shadow: 0 0 10px rgba(0,255,240,.18);
}
.market-body .spark{
  width:120px; height:40px; flex:0 0 auto;
}
.market-body .spark canvas{
  width:100% !important; height:100% !important;
}

/* Responsive badge */
@media (max-width: 991.98px){
  .ia-badge{ right:0; top:-8px; transform: scale(.95); }
}
@media (max-width: 575.98px){
  .ia-badge{ transform: scale(.9); }
}

/* Titulo Seccion iA Trade*/
.section-title { margin-bottom: .95rem; line-height: 1.15; }
.section-title .brand { font-weight: 700; letter-spacing: .2px; }
.section-title .subtitle {
  font-size: .9rem; 
  color: #7fdcff; 
  margin-top: .25rem;
  text-transform: none;
  opacity: .9;
}
@media (max-width: 576px){
  .section-title .subtitle { font-size: .95rem; }
}

/* iA Trade: acomodo del badge flotante */
.ia-media-wrap{
  position: relative;
  padding-top: 36px; /* espacio para que el badge no choque */
}

.ia-badge{
  position: absolute;
  top: -6px;           /* súbelo/bájalo fino si quieres */
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9999px;
  background: rgba(0, 243, 255, .12);
  border: 1px solid rgba(0, 243, 255, .35);
  box-shadow: 0 0 18px rgba(0, 243, 255, .25);
  backdrop-filter: blur(6px);
}
.ia-badge-label{ font-size: .8rem; opacity: .85; }
.ia-badge-value{ font-weight: 700; color: #39ff14; }

/* Tarjetas de mercado: precio + porcentaje a la derecha como “pill” */
.market-card .price-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.market-card .price{
  font-size: 1.05rem;
  font-weight: 700;
  color: #e9f6ff;
}

/* Pill derecha */
.market-card .trend.pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  padding: 4px 8px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  line-height: 1;
}

/* Colores por tendencia (ya los usas) */
.market-card.trend-up .trend.pill{
  border-color: rgba(57,255,20,.35);
  box-shadow: 0 0 12px rgba(57,255,20,.15) inset;
}
.market-card.trend-down .trend.pill{
  border-color: rgba(255,77,77,.35);
  box-shadow: 0 0 12px rgba(255,77,77,.12) inset;
}

/* Quita márgenes extra de la columna para compactar */
.ia-market-stack{ margin-top: 8px; }


  .btn-neon{
    --h:56px;
    height:var(--h);
    display:inline-flex;align-items:center;justify-content:center;
    padding:0 28px;border:0;border-radius:14px;
    color:#fff;font-weight:800;letter-spacing:.3px;text-decoration:none;
    background:linear-gradient(135deg,var(--wel-1) 0%,var(--wel-2) 65%);
    box-shadow:0 8px 22px #0066ff55,inset 0 0 0 1px #ffffff22;
    transition:filter .15s ease, transform .12s ease;
  }
  .btn-neon:hover{filter:brightness(1.08)}
  .btn-neon:active{transform:translateY(1px)}

  /* variante ghost si la usas en algún lado */
  .btn-neon.ghost{
    background:#0f172a;border:1px solid #1b2a44;color:#e8f7ff;
    box-shadow:none;
  }
  .btn-neon.ghost:hover{box-shadow:0 0 0 3px #40c4ff55}

  /* 3) PROFIT badge: texto visible y con color por signo */
  .iatrade .ia-badge{
    position:absolute;right:0;top:-18px;transform:translateY(-50%);
    display:inline-flex;gap:10px;align-items:center;
    padding:10px 16px;border-radius:999px;
    background:radial-gradient(120px 80px at 0% 50%, #0c1a17 0, #081016 60%);
    border:1px solid #114a3f;
    box-shadow:inset 0 0 18px #0a2b22, 0 6px 16px #0008;
  }
  .ia-badge-label{opacity:.85;font-weight:700;letter-spacing:.4px;color:#cde9e4}
  .ia-badge-value{font-weight:900}
  .ia-badge-value.pos{color:var(--success)}
  .ia-badge-value.neg{color:var(--danger)}

  /* Por si el container de tarjetas necesita contraste para la pill de cambio */
  .iatrade .market-card .trend.pill{
    background:#0b1422;border:1px solid #22324f;border-radius:999px;
    padding:6px 10px;font-weight:800
  }
  .iatrade .market-card.trend-up .trend{color:var(--success)}
  .iatrade .market-card.trend-down .trend{color:var(--danger)}


/* ===========================
   PERFIL + AGENDA (SLIDE ARC)
   =========================== */

/* contenedor seguro y centrado */
#perfil-diseno,
#perfil-diseno .container,
#perfil-diseno .card-shell { overflow: visible !important; }
#perfil-diseno .perfil-container{ display:flex; justify-content:center; }

/* ---------- VARIABLES Y SHELL ---------- */
#perfil-diseno .card-shell{
  position: relative;
  width: 100%;
  max-width: 660px;                /* cerrado: solo perfil centrado */
  --panel-h: 600px;                /* alto consistente de ambas tarjetas */
  --open-profile-w: 44%;           /* ancho perfil al abrir */
  --open-agenda-w: 52%;            /* ancho agenda al abrir */
  --gap: 24px;                     /* separación entre tarjetas */
  --btn-size: 92px;                /* botón flotante */
  --btn-right: -32px;
  --btn-bottom: -24px;
  transition: max-width .55s ease;
}

/* abierto: damos ancho para que quepan dos columnas + gap */
#perfil-diseno .card-shell.open{
  max-width: 1080px;
}

/* ---------- PERFIL (cerrado: full, abierto: columna izq) ---------- */
#perfil-diseno .profile-card-diseno{
  position: absolute; inset: 0;
  min-height: var(--panel-h);
  display: flex; flex-direction: column;
  z-index: 3;
  transform: translateX(0);
  transition: left .6s ease, width .6s ease, transform .6s cubic-bezier(.25,.8,.25,1), filter .35s ease;
}

/* al abrir, el perfil ocupa su % a la izquierda */
#perfil-diseno .card-shell.open .profile-card-diseno{
  left: 0; right: auto;
  width: var(--open-profile-w);
  filter: brightness(.96) saturate(.96);
}

/* ---------- AGENDA (cerrada: oculta, abierta: columna der) ---------- */
#perfil-diseno .agenda-panel{
  position: absolute; inset: 0;
  min-height: var(--panel-h);
  padding: 12px 0 18px;
  display: flex; flex-direction: column;

  background:#f7fbff; color:#08111a;
  border:1px solid rgba(0,140,200,.08);
  border-radius: inherit;
  box-shadow: 0 20px 45px rgba(0,0,0,.28);

  /* cerrada */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(10%);
  transition: opacity .35s ease, transform .6s cubic-bezier(.25,.8,.25,1), visibility 0s linear .35s, left .6s ease, right .6s ease;
}

/* abierta: la agenda se coloca a la derecha exacta (usa left calculado) */
#perfil-diseno .card-shell.open .agenda-panel{
  left: calc(var(--open-profile-w) + var(--gap));
  right: 0;                        /* ancho = (100% - perfil - gap) automáticamente */
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(0);
  z-index: 5;
}

/* ============================
   BOTÓN FLOTANTE CIAN (ARC DOCK)
   ============================ */

/* El shell aísla capas (evita mezclas raras de z-index) */
#perfil-diseno .card-shell{
  isolation:isolate;
  --btn-size:92px;
}

/* Posición del HUB a la derecha, centrado vertical */
#perfil-diseno .arc-dock{
  position:absolute;
  top:50%;
  right:-65px;
  transform:translateY(-50%);
  pointer-events:auto !important;
  z-index:1100;                  /* por encima del panel */
}

/* Botón HUB */
#perfil-diseno .btn-door-cy{
  --pulse:#00e5ff; --glow:rgba(0,229,255,.5);
  width:var(--btn-size); height:var(--btn-size);
  border:0; border-radius:20px; cursor:pointer;
  display:grid; place-items:center;
  background:linear-gradient(180deg,#0c1118,#0a0f15);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 0 1px rgba(0,229,255,.18),
    0 16px 34px rgba(0,0,0,.5);
  position:relative;
  transition:transform .16s ease;
  animation:wob 3s ease-in-out infinite;
  z-index:1200;                  /* botón sobre cualquier cosa cercana */
}

#perfil-diseno .btn-door-cy:hover{
  transform:scale(1.05);
}

@keyframes wob{
  0%,100%{ filter:drop-shadow(0 0 0 var(--glow)) }
  50%{    filter:drop-shadow(0 0 10px var(--glow)) }
}

/* Etiqueta debajo del botón, centrada */
#perfil-diseno .btn-door-cy .btn-label{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  font-weight:700;
  font-size:.9rem;
  color:#00e5ff;
  text-shadow:0 0 14px var(--glow);
}

/* Carrusel de iconos dentro del botón */
#perfil-diseno .hub-icons{
  position:relative;
  width:1em; height:1em;
  font-size:28px; line-height:1;
}

#perfil-diseno .hub-icons i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  opacity:0; transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease;
  color:#aee9ff;  /* base; puedes personalizar por icono abajo */
}

/* Icono visible */
#perfil-diseno .hub-icons i.is-active{
  opacity:1; transform:translateY(0);
}

/* Si usas SVG de aro/progreso */
#perfil-diseno .ring .bg{ stroke:rgba(255,255,255,.14); }
#perfil-diseno .ring .prog{
  stroke:var(--pulse);
  stroke-linecap:round;
  stroke-dasharray:339.292;
  stroke-dashoffset:339.292;
}

/* Panel por debajo del botón HUB */
#perfil-diseno .agenda-panel{ z-index:5; }

/* Seguridad adicional: el botón siempre clickeable */
#perfil-diseno #btnContacta{
  position:relative;
  z-index:1200;
  pointer-events:auto !important;
}

/* Los iconos NO capturan el click (pasa al botón) */
#perfil-diseno #btnContacta .btn-ico{
  position:absolute;
  inset:0;
  display:grid; place-items:center;
  opacity:0; transform:scale(.85);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;            /* clave */
  font-size:1.35rem;
}
#perfil-diseno #btnContacta .btn-ico.is-active{
  opacity:1; transform:scale(1);
}

/* Colores por icono (opcional) */
#perfil-diseno #btnContacta .bi-calendar-event{ color:#00e5ff; }
#perfil-diseno #btnContacta .bi-whatsapp{      color:#25d366; }
#perfil-diseno #btnContacta .bi-envelope{      color:#e6eaef; }

/* Mobile: botón abajo, centrado */
@media (max-width:540px){
  #perfil-diseno .card-shell{ --btn-size:82px; }
  #perfil-diseno .arc-dock{
    top:auto; bottom:12px;
    right:50%; transform:translate(50%,0);
  }
  #perfil-diseno .btn-door-cy .btn-label{ font-size:.85rem; }
}

/* Respeto reduce motion */
@media (prefers-reduced-motion:reduce){
  #perfil-diseno .btn-door-cy{ animation:none; }
  #perfil-diseno .hub-icons i{ transition:none; }
}

/* ---------- HEADER + CERRAR ---------- */
#perfil-diseno .card-head{ position:relative; padding:22px 22px 6px; }
#perfil-diseno .card-head h3{ margin:0 0 4px; font-size:1.28rem; }
#perfil-diseno .muted{ opacity:.65; font-size:.95rem; margin:0 0 8px; }
#perfil-diseno .panel-close{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:10px; border:1px solid rgba(0,0,0,.12);
  background:#fff; cursor:pointer; line-height:1; font-weight:700;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}
#perfil-diseno .panel-close:hover{ background:#0b1020; color:#fff; }

/* ---------- ACCIONES ARRIBA + SEPARADOR ---------- */
#perfil-diseno .agenda-actions{
  margin-top:6px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
#perfil-diseno .cp-book-btn,
#perfil-diseno .btn-wa-top{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:12px; padding:10px 14px; text-decoration:none;
  font-weight:700; white-space:nowrap; box-shadow:0 6px 14px rgba(0,0,0,.08);
}
#perfil-diseno .cp-book-btn{ background:#0b1020; color:#fff; border:1px solid rgba(0,0,0,.2); }
#perfil-diseno .cp-book-btn:hover{ filter:brightness(1.07); }
#perfil-diseno .btn-wa-top{ background:#fff; color:#0b1020; border:1px solid rgba(0,0,0,.12); }
#perfil-diseno .btn-wa-top:hover{ background:#0b1020; color:#fff; }
#perfil-diseno .btn-wa-top i.bi-whatsapp{ color:#000; }
#perfil-diseno .btn-wa-top:hover i.bi-whatsapp{ color:#fff; }

#perfil-diseno .actions-sep{
  margin:6px 0 10px; display:flex; align-items:center; justify-content:center; gap:12px;
}
#perfil-diseno .actions-sep::before,
#perfil-diseno .actions-sep::after{ content:""; height:1px; width:80px; background:rgba(0,0,0,.12); }
#perfil-diseno .actions-sep span{ font-size:.9rem; opacity:.65; }

/* ---------- CONTENEDOR DEL FORM ---------- */
#perfil-diseno .agenda-controls{
  position:relative; z-index:2;
  max-width:560px; width:100%;
  margin:0 auto 16px; padding:0 20px;
}
#perfil-diseno #gc-button{ min-height:48px; display:flex; justify-content:center; }
#perfil-diseno .form-title{ text-align:center; margin:14px 0 6px; font-size:1.05rem; opacity:.9; }

/* ---------- MINI FORM ---------- */
#perfil-diseno .cp-mini-form{
  margin:16px auto 0; padding:14px 18px 16px;
  border:1px solid rgba(0,140,200,.10); border-radius:14px;
  background:#ffffff; max-width:420px; width:100%;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  position:relative; z-index:2;
}
#perfil-diseno .cp-mini-form .row{ display:flex; gap:10px; margin-bottom:10px; }
#perfil-diseno .cp-mini-form .row .col{ flex:1; min-width:0; }
#perfil-diseno .cp-mini-form label{ display:block; font-size:.85rem; opacity:.75; margin-bottom:4px; }
#perfil-diseno .cp-mini-form input,
#perfil-diseno .cp-mini-form textarea{ width:100%; max-width:100%; box-sizing:border-box; }
#perfil-diseno .cp-mini-form input:focus,
#perfil-diseno .cp-mini-form textarea:focus{ outline:none; border-color:#00c7ff; box-shadow:0 0 0 3px rgba(0,199,255,.18); }
#perfil-diseno .cp-mini-form .form-actions{ margin-top:10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; }
#perfil-diseno .cp-mini-form .btn-send{ background:#0b1020; color:#fff; border:0; border-radius:10px; padding:10px 14px; cursor:pointer; }
#perfil-diseno .cp-mini-form .btn-send:hover{ filter:brightness(1.05); }
#perfil-diseno .cp-mini-form .form-status{ margin-top:8px; font-size:.9rem; opacity:.85; }

/* ocultar honeypot/“campo fantasma” si existiera */
#perfil-diseno .cp-mini-form .hp,
#perfil-diseno .cp-mini-form input[name="website"],
#perfil-diseno .cp-mini-form input[name="url"]{
  position:absolute !important; left:-9999px !important; opacity:0 !important; pointer-events:none !important;
}

/* captcha holder */
#perfil-diseno #captcha-holder{ display:flex; justify-content:center; align-items:center; padding: 8px 0 2px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 480px){
  #perfil-diseno .card-shell{ --panel-h: 560px; max-width: 100%; }
  /* en móvil, abrimos en una sola columna */
  #perfil-diseno .card-shell.open .profile-card-diseno,
  #perfil-diseno .card-shell.open .agenda-panel{
    left:0; right:0; width:100%;
  }
  #perfil-diseno #recaptcha{ transform:scale(.86); transform-origin:center; }
}


/* ===========================
   PATCH: desduplicación y scope
   (añadir al FINAL del CSS)
   =========================== */

/* 1) Imágenes: evitar desbordes globales */
img { max-width: 100%; height: auto; }

/* 2) Limitar estilos "viejos" de tarjetas del equipo
   para que NO afecten al bloque #perfil-diseno */
.equipo-section .perfil-container { 
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  align-items: stretch;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.equipo-section .profile-card-diseno,
.equipo-section .reserva-cita-diseno {
  background: linear-gradient(145deg, #1a2a3a, #0d1a26);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  padding: 30px;
  color: #eee;
  text-align: center;
  flex: 1;
  min-width: 300px;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(255,255,255,.05);
  transition: transform .3s ease, box-shadow .3s ease;
}
.equipo-section .profile-card-diseno:hover,
.equipo-section .reserva-cita-diseno:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0,0,0,.6);
}
.equipo-section .profile-card-diseno img {
  width: 120px; height: 120px; border-radius: 50%;
  object-fit: cover; border: 3px solid #00fff0;
  box-shadow: 0 0 15px rgba(0,255,240,.5);
  margin-bottom: 20px; transition: transform .3s ease;
}
.equipo-section .profile-card-diseno img:hover { transform: scale(1.05); }
.equipo-section .profile-card-diseno h2 { font-size: 1.8rem; color: #00fff0; margin-bottom: 5px; }
.equipo-section .profile-card-diseno h6 { font-size: 1.1rem; color: #00aaff; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; }
.equipo-section .profile-card-diseno p { font-size: .9em; color: #bbb; line-height: 1.6; margin-bottom: 25px; flex-grow: 1; }

@media (max-width: 768px){
  .equipo-section .profile-card-diseno, 
  .equipo-section .reserva-cita-diseno { max-width: 90%; margin: 0 auto; }
  .equipo-section .perfil-container { flex-direction: column; align-items: center; }
}

/* 3) iA Trade: unificar reglas y evitar duplicación
   (forzamos a usar SOLO esta versión) */
.ia-media-wrap{
  position: relative;
  display: block;
  max-width: 520px;
  margin-inline: auto;
  padding-top: 36px; /* espacio para el badge */
  filter: drop-shadow(0 20px 40px rgba(0,243,255,.18));
}
.ia-badge{
  position: absolute;
  top: -6px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9999px;
  background: rgba(0, 243, 255, .12);
  border: 1px solid rgba(0, 243, 255, .35);
  box-shadow: 0 0 18px rgba(0, 243, 255, .25);
  backdrop-filter: blur(6px);
}
.ia-badge-label{ font-size: .8rem; opacity: .85; }
.ia-badge-value{ font-weight: 700; color: #39ff14; }
@media (max-width: 991.98px){ .ia-badge{ right:0; top:-8px; transform: scale(.95); } }
@media (max-width: 575.98px){ .ia-badge{ transform: scale(.9); } }

/* 4) Sección de perfil (arc): asegurar aire con el resto de secciones
   y altura sólida para no pisar el footer */
#perfil-diseno{ padding-block: 48px; }
#perfil-diseno .perfil-container{ min-height: var(--panel-h, 600px); align-items: stretch; }
#perfil-diseno .card-shell{ height: var(--panel-h, 600px); }
#perfil-diseno .card-shell.open{ height: var(--panel-h, 600px); }