/* ============================================================================
   neoMemorial — hero-n7.css · EL HERO DE index12, TRASPLANTADO A LA HOME

   Qué es
   ------
   La home vieja y la variante index12 hablan dos idiomas visuales distintos.
   Este archivo trae UNO SOLO de sus bloques —el hero y la tira de cifras— sin
   que el otro idioma se derrame sobre el resto de la página.

   Cómo se aísla
   -------------
   El bloque va envuelto en `<div class="n7 n7-isla">` y TODAS las reglas de
   acá llevan `.n7-isla` adelante. Dos consecuencias buscadas:

   1. Los tokens de index12 (que allá viven en `:root` y repintan el sitio
      entero: `--accent`, `--bg-primary`, `--font-display`, los radios…) acá
      cuelgan de `.n7-isla`. Adentro de la isla mandan; afuera, la home sigue
      con los suyos. Es lo que permite que el hero sea de crema y oro y la
      sección de abajo siga siendo la de siempre.
   2. Reglas de nombre genérico —`.sh-word.negra`, `.hero-badge`, `.v2-btn`—
      no tocan a sus tocayas del resto de la página.

   Cómo se generó
   --------------
   No a mano: se renderizó el fragmento del hero con `index12/index9.css`
   entera y se conservaron las reglas que efectivamente le aplicaban a algún
   elemento (incluidos los estados: `.is-ready`, `.is-in`, `:hover`). Por eso
   el orden de la cascada es el mismo que en index12 y las secciones de
   especificidad de aquel archivo siguen ganando donde tienen que ganar.
   Si el hero de index12 cambia, la forma de actualizar esto es volver a
   correr esa extracción, no editar acá.

   Lo que NO trae
   --------------
   Los @font-face (ya viajan en fuentes.css, dentro del bundle), el shimmer
   base (`.sh-word` y `barrido-infinito` son de index.css) y todo lo que
   index12 pinta fuera del hero.
   ============================================================================ */

.n7-isla #inicio {
    scroll-margin-top: 96px;
}
@media (max-width: 768px) {
    .n7-isla #inicio {
        scroll-margin-top: 78px;
    }
}
.n7-isla .v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.7rem;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.n7-isla .v2-btn--primary {
    background: var(--accent);
    color: rgb(255, 255, 255);
    border-color: var(--accent);
}
.n7-isla .v2-btn--primary:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: rgba(139, 114, 87, 0.32) 0px 8px 20px;
    color: rgb(255, 255, 255);
}
.n7-isla .v2-btn--ghost {
    background: transparent;
    color: var(--accent-dark);
    border-color: rgba(139, 114, 87, 0.45);
}
.n7-isla .v2-btn--ghost:hover {
    background: rgba(139, 114, 87, 0.08);
    border-color: var(--accent);
    transform: translateY(-2px);
    color: var(--accent-dark);
}
.n7-isla .hero.v2-hero {
    max-width: 1200px;
    padding: 4.5rem 2rem 3rem;
    text-align: left;
}
.n7-isla .v2-hero-grid {
    display: grid;
    grid-template-columns: minmax(0px, 1.05fr) minmax(0px, 0.95fr);
    gap: 3rem;
    align-items: center;
}
.n7-isla .v2-hero-text .hero-badge {
    margin-bottom: 1.25rem;
}
.n7-isla .v2-hero-claim {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    font-weight: 500;
    color: var(--accent-dark);
    margin: 0px 0px 0.9rem;
    letter-spacing: 0.01em;
}
.n7-isla .v2-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.n7-isla .v2-hero-visual {
    position: relative;
}
.n7-isla .v2-stage {
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.14) 0px 18px 44px;
    background: var(--bg-secondary);
}
.n7-isla .v2-stage-slide {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.1s;
    will-change: opacity;
}
.n7-isla .v2-stage-slide.active {
    opacity: 1;
}
.n7-isla .v2-stage-caption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    right: 1rem;
    display: grid;
    pointer-events: none;
}
.n7-isla .v2-stage-cap {
    grid-area: 1 / 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.6s, transform 0.6s;
    box-shadow: var(--shadow-sm);
}
.n7-isla .v2-stage-cap.active {
    opacity: 1;
    transform: none;
}
.n7-isla .v2-stage-cap em {
    font-style: normal;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-dark);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-light);
}
.n7-isla .v2-stage-phases {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1rem;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.n7-isla .v2-stage-phases i {
    width: 2.2rem;
    height: 1px;
    background: linear-gradient(90deg, var(--border), var(--accent));
    position: relative;
}
.n7-isla .v2-stage-phases i::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -3px;
    border-width: 3.5px;
    border-style: solid;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-image: initial;
    border-left-color: var(--accent);
}
@media (max-width: 960px) {
    .n7-isla .v2-hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
@media (max-width: 960px) {
    .n7-isla .hero.v2-hero {
        text-align: center;
        padding-top: 3.5rem;
    }
}
@media (max-width: 960px) {
    .n7-isla .v2-hero-ctas {
        justify-content: center;
    }
}
@media (max-width: 960px) {
    .n7-isla .v2-hero-visual {
        max-width: 620px;
        margin: 0px auto;
        width: 100%;
    }
}
@media (max-width: 480px) {
    .n7-isla .v2-hero-ctas .v2-btn {
        width: 100%;
    }
}
.n7-isla .v2-proof {
    padding: 0px 2rem 3.5rem;
}
.n7-isla .v2-proof-list {
    list-style: none;
    margin: 0px auto;
    padding: 1.4rem 1.5rem;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.n7-isla .v2-proof-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.2rem;
    padding: 0.25rem 0.5rem;
}
.n7-isla .v2-proof-list li + li {
    border-left: 1px solid var(--border-light);
}
.n7-isla .v2-proof-list strong {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 500;
    color: var(--accent);
    line-height: 1;
}
.n7-isla .v2-proof-list li > span {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.35;
    max-width: 220px;
}
@media (max-width: 768px) {
    .n7-isla .v2-proof-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 0px;
        padding: 1rem;
    }
}
@media (max-width: 768px) {
    .n7-isla .v2-proof-list li + li {
        border-left: none;
    }
}
@media (max-width: 768px) {
    .n7-isla .v2-proof-list li:nth-child(2n) {
        border-left: 1px solid var(--border-light);
    }
}
@media (prefers-reduced-motion: reduce) {
    .n7-isla .v2-stage-slide, .n7-isla .v2-stage-cap {
        transition: none !important;
    }
}
.n7-isla .v2-proof {
    padding: 0px 2rem 5rem;
}
.n7-isla .v2-proof-list strong {
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 600;
}
.n7-isla .v2-proof-list li > span {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 200px;
    margin-top: 0.35rem;
}
/* `.n9-video-capa` comparte los tokens: la capa del video la cuelga el JS
   de <body>, fuera de la isla, y adentro usa la misma paleta. */
