/* ══════════════════════════════════════════════════════════════════════════
   BERCO WINES · landing (/)
   El recorrido: un lienzo fijo (WebGL) pinta las escenas al óleo y, por
   encima, pasan las etapas. Los tokens vienen de /comun/berco.css.
   ══════════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:90px}
body{margin:0;overflow-x:clip;background:#1d0910;color:var(--color-text);font-family:var(--font-body);font-size:16px;line-height:1.6;text-wrap:pretty;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-heading);font-weight:400;line-height:1.06;letter-spacing:-.015em;margin:0}
p{margin:0}
a{color:var(--color-accent)}
img{display:block;max-width:100%}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.saltar{position:fixed;left:12px;top:-60px;z-index:100;padding:10px 18px;border-radius:999px;background:var(--color-ink);color:var(--color-bg);font-weight:600;transition:top .2s ease}
.saltar:focus{top:12px;color:var(--color-bg)}
:focus-visible{outline:2px solid var(--color-accent-2-400);outline-offset:3px}

.kicker{margin:0 0 var(--half);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--color-accent-2-700)}

/* ---- botones con brillo de óleo ---- */
.bc-btn{position:relative;overflow:hidden;isolation:isolate}
.bc-btn::after{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 48%,transparent 62%);transform:translateX(-120%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.bc-btn:hover::after{transform:translateX(120%)}
.bc-btn-contorno{color:var(--color-accent-700);border-color:color-mix(in srgb,var(--color-accent-700) 45%,transparent);background:transparent}
.bc-btn-contorno:hover{color:var(--color-accent-700);background:color-mix(in srgb,var(--color-accent-700) 8%,transparent);border-color:var(--color-accent-700);transform:translateY(-2px)}
.bc-btn-crema{color:#F7F0E4;border-color:rgba(247,240,228,.55);background:rgba(44,9,18,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bc-btn-crema:hover{color:#F7F0E4;background:rgba(44,9,18,.34);border-color:#F7F0E4;transform:translateY(-2px)}
.botones{display:flex;flex-wrap:wrap;gap:12px}

/* ══════════════ EL VIAJE ══════════════ */
.viaje{position:relative}
.viaje-lienzo{position:sticky;top:0;height:100vh;height:100lvh;margin-bottom:-100vh;margin-bottom:-100lvh;overflow:hidden;background:#C9D6EE;z-index:0}
.viaje-gl,.viaje-particulas,.viaje-respaldo,.viaje-respaldo img{position:absolute;inset:0;width:100%;height:100%}
.viaje-particulas{pointer-events:none}
.viaje-respaldo img{object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.viaje-respaldo img.ve{opacity:1}
.viaje.con-gl .viaje-respaldo{display:none}
.viaje-video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* velo: oscurece un poco abajo para que se lea lo que pasa encima */
.viaje-velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(247,240,228,.0) 0,rgba(247,240,228,0) 55%,rgba(29,9,16,.18) 100%)}

.viaje-etapas{position:relative;z-index:2}
.etapa{position:relative;min-height:96vh;display:flex;align-items:center;padding:100px var(--edge) 60px}
.etapa.izq{justify-content:flex-start}
.etapa.der{justify-content:flex-end}

/* ---- portada: Berco detrás de las montañas (lo pinta viaje.js); la pantalla queda limpia ---- */
.portada{min-height:100vh;min-height:100svh;flex-direction:column;align-items:center;justify-content:flex-end;padding:96px var(--edge) 22px}
/* la primera tarjeta, apenas debajo de la portada */
.bienvenida{min-height:78vh}
.bienvenida .tarjeta{max-width:520px}
/* la línea chica de arriba, como la fecha sobre la hora de un celular; viaje.js la ubica justo encima de la palabra */
.portada-linea{position:absolute;left:0;right:0;top:var(--linea-top,16vh);margin:0;text-align:center;
  font-size:clamp(12px,1.1vw,15px);letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:rgba(44,9,18,.72);
  text-shadow:0 1px 14px rgba(247,240,228,.9);opacity:0;transform:translateY(10px);transition:opacity 1.2s ease .9s,transform 1.2s ease .9s}
.viaje.listo .portada-linea{opacity:1;transform:none}
/* sin WebGL: la misma letra de la etiqueta, como imagen, arriba */
.portada-marca{position:absolute;left:50%;top:17vh;width:min(66vw,1000px);height:auto;margin:0;transform:translateX(-50%);
  filter:drop-shadow(0 0 16px rgba(250,246,240,.85))}
@media (max-width:760px){.portada-marca{width:92vw;top:22vh}}
.viaje.con-texto .portada-marca{display:none}
.portada-texto h2{font-size:clamp(34px,3.8vw,52px)}
.portada-texto p{max-width:44ch}
.baja{display:flex;flex-direction:column;align-items:center;text-decoration:none;padding:8px}
.baja-gota{position:relative;width:2px;height:58px;background:linear-gradient(180deg,rgba(44,9,18,.0),rgba(44,9,18,.4));border-radius:2px;overflow:hidden}
.baja-gota::after{content:"";position:absolute;left:-3px;top:-10px;width:8px;height:10px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--color-accent);animation:gota 2.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes gota{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(68px);opacity:0}}

/* ---- tarjetas de cada etapa ---- */
.tarjeta{position:relative;width:min(540px,100%);padding:clamp(26px,3.2vw,42px);border-radius:30px;color:var(--color-text);
  background:color-mix(in srgb,#F7F0E4 95%,transparent);-webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);
  box-shadow:0 34px 90px rgba(20,4,9,.32),inset 0 1px 0 rgba(255,255,255,.6);
  opacity:0;transform:translateY(40px) rotate(-.6deg);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1.2s cubic-bezier(.2,.7,.2,1)}
.etapa.der .tarjeta{transform:translateY(40px) rotate(.6deg)}
.tarjeta.visto{opacity:1;transform:none !important}
.tarjeta h2{font-size:clamp(34px,4vw,54px);color:var(--color-accent-700);margin-bottom:14px}
.tarjeta h2 em{display:block;font-style:italic;font-weight:300;color:var(--color-accent-2-700)}
.tarjeta > p{font-size:16.5px;line-height:1.62;margin-bottom:20px}
/* el título se pinta de izquierda a derecha, como una pincelada */
.tarjeta h2{-webkit-mask-image:linear-gradient(100deg,#000 44%,transparent 56%);mask-image:linear-gradient(100deg,#000 44%,transparent 56%);
  -webkit-mask-size:280% 100%;mask-size:280% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;
  transition:-webkit-mask-position 1.6s cubic-bezier(.3,.6,.2,1) .25s,mask-position 1.6s cubic-bezier(.3,.6,.2,1) .25s}
.visto h2{-webkit-mask-position:0 0;mask-position:0 0}

.pasos{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pasos li{display:flex;gap:12px;align-items:center;padding:10px 14px;border-radius:18px;background:var(--color-surface);font-size:15px;line-height:1.35}
.pasos b{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--color-accent);color:#F7F0E4;font-family:var(--font-heading);font-weight:500;font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.chips li{padding:8px 14px;border-radius:999px;background:var(--color-accent-700);color:#F7F0E4;font-size:14px}
.tarjeta-figura{position:absolute;height:auto;pointer-events:none;filter:drop-shadow(0 26px 40px rgba(20,4,9,.42))}
/* la etiqueta Berco, clavada en el borde derecho de su tarjeta; la botella de Viajeros, apoyada a la izquierda de la suya */
.etiqueta-berco{width:clamp(150px,14vw,220px);right:clamp(-180px,-11vw,-120px);top:50%;transform:translateY(-50%) rotate(6deg);border-radius:6px}
.botella-viajeros{width:clamp(100px,9vw,140px);left:clamp(-120px,-7.5vw,-80px);bottom:-46px;transform:rotate(-5deg)}

@media (max-width:760px){
  .etapa{min-height:100vh;align-items:flex-end;padding:120px 14px 7vh}
  .etapa.izq,.etapa.der{justify-content:center}
  .tarjeta{padding:24px 20px;border-radius:26px}
  .tarjeta h2{font-size:34px}
  .tarjeta > p{font-size:15.5px}
  .pasos{grid-template-columns:1fr 1fr;gap:8px}
  .pasos li{padding:9px 10px;font-size:13.5px;gap:8px}
  .pasos b{width:24px;height:24px;font-size:13px}
  .chips li{font-size:13px;padding:7px 12px}
  /* figuras arriba a la izquierda, lejos del botón de WhatsApp */
  .etiqueta-berco{width:96px;right:auto;left:16px;top:-104px;transform:rotate(-6deg)}
  .botella-viajeros{width:58px;left:22px;bottom:auto;top:-140px;transform:rotate(-5deg)}
  .portada{padding:88px 14px 18px}
  .bienvenida{min-height:72vh}
  .portada-texto h2{font-size:32px}
  .portada-linea{letter-spacing:.24em}
}

/* ---- el hilo de vino: cuánto de la página se recorrió ---- */
.hilo{position:fixed;z-index:60;left:clamp(12px,2vw,28px);top:50%;transform:translateY(-50%);height:min(44vh,360px);
  opacity:0;pointer-events:none;transition:opacity .6s ease}
.hilo.activo{opacity:1;pointer-events:auto}
.hilo-linea{position:absolute;left:7px;top:8px;bottom:8px;width:2px;border-radius:2px;background:rgba(247,240,228,.5);box-shadow:0 0 0 1px rgba(44,9,18,.14)}
.hilo-vino{position:absolute;left:0;top:0;width:100%;height:calc(var(--p,0) * 100%);border-radius:2px;background:linear-gradient(180deg,#9DB7E6,#3E7FA8 25%,#C9A868 50%,#7A1B31 75%,#E0863A)}
.hilo ol{list-style:none;margin:0;padding:0;height:100%;display:flex;flex-direction:column;justify-content:space-between}
.hilo a{display:flex;align-items:center;gap:10px;text-decoration:none;color:#F7F0E4;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.hilo .punto{position:relative;width:16px;height:16px;border-radius:50%;background:rgba(247,240,228,.8);border:2px solid rgba(44,9,18,.35);transition:background .4s ease,transform .4s ease,border-color .4s ease}
.hilo .nombre{padding:4px 10px;border-radius:999px;background:rgba(44,9,18,.72);opacity:0;transform:translateX(-6px);transition:opacity .35s ease,transform .35s ease}
/* el nombre solo al pasar el mouse: fijo, pisaría las tarjetas de la izquierda */
.hilo a:hover .nombre,.hilo a:focus-visible .nombre{opacity:1;transform:none}
.hilo a.lleno .punto{background:var(--color-accent);border-color:#F7F0E4}
.hilo a.actual .punto{transform:scale(1.25)}
.hilo a.actual .punto::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--color-accent-2-300);animation:bercoRing 2.4s ease-out infinite}
/* en el celular: una línea de vino que se llena arriba de todo, sin tapar nada */
@media (max-width:760px){
  .hilo{left:0;right:0;top:0;transform:none;height:3px;z-index:80}
  .hilo ol{display:none}
  .hilo-linea{left:0;right:0;top:0;bottom:auto;width:auto;height:3px;border-radius:0;background:rgba(44,9,18,.08);box-shadow:none}
  .hilo-vino{height:100%;width:calc(var(--p,0) * 100%);border-radius:0 2px 2px 0;background:linear-gradient(90deg,#9DB7E6,#3E7FA8 25%,#C9A868 50%,#7A1B31 75%,#E0863A)}
}

/* ---- ¡Salud! al llegar al final: invita a escribir ---- */
.salud{position:fixed;z-index:72;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:12px;padding:10px 10px 10px 14px;border-radius:999px;background:var(--color-ink);color:#F7F0E4;
  box-shadow:0 18px 50px rgba(20,4,9,.45);font-size:15px;white-space:nowrap;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.salud.ve{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.salud svg{width:34px;height:34px;flex:none}
.salud a{padding:9px 16px;border-radius:999px;background:var(--color-accent);color:#F7F0E4;text-decoration:none;font-family:var(--font-heading);font-size:16px}
.salud a:hover{background:#8E2340}
.salud .copa-izq{transform-origin:50% 90%;animation:chin-izq 1.1s ease .3s 2}
.salud .copa-der{transform-origin:50% 90%;animation:chin-der 1.1s ease .3s 2}
@keyframes chin-izq{0%,100%{transform:rotate(0)}40%{transform:rotate(14deg) translateX(3px)}}
@keyframes chin-der{0%,100%{transform:rotate(0)}40%{transform:rotate(-14deg) translateX(-3px)}}
@media (max-width:760px){
  .salud{left:12px;right:84px;transform:translateY(30px);font-size:14px;border-radius:22px;white-space:normal;justify-content:space-between}
  .salud.ve{transform:none}
  .salud a{font-size:15px;padding:8px 12px;white-space:nowrap}
}

/* ══════════════ PIANO ══════════════ */
.piano{position:relative;z-index:3;background:var(--color-bg);padding:calc(2.2 * var(--leading)) var(--edge) calc(2.4 * var(--leading))}
.piano::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(40px,6vw,86px);transform:translateY(-99%);pointer-events:none;
  background:var(--color-bg);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path d='M0,52 C240,96 480,8 720,46 C960,84 1200,12 1440,50 L1440,90 L0,90 Z'/></svg>") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path d='M0,52 C240,96 480,8 720,46 C960,84 1200,12 1440,50 L1440,90 L0,90 Z'/></svg>") center/100% 100% no-repeat}
.piano-cabeza{max-width:1100px;margin:0 auto calc(1.2 * var(--leading));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:24px 64px;align-items:end}
.piano-cabeza h2{font-size:clamp(38px,5vw,66px);color:var(--color-accent-700)}
.piano-cabeza h2 em{display:block;font-style:italic;font-weight:300;color:var(--color-accent-2-700)}
.piano-cabeza p:not(.kicker){font-size:17px;line-height:1.65;color:var(--color-neutral-700)}
@media (max-width:860px){.piano-cabeza{grid-template-columns:1fr}}

.piano-escena{max-width:1100px;margin:0 auto}
.espaldero{position:relative;height:clamp(110px,13vw,170px);margin:0 0 -6px}
.espaldero svg,.espaldero canvas{position:absolute;inset:0;width:100%;height:100%}
.teclado-marco{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:0 0 22px 22px;
  padding:14px 14px 18px;background:linear-gradient(180deg,#3a1420,#2C0912);box-shadow:0 30px 60px rgba(44,9,18,.28),inset 0 2px 0 rgba(255,255,255,.06)}
.teclado-marco::-webkit-scrollbar{display:none}
.teclado{position:relative;display:flex;height:clamp(170px,17vw,220px);touch-action:none;user-select:none;-webkit-user-select:none}
.octava{display:flex;justify-content:center;gap:10px;margin-top:14px}
.octava[hidden]{display:none}
.octava button{font:inherit;font-family:var(--font-heading);font-size:16px;padding:9px 18px;border-radius:999px;cursor:pointer;
  color:var(--color-accent-700);background:transparent;border:1px solid color-mix(in srgb,var(--color-accent-700) 40%,transparent)}
.octava button:hover{background:color-mix(in srgb,var(--color-accent-700) 8%,transparent)}
.tecla{appearance:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}
.tecla.blanca{position:relative;flex:1 1 0;margin:0 2px;border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,#efe3cf 0,#F7F0E4 18%,#f3e8d6 82%,#e2d2b8 100%);
  box-shadow:inset 0 -6px 0 rgba(176,138,74,.28),0 6px 10px rgba(0,0,0,.25);transition:transform .08s ease,box-shadow .08s ease,background .2s ease}
.tecla.negra{position:absolute;top:0;z-index:2;height:62%;border-radius:0 0 8px 8px;transform:translateX(-50%);
  background:linear-gradient(180deg,#5a1a2c 0,#2C0912 70%,#1a050b 100%);box-shadow:inset 0 -5px 0 rgba(255,255,255,.08),0 6px 10px rgba(0,0,0,.4);
  transition:transform .08s ease,box-shadow .08s ease,background .2s ease}
.tecla.blanca.toca{transform:translateY(3px);box-shadow:inset 0 -2px 0 rgba(176,138,74,.35),0 2px 4px rgba(0,0,0,.25);background:linear-gradient(180deg,#e9d7b6,#f1e2c4)}
.tecla.negra.toca{transform:translateX(-50%) translateY(2px);background:linear-gradient(180deg,#7A1B31,#4C0F1F)}
.tecla .letra{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:11px;font-weight:600;letter-spacing:.06em;color:rgba(58,42,34,.38);pointer-events:none}
.tecla.negra .letra{bottom:8px;color:rgba(247,240,228,.4)}
.tecla .nota{position:absolute;left:0;right:0;bottom:30px;text-align:center;font-family:var(--font-heading);font-style:italic;font-size:14px;color:rgba(122,27,49,.55);pointer-events:none}
@media (hover:none){.tecla .letra{display:none}.tecla .nota{bottom:14px}}
.piano-ayuda{max-width:1100px;margin:14px auto 0;font-size:13.5px;color:var(--color-neutral-600);text-align:center}
.piano-ayuda kbd{font-family:var(--font-body);font-size:12px;padding:2px 6px;border-radius:6px;background:var(--color-surface);border:1px solid var(--color-divider)}
@media (hover:none){.piano-ayuda .con-teclado{display:none}}

/* ══════════════ PREGUNTAS ══════════════ */
.faq{position:relative;z-index:3;background:var(--color-surface);padding:calc(2.2 * var(--leading)) var(--edge)}
.faq-cabeza{max-width:760px;margin:0 auto calc(1.4 * var(--leading));text-align:center}
.faq-cabeza h2{font-size:clamp(36px,4.6vw,58px);color:var(--color-accent-700)}
.faq-cabeza h2 em{font-style:italic;font-weight:300;color:var(--color-accent-2-700)}
.faq-lista{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--color-divider)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 4px;
  font-family:var(--font-heading);font-size:clamp(20px,2.2vw,25px);line-height:1.25;color:var(--color-accent-700)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--color-accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F0E4' stroke-width='2.4' stroke-linecap='round'><path d='M12 6v12M6 12h12'/></svg>") center/16px no-repeat;
  transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 4px 22px;font-size:16.5px;line-height:1.7;color:var(--color-neutral-800);max-width:68ch}
.faq details a{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px}
.faq-cta{text-align:center;margin-top:calc(1.4 * var(--leading))}

/* ---- botón flotante de WhatsApp ---- */
.wa-flotante{position:fixed;z-index:70;right:clamp(14px,2.4vw,28px);bottom:calc(env(safe-area-inset-bottom,0px) + clamp(14px,2.4vw,26px));width:60px;height:60px;border-radius:50%;
  background:#7A1B31;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.wa-flotante:hover{transform:scale(1.07)}
.wa-flotante span{position:absolute;inset:0;border-radius:50%;border:2px solid #7A1B31;animation:bercoRing 4.2s ease-out infinite}
.wa-flotante svg{position:relative;width:30px;height:30px}

@media (prefers-reduced-motion:reduce){
  .portada-linea{transition:none;opacity:1;transform:none}
  .tarjeta,.tarjeta h2{transition:none;opacity:1;transform:none;-webkit-mask-image:none;mask-image:none}
  .baja-gota::after,.wa-flotante span,.hilo a.actual .punto::after{animation:none}
}