/* ─────────────────────────────────────────────────────────────── */
/* --- Seguros anti-desbordamiento ------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;   /* padding y border dentro del ancho real */
}

html,
body {
  max-width: 100%;          /* nunca más ancho que el viewport        */
  overflow-x: hidden;       /* corta cualquier desbordamiento X       */
}
/* ─────────────────────────────────────────────────────────────── */

/* Estilos generales */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    color: #ffffff;
    line-height: 1.5;
    padding-top: 60px; /* igual que la altura de .supraheader */
    overflow-x: hidden;
}

.hidden {
    display: none;
}
.visible {
    display: block;
}

/* Contenedor del logo */
.logo-container {
    position: relative;
    text-align: center; /* Centrar horizontalmente el logo */
    z-index: 2; /* Asegura que el logo esté visible */
    margin-bottom: 425px; /* Espaciado entre el logo y el título */
}

/* Estilo del logo */
.header-logo {
    width: 135px; /* Tamaño específico del logo */
    height: auto; /* Mantener proporciones */
    display: inline-block; /* Asegura que el logo no ocupe todo el ancho */
}

/* Encabezado de pantalla completa */
header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #121212;
    position: relative;
    color: white;
    text-align: center;
    overflow: hidden;
}

/* Video de fondo */
.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0; /* Asegura que esté detrás de todo */
    opacity: 1; /* Asegúrate de que sea visible */
}

/* Capa negra con transparencia */
header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(51, 51, 51, 0.80); /* transparencia */
    z-index: 1; /* Justo encima del video */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    position: relative;
    z-index: 1; /* Encima de la capa negra */
}

header h1::before, header h1::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 6px;
    background-color: #F5866F;
    margin: 0 15px;
    vertical-align: middle;
}

header h1 span::after {
    content: '';
    position: absolute;
    right: 50%;
    bottom: -12px;
    transform: translateX(-210%);
    width: 100px;
    height: 62px;
    border-radius: 30%;
    border: 4px solid #F5866F;
    z-index: -1;
    background-color: transparent;
}

/* —— Estilo para “NO” en el overlay —— */
.no-salmon{
  color:#F5866F;          /* salmón corporativo */
  border:none!important;  /* elimina posible recuadro */
  background:transparent!important;
  padding:0!important;    /* por si algún padding heredado generaba marco */
}

header p {
    margin-top: 20px;
    font-size: 1.5rem;
    font-weight: 300;
}

/* Subrayado circular */
header h1 span {
    position: relative;
    display: inline-block;
    z-index: 1;
}

header h1 span::after {
    content: '';
    position: absolute;
    right: 50%;
    bottom: -12px; /* Espaciado correcto debajo del texto */
    transform: translateX(-208%);
    width: 100px; /* Asegúrate de que el ancho sea igual al contenido del span */
    height: 62px; /* Ajusta la altura para que sea un subrayado, o usa un valor mayor si quieres un círculo */
    border-radius: 30%; /* Esto crea el efecto circular */
    border: 4px solid #F5866F; /* Ancho y color del subrayado circular */
    z-index: -1; /* Para que quede detrás del texto */
    background-color: transparent; /* Asegúrate de no cubrir el texto con un fondo */
}

/* Icono del mouse */
.mouse-icon {
    position: absolute;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    animation: bounce 2s infinite;
    z-index: 2; /* Encima de la capa oscura */
}

.mouse-icon .scroll-wheel {
    width: 25px;
    height: 40px;
    border: 2px solid #F5866F;
    border-radius: 20px;
    position: relative;
}

.mouse-icon p {
    margin-top: 10px;
    font-size: 1.5rem; /* Tamaño más pequeño del texto */
    color: #ffffff; /* Color blanco */
    font-weight: 300; /* Grosor del texto más ligero */
    z-index: 2; /* Encima del texto de overlay */
}

.mouse-icon .scroll-wheel::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background: #F5866F;
    border-radius: 50%;
    animation: scroll 0.8s infinite;
}

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

@keyframes scroll {
    0% {
        top: 5px;
    }
    50% {
        top: 15px;
    }
    100% {
        top: 5px;
    }
}

/* Fondo con siluetas */
header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('fondo-siluetas.png'); /* Ruta al archivo del fondo */
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.1;
    z-index: -1;
}

/* Preloader general */
.preloader {
    position: fixed;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: #070707;
    z-index: 999999999;
}

/* Estilo del logo */
.preloader-logo {
    width: 100px;
    height: 100px; /* Tamaño del logo */
    margin-bottom: 40px; /* Espaciado entre el logo y el contador */
}

/* Estilo del contador */
.preloader .counter {
    position: absolute;
    top: 65%; /* Justo debajo del logo */
    font-size: 4rem; /* Tamaño del texto */
    color: #F5866F; /* Coral suave */
    font-weight: bold;
    text-align: center;
}

/* Barra de progreso - contenedor */
.progress-bar {
    width: 60%; /* Ajusta el ancho total de la barra */
    height: 20px;
    background-color: rgba(255, 255, 255, 0.2); /* Fondo gris claro */
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

/* Barra de progreso - progreso */
.progress {
    width: 0;
    height: 100%;
    background-color: #F5866F; /* Color coral */
    transition: width 0.1s linear;
}

/* Sección: "Así funciona la iA" */

/* 2) Encabezado */
.how-it-works-heading {
  background-color: #bdbdbd; /* gris claro */
  padding: 20px 10px 10px 10px;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: 0;  /* Queda pegado a la sección anterior */
}

/* Título dentro del encabezado */
.how-it-works-section h2 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 0;
    background-color: #64AEB3;
    color: rgb(255, 255, 255);
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
}

/* Contenedor de los 4 pasos */
.steps-container {
  background-color: #bdbdbd; /* gris claro */
  max-width: auto;
  margin: auto;
  padding: 30px 80px 70px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  line-height: 4;
}

/* 4) Cada "cajita" de paso */
.step {
  background: #ffffff; 
  border-radius: 10px;
  padding: 25px;
  text-align: center;
  color: #333; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 5) Hacer más grande el ícono */
.step-icon {
  width: 180px; /* Ajusta a tu gusto */
  height: auto;
  margin-bottom: 15px;
  margin-top: 15px;
}

/* Palabra clave (Selecciona...) */
.keyword {
  color: #F5866F;
  font-weight: 700;
  font-size: 2rem; /* Aumentado */
}

/* Numeración (1.,2.,3.,4.) */
.step-number {
  color: #999999;      /* Gris tenue */
  font-weight: 600;
  font-size: 2rem;
  margin-right: 5px;
}

/* Texto del paso */
.step p {
  font-size: 1.4rem;
  font-weight: 300; 
  line-height: 1.4;
  margin: 0;
  text-align: center; 
}

/* Pleca "Selecciona un video" */
.select-video-separator {
  background-color: #ffffff;
  color: #3b3b3b;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.1;
  text-align: center;
  padding: 30px 40px 10px 40px;
  position: relative;
  z-index: 2;
  margin-top: 0;  /* Queda pegado a la sección anterior */
}

.select-video-separator h2 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 2rem;
    background-color: #F5866F;
    color: rgb(255, 255, 255);
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
}