.n7-isla,
.n9-video-capa {
    --n7-cream: #F2EDE4;
    --n7-cream-rgb: 242, 237, 228;
    --n7-cream-deep: #E9E1D3;
    --n7-cream-deep-rgb: 233, 225, 211;
    --n7-paper: #FBF9F5;
    --n7-paper-rgb: 251, 249, 245;
    --n7-ink: #16130F;
    --n7-ink-rgb: 22,  19,  15;
    --n7-ink-2: #575046;
    --n7-ink-2-rgb: 87,  80,  70;
    --n7-ink-3: #6E6559;
    --n7-ink-3-rgb: 110, 101,  89;
    --n7-rule: #DBD2C4;
    --n7-rule-rgb: 219, 210, 196;
    --n7-rule-soft: #E7DFD2;
    --n7-sand: #EAE1D2;
    --n7-sand-rgb: 234, 225, 210;
    --n7-sand-deep: #E2D8C6;
    --n7-sand-deep-rgb: 226, 216, 198;
    --n7-rule-a: #D6CBB6;
    --n7-ink-3a: #665D51;
    --n7-gold-a: #735B42;
    --n7-gold-a-rgb: 115,  91,  66;
    --n7-gold-deep-a: #735B42;
    --n7-gold: #80664A;
    --n7-gold-rgb: 128, 102,  74;
    --n7-gold-deep: #80664A;
    --n7-gold-deep-rgb: 128, 102,  74;
    --n7-gold-lit: #B49574;
    --n7-gold-lit-rgb: 180, 149, 116;
    --n7-gold-soft: #D9CCBF;
    --n7-gold-soft-rgb: 217, 204, 191;
    --n7-gold-wash: #F0EBE5;
    --n7-surface: var(--n7-cream);
    --n7-surface-2: var(--n7-cream-deep);
    --n7-card: var(--n7-paper);
    --n7-ink-1: var(--n7-ink);
    --n7-ink-soft: var(--n7-ink-2);
    --n7-ink-mute: var(--n7-ink-3);
    --n7-line: var(--n7-rule);
    --n7-line-strong: rgba(var(--n7-ink-rgb), .20);
    --n7-accent: var(--n7-gold);
    --n7-accent-text: var(--n7-gold-deep);
    --n7-accent-fill: var(--n7-gold-deep);
    --n7-accent-wash: rgba(var(--n7-gold-rgb), .10);
    --n7-halo: rgba(var(--n7-gold-rgb), .16);
    --n7-on-accent: #FFFFFF;
    --n7-sweep: rgba(var(--n7-ink-rgb), .12);
    --n7-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
    --n7-sans: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --n7-w-wide: 1240px;
    --n7-w: 1120px;
    --n7-w-narrow: 860px;
    --n7-measure: 62ch;
    --n7-gutter: clamp(1.25rem, 5vw, 3rem);
    --n7-ease: cubic-bezier(.22, .61, .36, 1);
    --n7-ease-out: cubic-bezier(.16, 1, .3, 1);
    --n7-el-1: 0 1px 2px rgba(var(--n7-ink-rgb), .05);
    --n7-el-2: 0 2px 6px rgba(var(--n7-ink-rgb), .05), 0 12px 28px rgba(var(--n7-ink-rgb), .08);
    --n7-el-3: 0 4px 12px rgba(var(--n7-ink-rgb), .06), 0 24px 60px rgba(var(--n7-ink-rgb), .11);
    --bg-primary: var(--n7-cream);
    --bg-secondary: var(--n7-paper);
    --bg-tertiary: var(--n7-cream-deep);
    --bg-card: var(--n7-paper);
    --text-primary: var(--n7-ink);
    --text-secondary: var(--n7-ink-2);
    --text-muted: var(--n7-ink-3);
    --accent: var(--n7-gold-deep);
    --accent-dark: var(--n7-gold-deep);
    --accent-light: var(--n7-gold-soft);
    --accent-soft: var(--n7-gold-wash);
    --border: var(--n7-rule);
    --border-light: var(--n7-rule-soft);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --font-display: var(--n7-display);
    --font-body: var(--n7-sans);
    --shadow-sm: var(--n7-el-1);
    --shadow-md: var(--n7-el-2);
    --shadow-lg: var(--n7-el-3);
    --shadow-card: var(--n7-el-1);
}
.n7-isla {
    overflow-x: clip;
}
.n7-isla .n7-act-mark {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    max-width: var(--n7-w);
    margin: 0px auto 2.75rem;
    font-family: var(--n7-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--n7-ink-mute);
}
.n7-isla .n7-act-mark b {
    color: var(--n7-accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.n7-isla .n7-act-mark i {
    flex: 0 0 auto;
    width: 72px;
    height: 1px;
    background: var(--n7-line);
}
.n7-isla, .n7-isla p, .n7-isla li {
    font-family: var(--n7-sans);
}
.n7-isla h1 {
    font-family: var(--n7-display);
}
.n7-isla h1 {
    font-variation-settings: "SOFT" 26;
    font-weight: 400;
}
.n7-isla .v2-hero-claim {
    font-family: var(--n7-display);
    font-weight: 400;
    font-size: clamp(1.15rem, 2vw, 1.6rem);
    line-height: 1.45;
    color: var(--n7-accent-text);
    letter-spacing: -0.01em;
}
.n7-isla .sh-word.negra {
    background-image: linear-gradient(110deg, var(--n7-ink-1) 42%, var(--n7-sweep) 50%, var(--n7-ink-1) 58%);
}
.n7-isla .sh-word.dorada {
    background-image: linear-gradient(110deg, var(--n7-accent) 42%, var(--n7-gold-soft) 50%, var(--n7-accent) 58%);
}
.n7-isla .shimmer-trigger .sh-word {
    font-weight: 400;
}
.n7-isla .v2-proof-list strong {
    font-variant-numeric: tabular-nums;
}
.n7-isla .v2-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 48px;
    padding: 0.9rem 1.75rem;
    font-family: var(--n7-sans);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background .35s var(--n7-ease), color .35s var(--n7-ease),
                border-color .35s var(--n7-ease), transform .35s var(--n7-ease),
                box-shadow .35s var(--n7-ease);
}
.n7-isla .v2-btn::before {
    content: "";
    position: absolute;
    inset: 0px;
    z-index: -1;
    background: linear-gradient(100deg, transparent 20%, rgba(var(--n7-gold-soft-rgb), .5) 50%, transparent 80%);
    transform: translateX(-120%);
    opacity: 0;
    transition: transform .7s var(--n7-ease), opacity .3s ease;
}
.n7-isla .v2-btn:hover::before {
    transform: translateX(120%);
    opacity: 1;
}
.n7-isla .v2-btn--primary {
    background: var(--n7-accent-fill);
    color: var(--n7-on-accent);
    border-color: var(--n7-accent-fill);
}
.n7-isla .v2-btn--primary:hover {
    background: var(--n7-accent-fill);
    color: var(--n7-on-accent);
    border-color: var(--n7-accent-fill);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px var(--n7-halo);
}
.n7-isla .v2-btn--primary:active {
    transform: translateY(0px);
    box-shadow: 0 3px 10px var(--n7-halo);
}
.n7-isla .v2-btn--ghost {
    background: transparent;
    color: var(--n7-accent-text);
    border-color: var(--n7-line-strong);
}
.n7-isla .v2-btn--ghost:hover {
    background: var(--n7-accent-wash);
    color: var(--n7-accent-text);
    border-color: var(--n7-accent);
    transform: translateY(-2px);
}
.n7-isla .v2-btn--ghost:active {
    transform: translateY(0px);
}
.n7-isla .hero.v2-hero {
    position: relative;
    isolation: isolate;
    max-width: none;
    width: 100%;
    padding: clamp(3.5rem, 8vw, 7rem) var(--n7-gutter) clamp(3rem, 6vw, 5rem);
    background: var(--n7-cream);
}
.n7-isla .v2-hero-grid {
    max-width: var(--n7-w-wide);
    margin: 0px auto;
    grid-template-columns: minmax(0px, 1.05fr) minmax(0px, 0.95fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.n7-isla .n7-h1 {
    font-family: var(--n7-display);
    font-size: clamp(3rem, 8.6vw, 7.25rem);
    font-weight: 400;
    line-height: 0.94;
    letter-spacing: -0.035em;
    color: var(--n7-ink);
    margin: 0px 0px 1.5rem;
    font-variation-settings: "SOFT" 22;
}
.n7-isla .n7-h1 .n7-line {
    display: block;
    overflow: hidden;
}
.n7-isla .n7-h1 .n7-line > span {
    display: block;
    padding-bottom: 0.16em;
    transform: translateY(112%);
    clip-path: inset(0px 0px 100%);
}
.n7-isla .n7-h1 .n7-line + .n7-line {
    margin-top: -0.16em;
}
.n7-isla .v2-hero .n7-h1 .n7-line > span {
    animation: n7-rise 1.1s var(--n7-ease-out) forwards;
}
.n7-isla .v2-hero .n7-h1 .n7-line:nth-child(2) > span {
    animation-delay: 0.13s;
}
.n7-isla .v2-hero-claim {
    max-width: 22ch;
    margin: 0px 0px 2rem;
}
.n7-isla .v2-hero-ctas {
    gap: 0.85rem;
}
.n7-isla .v2-hero .hero-badge {
    background: transparent;
    border: 0px;
    padding: 0px;
    margin-bottom: 1.5rem;
}
.n7-isla .v2-hero .hero-badge-text {
    font-family: var(--n7-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--n7-ink-3);
}
.n7-isla .v2-hero .hero-badge svg {
    width: 15px;
    height: 15px;
    color: var(--n7-gold);
}
.n7-isla .v2-stage {
    border-radius: var(--radius-lg);
    box-shadow: var(--n7-el-3);
}
.n7-isla .v2-stage-cap {
    background: rgba(var(--n7-paper-rgb), .94);
    font-family: var(--n7-sans);
    font-weight: 600;
    font-size: 0.88rem;
}
.n7-isla .v2-stage-cap em {
    background: var(--n7-gold-wash);
    border-color: var(--n7-gold-soft);
    color: var(--n7-gold-deep);
}
.n7-isla .v2-stage-phases {
    font-family: var(--n7-sans);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--n7-ink-3);
}
/* LA ENTRADA DEL HERO YA NO ESPERA AL JAVASCRIPT.
   Antes estas reglas colgaban de `.v2-hero.is-ready`, y esa clase la pone
   hero-n7.js. O sea: todo el hero arrancaba en `opacity: 0` y no aparecía
   hasta que el bundle se bajaba, parseaba y ejecutaba. En escritorio eso pasa
   en centésimas y no se nota; en un móvil el bundle tarda ~2 s en arrancar
   («bootup time» de Lighthouse), y recién ahí empezaban los 0,48 s de retardo
   más 0,8 s de animación. Resultado: LCP de 4,2 s en móvil contra 0,7 s en
   escritorio, y el elemento LCP terminaba siendo la banderita del selector de
   idioma, que era lo único visible temprano.

   Son animaciones CSS puras (`animation … forwards`), no transiciones, así que
   no necesitan un estado inicial puesto desde JS: corren solas apenas se
   aplica el CSS. Quitado el gate, el hero empieza a pintarse con el primer
   frame en vez de esperar al bundle. La animación se ve igual.

   hero-n7.js sigue agregando `is-ready` (lo usa para otras cosas); simplemente
   ya no es lo que dispara esto. */
.n7-isla .n7-in {
    opacity: 0;
    transform: translateY(16px);
}
.n7-isla .v2-hero .n7-in {
    animation: n7-in .8s var(--n7-ease-out) forwards;
}
.n7-isla .v2-hero .n7-in[data-d="1"] {
    animation-delay: 0.3s;
}
.n7-isla .v2-hero .n7-in[data-d="2"] {
    animation-delay: 0.39s;
}
.n7-isla .v2-hero .n7-in[data-d="3"] {
    animation-delay: 0.48s;
}
.n7-isla .v2-proof {
    padding: 0 var(--n7-gutter) clamp(3rem, 7vw, 6rem);
    background: var(--n7-cream);
}
.n7-isla .v2-proof-list {
    background: transparent;
    border-right: 0px;
    border-bottom: 0px;
    border-left: 0px;
    border-image: initial;
    border-top: 1px solid var(--n7-rule);
    border-radius: 0px;
    box-shadow: none;
    padding: 2.25rem 0px 0px;
    max-width: var(--n7-w-wide);
}
.n7-isla .v2-proof-list li + li {
    border-left: 1px solid var(--n7-rule);
}
.n7-isla .v2-proof-list strong {
    font-family: var(--n7-display);
    font-weight: 300;
    font-size: clamp(2.6rem, 5vw, 4rem);
    color: var(--n7-ink);
    letter-spacing: -0.03em;
}
.n7-isla .v2-proof-list li > span {
    font-family: var(--n7-sans);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--n7-ink-3);
}
.n7-isla .n7-rv {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s var(--n7-ease-out), transform .8s var(--n7-ease-out);
}
.n7-isla .n7-rv.is-in {
    opacity: 1;
    transform: none;
}
@media (max-width: 960px) {
    .n7-isla .hero.v2-hero {
        text-align: left;
    }
}
@media (max-width: 960px) {
    .n7-isla .v2-hero-claim {
        margin-left: 0px;
        margin-right: 0px;
    }
}
@media (max-width: 960px) {
    .n7-isla .v2-hero-ctas {
        justify-content: flex-start;
    }
}
@media (max-width: 960px) {
    .n7-isla .n7-h1 {
        font-size: clamp(2.9rem, 11vw, 4.6rem);
    }
}
@media (max-width: 768px) {
    .n7-isla .n7-act-mark {
        margin-bottom: 2rem;
    }
}
@media (max-width: 768px) {
    .n7-isla .n7-act-mark i {
        width: 40px;
    }
}
@media (max-width: 600px) {
    .n7-isla .n7-h1 {
        font-size: 2.65rem;
        letter-spacing: -0.03em;
    }
}
@media (max-width: 600px) {
    .n7-isla .v2-hero-ctas .v2-btn {
        width: 100%;
    }
}
@media (max-width: 600px) {
    .n7-isla .v2-proof-list {
        padding-top: 1.6rem;
    }
}
@media (max-width: 600px) {
    .n7-isla .v2-proof-list li + li {
        border-left: none;
    }
}
@media (max-width: 600px) {
    .n7-isla .v2-proof-list li:nth-child(2n) {
        border-left: 1px solid var(--n7-rule);
    }
}
@media (prefers-reduced-motion: reduce) {
    .n7-isla .n7-rv, .n7-isla .n7-h1 .n7-line > span, .n7-isla .n7-in {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        animation: auto ease 0s 1 normal none running none !important;
        transition: none !important;
    }
}
.n7-isla .n7-h1 {
    font-size: clamp(3rem, 8.6vw, 7.25rem);
    font-weight: 400;
    line-height: 0.94;
    letter-spacing: -0.035em;
    margin: 0px 0px calc(-0.16em + 1.5rem);
    color: var(--n7-ink);
}
.n7-isla .n7-h1 .n7-line > span {
    color: var(--n7-ink);
}
.n7-isla .n7-h1 .sh-word {
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.n7-isla .v2-hero-claim {
    font-family: var(--n7-display);
    font-weight: 400;
    font-size: clamp(1.15rem, 2vw, 1.6rem);
    line-height: 1.45;
    color: var(--n7-accent-text);
    letter-spacing: -0.01em;
}
.n7-isla .hero-badge {
    background: transparent;
    border: 0px;
    box-shadow: none;
    padding: 0px;
}
.n7-isla .v2-hero-ctas .v2-btn--primary {
    background: var(--n7-accent-fill);
    color: var(--n7-on-accent);
}
.n7-isla .v2-proof-list strong {
    font-family: var(--n7-display);
    font-weight: 300;
    font-size: clamp(2.6rem, 5vw, 4rem);
    color: var(--n7-ink);
}
@media (max-width: 960px) {
    .n7-isla .n7-h1 {
        font-size: clamp(2.9rem, 11vw, 4.6rem);
    }
}
@media (max-width: 600px) {
    .n7-isla .n7-h1 {
        font-size: 2.65rem;
    }
}
.n7-isla .n7-h1 {
    font-size: clamp(2.6rem, 7.6vw, 6.5rem);
}
.n7-isla .v2-hero-grid {
    align-items: end;
}
.n7-isla .v2-hero-text {
    max-width: 38ch;
}
.n7-isla .v2-hero-claim {
    margin: 0px 0px 2rem;
    max-width: 20ch;
}
@media (max-width: 960px) {
    .n7-isla .n7-h1 {
        font-size: clamp(2.5rem, 9.5vw, 4.2rem);
    }
}
@media (max-width: 960px) {
    .n7-isla .v2-hero-grid {
        align-items: start;
    }
}
@media (max-width: 600px) {
    .n7-isla .n7-h1 {
        font-size: 2.45rem;
    }
}
.n7-isla .n7-h1 {
    max-width: none;
}
.n7-isla .hero.v2-hero {
    padding-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
.n7-isla .v2-hero-grid {
    align-items: center;
}
.n7-isla .v2-hero-text {
    max-width: 44ch;
}
.n7-isla .v2-hero-text {
    max-width: 34rem;
}
@media (max-width: 960px) {
    .n7-isla .v2-hero-grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
}
@media (max-width: 960px) {
    .n7-isla .v2-hero-text {
        max-width: none;
    }
}
@media (max-width: 960px) {
    .n7-isla .v2-hero-visual {
        max-width: 620px;
        width: 100%;
        margin: 0px auto;
    }
}
@media (max-width: 960px) {
    .n7-isla .v2-hero-claim {
        max-width: none;
    }
}
.n7-isla .v2-stage-cap {
    max-width: calc(100% - 1.5rem);
}
@media (max-width: 600px) {
    .n7-isla .v2-stage-cap {
        font-size: 0.78rem;
        padding: 0.4rem 0.75rem;
        gap: 0.4rem;
    }
}
@media (max-width: 600px) {
    .n7-isla .v2-stage-cap em {
        font-size: 0.6rem;
    }
}
@media (max-width: 600px) {
    .n7-isla .v2-stage-phases {
        font-size: 0.62rem;
        letter-spacing: 0.12em;
    }
}
@media (max-width: 600px) {
    .n7-isla .v2-hero-ctas .v2-btn {
        width: 100%;
    }
}
.n7-isla .v2-hero-claim.n9-claim {
    max-width: 30ch;
    margin: 0px 0px 2.1rem;
}
.n7-isla .n9-claim > span {
    display: block;
}
.n7-isla .n9-claim-l1, .n7-isla .n9-claim-l2 {
    font-family: var(--n7-display);
    font-weight: 400;
    font-size: clamp(1.3rem, 2.15vw, 1.8rem);
    line-height: 1.24;
    letter-spacing: -0.02em;
    color: var(--n7-ink-1);
    text-wrap: balance;
}
.n7-isla .n9-claim-l1 em {
    font-style: normal;
    color: var(--n7-accent-text);
}
.n7-isla .n9-claim-l2 {
    margin-top: 0.1rem;
}
.n7-isla .n9-claim-l3 {
    font-family: var(--n7-sans);
    font-weight: 500;
    font-size: clamp(0.92rem, 1.15vw, 1.02rem);
    line-height: 1.5;
    letter-spacing: 0.005em;
    color: var(--n7-ink-mute);
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--n7-line);
    text-wrap: balance;
}
@media (max-width: 960px) {
    .n7-isla .v2-hero-claim.n9-claim {
        max-width: none;
    }
}
@media (max-width: 600px) {
    .n7-isla .n9-claim-l1, .n7-isla .n9-claim-l2 {
        font-size: 1.28rem;
    }
}
.n7-isla .v2-stage-phases {
    flex-wrap: wrap;
    row-gap: 0.35rem;
}
@media (max-width: 600px) {
    .n7-isla .v2-stage-phases {
        gap: 0.45rem;
    }
}
@media (max-width: 600px) {
    .n7-isla .v2-stage-phases i {
        width: 1.4rem;
    }
}
.n7-isla .v2-hero-grid {
    grid-template-columns: minmax(0px, 1.15fr) minmax(0px, 0.85fr);
    align-items: center;
}
.n7-isla .v2-hero-text {
    max-width: none;
}
.n7-isla .n7-h1 {
    font-size: clamp(2.05rem, 4.3vw, 3.7rem);
    letter-spacing: -0.03em;
}
.n7-isla .v2-hero-text .n7-h1 {
    margin-bottom: calc(-0.16em + 1.75rem);
}
.n7-isla .v2-hero-text .hero-badge {
    margin-bottom: 1.1rem;
}
@media (max-width: 1180px) and (min-width: 961px) {
    .n7-isla .v2-hero-grid {
        grid-template-columns: minmax(0px, 1fr) minmax(410px, 0.85fr);
        gap: 2.5rem;
    }
}
@media (max-width: 1180px) and (min-width: 961px) {
    .n7-isla .n7-h1 {
        font-size: clamp(2.05rem, 3.9vw, 3.1rem);
    }
}
@media (max-width: 960px) {
    .n7-isla .v2-hero-grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
}
@media (max-width: 960px) {
    .n7-isla .n7-h1 {
        font-size: clamp(2.3rem, 7.4vw, 3.4rem);
    }
}
@media (max-width: 600px) {
    .n7-isla .n7-h1 {
        font-size: 2.3rem;
    }
}

/* --- los dos keyframes propios del bloque --- */
@keyframes n7-rise { 
  100% { transform: translateY(0px); clip-path: inset(-0.22em 0px); }
}
@keyframes n7-in { 
  100% { opacity: 1; transform: none; }
}

/* ============================================================================
   PRUEBA SOCIAL · «Las familias no saben que detrás está neoMemorial»

   Segundo bloque traído de index12 (allá es la sección «05 · Por qué confiar»),
   con el mismo criterio que el hero: va envuelto en su propia `.n7 .n7-isla`
   y TODAS las reglas de acá llevan `.n7-isla` adelante. Los tokens de index12
   ya los declara el bloque de arriba, así que adentro de esta isla las
   tarjetas heredan la paleta crema y oro sin que se derrame a la home.

   Vive DENTRO de `.filter-section`, donde antes estaba el panel chico de
   reseñas al lado del CEM. Eso no es casual: `updateSectionBackgrounds()` en
   index.js recorre `filterSection.nextElementSibling` mientras sea
   `.category-section` para alternar los fondos, y un hermano nuevo entre medio
   cortaba ese recorrido y despintaba Funerales, Cementerios y + Experiencias.
   Adentro de la sección, el recorrido sigue intacto.

   El fondo es el de index12: la arena. La isla lleva `.n7-arena` además de
   `.n7-isla` y redefine los mismos ocho tokens que `.n7-cierre` —superficie,
   regla, gris del marcador y las cuatro variantes del oro—, así que las
   tarjetas blancas de las reseñas se recortan contra la arena y el oro del
   marcador y de los puntos pasa a la variante honda.

   Lo que había que resolver era el ancho. La isla vive dentro de
   `.filter-section`, que trae `padding: 3rem 2rem`: un fondo pintado ahí
   adentro quedaría como un rectángulo flotando. Por eso la franja se sale del
   padding con márgenes negativos (-2rem a los costados y -3rem abajo, que es
   donde termina la sección: esta isla es su último hijo) y lo repone como
   padding propio, así llega de lado a lado y cierra contra el borde de abajo.

   El único detalle extra es la regla ultra-wide de index.css —`.filter-section
   > *` capado a 1400px y centrado, para que los CONTENIDOS no se estiren—: la
   isla es hija directa, así que arriba de 1401px habría quedado con la arena
   capada a 1400px y blanco a los costados. Se la exime, y el contenido sigue
   centrado igual porque `.v2-inner` ya tiene su propio ancho.

   Las tarjetas (`.review-card`, `.review-avatar`, `.review-stars`…) ya existen
   en home.css: las usa el modal de reseñas. Acá solo se ajusta lo que cambia
   dentro de la isla.
   ============================================================================ */

.n7-isla .v2-section {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 0;
    background: transparent;
    border-top: 0;
    border-bottom: 0;
}

/* ---------- la franja de arena ---------- */
.n7-isla.n7-arena {
    --n7-surface:     var(--n7-sand);
    --n7-line:        var(--n7-rule-a);
    --n7-ink-mute:    var(--n7-ink-3a);
    --n7-accent:      var(--n7-gold-a);
    --n7-accent-text: var(--n7-gold-deep-a);
    --n7-accent-fill: var(--n7-gold-deep-a);
    --n7-accent-wash: rgba(var(--n7-gold-a-rgb), .12);
    --n7-halo:        rgba(var(--n7-gold-a-rgb), .18);

    background: var(--n7-surface);
    margin: 0 -2rem -3rem;
    padding: clamp(2.5rem, 6vw, 4.5rem) 2rem clamp(3rem, 6vw, 4.5rem);
}

/* El bloque de arriba —la tarjeta del Plan Lite+— también va sobre la arena,
   así la franja ocupa el BLOQUE ENTERO del plan y la tarjeta flota encima
   (como en index12). Hereda de `.n7-isla.n7-arena` la superficie, los tokens
   de oro y el sangrado lateral; acá solo cambia el eje vertical: sangra hacia
   ARRIBA (-3rem come el padding-top de `.filter-section`, así la arena llega
   al tope del bloque) y cierra a ras abajo (margin y padding-bottom 0) contra
   la isla de reseñas, que sigue trayendo su propio padding-top como aire entre
   la tarjeta y las reseñas. */
.n7-isla.n7-arena--top {
    margin-top: -3rem;
    margin-bottom: 0;
    /* Ya NO va `padding-bottom: 0`. Antes la isla de reseñas seguía siendo
       arena y las dos se leían como una sola franja, así que ésta cerraba a
       ras. Ahora las reseñas van sin arena, de modo que este bloque es el
       único con fondo y necesita su propio aire abajo: el que trae
       `.n7-isla.n7-arena`. */
}
/* El aire de arriba lo pone ahora la franja, no la sección. */
.n7-isla.n7-arena .v2-section {
    padding-top: 0;
}
/* Ver el último párrafo del comentario de arriba. */
@media (min-width: 1401px) {
    .filter-section > .n7-isla.n7-arena {
        max-width: none;
        margin-left: -2rem;
        margin-right: -2rem;
    }
}
.n7-isla .v2-inner {
    max-width: var(--n7-w);
    margin: 0 auto;
}

/* El marcador de acto («05 — POR QUÉ CONFIAR») centrado: la variante lateral
   ya está más arriba, esto solo lo acomoda al medio y le acorta la rayita. */
.n7-isla .n7-act-mark--center {
    justify-content: center;
    margin-bottom: 2rem;
}
.n7-isla .n7-act-mark--center i {
    max-width: 56px;
}

/* El titular. Es un <p> porque no compite con el h2 de las secciones de
   experiencias, pero se ve como un titular: de ahí la display y el tamaño. */
.n7-isla .v2-resenas-intro {
    max-width: 820px;
    margin: 0 auto 2.75rem;
    text-align: center;
}
.n7-isla .v2-resenas-pre {
    margin: 0;
    font-family: var(--n7-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 3.2vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
}
.n7-isla .v2-resenas-pre.is-gold {
    margin-bottom: 1rem;
}
/* `.sh-word` hereda el 600 de la home; acá el peso lo da la Playfair. */
.n7-isla .v2-resenas-pre .sh-word {
    font-weight: 400;
}

/* ---------- el carrusel de reseñas ----------
   Seis reseñas rotando, tres a la vista en escritorio. El Swiper lo arma
   initResenasSwiper() en index.js. Hasta que eso pasa —o si Swiper no
   cargara— el .swiper-wrapper es un flex normal y se ven las primeras en
   fila: nada queda oculto ni apilado. */
.n7-isla .v2-resenas-carrusel {
    /* La tarjeta activa lleva sombra; sin este aire, overflow:hidden la corta. */
    padding: 0.5rem 0.25rem 1rem;
    overflow: hidden;
}
/* Todas a la misma altura, la de la más larga de las que están a la vista.
   Swiper le pone una altura fija a cada slide solo con autoHeight; sin eso,
   el stretch del flex hace el trabajo. */
.n7-isla .v2-resenas-carrusel .swiper-slide {
    height: auto;
    display: flex;
}
.n7-isla .v2-resenas-carrusel .review-card {
    width: 100%;
}

/* Los puntos. Mismo tamaño y colores que los del coverflow de experiencias
   (ver coverflow.css), para que los dos carruseles de la home se lean igual. */
.n7-isla .v2-resenas-dots {
    position: static;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.n7-isla .v2-resenas-dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0;
    background: rgba(var(--n7-ink-rgb), 0.22);
    opacity: 1;
    transition: background 0.3s ease, width 0.3s ease;
}
.n7-isla .v2-resenas-dots .swiper-pagination-bullet-active {
    background: var(--n7-accent);
    width: 22px;
    border-radius: 4px;
}

/* `.filter-section` centra todo su contenido; la reseña se lee alineada. */
.n7-isla .review-card {
    text-align: left;
    background: var(--n7-paper);
    border: 1px solid var(--n7-line);
    border-radius: var(--radius-md);
    box-shadow: var(--n7-el-1);
    padding: 1.4rem 1.5rem;
}
.n7-isla .review-name {
    font-family: var(--n7-sans);
    color: var(--n7-ink);
}
.n7-isla .review-date {
    color: var(--n7-ink-3);
}
.n7-isla .review-text {
    color: var(--n7-ink-2);
    line-height: 1.6;
}

/* El pie: firma de Google a la izquierda, botón al modal a la derecha. Sin
   caja propia —solo una línea arriba—, que es como quedó en index12. */
.n7-isla .v2-resenas-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Antes esto era «firma a la izquierda, botón a la derecha». El botón se
       fue con el modal, así que la firma queda sola: al medio. */
    justify-content: center;
    gap: 1rem;
    margin-top: 1.75rem;
    padding: 1rem 0 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--n7-line);
    border-radius: 0;
}
.n7-isla .v2-resenas-google {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--n7-display);
    font-weight: 500;
    color: var(--n7-ink);
}
@media (max-width: 640px) {
    .n7-isla .v2-resenas-foot {
        justify-content: center;
        text-align: center;
    }
}


