/* ═══════════════════════════════════════════════════════════════════════════
   VIVENTA · SECCIONES DEL HOME (rediseño)
   Estilos de las secciones que se van pegando como módulos HtmlText, extraídos
   de sitio-final/razor/Module.css. El nav y el footer NO están aquí: viven en
   chrome.css, porque son del tema.

   Este archivo crece sección a sección. Ahora mismo contiene:
     · 00 · HERO
     · 01 · ALIADOS  (+ el bloque reutilizable MARQUESINA)
     · 02 · PROMESA
     · 03 · PASOS  (+ el bloque reutilizable ETIQUETA)
     · 04 · EXPLORA  (calculadora; filtra contra /proyectos)
     · 05 · TRAYECTORIA
     · 06 · DIFERENCIALES
     · 07 · PROYECTOS  (+ el bloque reutilizable .vv-proyecto)
     · 08 · ECOSISTEMA
     · 09 · HISTORIAS  (+ los bloques .vv-testimonio y .vv-medio)
     · 10 · IMPACTO SOCIAL
     · 11 · CTA FINAL (contacto)
     · 12 · FAQ

   La base (.vv-landing y su reset) NO está aquí: vive en chrome.css, antes del
   bloque de botones. El orden importa — `.vv-landing *` y `.vv-boton--grande`
   empatan en especificidad (0-1-0), así que gana el que se declare último. Si
   el reset cargara después, dejaría los botones sin padding.

   Cómo se pega una sección en un HtmlText:

       <div class="vv-landing">
         <section class="vv-hero"> … </section>
       </div>

   El envoltorio no es opcional: el reset de box-sizing y los estilos de
   enlaces, botones e inputs cuelgan de él.

   Al modificar este archivo, sube el ?v= en ThemeInfo.cs (cache-busting).
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   ANIMACIONES
   Los estados iniciales cuelgan de .vv-landing--anim, que pone el JS. Si el JS
   no corre, la clase nunca se añade y todo se ve visible: el fallo va en la
   dirección segura.
   ─────────────────────────────────────────────────────────────────────────── */