/* Sección de introducción */
.intro-section {
    background-color: #64aeb3;
    padding: 10px 0; /* Más espacio dentro de la sección */
    position: relative; /* Ajuste para que respete el flujo normal del documento */
    margin-bottom: 0px; /* Espaciado entre la introducción y los videos */
    text-align: center;
}

.intro-text {
    text-align: center;
    color: #ffffff; /* Gris oscuro */
    font-size: 2rem;
    margin: 10px 0; /* Espaciado superior e inferior */
    padding: 0 10px; /* Espaciado lateral */
    line-height: 1.3;
    background-color: #64aeb3; /* Fondo blanco */
}

/* Cuadrícula de videos */
.video-grid {
    margin-top: 30px; /* Espaciado superior */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px; /* Espaciado entre las tarjetas */
    padding: 20px 40px 60px 40px;
    max-width: 1400px;
    margin: 0 auto; /* Centrar la cuadrícula */
    background-color: #ffffff;
    border-radius: 0px;
}

.video-card {
    position: relative;
    display: flex;
    flex-direction: row;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.video-card:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.video-card video {
    width: 85%;
    height: auto;
    display: block;
}

 /* Popup para el feed de la cámara */
#popup-video-feed {
    width: 300px;
    height: 225px;
    background: black;
    border: 2px solid white;
    border-radius: 5px;
    margin-top: 10px;
}

#test-start-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#test-start-popup video {
    width: 300px;
    height: 225px;
    background: black;
    border: 2px solid white;
    border-radius: 5px;
    margin-top: 10px;
}

#test-start-popup button {
    margin-top: 15px;
    padding: 10px 20px;
    background: #ff5733;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
}

#test-start-popup button:hover {
    background: #ff7844;
}

#camera-instruction {
    margin-top: 10px;
    font-size: 14px;
    color: white;
    text-align: center;
    font-style: italic;
}

/* Overlay completo para el temporizador */
#countdown-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.8);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999999;
}

/* Círculo central del countdown */
.countdown-circle {
  position: relative;
  width: 300px;               /* Ajusta el tamaño deseado */
  height: 300px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7); /* Fondo semitransparente */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Número grande en el centro */
.countdown-number {
  font-size: 15rem;            /* Tamaño grande */
  color: #FFFFFF;
  z-index: 2;
}

/* Anillo radar giratorio */
.radar-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 10px solid transparent;
  border-top-color: rgba(245, 134, 111, 0.7); /* Color similar al de la progress bar */
  border-radius: 100%;
  animation: rotateRadar 1s linear infinite;
  z-index: 1;
}

@keyframes rotateRadar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Cuando la .video-card entra a fullscreen,
   ocultamos su .video-title y .tabs para que no se vean en la esquina */
.video-card:fullscreen .video-title,
.video-card:fullscreen .tabs {
    display: none !important;
}

.video-card:fullscreen .tabs,
.video-card:fullscreen .video-title {
  display: none !important;
}

/* Asegurar que la tarjeta del video ocupe toda la ventana */
.video-card:fullscreen {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000; /* Fondo negro para evitar distracciones */
    overflow: hidden;
}

/* Asegurar que el video dentro de la tarjeta se ajuste correctamente */
.video-card:fullscreen video {
    width: auto;
    height: 100%;
    object-fit: contain; /* Ajusta el video dentro de la pantalla */
}

.video-overlay,
.camera-status {
    position: fixed;
    z-index: 9999; /* Asegura que estén sobre el video */
    pointer-events: none; /* Evita que interfieran con la interacción */
}

.video-overlay {
    position: absolute;
    bottom: 20px;
    left: 40px;
    background-color: rgba(0, 0, 0, 0.35);
    color: fff;
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 9999; /* Suficientemente alto pero menor al fullscreen */
    pointer-events: none; /* para no obstruir clics */
    display: none; /* oculto al inicio (usa .hidden si prefieres) */
}

.video-overlay.visible {
    display: block;
}

.camera-status {
    position: absolute;
    top: 20px; 
    right: 20px; 
    background-color: rgba(0, 0, 0, 0.35); /* 35% de opacidad en negro */
    color: #fff;
    font-size: 1rem; /* Igual que .video-overlay */
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 9999;
    pointer-events: none;
    display: none; /* oculto al inicio */
}

.camera-status.visible {
    display: block;
}

/* Barra de progreso – overlay video test */
.progress-bar-overlay {
    position: fixed;
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    z-index: 10000;
    pointer-events: none; /* Opcional: para que no interfiera con clics */

}

.progress-bar-overlay-prog {
    height: 100%;
    background: #F5866F;
    width: 0%;
    transition: width 0.1s linear;
}

/* Contenedor de los botones */
.tabs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    width: 15%;
    border-left: 2px solid rgba(0, 0, 0, 0.1);
    padding: 10px;
    gap: 10px;
}

/* Botón de Test (abajo, en coral) */
.tab-button:nth-child(2) {
    background: #F5866F; /* Coral */
    color: white;
    writing-mode: vertical-rl;
    transform: rotate(180deg); /* Lectura de abajo hacia arriba */
    font-size: 0.8rem;
    padding: 8px;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.tab-button:nth-child(2):hover {
    transform: rotate(180deg) scale(1.1); /* Mantiene la rotación y agrega el efecto de crecimiento */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Sombra más intensa */
}

/* Botón de Resultados (arriba, en azul pastel) */
.tab-button:nth-child(1) {
    background: #A0C5C4; /* Azul pastel */
    color: white;
    writing-mode: vertical-rl;
    transform: rotate(180deg); /* Lectura de abajo hacia arriba */
    font-size: 0.8rem;
    padding: 8px;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.tab-button:nth-child(1):hover {
    transform: rotate(180deg) scale(1.1); /* Mantiene la rotación y agrega el efecto de crecimiento */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Sombra más intensa */
}

/* Título del video */
.video-title {
    writing-mode: vertical-rl; /* Texto en orientación vertical */
    transform: rotate(180deg); /* Lectura de abajo hacia arriba */
    font-size: 0.8rem;
    color: #000000; /* Negro */
    text-align: center;
    margin-right: 10px;
    padding: 0 5px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
    border-right: 2px solid rgba(0, 0, 0, 0.1);
}

/* Estilos para las ventanas emergentes */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000; /* Asegura que esté sobre todo lo demás */
}

.popup.visible {
    visibility: visible;
    opacity: 1;
}

.popup-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.popup-content h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: #333;
}

.popup-content p {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #555;
}

