/* ============================================
   Wazo · home.css
   Sigue el diseño Figma node 117:2218 (home Wazo POCUS).
   Layout raíz: <main class="wazo-home"> es un grid 12-col.
   ============================================ */

/* NOTA · los tokens --wazo-cta-* viven en main.css (globales).
   La animación de flecha .wazo-cta-arrow y el banner .wazo-fcta viven en
   footer.css porque el CTA aparece en TODAS las páginas (vía footer), no solo
   en el home. Aquí no se duplican. */

/* ---- Main como grid 12-col (layout raíz del home) ----
   Las secciones que migren al sistema usan subgrid para heredar las cols.
   Las secciones legacy siguen funcionando con su padding-inline interno. */
.wazo-home {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--wazo-grid-gutter);
}
.wazo-home > section,
.wazo-home > footer {
    grid-column: 1 / -1;        /* full bleed por defecto */
}

@media (max-width: 1200px) {
    /* Tablet: rompe el grid 12, una sola columna con padding lateral. */
    .wazo-home {
        grid-template-columns: 1fr;
        padding-inline: 16px;
    }
}
@media (max-width: 639px) {
    /* Phone: grid 6-col (mismo sistema que desktop a escala reducida).
       Las secciones que lo aprovechen usan subgrid dentro de su @media (max-width: 639px). */
    .wazo-home {
        grid-template-columns: repeat(var(--wazo-grid-cols-phone), 1fr);
        column-gap: var(--wazo-grid-gutter-phone);
    }
}

/* === Pills (eyebrow con dot azul brillante) ===
   Reusado en hero, why, especialidades, paths, plans. */
   .wazo-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--wazo-sp-phone-xs);
    height: 22px;
    padding: 0 var(--wazo-sp-phone-xs);
    border-radius: 100px;
    background: var(--wazo-color-bg);
    border: 0.75px solid var(--wazo-color-accent);
    color: var(--wazo-color-text);
    font-family: var(--wazo-font-sans);
    font-weight: var(--wazo-font-weight-medium);
    font-size: var(--wazo-fs-12);
    letter-spacing: var(--wazo-ls-display);
    line-height: var(--wazo-lh-none);
    white-space: nowrap;
}
.wazo-pill__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wazo-color-accent);
    box-shadow: 0 0 6px var(--wazo-color-accent);
}

/* (plans head ya migrado a subgrid en la seccion 5 abajo) */

/* ============================================
   1 · HERO  (migrado al grid 12-col del main vía subgrid)
   ============================================ */
.wazo-home__hero {
    position: relative;
    /* Top reducido (hero va pegado al header) · Bottom igual al de toda
       sección estándar para que el gap hero→why sea idéntico al gap
       entre cualquier 2 secciones del resto de la página. */
    padding-block: var(--wazo-sp-hero-block) var(--wazo-sp-section-block);
    padding-inline: 0;                          /* el grid raíz maneja el spacing */
    display: grid;
    grid-template-columns: subgrid;             /* hereda 12 cols de main */
    column-gap: var(--wazo-grid-gutter);
    row-gap: var(--wazo-sp-hero-rowgap);
}

/* hero-top: cols 2-6 (pills + headline apilados). */
.wazo-home__hero-top {
    grid-column: 2 / span 5;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: var(--wazo-sp-phone-md);
    align-items: flex-start;
    min-width: 0;
}

.wazo-home__hero-pills {
    display: flex;
    gap: var(--wazo-sp-phone-xs);
    flex-wrap: wrap;
    margin-bottom: var(--wazo-sp-phone-md);
}
.wazo-home__hero-headline {
    font-family: var(--wazo-font-sans);
    font-weight: var(--wazo-font-weight-medium);
    font-size: var(--wazo-fs-display-xl);
    line-height: var(--wazo-lh-display);
    letter-spacing: var(--wazo-ls-display);
    color: var(--wazo-color-text);
    max-width: 720px;
    text-wrap: balance;
    overflow-wrap: break-word;
}
/* lede: grid item independiente del hero, col 8-11, alineado al bottom
   del headline (misma fila visual). */
.wazo-home__hero-lede {
    grid-column: 8 / 12;
    grid-row: 1;
    align-self: end;
    font-size: var(--wazo-fs-16);
    line-height: var(--wazo-lh-body);
    letter-spacing: var(--wazo-ls-display);
    color: rgba(255, 255, 255, 0.60);
    max-width: 342px;
    margin-bottom: var(--wazo-sp-phone-xs);
}

