/* =========================================================================
   fdh.css — Sistema de diseño de la web pública de formaciondisenohumano.com
   Todo va prefijado con .fdh- para convivir con base.css y Bootstrap
   sin tocar la plataforma de alumno.
   ========================================================================= */

:root {
    /* Color */
    --fdh-tinta: #141719;
    --fdh-tinta-70: rgba(20, 23, 25, .70);
    /* El sufijo es histórico: el valor subió a .64 porque por debajo de ahí el
       texto pequeño no llega al 4.5:1 de contraste sobre el crema del fondo. */
    --fdh-tinta-50: rgba(20, 23, 25, .64);
    --fdh-crema: #faf7f2;
    --fdh-crema-2: #f2ece4;
    --fdh-blanco: #ffffff;
    --fdh-linea: rgba(20, 23, 25, .12);

    --fdh-rosa: #d95678;
    --fdh-rosa-osc: #b93b5c;
    --fdh-rosa-suave: #fbeaee;
    --fdh-azul: #297392;
    --fdh-azul-osc: #1c5670;
    --fdh-azul-suave: #e6f0f5;
    --fdh-naranja: #e09746;
    --fdh-naranja-suave: #fdf1e2;

    /* Versiones para TEXTO de los colores de marca. Los de arriba están
       pensados para rellenos y trazos: en letra pequeña sobre fondo claro se
       quedan muy por debajo del contraste mínimo y no se leen. */
    --fdh-rosa-texto: #a83352;
    --fdh-naranja-texto: #8f4f0a;
    --fdh-verde-texto: #2f4a34;
    --fdh-lila: #c9a6e9;
    --fdh-lila-suave: #f3ebfb;
    --fdh-verde: #3a5a40;
    --fdh-oro: #ffd84d;
    --fdh-oro-osc: #f2c400;

    /* Tipografía */
    --fdh-display: 'Druk Wide Medium', 'Poppins', system-ui, sans-serif;
    --fdh-serif: 'ITC Garamond Std', Georgia, serif;
    --fdh-texto: 'Poppins', system-ui, -apple-system, sans-serif;

    /* Escala fluida */
    --fdh-h1: clamp(2.1rem, 1.35rem + 3.4vw, 4.4rem);
    --fdh-h2: clamp(1.65rem, 1.15rem + 2.1vw, 2.9rem);
    --fdh-h3: clamp(1.2rem, 1.02rem + .78vw, 1.7rem);
    --fdh-h4: clamp(1.02rem, .95rem + .35vw, 1.22rem);
    --fdh-body: clamp(1rem, .96rem + .18vw, 1.09rem);
    --fdh-small: .875rem;

    /* Espaciado */
    --fdh-s1: .5rem;
    --fdh-s2: 1rem;
    --fdh-s3: 1.5rem;
    --fdh-s4: 2rem;
    --fdh-s5: 3rem;
    --fdh-s6: 4.5rem;
    --fdh-seccion: clamp(3.5rem, 2.2rem + 5vw, 7rem);

    /* Formas */
    --fdh-r-s: 10px;
    --fdh-r-m: 18px;
    --fdh-r-l: 28px;
    --fdh-r-xl: 40px;
    --fdh-sombra-s: 0 2px 10px rgba(20, 23, 25, .06);
    --fdh-sombra-m: 0 10px 30px rgba(20, 23, 25, .09);
    --fdh-sombra-l: 0 24px 60px rgba(20, 23, 25, .14);

    --fdh-ancho: 1180px;
    --fdh-ancho-ancho: 1400px;
    --fdh-ancho-texto: 720px;
}

/* ---------- Base ---------- */
.fdh {
    font-family: var(--fdh-texto);
    color: var(--fdh-tinta);
    font-size: var(--fdh-body);
    line-height: 1.65;
    background: var(--fdh-crema);
    overflow-x: clip;
}

.fdh *,
.fdh *::before,
.fdh *::after {
    box-sizing: border-box;
}

.fdh img {
    max-width: 100%;
    height: auto;
    display: block;
}

.fdh h1,
.fdh h2,
.fdh h3,
.fdh h4,
.fdh h5 {
    color: var(--fdh-tinta);
    margin: 0 0 var(--fdh-s3);
    letter-spacing: -.02em;
    line-height: 1.12;
    text-transform: none;
}

.fdh p {
    margin: 0 0 var(--fdh-s3);
}

.fdh a {
    color: var(--fdh-azul);
    text-decoration: none;
}

.fdh a:hover {
    color: var(--fdh-azul-osc);
    text-decoration: underline;
}

.fdh strong,
.fdh b {
    font-weight: 600;
}

.fdh ul,
.fdh ol {
    margin: 0 0 var(--fdh-s3);
    padding-left: 1.3em;
}

.fdh li {
    margin-bottom: .5em;
}

.fdh-display {
    font-family: var(--fdh-display);
    text-transform: uppercase;
    letter-spacing: -.01em;
    line-height: 1.02;
}

.fdh-serif {
    font-family: var(--fdh-serif);
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
}

/* ---------- Layout ---------- */
.fdh-seccion {
    padding: var(--fdh-seccion) var(--fdh-s3);
    position: relative;
}

/* La cabecera va fija, así que los saltos a un ancla tienen que dejarle sitio
   o el título al que salta queda escondido detrás. */
.fdh [id] {
    scroll-margin-top: 7.5rem;
}

.fdh-seccion--compacta {
    padding-top: calc(var(--fdh-seccion) * .55);
    padding-bottom: calc(var(--fdh-seccion) * .55);
}

.fdh-wrap {
    width: 100%;
    max-width: var(--fdh-ancho);
    margin-inline: auto;
}

.fdh-wrap--ancho {
    max-width: var(--fdh-ancho-ancho);
}

.fdh-wrap--texto {
    max-width: var(--fdh-ancho-texto);
}

.fdh-centro {
    text-align: center;
}

.fdh-bg-crema {
    background: var(--fdh-crema);
}

.fdh-bg-crema2 {
    background: var(--fdh-crema-2);
}

.fdh-bg-blanco {
    background: var(--fdh-blanco);
}

.fdh-bg-tinta {
    background: var(--fdh-tinta);
    color: var(--fdh-crema);
}

.fdh-bg-tinta h1,
.fdh-bg-tinta h2,
.fdh-bg-tinta h3,
.fdh-bg-tinta h4 {
    color: var(--fdh-crema);
}

.fdh-bg-lila {
    background: var(--fdh-lila-suave);
}

.fdh-bg-azul {
    background: var(--fdh-azul-suave);
}

.fdh-bg-rosa {
    background: var(--fdh-rosa-suave);
}