.popup-content button {
    background-color: #F5866F;
    color: white;
    padding: 10px 20px;
    margin-top: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.popup-content button:hover {
    background-color: #e0655b;
}

/* --- Modal Horizontal para "Mis Reacciones" --- */
.horizontal-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  display: none;
  justify-content: center !important;
  align-items: center !important;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000 !important;
  overflow: auto !important;

}

.horizontal-modal.visible {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.horizontal-modal-content {
  background: white !important;
  padding: 20px !important;
  border-radius: 10px !important;
  text-align: center !important;
  width: 90% !important;
  max-width: 1200px !important;
  max-height: 90vh !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  overflow: auto !important;
}

/* Estilos para tooltip */
.tooltip {
  position: relative;
  cursor: pointer;
  color: #F5866F; /* O el color deseado */
  text-decoration: underline;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 400px; /* Ajusta según necesidad */
  background-color: #F5866F;
  color: #fff;
  text-align: left;
  padding: 10px;
  border-radius: 6px;
  font-size: 1rem;
  
  /* Posicionamiento */
  position: absolute;
  z-index: 100;
  top: 50;
  left: 50%;
  transform: translateX(40%);
  
  /* Transición suave */
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

#camera-status {
    position: fixed;
    top: 20px; /* Colocar en la parte superior derecha */
    right: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.9rem;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 9999;
    display: none;
}

#camera-status.visible {
    display: block;
}

.swal2-container .swal2-loader {
  border: 4px solid #F5866F !important;        /* Establece el grosor y color del borde */
  border-top-color: transparent !important; /* Deja transparente la parte superior para el efecto de giro */
  border-right-color: transparent !important; 
  border-bottom-color: transparent !important;
  border-left-color: #F5866F !important;       /* Mantén un color en un lado para ver el giro */
  animation: swal2-rotate-loading .5s linear infinite !important; 
}

/* ==============================================
   Sección: Acceso 100% anónimo
   ============================================== */

/* Pleca gris con letras blancas */
.access-anonymous-separator {
  background-color: #ffffff; /* Gris (ajusta tu tono preferido) */
  color: #ffffff;            /* Texto blanco */
  text-align: center;
  padding: 40px 20px 0px 40px;        /* La misma altura que tu sección "Selecciona un video" */
  position: relative;
  z-index: 2;
  margin: 0;                 /* Opcional: quita espacios extra */
}

.access-anonymous-separator h2 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 2rem;
    background-color: rgb(100, 174, 179);
    color: rgb(255, 255, 255);
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
}

/* Contenedor blanco para subtítulo y párrafo */
.access-anonymous-content {
  background-color: #ffffff; /* Fondo blanco */
  padding: 40px 20px;        /* Espacio interno */
  text-align: center;        /* Centra el texto, igual que en otros bloques */
}

/* Subtítulo en color coral */
.anonymous-subtitle {
  font-size: 1.8rem;      /* Ajusta el tamaño */
  color: #F5866F;         /* Coral */
  font-weight: 700;
  margin-top: 0;          /* Quita margen superior */
  margin-bottom: 20px;    /* Separación con el párrafo */
}

/* Párrafo en negro 80% */
.anonymous-paragraph {
  color: rgba(0, 0, 0); /* Negro */
  font-size: 1.4rem;           /* Ajusta el tamaño del texto */
  font-weight: 300; /* Light */
  line-height: 1.5;          /* Legibilidad */
  max-width: 800px;          /* Ancho máximo para no extenderse demasiado */
  margin: 0 auto;            /* Centra el texto */
  margin-bottom: 30px;    /* Separación con el párrafo */

}

/* ————— Navegación fija ————— */
.supraheader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10000;
  height: 60px;               /* Ajusta alto según tu diseño */
}
.supraheader-logo-container {
  display: flex;
  align-items: center;
}
.supraheader-logo {
  width: 40px;
  height: auto;
  margin-right: 10px;
}
.supraheader-logo-text {
  font-size: 1.2rem;
  color: #fff;
}
.supraheader-logo-bold {
  color: #ff726f;
}

/* ————— Hamburguesa ————— */
.hamburger {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 25px;
  cursor: pointer;
}
.hamburger div {
  width: 100%;
  height: 3px;
  background-color: #fff;
  transition: transform 0.3s, opacity 0.3s;
}

/* ————— Menú desplegable ————— */
.menu {
  position: absolute;
  top: 60px;       /* justo debajo de la supraheader */
  right: 20px;
  background-color: rgba(0,0,0,0.8);
  padding: 15px;
  border-radius: 5px;
  display: none;
}
.menu.show {
  display: block;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu ul li + li {
  margin-top: 10px;
}
.menu ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.2s;
}
.menu ul li a:hover {
  color: #ff726f;
}

/* ===== Sección Contacto ===== */
.contacto-section {
  background-color: #c4c4c4; /* bg-custom-lightgray */
  padding: 3rem 0;
}

.contacto-container {
  width: 80%;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}

.contacto-title {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700;
  margin-bottom: 2rem;
  background-color: rgb(245, 134, 111);
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  display: inline-block;
}

.contacto-form {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 0.5rem; /* rounded-lg */
}

.contacto-field {
  margin-bottom: 1rem; /* mb-4 */
  text-align: left;
}

.contacto-label {
  display: block;
  color: #374151; /* gray-700 */
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.contacto-input,
.contacto-textarea {
  width: 100%;
  box-sizing: border-box;  /* incluye padding/border dentro del 100% */
  padding: 0.5rem 1rem;
  border: 1px solid #D1D5DB; /* gray-300 */
  border-radius: 0.25rem;
  font-family: inherit;
  font-size: 1rem;
}

.contacto-input:focus,
.contacto-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(100, 174, 179, 0.5); /* ring-2 ring-teal-500 */
}

.contacto-button {
  background-color: #FA8072; /* salmon-500 */
  color: #ffffff;
  font-weight: 700;
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 9999px; /* rounded-full */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contacto-button:hover {
  background-color: #E9967A; /* salmon-700 */
}

/* Footer */
footer {
  width: 100% !important;
  text-align: center !important;
  padding: 20px 10px !important;
  position: static !important;
}
footer nav ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
footer nav ul li {
  display: inline-block;
}
footer nav ul li a {
  color: #ffffff !important;
  text-decoration: none;
  font-size: 0.9rem;
}

/* ---------- Private Dashboard ---------- */
#private-main {                       /* 1 regla */
  padding-top: 60px;                  /* despeje bajo supra-header */
}

.upload-button {                      /* 2 regla */
  background: rgb(113, 119, 169);
  color: #ffffff;
  font-weight: 500;
  font-family: inherit;
  font-size: 1.2rem;
  padding: 10px 30px;
  border: none;
  border-radius: 5px;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: opacity .3s;
}

.upload-button:hover {                /* 3 regla */
  opacity: .85;
}

