@charset "UTF-8";
/* =========================================================================================
   SANTO PECADO SMASHBURGER · sec-01.css — ACTO 1 · Hero «Tus pecados son órdenes»
   Fichero: web/estilos/sec-01.css      Bloque: F2 secciones · frente S01
   -----------------------------------------------------------------------------------------
   Contiene: (1) la barra superior fija y mínima (.sp-barra, propiedad de S01) y
   (2) la escena del hero (prefijo .a1-).
   REGLAS: 0 HEX literales (todo color sale de var(--…); las mezclas usan color-mix/rgba con
   origen anotado, igual que componentes.css); sin `transition: all`; lo que se mueve con el
   scroll o el puntero solo anima transform/opacity; el granate nunca es tinta sobre negro.
   La escena NO define `position` sobre [data-sc-stage]: el motor lo hace sticky.
   ========================================================================================= */


/* =========================================================================================
   1 · BARRA SUPERIOR FIJA — logotipo + «Pedir» + «Reservar» (BRIEF §7: sin índice ni contador)
   ========================================================================================= */
.sp-barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-cabecera);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-2) var(--esp-pagina-x);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  /* Transición de estado (posado sobre la página), no animación de scroll: solo color. */
  transition: background-color var(--transicion-base), border-bottom-color var(--transicion-base);
}

/* Al posarse sobre la página la barra se aísla del fondo (cristal negro, mismo alfa base) */
.sp-barra.is-cargada {
  background-color: var(--cristal-fondo-humo);
  border-bottom-color: var(--cristal-borde);
  -webkit-backdrop-filter: blur(var(--cristal-blur-suave)) saturate(var(--cristal-saturacion));
  backdrop-filter: blur(var(--cristal-blur-suave)) saturate(var(--cristal-saturacion));
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .sp-barra.is-cargada { background-color: var(--cristal-fondo-fallback); }
}

.sp-barra__marca {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: var(--radio-sm);
}
.sp-barra__marca img {
  height: 2.5rem;
  width: auto;
}

.sp-barra__acciones {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}
.sp-barra__btn { padding-inline: var(--esp-5); }


/* =========================================================================================
   2 · ESCENA DEL HERO (100svh, anclada por el motor)
   ========================================================================================= */
.a1 { --a1-barra-alto: 4rem; }

.a1-escena {
  background-color: var(--sup-base);
  /* aire bajo la barra fija; el resto de la composición es absoluta y sangra a los bordes */
  padding: calc(var(--a1-barra-alto) + clamp(1rem, 5vh, 3rem)) var(--esp-pagina-x) clamp(1.5rem, 5vh, 3rem);
}

/* Luz de escena: clave cálida sobre el producto + caída caliente por abajo (mundo low-key) */
.a1-luz {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 70% 43%,
      color-mix(in oklab, var(--sp-mostaza) 10%, transparent),
      transparent 64%),
    radial-gradient(90% 46% at 62% 104%,
      color-mix(in oklab, var(--sp-granate) 26%, transparent),
      transparent 70%),
    radial-gradient(130% 110% at 50% 50%, transparent 52%,
      color-mix(in oklab, var(--sp-negro) 72%, transparent) 100%);
}

/* --- Foto real de producto, a sangre por la derecha y por abajo ------------------------- */
.a1-foto {
  position: absolute;
  z-index: 1;
  right: clamp(-9rem, -6vw, -2rem);
  bottom: clamp(-7rem, -8vh, -2rem);
  width: min(64vw, 56rem);
  margin: 0;
  pointer-events: none;
  will-change: transform;
  /* respiración muy leve ligada al scroll (--sc-p la publica el motor en el acto) */
  transform: translate3d(0, calc(var(--sc-p, 0) * -1.1rem), 0) scale(calc(1 + var(--sc-p, 0) * .04));
}
.a1-foto__img {
  display: block;
  width: 100%;
  height: auto;
  /* sombra propia del recorte (negro, mismo criterio que --cristal-sombra) */
  filter: drop-shadow(0 1.75rem 2.75rem rgba(0, 0, 0, .55));
}

/* --- Vapor declarado: 3 capas suaves sobre la foto que siguen al puntero ----------------- */
.a1-vapor {
  position: absolute;
  z-index: 2;
  width: 46%;
  aspect-ratio: 1;
  border-radius: var(--radio-circulo);
  pointer-events: none;
  will-change: transform;
  /* data-sc-spotlight publica --sc-mx/--sc-my (0..1) en la escena; sin puntero fino no se
     publican y el respaldo .5 deja el vapor centrado */
  transform: translate3d(
    calc((var(--sc-mx, .5) - .5) * var(--a1-vx, -80px)),
    calc((var(--sc-my, .5) - .5) * var(--a1-vy, -40px)),
    0);
  transition: transform var(--dur-5) var(--ease-salida);
}
.a1-vapor__nube {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--sp-blanco) 24%, transparent),
    color-mix(in oklab, var(--sp-blanco) 8%, transparent) 58%,
    transparent 100%);
  filter: blur(1.1rem);
  opacity: .7;
  animation: a1-deriva 9s ease-in-out infinite alternate;
}
.a1-vapor--a { left: -8%;  top: -10%;          --a1-vx: -92px; --a1-vy: -50px; }
.a1-vapor--b { right: 0;   top: -4%;  width: 34%; --a1-vx: 74px; --a1-vy: -34px; }
.a1-vapor--c { left: 16%;  bottom: 4%; width: 40%; --a1-vx: -52px; --a1-vy: 46px; }
.a1-vapor--b .a1-vapor__nube { opacity: .55; animation-duration: 12s; animation-delay: -3s; }
.a1-vapor--c .a1-vapor__nube { opacity: .45; animation-duration: 15s; animation-delay: -6s; }