/* ---------- Tipografía de bloque ---------- */
.fdh-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fdh-rosa-texto);
    margin-bottom: var(--fdh-s2);
    padding: .38em .95em;
    border: 1px solid currentColor;
    border-radius: 999px;
    line-height: 1;
}

.fdh-kicker--azul {
    color: var(--fdh-azul);
}

.fdh-kicker--naranja {
    color: var(--fdh-naranja-texto);
}

.fdh-kicker--claro {
    color: var(--fdh-oro);
}

.fdh-h1 {
    font-size: var(--fdh-h1);
}

.fdh-h2 {
    font-size: var(--fdh-h2);
}

.fdh-h3 {
    font-size: var(--fdh-h3);
}

.fdh-lead {
    font-size: clamp(1.06rem, 1rem + .45vw, 1.32rem);
    line-height: 1.6;
    color: var(--fdh-tinta-70);
    font-weight: 300;
}

.fdh-bg-tinta .fdh-lead {
    color: rgba(250, 247, 242, .8);
}

.fdh-cabecera-seccion {
    max-width: 760px;
    margin: 0 auto var(--fdh-s5);
    text-align: center;
}

.fdh-cabecera-seccion p:last-child {
    margin-bottom: 0;
}

/* ---------- Botones ---------- */
.fdh-btn {
    --btn-bg: var(--fdh-tinta);
    --btn-fg: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    font-family: var(--fdh-texto);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    padding: 1.05em 2.1em;
    border-radius: 999px;
    border: 2px solid transparent;
    background: var(--btn-bg);
    color: var(--btn-fg) !important;
    text-decoration: none !important;
    cursor: pointer;
    text-align: center;
    transition: transform .18s cubic-bezier(.3, .8, .4, 1), box-shadow .18s ease, background .18s ease;
    box-shadow: 0 6px 18px rgba(20, 23, 25, .13);
    -webkit-tap-highlight-color: transparent;
}

.fdh-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(20, 23, 25, .2);
    color: var(--btn-fg) !important;
    text-decoration: none !important;
}

.fdh-btn:active {
    transform: translateY(0);
}

.fdh-btn--oro {
    --btn-bg: var(--fdh-oro);
    --btn-fg: var(--fdh-tinta);
}

.fdh-btn--oro:hover {
    --btn-bg: var(--fdh-oro-osc);
}

/* Fondo en el rosa oscuro: con el rosa base, el blanco de la etiqueta se queda
   en 3.8:1 y en los botones de texto normal se lee peor de lo que parece. */
.fdh-btn--rosa {
    --btn-bg: var(--fdh-rosa-osc);
    --btn-fg: #fff;
}

.fdh-btn--rosa:hover {
    --btn-bg: #9d2f4c;
}

.fdh-btn--azul {
    --btn-bg: var(--fdh-azul);
    --btn-fg: #fff;
}

.fdh-btn--azul:hover {
    --btn-bg: var(--fdh-azul-osc);
}

.fdh-btn--blanco {
    --btn-bg: #fff;
    --btn-fg: var(--fdh-tinta);
}

/* Bizum, con su azul corporativo */
.fdh-btn--bizum {
    --btn-bg: #04d0f0;
    --btn-fg: #0a2540;
}

.fdh-btn--bizum:hover {
    --btn-bg: #00b4d2;
}

.fdh-btn--fantasma {
    --btn-bg: transparent;
    --btn-fg: var(--fdh-tinta);
    border-color: currentColor;
    box-shadow: none;
}

.fdh-btn--fantasma:hover {
    box-shadow: none;
    background: rgba(20, 23, 25, .06);
}

/* Sobre fondos oscuros el fantasma tiene que ir en claro, o desaparece.
   .fdh-cta es una tarjeta oscura dentro de una sección clara. */
.fdh-bg-tinta .fdh-btn--fantasma,
.fdh-cta .fdh-btn--fantasma,
.fdh-hero .fdh-btn--fantasma {
    --btn-fg: #fff;
    border-color: rgba(255, 255, 255, .45);
}

.fdh-bg-tinta .fdh-btn--fantasma:hover,
.fdh-cta .fdh-btn--fantasma:hover,
.fdh-hero .fdh-btn--fantasma:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .8);
}

.fdh-btn--lg {
    font-size: clamp(.98rem, .94rem + .2vw, 1.08rem);
    padding: 1.15em 2.35em;
}

.fdh-btn--xl {
    font-size: clamp(1rem, .95rem + .3vw, 1.16rem);
    padding: 1.25em 2.6em;
}

.fdh-btn--bloque {
    display: flex;
    width: 100%;
}

/* El botón es un flex en fila: si lleva nota, hay que apilarla debajo
   del texto principal o las dos líneas salen una al lado de la otra. */
.fdh-btn:has(.fdh-btn__nota) {
    flex-direction: column;
    gap: 0;
    line-height: 1.25;
}

.fdh-btn__nota {
    display: block;
    font-size: .78rem;
    font-weight: 400;
    opacity: .8;
    margin-top: .25em;
}

.fdh-btn-grupo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fdh-s2);
    align-items: center;
}

.fdh-centro .fdh-btn-grupo {
    justify-content: center;
}

/* Pulso suave para el CTA principal */
@keyframes fdh-pulso {

    0%,
    100% {
        box-shadow: 0 6px 18px rgba(217, 86, 120, .3);
    }

    50% {
        box-shadow: 0 6px 30px rgba(217, 86, 120, .55);
    }
}

.fdh-btn--pulso {
    animation: fdh-pulso 2.6s ease-in-out infinite;
}

/* ---------- Marquee ---------- */
.fdh-marquee {
    background: var(--fdh-tinta);
    color: var(--fdh-crema);
    overflow: hidden;
    padding: .7em 0;
    white-space: nowrap;
    border-block: 1px solid rgba(255, 255, 255, .12);
}

.fdh-marquee__pista {
    display: inline-flex;
    gap: 2.5rem;
    align-items: center;
    animation: fdh-marquee 32s linear infinite;
    will-change: transform;
}

.fdh-marquee span {
    font-family: var(--fdh-display);
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 2.5rem;
}

.fdh-marquee span::after {
    content: '✦';
    color: var(--fdh-oro);
    font-family: var(--fdh-texto);
}

@keyframes fdh-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ---------- Hero ---------- */
.fdh-hero {
    position: relative;
    background: var(--fdh-tinta);
    color: var(--fdh-crema);
    padding: clamp(5rem, 3rem + 9vw, 9rem) var(--fdh-s3) clamp(3.5rem, 2rem + 6vw, 6rem);
    overflow: hidden;
    isolation: isolate;
}

.fdh-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(90ch 60ch at 82% 12%, rgba(201, 166, 233, .22), transparent 62%),
        radial-gradient(70ch 50ch at 8% 88%, rgba(217, 86, 120, .2), transparent 60%);
    z-index: -1;
}