/* Paleta corporativa (teal + salmón)       */
.tcnm-confirm,
.tcnm-cancel{
  font-family : inherit;
  font-size   : 15px;
  font-weight : 600;
  padding     : 8px 22px;
  border      : 0;
  border-radius: 4px;
  color       : #fff;
  cursor      : pointer;
  transition  : opacity .25s;
  margin      : 0 4px;
}

.tcnm-confirm { background:#64AEB3; } /* teal  */
.tcnm-cancel  { background:#F5866F; } /* salmón */

.tcnm-confirm:hover,
.tcnm-cancel:hover{ opacity:.9; 
}

/* Centrar el enlace y darle margen superior */
.forgot-link-container {
  text-align: center;
  margin-top: 0.5rem;
}

/* Link "Olvidé mi contraseña" en salmón */
.forgot-link {
color: #F5866F;           /* salmón */
font-size: 0.9rem;
text-decoration: underline;
cursor: pointer;
}

/* ====== Sweet-Alert inputs más pequeños ====== */
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea{
  font-size : 14px !important;   /* el tamaño que prefieras */
  line-height: 1.35;             /* opcional, ajusta la altura */
}

/* --- Ajustes generales para inputs y textarea de SweetAlert --- */
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea{
  display     : block;      /* cada uno ocupa su propia línea           */
  width       : 100% !important;  /* llenar todo el contenedor            */
  box-sizing  : border-box; /* incluir padding/border en el 100 %        */
  font-size   : 14px !important;  /* tamaño de letra más pequeño           */
  line-height : 1.4;        /* opcional: altura de línea cómoda          */
  margin      : 10px auto;  /* separación vertical uniforme (centro)     */
}

/* --- espaciar el input del modal "Cargar Video para Análisis" --- */
.swal-carga-url{                 /* el popup completo */
  padding: 28px 34px 32px;       /* ↑↓  ↑→←  ↓ */
}

.swal-carga-url .swal2-input{    /* el campo URL */
  margin: 18px 0 26px;           /* espacio arriba y abajo            */
  padding: 10px 12px;            /* acolchado interior                */
}

/* ——— Quitar el subrayado circular bajo NO ——— */
header h1 span::after{
  content:none !important;   /* elimina el pseudo-elemento */
  display:none !important;   /* asegura que no reserve espacio */
}

/* Responsividad para dispositivos móviles */
@media screen and (max-width: 768px) {

    /* Ajuste logo */
    .logo-container {
        position: absolute;
        top: 20px;
        text-align: center;
        z-index: 3; /* Asegura que esté por encima de otros elementos */
        margin-bottom: 0; /* Elimina el margen inferior excesivo */
    }

    .header-logo {
        width: 60px; /* Reduce el tamaño del logo */
        height: auto; /* Mantiene las proporciones */
    }

    /* Ajuste del texto en el header */
    header h1 {
        font-size: 3rem; /* Reduce el tamaño del texto */
        line-height: 1.2; /* Ajusta el espaciado entre líneas */
    }

    header p {
        font-size: 1.2rem; /* Reduce el tamaño del texto */
        margin: 10px 0; /* Ajusta el espaciado entre párrafos */
    }

    /* Ajuste del mouse-icon */
    .mouse-icon {
        bottom: 80px; /* Eleva un poco el icono del mouse */
    }

    .mouse-icon p {
        font-size: 0.9rem; /* Reduce el tamaño del texto */
    }

    /* Ajuste del diseño de la cuadrícula */
    .video-grid {
        grid-template-columns: 1fr; /* Una sola columna para móviles */
        gap: 20px;
    }

    .video-card {
        flex-direction: column; /* Cambia la dirección a columna */
        align-items: center; /* Centra el contenido horizontalmente */
        width: 100%; /* Ocupa todo el ancho */
    }

    /* Título del video */
    .video-title {
        writing-mode: horizontal-tb; /* Texto en orientación horizontal */
        transform: none; /* Elimina la rotación */
        text-align: center; /* Centra el texto */
        font-size: 1rem; /* Tamaño ajustado */
        color: #000000;
        margin-bottom: 10px; /* Espacio entre título y botones */
    }

    /* Contenedor de botones */
    .tabs {
        display: flex !important; /* Coloca los botones en fila */
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .tab-button {
        pointer-events: auto; /* Asegúrate de que los eventos del ratón no estén bloqueados */
        cursor: pointer;
        writing-mode: horizontal-tb !important; /* Cambia a texto horizontal */
        transform: none !important; /* Elimina rotación */
        font-size: 0.9rem !important; /* Tamaño del texto */
        padding: 8px 12px !important; /* Espaciado interno */
    }

    .tab-button:nth-child(1) {
        background: #A0C5C4 !important; /* Teal */
    }

    .tab-button:nth-child(2) {
        background: rgba(255, 111, 97, 0.9) !important; /* Rojo */
    }
}

/* Ajustes RESPONSIVE en móvil */
@media screen and (max-width: 768px) {
  .steps-container {
    grid-template-columns: 1fr; /* Una sola columna */
    gap: 20px;
  }

  .step {
    padding: 30px;
  }

  .step-icon {
    width: 50px;
    margin-bottom: 10px;
  }

  .step p {
    font-size: 1rem; /* Un pelín más pequeño para móvil */
  }

  .step-number {
    font-size: 1.2rem;
  }

  .keyword {
    font-size: 1.1rem;
  }
}

footer {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300 !important;
  background-color: #121212;
  color: #ffffff;
  text-align: center;
  padding: 20px 10px;
  font-size: 0.9rem;
}

footer nav ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  justify-content: center;
  gap: 15px;
}

footer nav ul li a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s;
}

footer nav ul li a:hover {
  color: #F5866F;
}

/* ======================================================================
   NUEVOS AJUSTES PARA MÓVILES EN LA HOMEPAGE (ACTUALIZADOS)
   (Se aplican solo en dispositivos con ancho ≤ 768px)
========================================================================== */
@media screen and (max-width: 768px) {

  /* 1. Tooltip: ocupar todo el ancho y line-height más bajo */
  .tooltip .tooltiptext {
    max-width: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 100% !important;
    padding: 8px !important;
    box-sizing: border-box;
    line-height: 1.2 !important; 
  }

  /* 2. Tarjetas de video: min-height y sin línea gris */
  .video-card {
    min-height: 270px !important;
    padding: 10px !important;
  }
  .video-title {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    text-align: center !important;
    margin: 0 auto 3px auto !important;
    padding-bottom: 0 !important;
    border-bottom: none !important; 
  }
  .video-card .tabs {
    margin-top: 2px !important;
    border-left: none !important; 
    background: #fff !important;  
  }
  .video-card video {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    margin: 0 auto !important;
  }

  /* Footer centrado */
  footer p {
    text-align: center;
  }
}

@media screen and (max-width: 768px) and (orientation: portrait) {
  /* Pleca "Selecciona un video": reducir un 10% la altura, 
     volver a 2.4rem y line-height 1.1 */
  .select-video-separator {
    padding: 36px 20px !important; 
  }
  .select-video-separator h2 {
    font-size: 2.4rem !important; 
    line-height: 1.1 !important;
    margin: 0 auto !important;
    white-space: normal !important; 
  }

  /* "Así funciona la iA": ícono arriba, 
     icon 72px, texto 1.2rem, keyword y step-number 1.8rem */
  .how-it-works-section .steps-container {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
    gap: 20px !important;
  }
  .how-it-works-section .step {
    flex-direction: column !important;
    padding: 20px !important;
  }
  .how-it-works-section .step .step-icon {
    width: 72px !important; 
    margin: 0 auto 10px auto !important;
  }
  .how-it-works-section .step p {
    margin-top: 10px !important;
    text-align: center;
    font-size: 1.2rem !important;
  }
  .how-it-works-section .step .keyword {
    font-size: 1.8rem !important;
  }
  .how-it-works-section .step-number {
    font-size: 1.8rem !important;
  }
  /* Forzar orden en steps 2 y 4 */
  .how-it-works-section .step.step2 .step-icon,
  .how-it-works-section .step.step4 .step-icon {
    order: 1 !important;
  }
  .how-it-works-section .step.step2 p,
  .how-it-works-section .step.step4 p {
    order: 2 !important;
  }
}

@media screen and (max-width: 768px) and (orientation: landscape) {
  /* Pleca "Selecciona un video" */
  .select-video-separator {
    padding: 36px 20px !important; 
  }
  .select-video-separator h2 {
    font-size: 2.4rem !important;
    line-height: 1.1 !important;
    margin: 0 auto !important;
    white-space: normal !important;
  }
}

@media screen and (max-width: 664px) and (orientation: landscape) {
   /* Sección "Así funciona la iA" en landscape:
     - Forzar 1 columna para evitar desborde
     - Reducir tamaños, márgenes laterales a 5px y padding interno a 0
  */
  .how-it-works-section .steps-container {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 2px !important;
    overflow-x: hidden !important;
  }
  .how-it-works-section .step {
    padding: 0 !important;
    margin: 0 5px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .how-it-works-section .step .step-icon {
    width: 20px !important; 
    margin: 0 auto 2px auto !important;
  }
  .how-it-works-section .step p {
    font-size: 0.5rem !important;
    margin: 2px !important;
    padding: 0 !important;
    text-align: center;
    line-height: 1.0 !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }
  .how-it-works-section .step .keyword {
    font-size: 0.8rem !important;
  }
  .how-it-works-section .step-number {
    font-size: 0.8rem !important;
  }
}

/* ======================================================================
   AJUSTES PARA MÓVILES EN LANDSCAPE (769px ≤ ancho ≤ 940px)
   (Se organizan los steps en dos columnas para lograr dos filas)
========================================================================== */
@media screen and (min-width: 665px) and (max-width: 940px) and (orientation: landscape) {
  /* Forzamos 2 columnas para que los 4 steps se organicen en 2 filas */
  .how-it-works-section .steps-container {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 10px !important;
    gap: 10px !important;
    overflow-x: hidden;
  }
  /* Ajuste de cada paso: márgenes y padding reducidos para optimizar el espacio */
  .how-it-works-section .step {
    padding: 15px !important;
    margin: 5px !important;
    flex-direction: column !important; /* Por defecto: ícono arriba, texto abajo */
  }
  /* En pasos 2 y 4, forzamos el orden: texto arriba, ícono abajo */
  .how-it-works-section .step.step2,
  .how-it-works-section .step.step4 {
    flex-direction: column-reverse !important;
  }
  /* Incrementamos el tamaño de los íconos para que sean más visibles */
  .how-it-works-section .step .step-icon {
    width: 50px !important;
    margin: 0 auto 5px !important;
  }
  /* Aumentamos el tamaño del texto explicativo */
  .how-it-works-section .step p {
    font-size: 1rem !important;
    margin: 5px 2px !important;
    padding: 0 !important;
    text-align: center;
    line-height: 1.2 !important;
  }
  /* Aumentamos el tamaño del título del step (keyword) y el número del step */
  .how-it-works-section .step .keyword {
    font-size: 1.5rem !important;
  }
  .how-it-works-section .step-number {
    font-size: 1.5rem !important;
  }
}

/* 
   SOLO para modo landscape con altura < 500px.
   Pega esto al final de tu hoja de estilos.
*/
@media screen and (orientation: landscape) and (max-height: 500px) {

  /* LOGO: 100px de ancho, arriba y centrado */
  .logo-container {
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-bottom: 0 !important;
    z-index: 3 !important;
  }
  .header-logo {
    width: 100px !important; 
    height: auto !important;
  }

  /* Header en modo fullscreen, texto hacia arriba */
  header {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    height: 100vh !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important; 
  }

  /* Elimina las barras rojas laterales del h1 (si estorban) */
  header h1::before,
  header h1::after {
    content: none !important;
  }

  /* TÍTULO: menos margen-top para subirlo */
  header h1 {
    margin-top: 30px !important; /* Sube más el texto del título */
    font-size: 3rem !important;  /* Más pequeño que 4rem */
    line-height: 1.1 !important;
    margin-bottom: 6px !important;
    text-align: center !important;
  }

  /* RECUPERA EL RECUADRO DE “NO” con valores ajustados */
  /* Ajusta estos 4 para que encaje exactamente en tu tipografía: 
     width, height, bottom y translateX */
  header h1 span::after {
    width: 68px !important;     /* Ancho para cubrir "No" */
    height: 45px !important;    /* Alto para cubrir "No" */
    bottom: -10px !important;   /* Ajusta si queda muy alto/bajo */
    transform: translateX(-227%) !important; /* Desplázalo más a la izquierda */
    /* Se asume que tu estilo global ya define:
       position: absolute; border: 4px solid #F5866F;
       border-radius: 30%; background: transparent; z-index: -1; 
    */
  }

  /* PÁRRAFOS: reduce el margen para subirlos más */
  header p {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
    margin: 2px 0 !important;  /* Muy poco margen para subirlos */
    text-align: center !important;
  }

  /* MOUSE ICON: pegado al borde inferior */
  .mouse-icon {
    position: absolute !important;
    bottom: 5px !important; 
    z-index: 4 !important;
  }
  .mouse-icon p {
    font-size: 1rem !important;
  }
}

@media screen and (max-width: 768px) and (orientation: portrait) {
  /* Duplica el tamaño del logo en portrait */
  .header-logo {
    width: 120px !important; /* Ajusta si quieres más o menos */
    height: auto !important;
  }
}

@media (min-width: 655px) and (max-width: 769px) {
  .header-logo {
    width: 120px !important;
    height: auto !important;
  }
}

@media screen and (min-width: 655px) and (max-width: 1090px) {
  .how-it-works-section .steps-container {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 40px 20px !important; /* Ajusta según lo que veas en escritorio */
    gap: 30px !important;
  }
  /* También puedes ajustar el tamaño de fuente y los márgenes de cada paso */
  .how-it-works-section .step {
    padding: 25px !important;
    margin: 0 !important;
  }
  .how-it-works-section .step p {
    font-size: 1.4rem !important; /* O el tamaño original en desktop */
    line-height: 1.4 !important;
  }
  .how-it-works-section .step .step-icon {
    width: 180px !important;
    margin-bottom: 15px !important;
  }
}

/* SOLO en los rangos donde quieras que "No" baje de línea, 
   por ejemplo 420px..650px de ancho. */
@media screen and (min-width: 420px) and (max-width: 650px) and (orientation: portrait) {
  header h1 {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  header h1 span {
    flex-basis: 100%;      /* Hace que el span ocupe toda la línea */
    text-align: center;
  }
}

@media screen and (min-width: 656px) and (max-width: 729px) and (orientation: portrait) {
  header h1 span::after {
    /* Ajusta estos valores según lo que veas en el inspector.
       En tu caso, ya probaste -227% en landscape; aquí prueba, por ejemplo: */
    width: 68px !important;     /* o ajústalo un poco si fuera necesario */
    height: 45px !important;
    bottom: -10px !important;
    transform: translateX(-227%) !important;
  }
  /* También forzamos que el span se comporte como bloque para que “No” quede solo en la línea */
  header h1 {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  header h1 span {
    flex-basis: 100%;
    text-align: center;
  }
}

@media screen and (min-width: 420px) and (max-width: 569px) and (orientation: portrait) {
  /* 1. Forzar "No" en segunda línea */
  header h1 {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  header h1 span {
    flex-basis: 100%; /* "No" ocupa línea aparte */
    text-align: center;
  }

  /* 2. Ajustar barritas rojas y tamaño de fuente si se ve muy grande */
  header h1::before,
  header h1::after {
    width: 16px !important; /* Reducir de 50px a 40px, p.ej. */
    height: 6px !important; /* Bajar de 7px a 5px */
    margin: 0 10px !important;
  }

  /* 3. Ajustar recuadro "No" */
  header h1 span::after {
    width: 80px !important; 
    height: 50px !important; 
    bottom: 7px !important;
    transform: translateX(-110%) !important; 
  }

  /* 4. Si la fuente es muy grande, bájala un poco */
  header h1 {
    font-size: 2.5rem !important; /* en lugar de 4rem */
  }
}

@media screen and (min-width: 570px) and (max-width: 650px) and (orientation: portrait) {
  /* Repetimos la lógica de forzar "No" en segunda línea */
  header h1 {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2.5rem !important; /* O un valor similar */
  }
  header h1 span {
    flex-basis: 100%;
    text-align: center;
  }

  /* Ajustar barritas rojas */
  header h1::before,
  header h1::after {
    width: 16px !important;
    height: 6px !important;
    margin: 0 12px !important;
  }

  /* Evitar que el recuadro de "No" empuje la "T" */
  header h1 span::after {
    width: 70px !important;
    height: 40px !important;
    bottom: -8px !important;
    transform: translateX(-200%) !important; 
  }
}

@media screen and (min-width: 651px) and (max-width: 729px) and (orientation: portrait) {
  /* Permitir 2 líneas sin forzar "No" a su propia línea */
  header h1 {
    display: inline; /* Quitar flex-wrap */
    font-size: 2.5rem !important; /* Más pequeño que 4rem */
    line-height: 1.1 !important;
  }

  /* Ajustar barritas rojas si se salen */
  header h1::before,
  header h1::after {
    width: 16px !important;
    height: 6px !important;
    margin: 0 8px !important;
  }

  /* Borde de “No” más chico */
  header h1 span::after {
    width: 60px !important;
    height: 35px !important;
    bottom: -6px !important;
    transform: translateX(-190%) !important;
  }
}

@media screen and (min-width: 651px) and (max-width: 768px) {
  .how-it-works-section .steps-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    padding: 40px 40px !important; /* Ajusta si deseas */
  }
  .how-it-works-section .step {
    flex-direction: column !important; /* ícono arriba, texto abajo */
    align-items: center !important;
    padding: 20px !important;
  }
  .how-it-works-section .step-icon {
    width: 120px !important; /* reduce de 180px */
    margin-bottom: 10px !important;
  }
  .how-it-works-section .step-number {
    font-size: 1.8rem !important; 
    margin-right: 0 !important; /* Ya no hay “inline” con el texto */
    display: block !important; 
    text-align: center !important;
  }
  .how-it-works-section .keyword {
    font-size: 1.8rem !important;
    color: #F5866F !important;
    margin-bottom: 5px !important;
  }
  .how-it-works-section .step p {
    font-size: 1.2rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    text-align: center !important;
    max-width: 90% !important; /* Evitar desbordes */
  }
}

/* =========================================
   1. HEADER - iPhone 12/13/14 Pro Max (428–430px en portrait)
      Forzar “No” en la segunda línea y recolocar el borde coral
========================================= */
@media screen and (min-width: 420px) and (max-width: 450px) and (orientation: portrait) {
  header h1 {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    /* Aumenta márgenes laterales para forzar el salto de línea */
    margin-left: 70px !important;
    margin-right: 70px !important;
  }
  header h1 span {
    flex-basis: 100% !important;
    text-align: center !important;
  }
  header h1 span::after {
    /* Ajusta manualmente la traslación para alinear el borde coral con “No” */
    transform: translateX(-70%) !important;
    /* Ejemplo: prueba -227% o -215% según veas mejor en el inspector */
  }
}

/* =========================================
   2. SECCIÓN "ASÍ FUNCIONA LA IA" 
   MODO LANDSCAPE (665–768px):
   2 Columnas, márgenes y padding reducidos
========================================= */
@media screen and (min-width: 665px) and (max-width: 768px) and (orientation: landscape) {
  .how-it-works-section .steps-container {
    /* Dos columnas, con márgenes/padding reducidos */
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 20px 30px !important; /* Reduce márgenes horizontales */
    gap: 15px !important;          /* Disminuye espacio entre columnas */
    overflow-x: hidden !important;
  }

  .how-it-works-section .step {
    flex-direction: column !important; /* Ícono arriba, texto abajo */
    align-items: center !important;
    margin: 5px !important;
    padding: 15px !important;
  }

  /* Si en steps 2 y 4 deseas invertir el orden (texto-arriba, ícono-abajo),
     activa estas líneas. De lo contrario, déjalas comentadas.
  .how-it-works-section .step.step2,
  .how-it-works-section .step.step4 {
    flex-direction: column-reverse !important;
  }
  */

  .how-it-works-section .step .step-icon {
    width: 60px !important;  /* Ajusta si quieres más pequeño o más grande */
    margin-bottom: 10px !important;
  }

  /* Ajustar tipografías para que no se salgan */
  .how-it-works-section .step p {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    margin: 5px 2px !important;
    padding: 0 !important;
    text-align: center !important;
  }
  .how-it-works-section .step .keyword {
    font-size: 1.5rem !important;
  }
  .how-it-works-section .step-number {
    font-size: 1.5rem !important;
  }
}

/* =========================================
   2B. SECCIÓN "ASÍ FUNCIONA LA IA" 
   MODO PORTRAIT (≤450px):
   Forzar 1 sola columna
========================================= */
@media screen and (max-width: 450px) and (orientation: portrait) {
  .how-it-works-section .steps-container {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
    gap: 20px !important;
  }
}

/* ================================
   POPUPS y TOOLTIP en modo landscape móvil (≤950px)
   ================================ */
@media screen and (max-width: 950px) and (orientation: landscape) {

  /* 1. Centrar el contenido del popup (incluyendo título, párrafo, link, tooltip y botones) */
  .popup .popup-content {
    width: 90% !important;
    max-width: 700px !important;
    max-height: 90vh !important;
    margin: 0 auto !important;         /* Centrado horizontal */
    box-sizing: border-box;
    overflow-y: auto !important;
    text-align: center !important;       /* Texto centrado */
    padding: 20px 30px !important;
  }

  /* 2. Ajustar el feed de la cámara: agrandar y centrar */
  #popup-video-feed {
    width: 320px !important;
    height: 240px !important;
    margin: 0 auto 10px auto !important;  /* Centrado y 10px debajo */
    display: block;
  }

  /* 3. Reducir la distancia entre el feed de la cámara y los botones */
  #test-start-popup .popup-content button {
    margin-top: 0 !important;            /* Cero margen arriba */
    margin-bottom: 0 !important;         /* Cero margen abajo */
    padding: 8px 15px !important;          /* Ajusta el padding si lo deseas */
  }

  /* 4. Expandir el tooltip para que sea mucho más ancho y centrar su contenido */
  .tooltip .tooltiptext {
    max-width: 600px !important;           /* Ancho aumentado */
    left: 50% !important;
    transform: translateX(-50%) !important;/* Centrado horizontalmente */
    top: 110% !important;                  /* Aparece un poco más abajo del enlace */
    line-height: 1.4 !important;
    text-align: center !important;         /* Texto centrado en el tooltip */
  }
}

/* ================================
   Ajustes mínimos para #test-start-popup
   (solo en móviles/tablets hasta 950px de ancho)
================================ */
@media screen and (max-width: 950px) {

  /* 1) Centrar todo el contenido en el popup */
  #test-start-popup .popup-content {
    text-align: center !important;
  }

  /* 2) Reducir la separación vertical entre la cámara y los botones */
  /* Baja a ~la mitad (ajusta px según tu preferencia) */
  #test-start-popup #popup-video-feed {
    margin-bottom: 20px !important; 
  }
  #test-start-popup .instruction-text {
    margin-bottom: 0px !important; 
  }

  /* 3) Poner los botones en la misma línea, centrados */
  #test-start-popup .popup-content button {
    display: inline-block !important; 
    vertical-align: middle !important;
    margin: 0 12px !important; /* Espacio horizontal entre botones */
  }
}

