/* ==========================================================================
   Secciones de landing de las páginas de marketing — plugin Misc.MarketingPages
   Nacieron con la landing de marca «VIVRI Love Living» (2026-10-13), mockup aprobado por Carlos:
   https://claude.ai/artifact/NHdJn8ptHmrdgAadKzTUZ9
   Markup: Views/Public/_CustomWide.cshtml · bloques: Pages/CustomPageBlocks.cs (Wide) · prefijo vvl-.

   Cada sección es un <section class="vvl …"> suelto: trae sus propios tokens, así marketing puede
   ponerlas en cualquier orden y mezclarlas con los bloques de texto de siempre (prefijo vvp-).
   El fondo lo elige marketing por bloque (vvl-bg-lila / -blanco / -noche) y de él cuelgan los
   colores de lo que hay dentro (--fg, --fg-soft, --accent, --line, --card).
   Titulares: Poppins (la voz de la marca) + Instrument Serif en cursiva para lo que va entre *asteriscos*.
   Todo en px: el tema fija html a 10 px, así que un rem aquí no vale lo que vale en el mockup.
   ========================================================================== */

/* la columna del tema trae 15 px a cada lado: en una página con secciones de landing, van de borde a borde */
.html-vvl-page .master-column-wrapper .col-md-12 { padding-left: 0; padding-right: 0; }
/* en la portada (bloques de página, 2026-10-14) la columna es la del tema: el hueco sale de ella y cada sección va de borde a borde;
   los bloques de texto conservan su columna de lectura (vvp).
   El relleno de 15 px de .col-md-12 es de bootstrap, pero custom.styles.css lo quita (!important) en <=480 px: con
   el hueco ya en 0 el -15 sacaba el bloque 15 px de la pantalla y su contenido (relleno 20) quedaba a 5 px (barrido
   móvil 2026-10-16, #3). Se compensa sólo cuando el relleno existe: el mismo corte que el tema (481 px). */
@media (min-width: 481px) {
    .html-home-page .master-column-wrapper .col-md-12 .vvh-blocks { margin-left: -15px; margin-right: -15px; }
}
/* y el contenido de cada sección se alinea con el resto de la portada (.mr-sec-head: 16 px, más los 15 de la columna cuando existe) */
@media (max-width: 480px) {
    .html-home-page .vvh-blocks .vvl { --vvl-gutter: 16px; }
    .html-home-page .vvh-blocks .vvp { padding-left: 16px; padding-right: 16px; }
}
@media (min-width: 481px) and (max-width: 767px) {
    .html-home-page .vvh-blocks .vvl { --vvl-gutter: 31px; }
    .html-home-page .vvh-blocks .vvp { padding-left: 31px; padding-right: 31px; }
}

.vvl {
    --vvl-night: #140a30;
    --vvl-violet-800: #2b1a6a;
    --vvl-violet: #3b237b;
    --vvl-violet-300: #b9a4f2;
    --vvl-lilac: #f5f1fb;
    --vvl-paper: #ffffff;
    --vvl-ink: #1a1230;
    --vvl-ink-soft: #5d5672;
    --vvl-heart: #e4253c;
    --vvl-dawn: #ffb36b;
    --vvl-sans: var(--mr-font, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    --vvl-serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --vvl-gutter: clamp(20px, 4.5vw, 56px);
    --vvl-radius: 22px;
    --vvl-ease: cubic-bezier(.2, .7, .2, 1);
    --vvl-pad: clamp(72px, 10vw, 140px);
    --vvl-gap: clamp(36px, 5vw, 64px);

    --bg: var(--vvl-paper);
    --fg: var(--vvl-ink);
    --fg-soft: var(--vvl-ink-soft);
    --accent: var(--vvl-violet);
    --line: #e3dcf2;
    --card: var(--vvl-lilac);
    --chip: var(--vvl-lilac);

    position: relative;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--vvl-sans);
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: normal;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    scroll-margin-top: 96px;
}
.vvl-bg-lila { --bg: var(--vvl-lilac); --card: var(--vvl-paper); --chip: var(--vvl-lilac); }
.vvl-bg-blanco { --bg: var(--vvl-paper); --card: var(--vvl-lilac); --chip: var(--vvl-paper); }
.vvl-bg-noche {
    --bg: var(--vvl-night); --fg: #fff; --fg-soft: rgba(255, 255, 255, .74); --accent: var(--vvl-dawn);
    --line: rgba(255, 255, 255, .2); --card: rgba(255, 255, 255, .07); --chip: rgba(255, 255, 255, .1);
}

.vvl *, .vvl *::before, .vvl *::after { box-sizing: border-box; }
.vvl img { display: block; max-width: 100%; border: 0; }
/* con :where() el reinicio no le gana a las piezas de abajo (el relleno de una tarjeta, por ejemplo) */
.vvl :where(h1, h2, h3, p, figure, blockquote, ul) { margin: 0; padding: 0; }
.vvl :where(ul) { list-style: none; }
.vvl a { color: inherit; text-decoration: none; }
.vvl small { font-size: inherit; }
.vvl :focus-visible { outline: 3px solid var(--vvl-dawn); outline-offset: 3px; }
.vvl-wrap { width: min(1240px, 100% - 2 * var(--vvl-gutter)); margin-inline: auto; }
/* cada tarjeta de un grupo es un ancla («#sec-b6»): que no quede debajo de la cabecera */
.vvl [id^="sec-"] { scroll-margin-top: 96px; }

/* aire: una sección trae el suyo arriba y abajo; dos seguidas del mismo fondo no lo doblan */
.vvl-sec { padding-block: var(--vvl-pad); }
.vvl-bg-lila + .vvl-bg-lila, .vvl-bg-blanco + .vvl-bg-blanco, .vvl-bg-noche + .vvl-bg-noche { padding-top: 0; }
.vvl-sec.vvl-head { padding-bottom: var(--vvl-gap); }

