/* ============================================
   Wazo · single-simulador.css
   Página /simulador/<slug>/ siguiendo el Figma del cliente.

   Scope: body.wazo-single-sim (añadido vía single-simulador.php).
   Master grid: .wazo-main.wazo-sim (compartido con /simuladores/).

   Layout en 5 secciones:
     1. Hero · breadcrumb + título XL + desc + CTA + stats 3+2
     2. Media + Features · imagen 2-col + lista ✓
     3. Descripción · eyebrow + título + texto
     4. Areas + Enfoque · 2-col chips border azul
     5. 3 Cards · ¿Qué incluye? / aprenderá / cómo funciona
   ============================================ */

/* ---- Master grid root (mismo patrón que .wazo-home / .wazo-page-sim) ---- */
.wazo-single-sim .wazo-main.wazo-sim {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--wazo-grid-gutter);
}
.wazo-single-sim .wazo-main.wazo-sim > section,
.wazo-single-sim .wazo-main.wazo-sim > footer {
    grid-column: 1 / -1;
}
@media (max-width: 1200px) {
    .wazo-single-sim .wazo-main.wazo-sim {
        grid-template-columns: 1fr;
        padding-inline: var(--wazo-sp-phone-sm);
    }
}
@media (max-width: 639px) {
    .wazo-single-sim .wazo-main.wazo-sim {
        grid-template-columns: repeat(var(--wazo-grid-cols-phone), 1fr);
        column-gap: var(--wazo-grid-gutter-phone);
        padding-inline: var(--wazo-sp-phone-sm);
    }
}

/* Eyebrow consistente (igual que .wazo-page-sim) */
.wazo-single-sim .wazo-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;
    text-transform: none;
    margin: 0;
    display: inline-block;
}

/* ============================================
   1 · HERO
   ============================================ */
.wazo-single-sim__hero {
    position: relative;
    padding-block: var(--wazo-sp-hero-block);
    display: grid;
    grid-template-columns: subgrid;
    column-gap: var(--wazo-grid-gutter);
    row-gap: var(--wazo-sp-section-rowgap-compact);
}
/* Línea separadora bottom · cols 2-11 (igual que /simuladores/ hero) */
.wazo-single-sim__hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: var(--wazo-grid-margin);
    right: var(--wazo-grid-margin);
    height: 1px;
    background: var(--wazo-color-ui-border);
}

.wazo-single-sim__hero-content {
    grid-column: 2 / span 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wazo-sp-phone-md);
}
.wazo-single-sim__hero-breadcrumb {
    font-size: var(--wazo-fs-12);
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: var(--wazo-ls-display);
    line-height: var(--wazo-lh-none);
    margin: 0;
}
.wazo-single-sim__hero-breadcrumb-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--wazo-cta-duration) var(--wazo-cta-ease);
}
.wazo-single-sim__hero-breadcrumb-link:hover {
    color: var(--wazo-color-text);
}
.wazo-single-sim__hero-breadcrumb-sep {
    margin: 0 4px;
    opacity: 0.6;
}
.wazo-single-sim__hero-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);
    margin: 0;
    text-wrap: balance;
    overflow-wrap: break-word;
}
.wazo-single-sim__hero-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);
    max-width: 36ch;
    margin: 0;
}
.wazo-single-sim__hero-cta-row {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wazo-sp-phone-sm);
}
.wazo-single-sim .wazo-single-sim__hero-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--wazo-sp-phone-xs);
    height: 39px;
    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;
    border: 0;
    box-shadow: none;
    transition:
        transform var(--wazo-cta-duration) var(--wazo-cta-ease),
        filter var(--wazo-cta-duration) var(--wazo-cta-ease);
}
.wazo-single-sim .wazo-single-sim__hero-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}
/* Variante outline · 2º botón (descarga PDF), igual que el --secondary del curso. */
.wazo-single-sim .wazo-single-sim__hero-cta--secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.30);
}
.wazo-single-sim .wazo-single-sim__hero-cta--secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.50);
    filter: none;
}

