/* =====================================================================
   TRUJILLO MARKET — Vales de consumo para empresas  (/vales)
   Va en su propio archivo: solo lo carga esta página, y la portada no
   tiene por qué descargar estilos de una sección que no enseña.
   Todo sale de las variables de marca de styles.css.
   ===================================================================== */

.vales-body{background:#fff}
.vl{color:var(--grafito)}
/* Todas las secciones arrancan en la misma línea que el logo, la portada y
   los beneficios: mismo ancho máximo y mismo margen. Los textos largos llevan
   su propio ancho máximo para que las líneas no se hagan interminables. */
.vl-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* ---------- Botones ---------- */
.vl-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;
  border-radius:12px;font-family:var(--fl);font-weight:800;font-size:14px;letter-spacing:.02em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:background .15s,border-color .15s,transform .16s cubic-bezier(.23,1,.32,1)}
.vl-btn svg{width:18px;height:18px;flex:0 0 auto}
/* El botón sube un pelo solo con ratón: en el móvil el toque deja el hover
   pegado. Al pulsar se hunde un poco, como un botón de verdad. */
@media (hover:hover) and (pointer:fine){.vl-btn:hover{transform:translateY(-1px)}}
.vl-btn:active{transform:scale(.97)}
.vl-btn:focus-visible{outline:2.5px solid var(--oro);outline-offset:3px}
.vl-btn-oro{background:var(--oro);color:var(--vino)}
.vl-btn-oro:hover{background:var(--oro-claro)}
.vl-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.vl-btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ---------- Portada ---------- */
/* Ocupa toda la primera pantalla, como la portada principal: si se queda
   corta, asoma la sección de abajo y parece un recorte. */
.vl-hero{position:relative;overflow:hidden;background:var(--rojo);color:#fff;
  min-height:max(520px,calc(100svh - var(--alto-cabecera,100px)));display:flex;align-items:center}
/* La escena (bolsa, mostrador, cajera y cliente) es un recorte transparente
   cortado solo por abajo. No se apoya en el borde: va algo más arriba (un 7 %
   del alto de la portada) y su parte de abajo se difumina hacia el rojo, para
   que el corte recto no se vea flotando. El mueble del mostrador es rojo y se
   funde con el fondo. Va casi pegada al
   borde derecho, con un margen pequeño: el cliente está entero y, pegado del
   todo, parecería que se le corta la espalda. El tamaño lo decide que no
   choque con el texto: el mostrador con la bolsa queda a la altura de los
   botones. Con el alto limitado al 30,5 % del ancho de pantalla quedan unos
   25-70 px de aire entre 1280 y 1920 px; por debajo de 1200 px baja al 28,5 %
   (se vuelve a medir en el navegador si cambia la escena). */
