/* =====================================================================
   manahmana — style.css
   Base del sistema de diseño. Tokens extraídos de Figma (ver DESIGN.md).
   Sin frameworks: CSS nativo, mantenible a mano.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Tokens (:root)  — paleta, tipografía, espaciado, radios
   --------------------------------------------------------------------- */
:root {
    /* Color — núcleo */
    --color-ink:    #000000;
    --color-bg:     #ffffff;
    --color-accent: #a0e727;
    --color-line:   #d9d9d9;
    --color-deep:   #416870;

    /* Color — neutros */
    --color-gray-100: #efefef;
    --color-gray-150: #e9e9e9;
    --color-gray-200: #e7e7e7;
    --color-gray-250: #e6e6e6;
    --color-gray-300: #cdcccc;
    --color-panel:    #f5f7f8;

    /* Color — acentos translúcidos / overlays */
    --color-lavender:  #c4b5f0;  /* botones secundarios */
    --accent-lavender: rgba(196, 181, 240, 0.20);
    --accent-mist:     rgba(189, 202, 207, 0.15); /* velo del hero */
    --accent-green:    rgba(0, 197, 131, 0.20);
    --color-coral:     #fc6f5e;
    --overlay-10:      rgba(0, 0, 0, 0.10);
    --overlay-15:      rgba(0, 0, 0, 0.15);

    /* Texto sobre fondos */
    --on-deep: #ffffff;

    /* Tipografía */
    --font-base:   'Inter', system-ui, -apple-system, sans-serif;
    --font-accent: 'Nunito', system-ui, sans-serif;

    /* Escala tipográfica (fluida: min, preferido, max) */
    --fs-display: clamp(3rem, 8vw, 8.75rem);     /* 140px */
    --fs-h1:      clamp(2.25rem, 5vw, 3.625rem); /* 58px  */
    --fs-h2:      clamp(2rem, 4vw, 3.125rem);    /* 50px  */
    --fs-h3:      clamp(1.5rem, 2.6vw, 2.375rem);/* 38px  */
    --fs-h4:      clamp(1.375rem, 2vw, 1.875rem);/* 30px  */
    --fs-lead:    clamp(1.25rem, 1.6vw, 1.5625rem);/* 25px */
    --fs-body-l:  1.25rem;    /* 20px */
    --fs-body:    1.0625rem;  /* 17px (cuerpo del diseño) */
    --fs-body-s:  1rem;       /* 16px */
    --fs-caption: 0.875rem;   /* 14px */

    /* Pesos */
    --fw-thin: 100;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 900;

    /* Line-heights */
    --lh-tight: 1.21;  /* dominante en titulares Inter */
    --lh-body:  1.6;   /* párrafos */

    /* Espaciado (escala derivada del diseño) */
    --space-xs:  1rem;     /* 16px */
    --space-sm:  1.5rem;   /* 24px (dominante) */
    --space-md:  2rem;     /* 32px */
    --space-lg:  2.5rem;   /* 40px */
    --space-xl:  3.75rem;  /* 60px */
    --space-2xl: 4.75rem;  /* 76px */
    --space-3xl: 7.5rem;   /* 120px */

    /* Radios */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 24px;
    --radius-pill: 50px;

    /* Layout */
    --container: 1360px;
    --gutter: 1.5rem;

    /* Transiciones */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --t-fast: 0.2s;
    --t-med:  0.35s;
}

/* ---------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--color-ink);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, picture, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

a { color: inherit; text-decoration: none; }

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

ul, ol { list-style: none; padding: 0; }

address { font-style: normal; }

:focus-visible {
    outline: 2px solid var(--color-deep);
    outline-offset: 3px;
}

/* ---------------------------------------------------------------------
   Tipografía
   --------------------------------------------------------------------- */
h1, h2, h3, h4 {
    font-weight: var(--fw-light);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }

p { max-width: 60ch; }

.eyebrow {
    font-family: var(--font-accent);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   Layout — contenedor 1360 y secciones
   --------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--space-3xl); }

.full-bleed { width: 100%; }

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: 1;
    transition: transform var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}

/* CTAs sólidos con barrido de color (izq→der) + flecha → al hover.
   El fondo es un degradado de doble ancho que desliza vía background-position;
   queda recortado al pill por el border-radius (sin overflow). */
.btn--primary,
.btn--accent,
.btn--lavender,
.btn--white,
.btn--green,
.btn--coral {
    --btn-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
    gap: 0;
    /* Color base sólido + bloque de barrido que crece en anchura (0→100%) desde
       la izquierda. En reposo el barrido mide 0 → sin franja/sliver en el borde. */
    background-color: var(--btn-fill);
    background-image: linear-gradient(var(--btn-sweep), var(--btn-sweep));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    transition: background-size 0.45s var(--ease),
                color 0.3s var(--ease),
                transform var(--t-fast) var(--ease);
}
.btn--primary:hover,
.btn--accent:hover,
.btn--lavender:hover,
.btn--white:hover,
.btn--green:hover,
.btn--coral:hover {
    background-size: 100% 100%;            /* el color entra desde la izquierda */
    transform: translateY(-2px);
}

/* Flecha que aparece al hover (máscara SVG; hereda el color del texto) */
.btn--primary::after,
.btn--accent::after,
.btn--lavender::after,
.btn--white::after,
.btn--green::after,
.btn--coral::after {
    content: "";
    width: 0;
    height: 0.85em;
    background-color: currentColor;
    -webkit-mask: var(--btn-arrow) no-repeat center / contain;
    mask: var(--btn-arrow) no-repeat center / contain;
    opacity: 0;
    transform: translateX(-6px);
    transition: width 0.3s var(--ease), margin 0.3s var(--ease),
                opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn--primary:hover::after,
.btn--accent:hover::after,
.btn--lavender:hover::after,
.btn--white:hover::after,
.btn--green:hover::after,
.btn--coral:hover::after {
    width: 0.85em;
    margin-left: 0.5em;
    opacity: 1;
    transform: translateX(0);
}

.btn--primary  { --btn-fill: var(--color-deep);     --btn-sweep: #355760;          color: var(--on-deep); }
.btn--accent   { --btn-fill: var(--color-accent);   --btn-sweep: #84c81a;          color: var(--color-ink); }
.btn--lavender { --btn-fill: var(--color-lavender); --btn-sweep: #b3a1ea;          color: var(--color-ink); }
.btn--white    { --btn-fill: #ffffff;               --btn-sweep: var(--color-deep); color: var(--color-deep); }
.btn--white:hover { color: #fff; }
.btn--green    { --btn-fill: #00C583;               --btn-sweep: #00a06a;          color: #fff; }
.btn--coral    { --btn-fill: #fc6f5e;               --btn-sweep: #e85546;          color: #fff; }

.btn--ghost {
    border: 1px solid var(--color-ink);
    border-radius: var(--radius-pill);
}
.btn--ghost:hover { background: var(--color-ink); color: var(--color-bg); }

/* Enlace con flecha (link de texto premium) */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-weight: var(--fw-semibold);
}
.link-arrow::after {
    content: "→";
    transition: transform var(--t-fast) var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   Topbar (franja superior deep teal)
   --------------------------------------------------------------------- */
.topbar {
    background: var(--color-deep);
    color: var(--on-deep);
    font-size: var(--fs-caption);
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 51px;
    gap: var(--space-sm);
}
.topbar__contact,
.topbar__aside { display: flex; align-items: center; gap: var(--space-sm); }
.topbar a { opacity: 0.9; transition: opacity var(--t-fast) var(--ease); }
.topbar a:hover { opacity: 1; }

/* Selector de idioma */
.lang-switch { display: inline-flex; align-items: center; gap: 0.5em; }
.lang-switch__sep { opacity: 0.4; }
.lang-switch__link { opacity: 0.7; }
.lang-switch__link.is-active { opacity: 1; font-weight: var(--fw-bold); }

/* ---------------------------------------------------------------------
   Header / navegación principal
   --------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-med) var(--ease),
                box-shadow var(--t-med) var(--ease);
}
.site-header.is-scrolled {
    border-color: var(--color-line);
    box-shadow: 0 4px 24px var(--overlay-10);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 88px;
    gap: var(--space-md);
}
.site-header__logo { display: inline-flex; align-items: center; }
.site-header__logo-img { height: 40px; width: auto; }
/* Fallback a texto si el PNG del logo no existe todavía */
.site-header__logo-text { display: none; font-weight: var(--fw-bold); font-size: 1.375rem; letter-spacing: -0.02em; }
.site-header__logo.is-text .site-header__logo-text { display: inline; }

.site-nav__list { display: flex; align-items: center; gap: var(--space-lg); }
.site-nav__item { position: relative; }
.site-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--fs-body);
    padding-block: 0.25rem;
}
.site-nav__link > .chevron { transition: transform var(--t-fast) var(--ease); }
.site-nav__link::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-fast) var(--ease);
}
.site-nav__link:hover::after,
.site-nav__link.is-active::after { transform: scaleX(1); }

/* Dropdowns (submenús) */
.submenu {
    position: absolute;
    top: 100%; left: 0;
    min-width: 220px;
    padding: 0.5rem;
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px var(--overlay-10);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease),
                visibility var(--t-fast);
    z-index: 50;
}
.site-nav__item.has-submenu:hover .submenu,
.site-nav__item.has-submenu:focus-within .submenu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.site-nav__item.has-submenu:hover .chevron { transform: rotate(180deg); }
.submenu__link {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-body-s);
    transition: background-color var(--t-fast) var(--ease);
}
.submenu__link:hover { background: var(--color-panel); }

/* Botón hamburguesa (oculto en escritorio) */
.site-header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
}
.site-header__burger span {
    display: block;
    width: 24px; height: 2px;
    background: var(--color-ink);
    transition: transform var(--t-fast) var(--ease),
                opacity var(--t-fast) var(--ease);
}

/* ---------------------------------------------------------------------
   Hero (home) — dos columnas: texto + imagen. Velo sutil de fondo.
   --------------------------------------------------------------------- */
.hero {
    position: relative;
    background: var(--accent-mist); /* velo BDCACF @15% */
}
.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2xl);
    padding-block: var(--space-2xl);
    min-height: min(80vh, 720px);
}
.hero__content { max-width: 36rem; }
.hero__title {
    font-size: var(--fs-h1);
    font-weight: var(--fw-light);
    line-height: 1.18;
    margin-bottom: var(--space-lg);
}
/* Resaltado lima de subcadena del título: el lima se "pinta" de izq→der,
   como un subrayado/marcador animado, una vez al cargar. */
