/* =====================================================================
   Dragons Den — pulido de detalles de interaccion
   ---------------------------------------------------------------------
   Inspirado en "Designing Fluid Interfaces" (Apple, WWDC 2018): que la
   web responda al instante, se mueva de forma continua y se sienta
   fisica, SIN cambiar la identidad de la marca (negro, dorado, Bebas
   Neue con su interletraje ancho, esquinas rectas).

   Se enlaza al final del <head> de cada pagina publica, despues de su
   <style> propio, para poder corregir reglas concretas sin reescribirlas.
   Los tokens (--ease-fluido, --ease-muelle, duraciones) y los valores
   por defecto (text-wrap, ::selection, touch-action...) viven en
   css/comun.css. Solo CSS nativo; se anima solo transform y opacity.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Respuesta inmediata: el boton reacciona al PULSAR, no al soltar.
   Entrada rapida (100 ms) en :active; la vuelta usa la transicion de
   transform de cada boton (definida aqui abajo si no la tenia), asi el
   boton "suelta" con suavidad en vez de saltar.
   Los botones de la portada (.btn-primary/.btn-secondary) y las
   tarjetas ya tienen muelle real por JS (nsd-spring.js, atributo
   data-tacto); a esos no se les suma una segunda escala por CSS.
   --------------------------------------------------------------------- */
:is(.btn-login, .btn-submit, .btn-google, .btn-outline, .btn-course, .wl-submit,
    .nav-links .nav-cta, .precios-tab, .wizard-btn-next, .wizard-btn-prev,
    .form-submit button[type="submit"], .aviso-cookies button, .btn,
    .btn-primary:not([data-tacto]), .btn-secondary:not([data-tacto])):not(:disabled):active {
    transform: scale(.97);
    transition: transform var(--dur-pulsar) ease-out;
}
:is(.form-modal-close, .blog-grupo .act-nsd__flecha, .act-nsd-modal__cerrar):not(:disabled):active {
    transform: scale(.94);
    transition: transform var(--dur-pulsar) ease-out;
}
.volver-arriba.is-visible:active { transform: scale(.94); transition: transform var(--dur-pulsar) ease-out; }

:is(.btn-login, .btn-submit, .btn-google, .btn-outline, .btn-course, .wl-submit,
    .nav-links .nav-cta, .precios-tab, .wizard-btn-next, .wizard-btn-prev,
    .aviso-cookies button, .btn, .form-modal-close, .act-nsd__flecha, .act-nsd-modal__cerrar) {
    -webkit-tap-highlight-color: transparent;
}

/* Vuelta suave al soltar en los botones que no animaban transform. Se
   repiten las transiciones de color que ya tenian para no perderlas. */
.btn-google { transition: border-color .2s, background-color .2s, transform .2s var(--ease-fluido); }
.btn-login, .btn-submit { transition: opacity .2s, transform .2s var(--ease-fluido); }
.nav-links .nav-cta { transition: background-color .25s, border-color .25s, color .25s, transform .2s var(--ease-fluido); }
.precios-tab { transition: background-color .2s, color .2s, transform .2s var(--ease-fluido); }
.wizard-btn-next { transition: background-color .25s, transform .2s var(--ease-fluido); }
.form-modal-close { transition: color .25s, border-color .25s, transform .2s var(--ease-fluido); }
.aviso-cookies button, .btn { transition: background-color .2s, transform .2s var(--ease-fluido); }
.blog-grupo .act-nsd__flecha { transition: border-color .2s, opacity .2s, transform .2s var(--ease-fluido); }

/* Con muelle JS: al pulsar se quita el desplazamiento del hover (el
   boton "baja") y la escala la pone el muelle, no el CSS. El !important
   es para ganar al :active con !important que ya habia en movil. */
.btn-primary[data-tacto]:active,
.btn-secondary[data-tacto]:active { transform: none !important; }
@media (max-width: 900px) {
    .price-card[data-tacto]:active,
    .opinion-card[data-tacto]:active { transform: none; }
}


/* ---------------------------------------------------------------------
   2. Hover que eleva o desplaza: solo con raton. En pantallas tactiles
   el :hover se queda "pegado" tras tocar; aqui se anula el movimiento y
   la sombra (el cambio de color del hover se mantiene).
   --------------------------------------------------------------------- */