/* Stats · grid 3-col que naturalmente fluye a 3+2 con 5 stats */
.wazo-single-sim__hero-stats {
    grid-column: 8 / 12;
    align-self: end;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px var(--wazo-sp-phone-md);
}
.wazo-single-sim__hero-stat {
    display: flex;
    flex-direction: column;
    gap: var(--wazo-sp-phone-xs);
}
.wazo-single-sim__hero-stat-num {
    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-none);
    letter-spacing: var(--wazo-ls-display);
    color: var(--wazo-color-text);
}
.wazo-single-sim__hero-stat-lbl {
    font-size: var(--wazo-fs-14);
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: var(--wazo-ls-display);
    line-height: var(--wazo-lh-tight);
    text-transform: capitalize;
}

.wazo-single-sim__hero-stat:first-child .wazo-single-sim__hero-stat-num{
    color: var(--wazo-color-accent);
}


@media (max-width: 1200px) {
    .wazo-single-sim__hero {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }
    .wazo-single-sim__hero::after { left: 0; right: 0; }
    .wazo-single-sim__hero-content,
    .wazo-single-sim__hero-stats { grid-column: 1; }
    .wazo-single-sim__hero-stats { align-self: auto; }
    /* Touch-target: el CTA base mide 39px; en tablet (sin el override phone) se
       eleva a 44px para cumplir el área táctil mínima sin tocar desktop. */
    .wazo-single-sim .wazo-single-sim__hero-cta { min-height: var(--wazo-touch-target); }
}
@media (max-width: 639px) {
    .wazo-single-sim__hero {
        grid-template-columns: subgrid;
        column-gap: var(--wazo-grid-gutter-phone);
        row-gap: var(--wazo-sp-phone-md);
        padding-block: var(--wazo-sp-phone-lg);
    }
    .wazo-single-sim__hero-content,
    .wazo-single-sim__hero-stats { grid-column: 1 / -1; }
    .wazo-single-sim__hero-content { gap: var(--wazo-sp-phone-sm); }
    .wazo-single-sim__hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--wazo-sp-phone-md) var(--wazo-sp-phone-sm); }
    .wazo-single-sim__hero-desc { max-width: 100%; }
    .wazo-single-sim .wazo-single-sim__hero-cta {
        height: var(--wazo-touch-target);
    }
}

/* ============================================
   2 · MEDIA + FEATURES
   ============================================ */
.wazo-single-sim__media {
    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-compact);
}
/* Frame en cols 2-7 (6 cols de ancho) · features en cols 8-12 (alineadas con
   .wazo-single-sim__hero-stats arriba). El gap visual entre frame y features
   es el column-gap (24px) del master grid. */
.wazo-single-sim__media-figure {
    grid-column: 2 / span 6;
    margin: 0;
}
.wazo-single-sim__media-frame {
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    overflow: hidden;
    background: var(--wazo-color-surface);
    position: relative;
}
.wazo-single-sim__media-img,
.wazo-single-sim__media-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wazo-single-sim__media-placeholder {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, #1587F7 0%, #043CDF 45%, #00F 100%);
}

.wazo-single-sim__features {
    grid-column: 8 / 12;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--wazo-sp-phone-md);
}
.wazo-single-sim__features-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;
}
/* Lista de features estilo "specs" del single curso · ✓ + líneas separadoras
   + mismo spacing (gap 10px · padding 8px · texto 16px). Reglas propias del sim
   porque single-curso.css NO se carga en páginas de simulador (enqueue
   condicional) → clonamos las .wazo-single-curso__fp-spec* aquí. */
.wazo-single-sim__features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.wazo-single-sim__features-spec {
    display: flex;
    align-items: flex-start;
    gap: var(--wazo-sp-phone-xs);
    padding: var(--wazo-sp-phone-xs) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.wazo-single-sim__features-spec:last-child { border-bottom: 0; }
.wazo-single-sim__features-check {
    color: var(--wazo-color-accent);
    font-size: var(--wazo-fs-14);
    line-height: var(--wazo-lh-body);
    flex-shrink: 0;
}
.wazo-single-sim__features-text {
    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);
}
.wazo-single-sim__features-text strong {
    font-weight: var(--wazo-font-weight-medium);
    color: var(--wazo-color-text);
    margin-right: 4px;
}

@media (max-width: 1200px) {
    .wazo-single-sim__media {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }
    .wazo-single-sim__media-figure,
    .wazo-single-sim__features { grid-column: 1; }
}
@media (max-width: 639px) {
    .wazo-single-sim__media {
        grid-template-columns: subgrid;
        column-gap: var(--wazo-grid-gutter-phone);
        row-gap: var(--wazo-sp-phone-md);
        padding-block: var(--wazo-sp-phone-lg);
    }
    .wazo-single-sim__media-figure,
    .wazo-single-sim__features { grid-column: 1 / -1; }
    .wazo-single-sim__media-frame { aspect-ratio: 4 / 3; border-radius: 12px; }
    .wazo-single-sim__features-title { font-size: var(--wazo-fs-32); }
}