/* Trama de puntos muy tenue: le quita el aire de fondo plano sin distraer. */
.fdh-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
    z-index: -1;
    pointer-events: none;
}

.fdh-hero__grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: center;
    max-width: var(--fdh-ancho-ancho);
    margin-inline: auto;
}

.fdh-hero h1 {
    color: #fff;
    margin-bottom: var(--fdh-s3);
}

/* El hero es oscuro pero no lleva .fdh-bg-tinta, así que el texto heredaba
   el color de cuerpo (tinta sobre tinta) y no se leía. */
.fdh-hero p,
.fdh-hero li {
    color: rgba(250, 247, 242, .84);
}

.fdh-hero .fdh-lead {
    color: rgba(250, 247, 242, .88);
}

.fdh-hero b,
.fdh-hero strong {
    color: #fff;
}

.fdh-hero h2,
.fdh-hero h3,
.fdh-hero h4 {
    color: #fff;
}

.fdh-hero a:not(.fdh-btn) {
    color: var(--fdh-oro);
}

.fdh-hero h1 .fdh-serif {
    display: block;
    font-size: 1.12em;
    color: var(--fdh-lila);
    text-transform: none;
    margin-top: .06em;
}

.fdh-hero__media {
    position: relative;
    border-radius: var(--fdh-r-l);
    overflow: hidden;
    box-shadow: var(--fdh-sombra-l);
    aspect-ratio: 4 / 5;
}

.fdh-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fdh-hero__badge {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    background: rgba(20, 23, 25, .82);
    backdrop-filter: blur(8px);
    color: #fff;
    border-radius: 999px;
    padding: .6em 1.3em;
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, .18);
}

/* Hero de la home: texto a la izquierda, tarjeta de oferta a la derecha */
/* Cualquier hero con tarjeta de oferta (home y página de venta) reparte igual. */
.fdh-hero--home .fdh-hero__grid,
.fdh-hero__grid:has(.fdh-oferta-card) {
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
}

.fdh-hero__puntos {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--fdh-s4);
    display: grid;
    gap: .6rem;
}

.fdh-hero__puntos li {
    position: relative;
    padding-left: 1.9rem;
    font-size: .95rem;
    line-height: 1.5;
}

.fdh-hero__puntos li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .2em;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: rgba(255, 216, 77, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd84d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/.8rem no-repeat;
}

.fdh-hero__micro {
    font-size: .82rem;
    color: rgba(250, 247, 242, .62) !important;
    margin: 1.2rem 0 0;
}

/* Tarjeta de oferta del hero */
.fdh-oferta-card {
    background: var(--fdh-blanco);
    border-radius: var(--fdh-r-l);
    padding: var(--fdh-s5) var(--fdh-s4) var(--fdh-s4);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
    display: flex;
    flex-direction: column;
    gap: var(--fdh-s2);
    position: relative;
    color: var(--fdh-tinta);
}

/* ---------- Islas claras sobre fondo oscuro ----------
   Las secciones oscuras ponen el texto en claro heredando hacia abajo, así que
   cualquier tarjeta blanca que viva dentro se queda con letra blanca sobre
   blanco. En vez de ir parcheando tarjeta por tarjeta, aquí se devuelve el
   color de texto a todas las que son claras por definición. */
.fdh-hero .fdh-oferta-card,
.fdh-hero .fdh-video,
.fdh-hero .fdh-card,
.fdh-bg-tinta .fdh-video,
.fdh-bg-tinta .fdh-card,
.fdh-bg-tinta .fdh-precio,
.fdh-bg-tinta .fdh-testi,
.fdh-cta .fdh-video,
.fdh-cta .fdh-card {
    color: var(--fdh-tinta);
}

.fdh-hero .fdh-oferta-card :is(p, li, b, strong, h2, h3, h4),
.fdh-hero .fdh-video :is(p, li, b, strong, h2, h3, h4),
.fdh-hero .fdh-card :is(p, li, b, strong, h2, h3, h4),
.fdh-bg-tinta .fdh-video :is(p, li, b, strong, h2, h3, h4),
.fdh-bg-tinta .fdh-card :is(p, li, b, strong, h2, h3, h4),
.fdh-bg-tinta .fdh-precio :is(p, li, b, strong, h2, h3, h4),
.fdh-bg-tinta .fdh-testi :is(p, li, b, strong, h2, h3, h4),
.fdh-cta .fdh-video :is(p, li, b, strong, h2, h3, h4),
.fdh-cta .fdh-card :is(p, li, b, strong, h2, h3, h4) {
    color: var(--fdh-tinta);
}

/* Los párrafos secundarios de esas tarjetas van en gris, no en tinta plena. */
.fdh-bg-tinta .fdh-video__info p,
.fdh-hero .fdh-video__info p,
.fdh-cta .fdh-video__info p,
.fdh-bg-tinta .fdh-card p,
.fdh-hero .fdh-card p {
    color: var(--fdh-tinta-70);
}

/* El kicker de módulo del vídeo mantiene su azul. */
.fdh-bg-tinta .fdh-video__modulo,
.fdh-hero .fdh-video__modulo,
.fdh-cta .fdh-video__modulo {
    color: var(--fdh-azul);
}

.fdh-oferta-card__etiqueta {
    position: absolute;
    top: -.9rem;
    left: 50%;
    transform: translateX(-50%);
    /* Rosa oscuro en todas las etiquetas con texto blanco encima: son 12px y
       sobre el rosa base no llegan al contraste mínimo. */
    background: var(--fdh-rosa-osc);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .45em 1.2em;
    border-radius: 999px;
    white-space: nowrap;
}