/* ------------------------------------------------------------------
   FIX – Popup “Test” en móviles (portrait ≤ 480 px)
   ------------------------------------------------------------------*/
@media screen and (max-width: 480px) and (orientation: portrait) {

  /* 1️⃣  El propio overlay */
  #test-start-popup{
    position: fixed;           /* ya lo estaba, pero reafirmamos */
    top: 5%;                   /* baja un poco para que se vea el título */
    left: 50%;
    transform: translateX(-50%);
    width: 92%;                /* casi todo el ancho, sin tocar bordes */
    max-height: 90vh;          /* deja margen para status-bar/bottom-bar */
    padding: 15px 10px;
    box-sizing: border-box;
    overflow-y: auto;          /* ¡que se pueda hacer scroll! */
    -webkit-overflow-scrolling: touch; /* scroll suave en iOS */
  }

  /* 2️⃣  Cámara / vídeo de preview */
  #popup-video-feed,
  #test-start-popup video{
    width: 100% !important;    /* ocupa todo el ancho disponible */
    height: auto !important;   /* mantiene proporciones */
    max-height: 220px;         /* evita crecer demasiado */
    margin: 0 auto 12px auto;  /* centrado + separación inferior */
  }

  /* 3️⃣  Tipografías y espaciados más compactos */
  #test-start-popup h2{
    font-size: 1.4rem;
    line-height: 1.2;
    margin: 0 0 8px 0;
  }
  #test-start-popup p,
  #test-start-popup .instruction-text{
    font-size: 0.95rem;
    line-height: 1.25;
    margin: 0 0 10px 0;
  }

  /* 4️⃣  Botones visibles en la misma línea */
  #test-start-popup button{
    display: inline-block;
    font-size: 0.9rem;
    padding: 8px 16px;
    margin: 10px 6px 0;        /* algo de aire entre ellos */
  }
}