/* ---------- Piezas comunes ---------- */
.vvl .vvl-h {
    font-family: var(--vvl-sans); font-weight: 600; letter-spacing: -.025em; line-height: 1.02; color: var(--fg);
    text-transform: none; text-wrap: balance;
}
.vvl .vvl-h em, .vvl .vvl-big em { font-family: var(--vvl-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.1em; color: var(--accent); }
.vvl .vvl-h--s { font-size: clamp(30.4px, 3.4vw, 44.8px); }
.vvl .vvl-h--m { font-size: clamp(33.6px, 4.4vw, 59.2px); }
.vvl .vvl-h--l { font-size: clamp(35.2px, 5vw, 67.2px); }
.vvl .vvl-h--xl { font-size: clamp(38.4px, 5.6vw, 76.8px); }
.vvl .vvl-p { font-size: 16px; line-height: 1.6; color: var(--fg-soft); max-width: 34em; }
.vvl-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11.84px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; line-height: 1.3; color: var(--accent); }
.vvl-eyebrow::before { content: ""; flex: 0 0 9px; width: 9px; height: 9px; background: var(--vvl-heart); clip-path: path("M4.5 8.2C1.4 6 0 4.4 0 2.7 0 1.2 1.1.2 2.4.2c.9 0 1.7.5 2.1 1.2C4.9.7 5.7.2 6.6.2 7.9.2 9 1.2 9 2.7c0 1.7-1.4 3.3-4.5 5.5z"); }
.vvl-copy { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.vvl-row { display: flex; flex-wrap: wrap; gap: 14px; }
.vvl-split { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.vvl-flip .vvl-split > :first-child { order: 2; }

.vvl a.vvl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px;
    border-radius: 999px; border: 1.5px solid transparent; font: 600 15.2px/1 var(--vvl-sans); text-decoration: none; cursor: pointer;
    transition: transform .35s var(--vvl-ease), background .25s, color .25s, border-color .25s;
}
.vvl-btn svg { width: 18px; height: 18px; transition: transform .35s var(--vvl-ease); }
.vvl a.vvl-btn:hover { transform: translateY(-2px); }
.vvl-btn:hover svg { transform: translateX(4px); }
.vvl a.vvl-btn--light { background: #fff; color: var(--vvl-violet); }
.vvl a.vvl-btn--ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.vvl a.vvl-btn--ghost:hover { background: rgba(255, 255, 255, .12); }
.vvl a.vvl-btn--violet { background: var(--vvl-violet); color: #fff; }
.vvl a.vvl-btn--violet:hover { background: var(--vvl-violet-800); }
.vvl a.vvl-btn--line { border-color: var(--vvl-violet); color: var(--vvl-violet); }

/* ---------- Portada con foto ---------- */
.vvl-hero { --bg: var(--vvl-night); --fg: #fff; --fg-soft: rgba(255, 255, 255, .74); --accent: var(--vvl-dawn); --line: rgba(255, 255, 255, .22); overflow: hidden; isolation: isolate; }
.vvl-hero__media { position: absolute; inset: 0; z-index: -2; }
.vvl-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }
.vvl-hero__shade { position: absolute; inset: 0; z-index: -1; background:
    linear-gradient(90deg, rgba(20, 10, 48, .9) 0%, rgba(30, 16, 78, .62) 34%, rgba(43, 26, 106, .08) 62%, transparent 78%),
    linear-gradient(0deg, rgba(20, 10, 48, .82) 0%, transparent 34%); }
.vvl-hero__in { display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(40px, 7vh, 84px); min-height: clamp(600px, 82vh, 820px); padding-block: 96px 36px; }
.vvl-hero__copy { display: flex; flex-direction: column; gap: 26px; max-width: 720px; }
.vvl.vvl-hero .vvl-h { font-size: clamp(46.4px, 7.4vw, 102.4px); color: #fff; }
.vvl.vvl-hero .vvl-eyebrow { color: #fff; }
.vvl .vvl-hero__lede { font-size: clamp(16.32px, 1.5vw, 19.52px); font-weight: 300; line-height: 1.6; color: var(--fg-soft); max-width: 34em; }
.vvl .vvl-hero__lede em { font-style: normal; font-weight: 500; color: #fff; }
.vvl-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Cifras (al pie de la portada o como franja propia) ---------- */
.vvl-facts { display: grid; grid-template-columns: repeat(var(--vvl-n, 4), minmax(0, 1fr)); border-top: 1px solid var(--line); }
.vvl-fact { padding: 20px 20px 4px 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vvl-fact + .vvl-fact { padding-left: 24px; border-left: 1px solid var(--line); }
.vvl-fact b { font-size: clamp(24px, 2.6vw, 35.2px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--fg); }
.vvl-fact b small { font-size: .5em; font-weight: 500; letter-spacing: 0; margin-left: 3px; }
.vvl-fact > span { font-size: 12.8px; line-height: 1.35; color: var(--fg-soft); }
.vvl-figures { padding-block: clamp(36px, 5vw, 64px); }

/* ---------- Frase grande (manifiesto) ---------- */
.vvl-manifesto { padding-block: clamp(84px, 13vw, 170px); }
.vvl-manifesto__in { display: grid; gap: 36px; }
.vvl .vvl-big { font-size: clamp(27.2px, 4.3vw, 59.2px); font-weight: 500; letter-spacing: -.03em; line-height: 1.14; color: var(--fg); max-width: 21em; text-wrap: balance; }
.vvl .vvl-big em { font-size: 1.08em; }
.vvl-big .vvl-w { transition: opacity .5s var(--vvl-ease); }
.vvl-big.is-live .vvl-w { opacity: .2; }
.vvl-big.is-live .vvl-w.on { opacity: 1; }
.vvl-sign { display: flex; align-items: center; gap: 16px; color: var(--fg-soft); font-size: 14.4px; }
.vvl-sign i { flex: 0 0 56px; height: 1px; background: var(--vvl-violet-300); }

/* ---------- Historia con dos fotos ---------- */
.vvl-duo { position: relative; padding: 0 9% 13% 0; }
.vvl-duo--una { padding: 0; }
.vvl-duo__a { border-radius: var(--vvl-radius); overflow: hidden; aspect-ratio: 4 / 5; }
.vvl-duo__a img, .vvl-duo__b img { width: 100%; height: 100%; object-fit: cover; }
.vvl-duo__b { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 5 / 4; border-radius: 18px; overflow: hidden; border: 8px solid var(--bg); box-shadow: 0 30px 60px -30px rgba(43, 26, 106, .5); }
.vvl-duo__tag { position: absolute; left: 18px; top: 18px; padding: 9px 16px; border-radius: 999px; background: rgba(20, 10, 48, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; font-size: 11.52px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; }
.vvl-schools { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-block: 20px; border-block: 1px solid var(--line); }
.vvl-schools span { font-family: var(--vvl-serif); font-size: clamp(20.8px, 2.2vw, 28px); color: var(--fg); line-height: 1.1; }
.vvl-schools small { display: block; font-family: var(--vvl-sans); font-size: 10.88px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-soft); margin-top: 4px; }
.vvl-founder { display: flex; gap: 18px; align-items: flex-start; }
.vvl .vvl-founder__pic { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--card); color: var(--accent); font-family: var(--vvl-serif); font-size: 27.2px; line-height: 1; }
.vvl-founder__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vvl-founder__txt b { font-size: 16.32px; font-weight: 600; color: var(--fg); }
.vvl-founder__txt span { font-size: 12.48px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.vvl .vvl-founder__txt p { font-size: 14.72px; line-height: 1.6; color: var(--fg-soft); margin-top: 6px; }

/* ---------- Encabezado de sección ---------- */
.vvl-head__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px 64px; align-items: end; }
.vvl-head__t { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.vvl.vvl-head .vvl-p { max-width: 32em; }

/* ---------- Tarjetas de producto ---------- */
.vvl-pgrid { display: grid; grid-template-columns: repeat(var(--vvl-n, 3), minmax(0, 1fr)); gap: 20px; }
.vvl-pcard { position: relative; display: flex; flex-direction: column; border-radius: var(--vvl-radius); overflow: hidden; background: var(--card); color: var(--fg); transition: transform .5s var(--vvl-ease), box-shadow .5s var(--vvl-ease); }
.vvl-pcard:hover { transform: translateY(-8px); box-shadow: 0 40px 70px -40px rgba(43, 26, 106, .55); }
.vvl-pcard__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.vvl-pcard__img { aspect-ratio: 1 / 1; overflow: hidden; }
.vvl-pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--vvl-ease); }
.vvl-pcard:hover .vvl-pcard__img img { transform: scale(1.06); }
.vvl-pcard__role { position: absolute; left: 18px; top: 18px; z-index: 1; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--vvl-violet); font-size: 11.2px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; }
.vvl-pcard__body { display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 28px; flex: 1; }
.vvl .vvl-pcard__name { font-family: var(--vvl-sans); font-size: 30.4px; font-weight: 600; letter-spacing: -.03em; line-height: 1.02; color: var(--fg); text-transform: none; }
.vvl .vvl-pcard__tag { font-family: var(--vvl-serif); font-style: italic; font-size: 20.48px; line-height: 1.2; color: var(--accent); }
.vvl .vvl-pcard__txt { font-size: 14.72px; line-height: 1.6; color: var(--fg-soft); }
.vvl-nums { display: grid; grid-template-columns: repeat(var(--vvl-n, 3), minmax(0, 1fr)); gap: 8px; padding-block: 14px; border-block: 1px solid var(--line); }
.vvl-nums div { display: flex; flex-direction: column; min-width: 0; }
.vvl-nums b { font-size: 20.8px; font-weight: 600; letter-spacing: -.03em; color: var(--fg); font-variant-numeric: tabular-nums; }
.vvl-nums span { font-size: 11.2px; line-height: 1.3; color: var(--fg-soft); }
.vvl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vvl-chips span { padding: 6px 12px; border-radius: 999px; background: var(--chip); font-size: 11.84px; font-weight: 500; line-height: 1.3; color: var(--accent); }
.vvl-more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-size: 14.4px; font-weight: 600; color: var(--accent); }
.vvl-more svg { width: 16px; height: 16px; transition: transform .35s var(--vvl-ease); }
.vvl-pcard:hover .vvl-more svg { transform: translateX(5px); }

/* ---------- Foto con tarjeta ---------- */
.vvl-pure { isolation: isolate; }
.vvl-pure__media { position: absolute; inset: 0; z-index: -1; }
.vvl-pure__media img { width: 100%; height: 100%; object-fit: cover; }
.vvl-pure__in { display: flex; justify-content: flex-end; padding-block: clamp(60px, 9vw, 130px); }
.vvl-flip .vvl-pure__in { justify-content: flex-start; }
.vvl-pure__card { width: min(480px, 100%); display: flex; flex-direction: column; gap: 20px; padding: clamp(28px, 3.4vw, 44px); border-radius: var(--vvl-radius); background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); box-shadow: 0 30px 70px -40px rgba(26, 18, 48, .5); }
.vvl .vvl-pure__card .vvl-p { font-size: 15.2px; }
.vvl-ticks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.vvl-ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.76px; font-weight: 500; color: var(--fg); line-height: 1.35; }
.vvl-ticks li::before { content: ""; flex: 0 0 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--vvl-violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- Destacado con foto en arco (el Reto) ---------- */
.vvl-reto { --fg: #fff; --fg-soft: rgba(255, 255, 255, .74); --accent: var(--vvl-dawn); --line: rgba(255, 255, 255, .14);
    background: radial-gradient(120% 90% at 85% 10%, #4a2b9c 0%, var(--vvl-violet-800) 38%, var(--vvl-night) 100%); overflow: hidden; }
.vvl-split--reto { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
.vvl-reto .vvl-copy { gap: 28px; }
.vvl.vvl-reto .vvl-p { max-width: 32em; }
.vvl-daily { display: grid; grid-template-columns: repeat(var(--vvl-n, 3), minmax(0, 1fr)); gap: 12px; }
.vvl-daily div { display: flex; flex-direction: column; gap: 6px; padding: 20px 18px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); min-width: 0; }
.vvl-daily b { font-family: var(--vvl-serif); font-size: 48px; font-weight: 400; line-height: .9; color: #fff; }
.vvl-daily b small { font-family: var(--vvl-sans); font-size: .34em; font-weight: 500; margin-left: 4px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-soft); }
.vvl-daily span { font-size: 14.72px; font-weight: 600; color: #fff; }
.vvl-daily em { font-style: normal; font-size: 12.16px; color: var(--fg-soft); line-height: 1.35; }
.vvl .vvl-incl { font-size: 13.44px; line-height: 1.6; color: var(--fg-soft); }
.vvl-reto__pic { position: relative; justify-self: center; width: min(430px, 100%); }
.vvl-reto__ph { border-radius: 220px 220px var(--vvl-radius) var(--vvl-radius); overflow: hidden; aspect-ratio: 2 / 3; }
.vvl-reto__ph img { width: 100%; height: 100%; object-fit: cover; }
.vvl-ring { position: absolute; left: -34px; bottom: 44px; width: 148px; height: 148px; border-radius: 50%; background: rgba(20, 10, 48, .6); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: grid; place-items: center; }
.vvl-flip .vvl-ring { left: auto; right: -34px; }
.vvl-ring svg { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); transform: rotate(-90deg); }
.vvl-ring circle { fill: none; stroke-width: 5; }
.vvl-ring .tr { stroke: rgba(255, 255, 255, .16); }
.vvl-ring .pr { stroke: var(--vvl-dawn); stroke-linecap: round; stroke-dasharray: 346; stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--vvl-ease) .2s; }
.vvl-ring.is-wait .pr { stroke-dashoffset: 346; }
.vvl-ring__t { display: flex; flex-direction: column; align-items: center; line-height: 1; color: #fff; }
.vvl-ring__t b { font-size: 40px; font-weight: 600; letter-spacing: -.04em; }
.vvl-ring__t > span { font-size: 10.56px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin-top: 5px; color: var(--fg-soft); }

/* ---------- Mosaico de fotos ---------- */
.vvl-sec.vvl-mosaic-sec { padding-bottom: clamp(48px, 7vw, 90px); }
.vvl-mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 11.5vw, 170px); gap: 16px; }
.vvl-mosaic + .vvl-mosaic { margin-top: 16px; }
.vvl-tile { position: relative; border-radius: var(--vvl-radius); overflow: hidden; background: var(--card); }
.vvl-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--vvl-ease); }
.vvl-tile:hover img { transform: scale(1.05); }
.vvl-tile figcaption { position: absolute; inset: auto 0 0 0; padding: 44px 20px 18px; background: linear-gradient(0deg, rgba(20, 10, 48, .78), transparent); color: #fff; font-size: 14.4px; font-weight: 500; line-height: 1.3; }
.vvl-tile figcaption small { display: block; font-size: 10.88px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .8; margin-bottom: 4px; }
.vvl-tile figcaption small:empty { display: none; }
.vvl-t1 { grid-column: span 7; grid-row: span 3; }
.vvl-t2 { grid-column: span 5; grid-row: span 4; }
.vvl-t3 { grid-column: span 3; grid-row: span 3; }
.vvl-t4 { grid-column: span 4; grid-row: span 3; }
.vvl-t5 { grid-column: span 5; grid-row: span 2; }
.vvl-mosaic--pareja { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: auto; }
.vvl-mosaic--pareja .vvl-tile { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; }

/* ---------- Cinta que corre ---------- */
.vvl-lands { padding-block: 26px; border-block: 1px solid var(--line); overflow: hidden; white-space: nowrap; }
.vvl-lands__track { display: inline-flex; gap: 56px; padding-right: 56px; animation: vvlSlide 38s linear infinite; }
.vvl-lands__track span { font-family: var(--vvl-serif); font-size: clamp(28.8px, 4vw, 51.2px); line-height: 1.2; color: var(--fg); display: inline-flex; align-items: center; gap: 56px; }
.vvl-lands__track span::after { content: ""; width: 12px; height: 12px; background: var(--vvl-heart); clip-path: path("M6 11C1.9 8 0 5.9 0 3.6 0 1.6 1.5.3 3.2.3 4.4.3 5.5.9 6 1.9 6.5.9 7.6.3 8.800.3 10.500.3 12 1.600 12 3.600 12 5.900 10.100 8 6 11z"); }
@keyframes vvlSlide { to { transform: translateX(-50%); } }
.vvl-lands + .vvl-sec { padding-top: clamp(48px, 7vw, 90px); }

/* ---------- Testimonios ---------- */
.vvl-voices { display: grid; grid-template-columns: repeat(var(--vvl-n, 3), minmax(0, 1fr)); gap: 20px; }
.vvl-voice { display: flex; flex-direction: column; gap: 22px; padding: 30px; border-radius: var(--vvl-radius); background: var(--card); }
.vvl .vvl-voice blockquote { font-family: var(--vvl-serif); font-size: clamp(21.6px, 2vw, 27.2px); line-height: 1.22; color: var(--fg); border: 0; background: none; quotes: none; }
.vvl-voice figcaption { margin-top: auto; display: flex; flex-direction: column; font-size: 13.76px; color: var(--fg); }
.vvl-voice figcaption b { font-weight: 600; }
.vvl-voice figcaption span { color: var(--fg-soft); font-size: 12.8px; }

/* ---------- Foto, texto y pasos ---------- */
.vvl-split--liv { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
.vvl-liv__pic { border-radius: var(--vvl-radius) var(--vvl-radius) 220px 220px; overflow: hidden; aspect-ratio: 3 / 4; max-width: 460px; }
.vvl-liv__pic img { width: 100%; height: 100%; object-fit: cover; }
.vvl.vvl-liv .vvl-p { max-width: 33em; }
.vvl-steps { display: grid; border-top: 1px solid var(--line); }
.vvl-steps li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--line); align-items: baseline; }
.vvl-steps b { font-family: var(--vvl-serif); font-style: italic; font-weight: 400; font-size: 24px; color: var(--accent); line-height: 1.1; }
.vvl-steps span { font-size: 15.04px; color: var(--fg-soft); }