/* ============================================================================
   CHARLAS — la sección «Conferencias y Charlas», trasplantada de index12
   (allá es el bloque 20 de index9.css). La ficha se lee de izquierda a
   derecha: un gesto —el disco de play— y, cruzando una regla fina, el texto.
   El video no vive en la ficha: se abre en una capa encima de la página, y su
   iframe se monta al apretar play y se desmonta al cerrar (ver hero-n7.js).

   Las reglas de la ficha van prefijadas con `.n7-isla`, como todo lo de este
   archivo. Las de la capa NO: el JS la cuelga de <body>, fuera de la isla, y
   por eso `.n9-video-capa` figura arriba, junto a `.n7-isla`, en el bloque de
   tokens.

   Del bloque 12 de index9.css no se trae nada: ni el fondo, ni el padding de
   `.content-section`, ni la tipografía del encabezado. La isla empieza recién
   en la grilla de fichas, así que el título de la sección sigue siendo el de
   la home vieja y la sección sigue pegando con las de arriba y abajo.
   ============================================================================ */
.n7-isla .n9-charlas { gap: clamp(1rem, 2vw, 1.75rem); align-items: stretch; }

.n7-isla .n9-charla {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: clamp(1.1rem, 2.2vw, 1.9rem);
    padding: clamp(1.35rem, 2.4vw, 1.9rem);
    background: var(--n7-card);
    border: 1px solid var(--n7-line);
    border-radius: var(--radius-md);
    box-shadow: var(--n7-el-1);
    transition: border-color .25s ease, box-shadow .25s ease;
}
/* la ficha entera es zona de play: el cursor lo dice antes que el clic */
.n7-isla .n9-charla:hover { border-color: var(--n7-gold-soft); box-shadow: var(--n7-el-2); }

