/* Copiado de destiny-web main@3890fd2 · demo V3.4: src/demo/v21/scenes.css. No editar: se sobrescribe con tools/sync-demo.mjs. */
/* =====================================================================================================
   scenes.css · Estilos de las ESCENAS de la V3 (componentes de src/demo/v21/scenes.jsx).
   Los tokens (--navy, --sand, --r…) y la base global están en v3.css; este archivo se carga DESPUÉS.

   Índice (cada bloque lleva el nombre del componente que lo usa):
     1. FactsScene ........ escena oscura de fichas (portada, Ubicación, Ciudad del Deporte, Contacto antes)
     2. StatementSection .. apertura con frase que se tiñe e imagen a todo el ancho
     3. FolderSection ..... carpetas apiladas (solo portada)
     4. CardCarousel ...... carrusel de tarjetas de color (Zonas comunes)
     5. QualityDirectory .. directorio con menú lateral y panel oscuro (Viviendas · Calidades)
     6. StepCards ......... pasos en tarjetas claras (Contacto)
     7. ImageCards ........ tarjetas con imagen (Viviendas · Personalización)
     8. IndexRows ......... filas de índice (Recursos)
     9. MosaicGrid ........ mosaico de tarjetas (Ciudad del Deporte)
    10. Tonos ............. variables de color compartidas por tarjetas, paneles y carpetas (data-tone)
    11. FeatureCards ...... tarjetas destacadas sueltas
    12. BleedScene ........ foto a sangre con tarjeta encima
    13. NearbyBento ....... lugares cercanos en paneles de color
    14. TypeList .......... lista tipográfica
    15. LinkCards ......... enlaces como tarjetas grandes
    16. CtaBand ........... cierre «hablemos»
    17. FolderAccordion ... carpetas plegables
    18. Carrusel guiado ... modo guiado por scroll (parte de CardCarousel)
    19. Tipologías ........ pestañas siempre visibles
    20. TopicCards ........ temas en tarjetas con borde de color (portada)
    21. NumberedRows ...... filas con numerales grandes (portada)
    22. ReassureDuo ....... lista de preparación + tranquilidad (Contacto)
    23. TopicDirectory .... menú lateral + bloques de texto largo (Ciudad del Deporte)
    24. TypeList · etiquetas  chips de instalaciones por item
   ===================================================================================================== */

/* ===== 1. FactsScene: panel oscuro con fichas que suben ====================================================
   El contenedor (.v3-pin) mide 300vh SOLO cuando el script está activo ([style*="--p"]); dentro, el panel (.v3-stage)
   queda fijo mientras las fichas suben una a una. En móvil, pantallas bajas o con "reducir movimiento": sin fijado. */
