@import url('../vendor/fuentes/barlow.css');

/* ============================================================
   LHP · BELLA NUTELLA — sistema visual
   Paleta y tipografia tomadas del Manual Final de Marca v49.
   ============================================================ */

:root {
  --guava: #E84064;
  --mango: #FAAE04;
  --lavanda: #8977AF;
  --coral: #ED4F45;
  --crema: #F8F2ED;
  --verde: #87A73E;
  --cacao: #6A4336;

  --fondo: #F8F2ED;
  --fondo-velo: rgba(248, 242, 237, 0.72);
  --tinta: #2A2532;
  --tinta-suave: rgba(42, 37, 50, 0.62);
  --tinta-tenue: rgba(42, 37, 50, 0.13);
  --tarjeta: rgba(255, 255, 255, 0.55);
  --borde: rgba(42, 37, 50, 0.1);
  --sombra: 0 18px 50px -20px rgba(42, 37, 50, 0.3);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-suave: cubic-bezier(0.4, 0, 0.2, 1);

  --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --texto: 'Barlow', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  transition: background 700ms var(--ease-suave), color 700ms var(--ease-suave);
}

body.cargando { overflow: hidden; }

::selection { background: var(--guava); color: #fff; }

/* ---------- Capa de fondo: color de capitulo + formas organicas ---------- */

#atmosfera {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#tinte {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  transition: background-color 900ms var(--ease-suave);
  will-change: background-color;
}

.mancha {
  position: absolute;
  border-radius: 50% 42% 58% 46% / 48% 56% 44% 52%;
  filter: blur(70px);
  opacity: 0.2;
  will-change: transform;
  transition: background-color 900ms var(--ease-suave);
}

#mancha-a { width: 30vw; height: 30vw; left: -9vw; top: 10vh; background: var(--guava); }
#mancha-b { width: 24vw; height: 24vw; right: -6vw; top: 52vh; background: var(--mango); }
#mancha-c { width: 20vw; height: 20vw; left: 62vw; top: -6vh; background: var(--lavanda); }

/* ---------- Lienzo 3D ---------- */

#lienzo {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ---------- Cabecera ---------- */

#cabecera {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px clamp(18px, 4vw, 52px);
  transition: background 500ms var(--ease-suave), backdrop-filter 500ms var(--ease-suave);
}

#cabecera.pegada {
  background: var(--fondo-velo);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--borde);
}

#marca {
  display: block;
  height: clamp(30px, 3.4vw, 42px);
  width: auto;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 700ms var(--ease) 200ms, transform 700ms var(--ease) 200ms;
}

#marca.visible { opacity: 1; transform: none; }

#acciones-cabecera {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
}

.enlace-nav {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lavanda);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  transition: color 300ms var(--ease-suave);
}

.enlace-nav::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--guava);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 420ms var(--ease);
}

.enlace-nav:hover { color: var(--guava); }
.enlace-nav:hover::after { transform: scaleX(1); transform-origin: left; }

@media (max-width: 720px) { .enlace-nav.opcional { display: none; } }

/* ---------- Riel de progreso ---------- */

#riel {
  position: fixed;
  right: clamp(12px, 2vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  display: flex;
  flex-direction: column;
  gap: 11px;
  opacity: 0;
  transition: opacity 600ms var(--ease);
}

#riel.visible { opacity: 1; }

.paso {
  width: 8px;
  height: 8px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--tinta-tenue);
  cursor: pointer;
  position: relative;
  transition: background 400ms var(--ease-suave), transform 400ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.paso:hover { transform: scale(1.5); background: var(--tinta-suave); }
.paso.activo { background: var(--guava); transform: scale(1.6); }

.paso .etiqueta {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tinta);
  background: var(--fondo-velo);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 3px 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}

.paso:hover .etiqueta { opacity: 1; transform: translateY(-50%) translateX(0); }

@media (max-width: 720px) { #riel { display: none; } }

/* ---------- Estructura de capitulos ---------- */

#relato {
  position: relative;
  z-index: 10;
  pointer-events: none;
}