/* ---- 20.2 el play ----
   Un disco y un rótulo. El disco arranca lavado —es una invitación, no un
   botón de acción— y recién al pasar por encima se llena de oro. El
   triángulo se corre un pelo a la derecha: centrado geométricamente se ve
   corrido a la izquierda. */
.n7-isla .n9-charla-play {
    display: flex; flex-direction: column; align-items: center;
    gap: .62rem;
    width: clamp(80px, 8.5vw, 100px);
    padding: 0; border: 0; background: none;
    font: inherit; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.n7-isla .n9-charla-disc {
    display: grid; place-items: center;
    width: clamp(56px, 5.6vw, 70px); aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid var(--n7-gold-soft);
    background: var(--n7-accent-wash);
    color: var(--n7-accent-text);
    transition: background-color .25s ease, border-color .25s ease,
                color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.n7-isla .n9-charla-disc svg { width: 40%; height: 40%; margin-left: .1em; display: block; }
.n7-isla .n9-charla-ver {
    font-family: var(--n7-sans); font-size: .67rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; text-align: center;
    line-height: 1.3; color: var(--n7-ink-mute);
    transition: color .25s ease;
}
.n7-isla .n9-charla-play:hover .n9-charla-disc, 
.n7-isla .n9-charla-play:focus-visible .n9-charla-disc, 
.n7-isla .n9-charla:hover .n9-charla-disc {
    background: var(--n7-accent-fill);
    border-color: var(--n7-accent-fill);
    color: #fff;
    transform: scale(1.05);
}
.n7-isla .n9-charla-play:hover .n9-charla-ver, 
.n7-isla .n9-charla-play:focus-visible .n9-charla-ver, 
.n7-isla .n9-charla:hover .n9-charla-ver { color: var(--n7-accent-text); }
/* el foco de teclado no se ve con el anillo del navegador sobre un círculo:
   se lo dibuja la propia ficha, con el halo del sistema */
.n7-isla .n9-charla-play:focus { outline: none; }
.n7-isla .n9-charla-play:focus-visible .n9-charla-disc { box-shadow: 0 0 0 5px var(--n7-halo); }

/* ---- 20.3 el texto, cruzando la regla ---- */
.n7-isla .n9-charla-texto {
    min-width: 0;
    border-left: 1px solid var(--n7-line);
    padding-left: clamp(1.1rem, 2.2vw, 1.8rem);
}
.n7-isla .n9-charla-donde {
    display: flex; align-items: center; flex-wrap: wrap; gap: .55rem;
    margin: 0 0 .5rem;
    font-family: var(--n7-sans); font-size: .69rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--n7-accent-text);
}
/* el hilo que separa el evento del país es un ::before del país y no un
   elemento suelto: así, cuando el rótulo tiene que partirse en dos renglones,
   el hilo baja con la palabra en vez de quedar colgando al final de la línea */
.n7-isla .n9-charla-donde span::before {
    content: ''; display: inline-block; vertical-align: middle;
    width: 14px; height: 1px; margin-right: .55rem;
    background: currentColor; opacity: .5;
}
.n7-isla .n9-charla-titulo {
    margin: 0 0 .55rem;
    font-family: var(--n7-display); font-weight: 400;
    font-size: clamp(1.06rem, 1.5vw, 1.26rem); line-height: 1.22;
    letter-spacing: -.01em; color: var(--n7-ink-1);
    text-wrap: balance;
}
.n7-isla .n9-charla-desc {
    margin: 0;
    font-family: var(--n7-sans); font-size: .91rem; line-height: 1.6;
    color: var(--n7-ink-soft);
}

/* En celular la ficha no se apila: el play sigue a la izquierda —es lo que
   pidió la maqueta y es lo que hace que la fila se lea de un vistazo—, solo
   se achica. */
@media (max-width: 560px) {
    .n7-isla .n9-charla { gap: .95rem; padding: 1.15rem; }
    .n7-isla .n9-charla-play { width: 62px; gap: .45rem; }
    .n7-isla .n9-charla-disc { width: 50px; }
    .n7-isla .n9-charla-ver { font-size: .58rem; letter-spacing: .1em; }
    .n7-isla .n9-charla-texto { padding-left: .95rem; }
    .n7-isla .n9-charla-desc { font-size: .88rem; }
}

/* ---- 20.4 la capa del video ----
   El iframe se monta recién al apretar play y se desmonta al cerrar: nada de
   YouTube viaja con la página. El título va arriba a la izquierda y el cierre
   arriba a la derecha, donde la mano lo busca.
   El velo es claro, no negro: esta página es de papel crema de punta a punta,
   y una cortina de tinta al 90% la apagaba entera para mostrar un rectángulo.
   Ahora es el mismo papel a media opacidad y bien desenfocado —la página
   sigue ahí, fuera de foco— y el contraste lo pone el video, que es lo único
   oscuro de la pantalla. El desenfoque tiene que ser generoso (24px): con
   poco, el fondo claro compite con el video en vez de retirarse. */
.n9-video-capa {
    position: fixed; inset: 0; z-index: 4000;
    display: grid; place-items: center;
    padding: clamp(1rem, 4vw, 2.5rem);
    background: rgba(var(--n7-paper-rgb), .82);
    -webkit-backdrop-filter: blur(24px) saturate(1.15);
    backdrop-filter: blur(24px) saturate(1.15);
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility 0s linear .28s;
}
.n9-video-capa.abierta { opacity: 1; visibility: visible; transition-delay: 0s; }
.n9-video-marco { width: min(1100px, 100%); }
.n9-video-barra {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: .8rem;
}
.n9-video-titulo {
    margin: 0; min-width: 0;
    font-family: var(--n7-display); font-weight: 400;
    font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.3;
    color: var(--n7-ink-1);
}
.n9-video-cerrar {
    flex: 0 0 auto;
    display: inline-grid; place-items: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: none; border: 1px solid var(--n7-line-strong);
    color: var(--n7-ink-soft);
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.n9-video-cerrar svg { width: 17px; height: 17px; display: block; }
.n9-video-cerrar:hover,
.n9-video-cerrar:focus-visible {
    background: var(--n7-accent-fill);
    border-color: var(--n7-accent-fill);
    color: #fff;
}
.n9-video-caja {
    position: relative; aspect-ratio: 16 / 9;
    background: #000; border-radius: var(--radius-md); overflow: hidden;
    /* sobre un velo claro el negro flota: la sombra profunda lo apoya */
    box-shadow: var(--n7-el-3), 0 0 0 1px rgba(var(--n7-ink-rgb), .12);
    transform: translateY(12px) scale(.99);
    transition: transform .28s ease;
}
.n9-video-capa.abierta .n9-video-caja { transform: none; }
.n9-video-caja iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* con la capa abierta la página de atrás no se mueve */
body.n9-video-abierto { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .n7-isla .n9-charla, .n7-isla .n9-charla-disc, .n7-isla .n9-charla-ver, 
    .n9-video-capa, .n9-video-caja, .n9-video-cerrar { transition: none; }
    .n7-isla .n9-charla-play:hover .n9-charla-disc, 
    .n7-isla .n9-charla:hover .n9-charla-disc { transform: none; }
    .n9-video-caja { transform: none; }
}


/* ============================================================================
   CIERRE — el CTA «06 · Empecemos», trasplantado de index12 (allá es el
   bloque «13 — CTA FINAL» de index9.css). Va último en la home, después de
   Exposiciones y antes del footer.

   Dos cosas propias de este bloque, además del prefijo `.n7-isla` de siempre:

   1. `.n7-cierre` hace de `.n7-arena` de index12 sin traerlo entero. Allá esa
      clase redefine la lista completa de tokens; acá alcanza con los ocho que
      de verdad cambian entre la crema y la arena —la superficie, la regla, el
      gris del marcador y las cuatro variantes del oro—, porque el resto ya
      los declara `.n7-isla` unas líneas más arriba. Va con doble clase
      (`.n7-isla.n7-cierre`) para ganarle a esa declaración, que es igual de
      específica y viene antes.

   2. Los cortes. En index12 son hermanos de la sección y van de crema a arena
      y de vuelta; acá viven DENTRO de la isla, entre secciones de la home
      vieja, así que los extremos son los colores de la home: el gris de
      `.content-section` (--bg-tertiary, #F5F5F5) arriba y el blanco del
      footer (--bg-secondary) abajo. Están escritos literales a propósito:
      adentro de la isla esas dos variables valen otra cosa (crema y papel),
      y lo que tiene que empatar es el color de afuera.

   `.n7-isla .v2-section` —del bloque de reseñas— le sacaría el fondo y le
   dejaría padding solo arriba, así que `.v2-section.v2-final` lo repone con
   dos clases para ganarle.
   ============================================================================ */

.n7-isla.n7-cierre {
    --n7-surface:     var(--n7-sand);
    --n7-line:        var(--n7-rule-a);
    --n7-ink-mute:    var(--n7-ink-3a);
    --n7-accent:      var(--n7-gold-a);
    --n7-accent-text: var(--n7-gold-deep-a);
    --n7-accent-fill: var(--n7-gold-deep-a);
    --n7-accent-wash: rgba(var(--n7-gold-a-rgb), .12);
    --n7-halo:        rgba(var(--n7-gold-a-rgb), .18);
}

/* ---------- los dos cortes ---------- */
.n7-cierre .n7-cut {
    position: relative;
    height: clamp(72px, 9vw, 128px);
    background: linear-gradient(to bottom, var(--n7-from), var(--n7-to));
}
/* la línea de oro que baja al medio y marca el cambio de acto */
.n7-cierre .n7-cut::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1px;
    height: 34%;
    background: linear-gradient(to bottom, transparent, var(--n7-gold-a));
    opacity: .55;
}
.n7-cierre .n7-cut--entra { --n7-from: #F5F5F5;          --n7-to: var(--n7-sand); }
.n7-cierre .n7-cut--sale  { --n7-from: var(--n7-sand);   --n7-to: #FFFFFF; }

/* ---------- la sección ---------- */
.n7-isla .v2-section.v2-final {
    background: var(--n7-surface);
    padding: clamp(4rem, 9vw, 7.5rem) var(--n7-gutter);
}
.n7-isla .v2-center { text-align: center; }

/* El marcador «06 — EMPECEMOS»: la variante centrada ya está en el bloque de
   reseñas, acá solo se acorta el margen de abajo porque el titular es grande
   y no necesita tanto aire. */
.n7-isla.n7-cierre .n7-act-mark--center { margin-bottom: 1.75rem; }

/* El titular. Las reglas base de index12 para `.v2-title` viajan acá porque
   la home no las tiene; las comparte con el titular de la trayectoria, que es
   el otro `.v2-title` de la página (bloque «TRAYECTORIA», más abajo). */
.n7-isla .v2-title {
    font-family: var(--n7-display);
    font-weight: 400;
    font-size: clamp(1.85rem, 3.2vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--n7-ink-1);
    margin: 0 0 1rem;
    text-wrap: balance;
}
.n7-isla .v2-title--big {
    font-size: clamp(2.35rem, 5.4vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -0.028em;
}
/* `.sh-word` hereda el 600 de la home; acá el peso lo da la Playfair. */
.n7-isla .v2-title .sh-word { font-weight: 400; }

/* ---------- los dos botones ---------- */
.n7-isla .v2-final-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 2rem;
}
.n7-isla .v2-btn--lg {
    min-height: 56px;
    padding: 1.05rem 2.3rem;
    font-size: 1.02rem;
}
@media (max-width: 600px) {
    .n7-isla .v2-final-ctas .v2-btn { width: 100%; }
}


/* ============================================================================
   TRAYECTORIA — «23+ años junto al sector» y la línea 2002 → 2026,
   trasplantado de index12 (allá, el bloque «12 · trayectoria» de index9.css).
   Va entre Quiénes Somos y las charlas.

   Casi todo ya había llegado con los trasplantes anteriores: `.n7-isla
   .v2-section` (bloque de reseñas) le saca el fondo y le fija el ancho, y
   `.v2-title` / `.v2-title--big` vinieron con el CTA del cierre. Lo propio de
   acá es la línea de tiempo, y dos ajustes de aire:

   * El padding vertical se anula. La sección de afuera es una
     `.content-section` de la home, que ya pone sus 4rem arriba y abajo; el
     `padding-top` que `.n7-isla .v2-section` trae de las reseñas se sumaba a
     eso y abría un hueco enorme entre el título y Conferencias.
   * `.v2-head` no existe en la home —en index12 es la caja de encabezado de
     todas las secciones—, así que se declara acá, con el ancho angosto de la
     isla en lugar de los 780px fijos de allá.
   ============================================================================ */

.n7-isla .v2-section.v2-trayectoria {
    padding: 0;
}
.n7-isla .v2-head {
    max-width: var(--n7-w-narrow);
    margin: 0 auto clamp(1.5rem, 3.5vw, 2.5rem);
    text-align: center;
}

/* ---------- la línea de tiempo ---------- */
.n7-isla .v2-timeline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    max-width: 640px;
    margin: 0 auto;
}
.n7-isla .v2-timeline-year {
    font-family: var(--n7-display);
    font-weight: 300;
    font-size: clamp(1.5rem, 3.4vw, 2.4rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--n7-ink-mute);
    font-variant-numeric: tabular-nums;
}
/* El año de la derecha es el presente: se lo lleva el oro. */
.n7-isla .v2-timeline-year.is-now {
    color: var(--n7-accent-text);
}
.n7-isla .v2-timeline-line {
    flex: 1;
    height: 1px;
    min-width: 60px;
    background: linear-gradient(90deg, var(--n7-line), var(--n7-accent));
}


/* ============================================================================
   EQUIPO — «Las personas detrás de neoMemorial», trasplantado de index12
   (allá es el bloque «13 — EQUIPO» de index9.css). Quinta isla de la home,
   después del hero, las reseñas, las charlas y el cierre; como todas, sus
   reglas van prefijadas con `.n7-isla` y los tokens ya los declara el bloque
   del hero.

   El fondo no se escribe acá. `.about-section` de index.css se pinta con
   `--bg-tertiary`, y la isla mapea ese token al crema hondo: por eso en el
   HTML la sección perdió `alt-bg` en vez de ganar una regla nueva.

   Lo que sí cambia de forma, respecto de la sección vieja:

   - La foto. Era un rectángulo de esquinas blandas con borde de 3px en color
     acento y sombra media. Ahora es un círculo con una regla fina, sin sombra
     —el mismo gesto que las fichas de charlas y premios—. El `border-radius`
     va en el marco Y en la imagen: si va en uno solo quedan las dos formas
     peleando, con cuatro esquinas de aire entre el círculo y el marco.
   - El cargo. Era una pastilla beige (`--accent-soft`, padding y radio de
     6px): otra cajita en una página que en todo lo demás usa reglas y aire.
     Ahora es texto en versalitas, como los marcadores de acto.
   - El título. Playfair en 400, del tamaño de los h2 de index12, no la
     Playfair en 500 de la home vieja.
   - El margen de arriba de `.team-section`. Valía 4rem porque separaba al
     equipo de las tarjetas de valores; sin ellas, era un hueco sin nada que
     separar.
   ============================================================================ */

.n7-isla .about-section {
    padding: clamp(3.5rem, 7vw, 6rem) var(--n7-gutter) clamp(4rem, 8vw, 7rem);
}
.n7-isla .about-content,
.n7-isla .team-section,
.n7-isla .team-grid {
    max-width: var(--n7-w);
    margin-left: auto;
    margin-right: auto;
}
.n7-isla .team-section {
    margin-top: 0;
}
.n7-isla .team-header .section-title-small {
    font-family: var(--n7-sans);
    letter-spacing: 0.18em;
    color: var(--n7-ink-mute);
}
.n7-isla .team-header h3 {
    font-family: var(--n7-display);
    font-weight: 400;
    font-size: clamp(1.85rem, 3.2vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--n7-ink-1);
    margin-top: 0.35rem;
    margin-bottom: 0;
}
.n7-isla .team-name {
    font-family: var(--n7-display);
    font-weight: 400;
    font-size: 1.15rem;
    color: var(--n7-ink-1);
}
.n7-isla .team-role {
    font-family: var(--n7-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--n7-ink-mute);
    background: none;
    padding: 0;
    border-radius: 0;
}
.n7-isla .team-photo {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    border: 1px solid var(--n7-line);
    box-shadow: none;
    background: var(--n7-card);
}
.n7-isla .team-photo img {
    border-radius: 50%;
}
.n7-isla .team-member:hover .team-photo {
    border-color: var(--n7-gold-soft);
    transform: translateY(-3px);
    box-shadow: var(--n7-el-1);
}
/* La regla de celular de index.css (0,1,0) le pierde a `.n7-isla .team-photo`
   (0,2,0), así que se repite acá para que la foto se siga achicando sola en
   vez de desbordar la columna. */
@media (max-width: 640px) {
    .n7-isla .team-photo {
        width: min(140px, 100%);
        height: auto;
        aspect-ratio: 1;
    }
    .n7-isla .team-grid .team-member:first-child .team-photo {
        width: 140px;
    }
}


/* ============================================================================
   PLAN LITE+ — «Empiece hoy», trasplantado de index12 (allá es el bloque
   «10 PLAN LITE+» de index9.css, más los retoques de la capa n7). Sexta isla
   de la home, en el lugar que dejó el panel CEM, arriba de las reseñas y
   adentro de la misma `.filter-section` que ellas —por el recorrido de
   `updateSectionBackgrounds()`, explicado en el bloque de arriba—.

   Los tokens ya los declara el bloque del hero; acá van solo las reglas de la
   tarjeta, todas con `.n7-isla` adelante.

   Dos cosas se apartan de index12 a propósito:

   - El fondo. Allá la sección es `.n7-arena` y la tarjeta se recorta contra
     la arena honda. Acá `.filter-section` ya es blanca y las reseñas de abajo
     tampoco pintan fondo: pintar una franja crema entre dos blancos, con los
     2rem de costado de la sección, dejaría un rectángulo flotando. La isla se
     queda transparente y el papel de la tarjeta hace el recorte.
   - Las pastillas. En index12 son `--bg-secondary`, que dentro de `.n7-arena`
     vale arena honda (#E2D8C6). Fuera de la arena ese token es el mismo papel
     de la tarjeta y las pastillas desaparecerían, así que acá toman el crema
     hondo del acto de luz (#E9E1D3): el mismo gesto, un tono más claro.
   ============================================================================ */

/* `.n7-isla .v2-section` (bloque de reseñas) deja padding solo arriba. Acá es
   al revés: la sección ya trae sus 3rem de aire y lo que hace falta es
   separación con el marcador «05» que viene abajo. */
/* Sin aire blanco abajo: la franja de arena de la isla de reseñas —que es
   el hermano siguiente— arranca pegada al borde inferior de la tarjeta, así
   la arena queda debajo del card y no queda un rectángulo blanco entre medio.
   El respiro entre la tarjeta y el contenido de reseñas lo pone el
   padding-top de `.n7-isla.n7-arena`. */
.n7-isla .v2-section.v2-lite {
    padding: 0;
}

/* ---------- la tarjeta ---------- */
.n7-isla .v2-lite-card {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2.5rem 2.5rem 2.25rem;
    text-align: center;
    /* Todas las tarjetas del carrusel van al mismo alto (lo fija
       igualarAlturaPlanislas en index.js). La cabecera —badge «Empiece hoy»,
       nombre y precio— queda anclada ARRIBA para que caiga a la misma altura en
       todos los planes; la cadena de modulos absorbe el alto sobrante (regla de
       .v2-lite-chain), asi el pie —condiciones y botones— cae al ras abajo,
       tambien parejo entre planes. */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: var(--n7-paper);
    border: 1px solid var(--n7-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--n7-el-2);
    transition: transform .4s var(--n7-ease), box-shadow .4s var(--n7-ease), border-color .4s var(--n7-ease);
}

/* ---------- el carrusel de planes ----------
   La isla del Plan Lite+ es un Swiper: van apareciendo Lite+, CRM, Pro, Max y
   Ultra, uno a la vez. Autoplay + flechas + puntos (init en index.js,
   initPlanislasSwiper). Cada plan es un `.v2-lite-card` dentro de un
   `.swiper-slide`; la tarjeta ya se centra sola. */
.n7-isla .v2-lite-carrusel { position: relative; }
.n7-isla .v2-lite-stage { position: relative; }
/* overflow visible: con fade los slides estan apilados (no se deslizan), asi
   que no hay vecino que ocultar, y la sombra de la tarjeta ya no se corta
   contra el borde del carrusel. */
.n7-isla .v2-lite-swiper { overflow: visible; }
.n7-isla .v2-lite-swiper .swiper-slide { height: auto; }

/* flechas ‹ › a los costados; en pantallas anchas caen sobre la arena, fuera
   de la tarjeta (que mide 1000px y va centrada). */
.n7-isla .v2-lite-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; margin: 0;
    border-radius: 999px;
    background: var(--n7-paper);
    color: var(--n7-accent-text);
    border: 1px solid var(--n7-line);
    box-shadow: var(--n7-el-2);
    font-family: var(--n7-display);
    font-size: 1.7rem; line-height: 1;
    cursor: pointer;
    transition: background-color .25s var(--n7-ease), color .25s var(--n7-ease),
                box-shadow .25s var(--n7-ease), transform .25s var(--n7-ease);
}
.n7-isla .v2-lite-nav:hover {
    background: var(--n7-accent-fill);
    color: var(--n7-on-accent);
    box-shadow: var(--n7-el-3);
}
.n7-isla .v2-lite-nav:focus-visible { outline: 2px solid var(--n7-accent-fill); outline-offset: 2px; }
.n7-isla .v2-lite-prev { left: 0; }
.n7-isla .v2-lite-next { right: 0; }
@media (min-width: 1024px) {
    .n7-isla .v2-lite-prev { left: 8px; }
    .n7-isla .v2-lite-next { right: 8px; }
}
/* En movil no hay flechas: se pasa con el dedo y con los puntos. */
@media (max-width: 640px) {
    .n7-isla .v2-lite-nav { display: none; }
}

/* puntos abajo, en flujo, dorados como el resto de la home */
.n7-isla .v2-lite-dots.swiper-pagination {
    position: static;
    margin-top: 1.6rem;
    display: flex; gap: 0.45rem; justify-content: center;
}
.n7-isla .v2-lite-dots .swiper-pagination-bullet {
    width: 8px; height: 8px; margin: 0 !important;
    background: var(--n7-ink-mute); opacity: .45;
    transition: all .3s var(--n7-ease);
}
.n7-isla .v2-lite-dots .swiper-pagination-bullet-active {
    background: var(--n7-accent-fill); opacity: 1;
    width: 22px; border-radius: 4px;
}

/* pastilla «Incluye Plan X» al inicio de la cadena de los planes que heredan
   otro plan (Pro, Max, Ultra). Sale del relleno lleno de las pastillas y va
   con borde punteado, para que se lea como "trae todo esto, y ademas...". */
.n7-isla .v2-lite-incluye {
    background: transparent;
    border-style: dashed;
    color: var(--n7-ink-mute);
    font-weight: 500;
}
.n7-isla .v2-lite-incluye .plan-ref { color: var(--n7-accent-text); font-weight: 600; }

/* ---------- el encabezado: badge, nombre, precio ---------- */
/* El badge lo pinta home.css (Playfair 1.5rem, negro); adentro de la isla
   baja de tamaño, porque el protagonista es el precio. */
.n7-isla .v2-lite-head .esencial-banner-badge {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--n7-display);
    font-weight: 400;
    font-size: clamp(1.05rem, 1.9vw, 1.25rem);
    color: var(--n7-ink-mute);
}
.n7-isla .v2-lite-head .v2-title--big {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    margin-bottom: 0.25rem;
}
.n7-isla .v2-lite-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.75rem 0 0;
    font-size: 1.15rem;
    color: var(--n7-ink-soft);
}
.n7-isla .v2-lite-price strong {
    font-family: var(--n7-display);
    font-weight: 300;
    font-size: clamp(3rem, 7vw, 5.25rem);
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--n7-ink-1);
    font-variant-numeric: tabular-nums;
}
.n7-isla .v2-lite-desde {
    font-family: var(--n7-sans);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--n7-ink-3);
}
.n7-isla .v2-lite-mes {
    font-size: 1.05rem;
    color: var(--n7-ink-mute);
}
.n7-isla .v2-lite-bill {
    margin: 0.35rem 0 0;
    font-family: var(--n7-sans);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--n7-ink-mute);
}