.fdh-oferta-card__cifra {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.fdh-oferta-card__ahora {
    font-family: var(--fdh-display);
    font-size: clamp(2.3rem, 1.7rem + 2.2vw, 3.2rem);
    line-height: 1;
    color: var(--fdh-tinta);
}

.fdh-oferta-card__antes {
    font-size: 1.05rem;
    color: var(--fdh-tinta-50);
    text-decoration: line-through;
    text-decoration-color: var(--fdh-rosa);
    text-decoration-thickness: 2px;
}

.fdh-oferta-card__lista {
    margin-bottom: 0;
}

.fdh-oferta-card__lista li {
    font-size: .9rem;
}

.fdh-oferta-card__nota {
    font-size: .76rem;
    color: var(--fdh-tinta-50) !important;
    text-align: center;
    margin: 0;
}

@media (max-width: 900px) {
    .fdh-hero--home .fdh-hero__grid,
    .fdh-hero__grid:has(.fdh-oferta-card) {
        grid-template-columns: 1fr;
    }

    .fdh-oferta-card {
        max-width: 460px;
        margin-inline: auto;
        width: 100%;
    }
}

.fdh-hero__precio {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .7em;
    margin-bottom: var(--fdh-s3);
}

.fdh-hero__precio-ahora {
    font-family: var(--fdh-display);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
    color: var(--fdh-oro);
    line-height: 1;
}

.fdh-hero__precio-antes {
    font-size: 1.05rem;
    color: rgba(250, 247, 242, .62);
    text-decoration: line-through;
    text-decoration-color: var(--fdh-rosa);
    text-decoration-thickness: 2px;
}

.fdh-hero__precio-off {
    background: var(--fdh-rosa-osc);
    color: #fff;
    border-radius: 999px;
    padding: .3em .85em;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
}

/* Barra de confianza bajo el hero */
/* Barra de confianza: monta sobre el hero como una tarjeta, para coser
   el bloque oscuro con el resto de la página. */
.fdh-confianza {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(.9rem, .5rem + 1.6vw, 2.6rem);
    justify-content: center;
    align-items: center;
    padding: var(--fdh-s3) var(--fdh-s4);
    background: var(--fdh-blanco);
    border: 1px solid var(--fdh-linea);
    border-radius: var(--fdh-r-l);
    box-shadow: 0 18px 40px rgba(20, 23, 25, .1);
    width: min(var(--fdh-ancho-ancho), calc(100% - 2 * var(--fdh-s3)));
    margin: calc(var(--fdh-s5) * -1) auto var(--fdh-s5);
    position: relative;
    z-index: 2;
}

.fdh-confianza__item {
    display: flex;
    align-items: center;
    gap: .55em;
    font-size: .88rem;
    font-weight: 500;
    color: var(--fdh-tinta-70);
}

@media (max-width: 700px) {
    .fdh-confianza {
        margin-top: calc(var(--fdh-s4) * -1);
        gap: .8rem 1.4rem;
    }

    .fdh-confianza__item {
        font-size: .82rem;
    }
}

.fdh-confianza__item b {
    color: var(--fdh-tinta);
    font-weight: 700;
}

/* ---------- Cifras ---------- */
.fdh-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--fdh-s2);
    text-align: center;
}

.fdh-cifra {
    background: var(--fdh-blanco);
    border: 1px solid var(--fdh-linea);
    border-radius: var(--fdh-r-m);
    padding: var(--fdh-s4) var(--fdh-s2);
    transition: transform .25s ease, box-shadow .25s ease;
}

.fdh-cifra:hover {
    transform: translateY(-4px);
    box-shadow: var(--fdh-sombra-m);
}

.fdh-cifra__num {
    font-family: var(--fdh-display);
    font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem);
    color: var(--fdh-rosa);
    line-height: 1;
    display: block;
    margin-bottom: .3em;
}

.fdh-cifra__txt {
    font-size: .85rem;
    color: var(--fdh-tinta-70);
    line-height: 1.35;
}

/* ---------- Grid genérico ---------- */
.fdh-grid {
    display: grid;
    gap: var(--fdh-s3);
}

.fdh-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.fdh-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.fdh-grid--4 {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.fdh-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: center;
}

.fdh-split--invertido>*:first-child {
    order: 2;
}

.fdh-split__media img {
    border-radius: var(--fdh-r-l);
    box-shadow: var(--fdh-sombra-m);
    width: 100%;
}

/* ---------- Tarjetas ---------- */
.fdh-card {
    background: var(--fdh-blanco);
    border: 1px solid var(--fdh-linea);
    border-radius: var(--fdh-r-m);
    padding: var(--fdh-s4);
    height: 100%;
    transition: transform .25s cubic-bezier(.3, .8, .4, 1), box-shadow .25s ease, border-color .25s ease;
}

.fdh-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--fdh-sombra-m);
    border-color: rgba(217, 86, 120, .35);
}

.fdh-card__icono {
    font-size: 1.9rem;
    line-height: 1;
    display: block;
    margin-bottom: var(--fdh-s2);
}

.fdh-card h3 {
    font-size: var(--fdh-h4);
    font-weight: 700;
    margin-bottom: .6rem;
}

.fdh-card p {
    font-size: .95rem;
    color: var(--fdh-tinta-70);
    margin-bottom: 0;
    font-weight: 300;
}

/* ---------- Listas con check ---------- */
.fdh-checks {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--fdh-s4);
    display: grid;
    gap: .85rem;
}

.fdh-checks li {
    position: relative;
    padding-left: 2.1rem;
    margin: 0;
    font-weight: 300;
}

.fdh-checks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .28em;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--fdh-rosa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/.85rem no-repeat;
}

.fdh-checks--azul li::before {
    background-color: var(--fdh-azul);
}

.fdh-checks--oro li::before {
    background-color: var(--fdh-verde);
}

.fdh-checks li b {
    font-weight: 600;
}

.fdh-cruces {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--fdh-s4);
    display: grid;
    gap: .85rem;
}

.fdh-cruces li {
    position: relative;
    padding-left: 2.1rem;
    margin: 0;
    font-weight: 300;
    color: var(--fdh-tinta-70);
}

.fdh-cruces li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .28em;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: #c9ccce url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/.8rem no-repeat;
}

/* ---------- Cita destacada ---------- */
.fdh-cita {
    border-left: 4px solid var(--fdh-naranja);
    background: var(--fdh-naranja-suave);
    padding: var(--fdh-s3) var(--fdh-s4);
    border-radius: 0 var(--fdh-r-m) var(--fdh-r-m) 0;
    font-size: 1.08rem;
    font-weight: 400;
    margin: var(--fdh-s4) 0;
}

.fdh-cita p:last-child {
    margin-bottom: 0;
}

.fdh-nota {
    background: var(--fdh-azul-suave);
    border-radius: var(--fdh-r-m);
    padding: var(--fdh-s3) var(--fdh-s4);
    font-size: .95rem;
    margin: var(--fdh-s4) 0;
}

.fdh-nota p:last-child {
    margin-bottom: 0;
}

/* ---------- Acordeón (temario y FAQ) ---------- */
.fdh-acordeon {
    display: grid;
    gap: .75rem;
}

.fdh-acc {
    background: var(--fdh-blanco);
    border: 1px solid var(--fdh-linea);
    border-radius: var(--fdh-r-m);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.fdh-acc[open] {
    border-color: rgba(41, 115, 146, .4);
    box-shadow: var(--fdh-sombra-s);
}

.fdh-acc__cab {
    display: flex;
    align-items: center;
    gap: var(--fdh-s2);
    padding: 1.15rem var(--fdh-s3);
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 1.02rem;
    user-select: none;
}

.fdh-acc__cab::-webkit-details-marker {
    display: none;
}

.fdh-acc__cab:hover {
    background: rgba(41, 115, 146, .04);
}

.fdh-acc__num {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--fdh-azul-suave);
    color: var(--fdh-azul);
    display: grid;
    place-items: center;
    font-family: var(--fdh-display);
    font-size: .8rem;
}