.hero__title .hl {
    color: var(--color-ink);
    /* Base verde oscuro de marca (sustituye el amarillo por defecto de <mark>):
       es lo que asoma mientras el lima aún no ha barrido del todo. */
    background-color: var(--color-deep);
    background-image: linear-gradient(var(--color-accent), var(--color-accent));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    padding: 0 0.12em;
    border-radius: 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    animation: hl-sweep 0.7s var(--ease) 0.45s forwards;
}
@keyframes hl-sweep {
    to { background-size: 100% 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .hero__title .hl { animation: none; background-size: 100% 100%; }
}
.hero__lead {
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    margin-bottom: var(--space-sm);
}
.hero__text {
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    color: var(--color-ink);
    margin-bottom: var(--space-sm);
}
.hero__highlight {
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-lg);
}
/* Eyebrow encima del título (p. ej. "SOBRE MANAHMANA"): mayúsculas, peso fuerte. */
.hero__eyebrow {
    display: block;
    font-size: var(--fs-body);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink);
    margin-bottom: var(--space-sm);
}
/* Hero centrado solo texto (Valores, Metodología): fondo blanco, contenido centrado. */
.hero--centered { background: var(--color-bg); }
.hero--centered .hero__content--center {
    max-width: 62rem;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: var(--space-2xl);
}
.hero--centered .hero__title { margin-bottom: var(--space-lg); }
.hero--centered .hero__text { max-width: 56rem; margin-bottom: 0; }
.hero--centered .hero__text strong { font-weight: var(--fw-bold); }
/* Si hay botón tras el texto, deja aire (Valores). */
.hero--centered .hero__text + .btn { margin-top: var(--space-xl); }
.hero__media {
    position: relative;
    aspect-ratio: 770 / 663; /* ratio real de hero_home.webp (sin recorte) */
}
/* El WebP ya trae su forma con esquinas transparentes: sin fondo ni radius. */
.hero__media-img {
    width: 100%; height: 100%;
    object-fit: contain;
}
/* Fondo gris solo si la imagen falla (fallback) */
.hero__media.is-empty {
    background: var(--color-gray-200);
    border-radius: var(--radius-md);
}
/* Indicador de scroll: cuadro blanco + flecha ↓ verde, en la muesca abajo-derecha */
.hero__scroll {
    position: absolute;
    right: 0; bottom: 0;
    display: grid; place-items: center;
    width: 74px; height: 74px;
    background: var(--color-bg);
    border: 1.5px solid var(--color-accent);
    border-radius: var(--radius-md);
    color: var(--color-accent);
    transition: transform var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}
.hero__scroll:hover {
    transform: translateY(4px);
    background: var(--color-accent);
    color: var(--color-ink);
}

/* Hero de páginas de servicio (Cultura / Estrategia / Equipos): bloque de
   preguntas sobre el párrafo, e imagen con ratio propio (770x588). */
.hero__questions {
    margin-bottom: var(--space-md);
}
.hero__questions p {
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    line-height: 1.55;
    color: var(--color-ink);
}
.hero--servicios .hero__media { aspect-ratio: 770 / 588; }

/* ---------------------------------------------------------------------
   Section intro (centrada) — "Somos facilitadores"
   --------------------------------------------------------------------- */
.section-intro { text-align: center; }
/* "Somos facilitadores" + tarjeta "Metodología" forman un bloque:
   acercamos ambas reduciendo el hueco entre secciones a la mitad. */
.section-intro { padding-bottom: var(--space-xl); }
.section-intro + .section { padding-top: var(--space-xl); }
/* …y cuando el bloque siguiente son las tarjetas apiladas (.facil), su
   padding-block 3xl creaba un hueco enorme; lo acercamos al titular. */
.section-intro + .facil { padding-top: var(--space-sm); }
.section-intro__title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-md);
}
.section-intro__text {
    max-width: 56ch;
    margin-inline: auto;
    font-weight: var(--fw-light);
}


/* ---------------------------------------------------------------------
   Somos facilitadores — bloques apilados con scroll (sticky stacking).
   Cada card se queda fija (sticky) bajo el header; la siguiente sube y la
   tapa. En móvil el sticky se desactiva (apilado normal, ver responsive).
   --facil-top: altura aprox. del header pegado (ajustable).
   --------------------------------------------------------------------- */
.facil { padding-block: var(--space-3xl); }
.facil-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}
.facil-card {
    position: sticky;
    top: calc(var(--facil-top, 104px) + var(--i, 0) * 0.75rem);
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
    gap: clamp(2rem, 4vw, 4.5rem);
    min-height: min(64vh, 620px);
    padding: clamp(2rem, 4vw, 4rem);
    background: var(--color-bg);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 -10px 44px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}
.facil-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 34rem;
}
.facil-card__index {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: var(--fs-body);
    margin-bottom: clamp(2rem, 6vw, 5rem);
}
.facil-card__num   { font-weight: var(--fw-semibold); color: var(--color-ink); flex-shrink: 0; }
.facil-card__total { color: rgba(0, 0, 0, 0.32); flex-shrink: 0; white-space: nowrap; }
.facil-card__label { margin-left: 0.85rem; color: var(--color-ink); }
.facil-card__text {
    font-size: var(--fs-h3);
    font-weight: var(--fw-light);
    line-height: 1.25;
    color: var(--color-ink);
    margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.facil-card__cta { align-self: flex-start; }
.facil-card__media {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    min-height: 260px;
}
.facil-card__media img { width: 100%; height: 100%; object-fit: cover; }
.facil-card__media.is-empty {
    background: linear-gradient(135deg, var(--color-lavender), var(--color-accent));
}

/* ---------------------------------------------------------------------
   Servicios — intro centrada + 3 tarjetas
   --------------------------------------------------------------------- */
.servicios { background: var(--color-panel); }
.servicios__intro {
    text-align: center;
    max-width: 64ch;
    margin: 0 auto var(--space-2xl);
    font-weight: var(--fw-light);
}
.servicios__intro strong { font-weight: var(--fw-bold); }

.servicios__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.service-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    aspect-ratio: 459 / 566;
    box-shadow: 0 10px 30px var(--overlay-10);
    transition: transform var(--t-med) var(--ease),
                box-shadow var(--t-med) var(--ease);
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
}
.service-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}
.service-card__num {
    font-size: 2.5rem;        /* 40px */
    font-weight: var(--fw-light);
    line-height: 1;
}
.service-card__arrow {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    background: var(--color-accent);
    border-radius: 50%;
    color: var(--color-ink);
    transition: transform var(--t-fast) var(--ease);
}
.service-card:hover .service-card__arrow { transform: translateX(4px); }