/* ---------- Cierre con foto ---------- */
.vvl-end { --bg: var(--vvl-night); --fg: #fff; --fg-soft: rgba(255, 255, 255, .74); --accent: var(--vvl-dawn); isolation: isolate; overflow: hidden; text-align: center; }
.vvl-end__media { position: absolute; inset: 0; z-index: -2; }
.vvl-end__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.vvl-end__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(20, 10, 48, .92) 0%, rgba(43, 26, 106, .3) 46%, rgba(20, 10, 48, .38) 100%); }
.vvl-end__in { display: flex; flex-direction: column; align-items: center; gap: 26px; padding-block: clamp(120px, 19vw, 260px) clamp(64px, 8vw, 110px); }
.vvl.vvl-end .vvl-eyebrow { color: #fff; }
.vvl .vvl-h--end { font-size: clamp(57.6px, 13vw, 176px); letter-spacing: -.045em; line-height: .9; color: #fff; }
.vvl .vvl-h--end em { font-size: 1.08em; }
.vvl .vvl-end__p { font-size: clamp(16px, 1.5vw, 19.2px); font-weight: 300; line-height: 1.6; color: var(--fg-soft); max-width: 30em; }
.vvl-end .vvl-row { justify-content: center; }

/* ==========================================================================
   Movimiento (2026-10-14). Todo lo de aquí sólo existe si landing.js arrancó (pone .vvl-anim-on en <html>)
   y quien mira no pidió «reducir movimiento»: sin JavaScript la página se ve quieta y completa.
   ========================================================================== */

/* ---- fotos de fondo: acercamiento lento, parallax (landing.js mueve --vvl-py) o quietas ---- */
.vvl-hero__media picture, .vvl-end__media picture, .vvl-pure__media picture { display: block; width: 100%; height: 100%; }
.vvl-pure__media, .vvl-end__media, .vvl-hero__media { overflow: hidden; }
[data-vvl-move="kenburns"] img, [data-vvl-move="kenburns"] .vvl-bgvideo { transform: scale(1.08); animation: vvlDrift 22s var(--vvl-ease) forwards; }
@keyframes vvlDrift { to { transform: scale(1); } }
.vvl-anim-on [data-vvl-move="parallax"] img, .vvl-anim-on [data-vvl-move="parallax"] .vvl-bgvideo { transform: translate3d(0, var(--vvl-py, 0px), 0) scale(1.18); will-change: transform; }
[data-vvl-count] { font: inherit; letter-spacing: inherit; font-variant-numeric: tabular-nums; }
.vvl-bgvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vvl-hero__media .vvl-bgvideo { object-position: 68% 50%; }
.vvl-end__media .vvl-bgvideo { object-position: 50% 40%; }

/* pausa de lo que se mueve solo más de 5 s (cintas, logos, video de fondo) */
.vvl .vvl-pause { position: absolute; right: 16px; bottom: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--fg); display: grid; place-items: center; cursor: pointer; opacity: .75; transition: opacity .25s; }
.vvl-hero .vvl-pause, .vvl-end .vvl-pause { bottom: 18px; background: rgba(20, 10, 48, .55); color: #fff; border-color: rgba(255, 255, 255, .3); }
.vvl .vvl-pause:hover, .vvl .vvl-pause:focus-visible { opacity: 1; }
/* el círculo se ve de 34 px; el área que responde al dedo, de 44 (barrido móvil 2026-10-16) */
.vvl .vvl-pause::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.vvl-pause i { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.vvl-pause[aria-pressed="true"] i { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.vvl.is-paused .vvl-lands__track, .vvl.is-paused .vvl-logos__row { animation-play-state: paused; }
.vvl-lands, .vvl-logos--run { position: relative; }
.vvl-lands { padding-right: 56px; }
.vvl-player:not(:has(> img)) { background: radial-gradient(120% 90% at 30% 20%, #4a2b9c 0%, var(--vvl-night) 70%); }

/* ---- entrada al aparecer en pantalla: cada pieza .vvl-rv de la sección (o el bloque de texto mismo) ---- */
/* los bloques de texto (.vvl-txt) no viven dentro de una .vvl: la curva va con su respaldo */
.vvl-rv { --vvl-dur: 1s; --vvl-curve: var(--vvl-ease, cubic-bezier(.2, .7, .2, 1)); transition: transform var(--vvl-dur) var(--vvl-curve), opacity var(--vvl-dur) var(--vvl-curve), clip-path var(--vvl-dur) var(--vvl-curve), filter var(--vvl-dur) var(--vvl-curve); }
[data-vel="slow"] .vvl-rv, .vvl-rv[data-vel="slow"] { --vvl-dur: 1.7s; }
[data-vel="fast"] .vvl-rv, .vvl-rv[data-vel="fast"] { --vvl-dur: .55s; }

.vvl-anim-on [data-anim="auto"] .vvl-rv:not(.is-in), .vvl-anim-on [data-anim="up"] .vvl-rv:not(.is-in),
.vvl-anim-on .vvl-rv[data-anim="auto"]:not(.is-in), .vvl-anim-on .vvl-rv[data-anim="up"]:not(.is-in) { opacity: 0; transform: translateY(34px); }
.vvl-anim-on [data-anim="fade"] .vvl-rv:not(.is-in), .vvl-anim-on .vvl-rv[data-anim="fade"]:not(.is-in) { opacity: 0; }
.vvl-anim-on [data-anim="zoom"] .vvl-rv:not(.is-in), .vvl-anim-on .vvl-rv[data-anim="zoom"]:not(.is-in) { opacity: 0; transform: scale(.92); filter: blur(4px); }
.vvl-anim-on [data-anim="left"] .vvl-rv:not(.is-in), .vvl-anim-on .vvl-rv[data-anim="left"]:not(.is-in) { opacity: 0; transform: translateX(-56px); }
.vvl-anim-on [data-anim="right"] .vvl-rv:not(.is-in), .vvl-anim-on .vvl-rv[data-anim="right"]:not(.is-in) { opacity: 0; transform: translateX(56px); }
.vvl-anim-on [data-anim="reveal"] .vvl-rv:not(.is-in), .vvl-anim-on .vvl-rv[data-anim="reveal"]:not(.is-in) { clip-path: inset(0 0 100% 0); transform: translateY(18px); }
.vvl-anim-on [data-anim="reveal"] .vvl-rv.is-in, .vvl-anim-on .vvl-rv[data-anim="reveal"].is-in { clip-path: inset(0 0 0 0); }
/* ya entró: sin retraso y con la transición propia de la pieza (la elevación de las tarjetas al pasar el ratón) */
.vvl-rv.is-done { transition-delay: 0s !important; }
.vvl-pcard.vvl-rv.is-done { transition: transform .5s var(--vvl-curve), box-shadow .5s var(--vvl-curve); }
.vvl-benefit.vvl-rv.is-done { transition: transform .45s var(--vvl-curve), box-shadow .45s var(--vvl-curve); }
/* «Revelar» terminado: sin recorte (si no, corta el contorno de foco, el sello del destacado y las sombras) */
.vvl-anim-on [data-anim] .vvl-rv.is-done, .vvl-anim-on .vvl-rv[data-anim].is-done { clip-path: none; }

/* ==========================================================================
   Opciones nuevas de las secciones (2026-10-14)
   ========================================================================== */
.vvl-sp-compacto.vvl-sec { padding-block: clamp(40px, 6vw, 72px); }
.vvl-sp-amplio.vvl-sec { padding-block: clamp(110px, 15vw, 210px); }
.vvl-sec.vvl-head.vvl-sp-compacto, .vvl-sec.vvl-head.vvl-sp-amplio { padding-bottom: var(--vvl-gap); }

/* portada: alto, texto al centro y fuerza del velo */
.vvl-hero--full .vvl-hero__in { min-height: calc(100vh - 100px); min-height: calc(100svh - 100px); }
.vvl-hero--mid .vvl-hero__in { min-height: clamp(460px, 62vh, 620px); }
.vvl-hero--center .vvl-hero__copy { margin-inline: auto; text-align: center; align-items: center; }
.vvl-hero--center .vvl-hero__cta { justify-content: center; }
.vvl-hero--center .vvl-hero__shade { background: linear-gradient(0deg, rgba(20, 10, 48, .85) 0%, rgba(20, 10, 48, .45) 45%, rgba(20, 10, 48, .35) 100%); }
.vvl-veil--soft .vvl-hero__shade, .vvl-veil--soft .vvl-end__shade { opacity: .6; }
.vvl-veil--strong .vvl-hero__shade { background: linear-gradient(90deg, rgba(20, 10, 48, .95), rgba(20, 10, 48, .6)), linear-gradient(0deg, rgba(20, 10, 48, .9), transparent 40%); }

/* cifras como franja propia */
.vvl-figures__in { display: grid; gap: 24px; }

/* encabezado: al centro y con botón */
.vvl-head__side { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; min-width: 0; }
.vvl-head--center .vvl-head__in { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.vvl-head--center .vvl-head__t, .vvl-head--center .vvl-head__side { align-items: center; }
.vvl-head--center .vvl-eyebrow { justify-content: center; }

/* tarjeta de producto: precio o nota al pie */
.vvl-pcard__foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vvl-pcard__foot .vvl-more { margin-top: 0; padding-top: 0; }
.vvl-pcard__price { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--fg); }
.vvl-bg-noche .vvl-pcard__role { background: rgba(255, 255, 255, .14); color: #fff; }

/* destacado sobre noche */
.vvl-reto--noche { background: var(--vvl-night); }

/* mosaico con enlace y carrusel */
a.vvl-tile--link { display: block; color: #fff; }
a.vvl-tile--link figure { margin: 0; height: 100%; }
a.vvl-tile--link::after { content: ""; position: absolute; right: 16px; top: 16px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%233b237b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; transform: scale(.8); opacity: 0; transition: transform .35s var(--vvl-ease), opacity .35s; }
a.vvl-tile--link:hover::after, a.vvl-tile--link:focus-visible::after { transform: scale(1); opacity: 1; }
.vvl-rail { position: relative; }
.vvl-rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 30vw, 380px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.vvl-rail__track::-webkit-scrollbar { display: none; }
.vvl-rail__track .vvl-tile { aspect-ratio: 4 / 5; scroll-snap-align: start; }
.vvl-rail__nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.vvl-rail__btn { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--bg); color: var(--fg); display: grid; place-items: center; cursor: pointer; transition: background .25s, transform .25s; }
.vvl-rail__btn:hover { background: var(--card); transform: translateY(-2px); }
.vvl-rail__btn svg { width: 18px; height: 18px; }
.vvl-rail__btn[disabled] { opacity: .35; cursor: default; transform: none; }

/* cinta: velocidad, sentido y letra */
.vvl-lands--slow .vvl-lands__track { animation-duration: 60s; }
.vvl-lands--fast .vvl-lands__track { animation-duration: 20s; }
.vvl-lands--rev .vvl-lands__track { animation-direction: reverse; }
.vvl-lands--caps .vvl-lands__track span { font-family: var(--vvl-sans); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(22px, 3vw, 40px); }
.vvl-lands:hover .vvl-lands__track { animation-play-state: paused; }

/* testimonios: estrellas y foto */
.vvl-stars { display: flex; gap: 3px; color: var(--vvl-violet-300); }
.vvl-stars span { width: 18px; height: 18px; display: block; }
.vvl-stars span.on { color: var(--vvl-dawn); }
.vvl-stars svg { width: 100%; height: 100%; }
.vvl .vvl-voice figcaption { flex-direction: row; align-items: center; gap: 12px; }
.vvl-voice__pic { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 44px; }
.vvl-voice__who { display: flex; flex-direction: column; min-width: 0; }

/* ==========================================================================
   Secciones nuevas (2026-10-14)
   ========================================================================== */

/* ---- Línea de tiempo: la línea se llena al bajar (landing.js mueve --p) ---- */
.vvl-tl { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 5vw, 64px); --p: 0; }
.vvl-tl__line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: var(--line); border-radius: 2px; }
.vvl-tl__line i { position: absolute; inset: 0 0 auto 0; height: calc(var(--p) * 100%); background: linear-gradient(180deg, var(--vvl-violet-300), var(--vvl-violet)); border-radius: inherit; }
.vvl-tl__item { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 7vw, 110px); }
.vvl-tl__card { grid-column: 1; display: flex; flex-direction: column; gap: 10px; text-align: right; align-items: flex-end; max-width: 520px; justify-self: end; }
.vvl-tl__item--alt .vvl-tl__card { grid-column: 2; text-align: left; align-items: flex-start; justify-self: start; }
.vvl-tl__dot { position: absolute; left: 50%; top: 6px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); transition: background .4s, border-color .4s, box-shadow .4s, transform .4s var(--vvl-ease); z-index: 1; }
.vvl-tl__item.is-on .vvl-tl__dot { background: var(--vvl-violet); border-color: var(--vvl-violet); box-shadow: 0 0 0 7px rgba(59, 35, 123, .14); transform: scale(1.1); }
.vvl-bg-noche .vvl-tl__item.is-on .vvl-tl__dot { background: var(--vvl-dawn); border-color: var(--vvl-dawn); box-shadow: 0 0 0 7px rgba(255, 179, 107, .18); }
.vvl-tl__date { font-family: var(--vvl-serif); font-style: italic; font-size: clamp(30px, 4vw, 48px); line-height: 1; color: var(--accent); }
.vvl .vvl-tl__title { font-family: var(--vvl-sans); font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--fg); text-transform: none; }
.vvl .vvl-tl__txt { font-size: 15px; line-height: 1.6; color: var(--fg-soft); }
.vvl-tl__img { width: 100%; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; margin-top: 6px; }
.vvl-tl__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Capítulos con foto fija (la foto se queda y cambia con cada capítulo) ---- */
.vvl-ch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
/* la columna de la foto mide lo que todos los capítulos juntos: así la foto tiene por dónde quedarse fija */
.vvl-ch__media { align-self: stretch; }
.vvl-flip .vvl-ch__media { order: 2; }
.vvl-ch__sticky { position: sticky; top: 110px; height: calc(100vh - 160px); max-height: 760px; border-radius: var(--vvl-radius); overflow: hidden; background: var(--card); }
.vvl-ch__img { position: absolute; inset: 0; transition: opacity .9s var(--vvl-ease), transform 1.4s var(--vvl-ease); }
/* sin JavaScript se queda la primera foto y todos los capítulos al 100 %; con él, la foto sigue al capítulo */
.vvl-ch__img + .vvl-ch__img { opacity: 0; }
.vvl-js-on .vvl-ch__img { opacity: 0; transform: scale(1.06); }
.vvl-js-on .vvl-ch__img.is-active { opacity: 1; transform: scale(1); }
.vvl-ch__img img { width: 100%; height: 100%; object-fit: cover; }
.vvl-ch__count { position: absolute; left: 18px; bottom: 18px; padding: 8px 14px; border-radius: 999px; background: rgba(20, 10, 48, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; font-size: 12px; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.vvl-ch__steps { display: flex; flex-direction: column; }
.vvl-ch__step { min-height: min(82vh, 760px); display: flex; flex-direction: column; justify-content: center; gap: 22px; transition: opacity .6s var(--vvl-ease); }
/* atenuar los otros capítulos sólo en escritorio y sólo si se puede animar (en el teléfono cada uno trae su foto) */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    .vvl-js-on .vvl-ch__step:not(.is-active) { opacity: .35; }
}
.vvl-ch__inline { display: none; }

/* ---- Antes y después ---- */
.vvl-ba-sec__in { display: grid; gap: clamp(28px, 4vw, 48px); justify-items: center; text-align: center; }
.vvl-ba-sec__head { display: flex; flex-direction: column; gap: 20px; align-items: center; max-width: 760px; }
.vvl-ba-sec__head .vvl-eyebrow { justify-content: center; }
.vvl-ba { position: relative; width: min(980px, 100%); aspect-ratio: 16 / 10; border-radius: var(--vvl-radius); overflow: hidden; touch-action: pan-y; user-select: none; background: var(--card); }
.vvl-ba img { width: 100%; height: 100%; object-fit: cover; }
.vvl-ba__a { position: absolute; inset: 0; }
.vvl-ba__b { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.vvl-ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.vvl-ba__handle svg { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; padding: 11px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; color: var(--vvl-violet); box-shadow: 0 8px 24px rgba(20, 10, 48, .3); }
.vvl-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.vvl-ba__range:focus-visible + .vvl-ba__handle, .vvl-ba:focus-within .vvl-ba__handle svg { outline: 3px solid var(--vvl-dawn); }
.vvl-ba__tag { position: absolute; top: 16px; padding: 7px 14px; border-radius: 999px; background: rgba(20, 10, 48, .6); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; pointer-events: none; }
.vvl-ba__tag--a { left: 16px; }
.vvl-ba__tag--b { right: 16px; }
.vvl-ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: min(980px, 100%); }
.vvl-ba-pair figure { position: relative; border-radius: var(--vvl-radius); overflow: hidden; aspect-ratio: 4 / 5; }
.vvl-ba-pair img { width: 100%; height: 100%; object-fit: cover; }
.vvl-ba-pair figcaption { position: absolute; left: 16px; top: 16px; padding: 7px 14px; border-radius: 999px; background: rgba(20, 10, 48, .6); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.vvl .vvl-ba-sec__note { font-size: 12.5px; line-height: 1.5; color: var(--fg-soft); max-width: 640px; }

/* ---- Video ---- */
.vvl-video .vvl-wrap { display: grid; gap: clamp(28px, 4vw, 48px); }
.vvl-video__head { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.vvl-player { position: relative; width: min(1100px, 100%); margin-inline: auto; aspect-ratio: 16 / 9; border-radius: var(--vvl-radius); overflow: hidden; background: #000; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.vvl-video--full .vvl-player { width: 100%; }
.vvl-player > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--vvl-ease), filter .6s; }
.vvl-player:hover > img { transform: scale(1.03); filter: brightness(.85); }
.vvl-player iframe, .vvl-player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vvl-play { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--vvl-violet); display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); animation: vvlPulse 2.4s infinite; transition: transform .3s var(--vvl-ease); }
.vvl-play:hover { transform: scale(1.08); }
.vvl-play svg { width: 34px; height: 34px; margin-left: 4px; }
@keyframes vvlPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); } 70% { box-shadow: 0 0 0 26px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }

