/* ==========================================================================
   BENDICIONES BURGER — una sección por bloque, en orden de la página
   Hero · Productos · Mapa · Quiénes somos · Contacto · Pie
   Fase 2: maquetación estática. Ninguna animación vive aquí.
   ========================================================================== */

/* ==================== HERO ==================== */

/* La furgoneta ya lleva el rótulo "BENDICIONES BURGER" pintado en la chapa.
   Superponer el titular encima crea dos wordmarks peleándose y el lema cae
   sobre las letras. Por eso el titular va ARRIBA, no encima. */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: clamp(40px, 6vw, 64px) clamp(56px, 8vw, 96px);
  background-color: var(--negro-puro);
  text-align: center;
  overflow: hidden;
}

.hero__cabecera { padding-inline: var(--margen-lateral); }
.hero__cabecera .lema { margin-top: var(--e-2); }
.hero__cabecera .hero__datos { margin-top: var(--e-3); }

/* La foto es 3:2 y más de la mitad es humo y asfalto muertos. Recortada a
   una banda ancha, la furgoneta queda grande sin comerse la pantalla. */
.hero__foto {
  position: relative;
  width: min(1010px, 78vw);   /* el brief pide entre 70 % y 85 % del ancho */
  margin-top: clamp(16px, 2vw, 32px);
  aspect-ratio: 16 / 6.4;     /* banda: recorta humo y asfalto muertos */
  overflow: hidden;
}

/* Caja con la geometría EXACTA de la foto (1280x853). El translateY va en
   porcentaje de su propia altura, así que elige qué franja de la foto se ve
   sin depender de la proporción de la banda. Todo lo que se posicione aquí
   dentro en % cae siempre sobre el mismo punto de la chapa. */
.hero__truck {
  position: absolute;
  inset-inline: 0;
  top: 0;
  aspect-ratio: 1280 / 853;
  transform: translateY(-17.6%);
}

.hero__truck img { width: 100%; height: 100%; }

/* --- La ventanilla --------------------------------------------------------
   No hay ventanilla en la foto: la escotilla ES el panel rotulado, que es
   donde va en un food truck de verdad. Al subir se lleva el rótulo y deja
   salir la luz.

   Los valores de background-size y background-position NO son a ojo: están
   calculados para que el trozo de foto que lleva la escotilla encaje al pixel
   con la foto que tiene debajo. Con la caja al 42,5 / 28,5 / 38,5 / 24,5:
     size-x = 100/38,5 = 259,74 %      pos-x = 0,425/0,385 / (1/0,385 - 1) = 69,11 %
     size-y = 100/24,5 = 408,16 %      pos-y = 0,285/0,245 / (1/0,245 - 1) = 37,75 %
   Si se mueve la caja, hay que recalcular los cuatro.                        */

.ventanilla {
  position: absolute;
  left: 42.5%;
  top: 28.5%;
  width: 38.5%;
  height: 24.5%;
  overflow: hidden;
  /* El interior del truck. Sin esto se transparenta la chapa de fuera y el
     hueco parece un rectangulo de color pegado encima, no un agujero. */
  background-color: #050302;
  box-shadow: inset 0 12px 22px -8px rgba(0, 0, 0, 0.95);
}

/* La luz cálida que hay detrás de la chapa */
.ventanilla__luz {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Charco de luz calida bajo el mostrador, con caida hasta el negro. Los
     bordes tienen que morir en transparente: si llega opaco a la esquina,
     el hueco se lee como un cartel y no como una ventanilla encendida. */
  background:
    radial-gradient(76% 96% at 50% 84%,
      rgba(255, 214, 150, 0.98) 0%,
      rgba(255, 179, 71, 0.82) 22%,
      rgba(242, 140, 40, 0.44) 44%,
      rgba(212, 87, 26, 0.14) 66%,
      rgba(0, 0, 0, 0) 88%);
}

.ventanilla__brasas { position: absolute; inset: 0; }

.brasa {
  position: absolute;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--ambar-claro);
  filter: blur(2px);
  mix-blend-mode: screen;
  opacity: 0;
  will-change: transform, opacity;
}

