/* vler-inicio.css · Inicio rediseñado (13-oct-2026): [vler_hero], [vler_lineas], [vler_producto_mes].
   Sale de las maquetas aprobadas (Primera ronda de cambios/maquetas-diseno-2 y maquetas-4.5, opción B). */

.vh, .vp { --vh-azul: #001A37; --vh-rojo: #E50000; font-family: Barlow, sans-serif; color: #fff; }
.vh *, .vp *, .vl * { box-sizing: border-box; }
.entry-content > .vh.alignfull { margin-top: 0 !important; margin-bottom: 0 !important; }
.home .entry-content > .vh + .vler-confianza { margin-top: 0 !important; }

/* ---------- Piezas comunes: antetítulo, titular, botón, enlace ---------- */
.vh__ante { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; font: 600 14px/1.3 Barlow, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.vh__ante::before { content: ""; width: 28px; height: 3px; background: var(--vh-rojo, #E50000); flex: none; }
.vh__h { margin: 0 0 36px; font: 700 72px/1.02 "Barlow Condensed", Barlow, sans-serif; letter-spacing: -.005em; color: #fff; text-transform: none; }
.vh__acc { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.vh__btn { display: inline-block; background: #E50000; color: #fff; font: 700 15px/1 Barlow, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 19px 34px; border-radius: 3px; text-decoration: none; transition: transform .25s, box-shadow .25s, background .25s; }
.vh__btn:hover, .vh__btn:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(229,0,0,.35); background: #c40000; color: #fff; }
.vh__link { color: #fff; font: 600 16px/1 Barlow, sans-serif; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 4px; transition: border-color .25s; }
.vh__link:hover, .vh__link:focus-visible { border-color: #fff; color: #fff; }
.vh__link span { display: inline-block; transition: transform .25s; }
.vh__link:hover span { transform: translateX(4px); }

/* ---------- [vler_hero] ---------- */
.vh { position: relative; overflow: hidden; background: #001A37; }
.vh__pista { display: grid; }
.vh__slide { grid-area: 1 / 1; position: relative; min-height: 680px; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.vh__slide.is-on { opacity: 1; visibility: visible; transition: opacity .8s ease; }
.vh__in { position: relative; z-index: 2; width: 100%; max-width: 1290px; margin: 0 auto; padding: 110px 16px 140px; }
.vh__txt { max-width: 660px; }

/* Diapositiva de foto: la foto de estudio a sangre con velo a la izquierda */
.vh__slide--foto .vh__media { position: absolute; inset: 0; z-index: 0; }
.vh__slide--foto .vh__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 62% 50%; display: block; }
.vh__slide--foto .vh__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,26,55,.94) 0%, rgba(0,26,55,.84) 30%, rgba(0,26,55,.3) 55%, rgba(0,26,55,0) 75%); }

/* Diapositiva de envases: envases a escala real sobre azul con brillo */
.vh__slide--envases { background: radial-gradient(ellipse 42% 62% at 74% 62%, #0d3f78 0%, rgba(13,63,120,0) 100%), #001A37; }
.vh__slide--envases .vh__media { position: absolute; top: 0; bottom: 0; right: max(16px, calc((100% - 1290px) / 2 + 16px)); width: 48%; z-index: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 96px; pointer-events: none; }
.vh__envases { --px: 16px; position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 18px; }
.vh__envases::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: -22px; height: 44px; z-index: -1; background: radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 70%); }
.vh__envases img { flex: none; height: calc(var(--cm) * var(--px)); width: auto; max-width: none; filter: drop-shadow(0 18px 22px rgba(0,0,0,.4)); }

/* Controles */
.vh__ctrl { position: absolute; z-index: 3; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; }
.vh__puntos { display: flex; gap: 10px; }
.vh__punto { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.4); cursor: pointer; transition: width .3s, background .3s; }
.vh__punto.is-on { width: 30px; background: #E50000; }
.vh__flecha { width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: transparent; color: #fff; font: 400 26px/1 Barlow, sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; padding-bottom: 3px; transition: background .25s, border-color .25s; }
.vh__flecha:hover, .vh__flecha:focus-visible { background: rgba(255,255,255,.12); border-color: #fff; }
.vh__punto:focus-visible, .vh__flecha:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Movimiento: entrada escalonada del texto, zoom lento de la foto, envases que suben. Se apaga si el sistema lo pide. */
@media (prefers-reduced-motion: no-preference) {
	.vh__slide.is-on .vh__txt > * { animation: vh-sube .8s cubic-bezier(.2,.7,.2,1) both; }
	.vh__slide.is-on .vh__txt > :nth-child(2) { animation-delay: .15s; }
	.vh__slide.is-on .vh__txt > :nth-child(3) { animation-delay: .35s; }
	.vh__slide--foto.is-on .vh__media img { animation: vh-zoom 9s ease-out both; }
	.vh__slide--envases.is-on .vh__envases img { animation: vh-aparece 1s cubic-bezier(.2,.7,.2,1) both; }
	.vh__slide--envases.is-on .vh__envases img:nth-child(2) { animation-delay: .12s; }
	.vh__slide--envases.is-on .vh__envases img:nth-child(3) { animation-delay: .24s; }
	.vh__slide--envases.is-on .vh__envases img:nth-child(4) { animation-delay: .36s; }
	.vh__slide--envases.is-on .vh__envases img:nth-child(5) { animation-delay: .48s; }
	.vp.vp--ver .vp__foto img { animation: vh-aparece 1s cubic-bezier(.2,.7,.2,1) .2s both, vh-flota 5s ease-in-out 1.2s infinite alternate; }
	.vp.vp--ver .vp__marca { animation: vh-marca 1.4s ease-out .4s both; }
}
@keyframes vh-sube { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes vh-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes vh-aparece { from { opacity: 0; transform: translateY(40px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes vh-flota { from { translate: 0 0; } to { translate: 0 -14px; } }
@keyframes vh-marca { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }

/* ---------- [vler_lineas] (4.5, opción B) ---------- */
.vl { max-width: 1290px; margin: 0 auto 40px; padding: 0 16px; }
.vl__gr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vl__g { background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,26,55,.06); overflow: hidden; display: flex; flex-direction: column; }
.vl__foto { background: #f6f8fb; padding: 18px; }
.vl__foto img { display: block; width: 100%; height: 200px; object-fit: contain; background: #fff; padding: 10px; }
.vl__cuerpo { padding: 20px 22px 24px; }
.vl__titulo { margin: 0 0 2px; font: 700 26px/1.1 "Barlow Condensed", Barlow, sans-serif; color: #001A37; text-transform: none; }
.vl__n { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: #E50000; }
.vl ul { list-style: none; margin: 0; padding: 0; }
.vl li { border-top: 1px solid #eef1f5; margin: 0; }
.vl li a { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; color: #33475b; text-decoration: none; font-size: 14.5px; line-height: 1.3; }
.vl li a:hover, .vl li a:focus-visible { color: #E50000; }
.vl li span { color: #8a97a6; font-size: 13px; white-space: nowrap; }
.vl__pie { text-align: center; margin-top: 28px; }
.vl__todos { display: inline-block; border: 2px solid #001A37; color: #001A37; padding: 12px 26px; font-weight: 700; text-decoration: none; letter-spacing: .04em; font-size: 14px; text-transform: uppercase; transition: background .25s, color .25s; }
.vl__todos:hover, .vl__todos:focus-visible { background: #001A37; color: #fff; }

/* ---------- [vler_producto_mes] ---------- */
.vp { position: relative; overflow: hidden; background: #001A37; background-image: radial-gradient(ellipse 48% 70% at 24% 55%, #0d3f78 0%, rgba(13,63,120,0) 100%); }
.vp__in { max-width: 1290px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: 44% 56%; align-items: center; min-height: 620px; }
.vp__foto { position: relative; overflow: hidden; height: 620px; display: flex; align-items: center; justify-content: center; }
.vp__marca { position: absolute; left: -10px; bottom: 28px; font: 700 200px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: -.01em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.14); white-space: nowrap; pointer-events: none; user-select: none; }
.vp__foto img { position: relative; height: 520px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.vp__txt { padding: 72px 0 72px 48px; }
.vp .vh__ante { color: rgba(255,255,255,.7); }
.vp__h { margin: 0 0 14px; font: 700 60px/1 "Barlow Condensed", Barlow, sans-serif; color: #fff; text-transform: none; }
.vp__lead { margin: 0 0 30px; font: 500 19px/1.45 Barlow, sans-serif; color: rgba(255,255,255,.85); max-width: 560px; }
.vp__datos { margin: 0 0 36px; padding: 0; max-width: 600px; }
.vp__datos > div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.14); }
.vp__datos > div:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.vp__datos dt { font: 700 12px/1.4 Barlow, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); padding-top: 3px; }
.vp__datos dd { margin: 0; font: 400 16.5px/1.5 Barlow, sans-serif; color: #fff; }

/* ---------- Tableta y celular: texto arriba y la imagen completa abajo (el cliente pidió ver todos los productos) ---------- */
@media (max-width: 999px) {
	.vh__slide { flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 0; }
	.vh__in { padding: 64px 32px 28px; }
	.vh__txt { max-width: 640px; }
	.vh__h { font-size: 56px; margin-bottom: 30px; }
	/* Foto de estudio: se recorta solo el azul vacío de la izquierda; los siete productos se ven enteros. */
	.vh__slide--foto .vh__media { position: relative; inset: auto; }
	.vh__slide--foto .vh__media img { height: auto; aspect-ratio: 1093 / 615; object-position: 95% 50%; }
	.vh__slide--foto .vh__media::after { background: linear-gradient(180deg, #001A37 0%, rgba(0,26,55,0) 22%); }
	.vh__slide--envases { background: radial-gradient(ellipse 70% 40% at 50% 78%, #0d3f78 0%, rgba(13,63,120,0) 100%), #001A37; }
	.vh__slide--envases .vh__media { position: relative; top: auto; bottom: auto; right: auto; width: 100%; padding: 16px 32px 0; }
	.vh__envases { --px: 13px; gap: 16px; margin-bottom: 30px; }
	.vh__pista { padding-bottom: 72px; }
	.vh__ctrl { bottom: 20px; }
	.vl__gr { grid-template-columns: repeat(2, 1fr); }
	.vp__in { grid-template-columns: 40% 60%; }
	.vp__foto img { height: 420px; }
	.vp__marca { font-size: 140px; }
	.vp__h { font-size: 48px; }
}
@media (max-width: 689px) {
	.vh__in { padding: 44px 20px 26px; }
	.vh__txt { max-width: none; }
	.vh__ante { font-size: 12px; margin-bottom: 16px; }
	.vh__h { font-size: 40px; margin-bottom: 26px; }
	.vh__acc { gap: 20px; }
	.vh__btn { width: 100%; text-align: center; }
	.vh__slide--foto .vh__media img { aspect-ratio: 840 / 615; }
	.vh__slide--envases .vh__media { padding: 12px 20px 0; }
	.vh__envases { --px: 9px; gap: 10px; margin-bottom: 26px; }
	.vh__pista { padding-bottom: 64px; }
	.vh__ctrl { bottom: 18px; }
	.vh__flecha { display: none; }
	.vl__gr { grid-template-columns: 1fr; gap: 12px; }
	.vl__g { flex-direction: row; }
	.vl__foto { flex: 0 0 34%; padding: 10px; display: flex; align-items: center; }
	.vl__foto img { height: 130px; padding: 6px; }
	.vl__cuerpo { padding: 14px 16px 12px; flex: 1; min-width: 0; }
	.vl__titulo { font-size: 22px; }
	.vl li a { font-size: 14px; padding: 8px 0; }
	.vp__in { grid-template-columns: 1fr; min-height: 0; padding: 0; }
	.vp__foto { height: 400px; }
	.vp__foto img { height: 330px; }
	.vp__marca { font-size: 96px; left: 12px; bottom: 20px; }
	.vp__txt { padding: 8px 20px 56px; }
	.vp__h { font-size: 44px; }
	.vp__lead { font-size: 17px; }
	.vp__datos > div { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
}