/* ---- Beneficios con ícono ---- */
.vvl-bgrid { display: grid; grid-template-columns: repeat(var(--vvl-n, 3), minmax(0, 1fr)); gap: 18px; }
.vvl-benefit { display: flex; flex-direction: column; gap: 14px; padding: 30px 26px; border-radius: var(--vvl-radius); background: var(--card); }
.vvl-benefit:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -36px rgba(43, 26, 106, .45); }
.vvl-benefits--plain .vvl-benefit { background: none; padding: 8px 4px; }
.vvl-benefits--plain .vvl-benefit:hover { transform: none; box-shadow: none; }
.vvl-benefit__ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--vvl-violet), #6a3fb5); color: #fff; transition: transform .5s var(--vvl-ease); }
.vvl-benefit:hover .vvl-benefit__ico { transform: rotate(-6deg) scale(1.06); }
.vvl-benefit__ico svg { width: 28px; height: 28px; }
.vvl-benefit__ico img { width: 34px; height: 34px; object-fit: contain; }
.vvl-bg-noche .vvl-benefit__ico { background: linear-gradient(135deg, var(--vvl-dawn), var(--vvl-rose, #e0338f)); color: var(--vvl-night); }
.vvl .vvl-benefit__t { font-family: var(--vvl-sans); font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--fg); text-transform: none; }
.vvl .vvl-benefit__p { font-size: 14.5px; line-height: 1.6; color: var(--fg-soft); }

/* ---- Logos o sellos ---- */
.vvl-sec.vvl-logos { padding-block: clamp(36px, 5vw, 64px); }
.vvl-logos__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(24px, 5vw, 64px); }
.vvl-logo { display: inline-flex; align-items: center; justify-content: center; height: 56px; color: var(--fg-soft); font-weight: 600; letter-spacing: .04em; }
.vvl-logo img { max-height: 56px; max-width: 160px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter .35s, opacity .35s, transform .35s var(--vvl-ease); }
.vvl-logo:hover img, .vvl-logos--color .vvl-logo img { filter: none; opacity: 1; }
a.vvl-logo:hover img { transform: translateY(-2px); }
.vvl-logos--run { overflow: hidden; }
.vvl-logos--run .vvl-logos__row { flex-wrap: nowrap; justify-content: flex-start; width: max-content; animation: vvlSlide 40s linear infinite; padding-right: clamp(24px, 5vw, 64px); }
.vvl-logos--run:hover .vvl-logos__row { animation-play-state: paused; }

/* ---- Cuenta regresiva ---- */
.vvl-count__in { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.vvl-count__in .vvl-p { max-width: 36em; }
.vvl-count__boxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: min(620px, 100%); }
.vvl-count__boxes div { display: flex; flex-direction: column; gap: 4px; padding: 20px 8px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.vvl-count__boxes b { font-size: clamp(36px, 6vw, 64px); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.vvl-count__boxes b.tick { animation: vvlTick .5s var(--vvl-ease); }
@keyframes vvlTick { 0% { transform: translateY(-14%); opacity: .3; } 100% { transform: none; opacity: 1; } }
.vvl-count__boxes span { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-soft); }
.vvl .vvl-count__end { display: none; font-family: var(--vvl-serif); font-style: italic; font-size: clamp(26px, 3.4vw, 40px); color: var(--accent); }
.vvl-count.is-over .vvl-count__boxes { display: none; }
.vvl-count.is-over .vvl-count__end { display: block; }

/* ---- Preguntas (sección) ---- */
.vvl-faq__in { display: grid; gap: 12px; max-width: 880px; }
.vvl-faq__item { border-radius: 18px; background: var(--card); }
.vvl-faq__item.is-done, html:not(.vvl-anim-on) .vvl-faq__item { transition: box-shadow .35s; }
.vvl-faq__item.is-open { box-shadow: 0 24px 50px -36px rgba(43, 26, 106, .45); }
.vvl .vvl-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; border: 0; background: none; color: var(--fg); font: 600 17px/1.35 var(--vvl-sans); text-align: left; cursor: pointer; }
.vvl-faq__q i { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--bg); position: relative; transition: transform .4s var(--vvl-ease), background .3s; }
.vvl-faq__q i::before, .vvl-faq__q i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--accent); border-radius: 2px; }
.vvl-faq__q i::after { transform: rotate(90deg); transition: transform .4s var(--vvl-ease); }
.vvl-faq__item.is-open .vvl-faq__q i::after { transform: rotate(0); }
.vvl-faq__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--vvl-ease); }
.vvl-faq__a > div { overflow: hidden; padding: 0 24px; }
.vvl-faq__a > div > :last-child { margin-bottom: 22px; }
/* vvl-pre: el script de la cabecera la pone antes del primer pintado, para que no nazcan abiertas y se cierren al llegar landing.js */
.vvl-js-on .vvl-faq__item:not(.is-open) .vvl-faq__a, .vvl-pre .vvl-faq__item:not(.is-open) .vvl-faq__a { grid-template-rows: 0fr; }
.vvl .vvl-faq__p { font-size: 15px; line-height: 1.65; color: var(--fg-soft); margin-bottom: 10px; }
.vvl-faq__item[hidden], .vvl-faq[hidden], .vvl-faqhead[hidden] { display: none !important; }