/* Feature row: big card izda + 2 cards apiladas dcha — cols 2-11 del grid 12. */
.wazo-home__hero-feature {
    grid-column: 2 / 12;
    display: grid;
    grid-template-columns: minmax(0, 1.52fr) minmax(0, 1fr);   /* Figma 722:474 ≈ 1.52:1 */
    gap: var(--wazo-grid-gutter);
    /* min-height (no height): las cards de la columna derecha imponen su alto
       natural (2 × min-height 240 + gap 24 = 504px). Con `height` fijo el
       feature quedaba en 410 pero las cards desbordaban 94px y se comían el
       padding-block del hero. Con min-height el feature crece para alojarlas,
       así el padding-bottom queda por debajo de las fotos. */
    min-height: clamp(320px, 32vw, 410px);
}
.wazo-home__hero-feature-stack {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: var(--wazo-grid-gutter);
    height: 100%;
}
@media (max-width: 1200px) {
    /* Tablet: hero rompe el subgrid · pills/lede stack, feature mantiene presencia. */
    .wazo-home__hero {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }
    .wazo-home__hero-top,
    .wazo-home__hero-lede {
        grid-column: 1;
        grid-row: auto;
    }
    /* Feature en tablet: big card full-width arriba · 2 small cards side-by-side abajo. */
    .wazo-home__hero-feature {
        grid-column: 1;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
        gap: var(--wazo-grid-gutter);
    }
    .wazo-home__hero-feature-stack {
        grid-template-rows: none;
        grid-template-columns: 1fr 1fr;
        gap: var(--wazo-grid-gutter);
    }
    .wazo-home__hero-feature > .wazo-hero-fc { min-height: 280px; }
    .wazo-home__hero-feature-stack .wazo-hero-fc { min-height: 200px; }
}
@media (max-width: 639px) {
    /* Phone · sistema unificado · padding-block lg / row-gap md / card gap sm */
    .wazo-home__hero {
        grid-template-columns: subgrid;
        column-gap: var(--wazo-grid-gutter-phone);
        row-gap: var(--wazo-sp-phone-md);          /* 24px entre top/lede/feature */
        padding-block: var(--wazo-sp-phone-lg);    /* 40px */
    }
    .wazo-home__hero-top,
    .wazo-home__hero-lede,
    .wazo-home__hero-feature { grid-column: 1 / -1; grid-row: auto; }
    .wazo-home__hero-feature {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
        gap: var(--wazo-sp-phone-sm);              /* 16px entre big card y stack */
    }
    .wazo-home__hero-feature-stack {
        grid-template-columns: 1fr;
        gap: var(--wazo-sp-phone-sm);              /* 16px entre small cards */
    }
    /* Head interno · gap sm + sin margin-bottom extra en pills. */
    .wazo-home__hero-top { gap: var(--wazo-sp-phone-sm); }       /* 20 → 16 */
    .wazo-home__hero-pills { margin-bottom: 0; }                  /* 28 → 0 (el flex gap basta) */
    /* NOTA: el override de .wazo-hero-fc__inner padding/gap vive más abajo
       (después de su regla base) porque CSS resuelve por source order cuando
       la especificidad es igual — si lo pongo aquí la regla base lo pisa. */
}

/* Feature card · ahora <a> (era <article>) · toda la card es link.
   display:block para mantener el layout del antiguo <article>. */
.wazo-hero-fc {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    color: var(--wazo-color-text);
    isolation: isolate;
    height: 100%;
    min-height: 240px;
    text-decoration: none;
}
.wazo-hero-fc__media img { transition: transform 0.6s var(--wazo-cta-ease); }
.wazo-hero-fc:hover .wazo-hero-fc__media img { transform: scale(1.04); }

/* Hover border gradient azul · mismo patrón visual que .wazo-spec-card:hover.
   Aquí no podemos usar el truco padding-box+border-box porque taparía la
   imagen __media absoluta. Usamos un ::after con mask-composite para
   pintar SOLO el contorno gradiente sin afectar al contenido. */