.service-card__block {
    position: relative;
    margin-top: auto;
    aspect-ratio: 389 / 372;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.service-card__block--cultura    { background-image: url("../img/cultura.webp"); }
.service-card__block--estrategia { background-image: url("../img/estrategia.webp"); }
.service-card__block--equipos    { background-image: url("../img/equipos.webp"); }

.service-card__name {
    position: absolute;
    left: 0; right: 0;
    bottom: 21%;                 /* subido para que "liderazgo" no choque con la caja */
    padding-inline: var(--space-md);
    font-size: clamp(1.5rem, 2.4vw, 2.5rem); /* 40px máx */
    font-weight: var(--fw-light);
    line-height: 1.15;
    color: var(--color-ink);
}

/* ---------------------------------------------------------------------
   Testimonio — bloque lavanda (caso.webp) con cita
   --------------------------------------------------------------------- */
/* El webp se usa a su ratio natural (sin distorsión) y TODO el contenido
   escala en proporción con el bloque (unidades cqw). Así la composición es
   idéntica a cualquier ancho y el pie nunca cae sobre las muescas.
   Por debajo de 1024px → fallback a lavanda sólido (ver responsive.css). */
.testimonio__card {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 1445 / 627;          /* ratio real de caso.webp */
    background: url("../img/caso.webp") center / contain no-repeat;
}
.testimonio__inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 11.5cqw 11cqw 13cqw;      /* top deja sitio al círculo del webp */
}
/* El círculo lima ya viene horneado en caso.webp; aquí solo superponemos las
   comillas centradas sobre él (posición en % → escala con el webp). */
.testimonio__quote {
    position: absolute;
    left: 14%;
    top: 15.2%;
    transform: translate(-50%, -50%);
    width: 2.4cqw;
    z-index: 1;
}
.testimonio__quote img { width: 100%; height: auto; display: block; }
.testimonio__text {
    font-size: 2.05cqw;                /* ≈30px a ancho de diseño */
    font-weight: var(--fw-light);
    line-height: 1.34;
    color: var(--color-ink);
    margin: 0 0 max(35px, 2.4cqw);     /* separación mínima cita↔autor (igual que valores) */
}
.testimonio__foot {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2cqw;
}
.testimonio__author { display: flex; flex-direction: column; gap: 0.3cqw; }
.testimonio__name {
    font-weight: var(--fw-bold);
    color: var(--color-deep);
    font-size: 1.45cqw;
}
.testimonio__role {
    color: rgba(0, 0, 0, 0.45);
    font-size: 1.25cqw;
}
.testimonio__cta { flex-shrink: 0; }
/* Variante "panel" (Valores, Metodología): cargo en 2ª línea en blanco sobre la
   lavanda + separación mínima de 35px entre cita y autor. */
.testimonio--panel .testimonio__role { color: #fff; }
.testimonio--panel .testimonio__text { margin-bottom: max(35px, 2.4cqw); }
/* Metodología: la sección del testimonio va sobre gris claro (#f5f7f8). */
.testimonio--gray { background: var(--color-panel); }
/* La cita de Mikel es larga y no cabe en el ratio fijo del webp a tamaño legible,
   así que esta tarjeta usa un panel lavanda SÓLIDO que crece con el contenido
   (sin container-query), manteniendo el botón a la derecha. */
.testimonio--gray .testimonio__card {
    position: static;
    container-type: normal;
    aspect-ratio: auto;
    background: var(--color-lavender);
    border-radius: var(--radius-lg);
}
.testimonio--gray .testimonio__inner { position: static; inset: auto; padding: clamp(2.5rem, 4vw, 4rem); }
.testimonio--gray .testimonio__quote {
    position: static; transform: none;
    display: grid; place-items: center;
    width: 64px; height: 64px;
    background: var(--color-accent); border-radius: 50%;
    margin-bottom: var(--space-lg);
}
.testimonio--gray .testimonio__quote img { width: 28px; height: auto; }
.testimonio--gray .testimonio__text { font-size: clamp(1.25rem, 1.9vw, 1.875rem); line-height: 1.4; margin-bottom: var(--space-lg); }
.testimonio--gray .testimonio__foot { margin-top: 0; gap: var(--space-lg); align-items: flex-end; }
.testimonio--gray .testimonio__name { font-size: 1.25rem; }
.testimonio--gray .testimonio__role { font-size: var(--fs-body); }

/* ---------------------------------------------------------------------
   ¿Conoces Manahbox? — foto de producto a fondo completo + tarjeta teal
   --------------------------------------------------------------------- */
.manahbox {
    background: url("../img/manahbox.webp") center / cover no-repeat fixed; /* parallax */
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.manahbox__inner {
    display: flex;
    justify-content: center;   /* tarjeta centrada (≈51% en Figma) */
}
.manahbox__card {
    width: 100%;
    max-width: 460px;
    background: var(--color-deep);
    color: #fff;
    border-radius: 20px;
    padding: clamp(3rem, 5vw, 4.5rem) clamp(1.75rem, 3vw, 3rem);
    text-align: center;
}
.manahbox__title {
    font-size: clamp(2rem, 3.1vw, 2.8125rem);  /* ≈45px diseño */
    font-weight: var(--fw-light);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}
.manahbox__title strong {
    display: block;            /* "Manahbox?" en su propia línea */
    font-weight: var(--fw-bold);
}
.manahbox__text {
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    line-height: 1.5;
    margin-bottom: 1.75rem;
}
.manahbox__cta { font-size: var(--fs-body); }

/* ---------------------------------------------------------------------
   CTA Diagnóstico — banner lima (webp) sobre fondo teal
   --------------------------------------------------------------------- */
.cta-diag {
    background: var(--color-deep);
    padding-block: var(--space-3xl);
}
/* Mismo enfoque que el testimonio: webp a ratio natural + contenido escalado
   en proporción (cqw) para que SIEMPRE entre dentro del verde. Por debajo de
   768px → recuadro lima sólido (ver responsive.css). */
.cta-diag__banner {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 1434 / 464;            /* ratio real de diagnostico.webp */
    background: url("../img/diagnostico.webp") center / contain no-repeat;
}
.cta-diag__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5cqw 6cqw;
}
.cta-diag__title {
    font-size: 3.5cqw;                   /* ≈50px a ancho de diseño */
    font-weight: var(--fw-regular);
    color: var(--color-ink);
    margin-bottom: 2cqw;
}
.cta-diag__title strong { font-weight: var(--fw-bold); }
.cta-diag__text {
    font-size: 2.1cqw;                   /* ≈30px a ancho de diseño */
    font-weight: var(--fw-light);
    color: var(--color-ink);
    max-width: 62cqw;                    /* corta tras "claro" como Figma */
    margin: 0 auto 4cqw;
}
.cta-diag__cta {
    font-size: 1.2cqw;
    padding: 1.1cqw 2.6cqw;
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer {
    background: var(--color-deep);
    color: #fff;
    padding-block: var(--space-2xl);
}

/* Zona superior: marca · Servicios · Manahmana · CTAs */
.site-footer__top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr auto;
    gap: var(--space-xl);
    align-items: start;
}

/* Columna de marca */
.site-footer__logo { display: inline-block; margin-bottom: var(--space-md); }
.site-footer__logo img { width: 200px; height: auto; display: block; }
.site-footer__logo.is-text { font-size: 1.5rem; font-weight: var(--fw-bold); color: var(--color-accent); }
.site-footer__address {
    font-style: normal;
    line-height: 1.6;
    max-width: 30ch;
    margin-bottom: var(--space-md);
}
.site-footer__phone { display: block; margin-bottom: 0.4rem; }
.site-footer__email { display: block; font-weight: var(--fw-bold); }
.site-footer__phone:hover,
.site-footer__email:hover { color: var(--color-accent); }

/* Columnas de enlaces */
.site-footer__heading {
    font-size: 1.125rem;
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-md);
}
.site-footer__col ul { display: flex; flex-direction: column; gap: var(--space-sm); }
.site-footer__col a:hover { color: var(--color-accent); }

/* Botones apilados */
.site-footer__ctas {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: stretch;
}
.site-footer__ctas .btn {
    justify-content: center;
    padding: 1rem 2.25rem;          /* más grandes que el resto, como Figma */
    font-size: 1.0625rem;
}
/* Botón relleno lima del footer: texto teal (no negro) */
.site-footer__ctas .btn--accent { color: var(--color-deep); }

/* Botón ghost lima (borde lima + texto blanco, fondo transparente) */
.btn--ghost-lime {
    border: 2px solid var(--color-accent);
    color: #fff;
    background: transparent;
}
.btn--ghost-lime:hover {
    transform: translateY(-2px);
    background: var(--color-accent);
    color: var(--color-deep);
}