@keyframes a1-deriva {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3%, -7%, 0) scale(1.12); }
}

/* --- Contenido ------------------------------------------------------------------------ */
.a1-contenido {
  position: absolute;
  z-index: 3;
  left: var(--esp-pagina-x);
  top: 50%;
  transform: translateY(-50%);
  width: min(34rem, 46vw);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(.875rem, 2.4vh, 1.5rem);
}

/* Antetítulo: la línea real del brief (bajo el logotipo de la barra) */
.a1-linea {
  margin: 0;
  max-width: 30rem;
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-rotulo);
  line-height: var(--lh-rotulo);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-acento);            /* mostaza sobre negro: 11,41:1 */
}

/* Titular: el rótulo REAL del cliente es el arte visible; el texto vive en el h1 */
.a1-titular { margin: 0; max-width: 30rem; }
.a1-titular__arte {
  width: min(100%, 30rem);
  height: auto;
}
.a1-solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Selector de local: hold por cue hasta el final del acto */
.a1-selector {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3);
}
.a1-selector__rotulo {
  margin: 0;
  font-size: var(--fs-p);
  line-height: var(--lh-compacto);
  color: var(--tinta-principal);
}
.a1-selector__grupo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

/* Botón de local: fantasma mostaza en reposo; elegido = mostaza maciza con tinta negra.
   El estado lo lleva aria-pressed (una sola fuente de verdad, también para lectores). */
.a1-local {
  background-color: transparent;
  border-color: var(--sp-mostaza);
  color: var(--sp-mostaza);              /* 11,41:1 sobre negro */
}
.a1-local:hover {
  background-color: color-mix(in oklab, var(--sp-mostaza) 12%, transparent);
}
.a1-local[aria-pressed="true"] {
  background-color: var(--sp-mostaza);
  border-color: var(--sp-mostaza);
  color: var(--tinta-sobre-mostaza);     /* negro sobre mostaza: 11,41:1 */
  box-shadow: var(--sombra-mostaza);
}

/* --- Garabato real: sustituye al aviso de scroll prohibido, deriva muy leve --------------- */
.a1-garabato {
  position: absolute;
  z-index: 3;
  left: var(--esp-pagina-x);
  bottom: clamp(1rem, 4vh, 2.5rem);
  width: clamp(4rem, 5.5vw, 5.5rem);
  height: auto;
  opacity: .9;
  pointer-events: none;
  will-change: transform;
  transform: rotate(-4deg) translate3d(0, calc(var(--sc-p, 0) * 1.1rem), 0);
}


/* =========================================================================================
   3 · MÓVIL (<= 860px): barra más baja, foto arriba a la derecha, contenido abajo
   ========================================================================================= */
@media (max-width: 860px) {
  .a1 { --a1-barra-alto: 3.5rem; }

  .sp-barra { padding: var(--esp-1) var(--esp-4); }
  .sp-barra__marca img { height: 2.125rem; }
  .sp-barra__btn { padding-inline: var(--esp-4); font-size: var(--fs-small); }

  .a1-escena { padding: calc(var(--a1-barra-alto) + var(--esp-3)) var(--esp-4) var(--esp-4); }

  .a1-foto {
    right: -8vw;
    top: calc(var(--a1-barra-alto) + var(--esp-2));
    bottom: auto;
    width: min(92vw, 24rem);
  }

  .a1-contenido {
    left: var(--esp-4);
    right: var(--esp-4);
    top: auto;
    bottom: calc(var(--esp-5) + 3.25rem);
    transform: none;
    width: auto;
    gap: var(--esp-3);
  }
  .a1-linea { max-width: 24ch; }
  .a1-titular__arte { width: min(68vw, 16rem); }
  .a1-selector__rotulo { font-size: var(--fs-small); }
  .a1-selector__grupo { flex-wrap: nowrap; }
  .a1-selector__grupo .a1-local { padding-inline: var(--esp-4); }

  .a1-garabato {
    left: auto;
    right: var(--esp-4);
    bottom: var(--esp-4);
    width: 3.5rem;
  }
}


/* =========================================================================================
   4 · PREFERS-REDUCED-MOTION — se queda quieto lo que se movía por scroll; el significado
   no cambia (cue sigue fundiendo; el vapor permanece, sin deriva)
   ========================================================================================= */
@media (prefers-reduced-motion: reduce) {
  .a1-foto { transform: none; }
  .a1-garabato { transform: rotate(-4deg); }
  .a1-vapor { transition: none; }
  .a1-vapor__nube { animation: none; }
}