/* La chapa. En reposo tiene que ser INVISIBLE, y eso exige encaje al pixel.
   Redimensionar una copia con porcentajes deja halo de subpixel en el borde
   de las letras por redondeo fraccionario (medido: 3,9 de diferencia media).
   Aqui no se redimensiona nada: la copia tiene exactamente la misma caja que
   la foto original, y el recorte a la ventana lo hace un clip-path.
     clip-path: inset(arriba derecha abajo izquierda)
     arriba 28,5 · derecha 100-(42,5+38,5)=19 · abajo 100-(28,5+24,5)=47 · izq 42,5 */
.escotilla {
  position: absolute;
  inset: 0;
  clip-path: inset(28.5% 19% 47% 42.5%);
}

/* Lo que sube. Lleva el MISMO recorte que la apertura, pero este viaja con
   ella: asi la chapa es solo el parche de la ventana y no toda la furgoneta.
   Con un unico recorte la copia se limitaba a deslizar la textura dentro del
   hueco sin destapar nada. Son dos recortes: el de fuera es la apertura y no
   se mueve; el de dentro es la chapa y sube.
   yPercent -24,5 es de su propia altura, o sea justo el alto de la ventana:
   al llegar arriba la interseccion es vacia y el hueco queda abierto. */
.escotilla__chapa {
  position: absolute;
  inset: 0;
  clip-path: inset(28.5% 19% 47% 42.5%);
}

.escotilla__chapa img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* Canto inferior de la chapa: le da grosor de puerta metálica al subir.
   Div real y no pseudo-elemento, porque GSAP no puede animar un ::after. */
.escotilla__canto {
  position: absolute;
  left: 42.5%;
  top: calc(53% - 3px);   /* pegado por dentro al canto inferior de la chapa */
  width: 38.5%;
  height: 3px;
  opacity: 0;
  background: linear-gradient(180deg,
    rgba(255, 179, 71, 0.55), rgba(212, 87, 26, 0.25));
}

/* Pista de vuelo de las hamburguesas. En coordenadas de documento, para que
   el aterrizaje siga siendo válido mientras la página se desplaza. */
.pista-vuelo {
  position: absolute;
  inset: 0;
  z-index: var(--z-ui);
  pointer-events: none;
}

.clon-vuelo {
  position: absolute;
  object-fit: contain;
  will-change: transform, opacity;
}

/* Haz volumétrico. Vive fuera del recorte de la ventanilla. */
.haz {
  position: absolute;
  left: 42.5%;
  top: 28.5%;
  width: 38.5%;
  height: 24.5%;
  transform-origin: 50% 100%;
  transform: scaleX(0.2);
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 179, 71, 0.55) 0%,
    rgba(242, 140, 40, 0.28) 45%,
    rgba(242, 140, 40, 0) 100%);
  filter: blur(24px);
}

/* Viñeta que cierra durante el zoom de cámara */
.vineta {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(92% 140% at 61.75% 44%,
    rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.72) 100%);
}

/* --- Pie del hero -------------------------------------------------------
   Estas reglas se perdieron al reconstruir la escotilla y se restauran
   aqui. El bloque de datos y el microcopy quedaron sin estilar. */

.hero__pie { margin-top: clamp(20px, 2.5vw, 32px); }

.hero__datos {
  font-size: var(--t-etiqueta);
  line-height: 1.9;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris-humo);
}

.hero__datos span { display: block; color: var(--oro); }

.hero__acciones {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__microcopy {
  margin-top: 10px;
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-humo);
}

.hero__acciones .boton--texto { margin-top: var(--e-2); }

.hero__indicador {
  position: absolute;
  bottom: var(--e-3);
  left: 50%;
  translate: -50% 0;
  color: var(--gris-apagado);
}

.hero__indicador svg { width: 22px; height: 22px; }

/* En movil la furgoneta necesita mas alto para que se lea el rotulo */
@media (max-width: 767px) {
  .hero__foto { aspect-ratio: 16 / 9; width: 100%; }
  /* La banda es más alta, así que se ve más foto: hay que recentrarla o
     sobra hueco por abajo. 16/9 deja ver el 84,4 % de la altura. */
  .hero__truck { transform: translateY(-7.8%); }
}