.wazo-hero-fc::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(90deg, #0118D6 25%, #0072F7 70%, #0088FF 87%, #0088FF 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--wazo-cta-duration) var(--wazo-cta-ease);
    pointer-events: none;
    z-index: 3;
}
.wazo-hero-fc:hover::after { opacity: 1; }
.wazo-hero-fc__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
}
.wazo-hero-fc__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.wazo-hero-fc__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: var(--wazo-sp-phone-md);
    gap: var(--wazo-sp-phone-xs);
    display: flex;
    flex-direction: column;
}
.wazo-hero-fc__tag {
    font-size: var(--wazo-fs-16);
    font-weight: var(--wazo-font-weight-medium);
    line-height: var(--wazo-lh-none);
    letter-spacing: var(--wazo-ls-display);
    color: var(--wazo-color-text);
}
.wazo-hero-fc__bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--wazo-sp-phone-xs);
    max-width: 360px;
}
.wazo-hero-fc__title {
    font-family: var(--wazo-font-sans);
    font-weight: var(--wazo-font-weight-medium);
    font-size: var(--wazo-fs-32);
    line-height: var(--wazo-lh-display);
    letter-spacing: var(--wazo-ls-display);
    color: var(--wazo-color-text);
}
.wazo-hero-fc__body {
    font-size: var(--wazo-fs-14);
    line-height: var(--wazo-lh-body);
    letter-spacing: var(--wazo-ls-display);
    color: rgba(255, 255, 255, 0.85);
}
.wazo-hero-fc__cta {
    margin-top: var(--wazo-sp-phone-xs);
    font-size: var(--wazo-fs-12);
    font-weight: var(--wazo-font-weight-medium);
    letter-spacing: var(--wazo-ls-display);
    color: var(--wazo-color-text);
    display: inline-flex;
    text-decoration: none;
}
.wazo-home__hero-feature-stack .wazo-hero-fc__title { font-size: var(--wazo-fs-32); }
.wazo-home__hero-feature-stack .wazo-hero-fc__bottom { max-width: 320px; }

/* Phone · override de las feature cards (debe ir DESPUÉS de la regla base
   para ganar la cascada con misma especificidad). */
@media (max-width: 639px) {
    .wazo-hero-fc__inner {
        padding: var(--wazo-sp-phone-md);           /* card padding unificado · 24px */
        gap: var(--wazo-sp-phone-xs);               /* 10 → 8 */
    }
}

/* ============================================
   2 · WHY · "Mirada clínica · Diagnóstico real"
   Migrado al master grid 12-col vía subgrid.
   ============================================ */
.wazo-home__why {
    padding-block: var(--wazo-sp-section-block-divider);
    display: grid;
    grid-template-columns: subgrid;        /* hereda 12 cols del main */
    column-gap: var(--wazo-grid-gutter);
    row-gap: var(--wazo-sp-section-rowgap);
}

/* Head — eyebrow + título + descripción stack vertical en cols 2-6 (5 cols) */
.wazo-home__why-head {
    grid-column: 2 / span 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wazo-sp-phone-md);
}
.wazo-home__why-eyebrow {
    font-size: var(--wazo-fs-14);
    font-weight: var(--wazo-font-weight-regular);
    color: var(--wazo-color-text);
    letter-spacing: var(--wazo-ls-display);
    line-height: var(--wazo-lh-none);
    opacity: 0.85;
}
.wazo-home__why-title {
    font-family: var(--wazo-font-sans);
    font-weight: var(--wazo-font-weight-medium);
    font-size: var(--wazo-fs-display-xl);
    line-height: var(--wazo-lh-display);
    letter-spacing: var(--wazo-ls-display);
    color: var(--wazo-color-text);
    text-wrap: balance;
}
.wazo-home__why-sub {
    font-size: var(--wazo-fs-16);
    line-height: var(--wazo-lh-body);
    letter-spacing: var(--wazo-ls-display);
    color: rgba(255, 255, 255, 0.55);
    max-width: 40ch;
}

/* Rows — cadena de subgrids que mapea cada hijo a su columna del master 12.
   Bordes pintados con pseudo-elementos para limitarlos a cols 2-11. */
.wazo-home__why-rows {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    column-gap: var(--wazo-grid-gutter);
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.wazo-home__why-rows::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--wazo-grid-margin);
    right: var(--wazo-grid-margin);
    height: 1px;
    background: rgb(255, 255, 255);
}
.wazo-home__why-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    column-gap: var(--wazo-grid-gutter);
    align-items: center;
    padding: 30px 0;
    position: relative;
}
.wazo-home__why-row::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: var(--wazo-grid-margin);
    right: var(--wazo-grid-margin);
    height: 1px;
    background: rgb(255, 255, 255);
}
.wazo-home__why-num    { grid-column: 2 / span 1; }
.wazo-home__why-rtitle { grid-column: 4 / 7; }
.wazo-home__why-rdesc  { grid-column: 8 / 12; }
.wazo-home__why-num {
    font-size: var(--wazo-fs-display-md);
    font-weight: var(--wazo-font-weight-regular);
    line-height: var(--wazo-lh-none);
    letter-spacing: var(--wazo-ls-display);
    color: rgb(255 255 255);
}
.wazo-home__why-rtitle {
    font-family: var(--wazo-font-sans);
    font-weight: var(--wazo-font-weight-medium);
    font-size: var(--wazo-fs-display-md);
    line-height: var(--wazo-lh-display);
    letter-spacing: var(--wazo-ls-display);
    color: var(--wazo-color-text);
}
.wazo-home__why-rdesc {
    font-size: var(--wazo-fs-14);
    line-height: var(--wazo-lh-body);
    letter-spacing: var(--wazo-ls-display);
    color: rgba(255, 255, 255, 0.55);
}