.fdh-acc[open] .fdh-acc__num {
    background: var(--fdh-azul);
    color: #fff;
}

.fdh-acc__titulo {
    flex: 1 1 auto;
}

.fdh-acc__meta {
    flex: 0 0 auto;
    font-size: .78rem;
    font-weight: 500;
    color: var(--fdh-tinta-50);
    white-space: nowrap;
}

.fdh-acc__flecha {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    border-right: 2px solid var(--fdh-tinta-50);
    border-bottom: 2px solid var(--fdh-tinta-50);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .25s ease;
}

.fdh-acc[open] .fdh-acc__flecha {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.fdh-acc__cuerpo {
    padding: 0 var(--fdh-s3) var(--fdh-s3);
    animation: fdh-desplegar .28s ease;
}

.fdh-acc__cuerpo>p:first-child {
    margin-top: 0;
}

.fdh-acc__cuerpo>*:last-child {
    margin-bottom: 0;
}

@keyframes fdh-desplegar {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fdh-lecciones {
    list-style: none;
    padding: 0;
    margin: var(--fdh-s2) 0 0;
    display: grid;
    gap: .1rem;
    border-top: 1px solid var(--fdh-linea);
}

.fdh-lecciones li {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--fdh-linea);
    font-size: .93rem;
    font-weight: 300;
    margin: 0;
}

.fdh-lecciones li::before {
    content: '▸';
    color: var(--fdh-rosa);
    font-size: .85rem;
    line-height: 1.6;
}

.fdh-lecciones li.es-test {
    color: var(--fdh-verde);
    font-weight: 500;
}

.fdh-lecciones li.es-test::before {
    content: '✓';
}

/* ---------- Testimonios ---------- */
.fdh-testis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: var(--fdh-s3);
}

.fdh-testi {
    background: var(--fdh-blanco);
    border-radius: var(--fdh-r-m);
    padding: var(--fdh-s4);
    border: 1px solid var(--fdh-linea);
    display: flex;
    flex-direction: column;
    gap: var(--fdh-s2);
    height: 100%;
}

.fdh-testi__estrellas {
    /* Un ámbar más profundo que el oro de marca: sobre tarjeta blanca el oro
       claro se veía lavado. Las estrellas son un icono, y su valor va escrito
       al lado en texto, así que no se les exige el contraste de una etiqueta. */
    color: #d99b00;
    font-size: .95rem;
    letter-spacing: .12em;
}

.fdh-testi__destacado {
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
}

.fdh-testi__texto {
    font-size: .93rem;
    font-weight: 300;
    color: var(--fdh-tinta-70);
    margin: 0;
    flex: 1 1 auto;
}

.fdh-testi__pie {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding-top: var(--fdh-s2);
    border-top: 1px solid var(--fdh-linea);
}

.fdh-testi__pie img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.fdh-testi__nombre {
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.2;
}

.fdh-testi__meta {
    font-size: .76rem;
    color: var(--fdh-tinta-50);
}

/* ---------- Carrusel horizontal ---------- */
.fdh-carrusel {
    position: relative;
}

.fdh-carrusel__pista {
    display: flex;
    gap: var(--fdh-s3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: .5rem .25rem 1.5rem;
    margin-inline: -.25rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.fdh-carrusel__pista>* {
    flex: 0 0 clamp(270px, 30%, 380px);
    scroll-snap-align: start;
}

.fdh-carrusel__pista::-webkit-scrollbar {
    height: 6px;
}

.fdh-carrusel__pista::-webkit-scrollbar-thumb {
    background: rgba(20, 23, 25, .22);
    border-radius: 99px;
}

.fdh-carrusel__pista::-webkit-scrollbar-track {
    background: rgba(20, 23, 25, .06);
    border-radius: 99px;
}

.fdh-carrusel__nav {
    display: flex;
    gap: .6rem;
    justify-content: center;
    margin-top: var(--fdh-s2);
}

.fdh-carrusel__btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--fdh-linea);
    background: var(--fdh-blanco);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--fdh-tinta);
    transition: background .2s ease, transform .2s ease;
}

.fdh-carrusel__btn:hover {
    background: var(--fdh-tinta);
    color: #fff;
    transform: scale(1.06);
}

.fdh-carrusel__btn[disabled] {
    opacity: .35;
    cursor: default;
    transform: none;
}

/* ---------- Vídeos ---------- */
.fdh-video {
    background: var(--fdh-blanco);
    border-radius: var(--fdh-r-m);
    overflow: hidden;
    border: 1px solid var(--fdh-linea);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.fdh-video__marco {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--fdh-tinta);
}

.fdh-video__marco iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.fdh-video__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.fdh-video__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    border: 0;
    background: rgba(20, 23, 25, .25);
    transition: background .25s ease;
    width: 100%;
    padding: 0;
}

.fdh-video__play:hover {
    background: rgba(20, 23, 25, .1);
}

.fdh-video__play span {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--fdh-oro);
    color: var(--fdh-tinta);
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    padding-left: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    transition: transform .25s cubic-bezier(.3, .8, .4, 1);
}

.fdh-video__play:hover span {
    transform: scale(1.12);
}

.fdh-video__info {
    padding: var(--fdh-s3);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    flex: 1 1 auto;
}

.fdh-video__modulo {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    color: var(--fdh-azul);
}

.fdh-video__info h3 {
    font-size: var(--fdh-h4);
    margin: 0;
}

.fdh-video__info p {
    font-size: .92rem;
    font-weight: 300;
    color: var(--fdh-tinta-70);
    margin: 0;
    flex: 1 1 auto;
}

/* ---------- Precios ---------- */
.fdh-precios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--fdh-s3);
    align-items: stretch;
    max-width: 900px;
    margin-inline: auto;
}

.fdh-precio {
    background: var(--fdh-blanco);
    border: 1px solid var(--fdh-linea);
    border-radius: var(--fdh-r-l);
    padding: var(--fdh-s5) var(--fdh-s4);
    display: flex;
    flex-direction: column;
    gap: var(--fdh-s2);
    position: relative;
}

.fdh-precio--destacado {
    border: 2px solid var(--fdh-tinta);
    box-shadow: var(--fdh-sombra-l);
}

.fdh-precio__etiqueta {
    position: absolute;
    top: -.9rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fdh-tinta);
    color: var(--fdh-oro);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .45em 1.2em;
    border-radius: 999px;
    white-space: nowrap;
}

