@charset "UTF-8";
/* =========================================================================================
   SANTO PECADO SMASHBURGER · sec-05.css — ACTO 5 «Dos sitios para pecar» (los locales)
   Fichero: web/estilos/sec-05.css        Frente: S05 (bloque F2 secciones)
   -----------------------------------------------------------------------------------------
   QUÉ ES: el rail horizontal del acto (pan, span 1,6). El motor ancla el escenario, mueve
   el rail con data-sc-pan="0.06" y publica --sc-p en la sección. Una tarjeta por local
   (foto real, dirección, teléfono, valoración, botones «Llamar» y «Cómo llegar») con 3
   reseñas reales de Google, literales, por tarjeta.

   CONTRATO DE CUE (BRIEF §8.1): el PRIMER ÍTEM del rail (Daimús) ya está presente al
   entrar, sin animación de entrada; el SEGUNDO (Playa de Gandia) se asienta de forma
   escalonada desde el progreso --sc-p (bloques .a5-settle). Todo se resuelve en CSS.

   REGLAS: 0 HEX literales (todo var() de tokens.css o color-mix() sobre ellos); sin
   transition:all; solo se anima transform / opacity (aquí, opacity y translate por --sc-p).
   Prefijo propio: .a5-. No se tocan tokens.css, componentes.css ni pagina.css.
   Contraste: la tarjeta es cristal (negro al 72 %, 9,29:1 mínimo con blanco); el granate
   no se usa como tinta; los acentos van en mostaza (--tinta-acento).
   ========================================================================================= */

/* =========================================================================================
   1 · ESCENA DEL ACTO — cabecera fija del acto + la fila del rail.
   El escenario es el [data-sc-stage] que el motor pega (sticky); aquí solo se compone.
   ========================================================================================= */

.a5 {
  --sc-p: 1;             /* respaldo sin motor: todo asentado (el motor escribe inline y manda) */
  --a5-carril: 0px;      /* carril reservado al ticket fijo de la firma (solo ≥901 px) */
}

.a5-escena {
  display: grid;
  /* minmax(0,1fr): la columna NO se estira al max-content del rail (que es ancho por
     diseño); cabecera y fila viven dentro del ancho de la ventana y el rail desborda
     por dentro (el motor lo recorre con su propio scrollWidth). */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: clamp(var(--esp-2), 1.6vh, var(--esp-4));
  align-content: start;
  padding-top: clamp(var(--esp-3), 3.2vh, var(--esp-6));
  padding-bottom: clamp(var(--esp-3), 3vh, var(--esp-6));
}

/* El ticket de la firma vive fijo en el borde derecho (comanda.css: right var(--esp-5),
   ancho min(17rem, 24vw)) en pantallas con ticket lateral: se reserva su carril para que
   la última tarjeta del rail no termine debajo. */
@media (min-width: 901px) {
  .a5 {
    --a5-carril: calc(min(17rem, 24vw) + var(--esp-5) + var(--esp-4));
  }
}

.a5-cabecera {
  padding-inline: var(--esp-pagina-x);
  padding-right: calc(var(--esp-pagina-x) + var(--a5-carril));
}

.a5-rotulo {
  margin: 0 0 var(--esp-2);
  color: var(--tinta-acento);           /* mostaza sobre negro: 11,41:1 */
}

.a5-titulo {
  color: var(--tinta-principal);
  text-shadow: var(--sombra-texto);
}

/* =========================================================================================
   2 · RAIL (data-sc-pan) — el motor le pone display:flex y lo traslada. Aquí: fila sin
   salto, aire lateral y el carril del ticket al final del recorrido.
   ========================================================================================= */

.a5-rail {
  flex-wrap: nowrap;
  align-items: stretch;
  gap: clamp(var(--esp-4), 3vw, var(--esp-6));
  padding-inline: var(--esp-pagina-x);
}

/* Vía final del rail: reserva el carril del ticket fijo (comanda.css) para que la última
   tarjeta no repose debajo. Es una caja real (no padding): el ancho de scroll del rail la
   incluye y el motor la recorre. En móvil mide 0. */
.a5-via {
  flex: 0 0 auto;
  width: var(--a5-carril);
}