/* Tablet · rompe subgrid y colapsa todo a 1 col */
@media (max-width: 1200px) {
    .wazo-home__why {
        grid-template-columns: 1fr;
        row-gap: var(--wazo-sp-phone-md);
    }
    .wazo-home__why-head,
    .wazo-home__why-rows,
    .wazo-home__why-row { grid-column: 1; }
    .wazo-home__why-rows { grid-template-columns: 1fr; }
    .wazo-home__why-row {
        grid-template-columns: 48px 1fr;
        column-gap: var(--wazo-sp-phone-sm);
        row-gap: var(--wazo-sp-phone-xs);
        padding: var(--wazo-sp-phone-md) 0;
    }
    .wazo-home__why-num    { grid-column: 1; grid-row: 1 / span 2; }
    .wazo-home__why-rtitle { grid-column: 2; grid-row: 1; }
    .wazo-home__why-rdesc  { grid-column: 2; grid-row: 2; }
    /* Bordes pegados al borde del contenedor (no a cols 2-11). */
    .wazo-home__why-rows::before,
    .wazo-home__why-row::after { left: 0; right: 0; }
}
/* Phone · sistema unificado · num col 1, contenido cols 2-6 */
@media (max-width: 639px) {
    .wazo-home__why {
        grid-template-columns: subgrid;
        column-gap: var(--wazo-grid-gutter-phone);
        row-gap: var(--wazo-sp-phone-md);          /* 24px head → rows */
        padding-block: var(--wazo-sp-phone-lg);    /* 40px */
    }
    .wazo-home__why-head,
    .wazo-home__why-rows { grid-column: 1 / -1; }
    .wazo-home__why-rows {
        grid-template-columns: subgrid;
        column-gap: var(--wazo-grid-gutter-phone);
    }
    .wazo-home__why-row {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: subgrid;
        column-gap: var(--wazo-grid-gutter-phone);
        row-gap: var(--wazo-sp-phone-xs);          /* 8px entre rtitle y rdesc */
        padding: var(--wazo-sp-phone-md) 0;        /* 24px vertical en cada row */
    }
    .wazo-home__why-num    { grid-column: 1 / span 1; grid-row: 1 / span 2; }
    .wazo-home__why-rtitle { grid-column: 2 / -1; grid-row: 1; }
    .wazo-home__why-rdesc  { grid-column: 2 / -1; grid-row: 2; }
    .wazo-home__why-head { gap: var(--wazo-sp-phone-sm); }         /* 20 → 16 */
}


/* ============================================
   4 · PATHS · "Una plataforma, tres caminos de adopción"
   Migrado al master grid 12-col vía subgrid (Figma 117:2489+).
   ============================================ */
.wazo-home__paths {
    padding-block: var(--wazo-sp-section-block);
    display: grid;
    grid-template-columns: subgrid;
    column-gap: var(--wazo-grid-gutter);
    row-gap: var(--wazo-sp-section-rowgap);
}

/* Head · eyebrow + título CENTRADOS · cols 2-11 */
.wazo-home__paths-head {
    grid-column: 2 / 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--wazo-sp-phone-md);
}
.wazo-home__paths-eyebrow {
    font-size: var(--wazo-fs-14);
    color: var(--wazo-color-text);
    letter-spacing: var(--wazo-ls-display);
    line-height: var(--wazo-lh-none);
    opacity: 0.85;
}
.wazo-home__paths-title {
    font-family: var(--wazo-font-sans);
    font-weight: var(--wazo-font-weight-medium);
    font-size: var(--wazo-fs-display-xl);
    line-height: var(--wazo-lh-display);
    letter-spacing: var(--wazo-ls-display);
    color: var(--wazo-color-text);
    text-wrap: balance;
}

/* Grid 3 cards · cols 2-11 */
.wazo-home__paths-grid {
    grid-column: 2 / 12;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wazo-grid-gutter);
}

/* Card · 2 mitades: media (foto+número) arriba · body (gradient) abajo.
   Figma 117:2489 — aspect casi cuadrado, foto 60% · body 40%. */
.wazo-path-card {
    position: relative;
    aspect-ratio: 1 / 1.05;
    border-radius: 8px;
    overflow: hidden;
    color: var(--wazo-color-text);
    text-decoration: none;
    isolation: isolate;
    display: grid;
    grid-template-rows: 1.6fr 1fr;
}