/* ------------------------------------------------------------------
   FIX – Botones "Iniciar Test" / "Cancelar" en la misma fila
   ------------------------------------------------------------------*/
@media screen and (max-width: 480px) and (orientation: portrait) {

  /* 🄰  Haz que el contenedor de los botones sea un flex-row */
  #test-start-popup .popup-content{
    text-align: center;              /* texto centrado para el resto */
  }
  #test-start-popup .popup-content button{
    display: inline-block;           /* para que respeten su ancho */
    width: auto;                     /* nada de 100 % */
    margin: 10px 8px 0;              /* 8 px de aire lateral */
    padding: 8px 16px;               /* igual que el fix anterior */
    white-space: nowrap;             /* evita que se partan en 2 líneas */
  }
}

/* ==============================================================
   BOTONES “INICIAR TEST” & “CANCELAR” — FIX DEFINITIVO
   (portrait ≤ 480 px)
================================================================*/
@media screen and (max-width: 480px) and (orientation: portrait) {

  /* Contenedor: dejamos todo centrado */
  #test-start-popup .popup-content{
    text-align: center !important;
  }

  /* Botones en línea, sin ocupar 100 % y con aire a los lados */
  #test-start-popup .popup-content button{
    display: inline-block !important;   /* uno al lado del otro         */
    width: auto !important;            /* nada de 100 %                 */
    max-width: 48% !important;         /* por si llegasen a crecer      */
    margin: 10px 4vw 0 !important;     /* 4 vw ≈ 16 px de aire lateral   */
    padding: 8px 16px !important;      /* igual para ambos              */
    white-space: nowrap !important;    /* evita saltos de línea internos*/
  }

  /* Extra: separación interna entre ellos */
  #test-start-popup .popup-content button + button{
    margin-left: 0 !important;         /* ya lo hace el 4 vw de arriba  */
  }
}