/* ==================== PRODUCTOS ==================== */

.productos { background-color: var(--negro-puro); }

.productos .titular-seccion {
  text-align: center;
  margin-bottom: var(--e-12);
}

.rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-8) var(--e-4);
}

@media (min-width: 768px)  { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rejilla { grid-template-columns: repeat(3, 1fr); } }

.tarjeta {
  display: grid;
  grid-template-rows: auto 1fr;
  text-align: center;
}

/* Caja de proporción fija: las seis fotos tienen ratios distintos (1,199 a
   1,387) y sin esto las tarjetas quedarían de alturas distintas. Con
   `contain` sobre negro puro no se recorta nada y el relleno no se ve. */
.tarjeta__foto {
  aspect-ratio: 5 / 4;
  background-color: var(--negro-puro);
}

.tarjeta__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tarjeta__texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  padding-top: var(--e-3);
}

.nombre-producto span {
  display: block;
  font-size: 0.72em;
  letter-spacing: 0.02em;
}

.ingredientes {
  font-size: var(--t-etiqueta);
  line-height: 1.9;
  color: var(--gris-humo);
}

.tarjeta__nota {
  font-size: var(--t-etiqueta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-humo);
}

.tarjeta .precio { margin-top: auto; padding-top: var(--e-2); }

/* Separador de las patatas, como en el cartel del menú */
.separador {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--e-3);
  margin-block: var(--e-12);
}

.separador__rotulo {
  font-family: var(--f-titular);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oro);
  white-space: nowrap;
}


/* ==================== MAPA ==================== */

.mapa { background-color: var(--negro-carbon); }

.mapa__reja {
  display: grid;
  gap: var(--e-6);
  align-items: center;
}

@media (min-width: 900px) {
  /* Los datos van primero en el DOM y en la pantalla: el encabezado tiene
     que leerse antes que el mapa. Sin `order`, que enmascaraba el problema. */
  .mapa__reja { grid-template-columns: 1.15fr 1fr; gap: var(--e-8); }
}

.mapa__lienzo {
  aspect-ratio: 4 / 3;
  background-color: var(--negro-humo);
  border: 1px solid var(--linea-oro);
  border-radius: var(--radio);
  overflow: hidden;
}

/* El retrato se mueve dentro de un marco que lo recorta, o el parallax
   dejaria hueco por arriba o por abajo. */
.sobre__retrato {
  overflow: hidden;
  aspect-ratio: 1055 / 1400;
}

.sobre__retrato img {
  width: 100%;
  height: 106%;
  object-fit: cover;
  object-position: center 42%;
}

/* --- Mapa cargado -------------------------------------------------------
   Filtro oscuro para que encaje con el tema. Comprobado a ojo: con estos
   valores las calles y los nombres siguen leyendose. */
.mapa__lienzo iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(92%) hue-rotate(180deg) contrast(0.92) brightness(0.95);
}

.mapa--cargado .mapa__reposo { display: none; }

.mapa__reposo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  height: 100%;
  padding: var(--e-4);
  text-align: center;
}

.mapa__pin { width: 36px; height: 36px; color: var(--ambar); }

.mapa__direccion { color: var(--hueso); }

.mapa__reposo .boton { margin-top: var(--e-2); }

.mapa__aviso {
  max-width: 34ch;
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--gris-humo);
}

.ficha {
  margin-block: var(--e-4) var(--e-6);
  display: grid;
  gap: var(--e-1);
}

.ficha dt {
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oro);
}

.ficha dd {
  margin: 0 0 var(--e-3);
  line-height: 1.7;
}

.mapa__secundarios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-2);
}


/* ==================== QUIÉNES SOMOS ==================== */

.sobre { background-color: var(--negro-puro); }

.sobre__reja {
  display: grid;
  gap: var(--e-6);
  align-items: center;
}

@media (min-width: 900px) {
  .sobre__reja { grid-template-columns: 1fr 1fr; gap: var(--e-12); }
}