.fdh-precio h3 {
    font-size: var(--fdh-h4);
    margin: 0;
}

.fdh-precio__cifra {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
}

.fdh-precio__ahora {
    font-family: var(--fdh-display);
    font-size: clamp(2.1rem, 1.6rem + 2vw, 3rem);
    line-height: 1;
}

.fdh-precio__antes {
    font-size: 1.05rem;
    color: var(--fdh-tinta-50);
    text-decoration: line-through;
    text-decoration-color: var(--fdh-rosa);
    text-decoration-thickness: 2px;
}

.fdh-precio__sub {
    font-size: .87rem;
    color: var(--fdh-tinta-70);
    margin: 0;
}

/* Ahorro destacado cuando hay oferta */
.fdh-ahorro {
    display: flex;
    align-items: center;
    gap: .7rem;
    background: linear-gradient(135deg, var(--fdh-rosa-suave), #fff6f8);
    border: 1px solid rgba(217, 86, 120, .28);
    border-radius: var(--fdh-r-m);
    padding: .7rem .9rem;
}

.fdh-ahorro__pct {
    flex: 0 0 auto;
    background: var(--fdh-rosa-osc);
    color: #fff;
    font-family: var(--fdh-display);
    font-size: 1rem;
    line-height: 1;
    padding: .45em .6em;
    border-radius: 8px;
    letter-spacing: -.02em;
}

.fdh-ahorro__txt {
    font-size: .88rem;
    line-height: 1.4;
    color: var(--fdh-tinta);
}

.fdh-ahorro__txt b {
    font-weight: 700;
    color: var(--fdh-rosa-osc);
}

/* Valor del regalo, junto al bonus correspondiente */
.fdh-checks__valor {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    color: var(--fdh-verde);
    background: rgba(58, 90, 64, .1);
    border-radius: 6px;
    padding: .12em .5em;
    margin-left: .35em;
    white-space: nowrap;
}

/* Sello de pago seguro bajo los botones */
.fdh-seguro-fila {
    max-width: 900px;
    margin: var(--fdh-s3) auto 0;
    display: flex;
    justify-content: center;
}

.fdh-seguro-fila .fdh-seguro {
    max-width: 62ch;
    font-size: .8rem;
}

.fdh-seguro {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .76rem;
    line-height: 1.45;
    color: var(--fdh-tinta-50);
    margin: 0;
    padding-top: .3rem;
}

.fdh-seguro__icono {
    flex: 0 0 auto;
    font-size: .9rem;
    line-height: 1.3;
}

.fdh-precio .fdh-checks {
    margin-bottom: 0;
    flex: 1 1 auto;
}

.fdh-precio .fdh-checks li {
    font-size: .93rem;
}

.fdh-pagos {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
    justify-content: center;
    margin-top: var(--fdh-s2);
}

.fdh-pagos span {
    font-size: .72rem;
    font-weight: 500;
    color: var(--fdh-tinta-70);
    border: 1px solid var(--fdh-linea);
    border-radius: 6px;
    padding: .3em .7em;
    background: var(--fdh-crema);
}

/* ---------- Popup de inscripción rápida ---------- */
.fdh-cko-fondo {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(12, 14, 16, .72);
    backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
    padding: 1rem;
    overflow-y: auto;
    opacity: 0;
    transition: opacity .22s ease;
}

.fdh-cko-fondo.abierto {
    opacity: 1;
}

.fdh-cko-fondo[hidden] {
    display: none;
}

body.fdh-cko-abierto {
    overflow: hidden;
}

.fdh-cko {
    position: relative;
    background: var(--fdh-crema);
    border-radius: var(--fdh-r-l);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    width: min(780px, 100%);
    max-height: min(94vh, 900px);
    overflow-y: auto;
    padding: var(--fdh-s5) var(--fdh-s4) var(--fdh-s4);
    transform: translateY(14px) scale(.985);
    transition: transform .24s cubic-bezier(.3, .9, .4, 1);
}

.fdh-cko-fondo.abierto .fdh-cko {
    transform: none;
}

.fdh-cko__cerrar {
    position: absolute;
    top: .7rem;
    right: .8rem;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 23, 25, .07);
    color: var(--fdh-tinta);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease;
}

.fdh-cko__cerrar:hover {
    background: rgba(20, 23, 25, .14);
}

.fdh-cko__cab {
    text-align: center;
    margin-bottom: var(--fdh-s3);
}

.fdh-cko__cab h3 {
    font-family: var(--fdh-display);
    font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem);
    margin: 0 0 .4rem;
}

.fdh-cko__cab p {
    margin: 0;
    font-size: .92rem;
    color: var(--fdh-tinta-70);
}

.fdh-cko__urgencia {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    margin: .8rem 0 0 !important;
    background: var(--fdh-rosa-suave);
    border: 1px solid rgba(217, 86, 120, .3);
    border-radius: 999px;
    padding: .45em 1em;
    font-size: .82rem !important;
    font-weight: 600;
    color: var(--fdh-rosa-osc) !important;
}

.fdh-cko__urgencia .reloj {
    font-variant-numeric: tabular-nums;
    background: var(--fdh-rosa-osc);
    color: #fff;
    border-radius: 5px;
    padding: .12em .5em;
}

.fdh-cko__incluye {
    background: var(--fdh-blanco);
    border: 1px solid var(--fdh-linea);
    border-radius: var(--fdh-r-m);
    padding: var(--fdh-s3);
    margin-bottom: var(--fdh-s3);
}

.fdh-cko__incluye-tit {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fdh-rosa);
    margin-bottom: .7rem;
}

.fdh-cko__incluye ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem 1rem;
}

.fdh-cko__incluye li {
    position: relative;
    padding-left: 1.5rem;
    font-size: .86rem;
    line-height: 1.4;
}

.fdh-cko__incluye li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .15em;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--fdh-rosa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/.72rem no-repeat;
}

.fdh-cko__valor {
    font-size: .7rem;
    font-weight: 600;
    color: var(--fdh-verde);
    background: rgba(58, 90, 64, .1);
    border-radius: 5px;
    padding: .1em .45em;
    white-space: nowrap;
}

.fdh-cko__opciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--fdh-s3);
}

.fdh-cko__op {
    background: var(--fdh-blanco);
    border: 1px solid var(--fdh-linea);
    border-radius: var(--fdh-r-m);
    padding: var(--fdh-s3);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    position: relative;
}

.fdh-cko__op--destacada {
    border: 2px solid var(--fdh-rosa);
}

.fdh-cko__op-etiqueta {
    position: absolute;
    top: -.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fdh-rosa-osc);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35em 1em;
    border-radius: 999px;
    white-space: nowrap;
}