.capitulo {
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  padding: 0 clamp(18px, 6vw, 96px);
  position: relative;
}

.capitulo.alto { min-height: 190svh; }
.capitulo.der { justify-content: flex-end; }
.capitulo.centro { justify-content: center; text-align: center; }

/* El texto se queda quieto y centrado mientras dura su capitulo */
.bloque {
  position: sticky;
  top: 0;
  min-height: 100svh;
  max-width: 460px;
  padding: 96px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: auto;
}

.capitulo.centro .bloque { max-width: 740px; align-items: center; }

/* El bowl se queda con la mitad de abajo: el texto sube */
.capitulo.arriba .bloque { justify-content: flex-start; padding-top: clamp(104px, 13vh, 168px); }

/* Entrada por scroll */
.aparece {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}

.aparece.dentro { opacity: 1; transform: none; }
.aparece.d1 { transition-delay: 110ms; }
.aparece.d2 { transition-delay: 220ms; }
.aparece.d3 { transition-delay: 330ms; }

@media (prefers-reduced-motion: reduce) {
  .aparece { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Tipografia ---------- */

.tono {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lavanda);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.capitulo.centro .tono { justify-content: center; }

.tono::before {
  content: '';
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  flex: 0 0 auto;
}

.capitulo.centro .tono::before { display: none; }

h1, h2 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  color: var(--tinta);
}

h1 { font-size: clamp(56px, 12.5vw, 168px); }
h2 { font-size: clamp(42px, 6.6vw, 94px); }

h1 .rosa, h2 .rosa { color: var(--guava); }
h1 .lav, h2 .lav { color: var(--lavanda); }

.sub {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(18px, 2.3vw, 30px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lavanda);
  margin: -8px 0 22px;
}

p.cuerpo {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.68;
  color: var(--tinta-suave);
  margin: 0 0 18px;
  max-width: 46ch;
}

.capitulo.centro p.cuerpo { margin-inline: auto; }

/* ---------- Datos del ingrediente ---------- */

.datos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.datos li {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta);
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 7px 15px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 380ms var(--ease), border-color 380ms var(--ease-suave), background 380ms var(--ease-suave);
}

.datos li:hover {
  transform: translateY(-3px);
  border-color: var(--acento, var(--guava));
}

.marcador {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acento, var(--guava));
  margin-right: 8px;
  vertical-align: 1px;
}

/* ---------- Hero ---------- */

#hero { min-height: 100svh; text-align: center; }

#logo-hero {
  width: clamp(158px, 21vw, 300px);
  height: auto;
  margin: 0 auto 30px;
  display: block;
  opacity: 0;
  transform: translateY(28px) scale(0.94);
  transition: opacity 1100ms var(--ease) 140ms, transform 1100ms var(--ease) 140ms;
}

#logo-hero.visible { opacity: 1; transform: none; }

#firma {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 8vw, 104px);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--guava);
  margin: 0 0 8px;
}

#firma .pieza {
  display: inline-block;
  opacity: 0;
  transform: translateY(32px) rotate(3deg);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}

#firma.visible .pieza { opacity: 1; transform: none; }
#firma.visible .pieza:nth-child(1) { transition-delay: 380ms; }
#firma.visible .pieza:nth-child(2) { transition-delay: 470ms; }
#firma.visible .pieza:nth-child(3) { transition-delay: 560ms; }

#bajada-hero {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(15px, 1.8vw, 21px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--lavanda);
  margin: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 800ms var(--ease) 700ms, transform 800ms var(--ease) 700ms;
}

#bajada-hero.visible { opacity: 1; transform: none; }

#pista {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  opacity: 0;
  transition: opacity 700ms var(--ease);
  pointer-events: none;
}

#pista.visible { opacity: 1; }

#raton {
  width: 24px;
  height: 38px;
  border: 2px solid var(--tinta-suave);
  border-radius: 999px;
  position: relative;
}

#raton::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--guava);
  animation: rueda 1.9s var(--ease) infinite;
}