/* ---------- la cadena de módulos ---------- */
.n7-isla .v2-lite-chain {
    list-style: none;
    margin: 1.75rem 0 1.25rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* Absorbe el alto sobrante del carrusel y centra sus filas ahi, para que la
       cabecera de arriba y el pie de abajo queden a la misma altura entre planes,
       aunque uno tenga ocho modulos y otro tres. */
    flex: 1 1 auto;
    align-content: center;
    gap: 0.5rem 0.35rem;
}
.n7-isla .v2-lite-chain li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.n7-isla .v2-lite-item {
    display: inline-block;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: var(--n7-cream-deep);
    border: 1px solid var(--n7-line);
    box-shadow: none;
    font-family: var(--n7-display);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--n7-ink-1);
}
.n7-isla .v2-lite-plus {
    font-family: var(--n7-display);
    font-size: 1.3rem;
    line-height: 1;
    color: var(--n7-accent);
}

/* ---------- condiciones y botones ---------- */
.n7-isla .v2-lite-conds {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.88rem;
    color: var(--n7-ink-soft);
}
.n7-isla .v2-lite-conds span::before {
    content: '✓ ';
    color: var(--n7-accent);
    font-weight: 700;
}
.n7-isla .v2-lite-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

@media (hover: hover) and (pointer: fine) {
    .n7-isla .v2-lite-card:hover {
        border-color: var(--n7-line-strong);
        box-shadow: var(--n7-el-3);
    }
}
@media (max-width: 640px) {
    .n7-isla .v2-lite-card { padding: 1.75rem 1.25rem; }
    .n7-isla .v2-lite-ctas .v2-btn { width: 100%; }
}