/* ---- Preguntas frecuentes con buscador (2026-10-19; referencia: https://vivri-faqs.vercel.app) ----
   «Buscador de preguntas» (vvl-faqs) arriba, un «Grupo de preguntas» (vvl-faqhead) por producto o tema y debajo sus
   preguntas (vvl-faq--tema), que toman el color del grupo en --accent (CustomWideHtml.DelTema). El filtro, en landing.js. */
.vvl-bg-morado {
    --bg: var(--vvl-violet); --fg: #fff; --fg-soft: rgba(255, 255, 255, .78); --accent: var(--vvl-dawn);
    --line: rgba(255, 255, 255, .22); --card: rgba(255, 255, 255, .08); --chip: rgba(255, 255, 255, .12);
    background:
        radial-gradient(80% 60% at 110% 0%, rgba(255, 255, 255, .1) 0%, transparent 60%),
        radial-gradient(60% 80% at -10% 100%, rgba(0, 0, 0, .25) 0%, transparent 55%),
        var(--vvl-violet);
}
.vvl-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vvl-sec.vvl-faqs { padding-block: clamp(56px, 8vw, 96px) clamp(48px, 7vw, 80px); }
.vvl-faqs__in { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.vvl.vvl-faqs .vvl-faqs__lede { max-width: 36em; margin-inline: auto; }
.vvl-faqs__search { position: relative; width: min(600px, 100%); margin-top: 10px; }
/* sin JavaScript no filtra: se queda su hueco (nada salta al llegar el script) pero no se ve */
html:not(.vvl-js-on):not(.vvl-pre) .vvl-faqs__search { visibility: hidden; }
.vvl-faqs__search > svg { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--vvl-ink-soft); pointer-events: none; }
/* el tema fuerza alto, centrado y bordes en los campos (custom.styles.css): aquí se dice todo con !important */
.vvl .vvl-faqs__search input {
    display: block; width: 100% !important; height: 58px !important; margin: 0; padding: 0 54px 0 52px !important;
    border: 0 !important; border-radius: 999px !important; background: #fff !important; color: var(--vvl-ink) !important;
    font: 400 16px/1.2 var(--vvl-sans) !important; text-align: left !important;
    box-shadow: 0 16px 38px -14px rgba(0, 0, 0, .45); outline: none; -webkit-appearance: none; appearance: none;
}
.vvl .vvl-faqs__search input::placeholder { color: #8a83a0; opacity: 1; }
.vvl .vvl-faqs__search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.vvl .vvl-faqs__search input:focus-visible { box-shadow: 0 0 0 3px var(--vvl-dawn), 0 16px 38px -14px rgba(0, 0, 0, .45); }
.vvl .vvl-faqs__clear {
    position: absolute; right: 9px; top: 50%; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 0; border-radius: 50%;
    background: var(--vvl-lilac); color: var(--vvl-ink); display: grid; place-items: center; cursor: pointer;
}
.vvl .vvl-faqs__clear[hidden] { display: none; }
.vvl-faqs__clear svg { width: 16px; height: 16px; }
.vvl .vvl-faqs__status { min-height: 1.4em; margin: -4px 0 -8px; font-size: 14px; color: var(--fg-soft); }
.vvl-faqs__empty { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 32em; }
.vvl-faqs__empty[hidden] { display: none; }
.vvl .vvl-faqs__empty p { font-size: 16px; line-height: 1.55; color: var(--fg); }
.vvl-faqs__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.vvl a.vvl-faqs__chip {
    display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 12px;
    background: var(--chip, var(--vvl-violet)); color: #fff; font: 600 14px/1.2 var(--vvl-sans);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 8px 20px -12px rgba(0, 0, 0, .55);
    transition: transform .3s var(--vvl-ease), box-shadow .3s;
}
.vvl a.vvl-faqs__chip:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 14px 26px -14px rgba(0, 0, 0, .6); }