/* Fila inferior: legales · redes · copyright */
.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-md);
    margin-top: var(--space-2xl);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: var(--fs-body-s);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.site-footer__legal a:hover { color: var(--color-accent); }
/* Redes a la derecha, junto al copyright (margin-left:auto empuja redes+copy) */
.site-footer__social { display: flex; gap: var(--space-sm); margin-left: auto; }
.site-footer__social a {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #fff;
    transition: color var(--t-fast) var(--ease);
}
.site-footer__social a:hover { color: var(--color-accent); }
.site-footer__copy { opacity: 0.8; }

/* Accesibilidad: saltar al contenido */
.skip-link {
    position: absolute;
    left: -9999px;
}
.skip-link:focus {
    left: var(--gutter);
    top: var(--gutter);
    z-index: 200;
    background: var(--color-ink);
    color: var(--color-bg);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------
   Animaciones de revelado al hacer scroll
   Solo activas cuando <html> tiene .js-anim (escritorio, sin reduce-motion;
   ver script inline en header.php + IntersectionObserver en script.js).
   En móvil/reduce-motion la clase no se añade → contenido siempre visible.
   --------------------------------------------------------------------- */
.js-anim .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    will-change: opacity, transform;
}
.js-anim .reveal--left  { transform: translateX(-32px); }
.js-anim .reveal--right { transform: translateX(32px); }
.js-anim .reveal--scale { transform: scale(0.94); }

.js-anim .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Escalonado (stagger) para grupos de tarjetas */
.js-anim .reveal[data-delay="1"] { transition-delay: 0.10s; }
.js-anim .reveal[data-delay="2"] { transition-delay: 0.20s; }
.js-anim .reveal[data-delay="3"] { transition-delay: 0.30s; }
.js-anim .reveal[data-delay="4"] { transition-delay: 0.40s; }

/* =====================================================================
   PÁGINAS INTERNAS — ESTILOS ADICIONALES
   ===================================================================== */

/* ---------------------------------------------------------------------
   Shared sections and helpers
   --------------------------------------------------------------------- */
.section--light { background-color: var(--color-gray-100); }
.section__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--color-ink); margin-bottom: var(--space-xs); }
.section__lead { font-size: var(--fs-body-l); font-weight: var(--fw-light); line-height: var(--lh-body); color: var(--color-ink); opacity: 0.85; margin-bottom: var(--space-md); }
.text-center { text-align: center; }
.btn-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-deep); font-weight: var(--fw-semibold); font-family: var(--font-accent); transition: color var(--t-fast) var(--ease); }
.btn-link:hover { color: var(--color-accent); }
.text-accent-lime { color: var(--color-deep); font-family: var(--font-accent); font-weight: var(--fw-bold); margin-top: var(--space-xs); }

/* ---------------------------------------------------------------------
   Servicios
   --------------------------------------------------------------------- */
/* Parallax: banner de imagen full-bleed (entre hero y "Qué hacemos") */
.servicios-parallax {
    height: clamp(280px, 36vw, 460px);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
/* Placeholder de marca cuando aún no hay imagen (mantiene la altura para que no
   haya saltos al sustituirla). Degradado suave teal → lavanda → lima. */
.servicios-parallax--placeholder {
    background-color: var(--color-gray-200);
    background-image: linear-gradient(120deg,
        rgba(65, 104, 112, 0.14) 0%,
        rgba(196, 181, 240, 0.14) 50%,
        rgba(160, 231, 39, 0.16) 100%);
    background-attachment: scroll;
}

/* Qué hacemos — 2 columnas: título bold (izq) + texto/botón (der) */
/* Acercar las tarjetas a "Qué hacemos" (menos aire entre ambas secciones) */
.que-hacemos { padding-bottom: var(--space-lg); }
.scasos-sec  { padding-top: var(--space-lg); padding-bottom: var(--space-xl); }
.que-hacemos__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.4fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}
.que-hacemos__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1.1; width: min-content; }
.que-hacemos__text { font-size: 30px; font-weight: var(--fw-light); line-height: 45px; color: var(--color-ink); }
.que-hacemos__cta { margin-top: var(--space-xl); }

/* Casos "Si… / entonces…" — tarjetas lavanda (3 + 2) */
/* gap: fila (vertical, la mitad) / columna (horizontal) */
.scasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2.5rem) clamp(2rem, 5vw, 5rem); }
.scaso {
    min-height: 280px;
    padding: clamp(1.75rem, 2.4vw, 2.5rem);
    background: rgba(196, 181, 240, 0.30); /* #C4B5F0 @30% */
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
}
.scaso__cond {
    font-size: 35px;
    font-weight: var(--fw-light);
    line-height: 1.15;
    color: var(--color-ink);
    margin-bottom: var(--space-md);
}
.scaso__ans {
    font-size: var(--fs-body-s);
    font-weight: var(--fw-light);
    line-height: 1.5;
    color: var(--color-ink);
    opacity: 0.85;
    max-width: 18rem;
}
/* Casos de éxito — slider sobre la forma teal con muesca (recuadro.webp).
   Contenido en cqw para escalar con el ancho de la tarjeta sin desbordar la
   forma; por debajo de 860px cae a un panel teal sólido (ver responsive). */
.casos-exito { padding-block: var(--space-xl) var(--space-3xl); }
/* La forma teal con muesca es ESTÁTICA (.ce-stage); los slides se apilan en la
   misma celda de grid y solo cambia su opacidad → al pasar de caso solo se
   funde el texto/botón, la forma no se mueve. El grid-stack además fija la
   altura a la del slide más alto (sin saltos). */
.ce-stage {
    display: grid;
    aspect-ratio: 1416 / 565;
    background: url("../img/servicios/recuadro.webp") no-repeat center / 100% 100%;
    container-type: inline-size;
    color: #fff;
}
.ce-slide {
    grid-area: 1 / 1;
    position: relative;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}
.ce-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s var(--ease);
}
.ce-card__head {
    position: absolute;
    top: 13.5%;
    left: 5.9%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6cqw;
}
.ce-card__badge {
    background: var(--color-accent);
    color: var(--color-deep);
    font-weight: var(--fw-bold);
    font-size: 2.6cqw;
    line-height: 1;
    padding: 0.55cqw 0.9cqw;
    border-radius: var(--radius-sm);
}
.ce-card__kicker { font-size: 2.6cqw; font-weight: var(--fw-light); line-height: 1.1; }
.ce-card__text {
    position: absolute;
    top: 44%;
    left: 5.9%;
    right: 6%;
    font-size: 2cqw;
    font-weight: var(--fw-light);
    line-height: 1.45;
}
.ce-card__cta { position: absolute; left: 5.9%; bottom: 4%; }
.ce-dots { display: flex; justify-content: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.ce-dot {
    width: 14px; height: 14px; padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--color-deep);
    background: transparent;
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease);
}
.ce-dot.is-active { background: var(--color-deep); }

/* ---------------------------------------------------------------------
   Manahbox
   --------------------------------------------------------------------- */
/* Hero Manahbox (Figma): título bold 58, foto con su forma horneada (769x587),
   precio negro con "Precio:" en negrita, nota a 15px. */