@keyframes vv-desplazar {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes vv-hero-zoom {
    from { transform: scale(1.08); }
    to   { transform: scale(1); }
}

@keyframes vv-subir {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes vv-paso {
    60% { opacity: 1; }
    to  { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes vv-riel {
    to { width: 100%; }
}

@keyframes vv-punto {
    to { transform: scale(1); }
}

.vv-landing--anim .vv-hero__titulo,
.vv-landing--anim .vv-hero__descripcion,
.vv-landing--anim .vv-hero__acciones {
    opacity: 0;
    animation: vv-subir 760ms var(--vv-ease) forwards;
}

.vv-landing--anim .vv-hero__descripcion { animation-delay: 120ms; }
.vv-landing--anim .vv-hero__acciones    { animation-delay: 240ms; }

/* Entrada genérica al entrar en viewport. El JS marca con .vv-revelar los
   bloques de contenido de cada sección y les pone --visible cuando el
   IntersectionObserver los alcanza. (Module.css 3223-3231) */
.vv-landing--anim .vv-revelar {
    opacity: 0;
    transform: translateY(22px);
    will-change: opacity, transform;
}

.vv-revelar--visible {
    animation: vv-subir 780ms var(--vv-ease) forwards;
}


.vv-landing--anim .vv-pasos__tarjeta {
    opacity: 0;
    transform: translateY(46px) scale(0.965);
    will-change: opacity, transform;
}

.vv-pasos__tarjeta--visible {
    animation: vv-paso 900ms var(--vv-ease-back) forwards;
}

.vv-landing--anim .vv-pasos__numero {
    opacity: 0;
    transform: translateY(14px);
}

.vv-pasos__tarjeta--visible > .vv-pasos__numero {
    animation: vv-subir 620ms var(--vv-ease-back) 260ms forwards;
}

/* Riel de pasos: barra que crece + 4 puntos que aparecen en cascada */
.vv-pasos__barra {
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    width: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #E60D6F 0%, #E60D6F 68%, #2A2D52 100%);
}

.vv-pasos__punto {
    position: absolute;
    top: -5.5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--vv-gris-200);
    border: 3px solid var(--vv-rosa);
}

.vv-pasos__punto--1 { left: calc(0% - 7px); }
.vv-pasos__punto--2 { left: calc(33.333% - 7px); }
.vv-pasos__punto--3 { left: calc(66.666% - 7px); }
.vv-pasos__punto--4 { left: calc(100% - 7px); }

.vv-landing--anim .vv-pasos__barra { width: 0; }
.vv-landing--anim .vv-pasos__punto { transform: scale(0); }

.vv-pasos__riel--visible .vv-pasos__barra {
    animation: vv-riel 1800ms linear 150ms forwards;
}

.vv-pasos__riel--visible .vv-pasos__punto {
    animation: vv-punto 520ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.vv-pasos__riel--visible .vv-pasos__punto--1 { animation-delay: 150ms; }
.vv-pasos__riel--visible .vv-pasos__punto--2 { animation-delay: 750ms; }
.vv-pasos__riel--visible .vv-pasos__punto--3 { animation-delay: 1350ms; }
.vv-pasos__riel--visible .vv-pasos__punto--4 { animation-delay: 1950ms; }


/* ═══════════════════════════════════════════════════════════════════════════
   00 · HERO
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-hero {
    position: relative;
    background: var(--vv-navy-profundo);
    height: 660px;
    overflow: hidden;
}

.vv-hero__foto {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.06);
}

.vv-hero__imagen {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    animation: vv-hero-zoom 1600ms var(--vv-ease) both;
}

.vv-hero__velo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(22, 26, 51, 0.94) 0%,
        rgba(22, 26, 51, 0.86) 30%,
        rgba(22, 26, 51, 0.58) 52%,
        rgba(22, 26, 51, 0.20) 74%,
        rgba(22, 26, 51, 0.05) 100%);
}

.vv-hero__capa {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.vv-hero__contenedor {
    max-width: var(--vv-ancho);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--vv-margen);
}

.vv-hero__cuerpo {
    max-width: 600px;
}

.vv-hero__titulo {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 74px;
    line-height: 0.95;
    letter-spacing: -0.042em;
    color: var(--vv-blanco);
    margin-bottom: 26px;
    text-wrap: balance;
}

.vv-hero__titulo-resalte {
    color: var(--vv-rosa);
}

.vv-hero__descripcion {
    font-family: var(--vv-texto);
    font-size: 24px;
    color: var(--vv-blanco);
    line-height: 1.5;
    max-width: 580px;
    margin-bottom: 40px;
    text-wrap: pretty;
}

/* País rotativo: el contenedor recorta y el item interior se desplaza */
.vv-hero__pais {
    font-family: var(--vv-display);
    font-weight: 700;
    color: var(--vv-amarillo);
    display: inline-flex;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.14em;
}

.vv-hero__pais-item {
    display: inline-block;
    white-space: nowrap;
    will-change: transform, opacity;
    transform: translateY(0);
    opacity: 1;
    transition: transform 620ms cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 300ms var(--vv-ease);
}

.vv-hero__pais-item--saliendo {
    transform: translateY(-115%);
    opacity: 0;
    transition: transform 380ms cubic-bezier(0.5, 0, 0.75, 0), opacity 260ms linear;
}

.vv-hero__pais-item--abajo {
    transform: translateY(110%);
    opacity: 0;
    transition: none;
}

.vv-hero__acciones {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}



/* ── Responsive del hero ────────────────────────────────────────────────── */

@media (max-width: 1000px) {
    .vv-hero                 { height: 620px; }
    .vv-hero__contenedor     { padding: 0 28px; }
    .vv-hero__titulo         { font-size: 54px; line-height: 1.02; }
}

@media (max-width: 720px) {
    .vv-hero                { height: 520px; }
    .vv-hero__contenedor    { padding: 0 20px; }
    .vv-hero__titulo        { font-size: 40px; }
    .vv-hero__descripcion   { font-size: 19px; }
}


@media (prefers-reduced-motion: reduce) {

    .vv-landing--anim .vv-hero__titulo,
    .vv-landing--anim .vv-hero__descripcion,
    .vv-landing--anim .vv-hero__acciones {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .vv-hero__imagen { animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   BLOQUE REUTILIZABLE · ETIQUETA (píldora de sección)
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-etiqueta {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 9px 20px;
}

.vv-etiqueta__texto {
    font-family: var(--vv-texto);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.vv-etiqueta--rosa {
    background: var(--vv-rosa-suave);
    margin-bottom: 28px;
}

.vv-etiqueta--rosa .vv-etiqueta__texto {
    color: var(--vv-rosa);
}

.vv-etiqueta--menta {
    background: rgba(0, 221, 184, 0.14);
    margin-bottom: 26px;
}

.vv-etiqueta--menta .vv-etiqueta__texto {
    color: var(--vv-menta);
}


/* ═══════════════════════════════════════════════════════════════════════════
   BLOQUE REUTILIZABLE · MARQUESINA (carrusel infinito de logos)
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-marquesina {
    margin-top: 34px;
    position: relative;
    overflow: hidden;
}

.vv-marquesina__velo {
    position: absolute;
    top: 0;
    width: 200px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.vv-marquesina__velo--izquierda {
    left: 0;
    background: linear-gradient(to right, #FFFFFF, rgba(255, 255, 255, 0));
}

.vv-marquesina__velo--derecha {
    right: 0;
    background: linear-gradient(to left, #FFFFFF, rgba(255, 255, 255, 0));
}

.vv-marquesina__pista {
    display: flex;
    width: max-content;
    animation: vv-desplazar var(--vv-marquesina-duracion) linear infinite;
}

.vv-marquesina__pista:hover {
    animation-play-state: paused;
}

.vv-marquesina__item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 26px;
    height: 104px;
    flex-shrink: 0;
}

.vv-marquesina__marco {
    width: 240px;
    height: 92px;
    position: relative;
    background: var(--vv-blanco);
}

.vv-marquesina__logo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}



/* ═══════════════════════════════════════════════════════════════════════════
   01 · ALIADOS
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-aliados {
    background: var(--vv-blanco);
    padding: 56px 0 60px;
    border-bottom: 1px solid var(--vv-gris-350);
}

.vv-aliados__encabezado {
    max-width: var(--vv-ancho);
    margin: 0 auto;
    padding: 0 var(--vv-margen);
    text-align: center;
}

.vv-aliados__texto {
    font-family: var(--vv-texto);
    font-weight: 500;
    font-size: 21px;
    letter-spacing: 0.01em;
    color: var(--vv-gris-700);
    line-height: 1.6;
    max-width: 780px;
    margin: 0 auto;
    text-wrap: pretty;
}

.vv-aliados__texto-resalte {
    color: var(--vv-rosa);
    font-weight: 600;
}


/* ── Responsive de aliados ──────────────────────────────────────────────── */

@media (max-width: 1000px) {
    .vv-aliados__encabezado  { padding-left: 28px; padding-right: 28px; }
}

@media (max-width: 720px) {
    .vv-aliados__encabezado { padding-left: 20px; padding-right: 20px; }
    .vv-marquesina__marco    { width: 180px; height: 70px; }
    .vv-marquesina__item     { padding: 0 16px; height: 84px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   02 · PROMESA (problema y prueba social)
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-promesa {
    background: var(--vv-blanco);
    padding: 96px var(--vv-margen);
}

.vv-promesa__tarjeta {
    max-width: var(--vv-ancho);
    margin: 0 auto;
    background: var(--vv-rosa);
    border-radius: 36px;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(230, 13, 111, 0.26);
}

.vv-promesa__cabecera {
    padding: 76px 72px 64px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 44px;
}

.vv-promesa__titular {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 58px;
    line-height: 1.06;
    letter-spacing: -0.034em;
    color: var(--vv-rosa-pastel);
    max-width: 820px;
    margin: 0;
    text-wrap: balance;
}

.vv-promesa__titular-fuerte {
    color: var(--vv-blanco);
}

.vv-promesa__titular-acento {
    color: var(--vv-amarillo);
}

.vv-promesa__icono {
    width: 150px;
    height: 150px;
    border-radius: 34px;
    background: transparent;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.vv-promesa__icono-imagen {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 34px;
}

.vv-promesa__prueba {
    background: var(--vv-navy-profundo);
    padding: 60px 72px;
    position: relative;
    overflow: hidden;
}

.vv-promesa__resplandor {
    position: absolute;
    left: 16%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 640px;
    height: 640px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(0, 221, 184, 0.2) 0%, rgba(0, 221, 184, 0) 68%);
}

.vv-promesa__prueba-grid {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 56px;
    align-items: center;
}

.vv-promesa__cifra {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 140px;
    line-height: 0.84;
    letter-spacing: -0.055em;
    color: var(--vv-menta);
    white-space: nowrap;
}

.vv-promesa__subtitulo {
    font-family: var(--vv-texto);
    font-weight: 700;
    font-size: 38px;
    line-height: 1.25;
    letter-spacing: -0.014em;
    color: var(--vv-blanco);
    margin-bottom: 14px;
    text-wrap: balance;
}

.vv-promesa__subtitulo-acento {
    color: var(--vv-menta);
}


/* ── Responsive de promesa ──────────────────────────────────────────────── */

/* En el diseño estos valores viven en grupos compartidos con el resto de
   secciones. Aquí se separan por sección porque el archivo crece de una en
   una; el margen lateral va como padding-left/right, igual que el original,
   para no tocar los 96px verticales. */
@media (max-width: 1000px) {
    .vv-promesa              { padding-left: 28px; padding-right: 28px; }
    .vv-promesa__titular     { font-size: 38px; line-height: 1.08; }
    .vv-promesa__cifra       { font-size: 78px; }
    .vv-promesa__prueba-grid { grid-template-columns: 1fr; gap: 24px; }
    .vv-promesa__cabecera    { padding: 48px 36px 40px; flex-direction: column; align-items: flex-start; gap: 28px; }
    .vv-promesa__prueba      { padding: 40px 36px; }
}

@media (max-width: 720px) {
    .vv-promesa              { padding-left: 20px; padding-right: 20px; }
    .vv-promesa__titular     { font-size: 30px; }
    .vv-promesa__cifra       { font-size: 60px; }
        .vv-promesa__cabecera {
        padding: 20px;
        gap: 0;
    }
    .vv-promesa__icono {
        width: 200px;
        height: 200px;
    }
}


/* El diseño no baja de los 720px, pero los teléfonos reales miden 360-430.
   Por debajo de ~520px las cifras grandes (que son un solo token y no pueden
   partirse) y las tarjetas en fila dejan de caber y se salían de su caja.
   Estas reglas escalan la tipografía con el ancho: por encima de 520px el
   clamp() devuelve el valor del diseño, así que no cambian nada. */

@media (max-width: 520px) {

    /* "+30.000" a 60px pedía 232px y a 320px la caja da 208.
       El subtítulo se quedaba en los 38px de escritorio —más grande que el
       propio titular de la sección, que sí baja a 30— y "transformaron" no
       cabía de ancho. */
    .vv-promesa__cifra       { font-size: clamp(40px, 15vw, 60px); }
    .vv-promesa__subtitulo   { font-size: clamp(24px, 8.5vw, 38px); }
}


@media (prefers-reduced-motion: reduce) {

    .vv-marquesina__pista { animation: none !important; }
}



/* ═══════════════════════════════════════════════════════════════════════════
   03 · PASOS
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-pasos {
    background: var(--vv-gris-200);
    padding: 112px var(--vv-margen);
}

.vv-pasos__contenedor {
    max-width: var(--vv-ancho);
    margin: 0 auto;
}

.vv-pasos__titulo {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 62px;
    line-height: 1.04;
    letter-spacing: -0.032em;
    color: var(--vv-navy);
    margin-bottom: 58px;
    max-width: 900px;
    text-wrap: balance;
}

.vv-pasos__titulo-resalte {
    color: var(--vv-rosa);
}

.vv-pasos__riel {
    position: relative;
    height: 14px;
    margin: 0 12.5% 26px;
    pointer-events: none;
}

.vv-pasos__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch;
}

.vv-pasos__tarjeta {
    background: var(--vv-blanco);
    border-radius: 24px;
    padding: 38px 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(42, 45, 82, 0.05);
    transition: box-shadow 260ms var(--vv-ease), transform 260ms var(--vv-ease),
                border-color 200ms ease;
}

.vv-pasos__tarjeta:hover {
    box-shadow: 0 18px 44px rgba(42, 45, 82, 0.13);
    transform: translateY(-6px);
}

.vv-pasos__tarjeta--destacada {
    background: var(--vv-navy);
    box-shadow: 0 18px 44px rgba(42, 45, 82, 0.22);
}

.vv-pasos__tarjeta--destacada:hover {
    box-shadow: 0 18px 44px rgba(42, 45, 82, 0.22);
    transform: none;
}

.vv-pasos__numero {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 46px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--vv-rosa);
    margin-bottom: 30px;
}

.vv-pasos__numero--destacado {
    color: var(--vv-amarillo);
}

.vv-pasos__nombre {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 25px;
    line-height: 1.14;
    letter-spacing: -0.022em;
    color: var(--vv-navy);
    margin-bottom: 14px;
}

.vv-pasos__nombre--destacado {
    color: var(--vv-blanco);
}

.vv-pasos__descripcion {
    font-family: var(--vv-texto);
    font-size: 15px;
    line-height: 1.62;
    color: var(--vv-gris-700);
}

.vv-pasos__descripcion--destacada {
    color: rgba(255, 255, 255, 0.68);
}


/* ── Responsive de pasos ────────────────────────────────────────────────── */

@media (max-width: 1180px) {
    .vv-pasos__grid          { grid-template-columns: repeat(2, 1fr); }
    .vv-pasos__riel          { display: none; }
}

@media (max-width: 1000px) {
    .vv-pasos                { padding-left: 28px; padding-right: 28px; }
    .vv-pasos__titulo        { font-size: 38px; line-height: 1.08; }
}

@media (max-width: 720px) {
    .vv-pasos                { padding-left: 20px; padding-right: 20px; }
    .vv-pasos__titulo        { font-size: 30px; }
    .vv-pasos__grid          { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {

    .vv-landing--anim .vv-pasos__tarjeta,
    .vv-landing--anim .vv-pasos__numero {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   04 · EXPLORA (calculadora de presupuesto)
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-explora {
    background: var(--vv-navy-profundo);
    padding: 76px var(--vv-margen);
    position: relative;
    overflow: hidden;
}

.vv-explora__resplandor {
    position: absolute;
    right: -200px;
    top: -180px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(230, 13, 111, 0.34) 0%, rgba(230, 13, 111, 0) 70%);
}

.vv-explora__contenedor {
    max-width: var(--vv-ancho);
    margin: 0 auto;
    position: relative;
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 56px;
    align-items: center;
}

.vv-explora__titulo {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 54px;
    line-height: 1.02;
    letter-spacing: -0.032em;
    color: var(--vv-blanco);
    margin: 0 0 20px;
    text-wrap: balance;
}

.vv-explora__titulo-resalte {
    color: var(--vv-amarillo);
}

.vv-explora__descripcion {
    font-family: var(--vv-texto);
    font-size: 18.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
    max-width: 420px;
    margin: 0;
    text-wrap: pretty;
}

.vv-explora__panel {
    background: var(--vv-blanco);
    border-radius: 26px;
    padding: 34px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.3);
}

.vv-explora__pregunta {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
}

.vv-explora__pregunta-icono {
    color: var(--vv-rosa);
    flex-shrink: 0;
}

.vv-explora__pregunta-texto {
    font-family: var(--vv-texto);
    font-weight: 500;
    font-size: 14px;
    color: var(--vv-navy);
}

.vv-explora__monto {
    background: var(--vv-rosa-suave);
    border-radius: 18px;
    padding: 20px;
    text-align: center;
    margin-bottom: 18px;
}

.vv-explora__monto-valor {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.038em;
    color: var(--vv-navy);
}

.vv-explora__monto-nota {
    font-family: var(--vv-texto);
    font-weight: 600;
    font-size: 12px;
    color: var(--vv-rosa);
    margin-top: 6px;
}

/* — Slider de presupuesto — */

.vv-explora__rango {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--vv-gris-350);
    outline: none;
    cursor: pointer;
    display: block;
    margin: 0;
}

.vv-explora__rango::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--vv-rosa);
    border: 4px solid var(--vv-blanco);
    box-shadow: 0 3px 12px rgba(230, 13, 111, 0.5);
    cursor: pointer;
    margin-top: -9px;
}

.vv-explora__rango::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--vv-rosa);
    border: 4px solid var(--vv-blanco);
    cursor: pointer;
}

.vv-explora__limites {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 22px;
}

.vv-explora__limite {
    font-family: var(--vv-texto);
    font-size: 12px;
    color: var(--vv-gris-600);
}

/* — Filtros — */

.vv-explora__filtros {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 22px;
    align-items: start;
}

.vv-explora__filtro {
    position: relative;
}

.vv-explora__filtro-cabecera {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
}

.vv-explora__filtro-icono {
    color: var(--vv-rosa);
    flex-shrink: 0;
}

.vv-explora__filtro-etiqueta {
    font-family: var(--vv-texto);
    font-size: 12px;
    color: var(--vv-gris-700);
}

.vv-explora__selector {
    border: 1px solid var(--vv-gris-350);
    border-radius: 999px;
    padding: 11px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    transition: var(--vv-transicion);
}

.vv-explora__selector:hover {
    border-color: var(--vv-navy);
}

.vv-explora__selector-valor {
    font-family: var(--vv-texto);
    font-weight: 600;
    font-size: 13px;
    color: var(--vv-navy);
    white-space: nowrap;
}

.vv-explora__selector-valor--truncado {
    overflow: hidden;
    text-overflow: ellipsis;
}

.vv-explora__selector-flecha {
    color: var(--vv-gris-700);
    flex-shrink: 0;
    transition: transform 240ms var(--vv-ease);
}

.vv-explora__selector--abierto .vv-explora__selector-flecha {
    transform: rotate(180deg);
}

/* Desplegable de propósito */
.vv-explora__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 40;
    background: var(--vv-blanco);
    border: 1px solid var(--vv-gris-350);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(42, 45, 82, 0.18);
    overflow: hidden;
    display: none;
}

.vv-explora__menu--abierto {
    display: block;
}

.vv-explora__opcion {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #F5F5F8;
    transition: background-color 140ms ease;
}

.vv-explora__opcion:last-child {
    border-bottom: none;
}

.vv-explora__opcion:hover {
    background: var(--vv-rosa-suave);
}

.vv-explora__opcion-titulo {
    font-family: var(--vv-texto);
    font-weight: 600;
    font-size: 13px;
    color: var(--vv-navy);
}

.vv-explora__opcion-nota {
    font-family: var(--vv-texto);
    font-size: 11.5px;
    color: #9A9CAE;
    margin-top: 2px;
}


/* Añadidos sobre el diseño, que sólo contemplaba desplegables de tres opciones
   fijas. El de ciudad se llena desde la API y puede traer muchas, así que
   necesita scroll propio. El tope de aquí es sólo la red: theme.js recalcula
   el alto contra el borde de la sección cada vez que se abre, porque la
   sección recorta (overflow:hidden) y el menú se saldría por abajo. */
.vv-explora__menu {
    max-height: 264px;
    overflow-y: auto;
}

/* El diseño construye los selectores con <div>, así que no hay foco visible.
   Se añade uno para que la sección se pueda usar con teclado; sólo aparece en
   navegación por tabulador, nunca al hacer clic. */
.vv-explora__selector:focus-visible,
.vv-explora__opcion:focus-visible {
    outline: 2px solid var(--vv-rosa);
    outline-offset: 2px;
}


/* ── Responsive de explora ──────────────────────────────────────────────── */

@media (max-width: 1000px) {
    .vv-explora              { padding-left: 28px; padding-right: 28px; }
    .vv-explora__titulo      { font-size: 38px; line-height: 1.08; }
    .vv-explora__contenedor  { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 720px) {
    .vv-explora              { padding-left: 20px; padding-right: 20px; }
    .vv-explora__titulo      { font-size: 30px; }
    .vv-explora__filtros     { grid-template-columns: 1fr; }
}


@media (max-width: 520px) {

    /* El monto calculado ("$3.000.000" a 42px = 240px) desbordaba la caja rosa
       a partir de 390px de pantalla. Se recorta también el padding de 20px,
       que a 320px se comía la mitad del ancho útil. */
    .vv-explora__monto       { padding: 16px 12px; }
    .vv-explora__monto-valor { font-size: clamp(24px, 10vw, 42px); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   05 · TRAYECTORIA
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-trayectoria {
    background: var(--vv-blanco);
    padding: 120px var(--vv-margen);
}

.vv-trayectoria__contenedor {
    max-width: var(--vv-ancho);
    margin: 0 auto;
}

.vv-trayectoria__titulo {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 60px;
    line-height: 1.04;
    letter-spacing: -0.032em;
    color: var(--vv-navy);
    text-align: center;
    max-width: 900px;
    margin: 0 auto 22px;
    text-wrap: balance;
}

.vv-trayectoria__titulo-resalte {
    color: var(--vv-rosa);
}

.vv-trayectoria__sello-caja {
    display: flex;
    justify-content: center;
    margin: 0 auto 60px;
}

.vv-trayectoria__sello {
    background: var(--vv-amarillo);
    border-radius: 999px;
    padding: 15px 32px;
    font-family: var(--vv-texto);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.014em;
    line-height: 1.2;
    color: var(--vv-rosa);
    text-align: center;
}

.vv-trayectoria__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 920px;
    margin: 0 auto;
}

.vv-trayectoria__tarjeta {
    background: var(--vv-gris-200);
    border-radius: 28px;
    padding: 44px 40px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.vv-trayectoria__icono {
    width: 104px;
    height: 104px;
    border-radius: 26px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--vv-rosa);
    position: relative;
}

.vv-trayectoria__icono-imagen {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 26px;
}

.vv-trayectoria__cifra {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 60px;
    line-height: 1;
    letter-spacing: -0.042em;
    color: var(--vv-navy);
}

.vv-trayectoria__leyenda {
    font-family: var(--vv-texto);
    font-weight: 500;
    font-size: 16.5px;
    color: var(--vv-gris-800);
    margin-top: 10px;
    line-height: 1.4;
}


/* ── Responsive de trayectoria ──────────────────────────────────────────── */

@media (max-width: 1000px) {
    .vv-trayectoria          { padding-left: 28px; padding-right: 28px; }
    .vv-trayectoria__titulo  { font-size: 38px; line-height: 1.08; }
    .vv-trayectoria__cifra   { font-size: 78px; }
    .vv-trayectoria__grid    { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 720px) {
    .vv-trayectoria          { padding-left: 20px; padding-right: 20px; }
    .vv-trayectoria__titulo  { font-size: 30px; }
    .vv-trayectoria__cifra   { font-size: 60px; }
}


@media (max-width: 520px) {

    /* La tarjeta es una fila icono(104) + hueco(28) + cifra(237) que necesita
       449px de ancho contando el padding; por debajo de ~490px la cifra se
       salía de la tarjeta y de la pantalla ("+20.000" se leía "+20.00").
       Se apila en columna, que es lo que hace el resto del diseño a este
       ancho, y así la cifra dispone de todo el ancho de la tarjeta. */
    .vv-trayectoria__tarjeta {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 32px 26px;
    }

    .vv-trayectoria__cifra   { font-size: clamp(42px, 15vw, 60px); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   06 · DIFERENCIALES (por qué Viventa)
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-diferenciales {
    background: var(--vv-gris-200);
    padding: 120px var(--vv-margen);
}

.vv-diferenciales__contenedor {
    max-width: var(--vv-ancho);
    margin: 0 auto;
}

.vv-diferenciales__titulo {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 62px;
    line-height: 1.02;
    letter-spacing: -0.032em;
    color: var(--vv-navy);
    margin-bottom: 60px;
    max-width: 820px;
}

.vv-diferenciales__titulo-resalte {
    color: var(--vv-rosa);
}

.vv-diferenciales__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
    align-items: stretch;
}

.vv-diferenciales__tarjeta {
    background: var(--vv-blanco);
    border: 1px solid var(--vv-gris-350);
    border-radius: 28px;
    padding: 44px 38px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 260ms var(--vv-ease), transform 260ms var(--vv-ease),
                border-color 200ms ease;
}

.vv-diferenciales__tarjeta:hover {
    box-shadow: 0 20px 48px rgba(42, 45, 82, 0.12);
    border-color: var(--vv-gris-450);
    transform: translateY(-4px);
}

.vv-diferenciales__tarjeta--principal {
    background: var(--vv-rosa);
    border: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 56px rgba(230, 13, 111, 0.28);
}

.vv-diferenciales__tarjeta--principal:hover {
    box-shadow: 0 24px 56px rgba(230, 13, 111, 0.28);
    transform: none;
}

.vv-diferenciales__icono {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 26px;
    margin-bottom: auto;
    overflow: hidden;
}

.vv-diferenciales__icono--translucido { background: rgba(255, 255, 255, 0.16); }
.vv-diferenciales__icono--menta       { background: var(--vv-menta); }
.vv-diferenciales__icono--lila        { background: var(--vv-lila); }

.vv-diferenciales__icono-imagen {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 24px;
}

.vv-diferenciales__cuerpo {
    position: relative;
    margin-top: 44px;
}

.vv-diferenciales__nombre {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 29px;
    line-height: 1.14;
    letter-spacing: -0.024em;
    color: var(--vv-navy);
    margin-bottom: 14px;
}

.vv-diferenciales__nombre--claro {
    color: var(--vv-blanco);
}

.vv-diferenciales__descripcion {
    font-family: var(--vv-texto);
    font-size: 16px;
    line-height: 1.6;
    color: var(--vv-gris-800);
}

.vv-diferenciales__descripcion--clara {
    color: rgba(255, 255, 255, 0.92);
}

.vv-diferenciales__enfasis {
    font-weight: 600;
    color: var(--vv-navy);
}

.vv-diferenciales__enfasis--amarillo {
    font-weight: 700;
    color: var(--vv-amarillo);
}

.vv-diferenciales__enfasis--menta {
    font-weight: 700;
    color: var(--vv-menta);
}

/* — Nota de acompañamiento financiero — */

.vv-diferenciales__nota {
    background: var(--vv-navy-profundo);
    border-radius: 28px;
    padding: 52px 56px;
    position: relative;
    overflow: hidden;
}

.vv-diferenciales__nota-resplandor {
    position: absolute;
    right: -140px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(0, 221, 184, 0.2) 0%, rgba(0, 221, 184, 0) 70%);
}

.vv-diferenciales__nota-grid {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 44px;
    align-items: center;
}

.vv-diferenciales__nota-icono {
    width: 78px;
    height: 78px;
    border-radius: 24px;
    background: rgba(0, 221, 184, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--vv-menta);
}

.vv-diferenciales__nota-titulo {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 34px;
    line-height: 1.14;
    letter-spacing: -0.026em;
    color: var(--vv-blanco);
    margin-bottom: 14px;
}

.vv-diferenciales__nota-texto {
    font-family: var(--vv-texto);
    font-size: 17px;
    line-height: 1.62;
    color: rgba(255, 255, 255, 0.72);
    max-width: 820px;
    text-wrap: pretty;
}


/* ── Responsive de diferenciales ────────────────────────────────────────── */

@media (max-width: 1000px) {
    .vv-diferenciales             { padding-left: 28px; padding-right: 28px; }
    .vv-diferenciales__titulo     { font-size: 38px; line-height: 1.08; }
    .vv-diferenciales__grid,
    .vv-diferenciales__nota-grid  { grid-template-columns: 1fr; gap: 24px; }
    .vv-diferenciales__nota       { padding: 40px 32px; }
}

@media (max-width: 720px) {
    .vv-diferenciales             { padding-left: 20px; padding-right: 20px; }
    .vv-diferenciales__titulo     { font-size: 30px; }
    .vv-diferenciales__nota-grid  { gap: 24px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   07 · PROYECTOS — sección
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-proyectos {
    background: var(--vv-blanco);
    padding: 112px var(--vv-margen);
}

.vv-proyectos__contenedor {
    max-width: var(--vv-ancho);
    margin: 0 auto;
}

.vv-proyectos__encabezado {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.vv-proyectos__titulo {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 60px;
    line-height: 1;
    letter-spacing: -0.032em;
    color: var(--vv-navy);
    max-width: 700px;
    margin: 0;
}

.vv-proyectos__titulo-resalte {
    color: var(--vv-rosa);
}

.vv-proyectos__enlace {
    font-family: var(--vv-texto);
    font-weight: 600;
    font-size: 15.5px;
    color: var(--vv-rosa);
    padding-bottom: 10px;
    white-space: nowrap;
}

.vv-proyectos__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

/* — Banner de inmueble usado — */

.vv-proyectos__usado {
    margin-top: 24px;
    background: var(--vv-gris-200);
    border-radius: 28px;
    padding: 44px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
}

.vv-proyectos__usado-cuerpo {
    display: flex;
    align-items: center;
    gap: 32px;
    flex: 1;
    min-width: 420px;
}

.vv-proyectos__usado-icono {
    width: 150px;
    height: 150px;
    border-radius: 30px;
    background: var(--vv-navy);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.vv-proyectos__usado-imagen {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 30px;
}

.vv-proyectos__usado-titulo {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.12;
    letter-spacing: -0.026em;
    color: var(--vv-navy);
    margin-bottom: 10px;
}

.vv-proyectos__usado-descripcion {
    font-family: var(--vv-texto);
    font-size: 16px;
    line-height: 1.6;
    color: var(--vv-gris-800);
    max-width: 600px;
    text-wrap: pretty;
}


/* ═══════════════════════════════════════════════════════════════════════════
   07b · PROYECTO — tarjeta (bloque independiente y reutilizable)
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-proyecto {
    border: 1px solid var(--vv-gris-350);
    border-radius: 24px;
    overflow: hidden;
    background: var(--vv-blanco);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: box-shadow 260ms var(--vv-ease), transform 260ms var(--vv-ease),
                border-color 200ms ease;
}

.vv-proyecto:hover {
    box-shadow: 0 22px 50px rgba(42, 45, 82, 0.14);
    border-color: var(--vv-gris-450);
    transform: translateY(-6px);
}

.vv-proyecto__media {
    position: relative;
    height: 230px;
    background: var(--vv-gris-300);
}

.vv-proyecto__imagen {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.vv-proyecto__sello-caja {
    position: absolute;
    top: 16px;
    right: 16px;
    pointer-events: none;
}

.vv-proyecto__sello {
    background: var(--vv-blanco);
    border-radius: 999px;
    padding: 7px 14px 7px 10px;
    box-shadow: 0 4px 14px rgba(42, 45, 82, 0.14);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.vv-proyecto__sello-icono {
    color: var(--vv-menta-oscura);
    flex-shrink: 0;
}

.vv-proyecto__sello-texto {
    font-family: var(--vv-texto);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--vv-navy);
}

.vv-proyecto__cuerpo {
    padding: 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.vv-proyecto__zona {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

.vv-proyecto__zona-icono {
    color: var(--vv-rosa);
    flex-shrink: 0;
}

.vv-proyecto__zona-texto {
    font-family: var(--vv-texto);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--vv-rosa);
}

/* Titular "Ciudad - Barrio" (TASK 1284). El margen inferior era 6px cuando
   debajo iba el nombre del proyecto, que a su vez separaba 18px de la fila de
   specs. Al quitarse el nombre, ese hueco pasa aquí: si no, el titular quedaba
   pegado a las habitaciones y la tarjeta perdía 18px de alto. */
.vv-proyecto__ciudad {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 33px;
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: var(--vv-navy);
    margin-bottom: 18px;
}

.vv-proyecto__specs {
    display: flex;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--vv-gris-250);
    margin-bottom: 18px;
}

.vv-proyecto__spec {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--vv-texto);
    font-weight: 500;
    font-size: 14px;
    color: var(--vv-gris-900);
}

.vv-proyecto__spec-icono {
    color: var(--vv-gris-700);
    flex-shrink: 0;
}

.vv-proyecto__cuota {
    background: var(--vv-rosa-suave);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.vv-proyecto__cuota-etiqueta {
    font-family: var(--vv-texto);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--vv-rosa);
    margin-bottom: 6px;
}

.vv-proyecto__cuota-valor {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 25px;
    line-height: 1;
    letter-spacing: -0.026em;
    color: var(--vv-rosa);
}

.vv-proyecto__precio {
    margin-bottom: 20px;
}

.vv-proyecto__precio-etiqueta {
    font-family: var(--vv-texto);
    font-size: 13px;
    color: var(--vv-gris-600);
    margin-bottom: 4px;
}

.vv-proyecto__precio-valor {
    font-family: var(--vv-texto);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.01em;
    color: var(--vv-navy);
}

.vv-proyecto__accion {
    margin-top: auto;
    font-size: 15px;
    padding: 15px 24px;
}


/* Añadido sobre el diseño: los proyectos vienen del servicio, así que hay un
   instante de carga que la maqueta estática no contemplaba. */
.vv-proyectos__cargando {
    font-family: var(--vv-texto);
    font-size: 16px;
    color: var(--vv-gris-700);
    text-align: center;
    padding: 48px 0;
}


/* ── Responsive de proyectos ────────────────────────────────────────────── */

@media (max-width: 1000px) {
    .vv-proyectos                { padding-left: 28px; padding-right: 28px; }
    .vv-proyectos__titulo        { font-size: 38px; line-height: 1.08; }
    .vv-proyectos__grid          { grid-template-columns: 1fr; gap: 24px; }
    .vv-proyectos__usado         { padding: 32px 28px; }
    .vv-proyectos__usado-cuerpo  { min-width: 0; }
}

@media (max-width: 720px) {
    .vv-proyectos                { padding-left: 20px; padding-right: 20px; }
    .vv-proyectos__titulo        { font-size: 30px; }
    .vv-proyectos__usado-cuerpo  { flex-direction: column; align-items: flex-start; gap: 20px; }

    /* .vv-proyectos__usado es flex-wrap: wrap y contaba con el min-width:420px
       del cuerpo para que el botón bajara de línea cuando no cupiera. Pero a
       partir de 1000px el diseño pone ese min-width a 0, con lo que el wrap ya
       no salta nunca: el botón se queda a lo ancho y aplasta el texto (a 430px
       el cuerpo quedaba en 20px con 177px de contenido, ilegible).
       Se apila explícitamente y el CTA pasa a ocupar el ancho completo. */
    .vv-proyectos__usado         { flex-direction: column; align-items: stretch; gap: 24px; }
    .vv-proyectos__usado-cuerpo  { flex: 0 0 auto; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   08 · ECOSISTEMA
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-ecosistema {
    background: var(--vv-navy-profundo);
    padding: 92px var(--vv-margen);
    position: relative;
    overflow: hidden;
}

.vv-ecosistema__resplandor {
    position: absolute;
    left: -200px;
    bottom: -240px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(0, 221, 184, 0.14) 0%, rgba(0, 221, 184, 0) 70%);
}

.vv-ecosistema__contenedor {
    max-width: var(--vv-ancho);
    margin: 0 auto;
    position: relative;
    text-align: center;
}

.vv-ecosistema__titulo {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 54px;
    line-height: 1.04;
    letter-spacing: -0.032em;
    color: var(--vv-blanco);
    margin: 0 auto 18px;
    max-width: 780px;
    text-wrap: balance;
}

.vv-ecosistema__titulo-resalte {
    color: var(--vv-menta);
}

.vv-ecosistema__descripcion {
    font-family: var(--vv-texto);
    font-size: 18.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
    max-width: 700px;
    margin: 0 auto 52px;
    text-wrap: pretty;
}

.vv-ecosistema__enfasis {
    font-weight: 700;
    color: var(--vv-blanco);
}

.vv-ecosistema__flujo {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 52px;
}

.vv-ecosistema__paso {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 124px;
}

.vv-ecosistema__icono {
    position: relative;
    width: 82px;
    height: 82px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    overflow: hidden;
    box-shadow: none;
}

.vv-ecosistema__icono--rosa {
    background: var(--vv-rosa);
    border-color: var(--vv-rosa);
    box-shadow: 0 8px 22px rgba(230, 13, 111, 0.4);
}

.vv-ecosistema__icono--menta {
    background: rgba(0, 221, 184, 0.16);
    border-color: rgba(0, 221, 184, 0.3);
    box-shadow: 0 8px 22px rgba(0, 221, 184, 0.32);
}

.vv-ecosistema__icono--amarillo {
    background: var(--vv-amarillo);
    border-color: var(--vv-amarillo);
    box-shadow: 0 8px 22px rgba(255, 235, 55, 0.32);
}

.vv-ecosistema__imagen {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 24px;
}

.vv-ecosistema__nombre {
    font-family: var(--vv-texto);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.3;
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
}

.vv-ecosistema__nombre--rosa {
    font-weight: 600;
    color: var(--vv-blanco);
}

.vv-ecosistema__nombre--menta {
    font-weight: 600;
    color: var(--vv-menta);
}

.vv-ecosistema__nombre--amarillo {
    font-weight: 600;
    color: var(--vv-amarillo);
}

.vv-ecosistema__flecha {
    margin-top: 33px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.28);
}


/* ═══════════════════════════════════════════════════════════════════════════
   09 · HISTORIAS — sección
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-historias {
    background: var(--vv-gris-150);
    padding: 112px var(--vv-margen);
}

.vv-historias__contenedor {
    max-width: var(--vv-ancho);
    margin: 0 auto;
}

.vv-historias__titulo {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 58px;
    line-height: 1.02;
    letter-spacing: -0.032em;
    color: var(--vv-navy);
    margin-bottom: 16px;
    max-width: 820px;
    text-wrap: balance;
}

.vv-historias__titulo-resalte {
    color: var(--vv-rosa);
}

.vv-historias__descripcion {
    font-family: var(--vv-texto);
    font-size: 18.5px;
    line-height: 1.6;
    color: var(--vv-gris-800);
    max-width: 600px;
    margin-bottom: 56px;
    text-wrap: pretty;
}

.vv-historias__grid {
    display: grid;
    grid-template-columns: 1.18fr 0.82fr;
    gap: 24px;
    align-items: stretch;
}

/* — Columna de video — */

.vv-historias__video {
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
}

.vv-historias__marco {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    background: var(--vv-navy-noche);
    width: 100%;
    flex: 1;
    min-height: 560px;
}

.vv-historias__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.vv-historias__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.vv-historias__autor-nombre {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.16;
    letter-spacing: -0.022em;
    color: var(--vv-navy);
    margin-bottom: 4px;
}

.vv-historias__autor-rol {
    font-family: var(--vv-texto);
    font-size: 14.5px;
    color: var(--vv-gris-700);
}

.vv-historias__navegacion {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.vv-historias__nav-boton {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--vv-blanco);
    border: 1px solid var(--vv-gris-350);
    box-shadow: 0 4px 14px rgba(42, 45, 82, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--vv-navy);
    transition: var(--vv-transicion);
}

.vv-historias__nav-boton:hover {
    border-color: var(--vv-navy);
}

.vv-historias__testimonios {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-self: start;
}

/* — Bloque de medios — */

.vv-historias__medios {
    margin-top: 32px;
    background: var(--vv-navy-profundo);
    border-radius: 28px;
    padding: 52px 48px;
}

.vv-historias__medios-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.vv-historias__medios-titulo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vv-historias__medios-linea {
    width: 30px;
    height: 2px;
    background: var(--vv-rosa);
    flex-shrink: 0;
}

.vv-historias__medios-texto {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.022em;
    color: var(--vv-blanco);
}

.vv-historias__medios-kicker {
    font-family: var(--vv-texto);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

.vv-historias__carrusel {
    position: relative;
}

.vv-historias__viewport {
    overflow: hidden;
}

.vv-historias__pista {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: vv-desplazar var(--vv-medios-duracion) linear infinite;
}

.vv-historias__pista:hover {
    animation-play-state: paused;
}

.vv-historias__control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--vv-blanco);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    color: var(--vv-navy);
}

.vv-historias__control--anterior  { left: -18px; }
.vv-historias__control--siguiente { right: -18px; }


/* ═══════════════════════════════════════════════════════════════════════════
   09b · TESTIMONIO — tarjeta (bloque independiente)
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-testimonio {
    background: var(--vv-blanco);
    border: 1px solid var(--vv-gris-500);
    border-radius: 26px;
    padding: 26px 30px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 260ms var(--vv-ease), transform 260ms var(--vv-ease),
                border-color 200ms ease;
}

.vv-testimonio:hover {
    box-shadow: 0 18px 44px rgba(42, 45, 82, 0.1);
    transform: translateY(-4px);
}

.vv-testimonio__cabecera {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.vv-testimonio__aro {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
    padding: 3px;
    background: var(--vv-rosa-aro);
    position: relative;
}

.vv-testimonio__avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--vv-rosa-suave);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 24px;
    color: var(--vv-rosa);
}

.vv-testimonio__avatar--menta {
    background: var(--vv-menta-fondo);
    color: var(--vv-menta-oscura);
}

.vv-testimonio__nombre {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--vv-navy);
    margin-bottom: 6px;
}

.vv-testimonio__ubicacion {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}

.vv-testimonio__ubicacion-icono {
    color: var(--vv-gris-700);
    flex-shrink: 0;
}

.vv-testimonio__ubicacion-texto {
    font-family: var(--vv-texto);
    font-size: 14px;
    color: var(--vv-gris-700);
}

.vv-testimonio__proyecto {
    font-family: var(--vv-texto);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--vv-rosa);
}

.vv-testimonio__cita {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.vv-testimonio__comillas {
    flex-shrink: 0;
    margin-top: 5px;
    color: var(--vv-rosa-aro);
}

.vv-testimonio__texto {
    font-family: var(--vv-texto);
    font-size: 16.5px;
    line-height: 1.58;
    color: var(--vv-navy);
    margin: 0;
    text-wrap: pretty;
}


/* ═══════════════════════════════════════════════════════════════════════════
   09c · MEDIO — tarjeta de prensa (bloque independiente)
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-medio {
    width: 376px;
    flex-shrink: 0;
    background: var(--vv-blanco);
    border: 1px solid var(--vv-gris-350);
    border-radius: 22px;
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    min-height: 230px;
    cursor: pointer;
}

.vv-medio__marco {
    width: 212px;
    height: 74px;
    margin-bottom: 22px;
    position: relative;
    background: var(--vv-blanco);
}

.vv-medio__logo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.vv-medio__cita {
    font-family: var(--vv-texto);
    font-size: 16.5px;
    line-height: 1.5;
    color: var(--vv-gris-900);
    flex: 1;
    margin: 0;
}

.vv-medio__enlace {
    font-family: var(--vv-texto);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--vv-rosa);
    margin-top: 22px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10 · IMPACTO SOCIAL
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-impacto {
    background: var(--vv-blanco);
    padding: 112px var(--vv-margen);
    position: relative;
    overflow: hidden;
}

.vv-impacto__contenedor {
    max-width: var(--vv-ancho);
    margin: 0 auto;
    position: relative;
}

.vv-impacto__encabezado {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 60px;
}

.vv-impacto__titulo {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 60px;
    line-height: 1.02;
    letter-spacing: -0.032em;
    color: var(--vv-navy);
    margin-bottom: 20px;
    text-wrap: balance;
}

.vv-impacto__titulo-resalte {
    color: var(--vv-rosa);
}

.vv-impacto__descripcion {
    font-family: var(--vv-texto);
    font-size: 19px;
    line-height: 1.6;
    color: var(--vv-gris-800);
    margin: 0;
}

.vv-impacto__grid {
    display: grid;
    grid-template-columns: 1.12fr 1fr;
    gap: 24px;
    align-items: stretch;
}

/* El mosaico es 2 columnas x 2 filas: la foto principal ocupa la columna
   ancha entera (las dos filas) y las otras dos se apilan a su derecha. La
   altura la fija el min-height, no un aspect-ratio, para que la galería
   termine a la misma altura que la columna de tarjetas de al lado.

   Ojo con el nombre --ancha: la foto es alta, no ancha. El nombre viene de la
   conversión BEM de partida, que hacía `grid-column: span 2` (foto apaisada
   arriba y las otras dos debajo). Eso no era el diseño. Se conserva el nombre
   para no tener que volver a pegar el HtmlText de la sección. */
.vv-impacto__galeria {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    min-height: 480px;
}

.vv-impacto__foto {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: var(--vv-gris-300);
}

.vv-impacto__foto--ancha {
    grid-row: span 2;
    border-radius: 28px;
}

/* Absoluta a propósito. Si la imagen fuera de flujo, su alto natural marcaría
   el mínimo de la fila y reventaría el mosaico: las filas de 1fr se iban a
   438px en vez de 233 y la galería medía 890px en vez de 480. Así la altura la
   manda el grid y la foto se recorta con object-fit. */
.vv-impacto__imagen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.vv-impacto__columna {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-self: start;
}

/* — Tarjeta de donación — */

.vv-impacto__donacion {
    background: var(--vv-rosa);
    border-radius: 32px;
    padding: 44px 42px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.vv-impacto__donacion-cifra {
    flex-shrink: 0;
}

.vv-impacto__donacion-pre {
    font-family: var(--vv-texto);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--vv-blanco);
    margin-bottom: 4px;
}

.vv-impacto__donacion-numero {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 96px;
    line-height: 0.9;
    letter-spacing: -0.048em;
    color: var(--vv-blanco);
}

.vv-impacto__donacion-post {
    font-family: var(--vv-texto);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--vv-blanco);
    margin-top: 2px;
}

.vv-impacto__donacion-texto {
    font-family: var(--vv-texto);
    font-size: 16.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    text-wrap: pretty;
}

/* — Tarjeta de propósito — */

.vv-impacto__proposito {
    background: var(--vv-rosa-suave);
    border-radius: 32px;
    padding: 36px 34px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vv-impacto__proposito-cabecera {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 26px;
}

.vv-impacto__proposito-icono {
    width: 88px;
    height: 88px;
    border-radius: 26px;
    background: var(--vv-blanco);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.vv-impacto__proposito-imagen {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 26px;
}

.vv-impacto__proposito-frase {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.16;
    letter-spacing: -0.026em;
    color: var(--vv-rosa);
    margin: 0;
    text-wrap: balance;
}

.vv-impacto__proposito-enlace {
    align-self: flex-start;
    font-size: 15.5px;
    padding: 15px 28px;
    gap: 10px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   11 · CTA FINAL (contacto)
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-contacto {
    background: var(--vv-gris-250);
    padding: 112px var(--vv-margen);
    position: relative;
    overflow: hidden;
}

.vv-contacto__contenedor {
    max-width: var(--vv-ancho);
    margin: 0 auto;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.vv-contacto__titulo {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 62px;
    line-height: 0.99;
    letter-spacing: -0.035em;
    color: var(--vv-navy);
    margin-bottom: 22px;
    text-wrap: balance;
}

.vv-contacto__titulo-resalte {
    color: var(--vv-rosa);
}

.vv-contacto__descripcion {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--vv-gris-800);
    max-width: 460px;
    margin-bottom: 32px;
}

.vv-contacto__beneficios {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.vv-contacto__beneficio {
    display: flex;
    align-items: center;
    gap: 9px;
}

.vv-contacto__beneficio-icono {
    color: var(--vv-menta-oscura);
    flex-shrink: 0;
}

.vv-contacto__beneficio-texto {
    font-family: var(--vv-texto);
    font-size: 14.5px;
    color: var(--vv-gris-900);
}

/* — Formulario — */

.vv-contacto__formulario {
    background: var(--vv-blanco);
    border: 1px solid var(--vv-gris-350);
    border-radius: 28px;
    padding: 40px;
    box-shadow: 0 26px 60px rgba(42, 45, 82, 0.14);
}

.vv-contacto__campos {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.vv-contacto__fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.vv-contacto__etiqueta {
    font-family: var(--vv-texto);
    font-weight: 500;
    font-size: 13px;
    color: var(--vv-gris-800);
    display: block;
    margin-bottom: 8px;
}

.vv-contacto__input {
    width: 100%;
    border: 1px solid var(--vv-gris-400);
    border-radius: 14px;
    padding: 15px 18px;
    font-size: 15px;
    color: var(--vv-navy);
    background: var(--vv-gris-100);
    outline: none;
}

.vv-contacto__input:focus-visible {
    border-color: var(--vv-rosa);
    box-shadow: 0 0 0 3px rgba(230, 13, 111, 0.16);
}

.vv-contacto__aviso {
    font-family: var(--vv-texto);
    font-size: 12px;
    line-height: 1.5;
    color: var(--vv-gris-600);
    text-align: center;
    margin-top: 16px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   12 · FAQ
   ═══════════════════════════════════════════════════════════════════════════ */

.vv-faq {
    background: var(--vv-blanco);
    padding: 112px var(--vv-margen);
}

.vv-faq__contenedor {
    max-width: var(--vv-ancho);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 80px;
    align-items: flex-start;
}

.vv-faq__aside {
    position: sticky;
    top: 110px;
}

.vv-faq__kicker {
    font-family: var(--vv-texto);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vv-rosa);
    margin-bottom: 22px;
}

.vv-faq__titulo {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 46px;
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: var(--vv-navy);
    margin-bottom: 28px;
    text-wrap: balance;
}

.vv-faq__ayuda {
    border: 1px solid var(--vv-gris-350);
    border-radius: 20px;
    padding: 26px;
}

.vv-faq__ayuda-titulo {
    font-family: var(--vv-texto);
    font-weight: 600;
    font-size: 15.5px;
    color: var(--vv-navy);
    margin-bottom: 8px;
}

.vv-faq__ayuda-enlace {
    font-family: var(--vv-texto);
    font-weight: 600;
    font-size: 15px;
    color: var(--vv-rosa);
}

.vv-faq__item {
    border-bottom: 1px solid var(--vv-gris-350);
}

.vv-faq__pregunta {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 26px 0;
    gap: 28px;
    text-align: left;
}

.vv-faq__pregunta-texto {
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.35;
    letter-spacing: -0.018em;
    color: var(--vv-navy);
}

/* Botón + / − del acordeón */
.vv-faq__icono {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--vv-gris-250);
    color: var(--vv-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 200ms ease, color 200ms ease;
}

.vv-faq__icono--abierto {
    background: var(--vv-rosa);
    color: var(--vv-blanco);
}

.vv-faq__respuesta {
    display: none;
    padding-bottom: 26px;
}

.vv-faq__respuesta--abierta {
    display: block;
}

.vv-faq__respuesta-texto {
    font-family: var(--vv-texto);
    font-size: 16.5px;
    line-height: 1.62;
    color: var(--vv-gris-800);
    max-width: 660px;
    text-wrap: pretty;
}


/* ── Responsive de ecosistema, historias, impacto, contacto y FAQ ───────── */

@media (max-width: 1180px) {
    .vv-ecosistema__paso     { width: 104px; }
    .vv-ecosistema__icono    { width: 68px; height: 68px; border-radius: 20px; }
    .vv-ecosistema__imagen   { border-radius: 20px; }
    .vv-ecosistema__flecha   { margin-top: 26px; }
}

@media (max-width: 1000px) {
    .vv-ecosistema,
    .vv-historias,
    .vv-impacto,
    .vv-contacto,
    .vv-faq                  { padding-left: 28px; padding-right: 28px; }

    .vv-ecosistema__titulo,
    .vv-historias__titulo,
    .vv-impacto__titulo,
    .vv-contacto__titulo,
    .vv-faq__titulo          { font-size: 38px; line-height: 1.08; }

    .vv-historias__grid,
    .vv-impacto__grid,
    .vv-contacto__contenedor,
    .vv-faq__contenedor      { grid-template-columns: 1fr; gap: 24px; }

    .vv-impacto__donacion-numero { font-size: 78px; }
    /* A este ancho la galería pasa a una sola columna y las tres fotos se
       apilan. Aquí la fila es auto y la imagen va absoluta, así que sin el
       aspect-ratio las cajas quedarían a cero de alto. En escritorio no se
       pone: sobre la celda del grid el ratio le gana al stretch y encogía la
       foto (255px dentro de una fila de 480). El diseño lo resuelve con un
       elemento interno; aquí basta con acotarlo a este ancho. */
    .vv-impacto__galeria     { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; gap: 24px; }
    .vv-impacto__foto--ancha { grid-row: auto; }
    .vv-impacto__foto        { aspect-ratio: 3 / 2; }
    .vv-faq__aside           { position: static; }

    /* El flujo del ecosistema deja de ser una fila con flechas y pasa a rejilla */
    .vv-ecosistema__flujo {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px 12px;
        justify-items: center;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    .vv-ecosistema__flecha   { display: none; }
    .vv-ecosistema__paso     { width: 100%; max-width: 130px; }

    .vv-historias__marco     { min-height: 380px; }
    .vv-historias__medios    { padding: 40px 28px; }
}

@media (max-width: 720px) {
    .vv-ecosistema,
    .vv-historias,
    .vv-impacto,
    .vv-contacto,
    .vv-faq                  { padding-left: 20px; padding-right: 20px; }

    .vv-ecosistema__titulo,
    .vv-historias__titulo,
    .vv-impacto__titulo,
    .vv-contacto__titulo,
    .vv-faq__titulo          { font-size: 30px; }

    .vv-impacto__donacion-numero { font-size: 60px; }
    .vv-contacto__fila       { grid-template-columns: 1fr; }
    .vv-ecosistema__flujo    { grid-template-columns: repeat(2, 1fr); max-width: 300px; }
    .vv-impacto__donacion    { flex-direction: column; align-items: flex-start; gap: 20px; }
    .vv-impacto__proposito-cabecera { flex-direction: column; align-items: flex-start; gap: 18px; }
    .vv-medio                { width: 300px; }
}


@media (max-width: 520px) {

    /* Las flechas del carrusel van en left/right: -18px, o sea 26px metidas
       dentro de la pista. En escritorio rozan el borde de la tarjeta, pero en
       teléfono la pista mide poco más que una tarjeta y tapaban el texto de la
       cita. Se bajan debajo del carrusel, centradas. */
    .vv-historias__carrusel  { padding-bottom: 62px; }

    .vv-historias__control   {
        top: auto;
        bottom: 0;
        transform: none;
    }

    .vv-historias__control--anterior  { left: 50%; margin-left: -52px; }
    .vv-historias__control--siguiente { right: 50%; margin-right: -52px; }
}

@media (prefers-reduced-motion: reduce) {

    .vv-historias__pista { animation: none !important; }
}