/* el encabezado de un grupo: etiqueta con su punto de color, título y texto; sus preguntas van justo debajo */
.vvl-sec.vvl-faqhead { padding-bottom: clamp(20px, 3vw, 28px); }
/* justo bajo el buscador, el aire de un grupo y no el de una sección entera */
.vvl-faqs + .vvl-faqhead { padding-top: clamp(48px, 6vw, 80px); }
.vvl-faqhead__in { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.vvl-faqhead__tag {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}
.vvl-faqhead__tag::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.vvl.vvl-faqhead .vvl-p { max-width: 40em; }
/* el buscador recién encogió la página: el primer grupo que queda no se pega al buscador */
.vvl-sec.vvl-faqhead.is-first { padding-top: clamp(40px, 6vw, 64px); }
.vvl-faq--tema { padding-top: 0; padding-bottom: clamp(48px, 6vw, 80px); }
/* buscando quedan pocas por grupo: los grupos se juntan */
.vvl-sec.vvl-faq.is-filtering { padding-bottom: clamp(32px, 4vw, 48px); }

/* preguntas con número (01, 02…) y a dos columnas */
.vvl .vvl-faq__n { flex: 0 0 auto; min-width: 26px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.vvl .vvl-faq__q > span { flex: 1 1 auto; min-width: 0; }
.vvl .vvl-faq__q mark, .vvl .vvl-faq__p mark { background: color-mix(in srgb, var(--vvl-dawn) 45%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.vvl-faq__item--num .vvl-faq__a > div { padding-left: 70px; }
.vvl-faq--tema .vvl-faq__q i { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.vvl-faq--dos .vvl-faq__in { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px 18px; }
.vvl-faq__col { display: grid; gap: 12px; min-width: 0; }
.vvl-faq--tema .vvl-faq__in { max-width: none; }
.vvl-faq--tema .vvl-faq__item { box-shadow: 0 1px 2px rgba(26, 18, 48, .05), 0 6px 18px -10px rgba(43, 26, 106, .28); }
.vvl-faq--tema .vvl-faq__item.is-open { box-shadow: 0 24px 50px -36px rgba(43, 26, 106, .45); }
.vvl-faq--tema .vvl-faq__q { padding: 18px 20px; font-size: 16px; }
.vvl-faq--tema .vvl-faq__a > div { padding-inline: 20px; }
.vvl-faq--tema .vvl-faq__item--num .vvl-faq__a > div { padding-left: 66px; }
/* buscando, las dos columnas se vuelven a repartir con lo que quedó (si no, todo podía quedar a la derecha) */
.vvl-faq--dos.is-filtering .vvl-faq__in { display: block; columns: 2; column-gap: 18px; }
.vvl-faq--dos.is-filtering .vvl-faq__col { display: contents; }
.vvl-faq--dos.is-filtering .vvl-faq__item { break-inside: avoid; margin-bottom: 12px; }
@media (max-width: 760px) {
    .vvl-faq--dos .vvl-faq__in { grid-template-columns: 1fr; }
    .vvl-faq--dos.is-filtering .vvl-faq__in { columns: 1; }
    .vvl-faq--tema .vvl-faq__q { padding: 16px; gap: 12px; font-size: 15px; }
    .vvl-faq--tema .vvl-faq__a > div, .vvl-faq--tema .vvl-faq__item--num .vvl-faq__a > div { padding-inline: 16px; }
    .vvl a.vvl-faqs__chip { min-height: 40px; padding: 0 14px; font-size: 13px; }
}

/* ---- Cita destacada ---- */
.vvl-quote__in { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; max-width: 980px; }
.vvl-quote__mark { font-family: var(--vvl-serif); font-size: clamp(90px, 12vw, 160px); line-height: .6; height: .45em; color: var(--accent); }
.vvl .vvl-quote__text { font-family: var(--vvl-serif); font-size: clamp(28px, 4.2vw, 54px); line-height: 1.15; color: var(--fg); text-wrap: balance; border: 0; background: none; margin: 0; padding: 0; quotes: none; }
.vvl .vvl-quote__text em { font-style: italic; color: var(--accent); }
.vvl-quote__who { display: flex; align-items: center; gap: 14px; text-align: left; }
.vvl-quote__who img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.vvl-quote__who span { display: flex; flex-direction: column; }
.vvl-quote__who b { font-weight: 600; color: var(--fg); }
.vvl-quote__who small { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-soft); }

@media (max-width: 900px) {
    .vvl-tl__line, .vvl-tl__dot { left: 9px; }
    .vvl-tl__item { grid-template-columns: 1fr; padding-left: 40px; }
    .vvl-tl__card, .vvl-tl__item--alt .vvl-tl__card { grid-column: 1; text-align: left; align-items: flex-start; justify-self: start; }
    .vvl-ch { grid-template-columns: 1fr; }
    .vvl-ch__media { display: none; }
    .vvl-ch__step { min-height: 0; opacity: 1; padding-block: 24px; }
    .vvl-ch__inline { display: block; border-radius: var(--vvl-radius); overflow: hidden; aspect-ratio: 4 / 3; }
    .vvl-ch__inline img { width: 100%; height: 100%; object-fit: cover; }
    .vvl-bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .vvl-bgrid { grid-template-columns: 1fr; }
    .vvl-ba { aspect-ratio: 4 / 5; }
    .vvl-ba-pair { grid-template-columns: 1fr; }
    .vvl-count__boxes { gap: 8px; }
    .vvl-count__boxes div { padding: 14px 4px 12px; }
    .vvl-rail__track { grid-auto-columns: 78%; }
}

/* ---------- Tableta y teléfono ---------- */
@media (max-width: 980px) {
    .vvl-pgrid { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 900px) {
    .vvl-split, .vvl-split--reto, .vvl-split--liv, .vvl-head__in { grid-template-columns: 1fr; }
    .vvl-flip .vvl-split > :first-child { order: 0; }
    .vvl-duo { max-width: 560px; }
    .vvl-voices { grid-template-columns: 1fr; }
    .vvl-ring, .vvl-flip .vvl-ring { left: -8px; right: auto; }
    .vvl-steps li { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 820px) {
    .vvl-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 12px; }
    .vvl-mosaic + .vvl-mosaic { margin-top: 12px; }
    .vvl-tile { aspect-ratio: 4 / 5; grid-row: auto; }
    .vvl-t1, .vvl-t4, .vvl-t5 { grid-column: span 2; aspect-ratio: 3 / 2; }
    .vvl-t2, .vvl-t3 { grid-column: span 1; }
    .vvl-mosaic--pareja .vvl-tile { grid-column: auto; aspect-ratio: 4 / 5; }
}
@media (max-width: 760px) {
    .vvl-hero__media img { object-position: 74% 40%; }
    .vvl-hero__shade { background: linear-gradient(0deg, rgba(20, 10, 48, .96) 0%, rgba(20, 10, 48, .8) 42%, rgba(30, 16, 78, .12) 72%, rgba(20, 10, 48, .3) 100%); }
    .vvl-hero__in { min-height: 0; padding-block: 280px 28px; }
    .vvl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vvl-fact:nth-child(odd) { padding-left: 0; border-left: 0; }
    .vvl-fact:nth-child(n+3) { border-top: 1px solid var(--line); }
    .vvl-hero__cta .vvl-btn { flex: 1 1 100%; }
    .vvl-pure__media { position: relative; aspect-ratio: 3 / 2; }
    .vvl-pure__in, .vvl-flip .vvl-pure__in { padding-block: 0 56px; margin-top: -56px; justify-content: center; }
    .vvl-ticks { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .vvl-daily { grid-template-columns: 1fr; }
    .vvl-daily div { flex-direction: row; align-items: center; gap: 14px; }
    .vvl-daily b { font-size: 38.4px; flex: 0 0 auto; }
    .vvl-daily em { margin-left: auto; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
    [data-vvl-move] img, [data-vvl-move] .vvl-bgvideo { animation: none !important; transform: none !important; }
    .vvl-lands__track, .vvl-logos--run .vvl-logos__row, .vvl-play, .vvl-count__boxes b { animation: none !important; }
    /* lo que corría se queda quieto y entero: en varias líneas, sin las copias del bucle */
    .vvl-lands { white-space: normal; }
    .vvl-lands__track, .vvl-logos--run .vvl-logos__row { display: flex; flex-wrap: wrap; justify-content: center; width: auto; padding-inline: 16px; row-gap: 12px; }
    .vvl-lands__track [aria-hidden="true"], .vvl-logos--run .vvl-logos__row [aria-hidden="true"] { display: none; }
    .vvl-rv { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
    .vvl-rv, .vvl a.vvl-btn, .vvl-pcard, .vvl-pcard__img img, .vvl-tile img, .vvl-ring .pr, .vvl-faq__a, .vvl-ch__img, .vvl-ch__step, .vvl-tl__line i { transition: none !important; }
    .vvl-pause { display: none; }
}

/* ==========================================================================
   Puerta de países (2026-10-20, vivri.com; mockup aprobado: https://claude.ai/artifact/KTkZUWyhpUsXoizAu4d1bC)
   «Barra de la landing» (vvl-bar), franja de banderas al pie de la portada (vvl-strip), bloque «Países con banderas»
   (vvl-countries), la ventana «¿Desde dónde compras?» (vvl-door) y el Comprar rojo. El movimiento, en landing.js (paso 14).
   ========================================================================== */
/* la landing trae su barra: la cabecera de la tienda no sale */
/* la landing trae su barra: la cabecera de la tienda y su franja de entrega (Paquetería / Recoger, precios, país e idioma) no salen.
   La cápsula «Compras con …» del LIV sí sigue (va en la misma lista, pero no es la franja) */
.html-vvl-barra .header, .html-vvl-barra .container-warehouselection { display: none !important; }

.vvl.vvl-bar { position: relative; z-index: 60; height: 88px; margin-bottom: -88px; background: transparent; color: #fff; }
.vvl-bar__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.vvl-bar__logo a { display: block; }
.vvl-bar__logo img { display: block; height: 40px; width: auto; max-width: 150px; filter: brightness(0) invert(1); }
.vvl-bar__nav { display: flex; gap: 28px; }
.vvl .vvl-bar__nav a { font-size: 14px; font-weight: 500; opacity: .86; }
.vvl .vvl-bar__nav a:hover { opacity: 1; }
.vvl-bar__acts { display: flex; align-items: center; gap: 10px; }
.vvl-bar__langs { display: flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); }
.vvl .vvl-bar__langs a { display: grid; place-items: center; min-width: 40px; min-height: 36px; padding: 0 8px; border-radius: 999px; font: 600 12px/1 var(--vvl-sans); }
.vvl .vvl-bar__langs a.is-on { background: #fff; color: var(--vvl-violet); }
.vvl-bar__pais { position: relative; }
/* el botón del país es el <summary> de un <details>: se abre también sin JavaScript */
.vvl-bar__pais > summary { list-style: none; }
.vvl-bar__pais > summary::-webkit-details-marker { display: none; }
.vvl-bar__pais:not([open]) .vvl-bar__menu { display: none; }
/* sin portada debajo, la barra ocupa su lugar con fondo propio (no se monta sobre el título de lo que sigue) */
.vvl.vvl-bar.vvl-bar--solida { margin-bottom: 0; background: var(--vvl-night); }
.vvl.vvl-bar.vvl-bar--solida.vvl-bar--oscura { background: #fff; border-bottom: 1px solid var(--line); }
.vvl .vvl-bar__country {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 6px; border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: inherit; font: 500 14px/1 var(--vvl-sans);
}
.vvl-bar__country svg { width: 16px; height: 16px; transition: transform .3s var(--vvl-ease); }
.vvl-bar__pais[open] .vvl-bar__country svg { transform: rotate(180deg); }
.vvl-bar__menu {
    position: absolute; z-index: 70; top: 54px; right: 0; width: 320px; padding: 10px; border-radius: 20px; background: #fff; color: var(--vvl-ink);
    display: flex; flex-direction: column; gap: 2px; box-shadow: 0 30px 70px -30px rgba(10, 4, 30, .8);
}
/* en el teléfono, la misma lista trae el menú y Oficina Virtual */
.vvl-bar__menu-nav { display: none; }
.vvl-bar__menu-t { padding: 8px 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--vvl-violet); }
.vvl a.vvl-bar__opt { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 8px 12px; border-radius: 12px; color: var(--vvl-ink); font-size: 14px; font-weight: 600; }
.vvl a.vvl-bar__opt:hover, .vvl a.vvl-bar__opt.is-on { background: var(--vvl-lilac); }
.vvl-bar__opt svg { margin-left: auto; width: 20px; height: 20px; color: var(--vvl-violet); }
.vvl-bar__opt .vvl-flag--round { box-shadow: 0 0 0 1px rgba(26, 18, 48, .14); }
.vvl a.vvl-bar__office { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .4); font-size: 14px; font-weight: 600; }
.vvl a.vvl-bar__buy { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; background: #e4253c; color: #fff; font-size: 15px; font-weight: 700; transition: background .25s, transform .25s; }
.vvl a.vvl-bar__buy:hover { background: #c81d31; transform: translateY(-1px); }
/* sobre un fondo claro: letra oscura */
.vvl.vvl-bar--oscura { color: var(--vvl-ink); }
.vvl-bar--oscura .vvl-bar__logo img { filter: none; }
.vvl-bar--oscura .vvl-bar__langs, .vvl-bar--oscura .vvl-bar__country { background: rgba(59, 35, 123, .06); border-color: rgba(59, 35, 123, .2); }
.vvl-bar--oscura .vvl-bar__langs a.is-on { background: var(--vvl-violet); color: #fff; }
.vvl-bar--oscura a.vvl-bar__office { border-color: rgba(59, 35, 123, .35); }

/* banderas */
.vvl .vvl-flag { display: block; flex: 0 0 auto; width: 60px; height: 40px; border-radius: 6px; object-fit: cover; box-shadow: 0 0 0 1px rgba(26, 18, 48, .12); }
.vvl .vvl-flag--round { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.vvl .vvl-flag--big { width: 96px; height: 64px; border-radius: 8px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); }
.vvl .vvl-flag--none { display: grid; place-items: center; background: var(--vvl-lilac); color: var(--vvl-violet); font: 700 12px/1 var(--vvl-sans); }

/* el Comprar rojo: botón principal de la portada y enlace de las tarjetas de producto */
.vvl a.vvl-btn--buy { min-height: 64px; padding: 0 40px; background: #e4253c; color: #fff; font-size: 18px; font-weight: 700; }
.vvl a.vvl-btn--buy:hover { background: #c81d31; }
.vvl .vvl-more--buy { flex: 1 1 100%; justify-content: center; min-height: 52px; padding: 0 20px; border-radius: 999px; background: #e4253c; color: #fff; font-size: 16px; font-weight: 700; }
.vvl-pcard:hover .vvl-more--buy { background: #c81d31; }

/* franja de banderas al pie de la portada: sólo tapa la orilla de abajo de la foto */
.vvl-hero--franja .vvl-hero__in { padding-bottom: 28px; }
.vvl-strip { position: relative; z-index: 2; padding: 16px 0 18px; background: rgba(20, 10, 48, .42); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-top: 1px solid rgba(255, 255, 255, .16); }
.vvl-strip__in { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.vvl-strip__t { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--vvl-dawn); }
.vvl-strip__row { display: flex; flex-wrap: wrap; gap: 10px; }
.vvl a.vvl-strip__c {
    display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px 0 8px; border-radius: 999px; flex: 0 0 auto;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-size: 14px; font-weight: 600; transition: transform .25s, background .25s;
}
.vvl a.vvl-strip__c:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .18); }
.vvl a.vvl-strip__c.is-on { background: #fff; color: var(--vvl-violet); border-color: #fff; }

/* bloque «Países con banderas» */
.vvl-countries { overflow: hidden; isolation: isolate; text-align: center; }
.vvl-countries__media { position: absolute; inset: 0; z-index: -2; }
.vvl-countries__media img { width: 100%; height: 100%; object-fit: cover; }
.vvl-countries--foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(20, 10, 48, .94) 0%, rgba(43, 26, 106, .62) 55%, rgba(20, 10, 48, .55) 100%); }
.vvl-countries--foto { --bg: var(--vvl-night); --fg: #fff; --fg-soft: rgba(255, 255, 255, .78); --accent: var(--vvl-dawn); --card: rgba(255, 255, 255, .08); --line: rgba(255, 255, 255, .18); }
.vvl-countries__in { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.vvl-countries .vvl-eyebrow { justify-content: center; }
.vvl.vvl-countries .vvl-p { margin-inline: auto; }
.vvl-flags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 18px; }
.vvl a.vvl-flagcard {
    display: flex; flex-direction: column; align-items: center; gap: 12px; width: 150px; padding: 18px 10px 16px; border-radius: 18px;
    background: var(--card); border: 1px solid var(--line); color: var(--fg); font-size: 14px; font-weight: 600; line-height: 1.25; text-align: center;
}
.vvl a.vvl-flagcard.is-done { transition: transform .35s var(--vvl-ease), box-shadow .35s; }
.vvl a.vvl-flagcard:hover { transform: translateY(-4px); }
.vvl a.vvl-flagcard.is-on { box-shadow: 0 0 0 2px var(--accent); }

/* la ventana «¿Desde dónde compras?» */
html.vv-door-open { overflow: hidden; }
/* por encima de todo, también de la burbuja del chat de la tienda */
.vvl-door { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(20, 10, 48, .66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--vvl-ink); }
.vvl-door[hidden] { display: none; }
.vvl-door__box {
    position: relative; width: 100%; max-width: 640px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto; display: flex; flex-direction: column; gap: 18px;
    padding: 34px; border-radius: 26px; background: #fff; text-align: left; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8);
}
.vvl .vvl-door__x { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--vvl-lilac); color: var(--vvl-ink); display: grid; place-items: center; cursor: pointer; }
.vvl-door__x svg { width: 18px; height: 18px; }
.vvl-door__eyebrow { padding-right: 48px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #e4253c; }
.vvl .vvl-door__t { margin: -10px 0 0; padding-right: 48px; font-family: var(--vvl-sans); font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.12; color: var(--vvl-ink); text-transform: none; }
.vvl .vvl-door__p { margin-top: -8px; font-size: 14px; color: var(--vvl-ink-soft); }
.vvl-door__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vvl .vvl-door__c {
    display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px; border-radius: 14px; border: 2px solid #e3dcf2; background: #fff;
    color: var(--vvl-ink); font: 600 15px/1.2 var(--vvl-sans); text-align: left; cursor: pointer; transition: border-color .2s, background .2s;
}
.vvl .vvl-door__c:hover { border-color: var(--vvl-violet-300); }
.vvl .vvl-door__c.is-on { border-color: var(--vvl-violet); background: var(--vvl-lilac); }
.vvl .vvl-door__c:last-child:nth-child(odd) { grid-column: span 2; }
.vvl-door__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.vvl-door__langs { display: flex; padding: 4px; border-radius: 999px; background: var(--vvl-lilac); }
.vvl-door__langs[hidden] { display: none; }
.vvl .vvl-door__langs button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--vvl-violet); font: 600 13px/1 var(--vvl-sans); cursor: pointer; }
.vvl .vvl-door__langs button[aria-pressed="true"] { background: var(--vvl-violet); color: #fff; }
.vvl .vvl-door__rec { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font-size: 14px; font-weight: 500; cursor: pointer; }
.vvl .vvl-door__rec input { width: 20px; height: 20px; margin: 0; accent-color: var(--vvl-violet); }
.vvl a.vvl-door__go { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 62px; padding: 0 20px; border-radius: 999px; background: #e4253c; color: #fff; font-size: 17px; font-weight: 700; text-align: center; }
.vvl a.vvl-door__go:hover { background: #c81d31; }
.vvl-door__go svg { width: 20px; height: 20px; }
/* mientras cambia de país y sigue a la tienda */
.vvl-going { position: fixed; inset: 0; z-index: 2147483001; display: grid; place-items: center; background: rgba(20, 10, 48, .72); color: #fff; font: 600 18px/1.3 var(--vvl-sans, sans-serif); }

/* el menú y Oficina Virtual no caben junto a idioma, país y Comprar en pantallas de menos de 1280 (iPad horizontal, laptops
   chicas): pasan a la lista del país (revisión de Sonnet) */
@media (max-width: 1280px) {
    .vvl-bar__nav, .vvl a.vvl-bar__office { display: none; }
    .vvl-bar__menu-nav { display: flex; flex-direction: column; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
    .vvl .vvl-bar__menu-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--vvl-ink); font-size: 14px; font-weight: 600; }
    .vvl .vvl-bar__menu-nav a:hover { background: var(--vvl-lilac); }
}
@media (max-width: 640px) {
    .vvl.vvl-bar { height: 68px; margin-bottom: -68px; }
    .vvl-bar__in { gap: 8px; }
    .vvl-bar__logo img { height: 30px; max-width: 96px; }
    .vvl-bar__acts { gap: 6px; }
    .vvl .vvl-bar__langs a { min-width: 36px; }
    .vvl .vvl-bar__country { padding: 0 8px 0 6px; }
    .vvl-bar__country-n { display: none; }
    .vvl a.vvl-bar__buy { padding: 0 14px; font-size: 14px; }
    .vvl-bar__menu { position: fixed; top: 72px; left: 16px; right: 16px; width: auto; }
    .vvl-strip__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--vvl-gutter)); padding-inline: var(--vvl-gutter); }
    .vvl-strip__row::-webkit-scrollbar { display: none; }
    .vvl-flags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
    .vvl a.vvl-flagcard { width: auto; padding: 12px 4px; font-size: 12px; }
    .vvl .vvl-flag--big { width: 66px; height: 44px; }
    .vvl a.vvl-btn--buy { width: 100%; }
    .vvl-door { align-items: flex-end; padding: 0; }
    .vvl-door__box { max-height: 92vh; max-height: 92dvh; padding: 22px 16px 24px; border-radius: 24px 24px 0 0; }
    .vvl .vvl-door__t { font-size: 24px; }
    .vvl-door__grid { gap: 8px; }
    .vvl .vvl-door__c { gap: 10px; min-height: 56px; padding: 8px 10px; font-size: 13px; }
    .vvl .vvl-door__c .vvl-flag { width: 42px; height: 28px; }
    .vvl a.vvl-door__go { min-height: 56px; font-size: 15px; }
    .vvl-door__langs { width: 100%; }
    .vvl .vvl-door__langs button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .vvl a.vvl-bar__buy, .vvl a.vvl-strip__c, .vvl a.vvl-flagcard, .vvl-bar__country svg { transition: none !important; }
}
/* teléfonos de 360 px: logo, EN | ES, país y Comprar caben en una línea (revisión de Sonnet) */
@media (max-width: 400px) {
    .vvl-bar__logo { min-width: 0; flex: 0 1 auto; }
    .vvl-bar__logo img { height: 26px; max-width: 76px; }
    .vvl .vvl-bar__langs a { min-width: 32px; padding: 0 4px; }
    .vvl a.vvl-bar__buy { padding: 0 12px; font-size: 13px; }
}