.sobre__retrato img { width: 100%; height: auto; }

.sobre__texto .titular-seccion { margin-bottom: var(--e-4); }

/* Bloque de los dos negocios */
.dos-negocios {
  display: grid;
  gap: var(--e-4);
  align-items: center;
  margin-top: var(--e-12);
  padding-top: var(--e-8);
  border-top: 1px solid var(--linea-oro);
}

@media (min-width: 900px) {
  .dos-negocios { grid-template-columns: 340px 1fr; gap: var(--e-8); }
}

.dos-negocios__foto img { width: 100%; height: auto; }

.frase {
  font-family: var(--f-producto);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  line-height: 1.3;
  color: var(--oro-claro);
}

.enlace-instagram {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: var(--e-3);
  font-size: var(--t-etiqueta);
  color: var(--gris-humo);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--gris-apagado);
  transition: color var(--dur-hover) var(--ease-salida);
}

.enlace-instagram:hover { color: var(--hueso); }
.enlace-instagram svg { width: 18px; height: 18px; flex: none; }


/* ==================== CONTACTO ==================== */

.contacto {
  background-color: var(--negro-puro);
  border-top: 1px solid var(--linea-oro);
}

.contacto__interior {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contacto__marca { margin-bottom: var(--e-1); }

.telefono {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  margin-block: var(--e-6) var(--e-4);
  font-family: var(--f-producto);
  font-size: clamp(2rem, 1.6rem + 1.7vw, 3rem);
  color: var(--oro-claro);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--dur-hover) var(--ease-salida);
}

.telefono:hover { color: var(--ambar-claro); }

.contacto__redes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-2);
}

.contacto__datos {
  margin-top: var(--e-8);
  font-size: var(--t-etiqueta);
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--gris-humo);
}

.contacto__datos span { display: block; color: var(--oro); }


/* ==================== PIE ==================== */

.pie {
  padding-block: var(--e-4);
  border-top: 1px solid var(--linea-tenue);
  background-color: var(--negro-puro);
}

.pie__interior {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-1) var(--e-3);
  font-size: var(--t-micro);
  color: var(--gris-humo);
}

/* ==================== DESMONTAJE DE LAS HAMBURGUESAS ==================== */

.tarjeta[data-producto] .tarjeta__foto,
.tarjeta--patatas .tarjeta__foto {
  position: relative;
}

/* La tarjeta es el contenedor de referencia de sus etiquetas: lo que decide
   si caben no es el ancho de la ventana sino el de la propia tarjeta. A
   1024 px la rejilla sigue en 3 columnas pero cada tarjeta es mucho mas
   estrecha que a 1440, y con un cuerpo de letra fijo se pisaban. */
.tarjeta[data-producto] .tarjeta__foto {
  overflow: hidden;
  container-type: inline-size;
}

.foto-montada {
  transition: opacity var(--dur-entrada) var(--ease-entrada);
}

.tarjeta--abierta .foto-montada { opacity: 0; }

/* Las capas viven en una caja algo más baja que el marco: al separarse
   necesitan sitio por arriba y por abajo o el recorte se las come. */
.despiece {
  position: absolute;
  inset: 8% 0;
  opacity: 0;
  pointer-events: none;
}

.capa { position: absolute; inset: 0; will-change: transform; }

.capa img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Etiquetas ----------------------------------------------------------
   A la derecha por defecto; en la tercera columna se van a la izquierda
   para no salirse de la tarjeta. */
.rotulos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rotulo-capa {
  position: absolute;
  left: 62%;
  translate: 0 -50%;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 38%;
  opacity: 0;
  transform: translateX(-8px);
  font-size: var(--t-micro);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--oro-claro);
  text-align: left;
}

/* La línea fina dorada que apunta a la capa y termina en un punto. */
.rotulo-capa i {
  position: relative;
  flex: none;
  width: 22px;
  height: 1px;
  background-color: var(--oro);
}

.rotulo-capa i::after {
  content: "";
  position: absolute;
  left: -2px;
  top: -1.5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--oro);
}