/* ============================================
   3 · DESCRIPCIÓN DEL PROGRAMA
   ============================================ */
.wazo-single-sim__desc {
    padding-block: var(--wazo-sp-section-block);
    display: grid;
    grid-template-columns: subgrid;
    column-gap: var(--wazo-grid-gutter);
    row-gap: var(--wazo-sp-phone-sm);
}
.wazo-single-sim__desc > .wazo-eyebrow {
    grid-column: 2 / span 8;
    margin: 0;
}
.wazo-single-sim__desc-title {
    grid-column: 2 / span 8;
    font-family: var(--wazo-font-sans);
    font-weight: var(--wazo-font-weight-medium);
    font-size: var(--wazo-fs-display-lg);
    line-height: var(--wazo-lh-display);
    letter-spacing: var(--wazo-ls-display);
    color: var(--wazo-color-text);
    margin: 0;
    text-wrap: balance;
}
.wazo-single-sim__desc-texto {
    grid-column: 2 / span 8;
    font-size: var(--wazo-fs-16);
    line-height: var(--wazo-lh-body);
    letter-spacing: var(--wazo-ls-display);
    color: rgba(255, 255, 255, 0.70);
    max-width: 70ch;
    margin-top: var(--wazo-sp-phone-sm);
}
.wazo-single-sim__desc-texto p { margin: 0 0 var(--wazo-sp-phone-sm); line-height: var(--wazo-lh-body); }
.wazo-single-sim__desc-texto p:last-child { margin-bottom: 0; }

@media (max-width: 1200px) {
    .wazo-single-sim__desc { grid-template-columns: 1fr; }
    .wazo-single-sim__desc > .wazo-eyebrow,
    .wazo-single-sim__desc-title,
    .wazo-single-sim__desc-texto { grid-column: 1; }
}
@media (max-width: 639px) {
    .wazo-single-sim__desc {
        grid-template-columns: subgrid;
        column-gap: var(--wazo-grid-gutter-phone);
        padding-block: var(--wazo-sp-phone-lg);
    }
    .wazo-single-sim__desc > .wazo-eyebrow,
    .wazo-single-sim__desc-title,
    .wazo-single-sim__desc-texto { grid-column: 1 / -1; }
}

/* ============================================
   4 · AREAS + ENFOQUE (2-col chips)
   ============================================ */
.wazo-single-sim__ae {
    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);
}
.wazo-single-sim__ae-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wazo-sp-phone-sm);
}
.wazo-single-sim__ae-col:nth-of-type(1) { grid-column: 2 / span 5; }
/* Columna derecha simétrica a la izquierda (5 cols · cols 7-11) · usa la
   columna-gap 7 que antes quedaba vacía. Sigue terminando en la línea 12
   (no invade el margen col 12). Así el mismo título envuelve igual en ambas. */
.wazo-single-sim__ae-col:nth-of-type(2) { grid-column: 7 / span 5; }
/* Solo una columna presente · ocupa el ancho completo (solo desktop). */
@media (min-width: 1201px) {
    .wazo-single-sim__ae--single .wazo-single-sim__ae-col { grid-column: 2 / span 10; }
}

.wazo-single-sim__ae-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;
    text-wrap: balance;
    max-width: none;
}
.wazo-single-sim__ae-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wazo-sp-phone-xs);
    margin-top: var(--wazo-sp-phone-xs);
}
/* Chip estilo Figma · border azul translúcido, bg transparent, hover bg sutil */
.wazo-single-sim__ae-chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 var(--wazo-sp-phone-sm);
    border-radius: 100px;
    background: transparent;
    border: 1px solid rgba(111, 177, 252, 0.40);
    color: var(--wazo-color-text);
    font-size: var(--wazo-fs-14);
    font-weight: var(--wazo-font-weight-regular);
    line-height: var(--wazo-lh-none);
    letter-spacing: var(--wazo-ls-display);
    white-space: nowrap;
    transition: background var(--wazo-cta-duration) var(--wazo-cta-ease),
                border-color var(--wazo-cta-duration) var(--wazo-cta-ease);
}
/* Sin hover. Columna izquierda (Áreas) · fondo sutil + borde neutro;
   la derecha (Enfoque) mantiene el borde azul de la regla base. */
