:root { --bg:#090a0b; --font-title:'Bebas Neue',sans-serif; --font-ui:'Barlow Condensed',sans-serif; --theme-rgb:216,216,216; --page-bg:var(--bg); --page-ink:#fff; --muted:rgba(255,255,255,.78); --outline:rgba(255,255,255,.4); }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { min-height:100%; overflow-x:hidden; background:var(--page-bg); color:var(--page-ink); font-family:var(--font-ui); transition:background .38s,color .38s; }
body.theme-green { --theme-rgb:154,196,100; } body.theme-blue { --theme-rgb:82,144,235; } body.theme-orange { --theme-rgb:242,112,36; } body.theme-purple { --theme-rgb:155,93,229; } body.theme-teal { --theme-rgb:45,197,188; }
.video-stage { position:fixed; inset:0; pointer-events:none; z-index:0; background:#070809; opacity:1; transition:opacity .42s; }.video-layer { position:absolute; inset:0; opacity:0; transition:opacity .46s; overflow:hidden; }.video-layer.active { opacity:1; }.video-layer video { width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.05) brightness(.52) blur(0); transform:scale(1.05); transition:filter 220ms cubic-bezier(.2,.9,.2,1); }body.video-blurred .video-layer.active video { filter:contrast(1.05) saturate(1.05) brightness(.42) blur(16px); }
main { position:relative; z-index:2; display:grid; min-height:100dvh; place-items:center; padding:2rem; }.home-card { display:flex; width:min(92vw,760px); flex-direction:column; align-items:center; gap:clamp(.8rem,2.2vh,1.25rem); }.menu-footer { display:flex; flex-direction:column; align-items:center; gap:.4rem; padding-bottom:clamp(1rem,3vh,1.6rem); }.footer-row { display:flex; align-items:center; justify-content:center; gap:.85rem; }.footer-sep { color:var(--muted); font-size:.85rem; user-select:none; }.footer-location { font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-align:center; }.lang-switch { display:flex; align-items:center; justify-content:center; gap:.4rem; }.lang-btn { background:none; border:0; padding:0; font:700 .72rem/1 var(--font-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); cursor:pointer; transition:color .18s ease,transform .18s ease; }.lang-btn.is-active { color:var(--page-ink); }.lang-btn:hover:not(.is-active),.lang-btn:active:not(.is-active) { color:var(--page-ink); transform:translateY(-1px); }.lang-sep { font-size:.6rem; color:var(--muted); user-select:none; }.eyebrow,.subtitle { color:var(--muted); letter-spacing:.12em; text-align:center; text-transform:uppercase; }.eyebrow { font-size:1rem; }h1 { max-width:520px; font-family:var(--font-title); font-size:clamp(1.9rem,7vw,4.2rem); line-height:.9; letter-spacing:.04em; text-align:center; text-transform:uppercase; }.choice-list { position:relative; display:flex; width:min(100%,470px); flex-direction:column; gap:.62rem; padding:0 2rem; }.choice-btn { --btn-rgb:216,216,216; width:100%; border:1.5px solid var(--outline); background:transparent; color:var(--page-ink); font:800 clamp(1.15rem,4vw,1.42rem)/1.2 var(--font-ui); letter-spacing:.04em; padding:.84rem 1rem; text-align:center; text-decoration:none; text-transform:uppercase; transition:.22s; }.choice-btn[data-theme="blue"] { --btn-rgb:82,144,235; }.choice-btn[data-theme="orange"] { --btn-rgb:242,112,36; }.choice-btn[data-theme="green"] { --btn-rgb:154,196,100; }.choice-btn[data-theme="purple"] { --btn-rgb:155,93,229; }.choice-btn[data-theme="teal"] { --btn-rgb:45,197,188; }.choice-btn:hover,.choice-btn:focus-visible,.choice-btn:active { outline:none; transform:translateY(-2px); background:rgb(var(--btn-rgb)); border-color:rgb(var(--btn-rgb)); color:#fff; }.choice-label { display:inline-block; }.is-locked { cursor:not-allowed; }.btn-shake-wrap { display:contents; }.choice-btn.is-shaking .btn-shake-wrap { display:inline-block; animation:lockedShake 420ms ease; }@keyframes lockedShake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-6px); } 40% { transform:translateX(5px); } 60% { transform:translateX(-4px); } 80% { transform:translateX(3px); } }.hover-arrow { position:absolute; top:0; width:24px; height:24px; opacity:.8; pointer-events:none; will-change:transform; transition:transform 620ms cubic-bezier(.22,1,.36,1); }.hover-arrow-left { left:0; }.hover-arrow-right { right:0; }.hover-arrow svg { width:100%; height:100%; display:block; fill:none; stroke:var(--page-ink); stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 8px rgba(var(--theme-rgb),.42)); transition:stroke 260ms ease; animation:arrowFloat 2.6s ease-in-out infinite; }@keyframes arrowFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }.status-line { display:flex; align-items:center; justify-content:center; gap:.55rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.status-dot { width:7px; height:7px; border-radius:50%; background:currentColor; }.is-open { color:#6fdc8c; }.is-closed { color:#f2726b; }.socials { display:flex; align-items:center; justify-content:center; gap:.7rem; }.social-link { display:inline-flex; align-items:center; justify-content:center; color:var(--page-ink); text-decoration:none; transition:transform .22s ease,color .22s ease,filter .22s ease; }.social-link:hover,.social-link:focus-visible,.social-link:active { transform:translateY(-2px); outline:none; }.social-link[data-brand="whatsapp"]:hover,.social-link[data-brand="whatsapp"]:focus-visible,.social-link[data-brand="whatsapp"]:active { color:#25d366; filter:drop-shadow(0 0 10px rgba(37,211,102,.28)); }.social-link[data-brand="instagram"]:hover,.social-link[data-brand="instagram"]:focus-visible,.social-link[data-brand="instagram"]:active { color:#ff4fa3; filter:drop-shadow(0 0 10px rgba(255,79,163,.28)); }.social-link[data-brand="facebook"]:hover,.social-link[data-brand="facebook"]:focus-visible,.social-link[data-brand="facebook"]:active { color:#1877f2; filter:drop-shadow(0 0 10px rgba(24,119,242,.28)); }.social-link svg { width:21px; height:21px; fill:currentColor; }
@keyframes riseIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }@keyframes arrowIn { from { opacity:0; } to { opacity:.8; } }
body:not(.page-ready) .menu-footer,body:not(.page-ready) .eyebrow,body:not(.page-ready) h1,body:not(.page-ready) .choice-btn,body:not(.page-ready) .subtitle,body:not(.page-ready) .status-line,body:not(.page-ready) .hover-arrow { opacity:0; }
body.page-ready h1,body.page-ready .eyebrow { animation:riseIn 860ms cubic-bezier(.2,.9,.2,1) 180ms backwards; }body.page-ready .choice-btn { animation:riseIn 780ms cubic-bezier(.2,.9,.2,1) backwards; }body.page-ready .choice-btn:nth-of-type(1) { animation-delay:820ms; }body.page-ready .choice-btn:nth-of-type(2) { animation-delay:980ms; }body.page-ready .choice-btn:nth-of-type(3) { animation-delay:1140ms; }body.page-ready .subtitle { animation:riseIn 760ms cubic-bezier(.2,.9,.2,1) 1620ms backwards; }body.page-ready .status-line { animation:riseIn 700ms cubic-bezier(.2,.9,.2,1) 1700ms backwards; }body.page-ready .hover-arrow { animation:arrowIn 760ms cubic-bezier(.2,.9,.2,1) 1620ms backwards; }body.page-ready .menu-footer { animation:riseIn 700ms cubic-bezier(.2,.9,.2,1) 1780ms backwards; }
@media (prefers-reduced-motion:reduce) { .menu-footer,.eyebrow,h1,.choice-btn,.subtitle,.status-line,.hover-arrow { animation:none !important; opacity:1 !important; transform:none !important; } }
/* Salida al dejar el Home de verdad (click en "Ver el catálogo", "Catálogo
   láser", etc. — cualquier link que navega a otra página). Incluye
   .panel-back porque "Catálogo láser" se puede clickear estando dentro de
   #laser-options, con "Volver al menú" todavía visible al lado. */
.leaving .menu-footer,.leaving .eyebrow,.leaving h1,.leaving .choice-btn,.leaving .subtitle,.leaving .status-line,.leaving .hover-arrow,.leaving .panel-back { opacity:0; transform:translateY(10px); transition:opacity .22s ease,transform .22s ease; }
.leaving .video-stage { opacity:0 !important; transition:opacity .26s ease; }
body.is-touch .hover-arrow { display:none; }   /* afordancia de hover: no aplica en táctil */
body.page-ready .choice-btn[data-action="laser"] { animation-delay:1300ms; }
body.page-ready .choice-btn[data-action="bio"] { animation-delay:1450ms; }

/* Salida hacia la sección "Historia": igual que .leaving pero SIN apagar
   video-stage (ese fondo sigue durante toda la sección, ver JS:
   openBio/closeBio) NI el menu-footer (idiomas/RRSS deben seguir visibles
   también dentro de "Historia"). */
.menu-hiding .eyebrow,.menu-hiding h1,.menu-hiding .choice-btn,.menu-hiding .subtitle,.menu-hiding .status-line,.menu-hiding .hover-arrow { opacity:0; transform:translateY(10px); transition:opacity .22s ease,transform .22s ease; }

/* ── SECCIÓN "CORTE Y GRABADO LÁSER" ─────────────────────────────
   A diferencia de "Historia": SOLO se desvanecen los botones de navegación
   y las flechas (".choices-hiding") — eyebrow, título, subtítulo y horario
   quedan visibles todo el tiempo. En su lugar entran, en el mismo lugar,
   los dos botones de #laser-options (ver JS: openLaser/closeLaser). */
.choices-hiding #choice-list .choice-btn,.choices-hiding .hover-arrow { opacity:0; transform:translateY(10px); transition:opacity .22s ease,transform .22s ease; }
body.laser-open #choice-list { display:none; }

.laser-options { position:relative; display:flex; flex-direction:column; align-items:center; gap:.62rem; width:min(100%,470px); padding:0 2rem; }
.laser-options[hidden] { display:none; }

body:not(.laser-ready) .laser-options .choice-btn,body:not(.laser-ready) #laser-back,body:not(.laser-ready) .laser-options .hover-arrow { opacity:0; }
body.laser-ready .laser-options .choice-btn { animation:riseIn 560ms cubic-bezier(.2,.9,.2,1) backwards; }
body.laser-ready #laser-catalogo-btn { animation-delay:60ms; }
body.laser-ready #laser-cotizador-btn { animation-delay:200ms; }
body.laser-ready #laser-back { animation:riseIn 560ms cubic-bezier(.2,.9,.2,1) 340ms backwards; }
body.laser-ready .laser-options .hover-arrow { animation:arrowIn 560ms cubic-bezier(.2,.9,.2,1) 60ms backwards; }

.laser-leaving .laser-options .choice-btn,.laser-leaving #laser-back,.laser-leaving .laser-options .hover-arrow { opacity:0; transform:translateY(10px); transition:opacity .2s ease,transform .2s ease; }

/* "Volver al menú" de la sección láser: mismo lenguaje visual que los
   choice-btn (misma tipografía, borde, relleno al pasar el mouse) pero
   menos ancho, para que se note que es un botón levemente distinto aunque
   su función sea la misma. */
.panel-back.panel-back--menu-like {
  width:100%;
  border:1.5px solid var(--outline);
  color:var(--page-ink);
  font:800 clamp(1.15rem,4vw,1.42rem)/1.2 var(--font-ui);
  letter-spacing:.04em;
  padding:.84rem 1rem;
  margin:0;
  text-transform:uppercase;
  transition:.22s;
}
.panel-back.panel-back--menu-like:hover,.panel-back.panel-back--menu-like:focus-visible,.panel-back.panel-back--menu-like:active {
  outline:none;
  transform:translateY(-2px);
  background:rgb(var(--theme-rgb));
  border-color:rgb(var(--theme-rgb));
  color:#fff;
}

@media (prefers-reduced-motion:reduce) { .laser-options .choice-btn,#laser-back,.laser-options .hover-arrow { animation:none !important; opacity:1 !important; transform:none !important; } }

/* ── SECCIÓN "HISTORIA" ──────────────────────────────────────────
   Ocupa la misma celda del grid que .home-card (se superponen) para que
   una reemplace a la otra sin saltos de layout. Mientras .bio-open está
   activa, .home-card se saca del flujo (display:none) — para ese momento
   ya está invisible por la salida .menu-hiding, así que el cambio no se nota. */
main { grid-template-columns:1fr; grid-template-rows:1fr auto; }
.home-card,.bio-panel { grid-area:1 / 1; }
.menu-footer { grid-area:2 / 1; }
body.bio-open .home-card { display:none; }

.bio-panel {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  width:min(92vw,720px);
  max-height:88dvh;
  text-align:center;
}
.bio-panel[hidden] { display:none; }
.bio-title { font-family:var(--font-title); font-size:clamp(2rem,7vw,3.4rem); letter-spacing:.04em; text-transform:uppercase; }
.bio-scroll {
  width:100%;
  max-height:50vh;
  overflow-y:auto;
  text-align:left;
  padding-right:.9rem;
  scrollbar-width:thin;
  scrollbar-color:var(--muted) transparent;
}
.bio-scroll::-webkit-scrollbar { width:3px; }
.bio-scroll::-webkit-scrollbar-track { background:transparent; }
.bio-scroll::-webkit-scrollbar-thumb { background:var(--muted); border-radius:2px; }
.bio-text { font-size:clamp(1.05rem,2.2vw,1.2rem); line-height:1.6; color:var(--page-ink); }
.bio-text + .bio-text { margin-top:.9rem; }
.panel-back {
  font-weight:700;
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--page-ink);
  background:none;
  text-decoration:none;
  padding:.35rem .6rem;
  margin:.4rem -.6rem 0;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.panel-back:hover,.panel-back:focus-visible,.panel-back:active { border-color:rgb(var(--theme-rgb)); color:rgb(var(--theme-rgb)); outline:none; }

/* Entrada escalonada (mismo criterio que el resto del Home: riseIn +
   body.bio-ready, invisible mientras esa clase no está presente). */
body:not(.bio-ready) .bio-title,body:not(.bio-ready) .bio-scroll,body:not(.bio-ready) #bio-back { opacity:0; }
body.bio-ready .bio-title { animation:riseIn 560ms cubic-bezier(.2,.9,.2,1) 60ms backwards; }
body.bio-ready .bio-scroll { animation:riseIn 620ms cubic-bezier(.2,.9,.2,1) 200ms backwards; }
body.bio-ready #bio-back { animation:riseIn 560ms cubic-bezier(.2,.9,.2,1) 380ms backwards; }

/* Salida rápida al volver al menú (mismo criterio que .leaving). */
.bio-leaving .bio-title,.bio-leaving .bio-scroll,.bio-leaving #bio-back { opacity:0; transform:translateY(10px); transition:opacity .2s ease,transform .2s ease; }

@media (prefers-reduced-motion:reduce) { .bio-title,.bio-scroll,#bio-back { animation:none !important; opacity:1 !important; transform:none !important; } }
@media (max-width:620px) { main { padding:1rem; }h1 { font-size:clamp(1.5rem,8vw,2.3rem); }.bio-scroll { max-height:44vh; } }