.hero--manahbox .hero__title { font-family: var(--font-base); font-weight: var(--fw-bold); font-size: clamp(2.75rem, 6vw, 3.625rem); line-height: 1; }
.hero--manahbox .hero__media { aspect-ratio: 769 / 587; }
.manahbox-meta { display: flex; flex-direction: column; gap: 0.5rem; margin-block: var(--space-md); }
.manahbox-meta__price { font-size: 17px; font-weight: var(--fw-light); color: var(--color-ink); margin-bottom: var(--space-md); }
.manahbox-meta__price strong { font-weight: var(--fw-bold); }
.manahbox-meta__note { font-size: 15px; font-weight: var(--fw-light); color: var(--color-ink); opacity: 0.85; margin-top: -7px; }
/* ¿Qué es Manahbox? — fondo blanco, 3 tarjetas mint con muesca inf-der (sin flecha) */
.mb-quees { background: var(--color-bg); }
.mb-quees__title { font-size: clamp(2rem, 4vw, 3.125rem); font-weight: var(--fw-bold); color: var(--color-ink); margin-bottom: var(--space-md); }
.mb-quees__intro { font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight: var(--fw-light); line-height: 1.4; color: var(--color-ink); max-width: 60ch; margin-bottom: var(--space-2xl); }
.mb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); align-items: stretch; }
.mb-card {
    --notch-w: 24%; --notch-h: 18%;
    background: rgba(204, 243, 230, 0.4); /* #ccf3e6 @ 40% (Figma) */
    min-height: clamp(300px, 26vw, 394px);
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    display: flex; flex-direction: column;
    clip-path: polygon(
        0 0, 100% 0,
        100% calc(100% - var(--notch-h)),
        calc(100% - var(--notch-w)) calc(100% - var(--notch-h)),
        calc(100% - var(--notch-w)) 100%,
        0 100%
    );
}
.mb-card__text { font-size: clamp(1.5rem, 2.6vw, 2.5rem); font-weight: var(--fw-light); line-height: 1.15; color: var(--color-ink); }
.mb-card__sub { font-size: 17px; font-weight: var(--fw-light); line-height: 1.4; color: var(--color-ink); margin-top: var(--space-md); }
/* ¿Cómo funcionan las cartas? — 2 col (texto + foto), ejemplo, y 3 pasos con flecha lima */
.mb-funciona__top { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-2xl); align-items: start; }
.mb-funciona__title { font-size: clamp(2rem, 4vw, 3.125rem); font-weight: var(--fw-bold); color: var(--color-ink); margin-bottom: var(--space-lg); }
.mb-funciona__p { font-size: 17px; font-weight: var(--fw-light); line-height: 1.6; color: var(--color-ink); margin-bottom: var(--space-md); max-width: 48ch; }
.mb-funciona__media img { width: 100%; height: auto; object-fit: contain; }
.mb-funciona__ejemplo { font-size: clamp(1.5rem, 2.6vw, 2.5rem); font-weight: var(--fw-light); line-height: 1.2; color: var(--color-ink); margin: var(--space-xl) 0 0; max-width: 28ch; }
.mb-funciona__subtitulo { font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight: var(--fw-bold); color: var(--color-ink); margin-top: var(--space-xl); margin-bottom: var(--space-lg); }
.mb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.mb-step__head { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
.mb-step__icon { width: 62px; height: 62px; flex-shrink: 0; display: inline-flex; }
.mb-step__icon img { width: 100%; height: 100%; object-fit: contain; }
.mb-step__num { font-size: 30px; font-weight: var(--fw-bold); color: var(--color-ink); }
.mb-step__text { font-size: 17px; font-weight: var(--fw-light); line-height: 1.5; color: var(--color-ink); max-width: 32ch; }
.mb-step__line { display: block; }
.mb-step__line + .mb-step__line { margin-top: var(--space-md); }
.mb-step__text strong { font-weight: var(--fw-bold); }
/* Vídeo (placeholder gris con icono de play; pendiente del cliente) */
.mb-video { padding-top: 0; } /* la mitad de espacio encima (los pasos ya dejan su padding inferior) */
/* doble clase para ganar a `.video-card { margin: 0 }` (definida más abajo) */
.video-card.mb-video__card { max-width: 920px; margin-inline: auto; }
/* ¿Para qué sirve? — intro a la izquierda */
.mb-paraque { padding-top: calc(var(--space-3xl) * 0.34); } /* -33% del espacio superior total */
.mb-paraque__title { font-size: clamp(2rem, 4vw, 3.125rem); font-weight: var(--fw-bold); color: var(--color-ink); margin-bottom: var(--space-lg); }
.mb-paraque__text p { font-size: 17px; font-weight: var(--fw-light); line-height: 1.6; color: var(--color-ink); margin-bottom: var(--space-md); max-width: 70ch; }
.mb-paraque__text p:last-child { margin-bottom: 0; }
.mb-paraque__text strong { font-weight: var(--fw-bold); }
/* ¿Cuándo puedes usarla? — panel full-bleed #bdcacf@16%, tabs centradas, lista con flechas */
.tabs-section { background: rgba(189, 202, 207, 0.16); }
.tabs-container { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.tabs-nav { display: flex; justify-content: center; gap: clamp(2rem, 6vw, 7rem); border-bottom: 1px solid var(--color-gray-300); margin-bottom: var(--space-2xl); }
.tabs-btn { background: none; border: none; padding: 0 0 0.85rem; font-family: var(--font-accent); font-size: 20px; font-weight: var(--fw-bold); color: var(--color-deep); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color var(--t-fast) var(--ease); }
.tabs-btn:hover { color: var(--color-accent); }
.tabs-btn.is-active { border-bottom-color: var(--color-accent); color: var(--color-deep); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fadeIn var(--t-med) ease; }
.mb-tabs__title { font-size: clamp(2rem, 4vw, 3.125rem); font-weight: var(--fw-bold); color: var(--color-ink); margin-bottom: var(--space-sm); }
.mb-tabs__subtitle { font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight: var(--fw-light); color: var(--color-ink); margin-bottom: var(--space-lg); }
.mb-tabs__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-md); }
.mb-tabs__item { display: flex; align-items: center; gap: var(--space-sm); font-size: 17px; font-weight: var(--fw-light); line-height: 1.4; color: var(--color-ink); }
.mb-tabs__bullet { width: 28px; height: 28px; flex-shrink: 0; }
.mb-tabs__body { font-size: 17px; font-weight: var(--fw-light); line-height: 1.6; color: var(--color-ink); max-width: 70ch; }
/* Intro del tab (Por qué la hemos creado) */
.mb-tabs__intro p { font-size: 17px; font-weight: var(--fw-light); line-height: 1.6; color: var(--color-ink); max-width: 70ch; margin-bottom: var(--space-md); }
.mb-tabs__intro strong { font-weight: var(--fw-bold); }
/* Ítems con título + descripción (Para quién es) */
.mb-tabs__item--titled { align-items: flex-start; }
.mb-tabs__item--titled .mb-tabs__bullet { margin-top: 2px; }
.mb-tabs__item-body { display: flex; flex-direction: column; gap: 0.15rem; }
.mb-tabs__item-title { font-size: 17px; font-weight: var(--fw-bold); color: var(--color-ink); }
.mb-tabs__item-text { font-size: 17px; font-weight: var(--fw-light); color: var(--color-ink); }
/* Caja de cierre (mint, cita centrada) */
.mb-tabs__cierre { margin-top: var(--space-xl); padding: var(--space-md) var(--space-lg); background: rgba(204, 243, 230, 0.5); border-radius: var(--radius-md); font-size: 17px; font-style: italic; text-align: center; color: var(--color-deep); max-width: 70ch; }

/* ---------------------------------------------------------------------
   Conocimientos (Ezagutzak) — listado tipo blog (maqueta)
   --------------------------------------------------------------------- */
.conoc { padding-top: 0; } /* la mitad de espacio tras la intro (el hero ya deja su padding) */
.conoc-filtros { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem); border-bottom: 1px solid var(--color-gray-300); margin-bottom: var(--space-2xl); }
.conoc-filtro { font-family: var(--font-accent); font-size: 20px; font-weight: var(--fw-bold); color: var(--color-deep); padding-bottom: 0.85rem; margin-bottom: -1px; border-bottom: 3px solid transparent; transition: color var(--t-fast) var(--ease); }
.conoc-filtro:hover { color: var(--color-accent); }
.conoc-filtro.is-active { border-bottom-color: var(--color-accent); }
.conoc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl) var(--space-lg); }
.conoc-card { display: flex; flex-direction: column; }
.conoc-card[hidden] { display: none; } /* el display:flex anula el [hidden] nativo */
.conoc-empty { text-align: center; font-size: 17px; font-weight: var(--fw-light); color: var(--color-ink); opacity: 0.7; padding: var(--space-2xl) 0; }
.conoc-card__media { position: relative; overflow: hidden; display: block; aspect-ratio: 413 / 318; background: #d9d9d9; border-radius: 8px; margin-bottom: var(--space-md); transition: opacity var(--t-fast) var(--ease); }
.conoc-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.conoc-card__media:hover { opacity: 0.9; }
.conoc-card__date { font-size: var(--fs-caption); font-weight: var(--fw-light); color: var(--color-ink); opacity: 0.7; margin-bottom: 0.5rem; }
.conoc-card__title { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: var(--fw-bold); line-height: 1.2; color: var(--color-ink); margin-bottom: var(--space-sm); }
.conoc-card__title a { color: inherit; transition: color var(--t-fast) ease; }
.conoc-card__title a:hover { color: var(--color-deep); }
.conoc-card__excerpt { font-size: 17px; font-weight: var(--fw-light); line-height: 1.6; color: var(--color-ink); }

/* Ficha de artículo (Conocimientos — Figma "Ezagutzak - bat barrutik") */
.post__back { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: var(--space-lg); }
.post__title { font-size: clamp(2rem, 4.5vw, 3.625rem); font-weight: var(--fw-semibold); line-height: 1.12; color: var(--color-ink); margin-bottom: var(--space-md); }
.post__lead { font-size: clamp(1.25rem, 2vw, 1.5625rem); font-weight: var(--fw-light); line-height: 1.5; color: var(--color-ink); max-width: 70ch; margin-bottom: var(--space-lg); }
.post__date { display: block; font-size: 15px; font-weight: var(--fw-regular); color: var(--color-ink); opacity: 0.7; margin-bottom: var(--space-sm); }
.post__meta { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-xl); }
.post__avatar { width: clamp(88px, 10vw, 132px); aspect-ratio: 1; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--color-gray-200); }
.post__avatar img { width: 100%; height: 100%; object-fit: cover; }
.post__avatar.is-empty { background: var(--color-gray-200); }
.post__author { display: flex; flex-direction: column; gap: 0.2rem; line-height: 1.3; }
.post__author-name { font-size: 17px; font-weight: var(--fw-bold); color: var(--color-ink); }
.post__author-role { font-size: 17px; font-weight: var(--fw-light); color: var(--color-ink); }
.post__cover { position: relative; overflow: hidden; aspect-ratio: 1437 / 428; background: var(--color-gray-200); border-radius: 8px; margin-bottom: var(--space-xl); }
.post__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.post__body { max-width: none; } /* ancho completo (como la portada y el Figma) */
/* anula el límite global `p { max-width: 60ch }` para que el cuerpo ocupe todo el ancho */
.post__body p { max-width: none; font-size: 17px; font-weight: var(--fw-light); line-height: 1.75; color: var(--color-ink); margin-bottom: var(--space-md); }
.post__body strong { font-weight: var(--fw-bold); }
.post__body a { font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------------
   Páginas legales (aviso legal, privacidad, cookies)
   --------------------------------------------------------------------- */
.legal__inner { max-width: 820px; margin-inline: auto; }
.legal__title { font-size: clamp(2rem, 4vw, 3.125rem); font-weight: var(--fw-bold); color: var(--color-ink); margin-bottom: var(--space-lg); }
.legal__h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: var(--fw-semibold); color: var(--color-deep); margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.legal__p { font-size: 17px; font-weight: var(--fw-light); line-height: 1.7; color: var(--color-ink); margin-bottom: var(--space-md); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------
   Equipo (lan-taldea)
   --------------------------------------------------------------------- */
/* Rejilla de equipo (Figma "lan taldea"): foto con muesca inf-der + nombre teal,
   cargo y círculo lima con flecha. Sin tarjeta/borde. */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl) var(--space-lg); }