.v21-stat-section{background:none;color:#fff;border-radius:0;margin:clamp(20px,4vw,56px) 0;padding:0} /* Contenedor sin fondo: el panel lo pinta. */
.v3-stage{width:var(--band-w);margin:0 auto;border-radius:var(--r);background:var(--navy);padding:clamp(28px,4vw,64px);display:grid;grid-template-rows:auto 1fr;grid-auto-rows:auto;gap:clamp(24px,4vw,56px)} /* Panel oscuro: titular, fichas y enlaces. */
.v21-stat-section h2{color:#fff;max-width:22ch} /* Titular en blanco. */
.v21-stat-section .v21-section-copy{max-width:none} /* El bloque de titular ocupa todo el panel. */
.v21-stats{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin:0;align-self:end} /* Rejilla de fichas: --cols las fija Stats() en sceneParts.jsx. */
.v21-stats article{--e:clamp(0,calc(var(--p,1) * 3.4 - var(--i,0) * .55),1);position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(18px,3vh,34px);min-height:0;padding:clamp(20px,2vw,28px);border:1px solid rgba(255,255,255,.16);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));transform:translate3d(0,calc((1 - var(--e)) * (150px + var(--i,0) * 34px)),0);opacity:var(--e)} /* Ficha: --e (0 a 1) = su avance, escalonado por --i; sube y aparece. */
.v21-stats article::before{content:"";position:absolute;inset:-1px -1px auto -1px;height:3px;border-radius:20px 20px 0 0;background:var(--tag,var(--sky))} /* Filo de color arriba de la ficha. */
.v21-stats article:nth-child(1){--tag:var(--sky)} /* Color de la ficha 1. */
.v21-stats article:nth-child(2){--tag:var(--sun)} /* Color de la ficha 2. */
.v21-stats article:nth-child(3){--tag:var(--sand)} /* Color de la ficha 3. */
.v21-stats article:nth-child(4){--tag:var(--mint)} /* Color de la ficha 4. */
.v21-stats .v21-stat-label{display:inline-flex;width:fit-content;margin:0;padding:7px 14px;border-radius:999px;font-size:11px;letter-spacing:.1em;color:var(--navy);background:var(--tag,var(--sky))} /* Etiqueta en píldora del color de la ficha. */
.v21-stats h3{font-size:clamp(1.3rem,1.9vw,1.75rem);line-height:1.14;letter-spacing:-.03em;color:#fff;margin:0 0 12px} /* Título de la ficha. */
.v21-stats p{font-size:clamp(.92rem,1vw,1rem);line-height:1.6;color:rgba(255,255,255,.78);margin:0} /* Texto de la ficha. */
.v3-stage .v21-section-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,3vw,48px);align-items:end} /* Titular a la izquierda y texto a la derecha. */
.v3-stage-text p{color:rgba(255,255,255,.8);font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.65;margin:0 0 12px;max-width:36em} /* Párrafos del panel. */
.v3-stage .v21-section-links{margin:0} /* Enlaces al pie, sin margen extra. */
.v3-stage .v2-text-link{color:#fff;border-color:rgba(255,255,255,.4)} /* Enlaces blancos sobre fondo oscuro. */
.v21-stats article>div{margin-top:0} /* El texto va justo debajo de la etiqueta: todos los títulos quedan a la misma altura (Elisa, 16/10). */
.v21-stats .v3-nolabel{min-height:0} /* Fichas sin etiqueta: sin altura mínima. */
.v3-pin[style*="--p"]{scroll-margin-top:-70vh} /* Los enlaces #ancla a una escena fijada aterrizan ya dentro del recorrido. */
@media(min-width:1001px) and (min-height:760px) and (max-height:1800px) and (prefers-reduced-motion:no-preference){ /* Fijado solo en pantallas anchas, con altura suficiente (no recorta texto), sin ventanas gigantes (renderizadores de buscadores) y sin «reducir movimiento» (H-53: evita un recorrido de scroll vacío). */
 .v3-pin[style*="--p"]{height:min(300vh,3000px)} /* Contenedor alto: da el recorrido de scroll (con tope de 3.000 px). */
 .v3-pin[style*="--p"] .v3-stage{position:sticky;top:80px;min-height:min(calc(100vh - 96px),820px)} /* El panel se queda fijo bajo la cabecera; sin altura fija ni recorte: si el texto es largo, el panel crece (Elisa, 16/10: «no termina el párrafo»). */
}
@media(min-width:1001px) and (max-height:759px){.v3-pin .v21-stats article{transform:none;opacity:1}} /* Pantallas anchas pero bajas (portátiles): sin fijado ni animación; las fichas se ven completas. */
@media(max-width:1000px){ /* Tablet y móvil: fichas apiladas, sin fijado ni animación. */
 .v21-stats{grid-template-columns:repeat(2,minmax(0,1fr))} /* Dos columnas. */
 .v21-stats article{min-height:0;justify-content:flex-start;gap:clamp(18px,3vw,28px);transform:none;opacity:1} /* Visibles desde el inicio. */
 .v3-stage .v21-section-copy{grid-template-columns:1fr} /* Titular y texto en una columna. */
}
@media(max-width:640px){.v21-stats{grid-template-columns:1fr}.v3-stage{border-radius:20px}} /* Móvil: una columna y radio menor. */
@media(prefers-reduced-motion:reduce){.v21-stats article{transform:none;opacity:1}} /* Sin movimiento: fichas siempre visibles. */

/* ===== 2. StatementSection: apertura con frase que se tiñe ==================================================== */
.v3-statement .v21-section-inner{display:block;text-align:center} /* Contenido centrado. */
.v3-statement .v21-section-copy{max-width:none} /* Sin límite de ancho del bloque. */
.v3-statement h2{margin-inline:auto;max-width:26ch} /* Titular centrado. */
.v3-statement .v3-reveal{margin:clamp(20px,3vw,36px) auto 0;font-size:clamp(1.5rem,2.5vw,2.3rem)} /* Frase grande (mínimo 24 px: texto grande para contraste). */
.v3-statement .v21-section-copy>p{margin-inline:auto;text-align:center;max-width:36em;margin-top:clamp(16px,2vw,26px)} /* Párrafos restantes. */
.v3-statement .v2-lined-list{text-align:left;max-width:520px;margin:28px auto 0} /* Lista de puntos alineada a la izquierda. */
.v3-statement .v21-section-links{justify-content:center} /* Enlaces centrados. */
.v3-statement-image{margin:clamp(28px,4vw,56px) 0 0;overflow:hidden;border-radius:var(--r)} /* Imagen de la sección a todo el ancho. */
.v3-statement-image img{width:100%;aspect-ratio:2.3;object-fit:cover;border-radius:0} /* Proporción panorámica. */
.v3-statement-image figcaption{position:static;text-align:right;padding:8px 4px 0;background:none;color:var(--muted);font-size:10px} /* Pie bajo la imagen. */
@media(max-width:760px){.v3-statement-image img{aspect-ratio:1.4}} /* Móvil: más alta. */

/* ===== 3. FolderSection: carpetas apiladas (solo portada) ====================================================
   Cada carpeta se queda fijada un poco más abajo que la anterior para que se vean las pestañas escalonadas.
   Solo en pantallas anchas y altas; en el resto, carpetas una tras otra. */
.v3-folder-section .v21-section-inner{display:block} /* Anula la rejilla de la sección clásica. */
.v3-folders{display:grid;gap:clamp(34px,6vh,56px);padding:clamp(34px,5vh,56px) 0 clamp(20px,4vh,40px)} /* Pila de carpetas. */
.v3-folder{--fb:var(--sand);--fc:var(--ink);position:relative;z-index:calc(1 + var(--i,0));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(20px,4vw,56px);min-height:min(64vh,540px);padding:clamp(22px,3.2vw,48px);border-radius:var(--r-lg);background:var(--fb);color:var(--fc);box-shadow:0 -16px 44px -26px rgba(15,38,56,.5)} /* Carpeta: --fb fondo, --fc color de texto; cada una encima de la anterior (z-index por --i). */
.v3-folder:nth-child(1){--fb:var(--sand)} /* Carpeta 1: arena. */
.v3-folder:nth-child(2){--fb:#d9eaf6} /* Carpeta 2: azul claro. */
.v3-folder:nth-child(3){--fb:#d7eee4} /* Carpeta 3: verde menta. */
.v3-folder:nth-child(4){--fb:#f8e8c8} /* Carpeta 4: ámbar suave. */
.v3-folder:last-child{--fb:var(--navy);--fc:#fff} /* La última siempre en azul noche con texto blanco. */
.v3-folder-tab{position:absolute;bottom:100%;left:calc(clamp(18px,2.4vw,32px) + var(--i,0) * clamp(36px,15%,190px));padding:10px 20px 9px;border-radius:14px 14px 0 0;background:var(--fb);color:var(--fc);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} /* Pestaña sobre la carpeta, desplazada según su posición. */
.v3-folder-copy{align-self:center} /* Texto centrado en vertical. */
.v3-folder-lead{font-family:DestinyFutura,Arial,sans-serif;font-size:clamp(1.4rem,2.15vw,2rem);font-weight:500;line-height:1.16;letter-spacing:-.03em;margin:0 0 clamp(14px,2vw,24px);text-wrap:balance} /* Frase de apertura de la carpeta. */
.v3-folder-copy p:not(.v3-folder-lead){font-size:clamp(.98rem,1.2vw,1.1rem);line-height:1.65;margin:0;max-width:34em} /* Resto del texto. */
.v3-folder-image{display:flex;flex-direction:column;margin:0;min-height:260px} /* Foto de la carpeta. */
.v3-folder-image img{flex:1;width:100%;height:100%;min-height:240px;object-fit:cover;border-radius:22px} /* La foto rellena su columna. */
.v3-folder-image figcaption{position:static;padding:8px 2px 0;background:none;font-size:10px;color:inherit;text-align:right} /* Pie de la foto. */
@media(min-width:1001px) and (min-height:680px){.v3-folder{position:sticky;top:calc(124px + var(--i,0) * 24px)}} /* Apilado: cada carpeta se fija 24 px más abajo. */
@media(max-width:1000px){.v3-folder{grid-template-columns:1fr;min-height:0}.v3-folder-image{order:-1;min-height:0}.v3-folder-image img{aspect-ratio:16/10;min-height:0}} /* Móvil: foto arriba y sin apilado. */

/* ===== 4. CardCarousel: tarjetas de color con scroll horizontal (Zonas comunes) =========================== */
.v3-carousel-head{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;width:var(--band-w);margin:0 auto 20px;padding-inline:clamp(10px,2vw,28px)} /* Cabecera: índice a la izquierda, flechas a la derecha. */
.v3-amenity-nav{display:flex;flex-wrap:wrap;gap:10px} /* Índice de píldoras. */
.v3-amenity-nav a{--dot:var(--sand);display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)} /* Píldora con punto de color. */
.v3-amenity-nav a::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dot)} /* Punto de color de cada espacio. */
.v3-amenity-nav a:nth-child(1){--dot:#d9c08e}.v3-amenity-nav a:nth-child(2){--dot:#7fb4d9}.v3-amenity-nav a:nth-child(3){--dot:#7cc4a8}.v3-amenity-nav a:nth-child(4){--dot:var(--sun)}.v3-amenity-nav a:nth-child(5){--dot:var(--navy)} /* Color del punto por posición (igual que el de su tarjeta). */
.v3-amenity-nav a:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-2px)} /* Al pasar el ratón, se invierte. */
.v3-amenity-nav a:hover::before{box-shadow:0 0 0 2px rgba(255,255,255,.7)} /* El punto gana un aro blanco. */
.v3-carousel-arrows{display:flex;gap:10px} /* Par de flechas. */
.v3-carousel-arrows button{width:52px;height:52px;border-radius:50%;border:0;background:var(--navy);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .25s var(--ease),transform .25s var(--ease)} /* Botón circular negro (como el de Billber). */
.v3-carousel-arrows button:hover{background:var(--blue);transform:scale(1.06)} /* Al pasar el ratón, azul y algo mayor. */
.v3-carousel-arrows svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* Chevrón dibujado. */
.v3-carousel-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(16px,calc((100% - 1280px)/2 + 16px));padding:8px max(16px,calc((100% - 1280px)/2 + 16px)) 28px;scrollbar-width:thin;overscroll-behavior-x:contain} /* Pista horizontal con imán: cada tarjeta se alinea al borde. */
.v3-card{--fb:var(--sand);--fc:var(--ink);flex:0 0 min(86vw,560px);scroll-snap-align:start;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:var(--fb);color:var(--fc)} /* Tarjeta: ancho fijo, color por --fb/--fc. */
.v3-card:nth-child(1){--fb:var(--sand)} /* Tarjeta 1: arena. */
.v3-card:nth-child(2){--fb:#d9eaf6} /* Tarjeta 2: azul claro. */
.v3-card:nth-child(3){--fb:#d7eee4} /* Tarjeta 3: menta. */
.v3-card:nth-child(4){--fb:#f8e8c8} /* Tarjeta 4: ámbar suave. */
.v3-card:nth-child(5){--fb:var(--navy);--fc:#fff} /* Tarjeta 5: azul noche con texto blanco. */
.v3-card-image{margin:0} /* Imagen de la tarjeta. */
.v3-card-image img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0} /* Foto a todo el ancho de la tarjeta. */
.v3-card-image figcaption,.v3-tile-image figcaption{position:static;padding:6px 24px 0;background:none;font-size:10px;color:inherit;text-align:right} /* Pie de la foto. */
.v3-card-body{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:12px} /* Cuerpo de la tarjeta. */
.v3-card-tab{display:inline-flex;width:fit-content;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.75);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} /* Etiqueta en píldora (también usada por el mosaico). */
.v3-card:nth-child(5) .v3-card-tab,.v3-tile-d .v3-card-tab{background:rgba(255,255,255,.16);color:#fff} /* Etiqueta clara sobre fondo oscuro. */
.v3-card h2.v3-card-title,.v3-tile h2.v3-card-title{font-family:DestinyFutura,Arial,sans-serif;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.12;letter-spacing:-.03em;max-width:none;margin:0;color:inherit} /* Titular de tarjeta (gana al H2 de sección por especificidad). */
.v3-card p,.v3-tile p{color:inherit;margin:0;line-height:1.65} /* Texto con el color de la tarjeta. */
.v3-card .v2-lined-list li,.v3-tile .v2-lined-list li{color:inherit;border-color:currentColor} /* Lista de puntos con el color de la tarjeta. */
.v3-card .v2-text-link,.v3-tile .v2-text-link{color:inherit;border-color:currentColor} /* Enlaces con el color de la tarjeta. */

/* ===== 5. QualityDirectory: menú lateral + panel oscuro (Viviendas · Calidades) ============================== */
.v3-dir{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(24px,4vw,48px);align-items:start} /* Menú a la izquierda, panel a la derecha. */
.v3-dir-menu{position:sticky;top:112px} /* El menú se queda fijo bajo la cabecera al recorrer el panel. */
.v3-dir-menu ul{list-style:none;margin:0;padding:0;display:grid;gap:4px} /* Lista de categorías sin viñetas. */
.v3-dir-menu a{display:block;padding:12px 16px;border-radius:14px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;transition:background .25s var(--ease),color .25s var(--ease)} /* Entrada del menú. */
.v3-dir-menu a:hover{background:var(--pale)} /* Al pasar el ratón. */
.v3-dir-menu a[aria-current="true"]{background:var(--navy);color:#fff} /* Categoría que se está viendo. */
.v3-dir-panel{background:var(--navy);color:#fff;border-radius:var(--r);padding:clamp(24px,3.4vw,48px)} /* Panel oscuro con todas las categorías. */
.v3-dir-group{scroll-margin-top:110px} /* Al saltar a una categoría queda bajo la cabecera. */
.v3-dir-group+.v3-dir-group{margin-top:clamp(32px,4vw,56px)} /* Separación entre categorías. */
.v3-dir-cat{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);margin:0 0 16px} /* Nombre de la categoría. */
.v3-dir-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:18px} /* Tarjetas: tantas columnas como quepan. */
.v3-dir-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:14px 14px 22px} /* Tarjeta de calidad. */
.v3-dir-image{margin:0 0 16px} /* Foto de la calidad. */
.v3-dir-image img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px} /* Foto 4:3 con esquinas redondeadas. */
.v3-dir-image figcaption{position:static;padding:6px 2px 0;background:none;font-size:10px;color:rgba(255,255,255,.78)} /* Pie claro sobre fondo oscuro. */
.v3-dir-card h3{color:#fff;font-size:1.2rem;margin:0 0 8px;padding-inline:4px} /* Título de la calidad (H3). */
.v3-dir-card p{color:rgba(255,255,255,.82);font-size:.96rem;line-height:1.6;margin:0;padding-inline:4px} /* Texto de la calidad. */
.v3-dir-link{margin:28px 0 0} /* Enlace a la memoria de calidades. */
.v3-dir-panel .v2-text-link{color:#fff;border-color:rgba(255,255,255,.45)} /* Enlaces blancos. */
@media(max-width:900px){ /* Tablet y móvil: menú como fila de píldoras desplazable. */
 .v3-dir{grid-template-columns:1fr} /* Una columna. */
 .v3-dir-menu{position:static;overflow-x:auto;padding-bottom:6px} /* Menú horizontal, sin fijar. */
 .v3-dir-menu ul{display:flex;gap:8px;width:max-content} /* Píldoras en fila. */
 .v3-dir-menu a{white-space:nowrap;border:1px solid var(--line)} /* Sin saltos de línea y con borde. */
}

/* ===== 6. StepCards: pasos en tarjetas claras (Contacto) ===================================================== */
.v3-steps-list{list-style:none;margin:clamp(24px,4vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} /* Tres tarjetas en fila. */
.v3-step{position:relative;padding:clamp(22px,2.4vw,32px);border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)} /* Tarjeta clara con borde fino. */
.v3-step:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(15,38,56,.5);border-color:var(--blue)} /* Al pasar el ratón sube y gana sombra. */
.v3-step svg{width:40px;height:40px;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:clamp(28px,5vw,64px)} /* Icono de línea del paso. */
.v3-step h3{font-size:clamp(1.2rem,1.7vw,1.5rem);margin:0 0 10px} /* Título del paso (lleva el número en el texto). */
.v3-step p{color:var(--muted);margin:0} /* Texto del paso. */
.v3-step:not(:last-child)::after{content:"";position:absolute;top:60px;right:-20px;width:20px;height:1px;background:var(--blue)} /* Línea que une un paso con el siguiente. */
@media(max-width:900px){.v3-steps-list{grid-template-columns:1fr}.v3-step:not(:last-child)::after{display:none}} /* Móvil: una columna y sin líneas de unión. */

/* ===== 7. ImageCards: tarjetas con imagen (Viviendas · Personalización) ====================================== */
.v3-imgcards{list-style:none;margin:clamp(24px,4vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} /* Tres tarjetas en fila. */
.v3-imgcard{background:var(--pale);border-radius:var(--r);padding:12px 12px 26px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)} /* Tarjeta pálida con marco. */
.v3-imgcard:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(15,38,56,.5)} /* Al pasar el ratón sube. */
.v3-imgcard-image{margin:0 0 18px} /* Foto de la tarjeta. */
.v3-imgcard-image img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--r) - 8px)} /* Foto con radio interior coherente con el marco. */
.v3-imgcard-image figcaption{position:static;padding:6px 4px 0;background:none;font-size:10px;color:var(--muted)} /* Pie de la foto. */
.v3-imgcard h3{margin:0 0 8px;padding-inline:12px;font-size:1.3rem} /* Título de la opción. */
.v3-imgcard p{margin:0;padding-inline:12px;color:var(--muted)} /* Texto de la opción. */
@media(max-width:900px){.v3-imgcards{grid-template-columns:1fr}} /* Móvil: una columna. */