.fdh-cko__op h4 {
    margin: 0;
    font-size: 1rem;
}

.fdh-cko__precio {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    flex-wrap: wrap;
}

.fdh-cko__precio b {
    font-family: var(--fdh-display);
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
    line-height: 1;
    font-weight: 400;
}

.fdh-cko__precio s {
    font-size: .92rem;
    color: var(--fdh-tinta-50);
    text-decoration-color: var(--fdh-rosa);
    text-decoration-thickness: 2px;
}

.fdh-cko__precio span {
    font-size: .85rem;
    color: var(--fdh-tinta-70);
}

.fdh-cko__ahorro {
    margin: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--fdh-rosa-osc);
}

.fdh-cko__op .fdh-btn {
    font-size: .92rem;
    padding: .85em 1.2em;
}

.fdh-cko__pie {
    margin-top: var(--fdh-s3);
    text-align: center;
}

.fdh-cko__pie .fdh-seguro {
    justify-content: center;
    text-align: left;
    max-width: 46ch;
    margin-inline: auto;
}

.fdh-cko__dudas {
    font-size: .8rem;
    color: var(--fdh-tinta-70);
    margin: .7rem 0 0;
}

@media (max-width: 640px) {

    .fdh-cko__opciones,
    .fdh-cko__incluye ul {
        grid-template-columns: 1fr;
    }

    .fdh-cko {
        padding: var(--fdh-s5) var(--fdh-s3) var(--fdh-s3);
    }
}

.fdh-garantia {
    display: flex;
    gap: var(--fdh-s3);
    align-items: flex-start;
    background: var(--fdh-crema-2);
    border-radius: var(--fdh-r-m);
    padding: var(--fdh-s3) var(--fdh-s4);
    max-width: 760px;
    margin: var(--fdh-s4) auto 0;
    font-size: .92rem;
}

.fdh-garantia__icono {
    font-size: 1.8rem;
    line-height: 1;
}

.fdh-garantia p:last-child {
    margin-bottom: 0;
}

/* ---------- Bloque de urgencia en precios ---------- */
.fdh-promo-bloque {
    background: var(--fdh-tinta);
    color: var(--fdh-crema);
    border-radius: var(--fdh-r-m);
    padding: var(--fdh-s3);
    text-align: center;
    max-width: 520px;
    margin: 0 auto var(--fdh-s4);
}

.fdh-promo-bloque__titulo {
    font-family: var(--fdh-display);
    font-size: .92rem;
    text-transform: uppercase;
    color: var(--fdh-oro);
    margin: 0;
    line-height: 1.3;
}

.fdh-promo-bloque .fdh-popup__reloj {
    margin: var(--fdh-s2) 0 .6rem;
}

.fdh-promo-bloque .fdh-popup__reloj div {
    background: rgba(255, 255, 255, .1);
}

.fdh-promo-bloque .fdh-popup__reloj b {
    color: #fff;
}

.fdh-promo-bloque .fdh-popup__reloj span {
    color: rgba(250, 247, 242, .6);
}

.fdh-promo-bloque__pie {
    font-size: .76rem;
    color: rgba(250, 247, 242, .6);
    margin: 0;
}

/* ---------- Tabla comparativa ---------- */
.fdh-tabla-wrap {
    overflow-x: auto;
    border-radius: var(--fdh-r-m);
    border: 1px solid var(--fdh-linea);
    background: var(--fdh-blanco);
    -webkit-overflow-scrolling: touch;
}

.fdh-tabla {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
    font-size: .93rem;
}

.fdh-tabla th,
.fdh-tabla td {
    padding: 1rem 1.15rem;
    text-align: left;
    border-bottom: 1px solid var(--fdh-linea);
    vertical-align: top;
}

.fdh-tabla thead th {
    background: var(--fdh-tinta);
    color: var(--fdh-crema);
    font-weight: 600;
    font-size: .84rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    position: sticky;
    top: 0;
}

.fdh-tabla thead th:first-child {
    border-top-left-radius: var(--fdh-r-m);
}

.fdh-tabla thead th:last-child {
    border-top-right-radius: var(--fdh-r-m);
}

.fdh-tabla tbody tr:last-child td {
    border-bottom: 0;
}

.fdh-tabla tbody tr:nth-child(even) {
    background: rgba(20, 23, 25, .022);
}

.fdh-tabla td:first-child {
    font-weight: 600;
}

.fdh-tabla .si {
    color: var(--fdh-verde);
    font-weight: 600;
}

.fdh-tabla .no {
    color: var(--fdh-tinta-50);
}

/* ---------- CTA de sección ---------- */
.fdh-cta {
    background: var(--fdh-tinta);
    color: var(--fdh-crema);
    border-radius: var(--fdh-r-xl);
    padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.fdh-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(60ch 40ch at 20% 0%, rgba(201, 166, 233, .25), transparent 60%),
        radial-gradient(60ch 40ch at 85% 100%, rgba(217, 86, 120, .25), transparent 60%);
    z-index: -1;
}

.fdh-cta h2 {
    color: #fff;
}

.fdh-cta p {
    color: rgba(250, 247, 242, .82);
    max-width: 620px;
    margin-inline: auto;
}

/* ---------- Barra sticky ---------- */
.fdh-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: rgba(20, 23, 25, .96);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: .7rem 1rem;
    transform: translateY(110%);
    transition: transform .35s cubic-bezier(.3, .8, .4, 1);
    border-top: 1px solid rgba(255, 255, 255, .13);
}

.fdh-sticky.visible {
    transform: none;
}

.fdh-sticky__inner {
    max-width: var(--fdh-ancho);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: var(--fdh-s3);
    justify-content: space-between;
}

.fdh-sticky__txt {
    font-size: .88rem;
    line-height: 1.3;
}

.fdh-sticky__txt b {
    color: var(--fdh-oro);
}

.fdh-sticky .fdh-btn {
    padding: .8em 1.6em;
    font-size: .92rem;
    flex: 0 0 auto;
}

/* ---------- Migas ---------- */
.fdh-migas {
    font-size: .8rem;
    color: var(--fdh-tinta-50);
    padding: var(--fdh-s3) var(--fdh-s3) 0;
    max-width: var(--fdh-ancho);
    margin-inline: auto;
}

.fdh-migas ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding: 0;
    margin: 0;
}

.fdh-migas li {
    margin: 0;
    display: flex;
    gap: .45rem;
    align-items: center;
}

.fdh-migas li+li::before {
    content: '›';
    color: var(--fdh-tinta-50);
}

.fdh-migas a {
    color: var(--fdh-tinta-50);
}

.fdh-migas a:hover {
    color: var(--fdh-rosa);
}