.team-card { display: flex; flex-direction: column; text-decoration: none; }
.team-card__media {
    /* La foto webp ya trae la forma (esquinas + muesca) horneada con transparencia:
       no añadimos clip-path ni fondo, se muestra tal cual. */
    aspect-ratio: 421 / 416;
    position: relative;
}
.team-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* El placeholder de iniciales (forma rectangular) solo si la foto falta/no carga.
   :has() lo oculta cuando hay <img>; si onerror la elimina, reaparece. */
.team-card__media:has(img) .team-card__placeholder { display: none; }
.team-card__placeholder { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-deep), #2a4146); color: #fff; font-family: var(--font-base); font-size: var(--fs-display-l); font-weight: var(--fw-thin); }
.team-card__info { padding-top: var(--space-md); display: flex; flex-direction: column; align-items: flex-start; }
.team-card__name { font-family: var(--font-accent); font-size: 30px; font-weight: 700; line-height: 1; margin-bottom: 0.5rem; color: var(--color-deep); }
.team-card__role { font-family: var(--font-accent); font-size: 17px; font-weight: 600; line-height: 1; color: var(--color-ink); margin-bottom: var(--space-sm); }
.team-card__link {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--color-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16' fill='none'%3E%3Cpath d='M2 2l6 6-6 6' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform var(--t-fast) var(--ease);
}
.team-card:hover .team-card__link { transform: translateX(3px); }
.section--statement { padding-top: var(--space-3xl); padding-bottom: calc(var(--space-3xl) + 7.5rem); overflow: hidden; }
.statement-box { max-width: 61.875rem; /* ~990px (Figma 963) */ margin: 0 auto; position: relative; }
/* Recuadro verde decorativo detrás del texto, asomando arriba-izq (Figma). */
.statement-box__shape {
    position: absolute;
    z-index: 0;
    width: 32%;          /* 309/963 */
    height: auto;
    left: -15%;          /* (213-359)/963 */
    top: -3.75rem;       /* ~ -68px sobre el texto */
    pointer-events: none;
    user-select: none;
}
.statement-box__text { position: relative; z-index: 1; font-size: 30px; font-weight: var(--fw-light); line-height: 1.5; color: var(--color-ink); }
.statement-box__text strong { font-weight: var(--fw-bold); }

/* ---------------------------------------------------------------------
   Equipo Detalle (profile-detail)
   --------------------------------------------------------------------- */
/* Ficha de miembro (Figma "lan tadea - barrutik"): foto grande izq + columna der
   (nombre Nunito 50/700 teal, cargo 30/600 negro, bio Inter 17/300, LinkedIn + flecha lima). */