/* ===== 8. IndexRows: filas de índice (Recursos) ============================================================== */
.v3-rows .v2-wrap{border-top:1px solid var(--line)} /* Línea sobre la primera fila. */
.v3-row{display:grid;grid-template-columns:minmax(120px,.5fr) minmax(0,2fr) minmax(0,1.2fr);gap:clamp(16px,3vw,48px);padding:clamp(28px,4vw,48px) clamp(8px,1.5vw,20px);border-bottom:1px solid var(--line);align-items:start;transition:background .3s var(--ease)} /* Fila: categoría · texto · enlaces e imagen. */
.v3-row:hover{background:var(--pale)} /* La fila se tiñe al pasar el ratón. */
.v3-row-tag{display:inline-flex;width:fit-content;padding:7px 14px;border-radius:999px;background:var(--pale);color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:background .3s var(--ease)} /* Categoría en píldora. */
.v3-row:hover .v3-row-tag{background:#fff} /* La píldora se aclara con la fila. */
.v3-row h2{font-size:clamp(1.5rem,2.4vw,2.1rem);max-width:none} /* Titular de la fila. */
.v3-row-main p{color:var(--muted)} /* Texto de la fila. */
.v3-row-side{display:grid;gap:16px;justify-items:start} /* Enlaces e imagen apilados. */
.v3-row-image{margin:0;width:100%} /* Imagen pequeña de la fila. */
.v3-row-image img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px} /* Miniatura recortada. */
.v3-row-image figcaption{position:static;padding:6px 2px 0;background:none;font-size:10px;color:var(--muted)} /* Pie de la miniatura. */
@media(max-width:900px){.v3-row{grid-template-columns:1fr}} /* Móvil: todo en una columna. */