/* Media half — foto cubre todo, número grande bottom-left */
.wazo-path-card__media {
    position: relative;
    overflow: hidden;
}
.wazo-path-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--wazo-cta-ease);
}
.wazo-path-card:hover .wazo-path-card__media img { transform: scale(1.04); }

.wazo-path-card__num {
    position: absolute;
    left: var(--wazo-sp-phone-md);
    bottom: var(--wazo-sp-phone-sm);
    z-index: 2;
    font-size: clamp(40px, 5vw, 58px);
    font-weight: var(--wazo-font-weight-medium);
    line-height: var(--wazo-lh-none);
    letter-spacing: var(--wazo-ls-display);
    color: var(--wazo-color-text);
}

/* Body half — gradient sólido, contenido stack vertical con CTA al bottom */
.wazo-path-card__body {
    padding: var(--wazo-sp-phone-md);
    display: flex;
    flex-direction: column;
    gap: var(--wazo-sp-phone-xs);
}
.wazo-path-card__title {
    font-family: var(--wazo-font-sans);
    font-weight: var(--wazo-font-weight-medium);
    font-size: var(--wazo-fs-display-sm);
    line-height: var(--wazo-lh-display);
    letter-spacing: var(--wazo-ls-display);
    color: var(--wazo-color-text);
    margin: 0;
}
.wazo-path-card__desc {
    font-size: var(--wazo-fs-16);
    line-height: var(--wazo-lh-body);
    letter-spacing: var(--wazo-ls-display);
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}
.wazo-path-card__cta {
    margin-top: auto;
    font-size: var(--wazo-fs-12);
    font-weight: var(--wazo-font-weight-medium);
    letter-spacing: var(--wazo-ls-display);
    color: var(--wazo-color-text);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Gradients exactos del Figma (por card). */
.wazo-path-card--01 .wazo-path-card__body {
    /* Ellipse vertical (radio vertical mayor que horizontal) → eje top-bottom como el handle de Figma. */
    background: radial-gradient(94% 143% at 50% 0%, #9DE2EE 0%, #1587F7 35%, #043CDF 70%, #00F 100%);
}
.wazo-path-card--02 .wazo-path-card__body {
    background: radial-gradient(129.97% 100.04% at 100% 50%, #030AF1 0%, #030AF1 16.38%, #2264EA 53.03%, #4C8DEA 73.06%, #97D5EB 100%);
}
.wazo-path-card--03 .wazo-path-card__body {
    background:
        radial-gradient(112.42% 84.1% at 10.35% 50%, #00F 0%, #043CDF 26.4%, #043CDF 34.8%, #1587F7 71.4%, #9DE2EE 95.11%),
        radial-gradient(102.98% 79.9% at 14.55% 50%, #1E28F7 0%, #0233A7 26.4%, #0233A7 46.05%, #0B6FDC 71.4%, #9DE2EE 95.11%),
        radial-gradient(67.68% 73.6% at 14.71% 50.02%, #0118D6 56%, #08F 100%),
        linear-gradient(90deg, #08F 62.46%, #4FADFF 94.44%);
}

/* Tablet · rompe subgrid · 2-col en vez de 1 (3 cards = 2 arriba + 1 abajo). */
@media (max-width: 1200px) {
    .wazo-home__paths { grid-template-columns: 1fr; row-gap: var(--wazo-sp-phone-lg); }
    .wazo-home__paths-head,
    .wazo-home__paths-grid { grid-column: 1; }
    .wazo-home__paths-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--wazo-grid-gutter);
    }
    /* La 3ª card (impar) ocupa la fila entera. */
    .wazo-path-card:nth-child(3) { grid-column: 1 / -1; }
}
/* Phone · sistema unificado · cards 1-up · gap 16px */
@media (max-width: 639px) {
    .wazo-home__paths {
        grid-template-columns: subgrid;
        column-gap: var(--wazo-grid-gutter-phone);
        row-gap: var(--wazo-sp-phone-md);          /* 24px head → grid */
        padding-block: var(--wazo-sp-phone-lg);    /* 40px */
    }
    .wazo-home__paths-head,
    .wazo-home__paths-grid { grid-column: 1 / -1; }
    .wazo-home__paths-grid {
        grid-template-columns: 1fr;
        gap: var(--wazo-sp-phone-sm);              /* 16px entre cards */
    }
    .wazo-path-card { aspect-ratio: 1 / 1.2; }
    .wazo-path-card__body { padding: var(--wazo-sp-phone-md); }  /* card padding unificado · 24px */
    .wazo-home__paths-head { gap: var(--wazo-sp-phone-sm); }     /* 20 → 16 */
}

/* ============================================
   5 · PLANS — EDU + EDU Lab horizontales
   ============================================ */
/* ============================================
   5 · PLANS · "Para cada momento de tu carrera clinica"
   Migrado al master grid 12-col via subgrid.
   ============================================ */
.wazo-home__plans {
    padding-block: var(--wazo-sp-section-block);
    display: grid;
    grid-template-columns: subgrid;
    column-gap: var(--wazo-grid-gutter);
    row-gap: var(--wazo-sp-section-rowgap);
}

/* Head - eyebrow + titulo en cols 2-8 */
.wazo-home__plans-head {
    grid-column: 2 / 8;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wazo-sp-phone-md);
}
.wazo-home__plans-eyebrow {
    font-size: var(--wazo-fs-14);
    color: var(--wazo-color-text);
    letter-spacing: var(--wazo-ls-display);
    line-height: var(--wazo-lh-none);
    opacity: 0.85;
}
.wazo-home__plans-title {
    font-family: var(--wazo-font-sans);
    font-weight: var(--wazo-font-weight-medium);
    font-size: var(--wazo-fs-display-xl);
    line-height: var(--wazo-lh-display);
    letter-spacing: var(--wazo-ls-display);
    color: var(--wazo-color-text);
    text-wrap: balance;
}
.wazo-home__plans-sub {
    grid-column: 9 / 12;
    align-self: end;
    font-size: var(--wazo-fs-16);
    line-height: var(--wazo-lh-body);
    letter-spacing: var(--wazo-ls-display);
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}
/* /planes/ · el sub va dentro del head (debajo del título, alineado a la
   izquierda). align-self global apunta a la derecha en flex → lo forzamos a la
   izquierda. line-height ajustado por ser párrafo multi-línea bajo el título. */
.wazo-page-planes .wazo-home__plans-sub {
    align-self: flex-start;
    line-height: var(--wazo-lh-body);
}

/* Grid cards - apiladas verticalmente, cols 2-11 */
.wazo-home__plans-grid {
    grid-column: 2 / 12;
    display: flex;
    flex-direction: column;
    gap: var(--wazo-grid-gutter);
}

/* Card individual - horizontal: contenido izq + art dcha */
.wazo-plan-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--wazo-grid-gutter);
    padding: var(--wazo-sp-phone-md);
    border-radius: 16px;
    background: var(--wazo-color-bg);
    border: 1px solid #00A1FF;
    /* sin aspect-ratio: el card crece hasta el bottom del CTA */
}
.wazo-plan-row__inner {
    display: flex;
    flex-direction: column;
    gap: var(--wazo-sp-phone-xs);
    align-items: flex-start;
    min-width: 0;
}
.wazo-plan-row__eyebrow {
    font-size: var(--wazo-fs-12);
    font-weight: var(--wazo-font-weight-regular);
    letter-spacing: var(--wazo-ls-display);
    color: var(--wazo-color-text);
    opacity: 0.85;
    line-height: var(--wazo-lh-none);
}
.wazo-plan-row__title {
    font-family: var(--wazo-font-sans);
    font-weight: var(--wazo-font-weight-medium);
    font-size: var(--wazo-fs-32);
    line-height: var(--wazo-lh-display);
    letter-spacing: var(--wazo-ls-display);
    color: var(--wazo-color-text);
    margin: 0;
}
.wazo-plan-row__desc {
    font-size: var(--wazo-fs-16);
    line-height: var(--wazo-lh-body);
    letter-spacing: var(--wazo-ls-display);
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    max-width: 56ch;
}
.wazo-plan-row__bullets {
    list-style: none;
    padding: 0;
    /* margin-top extra (se suma al gap 12px del inner) para separar la lista
       del texto de arriba (.wazo-plan-row__desc) sin afectar al resto. */
    margin: var(--wazo-sp-phone-sm) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--wazo-sp-phone-sm);
}
.wazo-plan-row__bullets li {
    display: flex;
    align-items: center;
    gap: var(--wazo-sp-phone-xs);
    font-size: var(--wazo-fs-16);
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: var(--wazo-ls-display);
    line-height: var(--wazo-lh-body);
}
.wazo-plan-row__check {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    color: var(--wazo-color-accent);
    font-size: var(--wazo-fs-12);
    flex-shrink: 0;
}
.wazo-plan-row__cta {
    margin-top: var(--wazo-sp-phone-lg);
    display: inline-flex;
    align-items: center;
    gap: var(--wazo-sp-phone-xs);
    min-height: var(--wazo-touch-target);
    padding: 0 var(--wazo-sp-phone-sm);
    border-radius: 4px;
    background: linear-gradient(180deg, #00F 0%, #043CDF 34.6%, #1587F7 69.19%, #9DE2EE 104.84%);
    color: var(--wazo-color-text);
    font-size: var(--wazo-fs-14);
    font-weight: var(--wazo-font-weight-medium);
    letter-spacing: var(--wazo-ls-display);
    text-decoration: none;
}
.wazo-plan-row__art {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--wazo-gradient-primary);
}
.wazo-plan-row__art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--wazo-cta-ease);
}
.wazo-plan-row:hover .wazo-plan-row__art img { transform: scale(1.04); }