@media not all and (hover: hover) and (pointer: fine) {
    :is(.btn-primary, .btn-secondary, .price-card, .opinion-card, .embajador-card,
        .course-card, .wl-submit):hover:not(:active) {
        transform: none;
        box-shadow: none;
    }
}


/* ---------------------------------------------------------------------
   4. Barra de pestanas movil: aparece con amortiguamiento critico. Antes
   usaba una curva con rebote, que la guia reserva para lo que el usuario
   lanza o arrastra, no para un elemento que aparece.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    .tab-bar, .tab-bar-acad { transition: transform .3s var(--ease-fluido), opacity .2s ease; }
}


/* ---------------------------------------------------------------------
   5. Ventana de inscripcion: abre y cierra por el mismo camino. Ya tenia
   transiciones (no @keyframes), pero al pasar de display:none a flex el
   navegador no las ejecutaba: aparecia de golpe y se cerraba de golpe.
   @starting-style da el punto de partida al abrir y allow-discrete
   mantiene la capa visible mientras se cierra. Navegadores sin soporte:
   igual que antes (aparece y desaparece sin animar).
   --------------------------------------------------------------------- */
#inscripcion.form-section {
    opacity: 0;
    transition: opacity var(--dur-aparecer) var(--ease-fluido);
    transition: opacity var(--dur-aparecer) var(--ease-fluido), display .38s allow-discrete;
}
#inscripcion.form-section.is-open { opacity: 1; }
#inscripcion.form-section:not(.is-open) { pointer-events: none; }
@starting-style {
    #inscripcion.form-section.is-open { opacity: 0; }
    #inscripcion.form-section.is-open .form-inner { opacity: 0; transform: translateY(28px) scale(0.98); }
}


/* ---------------------------------------------------------------------
   6. Limites suaves. Carruseles horizontales: el gesto lateral no se
   escapa a la pagina, y el vertical vuelve a funcionar (antes llevaban
   touch-action: pan-x, que en movil impedia desplazar la pagina hacia
   abajo si el dedo empezaba sobre una tarjeta de precios u opiniones).
   Ventanas y menus: el scroll interno no arrastra la pagina de detras.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    .pricing-grid, .pricing-grid-4, .opiniones-grid, .comparativa-grid {
        touch-action: manipulation;
        overscroll-behavior-x: contain;
    }
}
.blog-grupo .act-nsd__pista { touch-action: manipulation; overscroll-behavior-x: contain; }
.table-wrap { overscroll-behavior-x: contain; }
#inscripcion.form-section, .act-nsd-modal__caja, .nav-mobile-menu { overscroll-behavior: contain; }


/* ---------------------------------------------------------------------
   7. Material de la cabecera fija: ya es translucida con desenfoque.
   Respaldo opaco donde no hay backdrop-filter, para que el texto de
   debajo no se cruce con el menu.
   --------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body > nav { background: #080808; }
    .tab-bar, .tab-bar-acad { background: #0a0a0a; }
}


/* ---------------------------------------------------------------------
   8. Cifras alineadas: precios, contadores, fechas y tablas con numeros
   de ancho fijo (no saltan al cambiar ni desalinean columnas).
   --------------------------------------------------------------------- */
.stat-number, .price-amount, .price-currency, .price-period-tag, .precio-fase-valor,
.course-price, .course-price-currency, .price-market-val, .price-monthly-equiv,
.wizard-progress-label, .wizard-dot, .blog-date, .blog-number, .act-nsd__fecha,
.data-table, time {
    font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------------
   11. Anclas: el destino queda justo debajo de la cabecera fija (64 px en
   la portada, 68 px en la academia) en todas las anchuras. En la portada
   habia scroll-margin-top: 80px solo en algunas secciones y, en movil,
   ademas un scroll-padding de 64 px que se sumaba (144 px de hueco);
   ahora es un unico valor para todas las secciones, Embajadores incluida.
   --------------------------------------------------------------------- */
html:has(> body > nav) { scroll-padding-top: 80px; }
#programa, #precios, #opiniones, #blog, #inscripcion { scroll-margin-top: 0; }


/* ---------------------------------------------------------------------
   12. Formularios: en movil, 16 px en los campos para que iOS no haga
   zoom al enfocarlos (estaban a 15 px).
   --------------------------------------------------------------------- */
@media (max-width: 900px), (pointer: coarse) {
    :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
        font-size: 16px;
    }
}