/* ===== 9. MosaicGrid: mosaico de tarjetas de tamaños distintos (Ciudad del Deporte) ========================== */
.v3-mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px} /* Rejilla de 6 columnas. */
.v3-tile{--fb:var(--sand);--fc:var(--ink);display:grid;border-radius:var(--r-lg);overflow:hidden;background:var(--fb);color:var(--fc)} /* Tarjeta del mosaico. */
.v3-tile-a{grid-column:span 4;grid-template-columns:1.1fr 1fr;--fb:var(--sand)} /* A: ancha, foto a la izquierda. */
.v3-tile-b{grid-column:span 2;--fb:#d9eaf6} /* B: estrecha, azul claro. */
.v3-tile-c{grid-column:span 2;--fb:#d7eee4} /* C: estrecha, menta. */
.v3-tile-d{grid-column:span 4;grid-template-columns:1fr 1.1fr;--fb:var(--navy);--fc:#fff} /* D: ancha, azul noche. */
.v3-tile-image{margin:0} /* Imagen de la tarjeta. */
.v3-tile-image img{width:100%;height:100%;min-height:220px;object-fit:cover;border-radius:0} /* La foto rellena su celda. */
.v3-tile-b .v3-tile-image img,.v3-tile-c .v3-tile-image img{aspect-ratio:16/10;height:auto} /* Tarjetas estrechas: foto arriba en 16:10. */
.v3-tile-body{padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:12px;justify-content:center} /* Cuerpo de la tarjeta. */
.v3-tile-d .v3-tile-image{order:2} /* En D la foto va a la derecha. */
@media(max-width:1000px){.v3-mosaic{grid-template-columns:1fr}.v3-tile{grid-column:auto!important;grid-template-columns:1fr!important}.v3-tile-d .v3-tile-image{order:0}} /* Tablet y móvil: una columna. */

/* ===== 4b. Calidades: el reparto del ancho depende de cuántas tarjetas tiene la categoría (data-n 1, 2 o 3) ==== */
.v3-dir-cards[data-n="1"]{grid-template-columns:1fr} /* Una tarjeta: ocupa todo el ancho del panel. */
.v3-dir-cards[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))} /* Dos: mitad y mitad. */
.v3-dir-cards[data-n="1"] .v3-dir-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(16px,3vw,40px);align-items:center;padding:16px clamp(16px,2.4vw,32px) 16px 16px} /* La tarjeta única reparte foto y texto en dos columnas. */
.v3-dir-cards[data-n="1"] .v3-dir-image{margin:0} /* Sin margen inferior: ya hay hueco de rejilla. */
.v3-dir-cards[data-n="1"] .v3-dir-image img{aspect-ratio:16/10} /* Foto más panorámica al ocupar más ancho. */
@media(max-width:900px){.v3-dir-cards[data-n="2"]{grid-template-columns:1fr}.v3-dir-cards[data-n="1"] .v3-dir-card{grid-template-columns:1fr}} /* Móvil: una columna siempre. */