/* ---------- Animaciones al hacer scroll ---------- */
.fdh-rev {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.22, .8, .3, 1), transform .7s cubic-bezier(.22, .8, .3, 1);
    will-change: opacity, transform;
}

.fdh-rev.visible {
    opacity: 1;
    transform: none;
}

.fdh-rev--d1 {
    transition-delay: .08s;
}

.fdh-rev--d2 {
    transition-delay: .16s;
}

.fdh-rev--d3 {
    transition-delay: .24s;
}

.fdh-rev--d4 {
    transition-delay: .32s;
}

@media (prefers-reduced-motion: reduce) {

    .fdh-rev,
    .fdh-rev.visible {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .fdh-marquee__pista,
    .fdh-btn--pulso {
        animation: none;
    }

    .fdh * {
        scroll-behavior: auto !important;
    }
}

/* ---------- Popup ---------- */
.fdh-popup-fondo {
    position: fixed;
    inset: 0;
    background: rgba(20, 23, 25, .62);
    backdrop-filter: blur(4px);
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1.2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.fdh-popup-fondo.abierto {
    opacity: 1;
    pointer-events: auto;
}

.fdh-popup {
    background: var(--fdh-blanco);
    border-radius: var(--fdh-r-l);
    max-width: 470px;
    width: 100%;
    padding: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
    text-align: center;
    position: relative;
    box-shadow: var(--fdh-sombra-l);
    transform: translateY(18px) scale(.97);
    transition: transform .35s cubic-bezier(.3, .9, .4, 1);
    max-height: 92vh;
    overflow-y: auto;
}

.fdh-popup-fondo.abierto .fdh-popup {
    transform: none;
}

.fdh-popup__cerrar {
    position: absolute;
    top: .7rem;
    right: .9rem;
    background: none;
    border: 0;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--fdh-tinta-50);
    cursor: pointer;
    padding: .2rem .4rem;
}

.fdh-popup__cerrar:hover {
    color: var(--fdh-tinta);
}

.fdh-popup h3 {
    font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem);
    margin-bottom: .7rem;
}

.fdh-popup p {
    font-size: .96rem;
    color: var(--fdh-tinta-70);
}

.fdh-popup__reloj {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin: var(--fdh-s3) 0;
}

.fdh-popup__reloj div {
    background: var(--fdh-crema-2);
    border-radius: var(--fdh-r-s);
    padding: .6rem .75rem;
    min-width: 62px;
}

.fdh-popup__reloj b {
    display: block;
    font-family: var(--fdh-display);
    font-size: 1.4rem;
    line-height: 1;
}

.fdh-popup__reloj span {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--fdh-tinta-50);
}

/* Las cajas del reloj son crema, así que sobre fondo oscuro hay que forzar la
   cifra en tinta: si no, hereda el blanco del hero y desaparece. */
.fdh-hero .fdh-popup__reloj b,
.fdh-bg-tinta .fdh-popup__reloj b,
.fdh-cta .fdh-popup__reloj b {
    color: var(--fdh-tinta);
}

.fdh-hero .fdh-popup__reloj span,
.fdh-bg-tinta .fdh-popup__reloj span,
.fdh-cta .fdh-popup__reloj span {
    color: var(--fdh-tinta-50);
}

/* Dentro de la tarjeta de oferta el reloj va más compacto y centrado. */
.fdh-oferta-card .fdh-popup__reloj {
    margin: 0;
    gap: .4rem;
}

.fdh-oferta-card .fdh-popup__reloj div {
    min-width: 0;
    flex: 1 1 0;
    padding: .5rem .35rem;
    background: var(--fdh-crema-2);
}

.fdh-oferta-card .fdh-popup__reloj b {
    color: var(--fdh-tinta);
    font-size: 1.25rem;
}

.fdh-oferta-card__caduca {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--fdh-rosa-osc) !important;
    text-align: center;
    margin: 0;
}

.fdh-popup__mini {
    font-size: .76rem;
    color: var(--fdh-tinta-50);
    margin: var(--fdh-s2) 0 0;
}

.fdh-form {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-top: var(--fdh-s2);
}

.fdh-form input[type="email"],
.fdh-form input[type="text"] {
    width: 100%;
    padding: .95em 1.15em;
    border: 1px solid var(--fdh-linea);
    border-radius: 999px;
    font-family: var(--fdh-texto);
    font-size: .95rem;
    background: var(--fdh-crema);
}

.fdh-form input:focus {
    outline: 2px solid var(--fdh-rosa);
    outline-offset: 1px;
    background: #fff;
}

.fdh-form label {
    font-size: .76rem;
    color: var(--fdh-tinta-50);
    display: flex;
    gap: .5em;
    align-items: flex-start;
    text-align: left;
    line-height: 1.4;
}

.fdh-form__ok {
    color: var(--fdh-verde);
    font-weight: 600;
    font-size: .95rem;
}

.fdh-form__error {
    color: var(--fdh-rosa-osc);
    font-weight: 500;
    font-size: .85rem;
}

/* ---------- Foco accesible ---------- */
.fdh a:focus-visible,
.fdh button:focus-visible,
.fdh summary:focus-visible {
    outline: 3px solid var(--fdh-azul);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {

    .fdh-hero__grid,
    .fdh-split {
        grid-template-columns: 1fr;
    }

    .fdh-hero__media {
        aspect-ratio: 16 / 11;
        max-width: 520px;
        margin-inline: auto;
    }

    .fdh-split--invertido>*:first-child {
        order: 0;
    }

    .fdh-hero {
        text-align: center;
    }

    .fdh-hero .fdh-btn-grupo,
    .fdh-hero .fdh-hero__precio {
        justify-content: center;
    }

    .fdh-hero .fdh-checks {
        display: inline-grid;
        text-align: left;
    }
}

@media (max-width: 680px) {
    .fdh-seccion {
        padding-inline: 1.1rem;
    }

    .fdh-card,
    .fdh-precio {
        padding: var(--fdh-s3);
    }

    .fdh-cita {
        padding: var(--fdh-s3);
    }

    .fdh-btn {
        width: 100%;
    }

    .fdh-btn-grupo {
        flex-direction: column;
        align-items: stretch;
    }

    .fdh-sticky .fdh-btn {
        width: auto;
    }

    .fdh-sticky__inner {
        gap: .8rem;
    }

    .fdh-sticky__txt {
        font-size: .78rem;
    }

    .fdh-carrusel__pista>* {
        flex-basis: 84%;
    }

    .fdh-acc__cab {
        padding: 1rem;
        font-size: .95rem;
        gap: .7rem;
    }

    .fdh-acc__meta {
        display: none;
    }

    .fdh-garantia {
        flex-direction: column;
        gap: var(--fdh-s2);
    }
}