/* ==========================================================================
   BENDICIONES BURGER — reset, tipografía base y utilidades
   Depende de tokens.css. No define ni un color ni un tamaño propio.
   ========================================================================== */

/* --- Reset ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
}

ul[class], ol[class] {
  padding: 0;
  list-style: none;
}

body {
  min-height: 100vh;
  background-color: var(--negro-carbon);
  color: var(--hueso);
  font-family: var(--f-cuerpo);
  font-size: var(--t-cuerpo);
  line-height: var(--lh-cuerpo);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

/* --- Tipografía --------------------------------------------------------- */

.titular-hero,
.titular-seccion {
  font-family: var(--f-titular);
  font-weight: 400;
  line-height: var(--lh-titular);
  letter-spacing: var(--ls-titular);
  text-transform: uppercase;
}

.titular-hero   { font-size: var(--t-hero); }
.titular-seccion { font-size: var(--t-seccion); }

.lema {
  font-family: var(--f-producto);
  font-size: var(--t-lema);
  font-style: italic;
  font-weight: 400;
  color: var(--oro-claro);
  line-height: 1.3;
}

.nombre-producto {
  font-family: var(--f-producto);
  font-size: var(--t-producto);
  font-weight: 600;
  line-height: var(--lh-producto);
  color: var(--oro-claro);
  text-transform: uppercase;
}

.precio {
  font-family: var(--f-producto);
  font-size: var(--t-precio);
  font-weight: 400;
  color: var(--oro);
  line-height: 1;
}

.texto {
  max-width: var(--ancho-texto);
  color: var(--hueso);
}

.texto + .texto { margin-top: var(--e-3); }

.secundario { color: var(--gris-humo); }

.dato {
  font-size: var(--t-etiqueta);
  color: var(--gris-humo);
  letter-spacing: 0.02em;
}

a { color: inherit; }

/* --- Layout ------------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

.seccion {
  padding-block: var(--e-seccion);
}

.regla-oro {
  height: 1px;
  border: 0;
  background-color: var(--linea-oro);
}

/* --- Botones ------------------------------------------------------------
   Tres pesos: contorno ámbar (principal), sólido ámbar (acción del mapa)
   y texto pelado (secundario). Radio 4 px, nunca más.                     */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  min-height: 48px;
  padding: 14px var(--e-4);
  border-radius: var(--radio);
  font-family: var(--f-cuerpo);
  font-size: var(--t-etiqueta);
  font-weight: 700;
  letter-spacing: var(--ls-boton);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-hover) var(--ease-salida),
    border-color     var(--dur-hover) var(--ease-salida),
    color            var(--dur-hover) var(--ease-salida),
    transform        var(--dur-hover) var(--ease-salida);
}

.boton--principal {
  background-color: transparent;
  border: 1px solid var(--ambar);
  color: var(--ambar);
}

@media (hover: hover) and (pointer: fine) {
  .boton--principal:hover {
    background-color: rgba(242, 140, 40, 0.1);
    border-color: var(--ambar-claro);
    color: var(--ambar-claro);
  }

  .boton--solido:hover {
    background-color: var(--ambar-claro);
    border-color: var(--ambar-claro);
  }

  .boton--texto:hover {
    color: var(--hueso);
    text-decoration-color: var(--oro);
  }
}

.boton--principal:active { transform: scale(0.98); }

/* El único movimiento no provocado por el usuario en toda la web, junto a
   las brasas de la ventanilla abierta. Ciclo de 3 s, amplitud mínima.
   El resplandor va en un ::after con la sombra FIJA y solo se anima su
   opacidad: animar box-shadow repinta en cada fotograma, y esto corre en
   bucle infinito. */
.boton--respira { position: relative; }

.boton--respira::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 60px -16px var(--ambar);
  opacity: 0.35;
  pointer-events: none;
  animation: respirar 3s ease-in-out infinite;
}

@keyframes respirar {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

.boton--solido {
  background-color: var(--ambar);
  border: 1px solid var(--ambar);
  color: var(--negro-carbon);   /* 8,02:1 */
}

.boton--solido:active { transform: scale(0.98); }

.boton--texto {
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--gris-humo);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: var(--gris-apagado);
  text-decoration-thickness: 1px;
}

.boton[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.55;
}

/* Sin movimiento no hay pulso. El bloque de tokens solo pone a cero las
   duraciones de transicion; una keyframe con su propio tiempo hay que
   pararla aqui explicitamente. */
@media (prefers-reduced-motion: reduce) {
  .boton--respira::after { animation: none; opacity: 0.55; }
}

/* --- Foco --------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--ambar-claro);
  outline-offset: 3px;
  border-radius: var(--radio);
}

:focus:not(:focus-visible) { outline: none; }

.saltar-al-contenido {
  position: absolute;
  left: var(--margen-lateral);
  top: -100px;
  z-index: var(--z-ui);
  background-color: var(--negro-humo);
  border: 1px solid var(--ambar);
  color: var(--ambar);
  padding: 12px var(--e-3);
  border-radius: var(--radio);
  font-size: var(--t-etiqueta);
  text-decoration: none;
}

.saltar-al-contenido:focus { top: var(--e-2); }

/* --- Utilidades ---------------------------------------------------------- */

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.apilar > * + * { margin-top: var(--e-2); }

/* Estrellas del cartel del menú. Elemento gráfico, no una valoración:
   por eso son decorativas para los lectores de pantalla. */
.estrellas {
  display: flex;
  gap: 6px;
  color: var(--oro);
}

.estrellas svg { width: 13px; height: 13px; }