/* ===== 10. Tonos: cada elemento con data-tone define su fondo (--fb) y su color de texto (--fc) ============== */
[data-tone="sand"]{--fb:var(--sand);--fc:var(--ink)} /* Arena. */
[data-tone="sky"]{--fb:#d9eaf6;--fc:var(--ink)} /* Azul claro. */
[data-tone="mint"]{--fb:#d7eee4;--fc:var(--ink)} /* Menta. */
[data-tone="sun"]{--fb:#f8e8c8;--fc:var(--ink)} /* Ámbar suave. */
[data-tone="navy"]{--fb:var(--navy);--fc:#fff} /* Azul noche con texto blanco. */

/* ===== 11. FeatureCards: foto grande y cuerpo de color, alternando el lado ================================== */
.v3-features .v2-wrap{display:grid;gap:clamp(20px,3vw,36px)} /* Una tarjeta debajo de otra, sin apilarse. */
.v3-feature{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border-radius:var(--r-lg);overflow:hidden;background:var(--fb);color:var(--fc);min-height:min(56vh,480px)} /* Tarjeta de dos columnas. */
.v3-feature-flip{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)} /* Alterna: la foto pasa a la derecha. */
.v3-feature-flip .v3-feature-image{order:2} /* La foto va la segunda en el DOM visual. */
.v3-feature-image{margin:0;display:flex;flex-direction:column;background:var(--fb)} /* Contenedor de la foto. */
.v3-feature-image img{flex:1;width:100%;height:100%;min-height:260px;object-fit:cover;border-radius:0} /* La foto rellena su columna. */
.v3-feature-image figcaption{position:static;padding:8px 16px;background:none;font-size:10px;color:inherit;text-align:right} /* Pie de la foto con el color de la tarjeta. */
.v3-feature-body{padding:clamp(24px,3.4vw,48px);display:flex;flex-direction:column;gap:14px;justify-content:center} /* Cuerpo de la tarjeta. */
.v3-feature h2.v3-card-title{font-family:DestinyFutura,Arial,sans-serif;font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.12;letter-spacing:-.03em;max-width:none;margin:0;color:inherit} /* Titular de la tarjeta. */
.v3-feature p{color:inherit;margin:0;line-height:1.65} /* Texto con el color de la tarjeta. */
.v3-feature-items{display:grid;gap:12px;margin-top:6px} /* Items como bloques pequeños. */
.v3-feature-items>div{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.55)} /* Bloque claro sobre cualquier tono. */
.v3-feature-items h3{font-size:1.05rem;margin:0 0 4px;color:var(--ink)} /* Título del item (tinta: va sobre bloque claro). */
.v3-feature-items p{color:var(--ink)} /* Texto del item. */
.v3-feature .v2-text-link{color:inherit;border-color:currentColor} /* Enlaces con el color de la tarjeta. */
@media(max-width:900px){.v3-feature,.v3-feature-flip{grid-template-columns:1fr;min-height:0}.v3-feature-flip .v3-feature-image{order:0}.v3-feature-image img{aspect-ratio:16/10;min-height:0}} /* Móvil: foto arriba. */

/* ===== 12. BleedScene: foto a sangre que se revela con el scroll y tarjeta blanca encima ==================== */
.v3-bleed-stage{position:relative;display:grid;align-items:end;min-height:min(80vh,720px);border-radius:var(--r-lg);overflow:hidden;background:var(--navy)} /* Escenario: la foto va detrás, la tarjeta delante. */
.v3-bleed-image{position:absolute;inset:0;margin:0} /* La foto ocupa todo el escenario. */
.v3-bleed-image img{width:100%;height:100%;object-fit:cover;border-radius:0;transform:scale(calc(1.16 - var(--p,1) * .16));transform-origin:50% 60%} /* Zoom que se asienta al hacer scroll (--p). */
.v3-bleed-image figcaption{position:absolute;top:16px;right:16px;max-width:min(60%,520px);padding:6px 12px;border-radius:999px;background:rgba(15,38,56,.92);color:#fff;font-size:10px} /* Pie sobre la foto, legible. */
.v3-bleed-image figcaption a{color:#fff} /* Enlace de origen del pie. */
.v3-bleed-card{position:relative;margin:clamp(16px,3vw,40px);width:min(540px,100%);padding:clamp(22px,2.8vw,40px);border-radius:var(--r);background:#fff;color:var(--ink);transform:translate3d(0,calc((1 - var(--p,1)) * 70px),0)} /* Tarjeta blanca que sube al entrar. */
.v3-bleed-flip .v3-bleed-card{justify-self:end} /* Alterna: tarjeta a la derecha. */
.v3-bleed-card h2{font-size:clamp(1.5rem,2.4vw,2.2rem);max-width:none;margin:0 0 14px} /* Titular de la tarjeta. */
.v3-bleed-card p{color:var(--muted)} /* Texto en gris de marca. */
.v3-bleed-items{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px} /* Items como bloques. */
.v3-bleed-items li{padding:14px 16px;border-radius:16px;background:var(--pale)} /* Bloque pálido. */
.v3-bleed-items h3{font-size:1.05rem;margin:0 0 4px} /* Título del item. */
.v3-bleed-items p{margin:0} /* Texto del item. */
@media(max-width:900px){ /* Móvil: foto arriba y tarjeta debajo, sin superponer. */
 .v3-bleed-stage{display:block;min-height:0;background:none;overflow:visible} /* Sin escenario superpuesto. */
 .v3-bleed-image{position:static;border-radius:var(--r);overflow:hidden} /* La foto es un bloque normal. */
 .v3-bleed-image img{aspect-ratio:4/3;height:auto;transform:none} /* Proporción fija y sin zoom. */
 .v3-bleed-card{margin:-28px 12px 0;width:auto;transform:none;box-shadow:0 18px 40px -24px rgba(15,38,56,.45)} /* La tarjeta solapa un poco la foto. */
}
@media(prefers-reduced-motion:reduce){.v3-bleed-image img,.v3-bleed-card{transform:none}} /* Sin movimiento. */

/* ===== 13. NearbyBento: tres paneles de color con iconos grandes =========================================== */
.v3-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;margin-top:clamp(24px,4vw,44px)} /* Rejilla de 12 columnas. */
.v3-bento-panel{padding:clamp(22px,2.6vw,36px);border-radius:var(--r-lg);background:var(--fb);color:var(--fc)} /* Panel de color. */
.v3-bento-0{grid-column:span 4} /* Día a día: estrecho. */
.v3-bento-1{grid-column:span 8} /* Deporte y naturaleza: ancho. */
.v3-bento-2{grid-column:span 12} /* Escapadas: todo el ancho. */
.v3-bento-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 clamp(16px,2vw,28px);color:inherit} /* Nombre del grupo. */
.v3-bento ul{list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,2vw,26px)} /* Lista de lugares. */
.v3-bento-1 ul{grid-template-columns:repeat(2,minmax(0,1fr))} /* El panel ancho reparte en dos columnas. */
.v3-bento-2 ul{grid-template-columns:repeat(4,minmax(0,1fr))} /* El panel de ancho completo, en cuatro. */
.v3-bento li{display:flex;gap:16px;align-items:flex-start} /* Icono a la izquierda y texto a la derecha. */
.v3-bento-icon{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.7);color:var(--blue);transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)} /* Círculo claro con el icono. */
.v3-bento-icon svg{width:30px;height:30px} /* Icono más grande que el original (32 px se reduce al círculo). */
.v3-bento-2 .v3-bento-icon{background:rgba(255,255,255,.14);color:#fff} /* En el panel oscuro, círculo translúcido y icono blanco. */
.v3-bento li:hover .v3-bento-icon{background:var(--blue);color:#fff;transform:scale(1.08)} /* Al pasar el ratón el círculo se rellena. */
.v3-bento h3{font-size:1.15rem;margin:2px 0 6px;color:inherit} /* Título del lugar. */
.v3-bento p:not(.v3-bento-label){margin:0;color:inherit;line-height:1.55;font-size:.96rem} /* Texto del lugar. */
@media(max-width:1000px){.v3-bento-0,.v3-bento-1,.v3-bento-2{grid-column:span 12}.v3-bento-1 ul{grid-template-columns:1fr 1fr}.v3-bento-2 ul{grid-template-columns:1fr 1fr}} /* Tablet: paneles apilados. */
@media(max-width:640px){.v3-bento-1 ul,.v3-bento-2 ul{grid-template-columns:1fr}} /* Móvil: una columna. */

/* ===== 14. TypeList: nombres grandes numerados a la derecha, titular fijo a la izquierda ===================== */
.v3-typelist-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(24px,5vw,72px);align-items:start} /* Dos columnas. */
.v3-typelist-head{position:sticky;top:112px} /* El titular acompaña al recorrer la lista. */
.v3-typelist-image{margin:24px 0 0} /* Imagen opcional bajo el texto. */
.v3-typelist-image img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r)} /* Foto recortada. */
.v3-typelist-image figcaption{position:static;padding:6px 2px 0;background:none;font-size:10px;color:var(--muted)} /* Pie. */
.v3-typelist-items{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} /* Lista con línea superior. */
.v3-typelist-items>li{display:grid;grid-template-columns:3.2rem minmax(0,1fr);column-gap:16px;padding:clamp(18px,2.2vw,28px) clamp(10px,1.6vw,20px);border-bottom:1px solid var(--line);border-radius:0;transition:background .3s var(--ease),color .3s var(--ease),padding .3s var(--ease)} /* Fila: número y título. */
.v3-tl-n{grid-row:1/3;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--blue);padding-top:.7em;transition:color .3s var(--ease)} /* Número de orden. */
.v3-typelist-items h3{grid-column:2;font-family:DestinyFutura,Arial,sans-serif;font-size:clamp(1.4rem,2.5vw,2.3rem);line-height:1.1;letter-spacing:-.03em;margin:0;color:inherit} /* Nombre grande. */
.v3-typelist-items p{grid-column:2;margin:8px 0 0;color:var(--muted);transition:color .3s var(--ease)} /* Descripción. */
.v3-typelist-items>li:hover{background:var(--navy);color:#fff;padding-left:clamp(18px,2.4vw,32px)} /* La fila se tiñe y se desplaza al pasar el ratón. */
.v3-typelist-items>li:hover p,.v3-typelist-items>li:hover .v3-tl-n{color:rgba(255,255,255,.85)} /* Textos claros sobre el fondo oscuro. */
@media(max-width:900px){.v3-typelist-grid{grid-template-columns:1fr}.v3-typelist-head{position:static}} /* Móvil: una columna, sin fijar. */

/* ===== 15. LinkCards: cada enlace es una tarjeta grande con flecha ========================================== */
.v3-linkcards-list{list-style:none;margin:clamp(24px,4vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} /* Dos tarjetas en fila. */
.v3-linkcard{--fb:var(--sand);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;min-height:clamp(150px,18vw,220px);padding:clamp(20px,2.6vw,32px);border-radius:var(--r-lg);background:var(--fb);color:var(--ink);text-decoration:none;font-family:DestinyFutura,Arial,sans-serif;font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.15;letter-spacing:-.02em;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)} /* Tarjeta de enlace. */
.v3-linkcard[data-tone="sky"]{--fb:#d9eaf6} /* Segunda tarjeta en azul claro. */
.v3-linkcard-arrow{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;font-size:20px;transition:transform .3s var(--ease),background .3s var(--ease)} /* Círculo con flecha. */
.v3-linkcard:hover{background:var(--navy);color:#fff;transform:translateY(-4px)} /* Al pasar el ratón, se invierte. */
.v3-linkcard:hover .v3-linkcard-arrow{background:#fff;color:var(--navy);transform:rotate(45deg)} /* La flecha gira. */
@media(max-width:760px){.v3-linkcards-list{grid-template-columns:1fr}} /* Móvil: una columna. */

/* ===== 16. CtaBand: cierre con titular enorme sobre degradado claro (H-53: contraste alto, botones azul corporativo) ==== */
.v3-cta-panel{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(34px,5.4vw,84px);border-radius:var(--r-lg);background:linear-gradient(120deg,#dcebf7 0%,#f7efde 58%,#dcefe6 100%);color:var(--navy)} /* Tarjeta con degradado claro: el texto oscuro siempre contrasta. */
.v3-cta-blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(40px);opacity:.75;pointer-events:none} /* Círculos de color difuminados, detrás del contenido. */
.v3-cta-blob-a{width:clamp(220px,32vw,420px);aspect-ratio:1;right:-6%;top:-30%;background:radial-gradient(circle,#9cc7e8,rgba(156,199,232,0) 70%)} /* Azul cielo, arriba a la derecha. */
.v3-cta-blob-b{width:clamp(200px,28vw,380px);aspect-ratio:1;left:30%;bottom:-40%;background:radial-gradient(circle,#f3c77a,rgba(243,199,122,0) 70%)} /* Ámbar suave, abajo. */
.v3-cta-copy h2{font-size:clamp(2.1rem,4.8vw,4.2rem);line-height:1.02;letter-spacing:-.035em;max-width:14ch;margin:0 0 clamp(14px,2vw,24px);color:var(--navy)} /* Titular enorme en azul noche. */
.v3-cta-copy p{color:#35495b;font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.6;max-width:34em;margin:0 0 10px} /* Texto de apoyo en gris azulado oscuro (contraste > 7:1 sobre el degradado). */
.v3-cta-actions{display:grid;gap:14px;justify-items:stretch} /* Botones apilados a todo el ancho de su columna. */
.v3-cta-btn{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 12px 12px clamp(20px,2.4vw,30px);min-height:68px;border-radius:999px;border:2px solid var(--blue);color:var(--blue);background:rgba(255,255,255,.55);font-weight:700;font-size:1.02rem;text-decoration:none;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease)} /* Botón grande con borde azul corporativo. */
.v3-cta-btn.is-primary{background:var(--blue);color:#fff} /* El principal va relleno de azul corporativo. */
.v3-cta-go{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;transition:transform .3s var(--ease),background .3s var(--ease)} /* Círculo con flecha al final del botón. */
.v3-cta-go svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* Flecha dibujada. */
.v3-cta-btn.is-primary .v3-cta-go{background:#fff;color:var(--blue)} /* En el botón relleno, círculo blanco. */
.v3-cta-btn:hover{transform:translateY(-3px);background:var(--navy);border-color:var(--navy);color:#fff} /* Al pasar el ratón, azul noche. */
.v3-cta-btn:hover .v3-cta-go{transform:rotate(45deg);background:#fff;color:var(--navy)} /* La flecha gira. */
.v3-cta-btn:focus-visible{outline:3px solid var(--navy);outline-offset:3px} /* Foco visible con teclado. */
@media(max-width:900px){.v3-cta-panel{grid-template-columns:1fr}} /* Móvil: una columna. */

/* ===== 17. FolderAccordion: carpetas que se abren y se cierran ============================================= */
.v3-accordion-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(24px,5vw,64px);align-items:start} /* Titular a la izquierda y carpetas a la derecha. */
.v3-accordion-head{position:sticky;top:112px} /* El titular acompaña al abrir carpetas. */
.v3-accordion-image{margin:24px 0 0} /* Imagen opcional. */
.v3-accordion-image img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r)} /* Foto recortada. */
.v3-accordion-image figcaption{position:static;padding:6px 2px 0;background:none;font-size:10px;color:var(--muted)} /* Pie. */
.v3-fold-list{display:grid;gap:34px;padding-top:30px} /* Carpetas con hueco para sus pestañas. */
.v3-fold{position:relative;border-radius:var(--r);background:var(--fb);color:var(--fc)} /* Carpeta. */
.v3-fold::before{content:"";position:absolute;left:24px;bottom:100%;width:112px;height:30px;border-radius:14px 14px 0 0;background:var(--fb)} /* Pestaña de la carpeta. */
.v3-fold summary{display:flex;align-items:center;gap:16px;list-style:none;cursor:pointer;padding:clamp(18px,2.2vw,26px) clamp(20px,2.4vw,32px);border-radius:var(--r)} /* Cabecera clicable. */
.v3-fold summary::-webkit-details-marker{display:none} /* Sin el triángulo nativo (Safari). */
.v3-fold summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px} /* Foco visible con teclado. */
.v3-fold-tab{position:absolute;left:24px;bottom:100%;width:112px;height:30px;display:grid;place-items:center;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--fc)} /* Número sobre la pestaña. */
.v3-fold h3{flex:1;font-family:DestinyFutura,Arial,sans-serif;font-size:clamp(1.2rem,1.8vw,1.6rem);margin:0;color:inherit} /* Título de la carpeta. */
.v3-fold-plus{flex:none;position:relative;width:34px;height:34px;border-radius:50%;background:var(--navy)} /* Botón circular más/menos. */
.v3-fold-plus::before,.v3-fold-plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:#fff;transition:transform .3s var(--ease)} /* Las dos barras del símbolo. */
.v3-fold-plus::after{transform:rotate(90deg)} /* Barra vertical (forma el «+»). */
.v3-fold[open] .v3-fold-plus::after{transform:rotate(0)} /* Abierta: queda solo la horizontal («−»). */
.v3-fold p{margin:0;padding:0 clamp(20px,2.4vw,32px) clamp(20px,2.4vw,28px);color:inherit;line-height:1.65;max-width:42em} /* Contenido de la carpeta. */
@media(max-width:900px){.v3-accordion-grid{grid-template-columns:1fr}.v3-accordion-head{position:static}} /* Móvil: una columna. */

/* ===== 18. Carrusel guiado por scroll (CardCarousel con la clase v3-driven) ================================ */
.v3-carousel-track{position:relative} /* offsetLeft de las tarjetas se mide desde la pista (lo usa goTo en scenes.jsx). */
.v3-driven{height:min(260vh,2600px)} /* Contenedor alto: da el recorrido de scroll al carrusel. */
.v3-driven .v3-carousel-sticky{position:sticky;top:88px} /* Cabecera y pista quedan fijadas bajo la cabecera de la web. */
.v3-driven .v3-carousel-track{scroll-snap-type:none;scrollbar-width:none} /* Sin imán (lo mueve el scroll de la página) y sin barra. */
.v3-driven .v3-carousel-track::-webkit-scrollbar{display:none} /* Sin barra en Chrome y Safari. */
.v3-driven .v3-card-image img{aspect-ratio:2/1} /* En modo guiado la foto es más baja para que la tarjeta entera quepa bajo la cabecera fija. */

/* ===== 19. Tipologías: las cuatro pestañas siempre a la vista (Elisa, 16/10: «dices que son 4 y indicas 3») ===== */
.v21-typologies .v21-tabs{flex-wrap:wrap;overflow:visible} /* Si no caben en una línea, bajan a la siguiente en lugar de quedar ocultas a la derecha. */

/* ===== 20. TopicCards: panel azul noche con tarjetas de borde de color (portada · colegios, educación y deporte) ===== */
.v3-topics-panel{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:clamp(28px,4.6vw,76px)} /* Panel oscuro a todo el ancho de la banda. */
.v3-topics h2{color:#fff;font-size:clamp(2rem,4vw,3.4rem);line-height:1.04;max-width:16ch;margin:0} /* Titular grande en blanco. */
.v3-topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(28px,4vw,56px)} /* Tres tarjetas en fila. */
.v3-topic{--tc:#7fb4d9;display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.4vw,34px);border-radius:24px;border:1.5px solid var(--tc);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.01));transition:transform .3s var(--ease),background .3s var(--ease)} /* Tarjeta con borde del color de su tema (--tc). */
.v3-topic[data-tone="sun"]{--tc:#f0b95a} /* Tema ámbar. */
.v3-topic[data-tone="mint"]{--tc:#7cc4a8} /* Tema menta. */
.v3-topic:hover{transform:translateY(-4px);background:rgba(255,255,255,.1)} /* Al pasar el ratón sube y se ilumina. */
.v3-topic-tag{display:inline-flex;width:fit-content;padding:7px 14px;border-radius:999px;background:var(--tc);color:var(--navy);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} /* Etiqueta en píldora del color del tema. */
.v3-topic h3{font-family:DestinyFutura,Arial,sans-serif;font-size:clamp(1.4rem,2vw,1.85rem);line-height:1.12;letter-spacing:-.02em;color:#fff;margin:0} /* Título del tema (H3). */
.v3-topic p{color:rgba(255,255,255,.84);line-height:1.65;margin:0} /* Texto del tema. */
.v3-topic-link{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 10px 10px 20px;border:1px solid rgba(255,255,255,.4);border-radius:999px;color:#fff;text-decoration:none;font-weight:600;font-size:.94rem;line-height:1.3;transition:border-color .3s var(--ease),background .3s var(--ease)} /* Botón de enlace con círculo y flecha. */
.v3-topic-go{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--navy);font-size:16px;transition:transform .3s var(--ease)} /* Círculo blanco con la flecha del enlace. */
.v3-topic-link:hover{border-color:var(--tc);background:rgba(255,255,255,.08)} /* Al pasar el ratón, borde de color. */
.v3-topic-link:hover .v3-topic-go{transform:rotate(45deg)} /* La flecha gira. */
.v3-topic-link:focus-visible,.v3-numrow-link:focus-visible{outline:3px solid #fff;outline-offset:3px} /* Foco visible con teclado. */
@media(max-width:1000px){.v3-topic-grid{grid-template-columns:1fr}} /* Tablet y móvil: una columna. */

/* ===== 21. NumberedRows: numerales grandes con título, texto y enlace (portada · todo empieza por una buena conversación) ==== */
.v3-numrows-list{list-style:none;margin:clamp(24px,4vw,48px) 0 0;padding:0;border-top:1px solid var(--line)} /* Lista con línea superior. */
.v3-numrow{display:grid;grid-template-columns:clamp(96px,13vw,190px) minmax(0,1.3fr) minmax(0,.9fr);gap:clamp(16px,3vw,44px);align-items:center;padding:clamp(24px,3.4vw,46px) clamp(8px,1.6vw,22px);border-bottom:1px solid var(--line);transition:background .3s var(--ease),padding .3s var(--ease)} /* Fila: numeral · texto · enlace. */
.v3-numrow:hover{background:var(--pale);padding-left:clamp(18px,2.6vw,36px)} /* La fila se tiñe y se desplaza al pasar el ratón. */
.v3-numrow-n{font-family:DestinyFutura,Arial,sans-serif;font-size:clamp(3.2rem,7.4vw,6.4rem);font-weight:300;line-height:.9;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--blue);transition:color .3s var(--ease)} /* Numeral grande solo con contorno azul. */
.v3-numrow:hover .v3-numrow-n{color:var(--blue)} /* Al pasar el ratón se rellena. */
.v3-numrow h3{font-family:DestinyFutura,Arial,sans-serif;font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.1;letter-spacing:-.03em;margin:0 0 8px} /* Título de la fila (H3). */
.v3-numrow p{color:var(--muted);margin:0;line-height:1.6;max-width:36em} /* Texto de la fila. */
.v3-numrow-link{justify-self:end;display:flex;justify-content:space-between;align-items:center;gap:14px;width:min(100%,330px);padding:10px 10px 10px 20px;border:1.5px solid var(--blue);border-radius:999px;color:var(--blue);text-decoration:none;font-weight:600;font-size:.94rem;line-height:1.3;transition:background .3s var(--ease),color .3s var(--ease)} /* Enlace en píldora con círculo. */
.v3-numrow-link .v3-topic-go{background:var(--blue);color:#fff} /* Círculo azul con flecha blanca. */
.v3-numrow-link:hover{background:var(--blue);color:#fff} /* Al pasar el ratón, relleno azul. */
.v3-numrow-link:hover .v3-topic-go{background:#fff;color:var(--blue)} /* Y círculo blanco. */
@media(max-width:900px){.v3-numrow{grid-template-columns:1fr;gap:10px}.v3-numrow-link{justify-self:start}} /* Móvil: una columna. */

/* ===== 22. ReassureDuo: preparación (chips marcables) + tranquilidad (Contacto) ============================= */
.v3-duo-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px} /* Dos tarjetas en una sola pantalla. */
.v3-duo-prepare,.v3-duo-assure{border-radius:var(--r-lg);padding:clamp(24px,3.4vw,52px)} /* Tarjetas redondeadas. */
.v3-duo-prepare{background:var(--pale);color:var(--ink)} /* Tarjeta clara. */
.v3-duo-assure{background:var(--navy);color:#fff} /* Tarjeta oscura. */
.v3-duo-prepare h2,.v3-duo-assure h2{font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.08;max-width:16ch;margin:0 0 14px} /* Titulares. */
.v3-duo-assure h2{color:#fff} /* Titular blanco sobre azul noche. */
.v3-duo-prepare p{color:var(--muted);margin:0} /* Texto de la tarjeta clara. */
.v3-chips{border:0;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} /* Rejilla de chips (casillas). */
.v3-chips label{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1.5px solid var(--line);background:#fff;border-radius:16px;cursor:pointer;font-size:.95rem;line-height:1.4;color:var(--ink);transition:border-color .25s var(--ease),background .25s var(--ease)} /* Chip clicable. */
.v3-chips label.is-on{border-color:var(--blue);background:#eaf3fb} /* Chip marcado. */
.v3-chips label:focus-within{outline:3px solid var(--blue);outline-offset:2px} /* Foco visible con teclado. */
.v3-chips input{appearance:none;flex:none;width:22px;height:22px;margin:1px 0 0;border:2px solid var(--blue);border-radius:7px;background:#fff;display:grid;place-items:center;cursor:pointer} /* Casilla personalizada. */
.v3-chips input:checked{background:var(--blue)} /* Casilla marcada: azul. */
.v3-chips input:checked::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)} /* Marca de verificación dibujada con bordes. */
.v3-duo-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:24px} /* Botón y contador. */
.v3-duo-actions .v3-cta-btn{width:min(100%,360px)} /* Botón principal con ancho acotado. */
.v3-duo-count{font-size:.9rem;color:var(--muted)} /* Contador de selección. */
.v3-assure-list{list-style:none;margin:20px 0;padding:0;display:grid;gap:16px} /* Lista de garantías. */
.v3-assure-list li{display:flex;gap:14px;align-items:flex-start;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.45;color:#fff} /* Cada garantía. */
.v3-assure-list svg{flex:none;width:30px;height:30px;padding:6px;border-radius:50%;background:var(--sun);fill:none;stroke:var(--navy);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} /* Marca de verificación en círculo ámbar. */
.v3-duo-assure>p{color:rgba(255,255,255,.82)} /* Párrafos restantes. */
.v3-duo-assure .v2-text-link{color:#fff;border-color:rgba(255,255,255,.5)} /* Enlace blanco. */
@media(max-width:1000px){.v3-duo-grid{grid-template-columns:1fr}} /* Tablet y móvil: apiladas. */
@media(max-width:560px){.v3-chips{grid-template-columns:1fr}} /* Móvil estrecho: chips en una columna. */

/* ===== 23. TopicDirectory: menú lateral y bloques de texto largo, siempre visibles ========================== */
.v3-topicdir-blocks{display:grid;gap:20px} /* Bloques uno bajo otro. */
.v3-topicdir-block{position:relative;scroll-margin-top:110px;padding:clamp(24px,3.2vw,46px);border-radius:var(--r-lg);background:var(--fb);color:var(--fc)} /* Bloque de color (tono por data-tone). */
.v3-topicdir-n{position:absolute;right:clamp(18px,2.4vw,34px);top:clamp(12px,1.6vw,22px);font-family:DestinyFutura,Arial,sans-serif;font-size:clamp(2.6rem,5vw,4.6rem);font-weight:300;line-height:1;color:transparent;-webkit-text-stroke:1.2px rgba(15,38,56,.35)} /* Numeral decorativo con contorno. */
.v3-topicdir-block h3{font-family:DestinyFutura,Arial,sans-serif;font-size:clamp(1.4rem,2.3vw,2.1rem);line-height:1.1;letter-spacing:-.03em;margin:0 0 14px;max-width:80%;color:inherit} /* Título del bloque (H3). */
.v3-topicdir-block p{margin:0;color:inherit;line-height:1.75;font-size:clamp(.98rem,1.1vw,1.08rem);max-width:64em} /* Texto largo, con buena interlínea. */

/* ===== 24. TypeList · etiquetas de instalaciones por item ================================================== */
.v3-tl-tags{grid-column:2;list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0} /* Fila de etiquetas bajo el texto. */
.v3-tl-tags li{padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:.82rem;line-height:1.3;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)} /* Etiqueta en píldora. */
.v3-typelist-items>li:hover .v3-tl-tags li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff} /* En fila oscura, etiquetas translúcidas. */

/* ===== 12. Historia con scroll (StickyStory) · H-60 ==================================================================
   Rejilla de 2 columnas: el texto de cada paso en la columna 1 (una fila por paso) y las imágenes de TODOS los pasos apiladas
   en la misma celda de la columna 2 (grid-row: 1 / span N), cada una con position: sticky, de modo que se quedan fijas y se
   superponen. El paso activo (clase .is-active, puesta por useActiveId) enciende su texto (por COLOR, nunca por opacidad) y
   muestra su imagen (fundido). Componente: StickyStory en scenes.jsx. Tonos de panel: data-tone (§10).
   Móvil (< 1000 px) y «reducir movimiento»: una columna, cada paso con su imagen debajo y sin transiciones. */
.v3-story{margin:clamp(20px,4vw,56px) 0}
.v3-story-panel{width:var(--band-w);margin:0 auto;border-radius:var(--r);background:var(--fb,var(--navy));color:var(--fc,#fff);padding:clamp(28px,4vw,64px);--dim:rgba(255,255,255,.62)} /* Panel de color; --dim = color de los pasos apagados. */
.v3-story[data-tone="sand"] .v3-story-panel,.v3-story[data-tone="sky"] .v3-story-panel,.v3-story[data-tone="mint"] .v3-story-panel,.v3-story[data-tone="sun"] .v3-story-panel{--dim:rgba(15,38,56,.72)} /* En tonos claros, el apagado es tinta suave (contraste > 4,5:1). */
.v3-story h2{font-size:clamp(2.2rem,4.8vw,4.4rem);max-width:15ch;letter-spacing:-.045em;line-height:1.04;color:inherit} /* Titular propio de la sección. */
.v3-story-head>p{color:inherit;max-width:34em;margin:clamp(14px,2vw,22px) 0 0;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.55} /* Entrada breve bajo el titular. */
.v3-story .v3-connect{color:var(--sky)} /* CONNECT en azul cielo sobre el panel oscuro. */
.v3-story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:clamp(24px,5vw,80px);margin-top:clamp(20px,3vw,40px);grid-auto-rows:minmax(62vh,auto)} /* Una fila alta por paso: da recorrido al scroll. */
.v3-story-step{display:contents} /* El contenedor del paso no genera caja: su texto y su imagen son celdas de la rejilla. */
.v3-story-copy{grid-column:1;display:flex;flex-direction:column;justify-content:center;gap:14px;color:var(--dim);transition:color .5s var(--ease)} /* Texto del paso, apagado por color. */
.v3-story-step.is-active .v3-story-copy{color:var(--fc,#fff)} /* Paso activo: color pleno. */
.v3-story-copy h3{font-size:clamp(1.7rem,3.2vw,3rem);line-height:1.08;letter-spacing:-.035em;color:inherit;margin:0;text-wrap:balance} /* Frase protagonista. */
.v3-story-copy p{font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.6;max-width:30em;margin:0;color:inherit} /* Apoyo breve. */
.v3-story-shot{grid-column:2;grid-row:1 / span var(--n);align-self:start;position:sticky;top:calc(50vh - min(34vh,280px));height:min(68vh,560px);margin:0;border-radius:var(--r);overflow:hidden;opacity:0;transform:scale(1.04);transition:opacity .7s var(--ease),transform 1.1s var(--ease)} /* Todas las imágenes comparten celda y quedan fijas, transparentes. */
.v3-story-step.is-active .v3-story-shot{opacity:1;transform:none} /* La del paso activo aparece y se asienta. */
.v3-story-shot img{width:100%;height:100%;object-fit:cover;border-radius:0} /* La foto rellena el escenario. */
.v3-story-shot figcaption{position:absolute;right:12px;bottom:12px;padding:3px 10px;border-radius:999px;background:rgba(15,38,56,.74);color:#fff;font-size:10px} /* Pie «Imagen orientativa» sobre la foto. */
.v3-story-dots{grid-column:2;grid-row:1 / span var(--n);align-self:start;position:sticky;top:calc(50vh - min(34vh,280px));height:min(68vh,560px);display:flex;align-items:flex-end;gap:8px;padding:16px;pointer-events:none;z-index:1} /* Puntos de progreso sobre la imagen fija. */
.v3-story-dots span{width:8px;height:8px;margin-right:12px;border-radius:999px;background:rgba(255,255,255,.6);transform-origin:left center;transition:transform .4s var(--ease),background .4s} /* Punto apagado (margen extra para que el activo, ampliado, no pise al siguiente). */
.v3-story-dots span.is-active{transform:scaleX(3.5);background:#fff} /* Punto activo: se alarga con transform (sin animar el ancho). */
@media(max-width:999px){ /* Una columna: texto e imagen de cada paso juntos, sin escenario fijo. */
 .v3-story-grid{grid-template-columns:1fr;grid-auto-rows:auto}
 .v3-story-copy{grid-row:auto !important;color:var(--fc,#fff);padding-top:clamp(20px,5vw,36px)}
 .v3-story-shot{grid-column:1;grid-row:auto;position:static;height:auto;opacity:1;transform:none;margin-top:12px}
 .v3-story-shot img{aspect-ratio:4/3}
 .v3-story-dots{display:none}
}
@media(prefers-reduced-motion:reduce){.v3-story-shot,.v3-story-copy,.v3-story-dots span{transition:none}} /* Sin movimiento: estados sin transición. */