.vl-hero-img{position:absolute;right:clamp(12px,1.2vw,24px);bottom:7%;z-index:1;
  height:min(88%,30.5vw);width:auto;max-width:none;pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent);mask-image:linear-gradient(to bottom,#000 86%,transparent)}
/* Alineado con el logo de la cabecera: mismo ancho máximo y mismo margen. */
.vl-hero-in{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;
  padding:clamp(40px,5vw,80px) var(--pad)}
.vl-hero-txt{max-width:min(44vw,760px)}
.vl-kicker{font-family:var(--fl);font-weight:800;font-size:clamp(15px,1.25vw,22px);letter-spacing:.03em;
  text-transform:uppercase;color:var(--oro);margin:0 0 4px}
/* La letra redonda de la portada principal («Hay un Trujillo cerca de ti»). */
.vl-title{position:relative;width:fit-content;font-family:var(--fl);font-weight:800;text-transform:uppercase;
  font-size:clamp(40px,5.2vw,98px);line-height:.98;letter-spacing:-.005em;margin:0 0 .3em}
.vl-title-a{display:block;color:#fff;max-width:8.4em}   /* «VALES DE» / «CONSUMO PARA» */
.vl-title-b{display:block;color:var(--oro)}
.vl-sub{font-weight:600;font-size:clamp(17px,1.5vw,28px);line-height:1.35;color:#fff;max-width:26ch;margin:0 0 1.2em}
.vl-ctas{display:flex;flex-wrap:wrap;gap:clamp(12px,1.2vw,22px)}
.vl-hero .vl-btn{min-height:clamp(50px,3.7vw,70px);padding:0 clamp(22px,2.1vw,40px);font-size:clamp(14px,1.05vw,19px);border-radius:12px}
.vl-hero .vl-btn svg{width:1.15em;height:1.15em}

/* ---------- Estructura de secciones ---------- */
.vl-sec{padding:clamp(56px,7vw,96px) 0;scroll-margin-top:var(--alto-cabecera,72px)}
.vl-h{font-family:var(--fh);font-weight:600;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(26px,3.1vw,42px);line-height:1.08;color:var(--rojo-prof);margin:0 0 clamp(26px,3vw,40px);max-width:22ch}
.vl-h-claro{color:#fff}
/* El título en la letra redonda de la marca (Baloo), en rojo y grande, como
   lo pidió Yimi para «Presencia regional»; va a todo el ancho de la sección,
   encima de las columnas. El ancho corta la línea justo después de
   «REGIONAL»: esa palabra llega a 9,9 em y con la «A» siguiente, a 10,7.
   El mínimo de 32 px es lo que cabe en un móvil de 360 px. */
.vl-h.vl-h-redonda{font-family:var(--fl);font-weight:800;letter-spacing:0;line-height:1.02;color:var(--rojo);max-width:10.3em;
  font-size:clamp(32px,4.6vw,80px)}
.vl-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:color-mix(in srgb,var(--oro),#fff 70%);color:var(--rojo-prof);flex:0 0 auto}
.vl-ic svg{width:22px;height:22px}

/* ---------- Beneficios (pág. 3 del manual) ---------- */
/* Blanco, con la franja gris de lado a lado y la foto apoyada abajo a la
   derecha, pegada al borde de la pantalla como la curva roja del manual.
   El texto se aparta lo que mide la foto para no meterse debajo. */
.vl-benef{--vl-foto-w:clamp(240px,25vw,480px);position:relative;overflow:hidden;background:#fff;
  padding-bottom:clamp(28px,3vw,48px)}
.vl-benef-deco{position:absolute;left:0;top:0;width:clamp(56px,6.5vw,124px);height:auto;fill:var(--oro);pointer-events:none}
/* Mismo ancho y margen que la portada, alineado con el logo. El margen
   derecho deja libre el sitio de la foto; si la pantalla es más ancha que
   --max, el margen que ya sobra a los lados se descuenta. */
.vl-benef-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  padding-right:max(var(--pad),calc(var(--vl-foto-w) + 24px - max(0px,(100vw - var(--max)) / 2)))}
.vl-benef.sin-foto .vl-benef-in{padding-right:var(--pad)}
/* Título en dos líneas, como el manual: la primera fina y la segunda en
   mayúsculas y gruesa. La letra redonda de la portada. */
.vl-h2{font-family:var(--fl);color:var(--rojo);font-size:clamp(30px,3.5vw,62px);line-height:1.02;margin:0 0 .35em}
.vl-h2 span{display:block;font-weight:600}
.vl-h2 b{display:block;font-weight:800;text-transform:uppercase}
.vl-benef-intro{font-weight:700;font-size:clamp(16px,1.3vw,22px);line-height:1.45;color:var(--grafito);max-width:48ch;margin:0}
.vl-benef-banda{background:#F2F5F5;margin-top:clamp(24px,2.6vw,40px);padding:clamp(26px,2.8vw,46px) 0}
.vl-benef-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,1.8vw,32px)}
/* Los cinco beneficios entran uno detrás de otro (50 ms entre cada uno). El
   observador mira la rejilla; ella no se funde, se funden sus columnas. */
.js-reveal .vl-benef-grid.reveal{opacity:1;transform:none}
.js-reveal .vl-benef-grid .vl-benef-it{opacity:0;transform:translateY(12px);
  transition:opacity .5s cubic-bezier(.23,1,.32,1),transform .5s cubic-bezier(.23,1,.32,1);transition-delay:calc(var(--i,0) * 50ms)}
.js-reveal .vl-benef-grid.in .vl-benef-it{opacity:1;transform:none}
.vl-benef-it h3{font-family:var(--fl);font-weight:800;color:var(--rojo);font-size:clamp(17px,1.3vw,23px);line-height:1.1;margin:0 0 6px}
.vl-benef-it p{margin:0;font-weight:600;font-size:clamp(14.5px,1.05vw,17px);line-height:1.45;color:var(--grafito)}
.vl-benef-cierre{font-family:var(--fl);font-weight:700;color:var(--rojo);font-size:clamp(18px,1.6vw,28px);line-height:1.2;
  text-align:right;max-width:31ch;margin:clamp(18px,2vw,30px) 0 0 auto}
/* La foto lleva su silueta blanca y la curva roja: el blanco se funde con
   el fondo de abajo y la curva sale por el borde derecho. Cabe en su hueco
   sin deformarse y se queda siempre abajo a la derecha. */
.vl-benef-foto{position:absolute;right:0;bottom:0;z-index:3;width:var(--vl-foto-w);height:calc(100% - clamp(24px,3vw,56px));
  object-fit:contain;object-position:100% 100%;pointer-events:none;user-select:none}

/* ---------- Franjas rojas del manual (págs. 4 y 10) ---------- */
/* El título en dorado sobre el rojo; debajo, el texto en blanco y al lado
   la frase destacada con la flecha dorada, como en el manual. */
.vl-rojo{background:var(--rojo);color:#fff}
.vl-rojo .vl-h2{color:var(--oro)}
.vl-dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;
  margin-top:clamp(14px,1.6vw,24px)}
.vl-rojo-txt{margin:0;font-weight:700;font-size:clamp(16px,1.3vw,21px);line-height:1.5;color:#fff;max-width:52ch}
.vl-flecha{display:flex;gap:16px;align-items:center;margin:0;font-family:var(--fl);font-weight:700;color:var(--oro);
  font-size:clamp(17px,1.45vw,24px);line-height:1.3}
.vl-flecha-ic{display:grid;place-items:center;flex:0 0 auto;width:clamp(46px,4vw,62px);height:clamp(46px,4vw,62px);
  border-radius:50%;background:var(--oro);color:var(--rojo)}
.vl-flecha-ic svg{width:55%;height:55%}
.vl-rojo-cierre{margin:clamp(26px,3vw,44px) 0 0;font-family:var(--fl);font-weight:700;color:var(--oro);
  font-size:clamp(18px,1.6vw,26px);line-height:1.25;text-align:right}

/* ---------- Formatos (pág. 7 del manual, con la maqueta de Yimi) ---------- */
/* Fondo gris muy claro con las ondas de la marca detrás del contenido. Mide
   lo que queda de pantalla bajo la cabecera, como la portada: al llegar a
   ella (por ejemplo con «Cómo funcionan») encaja justo en la pantalla. La
   rejilla ocupa todo ese alto para que el vale quede en la esquina de abajo.
   Los tamaños también miran la altura (vh): en portátiles bajos el contenido
   se encoge un poco para seguir cabiendo en la pantalla. */
.vl-formatos{--vl-form-aire:clamp(24px,min(4vw,5vh),64px);position:relative;overflow:hidden;background:#f7f4f2;display:flex;flex-direction:column;
  min-height:calc(100svh - var(--alto-cabecera,100px));padding:var(--vl-form-aire) 0}
.vl-formatos > .vl-in{flex:1 1 auto;width:100%}
.vl-form-deco{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.vl-form-deco .rosa{fill:color-mix(in srgb,var(--rojo) 14%,#fff)}
.vl-form-deco .rojo{fill:var(--rojo)}
.vl-form-deco .oro{fill:var(--oro)}
.vl-formatos .vl-in{position:relative;z-index:1}
.vl-formatos-grid{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
/* El título: «ELIGE EL FORMATO» muy grande en rojo; debajo, el resto en
   granate. Baloo plano, sin relieve. */
.vl-form-h{position:relative;margin:0 0 clamp(18px,min(3vw,4vh),44px);text-align:center;font-family:var(--fl);font-weight:800;
  text-transform:uppercase;line-height:.95}
/* «ELIGE EL FORMATO» mide 8,5 em: el tamaño sale del ancho de su columna
   (cqi) para que quepa siempre en una línea, como en la maqueta. */
.vl-formatos-grid > div:first-child{container-type:inline-size}
.vl-form-h-a{display:inline-block;font-size:clamp(36px,5.4vw,96px);font-size:min(11.2cqi,96px);color:var(--rojo)}
.vl-form-h-b{display:block;max-width:11em;margin:.25em auto 0;font-size:clamp(22px,min(2.9vw,5.4vh),52px);color:var(--rojo-hondo);line-height:1.05}
.vl-rayos{position:absolute;fill:none;stroke:var(--oro);stroke-width:6;stroke-linecap:round;pointer-events:none}
/* Cada formato en una tarjeta blanca: el número dorado en su recuadro crema,
   una línea fina, el título en rojo y el texto en gris. */
.vl-form-list{display:grid;gap:clamp(12px,min(1.6vw,2.4vh),22px)}
.vl-form{display:flex;align-items:center;gap:clamp(16px,1.8vw,26px);padding:clamp(12px,min(1.4vw,2.2vh),20px);border-radius:22px;
  background:#fff;box-shadow:0 18px 40px -24px rgba(142,15,22,.35),0 2px 8px rgba(43,43,43,.05)}
.vl-form-n{display:grid;place-items:center;flex:0 0 auto;width:clamp(64px,min(6.6vw,11vh),110px);height:clamp(64px,min(6.6vw,11vh),110px);
  border-radius:16px;background:color-mix(in srgb,var(--oro) 14%,#fff);font-family:var(--fh);font-weight:600;
  font-size:clamp(36px,min(4.2vw,7vh),66px);line-height:1;color:var(--oro-hondo)}
.vl-form > div{padding-left:clamp(16px,1.8vw,26px);border-left:2px solid #e8e1de}
.vl-form h3{font-family:var(--fh);font-weight:600;text-transform:uppercase;font-size:clamp(20px,1.8vw,30px);color:var(--rojo);margin:0 0 4px}
.vl-form p{margin:0;font-weight:600;font-size:clamp(15px,1.15vw,19px);line-height:1.45;color:var(--grafito-suave)}
.vl-nota{margin:clamp(16px,min(2.2vw,3vh),30px) 0 0;font-weight:700;font-size:clamp(14px,1.05vw,17px);line-height:1.55;color:var(--grafito);
  padding-left:16px;border-left:4px solid var(--oro)}
/* La mano con el vale es un recorte con fondo transparente: va suelta sobre
   el fondo de la sección, sin marco. */
/* El vale en la mano, grande y en la esquina inferior derecha: la mano está
   cortada a ras por abajo y por la derecha, así que la imagen llega hasta el
   borde de la pantalla y hasta el final de la sección (se come el relleno de
   abajo), y el corte no se ve. Hasta 860 px. */
.vl-tarjeta{--sangrado:calc(var(--pad) + max(0px,(100vw - var(--max)) / 2));position:relative;align-self:end;
  width:min(860px,calc(100% + var(--sangrado)));margin:0 calc(-1 * var(--sangrado)) calc(-1 * var(--vl-form-aire,0px)) auto}
.vl-rayos-vale{right:2%;top:-4%;width:clamp(34px,3.4vw,58px);z-index:1}
.vl-tarjeta img{display:block;width:100%;height:auto}

/* ---------- A tu medida (franja roja) ---------- */
.vl-medida{background:var(--rojo);color:#fff}
.vl-medida-grid{display:grid;grid-template-columns:minmax(0,640px) minmax(0,560px);justify-content:space-between;gap:clamp(28px,4vw,64px);align-items:start}
.vl-medida-sub{margin:-8px 0 16px;font-weight:800;font-size:16px;color:var(--oro)}
.vl-param{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.vl-param li{display:flex;gap:12px;align-items:flex-start;font-weight:700;font-size:16px;line-height:1.45}
.vl-param svg{width:22px;height:22px;color:var(--oro);flex:0 0 auto;margin-top:1px}
.vl-vig{background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:22px 24px}
.vl-vig-nota{margin:0 0 12px;font-weight:700;color:var(--txt-suave);font-size:14.5px}
.vl-vig-tabla{width:100%;border-collapse:collapse}
.vl-vig-tabla th{text-align:left;font-family:var(--fh);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  font-size:12.5px;color:var(--oro);padding:0 0 10px;border-bottom:1px solid rgba(255,255,255,.25)}
.vl-vig-tabla th:last-child,.vl-vig-tabla td:last-child{text-align:right}
.vl-vig-tabla td{padding:13px 0;font-weight:700;font-size:16px;border-bottom:1px solid rgba(255,255,255,.14)}
.vl-vig-tabla tr:last-child td{border-bottom:0}
.vl-vig-tabla td b{font-family:var(--fh);font-weight:600;font-size:19px;color:var(--oro-claro);letter-spacing:.02em}

/* ---------- Cobertura ---------- */
/* Las tarjetas no pasan de 600 px aunque la sección sea ancha; la foto se
   queda a la derecha y el espacio que sobra queda entre las dos. */
.vl-cobertura{overflow:hidden}
.vl-cob-grid{display:grid;grid-template-columns:minmax(0,600px) minmax(0,760px);justify-content:space-between;gap:clamp(28px,4vw,64px);align-items:start}
/* El ancho del texto (10,8 em) corta en «markets habilitados / para el uso
   de los vales.»: la primera línea mide 9 em y con «para», 11,2.
   El número de markets va en una tarjeta blanca y redondeada, con una sombra
   suave que la despega del fondo (también blanco), como en la maqueta de Yimi: la frase arriba, el número grande en rojo y, tras una
   línea fina, para qué sirven. Todo en la letra redonda. */
.vl-cob-card{background:#fff;border-radius:22px;
  box-shadow:0 18px 40px -22px rgba(142,15,22,.32),0 2px 10px rgba(43,43,43,.07);
  padding:clamp(16px,1.8vw,24px) clamp(18px,2.2vw,30px);margin:0 0 22px}
.vl-cob-intro{margin:0 0 6px;font-family:var(--fl);font-weight:700;font-size:clamp(17px,1.4vw,22px);color:var(--grafito)}
.vl-cob-region{margin:0 0 10px;font-family:var(--fl);font-weight:800;font-size:clamp(22px,2vw,30px);letter-spacing:.02em;
  text-transform:uppercase;color:var(--oro-hondo)}
/* «Tus colaboradores siempre tendrán una tienda cerca»: el icono del
   equipo (en rojo, con rayas doradas), una línea fina y la frase en rojo. */
.vl-cob-frase{display:flex;gap:clamp(14px,1.6vw,20px);align-items:center;margin:clamp(36px,3.2vw,48px) 0 0;font-family:var(--fl);font-weight:700;
  font-size:clamp(18px,1.6vw,26px);line-height:1.2;color:var(--rojo)}
.vl-cob-equipo{flex:0 0 auto;width:clamp(44px,3.6vw,56px);height:auto;color:var(--rojo);fill:currentColor}
.vl-cob-equipo .rayos{fill:none;stroke:var(--oro);stroke-width:2.8;stroke-linecap:round}
.vl-cob-frase span{padding-left:clamp(14px,1.6vw,20px);border-left:2px solid color-mix(in srgb,var(--rojo) 40%,#fff)}
.vl-cob-total{display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);margin:0}
.vl-cob-total b{font-family:var(--fl);font-weight:800;font-size:clamp(72px,8vw,118px);line-height:.85;color:var(--rojo);
  letter-spacing:-.02em;padding-right:clamp(10px,1.2vw,18px)}
.vl-cob-total span{font-family:var(--fl);font-weight:700;font-size:clamp(17px,1.5vw,24px);line-height:1.2;color:var(--grafito);
  max-width:calc(10.8em + clamp(14px,1.6vw,24px) + 2px);   /* el texto, más el margen y la línea */
  padding-left:clamp(14px,1.6vw,24px);border-left:2px solid color-mix(in srgb,var(--rojo) 40%,#fff)}
/* Las ciudades, en tarjetas blancas con la misma sombra que la del número.
   El nombre tiene un ancho mínimo para que la línea quede alineada en las
   tres filas. */
.vl-cob-lista{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vl-cob-lista li{display:flex;align-items:center;gap:clamp(12px,1.4vw,18px);padding:12px clamp(16px,1.8vw,22px);
  border-radius:16px;background:#fff;box-shadow:0 12px 28px -18px rgba(142,15,22,.32),0 2px 8px rgba(43,43,43,.06)}
.vl-cob-lista svg{width:24px;height:24px;color:var(--rojo);flex:0 0 auto}
.vl-cob-lista b{font-family:var(--fl);font-weight:700;font-size:clamp(17px,1.3vw,20px);color:var(--grafito);min-width:5em}
.vl-cob-lista span{font-family:var(--fl);font-weight:600;font-size:clamp(16px,1.25vw,19px);line-height:1.2;color:var(--grafito-suave);
  padding-left:clamp(14px,1.6vw,20px);border-left:2px solid color-mix(in srgb,var(--rojo) 40%,#fff)}
/* El mapa de Áncash (pág. 5 del manual), en 3D como pidió Yimi: la silueta
   blanca con sus provincias y un canto más oscuro debajo que le da grosor,
   sin fondo, centrada en su columna; la sombra la despega de la página. Un
   marcador por ciudad, con brillo, sombra y su número de tiendas. */
/* Sube un poco por encima de la tarjeta (pedido de Yimi): a su lado izquierdo
   está el título, así que no pisa nada. */
.vl-cob-mapa{margin:calc(-1 * clamp(48px,7vw,140px)) auto 0;width:100%;max-width:520px}
.vl-mapa{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 18px 20px rgba(120,20,20,.28))}
.vl-mapa-canto{fill:#e6bfba}
.vl-mapa-tapa{fill:#fff}
.vl-mapa-lineas{fill:none;stroke:#efdedb;stroke-width:1.2;stroke-linejoin:round;pointer-events:none}
/* Las provincias con markets (Huaraz, Carhuaz y Huaylas) se encienden en
   dorado al pasar el ratón por ellas, por su marcador o por su ciudad en la
   lista (eso último lo pone vales.js con .encendida). */
.vl-prov{fill:#fff;transition:fill .2s ease}
.vl-prov:hover,.vl-prov.encendida{fill:var(--oro)}
.vl-pin-sombra{fill:rgba(90,10,10,.3);filter:url(#vl-pin-f)}
.vl-pin-gota{fill:url(#vl-pin-g)}
.vl-pin-brillo{fill:rgba(255,255,255,.35)}
.vl-pin-centro{fill:#fff}
.vl-pin-n{font-family:var(--fl);font-weight:800;font-size:15px;fill:var(--rojo);text-anchor:middle}
.vl-pin-ciudad{font-family:var(--fl);font-weight:700;font-size:30px;fill:var(--grafito)}

/* ---------- Ventajas (pág. 9 del manual, con la maqueta de Yimi) ---------- */
/* Fondo claro con la mancha dorada arriba a la izquierda, la roja abajo a la
   derecha y una ola crema al pie. clip y no hidden, para que la sección no
   se pueda desplazar por dentro (ver el contacto). */
.vl-ventajas{position:relative;overflow:hidden;overflow:clip;background:#fbf9f7}
.vl-vent-ola{position:absolute;left:0;bottom:0;width:100%;height:clamp(70px,11vw,200px);fill:#f5eee7;pointer-events:none}
.vl-vent-oro{position:absolute;left:0;top:0;width:clamp(110px,13vw,250px);height:auto;fill:var(--oro);pointer-events:none}
.vl-vent-rojo{position:absolute;right:0;bottom:0;width:clamp(90px,11vw,220px);height:auto;fill:var(--rojo);pointer-events:none}
.vl-vent-in{position:relative;z-index:1}
/* Título en dos líneas, roja y gris, con las dos rayas de la marca a la derecha. */
.vl-vent-h{position:relative;width:fit-content;margin:0 0 clamp(24px,2.6vw,44px);font-family:var(--fl);font-weight:800;
  font-size:clamp(34px,4.4vw,82px);line-height:1}
.vl-vent-h span{display:block;color:var(--rojo)}
.vl-vent-h b{display:block;font-weight:800;color:#2f3a44}
.vl-vent-rayos{position:absolute;left:calc(100% + .2em);top:.35em;width:clamp(30px,3.4vw,66px);height:auto;fill:none;stroke-width:7;stroke-linecap:round}
.vl-vent-rayos .r{stroke:var(--rojo)}
.vl-vent-rayos .o{stroke:var(--oro)}
/* Tarjetas blancas: el icono en su círculo crema, una línea fina, el título
   en rojo con el número dorado al lado y el texto debajo. */
.vl-vent-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.4vw,26px)}
.vl-vent{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:clamp(16px,1.6vw,30px);
  background:#fff;border-radius:20px;padding:clamp(20px,1.8vw,32px);border:1px solid rgba(43,43,43,.07);
  box-shadow:0 18px 38px -28px rgba(142,15,22,.32),0 2px 8px rgba(43,43,43,.04)}
.vl-vent .vl-ic{width:clamp(64px,5.2vw,100px);height:clamp(64px,5.2vw,100px);background:color-mix(in srgb,var(--oro) 22%,#fff);color:var(--rojo)}
.vl-vent .vl-ic svg{width:48%;height:48%}
.vl-vent-txt{align-self:stretch;padding-left:clamp(16px,1.6vw,30px);border-left:2px solid #ede7e3}
.vl-vent-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.vl-vent h3{margin:0 0 .5em;font-family:var(--fl);font-weight:800;font-size:clamp(20px,1.6vw,32px);line-height:1.1;color:var(--rojo)}
.vl-vent-n{flex:0 0 auto;font-family:var(--fh);font-weight:600;font-size:clamp(38px,3.5vw,70px);line-height:.85;
  color:color-mix(in srgb,var(--oro) 70%,#fff)}
.vl-vent p{margin:0;font-weight:600;font-size:clamp(15px,1.05vw,20px);line-height:1.45;color:#3d4650}
/* La frase final, abajo a la derecha, con la raya dorada delante. */
.vl-vent-cierre{display:flex;align-items:flex-start;justify-content:flex-end;gap:clamp(14px,1.4vw,24px);
  margin:clamp(28px,3vw,52px) clamp(0px,2vw,40px) 0 0;text-align:right;font-family:var(--fl);font-size:clamp(18px,1.6vw,32px);line-height:1.15}
.vl-vent-raya{flex:0 0 auto;width:clamp(40px,3.6vw,72px);height:5px;border-radius:3px;background:var(--oro);margin-top:.55em}
.vl-vent-cierre b{display:block;font-weight:800;color:var(--rojo)}
.vl-vent-cierre b + span{display:block;font-weight:600;color:#2f3a44}

/* ---------- Contacto (pág. 12 del manual, con la maqueta de Yimi) ---------- */
/* Fondo claro con una mancha dorada arriba a la izquierda; a la derecha, la
   persona que señala las tarjetas sobre una gran mancha roja, apoyada abajo.
   El contenido se aparta lo que mide la foto. */
/* clip y no solo hidden: con hidden la sección se puede desplazar por dentro, y al
   enfocar el botón de copiar se corría de lado lo que sobresale la mancha roja. */
.vl-contacto{--vl-foto-w:clamp(260px,30vw,600px);position:relative;overflow:hidden;overflow:clip;background:#fffaf7;padding-bottom:clamp(40px,5vw,80px)}
.vl-cont-deco{position:absolute;left:0;top:0;width:clamp(110px,13vw,250px);height:auto;fill:var(--oro);pointer-events:none}
.vl-cont-in{position:relative;z-index:2;padding-right:max(var(--pad),calc(var(--vl-foto-w) + 24px - max(0px,(100vw - var(--max)) / 2)))}
.vl-contacto.sin-foto .vl-cont-in{padding-right:var(--pad)}
.vl-cont-h{margin:0 0 .3em;font-family:var(--fl);font-weight:800;font-size:clamp(34px,4.4vw,82px);line-height:1}
.vl-cont-h span{display:block;color:var(--rojo)}
.vl-cont-h b{display:block;font-weight:800;color:#2f3a44}
.vl-cont-txt{margin:0 0 clamp(22px,2.4vw,36px);font-weight:700;font-size:clamp(17px,1.4vw,24px);line-height:1.4;color:#2f3a44}
.vl-cont-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(16px,2vw,30px);max-width:1240px}
/* Tarjetas claras: la píldora dorada del área, el nombre en rojo, WhatsApp
   en dorado, el teléfono en rosa claro y el correo debajo. */
.vl-cont-card{background:#fdf6f1;border-radius:24px;padding:clamp(18px,1.8vw,28px);
  box-shadow:0 16px 36px -24px rgba(142,15,22,.32),0 2px 8px rgba(43,43,43,.05)}
.vl-cont-rol{display:inline-block;padding:6px 16px;border-radius:999px;background:color-mix(in srgb,var(--oro) 70%,#fff);
  font-family:var(--fl);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(12px,.9vw,15px);color:#7a4600}
.vl-cont-card h3{margin:.45em 0 .6em;font-family:var(--fl);font-weight:800;font-size:clamp(22px,2vw,34px);line-height:1.1;color:var(--rojo)}
.vl-cont-acc{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.vl-cont-acc .vl-btn{min-height:clamp(46px,3.4vw,58px);padding:0 clamp(16px,1.6vw,26px);font-size:clamp(13px,1vw,17px)}
.vl-btn-tel{background:color-mix(in srgb,var(--rojo) 8%,#fff);color:var(--rojo)}
.vl-btn-tel:hover{background:color-mix(in srgb,var(--rojo) 14%,#fff)}
.vl-cont-mail{display:inline-flex;align-items:center;gap:10px;color:#2f3a44;font-weight:700;font-size:clamp(14px,1.05vw,17px);
  text-decoration:none;word-break:break-all;min-width:0}
.vl-cont-mail svg{width:20px;height:20px;flex:0 0 auto;color:var(--rojo)}
.vl-cont-mail:hover{color:var(--rojo);text-decoration:underline}
/* El correo ocupa su propia línea, con el botón de copiar al lado. */
.vl-cont-correo{display:flex;align-items:center;gap:8px;flex-basis:100%;min-width:0;margin-top:6px}
.vl-cont-copiar{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:10px;
  background:color-mix(in srgb,var(--rojo) 8%,#fff);color:var(--rojo);cursor:pointer;transition:background-color .15s,color .15s,transform .1s}
.vl-cont-copiar svg{width:18px;height:18px}
.vl-cont-copiar:hover{background:color-mix(in srgb,var(--rojo) 14%,#fff)}
.vl-cont-copiar:active{transform:scale(.94)}
.vl-cont-copiar:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}
.vl-cont-copiar.ok{background:#e3f4e8;color:#1d7a3a}
.vl-cont-foto{position:absolute;right:0;bottom:0;z-index:1;width:var(--vl-foto-w);margin:0;pointer-events:none}
.vl-cont-foto::before{content:"";position:absolute;z-index:0;left:12%;right:-10%;top:4%;bottom:-6%;background:var(--rojo);
  border-radius:58% 42% 0 0 / 46% 36% 0 0;transform:rotate(-6deg)}
.vl-cont-foto img{position:relative;z-index:1;display:block;width:100%;height:auto}
.vl-cont-rayos{position:absolute;z-index:2;left:-2%;top:18%;width:clamp(36px,3.6vw,70px);height:auto;fill:none;stroke-width:7;stroke-linecap:round}
.vl-cont-rayos .r{stroke:var(--rojo)}
.vl-cont-rayos .o{stroke:var(--oro)}

/* ---------- Página apagada ---------- */
.vl-off{padding:clamp(90px,14vw,160px) 0;text-align:center;background:var(--crema-portada)}
.vl-off h1{font-family:var(--fh);font-weight:600;text-transform:uppercase;font-size:clamp(26px,3.4vw,40px);color:var(--rojo-prof);margin:0 0 10px}
.vl-off p{font-weight:700;color:var(--grafito-suave);margin:0 0 24px}

/* ---------- Pantallas estrechas ---------- */
@media (max-width:1200px){
  .vl-benef-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vl-formatos-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vl-hero-img{height:min(88%,28.5vw)}
  /* Tres no caben: una debajo de otra, nunca dos y una suelta. */
  .vl-vent-grid{grid-template-columns:1fr;max-width:820px}
}
@media (max-width:900px){
  .vl-formatos-grid,.vl-medida-grid,.vl-cob-grid,.vl-dos{grid-template-columns:1fr}
  .vl-cob-mapa{margin-top:8px}
  .vl-contacto{padding-bottom:0}
  .vl-cont-in{padding-right:var(--pad)}
  .vl-cont-foto{position:relative;width:min(78%,380px);margin:24px 0 0 auto}
  .vl-form-deco{display:none}
  .vl-rojo-cierre{text-align:left}
  .vl-vent-cierre{justify-content:flex-start;text-align:left;margin-right:0}
  .vl-vent-rojo{width:64px}
  /* La foto ya no cabe al lado: baja al final, a la derecha, y los
     beneficios recuperan todo el ancho. */
  .vl-benef{padding-bottom:0}
  .vl-benef-in{padding-right:var(--pad)}
  .vl-benef-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vl-benef-foto{position:relative;display:block;width:min(74%,340px);height:auto;margin:8px 0 0 auto}
  /* No hay sitio para el texto y la escena lado a lado: la escena baja
     debajo del texto, a todo el ancho, y la portada mide lo que ocupa. */
  .vl-hero{flex-direction:column;align-items:stretch;min-height:0}
  .vl-hero-in{order:1;padding-bottom:12px}
  .vl-hero-txt{max-width:none}
  .vl-hero-img{position:relative;order:2;right:auto;bottom:auto;width:100%;height:auto;-webkit-mask-image:none;mask-image:none}
}
@media (max-width:560px){
  .vl-benef-grid{grid-template-columns:1fr}
  .vl-ctas .vl-btn{flex:1 1 auto}
  .vl-form{padding:14px}
  .vl-cont-acc .vl-btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .vl-btn{transition:none}
  .vl-btn:hover{transform:none}
  .js-reveal .vl-benef-grid .vl-benef-it{transform:none;transition:opacity .2s ease;transition-delay:0s}
}