.profile-detail { padding-block: var(--space-3xl); }
.profile-detail__inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2.5rem, 6vw, 7.25rem); align-items: center; }
/* La foto webp ya trae la forma (muesca) horneada: sin recuadro/fondo, tal cual. */
.profile-detail__media { aspect-ratio: 709 / 701; position: relative; }
.profile-detail__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.profile-detail__media:has(img) .profile-detail__placeholder { display: none; }
.profile-detail__placeholder { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-deep), #2a4146); color: #fff; font-family: var(--font-base); font-size: 8rem; font-weight: var(--fw-thin); }
.profile-detail__name { font-family: var(--font-accent); font-size: 50px; font-weight: 700; line-height: 1; margin-bottom: var(--space-sm); color: var(--color-deep); }
.profile-detail__role { font-family: var(--font-accent); font-size: 30px; font-weight: 600; line-height: 1; color: var(--color-ink); margin-bottom: var(--space-lg); }
.profile-detail__bio { font-size: 17px; font-weight: var(--fw-light); line-height: 25px; color: var(--color-ink); margin-bottom: var(--space-lg); }
.profile-detail__bio p + p { margin-top: 1rem; }
.profile-detail__links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.profile-detail__linkedin { display: inline-flex; color: var(--color-deep); transition: color var(--t-fast) ease; }
.profile-detail__linkedin:hover { color: var(--color-accent-deep, #7cae1f); }

/* ---------------------------------------------------------------------
   Valores
   --------------------------------------------------------------------- */
/* Rejilla de valores (Figma "gure balioak"): sin tarjeta, número encima del
   título, sobre fondo blanco. Número 58/light, título 40/semibold, texto 17/light. */
.valores-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(3rem, 7vw, 8rem); row-gap: var(--space-2xl); }
.valor-card { display: flex; flex-direction: column; }
.valor-card__num { font-family: var(--font-accent); font-size: clamp(2.75rem, 4vw, 3.625rem); font-weight: var(--fw-light); line-height: 1; color: var(--color-ink); }
.valor-card__title { font-size: 2.5rem; /* 40px (Figma) */ font-weight: var(--fw-semibold); line-height: 1.18; color: var(--color-ink); margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
.valor-card__text { font-size: var(--fs-body); font-weight: var(--fw-light); line-height: 1.6; color: var(--color-ink); }

/* Parallax full-bleed (alto, ~50vw como Figma) con botón en el tercio inferior.
   Dos fotos del equipo (--px-1, --px-2 inyectadas en el HTML) en dos capas que
   se funden cada ~3 s (cross-fade). ::before = foto 1 fija; ::after = foto 2 que
   aparece/desaparece. El parallax (fixed) se mantiene en ambas capas. */
.valores-parallax {
    position: relative;
    overflow: hidden;
    height: clamp(420px, 50vw, 805px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: clamp(2.5rem, 9vw, 7.5rem);
}
.valores-parallax::before,
.valores-parallax::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    z-index: 0;
}
.valores-parallax::before { background-image: var(--px-1); }
.valores-parallax::after  {
    background-image: var(--px-2);
    opacity: 0;
    animation: valores-xfade 7s ease-in-out infinite;
}
.valores-parallax__inner { display: flex; justify-content: center; position: relative; z-index: 1; }
/* ~3 s cada foto, con fundido suave entre medias. */
@keyframes valores-xfade {
    0%, 43%  { opacity: 0; }
    50%, 93% { opacity: 1; }
    100%     { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .valores-parallax::after { animation: none; opacity: 0; }
}

/* ---------------------------------------------------------------------
   Metodología
   --------------------------------------------------------------------- */
/* Metodología — 3 tarjetas: forma de color con muesca (webp) detrás del título,
   texto fluyendo por debajo. Sin tarjeta/borde; fondo blanco de sección. */
.metod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 5rem); }
.metod-card { position: relative; }
.metod-card__shape {
    position: absolute; top: 0; left: 0; z-index: 0;
    width: min(100%, 330px);
    aspect-ratio: 316 / 320;
    background: top left / contain no-repeat;
}
.metod-card__title {
    position: relative; z-index: 1;
    margin: 0 0 var(--space-md);
    padding: clamp(2.75rem, 3.8vw, 3.25rem) clamp(1.5rem, 2vw, 2rem) 0;
    font-size: 2.5rem; /* 40px (Figma) */
    font-weight: var(--fw-semibold);
    line-height: 1.18;
    color: var(--color-ink);
}
.metod-card__text {
    position: relative; z-index: 1;
    padding: 0 clamp(1.5rem, 2vw, 2rem);
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    line-height: 1.6;
    color: var(--color-ink);
}
/* Metodología — parallax full-bleed (foto facilitación), ~38vw como Figma. */
.metod-parallax {
    height: clamp(340px, 38vw, 609px);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
/* "Somos facilitadores" (IAF): encabezado 50px bold + párrafo, centrados. */
.somos-fac { padding-top: var(--space-3xl); padding-bottom: 0; }
.somos-fac__inner { max-width: 50rem; margin-inline: auto; text-align: center; }
.somos-fac__title { font-size: clamp(2rem, 4vw, 3.125rem); font-weight: var(--fw-bold); line-height: 1.1; color: var(--color-ink); margin: 0 auto var(--space-sm); }
.somos-fac__text { font-size: var(--fs-body); font-weight: var(--fw-light); color: var(--color-ink); margin: 0 auto; }

/* ---------------------------------------------------------------------
   Casos de Éxito
   --------------------------------------------------------------------- */
/* Hero del caso: caja teal con muesca inf-izq (forma fondo-titulo.webp).
   container-type + cqw → eyebrow/badge/lead escalan con el ancho de la caja
   sin desbordar la forma; bajo 768px cae a panel teal sólido (ver responsive). */
.hero--casos { background: none; }
.hero--casos > .container { padding-block: var(--space-xl) var(--space-2xl); }
.caso-hero {
    aspect-ratio: 1416 / 424;
    background: url("../img/casos/fondo-titulo.webp") no-repeat center / 100% 100%;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding-bottom: 2cqw; /* la muesca queda abajo-izq: sube un pelín el bloque */
}
.caso-hero__eyebrow {
    font-size: 2.12cqw;   /* 30 / 1416 */
    font-weight: var(--fw-light);
    letter-spacing: 0.08em;
    margin-bottom: 1.9cqw;
}
.caso-hero__badge {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-deep);
    font-size: 3.53cqw;   /* 50 / 1416 */
    font-weight: var(--fw-bold);
    line-height: 1;
    padding: 0.6cqw 2.1cqw;
    border-radius: 0.7cqw;
    margin-bottom: 3.9cqw;
}
.caso-hero__lead {
    font-size: 1.2cqw;    /* 17 / 1416 */
    font-weight: var(--fw-light);
    line-height: 1.7;
    max-width: 89.5%;
    margin: 0;
}
/* Espaciado vertical de la página de casos: la mitad que el resto del sitio
   (.section usa space-3xl=120px → aquí space-xl=60px por borde). */
.caso-section,
.caso-gallery-section,
.section--videos { padding-block: var(--space-xl); }

/* Secciones numeradas del caso (01..04): número + título + texto a un lado,
   media (foto + forma) al otro. */
.caso-section__grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
}
.caso-section__num {
    display: block;
    font-family: var(--font-accent);
    font-size: 3.5rem;   /* ~58px */
    font-weight: var(--fw-light);
    line-height: 1;
    color: var(--color-ink);
}
.caso-section__title {
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);  /* ~40px */
    font-weight: var(--fw-semibold);
    color: var(--color-ink);
    margin: 0.5rem 0 var(--space-md);
}
.caso-section__body p {
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    line-height: 1.65;
    color: var(--color-ink);
    margin-bottom: 1.25rem;
    max-width: 52ch;
}
.caso-section__body p:last-child { margin-bottom: 0; }
.caso-section__body strong { font-weight: var(--fw-semibold); }
/* Media: foto cuadrada (arriba-izq) + forma menta detrás asomando abajo-der. */
.caso-media { position: relative; aspect-ratio: 565 / 512; }
.caso-media__photo {
    position: absolute; top: 0; left: 8.7%;
    width: 74.5%; aspect-ratio: 421 / 416;
    object-fit: cover; border-radius: var(--radius-md);
    z-index: 1;
}
.caso-media__shape {
    position: absolute; right: 0; bottom: 0;
    width: 69%; aspect-ratio: 390 / 404;
    background: url("../img/casos/recuadro-fondo.webp") no-repeat center / 100% 100%;
    z-index: 0;
}
/* Lista de acciones: bullets simples (•). */
.caso-section__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.caso-section__list li {
    position: relative;
    padding-left: 1.2em;
    max-width: 52ch;
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    line-height: 1.5;
    color: var(--color-ink);
}
.caso-section__list li::before { content: "•"; position: absolute; left: 0.15em; color: var(--color-ink); }
.caso-section__outro { margin-top: var(--space-md); }
/* Variante de media (sección 02): misma caja/tamaño de foto que 01, pero la foto
   va abajo-der y la forma (verde pálida recuadro-fondo2) asoma arriba-izq. */
.caso-media--alt .caso-media__photo { top: auto; left: auto; right: 0; bottom: 0; }
.caso-media--alt .caso-media__shape {
    right: auto; bottom: auto; left: 0; top: 0;
    width: 59%; aspect-ratio: 334 / 404;
    background-image: url("../img/casos/recuadro-fondo2.webp");
}
/* Galería/slider de fotos: el track arranca alineado con el contenido y se
   desborda por la derecha (asoma el siguiente). Botón lima circular de avance. */
.caso-gallery-section { position: relative; }
.caso-gallery__viewport {
    /* Borde izquierdo alineado con el contenido del .container (usa 100% —ancho
       real sin scrollbar— + el gutter del container). El track se desborda a la
       derecha hasta el borde del viewport. */
    --edge: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--edge);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-left: var(--edge);
    padding-right: var(--gutter);
}
.caso-gallery__viewport::-webkit-scrollbar { display: none; }
.caso-gallery__track { display: flex; gap: clamp(1.25rem, 2.2vw, 2.5rem); width: max-content; }
.caso-gallery__item {
    flex: 0 0 auto;
    width: clamp(248px, 23vw, 340px);
    aspect-ratio: 360 / 374;
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #efefef; /* placeholder gris si la imagen falta */
    scroll-snap-align: start;
}
.caso-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.caso-gallery__next {
    position: absolute;
    top: 50%; right: var(--gutter);
    transform: translateY(-50%);
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border: none; border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-ink);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transition: transform var(--t-fast) var(--ease);
    z-index: 2;
}
.caso-gallery__next:hover { transform: translateY(-50%) scale(1.08); }
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
.case-block__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--color-deep); margin-bottom: var(--space-md); }
.case-block__body p { font-size: var(--fs-body-l); font-weight: var(--fw-light); line-height: 1.6; color: var(--color-ink); }
.case-list { display: flex; flex-direction: column; gap: var(--space-sm); list-style: none; padding: 0; }
.case-list__item { font-size: var(--fs-body-m); font-weight: var(--fw-light); line-height: 1.5; padding-left: var(--space-sm); border-left: 3px solid var(--color-gray-300); }
.case-list--accent .case-list__item { border-left-color: var(--color-accent); font-weight: var(--fw-regular); }
.videos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl) var(--space-2xl); }
.video-card { display: flex; flex-direction: column; gap: var(--space-sm); margin: 0; }
.video-card__title { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: var(--fw-semibold); line-height: 1.25; color: var(--color-ink); text-align: left; min-height: 2.5em; /* reserva 2 líneas → miniaturas alineadas */ }
.video-card__thumb {
    position: relative; display: block; width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0; border: none; margin: 0;
    border-radius: var(--radius-md); overflow: hidden;
    background: #000; cursor: pointer;
}
.video-card__poster { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-med) var(--ease); }
.video-card__thumb:hover .video-card__poster { transform: scale(1.03); }
.video-card__play {
    position: absolute; inset: 0; margin: auto;
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #d9d9d9;
    display: grid; place-items: center; padding-left: 3px;
    transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.video-card__thumb:hover .video-card__play { transform: scale(1.08); background: #fff; color: var(--color-deep); }
.video-card__iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-md); display: block; }

/* ---------------------------------------------------------------------
   Caso de éxito — bloque TESTIMONIO (opcional: cnta / egile)
   Cita + autor (izq) y vídeo facade (der), sobre tarjeta lavanda suave.
   --------------------------------------------------------------------- */