/* Tablet · colapsa subgrid · plan-row mantiene 2-col (content + art horizontal). */
@media (max-width: 1200px) {
    .wazo-home__plans { grid-template-columns: 1fr; row-gap: var(--wazo-sp-phone-lg); }
    .wazo-home__plans-head,
    .wazo-home__plans-sub,
    .wazo-home__plans-grid { grid-column: 1; }
    .wazo-home__plans-sub { align-self: auto; }
    .wazo-plan-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--wazo-sp-phone-sm);
        padding: var(--wazo-sp-phone-md);
    }
    .wazo-plan-row__art { min-height: 240px; }
}
/* Phone · sistema unificado · plan-row vuelve a 1 col vertical */
@media (max-width: 639px) {
    .wazo-home__plans {
        grid-template-columns: subgrid;
        column-gap: var(--wazo-grid-gutter-phone);
        row-gap: var(--wazo-sp-phone-md);          /* 24px head → grid */
        padding-block: var(--wazo-sp-phone-lg);    /* 40px */
    }
    .wazo-home__plans-head,
    .wazo-home__plans-sub,
    .wazo-home__plans-grid { grid-column: 1 / -1; }
    .wazo-home__plans-grid { gap: var(--wazo-sp-phone-sm); }   /* 16px entre plan rows */
    .wazo-plan-row {
        grid-template-columns: 1fr;
        padding: var(--wazo-sp-phone-md);           /* card padding unificado · 24px */
    }
    .wazo-plan-row__art { min-height: 180px; }
    .wazo-plan-row__cta {
        margin-top: var(--wazo-sp-phone-md);                   /* 24px desc/bullets → CTA */
        height: var(--wazo-touch-target);                      /* hit area 44px */
        padding: 0 var(--wazo-sp-phone-sm);
    }
    .wazo-home__plans-head { gap: var(--wazo-sp-phone-sm); }   /* 20 → 16 */
    .wazo-plan-row__inner { gap: var(--wazo-sp-phone-xs); }    /* 12 → 8 entre elementos del row */
    /* Texto del row más compacto en phone (16 → 14) */
    .wazo-plan-row__desc,
    .wazo-plan-row__bullets li { font-size: var(--wazo-fs-14); }
}