/* ============================================================================
   EVIDENCIA · RECONOCIMIENTOS Y EXPOSICIONES EN UN SOLO BLOQUE
   (index12: «21 · LA EVIDENCIA, EN UN SOLO BLOQUE»)

   Los premios y las ferias eran dos secciones seguidas —dos cabeceras, dos
   fondos alternados— para contar media historia cada una. Ahora son las dos
   mitades de un mismo bloque, y lo único que las separa es el aire y un
   sub-marcador.

   De index12 viaja SOLO el sub-marcador, envuelto en su isla; la grilla de
   premios y el carrusel de ferias siguen con el estilo de la home (index.css).
   Por eso acá hay tres reglas y nada más:

   1. El aire entre las mitades: más chico que el que separa dos secciones
      (el padding de sección, 4rem) y más grande que el de una grilla a su
      título.
   2. El marcador sin número —no abre un acto, abre una mitad— con el hilo
      más corto que el de los actos (48px contra 72px).
   3. El ancho: `.n7-isla .n7-act-mark` se centra en `--n7-w` (1120px), que es
      la medida de index12; acá arriba y abajo todo se centra en los 1200px de
      la home, así que se repone esa medida para que el marcador quede a plomo
      con la cabecera, los premios y el carrusel.
   ============================================================================ */