.caso-testimonio-section { padding-block: var(--space-xl); }
.caso-testimonio {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-2xl);
    align-items: center;
    background: rgba(196, 181, 240, 0.18); /* lavanda @18% */
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 4vw, var(--space-2xl));
}
.caso-testimonio__quote { margin: 0; position: relative; }
.caso-testimonio__quote::before {
    content: "\201C";
    position: absolute; top: -0.35em; left: -0.1em;
    font-size: 4rem; line-height: 1;
    color: var(--color-lavender);
    opacity: 0.6;
}
.caso-testimonio__quote p {
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    font-weight: var(--fw-light);
    line-height: 1.5;
    color: var(--color-ink);
    margin: 0 0 var(--space-md);
    position: relative;
}
.caso-testimonio__author { display: flex; flex-direction: column; gap: 0.15rem; font-style: normal; }
.caso-testimonio__name { font-weight: var(--fw-semibold); color: var(--color-deep); }
.caso-testimonio__role { font-size: 0.95rem; color: var(--color-ink); opacity: 0.75; }
.caso-testimonio__video { width: 100%; }

/* ---------------------------------------------------------------------
   Formularios Premium (Diagnóstico, Contacto)
   --------------------------------------------------------------------- */
.container--narrow { max-width: 720px; }
.form-intro { margin-bottom: var(--space-2xl); }
.premium-form { background: var(--color-bg); border: 1px solid var(--color-gray-250); padding: var(--space-xl) var(--space-2xl); border-radius: var(--radius-md); box-shadow: 0 8px 30px rgba(0,0,0,0.03); }
.form-group { border: none; padding: 0; margin: 0 0 var(--space-xl) 0; }
.form-group__legend { font-family: var(--font-accent); font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--color-deep); border-bottom: 2px solid var(--color-gray-100); width: 100%; padding-bottom: 0.5rem; margin-bottom: var(--space-md); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.form-field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: var(--space-md); }
.form-label { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--color-ink); }
.form-input { border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm); padding: 0.75rem 1rem; font-family: var(--font-base); font-size: var(--fs-body); color: var(--color-ink); transition: border-color var(--t-fast) var(--ease); background: var(--color-panel); }
.form-input:focus { border-color: var(--color-deep); background: var(--color-bg); outline: none; }
.form-input--textarea { resize: vertical; min-height: 100px; }
.form-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--color-gray-200); padding-top: var(--space-md); margin-top: var(--space-lg); }
.form-checkbox-wrap { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; }
.form-checkbox { margin-top: 0.25rem; width: 16px; height: 16px; accent-color: var(--color-deep); }
.form-checkbox-label { font-size: var(--fs-caption); font-weight: var(--fw-light); color: var(--color-ink); opacity: 0.8; user-select: none; }

/* ---------------------------------------------------------------------
   Diagnóstico (Figma "Diagnosia" + contenido docx)
   Título 58 light, preguntas de opción múltiple, campos subrayados, botón verde.
   Clases propias (.diag-*) para NO afectar al formulario de contacto.
   --------------------------------------------------------------------- */
.diag__inner { max-width: 1120px; margin-inline: auto; }
.diag__title { font-size: clamp(2.25rem, 4.5vw, 3.625rem); font-weight: var(--fw-light); line-height: 1.05; color: var(--color-ink); margin-bottom: var(--space-md); }
.diag__intro { font-size: 17px; font-weight: var(--fw-light); line-height: 1.6; color: var(--color-ink); max-width: 70ch; margin-bottom: var(--space-2xl); }
.diag-form { display: flex; flex-direction: column; gap: var(--space-xl); }
/* Honeypot anti-spam: fuera de pantalla, no visible ni accesible al usuario. */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Banner de estado del formulario (éxito / error). */
.form-banner { padding: var(--space-md) var(--space-lg); border-radius: 8px; font-size: 17px; font-weight: var(--fw-regular); line-height: 1.5; margin-bottom: var(--space-xl); }
.form-banner--ok { background: var(--accent-green); color: var(--color-deep); border: 1px solid var(--color-deep); }
.form-banner--error { background: rgba(252, 111, 94, 0.12); color: #b23a2a; border: 1px solid var(--color-coral); }
/* Wizard por pasos: progreso + slider horizontal + navegación */
.diag-progress { display: flex; flex-direction: column; gap: 0.5rem; }
.diag-progress__label { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--color-deep); }
.diag-progress__label b { font-weight: var(--fw-bold); }
.diag-progress__bar { height: 4px; border-radius: 2px; background: var(--color-gray-200); overflow: hidden; }
.diag-progress__bar span { display: block; height: 100%; width: 20%; background: var(--color-accent); border-radius: 2px; transition: width var(--t-med) var(--ease); }
.diag-steps { position: relative; overflow: hidden; transition: height var(--t-med) var(--ease); }
.diag-track { display: flex; align-items: flex-start; transition: transform var(--t-med) var(--ease); }
.diag-step { flex: 0 0 100%; width: 100%; min-width: 0; }
.diag-nav { display: flex; gap: var(--space-md); align-items: center; }
.diag-submit { margin-left: auto; }
.diag-nav [data-step-next] { margin-left: auto; }
/* El atributo hidden debe ganar al display:inline-flex de .btn */
.diag-nav button[hidden] { display: none; }
/* Pregunta de opción */
.diag-q { border: none; padding: 0; margin: 0; }
.diag-q__legend { font-size: 17px; font-weight: var(--fw-semibold); color: var(--color-ink); padding: 0; }
.diag-q__hint { font-size: var(--fs-caption); font-weight: var(--fw-light); color: var(--color-ink); opacity: 0.65; margin-top: 0.15rem; }
.diag-q__options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 2.5rem; margin-top: var(--space-md); }
.diag-opt { display: flex; align-items: flex-start; gap: 0.65rem; cursor: pointer; font-size: 16px; font-weight: var(--fw-light); line-height: 1.4; color: var(--color-ink); }
.diag-opt input { margin-top: 0.15rem; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--color-accent); cursor: pointer; }
.diag-q__error { margin-top: var(--space-md); font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: #c0392b; }
.diag-q__error[hidden] { display: none; }
/* Campos de texto subrayados (estilo Figma) */
.diag-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-2xl); }
.diag-field { display: flex; flex-direction: column; gap: 0.5rem; }
.diag-field--full { grid-column: 1 / -1; }
.diag-field label { font-size: 17px; font-weight: var(--fw-light); color: var(--color-ink); }
.diag-input { border: none; border-bottom: 1px solid var(--color-ink); background: transparent; padding: 0.4rem 0; font-family: var(--font-base); font-size: 16px; color: var(--color-ink); transition: border-color var(--t-fast) var(--ease); }
.diag-input:focus { outline: none; border-bottom-color: var(--color-accent); border-bottom-width: 2px; }
.diag-input--textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
/* Footer: checkbox privacidad + botón enviar */
.diag-footer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); margin-top: var(--space-md); }
.diag-check { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: var(--fs-caption); font-weight: var(--fw-light); color: var(--color-ink); }
.diag-check input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--color-accent); cursor: pointer; }

/* ---------------------------------------------------------------------
   Cuestionario interactivo
   --------------------------------------------------------------------- */
.cuestionario-intro { margin-bottom: var(--space-2xl); }
.options-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.option-card { display: block; position: relative; cursor: pointer; }
.option-card__checkbox { position: absolute; opacity: 0; pointer-events: none; }
.option-card__inner { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); border: 1px solid var(--color-gray-300); background: var(--color-bg); transition: all var(--t-med) var(--ease); }
.option-card:hover .option-card__inner { border-color: var(--color-deep); background: var(--color-gray-100); transform: translateX(4px); }
.option-card__indicator { display: block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-gray-300); position: relative; flex-shrink: 0; transition: all var(--t-fast) var(--ease); }
.option-card__checkbox:checked + .option-card__inner { border-color: var(--color-accent); background: var(--accent-lime-soft); }
.option-card__checkbox:checked + .option-card__inner .option-card__indicator { border-color: var(--color-deep); background: var(--color-accent); }
.option-card__checkbox:checked + .option-card__inner .option-card__indicator::after { content: ""; display: block; width: 6px; height: 10px; border: solid var(--color-deep); border-width: 0 2px 2px 0; transform: rotate(45deg); position: absolute; left: 6px; top: 2px; }
.option-card__text { font-size: var(--fs-body-l); font-weight: var(--fw-light); color: var(--color-ink); }
.option-card__checkbox:checked + .option-card__inner .option-card__text { font-weight: var(--fw-semibold); }
.cuestionario-footer { margin-top: var(--space-lg); }