/* ============================================
   6 · TESTIMONIAL — foto enorme + quote overlay + dots
   ============================================ */
.wazo-home__tm {
    padding-block: var(--wazo-sp-section-block);   /* homogeneizado · antes 32px / 96px hardcode */
    padding-inline: var(--wazo-grid-margin);
}
.wazo-tm { position: relative; }
.wazo-tm__track {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
}
.wazo-tm__card {
    position: absolute;
    inset: 0;
    /* Sin aspect-ratio · hereda las dimensiones del track (inset:0) sea cual sea.
       Antes había 16/9 hardcoded que rompía el track 4/5 de phone. */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s cubic-bezier(0.32, 0.08, 0.24, 1),
                visibility 0s linear 0.5s;
    pointer-events: none;
    cursor: inherit;
}
.wazo-tm__card.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s cubic-bezier(0.32, 0.08, 0.24, 1),
                visibility 0s linear 0s;
    pointer-events: auto;
}
/* Evita el drag nativo de la img (ghost image del browser) */
.wazo-tm__card img,
.wazo-tm__photo img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}
.wazo-tm__photo { position: absolute; inset: 0; }
.wazo-tm__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.wazo-tm__overlay {
    position: absolute;
    left: 0; bottom: 0;
    padding: var(--wazo-sp-phone-md);
    width: var(--wazo-cols-4);     /* ocupa 4 cols del grid 12 */
    max-width: 100%;
    color: var(--wazo-color-text);
}
.wazo-tm__quote {
    font-family: var(--wazo-font-sans);
    font-weight: var(--wazo-font-weight-medium);
    font-size: var(--wazo-fs-32);
    line-height: var(--wazo-lh-body);
    letter-spacing: var(--wazo-ls-display);
    max-width: 56ch;
    margin-bottom: var(--wazo-sp-phone-sm);
}
.wazo-tm__attr {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wazo-tm__role {
    font-size: var(--wazo-fs-12);
    letter-spacing: var(--wazo-ls-display);
    color: rgba(255, 255, 255, 0.75);
}
.wazo-tm__name {
    font-size: var(--wazo-fs-14);
    font-weight: var(--wazo-font-weight-medium);
    letter-spacing: var(--wazo-ls-display);
}
/* Botones de navegacion prev/next · dentro del card, abajo-derecha. */
.wazo-tm__nav {
    position: absolute;
    bottom: var(--wazo-sp-phone-md);
    right: var(--wazo-sp-phone-md);
    z-index: 3;
    display: flex;
    gap: var(--wazo-sp-phone-xs);
}
/* Botón prev/next del carrusel · círculo blanco 32px con glifo de flecha. */
.wazo-tm__btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: var(--wazo-color-text);
    color: var(--wazo-color-bg);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    font-size: 26px;
    font-weight: var(--wazo-font-weight-medium);
    line-height: var(--wazo-lh-none);
    transition:
        background var(--wazo-cta-duration) var(--wazo-cta-ease),
        transform var(--wazo-cta-duration) var(--wazo-cta-ease);
}
.wazo-tm__btn:hover { background: rgba(255, 255, 255, 0.88); }
.wazo-tm__btn:active { transform: scale(0.95); }