.rejilla > .tarjeta:nth-child(3) .rotulo-capa {
  left: auto;
  right: 62%;
  flex-direction: row-reverse;
  text-align: right;
}

.rejilla > .tarjeta:nth-child(3) .rotulo-capa i::after {
  left: auto;
  right: -2px;
}

/* Resplandor ámbar muy suave detrás de la tarjeta abierta */
.tarjeta[data-producto] .tarjeta__foto::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(242, 140, 40, 0.28), rgba(242, 140, 40, 0));
  transition: opacity var(--dur-entrada) var(--ease-entrada);
}

.tarjeta--abierta .tarjeta__foto::before { opacity: 1; }

/* --- Disparador táctil y pista ------------------------------------------
   Cubre la foto entera. Antes medía 8 px de alto: un objetivo imposible de
   tocar y un foco de teclado ridículo. Ahora el área interactiva es la
   propia imagen, que es lo que la gente intenta tocar. */
.tarjeta__disparador {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--gris-humo);
}

.tarjeta__pista {
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tarjeta--tocada .tarjeta__pista,
.tarjeta--abierta .tarjeta__pista { visibility: hidden; }

@media (hover: hover) and (pointer: fine) {
  .tarjeta__pista { display: none; }
}

/* --- Patatas: sin foto de ingredientes, el hover es otro ---------------- */
.tarjeta--patatas .tarjeta__foto img,
.tarjeta--patatas .nombre-producto,
.tarjeta--patatas .precio {
  transition:
    transform var(--dur-entrada) var(--ease-entrada),
    opacity   var(--dur-entrada) var(--ease-entrada);
}

.tarjeta--patatas .precio { opacity: 0.75; }

@media (hover: hover) and (pointer: fine) {
  .tarjeta--patatas:hover .tarjeta__foto img {
    transform: scale(1.05) rotate(1.5deg);
  }
  .tarjeta--patatas:hover .nombre-producto { transform: translateY(-6px); }
  .tarjeta--patatas:hover .precio { opacity: 1; }
}

.tarjeta--patatas .tarjeta__foto::after {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(242, 140, 40, 0.22), rgba(242, 140, 40, 0));
  transition: opacity var(--dur-entrada) var(--ease-entrada);
}

@media (hover: hover) and (pointer: fine) {
  .tarjeta--patatas:hover .tarjeta__foto::after { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta--patatas .tarjeta__foto img,
  .tarjeta--patatas .nombre-producto { transition: none; }
  .tarjeta--patatas:hover .tarjeta__foto img { transform: none; }
  .tarjeta--patatas:hover .nombre-producto { transform: none; }
}

/* Donde dos capas quedan a menos de un 11 % de altura una de otra, una
   etiqueta de dos líneas no cabe en el hueco. Se baja el cuerpo de letra y se
   ensancha, para que más textos quepan en una sola línea. */
.tarjeta--etiquetas-juntas .rotulo-capa {
  font-size: 11px;
  line-height: 1.15;
  max-width: 44%;
  gap: 5px;
}

.tarjeta--etiquetas-juntas .rotulo-capa i { width: 18px; }

/* Tarjeta estrecha (3 columnas por debajo de 1200 px, o tablet a 2): hay que
   apretar más, y ensanchar para que el texto largo no parta en dos líneas. */
@container (max-width: 345px) {
  .rotulo-capa { font-size: 10px; line-height: 1.1; max-width: 46%; gap: 5px; }
  .rotulo-capa i { width: 16px; }
  .tarjeta--etiquetas-juntas .rotulo-capa { font-size: 9.5px; line-height: 1.08; max-width: 48%; }
}

/* Por debajo de 280 px de tarjeta no hay forma de meter seis etiquetas de
   dos líneas junto a una imagen vertical sin que queden ilegibles o pisadas.
   Se quitan: la lista de ingredientes ya está impresa justo debajo de la
   tarjeta, así que no se pierde ni un dato. El desmontaje se queda como lo
   que es a ese tamaño, una imagen. */
@container (max-width: 279px) {
  .rotulos { display: none; }
}