.n9-evidencia-expos {
    margin-top: clamp(2.75rem, 5.5vw, 4.25rem);
}
.n7-isla .n7-act-mark--sub {
    max-width: 1200px;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.n7-isla .n7-act-mark--sub i {
    width: 48px;
    max-width: 48px;
}

@media (max-width: 700px) {
    .n9-evidencia-expos { margin-top: 2.5rem; }
    .n7-isla .n7-act-mark--sub { margin-bottom: 1.35rem; }
}

/* ============================================================================
   INDEX2 · BADGE DEL HERO Y BLOQUE DE CIFRAS
   ----------------------------------------------------------------------------
   Se traen tal cual los dos estilos de /index2/ (index2.css + la base de
   index.css) que quedaron marcados: la píldora del badge y la tarjeta blanca
   de las cifras. El contenido de index.php no se toca —el marcador «01 ·
   neoMemorial en cifras» y los textos siguen igual—, solo cambia la
   presentación. Va al final del archivo porque los bloques n7 anteriores
   redefinen estas mismas reglas y acá gana el último.
   ============================================================================ */

/* --- 1. Badge del hero: píldora, no volanta en versalitas --- */
.n7-isla .v2-hero .hero-badge,
.n7-isla .v2-hero-text .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--accent-soft);
    color: var(--accent-dark);
    padding: 0.5rem 1rem;
    border: 1px solid var(--accent-light);
    border-radius: 50px;
    box-shadow: none;
    margin-bottom: 1.25rem;
}
.n7-isla .v2-hero .hero-badge-text {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--accent-dark);
}
.n7-isla .v2-hero .hero-badge svg {
    width: 16px;
    height: 16px;
    color: currentColor;
}