/* ==============================================================
   BOTÓN “CANCELAR”  –  Color teal corporativo (#64AEB3)
   (aplica a desktop y a todos los tamaños móviles)
================================================================*/
#test-start-popup .popup-content button.cancel,          /* si tu HTML usa class="cancel"  */
#test-start-popup .popup-content button[data-action="cancel"], /* o un data-action …         */
#test-start-popup .popup-content button:nth-of-type(2)   /* fallback: segundo botón        */
{
  background-color: #64AEB3 !important;      /* teal corporativo                 */
}

#test-start-popup .popup-content button.cancel:hover,
#test-start-popup .popup-content button[data-action="cancel"]:hover,
#test-start-popup .popup-content button:nth-of-type(2):hover{
  background-color: #79C2C6 !important;      /* versión un poco más clara al hover */
}

/* ────────────────────────────────────────────────
   HEADER · móvil-portrait   (≤ 768 px)
   • Respeta el espacio del logo
   • Sube un poco más el mouse-icon
─────────────────────────────────────────────────*/
@media screen and (max-width: 768px) and (orientation: portrait){

  /* Logo un más arriba y más chico */
  .logo-container{
    top : 1.5vh;            /* antes 20 px -> un poco menos */
  }
  .header-logo{
    width: 90px !important; /* algo más chico para que no tape */
  }

  /* Bloque de texto comienza DESPUÉS del logo               */
  /*     (100 px ≈ alto del logo)                                */
  header .overlay{
    justify-content: flex-start;
    padding-top: calc(100px + 4vh);   /* deja hueco bajo el logo */
  }

  /* Ajusta márgenes del título y párrafos si quieres
         (opcional: solo suaviza)                               */
  header h1{ margin: 0 0 1rem 0; }
  header p { margin: .6rem 0 0 0; }

  /* Mouse-icon + texto “Scroll” algo más arriba             */
  .mouse-icon{
    bottom: 20vh;         /* súbelo: prueba 6-10 vh según tu gusto */
  }
}