.wazo-single-sim__ae-col:nth-of-type(1) .wazo-single-sim__ae-chip {
    background: var(--wazo-color-white-3);
    border-color: var(--wazo-color-ui-border);
}

@media (max-width: 1200px) {
    .wazo-single-sim__ae { grid-template-columns: 1fr; row-gap: var(--wazo-sp-phone-lg); }
    .wazo-single-sim__ae-col:nth-of-type(1),
    .wazo-single-sim__ae-col:nth-of-type(2) { grid-column: 1; }
}
@media (max-width: 639px) {
    .wazo-single-sim__ae {
        grid-template-columns: subgrid;
        column-gap: var(--wazo-grid-gutter-phone);
        row-gap: var(--wazo-sp-phone-md);
        padding-block: var(--wazo-sp-phone-lg);
    }
    .wazo-single-sim__ae-col:nth-of-type(1),
    .wazo-single-sim__ae-col:nth-of-type(2) { grid-column: 1 / -1; }
    .wazo-single-sim__ae-col { gap: var(--wazo-sp-phone-sm); }
    .wazo-single-sim__ae-title { font-size: var(--wazo-fs-32); }
}

/* ============================================
   5 · 3 CARDS (¿Qué incluye? / ¿Qué aprenderá? / ¿Cómo funciona?)
   ============================================ */
.wazo-single-sim__cards {
    padding-block: var(--wazo-sp-section-block);
    display: grid;
    grid-template-columns: subgrid;
    column-gap: var(--wazo-grid-gutter);
}
.wazo-single-sim__cards-grid {
    grid-column: 2 / 12;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wazo-grid-gutter);
}
/* Falta 1 card (p. ej. "¿Cómo funciona?"): las 2 restantes reparten el ancho. */
.wazo-single-sim__cards-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wazo-single-sim__cards-grid--cols-1 { grid-template-columns: minmax(0, 1fr); }
.wazo-single-sim__card {
    background: var(--wazo-color-bg);
    border: 1px solid #00A1FF;
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: var(--wazo-sp-phone-md);
}
.wazo-single-sim__card-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;
}

/* Lists dentro de las cards · estilo Figma (mismo que /simuladores/) */
.wazo-single-sim__card .wazo-curso__iaf-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wazo-sp-phone-sm);
}
.wazo-single-sim__card .wazo-curso__iaf-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--wazo-sp-phone-sm);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--wazo-fs-16);
    line-height: var(--wazo-lh-tight);
    letter-spacing: var(--wazo-ls-display);
}
.wazo-single-sim__card .wazo-curso__iaf-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--wazo-color-accent);
    font-size: var(--wazo-fs-16);
    font-weight: var(--wazo-font-weight-medium);
    flex-shrink: 0;
    line-height: var(--wazo-lh-none);
    margin-top: 1px;
}
.wazo-single-sim__card .wazo-curso__iaf-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.30);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--wazo-fs-12);
    font-weight: var(--wazo-font-weight-regular);
    flex-shrink: 0;
    line-height: var(--wazo-lh-none);
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}

@media (max-width: 1200px) {
    .wazo-single-sim__cards { grid-template-columns: 1fr; }
    .wazo-single-sim__cards-grid {
        grid-column: 1;
        grid-template-columns: 1fr;
        gap: var(--wazo-sp-phone-sm);
    }
    .wazo-single-sim__card { padding: var(--wazo-sp-phone-md); }
}
@media (max-width: 639px) {
    .wazo-single-sim__cards {
        grid-template-columns: subgrid;
        column-gap: var(--wazo-grid-gutter-phone);
        padding-block: var(--wazo-sp-phone-lg);
    }
    .wazo-single-sim__cards-grid {
        grid-column: 1 / -1;
        gap: var(--wazo-sp-phone-sm);
    }
    .wazo-single-sim__card { padding: var(--wazo-sp-phone-md); gap: var(--wazo-sp-phone-sm); }
    .wazo-single-sim__card-title { font-size: var(--wazo-fs-32); }
}

/* ================================================================
 * Fin del bloque Single Simulador.
 * ================================================================ */