/* --- 2. Cifras: tarjeta blanca con borde, radio y sombra --- */
.n7-isla .v2-proof-list {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.4rem 1.5rem;
    max-width: 1200px;
    gap: 1rem;
}
.n7-isla .v2-proof-list li + li {
    border-left: 1px solid var(--border-light);
}
.n7-isla .v2-proof-list strong {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: normal;
    color: var(--accent);
}
.n7-isla .v2-proof-list li > span {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.35;
    max-width: 220px;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .n7-isla .v2-proof-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 0;
        padding: 1rem;
    }
    .n7-isla .v2-proof-list li + li { border-left: none; }
    .n7-isla .v2-proof-list li:nth-child(2n) { border-left: 1px solid var(--border-light); }
}

/* En mobile la píldora se ajusta como en el resto del sitio (ver home.css):
   texto corrido centrado y radio más chico. Se repone acá porque la regla de
   arriba es más específica que la de home.css y si no la tapaba. */
@media (max-width: 600px) {
    .n7-isla .v2-hero .hero-badge,
    .n7-isla .v2-hero-text .hero-badge {
        max-width: 18rem;
        border-radius: 18px;
        padding: 0.5rem 1rem;
    }
    .n7-isla .v2-hero .hero-badge-text {
        font-size: 0.72rem;
        line-height: 1.4;
        text-align: center;
        text-wrap: balance;
    }
    .n7-isla .v2-hero .hero-badge svg { flex: 0 0 auto; width: 14px; height: 14px; }
}