@media (max-width: 420px) {
  /* 1) Asegura algo de acolchado interior */
  .contacto-field {
    padding: 0 1px 0 1px;
    text-align: center;
  }

  /* 2) Reduce con zoom para que quepa TODO el widget */
  .contacto-field .g-recaptcha {
    zoom: 0.65;            /* prueba también con 0.85 o 0.75 según tu contenedor */
    display: inline-block;
  }

}

/* ─── OVERRIDES para móviles portrait (≤768px) ─── */
@media screen and (max-width: 767px) and (orientation: portrait) {
  /* 1) Recoloca el logo */
  header .logo-container {
    position: absolute !important;   /* lo sacamos del flujo normal */
    top: 10vh         !important;     /* baja el logo un 8% de la altura de la pantalla */
    left: 50%        !important;     
    transform: translateX(-50%) !important; /* lo centramos horizontalmente */
    margin: 0        !important;     /* anulamos cualquier margin viejo */
  }

  /* 2) Empuja el bloque de texto (h1 + p) hacia abajo */
  header .overlay {
    justify-content: flex-start !important; 
    padding-top: 25vh      !important;  /* deja 30% de la altura como espacio arriba */
  }
}

/* ── SOLO móviles ≤768 px: modal “Mis Reacciones” ───────────── */
@media (max-width:768px){

  /* Contenedor: quítale flex-box y deja que la página scrollee */
  #user-reactions-modal{
    display:none;              /* ← quitamos !important  */
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    background:rgba(0,0,0,.9);
    overflow:auto;
    padding:0;
    z-index:10000;
  }

  /* Si el JS le pone display:block o display:flex… lo mostramos */
  #user-reactions-modal[style*="display:block"],
  #user-reactions-modal[style*="display: block"],
  #user-reactions-modal[style*="display:flex"],
  #user-reactions-modal[style*="display: flex"],
  #user-reactions-modal.visible{          /* por si usamos la clase */
    display:block !important;
  }

  /* Contenido interno: ocupa todo el ancho y quita bordes redondos */
  #user-reactions-modal-content{
    width:100%  !important;
    max-width:none !important;
    height:auto !important;
    border-radius:0 !important;
    padding:0 !important;
    background:#000 !important;
  }

  /* Iframe: que se vea en toda la altura menos el cierre */
  #user-reactions-iframe{
    width:100%  !important;
    height:calc(100vh - 60px) !important; /* 60 px ≈ botón “Cerrar” */
    border:none !important;
  }

  /* Botón “Cerrar” siempre visible abajo */
  #user-reactions-modal-content > button{
    width:100%;
    border-radius:0;
    margin:0;
  }
}

/* ► SOLO móvil ≤ 768 px – suavizar overlay negro del modal */
@media (max-width:768px){
  #user-reactions-modal{
    background:rgba(0,0,0,.55)!important;   /* antes .9 – más liviano */
  }
}

@media (max-width:768px){
  #user-reactions-modal-content{
    background:#fff!important;   /* ya está, pero por si acaso */
    border:0!important;          /* elimina ese filo negro curvo */
  }
}

/* ════════════════════════════════════════
   MÓVIL ≤ 768 px – Nivo dentro de Ant-Card
══════════════════════════════════════════ */
@media (max-width:768px){

  /* La tarjeta (Ant Design) — sin borde, sin sombra */
  .ant-card,
  .ant-card-bordered{
    border:none       !important;
    box-shadow:none   !important;
    margin:0 0 12px 0 !important;   /* algo de aire por debajo */
  }

  /* Su cuerpo — quitamos padding lateral */
  .ant-card-body{
    padding:12px 8px 8px !important;   /* L/R = 8 px */
  }

  /* Leyenda “svg” de Nivo — sin fondo ni borde */
  .nivo-legend{
    background:transparent !important;
    border:none            !important;
  }

  /* Si usas htmlLegend() y te genera un UL: */
  .nivo-html-legend{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 16px;
  }
}

/* — Mis Reacciones · MÓVIL ≤ 768 px —
   Quitamos TODO rastro de borde, radio y padding del Card       */
@media (max-width: 768px) {

  #user-reactions-modal .ant-card,
  #user-reactions-modal .ant-card-bordered,
  #user-reactions-modal .ant-card-hoverable {
    border: none   !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  #user-reactions-modal .ant-card-body {
    padding: 0   !important;   /* sin aire extra */
  }
}

/* Mis Reacciones – ANULA borde/sombra en cualquier ancho */
#user-reactions-modal-content .ant-card,
#user-reactions-modal-content .ant-card-bordered{
  border: none   !important;
  box-shadow: none !important;
  margin: 0      !important;   /* quita el aire extra */
  border-radius: 0 !important;
}

/* El cuerpo sin padding – Nivo usa TODO el ancho */
#user-reactions-modal-content .ant-card > .ant-card-body{
  padding: 0 !important;
}

#user-reactions-iframe .ant-card:first-of-type > .ant-card-body > div{
  height:clamp(420px,75vh,900px)!important;
}