/* =========================================================================================
   3 · TARJETA DEL LOCAL — panel de cristal: foto real a la izquierda, datos y reseñas a la
   derecha. La primera tarjeta (Daimús) es el ítem presente al entrar.
   ========================================================================================= */

.a5-tarjeta {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  width: min(88vw, 56rem);
  min-height: 0;
  align-self: stretch;
  overflow: hidden;
  border-radius: var(--cristal-radio);
}

/* «Tu local»: pegatina real del sistema de componentes, posada por js/sec-05.js cuando el
   visitante ha elegido local en el hero. Decorativa en forma, informativa en texto. */
.a5-etiqueta {
  position: absolute;
  top: var(--esp-3);
  left: var(--esp-3);
  z-index: 2;
}

.a5-foto {
  position: relative;
  margin: 0;
  min-height: 0;
  background-color: var(--sp-negro-humo);
}

.a5-foto__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Segunda foto real, pequeña: se posa como una copia sobre la principal. */
.a5-foto__incrustada {
  position: absolute;
  right: var(--esp-4);
  bottom: var(--esp-4);
  width: 46%;
  max-width: 12rem;
  height: auto;
  border: 1px solid color-mix(in oklab, var(--sp-blanco) 55%, transparent);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-tarjeta);
  transform: rotate(-1.5deg);
}

.a5-cuerpo {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--esp-2), 1.2vh, var(--esp-3));
  min-width: 0;
  min-height: 0;
  padding: clamp(var(--esp-4), 2.6vh, var(--esp-6));
}

.a5-meta {
  display: grid;
  gap: var(--esp-1);
}

.a5-nombre {
  margin: 0;
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-h5);
  line-height: var(--lh-compacto);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--cristal-tinta);
}

.a5-direccion {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-compacto);
  color: color-mix(in oklab, var(--sp-blanco) 88%, transparent);
}

.a5-telefono {
  margin: 0;
  font-size: var(--fs-small);
}

.a5-telefono__num {
  color: var(--tinta-acento);                     /* mostaza, 11,41:1 sobre el cristal */
  font-weight: var(--peso-texto-bold);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.a5-valoracion {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--peso-texto-bold);
  letter-spacing: var(--ls-pequeno);
  color: var(--cristal-tinta-acento);             /* mostaza sobre cristal */
}

.a5-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin: var(--esp-1) 0 0;
}

.a5-btn {
  min-height: var(--alto-tactil-min);
  padding-inline: var(--esp-5);
}

/* =========================================================================================
   4 · RESEÑAS REALES — encabezado «Lo que dicen en Google», texto literal y pie con autor,
   estrellas, fuente (Google) y fecha relativa.
   ========================================================================================= */

.a5-resenas-titulo {
  margin: 0;
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--cristal-tinta);
}

/* Filete mostaza: la marca del rótulo, sin texto ni icono añadido. */
.a5-resenas-titulo::before {
  content: '';
  display: inline-block;
  width: 1.1rem;
  height: 2px;
  margin-right: var(--esp-2);
  vertical-align: middle;
  background-color: var(--sp-mostaza);
}

.a5-resenas {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  min-height: 0;
  list-style: none;
}

.a5-resena {
  display: grid;
  gap: var(--esp-1);
}

.a5-resena + .a5-resena {
  padding-top: var(--esp-2);
  border-top: 1px dashed color-mix(in oklab, var(--sp-blanco) 22%, transparent);
}

.a5-resena__texto {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.42;
  color: var(--cristal-tinta);
}

.a5-resena__texto p {
  margin: 0;
}

.a5-resena__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--esp-2);
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-compacto);
}

.a5-resena__autor {
  font-style: normal;
  font-weight: var(--peso-texto-bold);
  letter-spacing: var(--ls-pequeno);
  color: var(--cristal-tinta);
}

.a5-resena__estrellas {
  font-size: .82em;
  letter-spacing: .12em;
  color: var(--tinta-acento);
}

.a5-resena__fuente {
  color: color-mix(in oklab, var(--sp-blanco) 78%, transparent);  /* ≈13:1 sobre el cristal */
}

.a5-nota {
  margin: 0;
  margin-top: auto;         /* la nota de bloque queda anclada al pie de la tarjeta */
  font-size: var(--fs-small);
  line-height: var(--lh-compacto);
  color: color-mix(in oklab, var(--sp-blanco) 72%, transparent);
}