/* ---------------------------------------------------------------------
   13. Zonas seguras: lo fijo abajo no queda bajo la barra de inicio del
   iPhone. En movil el aviso de cookies se apoya encima de la barra de
   pestanas, que ya suma la zona segura a su altura.
   --------------------------------------------------------------------- */
.aviso-cookies { bottom: calc(16px + env(safe-area-inset-bottom)); }
@media (max-width: 900px) {
    .aviso-cookies { bottom: calc(84px + env(safe-area-inset-bottom)); }
    #inscripcion.form-section { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (min-width: 901px) {
    body .volver-arriba {
        bottom: calc(20px + env(safe-area-inset-bottom));
        right: calc(20px + env(safe-area-inset-right));
    }
}


/* ---------------------------------------------------------------------
   14. Dianas tactiles: los botones de solo icono crecen su zona de toque
   con un pseudo-elemento invisible, sin cambiar su aspecto.
   Flechas del carrusel 36 px -> 44 px; cierres de 40 px -> 44 px.
   Los puntos del carrusel (22 px, separados 8 px) llegan a 30 px: mas
   solaparia la zona de toque del punto vecino.
   --------------------------------------------------------------------- */
@media (pointer: coarse) {
    .blog-grupo .act-nsd__flecha { position: relative; }
    .blog-grupo .act-nsd__flecha::before,
    .act-nsd-modal__cerrar::before,
    .form-modal-close::before,
    .blog-grupo .act-nsd__punto::before { content: ''; position: absolute; }
    .blog-grupo .act-nsd__flecha::before { inset: -4px; }
    .act-nsd-modal__cerrar::before, .form-modal-close::before { inset: -2px; }
    .blog-grupo .act-nsd__punto { position: relative; }
    .blog-grupo .act-nsd__punto::before { inset: -4px; }
}


/* ---------------------------------------------------------------------
   Sin desbordamiento lateral. Academia, movil: la columna unica de la
   lista de espera era "1fr", que no baja del ancho minimo de su contenido
   y empujaba la pagina 166 px a la derecha a 375 px. minmax(0, 1fr) la
   ajusta al ancho de la pantalla sin cambiar nada mas.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    .waitlist-inner { grid-template-columns: minmax(0, 1fr); }
}
/* Academia, movil: la barra de enlaces legales del pie hereda el estilo
   de la cabecera (altura fija de 68 px, sin salto de linea) y sus cinco
   enlaces no caben: se salian 166 px por la derecha. En movil se deja
   que bajen de linea dentro de la misma banda; en escritorio no cambia. */
@media (max-width: 900px) {
    .footer-bottom > nav.footer-legal {
        height: auto; min-height: 68px; flex-wrap: wrap; justify-content: flex-start;
        gap: 4px 24px; padding: 14px 24px; min-width: 0; max-width: 100%;
    }
}


/* ---------------------------------------------------------------------
   10. Movimiento reducido: nada se desplaza ni se escala al pasar o
   pulsar; el cambio de color sigue dando la respuesta. (comun.css ya
   anula duraciones y scroll suave; las apariciones de la portada ya
   quedan en su estado final.)
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    :is(.btn-primary, .btn-secondary, .price-card, .opinion-card, .embajador-card, .course-card,
        .btn-login, .btn-submit, .btn-google, .btn-outline, .btn-course, .wl-submit,
        .nav-links .nav-cta, .precios-tab, .wizard-btn-next, .wizard-btn-prev,
        .form-submit button[type="submit"], .aviso-cookies button, .btn,
        .form-modal-close, .act-nsd__flecha, .act-nsd-modal__cerrar, .volver-arriba,
        .tab-item, .tab-acad-item):is(:hover, :active) {
        transform: none !important;
    }
    .volver-arriba.is-visible { transform: none; }
    #inscripcion.form-section { transition: none; }
}