/* ==========================================================================
   Portada (index.html) — "destilado de luz", oct-2026. El fondo es licor dorado en movimiento (WebGL,
   portada.js); encima, vidrio y tipografía de etiqueta. Solo la carga index.html.
   Convive con styles.css, que sigue dando estilo a las ventanas (cotizar, sesión, panel, vendedores):
   por eso todo lo de aquí cuelga de .lsj / .lsj-c y las letras grandes van con !important
   (styles.css fuerza tamaños de h1/h2 en el celular).
   ========================================================================== */
:root {
  color-scheme: dark;
  --fondo: #0B0907;
  --fondo-2: #14100B;
  --vidrio: rgba(255, 236, 200, 0.06);
  --vidrio-borde: rgba(255, 220, 150, 0.16);
  --texto: #F5EEDF;
  --texto-2: #B9AE9A;
  --oro: #E2B65A;
  --oro-2: #F6D88E;
  --oro-osc: #8C6420;
  --verde-wa: #1FAF5A;
  --sombra: 0 30px 80px rgba(0, 0, 0, 0.45);
  --display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --cuerpo: 'Manrope', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body.lsj { background: var(--fondo); color: var(--texto); font: 400 16px/1.65 var(--cuerpo); overflow-x: hidden; transition: background-color .6s ease, color .6s ease; }
:where(.lsj-c) a { color: inherit; }
:where(.lsj-c) img { max-width: 100%; display: block; }
.envolver {
  max-width: 1240px; margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); }