/* =========================================================================================
   5 · SETTLE ESCALONADO DEL RAIL (contrato §8.1) — solo la tarjeta de Playa de Gandia:
   sus bloques entran en cascada mientras el rail la trae al encuadre. Todo desde --sc-p
   (el progreso del acto); el primer ítem no lleva .a5-settle y está presente al entrar.
   ========================================================================================= */

.a5-settle {
  --a5-t0: 0;
  --a5-tw: .02;
  --a5-piso: 0;                    /* opacidad mínima: 0 = invisible hasta su ventana */
  --a5-k: clamp(var(--a5-piso), calc((var(--sc-p, 1) - var(--a5-t0)) / var(--a5-tw)), 1);
  opacity: var(--a5-k);
  transform: translate3d(0, calc((1 - var(--a5-k)) * 1.1rem), 0);
}

/* La foto de Gandia deja un piso de visibilidad: al entrar, el rail ya enseña que hay un
   segundo local al lado (la tarjeta no es un panel vacío) y acaba de asentarse después. */
.a5-tarjeta[data-local="gandia"] .a5-foto               { --a5-t0: .36; --a5-tw: .18; --a5-piso: .35; }
.a5-tarjeta[data-local="gandia"] .a5-meta               { --a5-t0: .44; --a5-tw: .18; }
.a5-tarjeta[data-local="gandia"] .a5-resenas-titulo     { --a5-t0: .52; --a5-tw: .18; }
.a5-tarjeta[data-local="gandia"] .a5-resena:nth-child(1) { --a5-t0: .58; --a5-tw: .18; }
.a5-tarjeta[data-local="gandia"] .a5-resena:nth-child(2) { --a5-t0: .66; --a5-tw: .18; }
.a5-tarjeta[data-local="gandia"] .a5-resena:nth-child(3) { --a5-t0: .72; --a5-tw: .16; }
.a5-tarjeta[data-local="gandia"] .a5-nota               { --a5-t0: .78; --a5-tw: .16; }

/* =========================================================================================
   6 · PANTALLAS ESTRECHAS (≤900 px) — la tarjeta pasa a columna: foto arriba (franja),
   datos y reseñas debajo. El chip de la comanda vive abajo: se le deja hueco.
   ========================================================================================= */

@media (max-width: 900px) {
  .a5-escena {
    row-gap: var(--esp-1);
    padding-top: var(--esp-1);
    padding-bottom: 0;
  }

  .a5-cabecera {
    padding-right: var(--esp-pagina-x);            /* en móvil el ticket es un chip inferior */
  }

  .a5-titulo {
    font-size: var(--fs-h4);                       /* el titular cabe en una línea a 390 */
  }

  .a5-rail {
    padding-bottom: 2.5rem;                        /* hueco del chip de la comanda */
  }

  .a5-tarjeta {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 3.75rem minmax(0, 1fr);    /* franja de foto + cuerpo */
    width: 86vw;
  }

  .a5-foto__img {
    object-position: 50% 38%;                      /* el encuadre que enseña mesas, no techo */
  }

  .a5-foto__incrustada {
    right: var(--esp-2);
    bottom: var(--esp-1);
    width: 20%;
    max-width: 4.5rem;
  }

  .a5-cuerpo {
    gap: var(--esp-2);
    padding: var(--esp-1) var(--esp-3);
  }

  .a5-meta {
    gap: 0;
  }

  .a5-acciones {
    margin-top: 0;
  }

  .a5-nombre {
    font-size: var(--fs-h6);
  }

  .a5-resena {
    gap: 0;
  }

  .a5-resena__texto {
    line-height: 1.35;
  }

  /* En móvil manda el alto: el pie de cada reseña ya lleva autor, Google y fecha; la nota
     de bloque es redundante ahí (anotado en el INFORME del frente). */
  .a5-nota {
    display: none;
  }
}

/* =========================================================================================
   7 · MOVIMIENTO REDUCIDO — sin posición: los bloques aparecen ya asentados (el rail sigue
   siendo recorrible por el lector: scrollcraft.css convierte el escenario en región con
   scroll horizontal y anclaje).
   ========================================================================================= */

@media (prefers-reduced-motion: reduce) {
  .a5-settle {
    opacity: 1;
    transform: none;
  }
}