/* Dots · patrón Apple home-gallery con progress fill ·
   inactive: círculo gris 8px (hit area 24×24) ·
   active: pill 32×8 (hit area 48×24) con fill blanco animando de izda a dcha
   durante los 8s de autoplay. */
.wazo-tm__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-top: var(--wazo-sp-phone-xs);
    list-style: none;
    padding: 0;
}
.wazo-tm__dot {
    box-sizing: content-box;
    display: block;
    position: relative;
    width: 8px;
    height: 8px;
    padding: 8px;            /* hit area 24×24 · 8px lateral preserva left:8px y la expansión a 32px del activo */
    background: transparent;
    border: 0;
    cursor: pointer;
    user-select: none;
    transition: width 0.4s ease-in-out;
}
.wazo-tm__dot.is-active {
    width: 32px;             /* expande el dot a pill · hit area 48×24 */
    cursor: default;
}
/* Track · círculo cuando inactive, pill cuando active. Mismo tono gris siempre. */
.wazo-tm__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 8px;               /* anclado a la izda del padding */
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.30);
    transition: width 0.4s ease-in-out;
}
.wazo-tm__dot.is-active::before { width: 32px; }
/* Fill blanco · solo en activo, animando de 8 → 32px en 8s (= AUTOPLAY_MS) */
.wazo-tm__dot.is-active::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--wazo-color-text);
    animation: wazo-tm-dot-fill 8s linear forwards;
}
@keyframes wazo-tm-dot-fill {
    from { width: 8px; }
    to   { width: 32px; }
}
/* Respeta reduced motion · sin animación, el active queda como pill llena. */
@media (prefers-reduced-motion: reduce) {
    .wazo-tm__dot,
    .wazo-tm__dot::before { transition: none; }
    .wazo-tm__dot.is-active::after { animation: none; width: 32px; }
}

/* Tablet · slider compacto · padding-inline 0 (borde-a-borde) igual que phone
   para maximizar el ancho de la foto del testimonio. */
@media (max-width: 1200px) {
    .wazo-home__tm { padding-inline: 0; }
    .wazo-tm__overlay {
        width: 100%;                            /* el master grid ya está colapsado */
        padding: var(--wazo-sp-phone-md);
    }
    .wazo-tm__quote { margin-bottom: var(--wazo-sp-phone-sm); }
}
/* Phone · sistema unificado · usa container padding de .wazo-home */
@media (max-width: 639px) {
    .wazo-home__tm {
        padding-inline: 0;
        padding-block: var(--wazo-sp-phone-lg);    /* 40px unificado con el resto */
    }
    .wazo-tm__track { aspect-ratio: 4 / 5; }       /* más vertical en phone */
    .wazo-tm__overlay { padding: var(--wazo-sp-phone-md); }   /* card padding unificado · 24px */
    .wazo-tm__quote { font-size: var(--wazo-fs-16); max-width: none; }
    .wazo-tm__nav { top: var(--wazo-sp-phone-sm); right: var(--wazo-sp-phone-sm); gap: var(--wazo-sp-phone-xs); bottom: auto; }
    .wazo-tm__btn { width: 24px; height: 24px; font-size: 16px; }
}

/* ============================================
   7 · FINAL CTA · movido a footer.css (aparece en todas las páginas vía footer).
   ============================================ */