@keyframes rueda {
  0%   { transform: translateY(0);    opacity: 0; }
  22%  { opacity: 1; }
  70%  { transform: translateY(13px); opacity: 0; }
  100% { transform: translateY(13px); opacity: 0; }
}

/* ---------- Ficha de producto ---------- */

.ficha {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin: 8px 0 0;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--guava);
  color: #fff;
  box-shadow: var(--sombra);
}

.ficha .precio {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
}

.ficha .nota {
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ---------- Cierre ---------- */

#cierre .bloque { max-width: 820px; }

.botonera {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 34px 0 0;
}

.boton {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 38px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 260ms var(--ease), box-shadow 380ms var(--ease), color 340ms var(--ease-suave), border-color 340ms var(--ease-suave);
  -webkit-tap-highlight-color: transparent;
}

.boton.lleno { background: var(--guava); color: #fff; box-shadow: 0 14px 34px -14px var(--guava); }
.boton.hueco { background: transparent; color: var(--tinta); border-color: var(--borde); }

.boton::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tinta);
  transform: translateY(101%);
  transition: transform 480ms var(--ease);
}

.boton.hueco:hover { color: var(--fondo); border-color: var(--tinta); }
.boton.hueco:hover::before { transform: translateY(0); }
.boton.lleno:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -14px var(--guava); }
.boton:active { transform: translateY(1px) scale(0.985); }
.boton:focus-visible { outline: 3px solid var(--lavanda); outline-offset: 3px; }

.locales {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  justify-content: center;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
}

.local {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--tinta-suave);
}

.local strong {
  display: block;
  font-size: 21px;
  letter-spacing: 0.06em;
  color: var(--tinta);
  font-weight: 700;
}

#pie {
  position: relative;
  z-index: 10;
  padding: 36px clamp(18px, 6vw, 96px) 46px;
  border-top: 1px solid var(--borde);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--tinta-suave);
  background: var(--fondo);
}

#pie .marca-pie {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--guava);
  font-size: 17px;
}

/* ---------- Carga ---------- */

#portada {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--fondo);
  display: grid;
  place-items: center;
  gap: 18px;
  transition: opacity 800ms var(--ease), visibility 800ms;
}

#portada.fuera { opacity: 0; visibility: hidden; }

#portada .interior { display: grid; place-items: center; gap: 20px; }

#logo-carga {
  width: 168px;
  height: auto;
  animation: latir 1.9s var(--ease-suave) infinite;
}

@keyframes latir {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.055); opacity: 1; }
}

#barra {
  width: 190px;
  height: 3px;
  border-radius: 3px;
  background: var(--tinta-tenue);
  overflow: hidden;
}

#barra i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--guava), var(--mango));
  transition: width 420ms var(--ease);
}

#pct {
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ---------- Movil ---------- */

@media (max-width: 860px) {
  .capitulo {
    justify-content: flex-start !important;
    padding: 0 20px;
    min-height: 100svh;
  }
  .capitulo.alto { min-height: 170svh; }
  /* En movil el bowl manda arriba y el texto se apoya abajo */
  .bloque {
    max-width: 100%;
    width: 100%;
    justify-content: flex-end;
    padding: 86px 0 74px;
  }
  .capitulo.centro .bloque { justify-content: center; }
  h1 { font-size: clamp(46px, 15vw, 88px); }
  h2 { font-size: clamp(38px, 11.5vw, 62px); }
  .sub { font-size: clamp(16px, 5vw, 24px); }
  p.cuerpo { max-width: 100%; font-size: 15px; }
  .datos li { font-size: 11.5px; padding: 6px 12px; }
  #pista { bottom: 18px; }
  .botonera { justify-content: flex-start; }
  .capitulo.centro .botonera { justify-content: center; }
  .locales { justify-content: flex-start; gap: 12px 26px; }
  .capitulo.centro .locales { justify-content: center; }
  #pie { flex-direction: column; align-items: flex-start; text-align: left; }
}

@media (max-width: 420px) {
  #cabecera { padding: 14px 16px; }
  .capitulo { padding: 78px 16px 60px; }
}