.titulo { font: 500 clamp(36px, 5.4vw, 72px)/1.02 var(--display); letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.titulo em { font-style: italic; color: var(--oro); }
.bajada { color: var(--texto-2); max-width: 58ch; margin: 18px 0 0; font-size: 17px; }
.boton {
  position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; border-radius: 999px;
  font: 600 15px/1 var(--cuerpo); text-decoration: none; border: 0; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.boton-oro { background: linear-gradient(120deg, var(--oro-2), var(--oro) 55%, var(--oro-osc)); color: #140F07; box-shadow: 0 10px 30px rgba(226, 182, 90, .28); }
.boton-oro::after { /* brillo que cruza el botón */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .9s ease;
}
.boton-oro:hover::after { transform: translateX(120%); }
.boton-vidrio { background: var(--vidrio); border: 1px solid var(--vidrio-borde); color: var(--texto); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.boton-wa { background: var(--verde-wa); color: #fff; }
.boton:hover { transform: translateY(-2px); }
.lsj-c .boton:focus-visible, .lsj-c a:focus-visible, .lsj-c button:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

/* ---------- Menú ---------- */
.barra-nav {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 50;
  padding-top: 14px;
}
.barra-caja {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 10px 10px 10px 22px; border-radius: 999px;
  background: color-mix(in srgb, var(--fondo) 55%, transparent); border: 1px solid var(--vidrio-borde);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.barra-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 500 19px/1 var(--display); white-space: nowrap; }
.barra-marca img { height: 30px; width: auto; }
.barra-links { display: flex; gap: 26px; font-size: 14px; }
.barra-links a { text-decoration: none; color: var(--texto-2); transition: color .2s; }
.barra-links a:hover { color: var(--texto); }
.barra-nav .boton { padding: 12px 20px; font-size: 14px; }

/* ---------- Portada ---------- */
.portada { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; padding: 130px 0 90px; }
#liquido { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.portada::after { /* funde el licor con la página hacia abajo */
  content: ''; position: absolute; inset: auto 0 0 0; height: 30%; z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--fondo));
}
.portada-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.portada h1 { font: 500 clamp(44px, 5.9vw, 92px)/.98 var(--display); letter-spacing: -0.02em; margin: 18px 0 0; }
.portada h1 .linea { display: block; overflow: hidden; padding-bottom: .06em; white-space: nowrap; }
.portada h1 .linea > span { display: inline-block; }
.portada h1 em { font-style: italic; color: var(--oro); }
.portada-acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.portada-escena { position: relative; aspect-ratio: 1; perspective: 1200px; }
.portada-botellas {
  position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .25s ease-out;
  -webkit-mask-image: radial-gradient(circle at 50% 52%, #000 48%, transparent 71%);
          mask-image: radial-gradient(circle at 50% 52%, #000 48%, transparent 71%);
}
.portada-botellas img { width: 100%; height: 100%; object-fit: cover; }
.hud {
  position: absolute; z-index: 3; display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px;
  background: var(--vidrio); border: 1px solid var(--vidrio-borde);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--sombra);
  text-decoration: none; animation: flotar 6s ease-in-out infinite;
}
.hud b { font: 500 22px/1.1 var(--display); color: var(--texto); font-variant-numeric: lining-nums; }
.hud small { font: 400 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.hud-1 { top: 12%; left: -6%; }
.hud-2 { bottom: 14%; right: -4%; animation-delay: -3s; }
@keyframes flotar { 50% { transform: translateY(-10px); } }
.desliza { position: absolute; z-index: 2; left: 50%; bottom: 26px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; color: var(--texto-2); text-decoration: none; }
.desliza i { width: 1px; height: 44px; background: linear-gradient(var(--oro), transparent); animation: gota 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes gota { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- Cinta de ocasiones ---------- */
.cinta { border-block: 1px solid var(--vidrio-borde); overflow: hidden; padding: 18px 0; position: relative; z-index: 2; background: var(--fondo); }
.cinta-pista { display: flex; gap: 48px; width: max-content; animation: cinta 38s linear infinite; font: italic 500 26px/1 var(--display); color: var(--texto-2); }
.cinta-pista span::after { content: '✦'; font-style: normal; font-size: 14px; color: var(--oro); margin-left: 48px; vertical-align: middle; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------- Dos caminos ---------- */
.seccion { padding: 130px 0; position: relative; }
.caminos { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 56px; }
.camino {
  --mx: 50%; --my: 50%;
  position: relative; min-height: 520px; border-radius: 30px; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 38px; text-decoration: none;
  border: 1px solid var(--vidrio-borde); box-shadow: var(--sombra); color: #F7F0E2;
}
.camino img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.camino:hover img { transform: scale(1.06); }
.camino::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(8,6,4,.1) 0%, rgba(8,6,4,.55) 38%, rgba(8,6,4,.95) 72%); }
.camino::after { /* foco de luz que sigue al cursor */
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(246, 216, 142, .22), transparent 60%);
}
.camino:hover::after { opacity: 1; }
.camino .mono { color: #F6D88E; }
.camino h3 { font: 500 clamp(32px, 3.6vw, 48px)/1.02 var(--display); margin: 12px 0 12px; }
.camino p { color: #D8CEBB; margin: 0 0 22px; max-width: 42ch; }
.camino-precio { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.camino-precio b { font: 500 54px/1 var(--display); color: #F6D88E; font-variant-numeric: lining-nums; }
.camino-precio span { font: 400 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #D8CEBB; }
.flecha { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: #F6D88E; }
.flecha svg { transition: transform .3s; }
.camino:hover .flecha svg { transform: translateX(6px); }

/* ---------- Ocasiones: pista horizontal ---------- */
.ocasiones { overflow: hidden; }
.pista { display: flex; gap: 22px; padding: 56px 0 10px; width: max-content; }
.ocasion {
  position: relative; flex: 0 0 auto; width: min(380px, 78vw); height: 470px; border-radius: 28px; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 30px; text-decoration: none;
  border: 1px solid var(--vidrio-borde); background: var(--fondo-2);
}
.ocasion::before { /* cada ocasión tiene su propio licor de color */
  content: ''; position: absolute; inset: -30%; z-index: -2; filter: blur(40px); opacity: .9;
  background: radial-gradient(circle at 30% 30%, var(--c1), transparent 55%), radial-gradient(circle at 75% 65%, var(--c2), transparent 55%);
  transition: transform 1.2s ease;
}
.ocasion:hover::before { transform: rotate(25deg) scale(1.1); }
.ocasion::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--fondo-2) 92%, transparent)); }
.ocasion .num { position: absolute; top: 26px; left: 30px; font-family: var(--mono); font-size: 12px; color: var(--texto-2); letter-spacing: .12em; }
.ocasion h3 { font: italic 500 44px/1 var(--display); margin: 0; color: var(--texto); }
.ocasion p { margin: 0; color: var(--texto-2); font-size: 15px; }
.ocasion .acciones { display: flex; gap: 16px; align-items: center; margin-top: 10px; font-size: 14px; font-weight: 600; }
.ocasion .acciones button { background: none; border: 0; padding: 0; color: var(--oro); font: inherit; cursor: pointer; }
.ocasion .acciones a { color: var(--texto-2); text-decoration: none; }
.ocasion-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ocasion-foto::before { display: none; }
.ocasion-foto::after { background: linear-gradient(180deg, rgba(8,6,4,.1) 20%, rgba(8,6,4,.92)); }
.ocasion-foto h3, .ocasion-foto .num { color: #F7F0E2; }
.ocasion-foto p { color: #D8CEBB; }
.ocasion-foto .acciones button { color: #F6D88E; }
.ocasion-foto .acciones a { color: #D8CEBB; }
.etq-temporada { position: absolute; top: 22px; right: 22px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; background: #F6D88E; color: #140F07; padding: 8px 12px; border-radius: 999px; }

/* ---------- Marcas: vitrina que cambia con el scroll ---------- */
.vitrina { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; margin-top: 40px; }
.vitrina-fija { position: sticky; top: 120px; height: min(640px, calc(100vh - 160px)); border-radius: 32px; overflow: hidden; border: 1px solid var(--vidrio-borde); box-shadow: var(--sombra); background: #0B0907; }
.vitrina-fija img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .8s ease, transform 1.4s cubic-bezier(.2,.8,.2,1); }
.vitrina-fija img.activa { opacity: 1; transform: scale(1); }
.marcas-lista { display: grid; }
.marca { min-height: 72vh; display: grid; align-content: center; gap: 14px; padding: 40px 0; opacity: .35; transition: opacity .5s; }
.marca.activa { opacity: 1; }
.marca h3 { font: 500 clamp(44px, 5.4vw, 76px)/1 var(--display); margin: 0; }
.marca p { color: var(--texto-2); margin: 0; max-width: 46ch; font-size: 17px; }
.precios { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.precio { padding: 12px 16px; border-radius: 14px; border: 1px solid var(--vidrio-borde); background: var(--vidrio); display: grid; gap: 2px; }
.precio b { font: 500 26px/1 var(--display); color: var(--oro); font-variant-numeric: lining-nums; }
.precio small { font: 400 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.marca .flecha { color: var(--oro); text-decoration: none; margin-top: 8px; }
.marca-foto-movil { display: none; }
.aviso-precios { margin-top: 24px; color: var(--texto-2); font-size: 14px; }
.aviso-precios a { color: var(--oro); }

/* ---------- Fábrica ---------- */
.fabrica { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.fabrica-foto { border-radius: 32px; overflow: hidden; aspect-ratio: 4/5; border: 1px solid var(--vidrio-borde); box-shadow: var(--sombra); }
.fabrica-foto img { width: 100%; height: 100%; object-fit: cover; }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 34px; border-radius: 22px; overflow: hidden; border: 1px solid var(--vidrio-borde); background: var(--vidrio-borde); }
.dato { background: var(--fondo); padding: 22px; display: grid; gap: 6px; }
.dato b { font: 500 22px/1.15 var(--display); }
.dato span { color: var(--texto-2); font-size: 14px; }
.dato a { color: var(--oro); font-size: 14px; }

/* ---------- Cierre ---------- */
.cierre { text-align: center; padding: 150px 0 140px; position: relative; overflow: hidden; }
.cierre::before { content: ''; position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(226,182,90,.18), transparent 60%); pointer-events: none; }
.cierre .titulo { font-size: clamp(44px, 7vw, 100px); max-width: 14ch; margin: 18px auto 0; }
.cierre .portada-acciones { justify-content: center; }
.pie { border-top: 1px solid var(--vidrio-borde); padding: 40px 0 120px; color: var(--texto-2); font-size: 14px; }
.pie-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; }
.pie a { color: var(--texto-2); }

.wa-flotante {
  position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--verde-wa); box-shadow: 0 12px 30px rgba(31,175,90,.4);
}

/* ---------- Celular y tablet ---------- */
@media (max-width: 960px) {
  .barra-links { display: none; }
  .portada-grid, .caminos, .vitrina, .fabrica { grid-template-columns: 1fr; }
  .desliza { display: none; }
  .portada { padding-top: 110px; }
  .portada-escena { width: min(420px, 92%); margin: 0 auto; order: -1; }
  .hud-1 { left: 0; }
  .hud-2 { right: 0; }
  .vitrina-fija { display: none; }
  .marca { min-height: auto; opacity: 1; padding: 0 0 56px; }
  .marca-foto-movil { display: block; border-radius: 24px; overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--vidrio-borde); }
  .marca-foto-movil img { width: 100%; height: 100%; object-fit: cover; }
  .ocasiones .pista { overflow-x: auto; width: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; scrollbar-width: none; }
  .ocasiones .pista::-webkit-scrollbar { display: none; }
  .ocasion { scroll-snap-align: start; height: 400px; }
  .seccion { padding: 90px 0; }
}
@media (max-width: 560px) {
  .barra-marca span { display: none; }
  .camino { min-height: 440px; padding: 26px; }
  .datos { grid-template-columns: 1fr; }
  .hud b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .lsj-c *, .lsj-c *::before, .lsj-c *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Convivencia con styles.css ---------- */
/* Tamaños de letra: styles.css los fuerza en h1/h2/h3 del celular con !important */
.lsj .portada h1 { font-size: clamp(44px, 5.9vw, 92px) !important; line-height: .98 !important; margin: 0; }
.lsj .portada h1 .mono { display: block; font-size: 12px; line-height: 1.4; margin-bottom: 18px; letter-spacing: .14em; font-style: normal; }
.lsj h2.titulo { font-size: clamp(36px, 5.4vw, 72px) !important; line-height: 1.02 !important; margin-bottom: 0 !important; font-family: var(--display); }
.lsj .cierre h2.titulo { font-size: clamp(44px, 7vw, 100px) !important; }
.lsj .camino h3 { font-size: clamp(32px, 3.6vw, 48px) !important; line-height: 1.02 !important; }
.lsj .ocasion h3 { font-size: 44px !important; line-height: 1 !important; }
.lsj .marca h3 { font-size: clamp(44px, 5.4vw, 76px) !important; line-height: 1 !important; }
.lsj .lsj-c p { margin: 0; }
.lsj .lsj-c .bajada { margin-top: 18px; }
.lsj .lsj-c .camino p { margin-bottom: 22px; }
.lsj .lsj-c .aviso-precios { margin-top: 24px; }
.lsj .calc-ev { margin-top: 40px; }

/* Menú: botón de entrar y menú del celular (los maneja script.js) */
.barra-derecha { display: flex; align-items: center; gap: 10px; }
.barra-entrar { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--texto-2) !important; text-decoration: none; padding: 10px 14px; border-radius: 999px; border: 1px solid transparent; }
.barra-entrar:hover { color: var(--texto) !important; border-color: var(--vidrio-borde); }
.barra-nav .mobile-menu-toggle { display: none; padding: 10px; }
.barra-nav .mobile-menu-toggle span { background: var(--texto); }
.lsj .mobile-menu { top: calc(84px + env(safe-area-inset-top, 0px)); background: rgba(11, 9, 7, .97); }
.lsj .mobile-nav-link { font-family: var(--cuerpo); }

/* Formulario de distribuidores (el de siempre, con el fondo de la página nueva) */
.lsj #contacto.cta-final { background: var(--fondo-2); border-top: 1px solid var(--vidrio-borde); }
.lsj #contacto h2 { font-family: var(--display); }
.lsj .footer.theme-dark { background: var(--fondo); border-top: 1px solid var(--vidrio-borde); }

@media (max-width: 960px) {
  .barra-nav .mobile-menu-toggle { display: flex !important; }
  .barra-entrar span { display: none; }
  .barra-caja .boton { display: none; }
}

/* Botones: el texto dorado oscuro sobre oro, aunque styles.css pinte los enlaces */
.lsj-c a.boton-oro, .lsj-c a.boton-oro:hover { color: #140F07; }
.lsj-c a.boton-vidrio { color: var(--texto); }
.lsj .portada, .lsj .portada-grid { text-align: left; }
.lsj #contacto .btn-primary { background: linear-gradient(120deg, var(--oro-2), var(--oro) 55%, var(--oro-osc)); color: #140F07; border: 0; }
.lsj #contacto label { color: var(--texto-2); }