/* ============================================================
   ajustes.css · CORRECCIONES PEDIDAS POR LUKAS
   ------------------------------------------------------------
   Se carga al final, después de experiencia.css, y manda sobre todo
   lo demás. Va aparte a propósito: acá queda registrado qué se
   revirtió del trabajo del equipo y por qué, y volver atrás es
   borrar un bloque.

   13-09-2026
   1. Fuera el foco amarillo detrás de las hamburguesas.
   2. El nombre del hero es el logo oficial, no texto.
   ============================================================ */

/* ============================================================
   1 · LAS FOTOS VUELVEN A SER FOTOS
   ------------------------------------------------------------
   experiencia.css ponía un foco de luz amarillo detrás de cada
   producto y fundía la foto encima con `multiply`, para convertir
   el fondo blanco del packshot en un "plato" de luz.

   Se revierte: el recuadro vuelve al marrón casi negro original
   y la foto se muestra plana, sin mezclas. El producto se ve tal
   cual es, que es lo que importa en una carta.

   VERIFICADO 13-09-2026: el foco resolvía un problema que no
   existe. Los PNG originales de la carpeta sí están sobre blanco,
   pero la web NO los carga: usa los .webp de assets/, y las 15
   fotos tienen canal de transparencia (comprobado leyendo la
   cabecera VP8X de cada archivo). O sea, el producto ya venía
   recortado y no había ninguna lámina blanca que tapar.
   ============================================================ */

.card-img-wrap,
.modal-img-wrap,
.fries-img-wrap,
.hero-img-wrap,
.drink-img-wrap {
  background: linear-gradient(135deg, #1a1400, #080600) !important;
  isolation: auto;
}

.card-img,
.modal-img,
.fries-img,
.drink-img,
.hero-img,
.img-placeholder {
  mix-blend-mode: normal !important;
}

.img-placeholder {
  background: linear-gradient(135deg, #1a1400, #080600) !important;
}

.cart-item-img {
  background: #141414 !important;
}

/* El pudú que se recostaba sobre el foco del hero ya no tiene
   dónde apoyarse, y además el logo nuevo trae el suyo propio.
   Dos pudús en la misma pantalla es uno de más. */
.hero-img-wrap::after,
.hero-img-wrap::before {
  content: none !important;
}

/* ============================================================
   2 · EL NOMBRE ES EL LOGO OFICIAL
   ------------------------------------------------------------
   Antes el hero escribía "SMACHIL" con tipografía y pintaba la M
   de amarillo. Eso es una interpretación del logo, no el logo.
   Ahora se usa el lockup real del brand kit, que además ya trae
   al pudú integrado en la proporción correcta.
   ============================================================ */

.hero-logo {
  /* Se apagan los estilos de texto: adentro ahora hay una imagen. */
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  margin: 0 auto clamp(10px, 2.5vw, 18px) !important;
  padding: 0 !important;
  background: none !important;
  -webkit-text-fill-color: initial;
  display: block;
  text-align: center;
}

.hero-logo::before,
.hero-logo::after {
  content: none !important;
}

/* El logo va entero, en una sola imagen. Nada de recomponerlo:
   las proporciones entre el pudú y la palabra ya vienen resueltas
   en el archivo del brand kit. */
.hero-logo img {
  display: block;
  width: clamp(240px, 66vw, 380px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 8px 34px rgba(0, 0, 0, 0.6));
}

/* En pantallas anchas el logo no debe crecer sin control: pasado
   cierto tamaño deja de leerse como marca y parece un banner. */
@media (min-width: 900px) {
  .hero-logo img { width: clamp(300px, 26vw, 400px); }
}

/* ============================================================
   3 · CINTA "SMASH · EAT · REPEAT"
   ------------------------------------------------------------
   Reemplaza al badge "Smash Burgers Premium · Chile".
   Amarillo de marca, letras negras, en movimiento continuo.

   El loop no tiene costura porque hay dos grupos idénticos y la
   pista se desplaza exactamente la mitad de su ancho: cuando
   termina, el segundo grupo está justo donde estaba el primero.
   ============================================================ */

.smash-ticker {
  /* Rompe el ancho del hero y cruza la pantalla de lado a lado.
     El `clip` de más abajo evita que esto genere scroll lateral. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: clamp(4px, 1.5vw, 10px) clamp(20px, 5vw, 34px);

  background: var(--y, #F5C518);
  border-block: 2px solid #080808;
  overflow: hidden;
  user-select: none;
}

.smash-ticker__track {
  display: flex;
  width: max-content;
  animation: correr-cinta 22s linear infinite;
}

.smash-ticker__grupo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.smash-ticker__grupo span {
  padding: 9px 0;
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif);
  font-size: clamp(13px, 3.4vw, 17px);
  font-weight: 900;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #080808;
  white-space: nowrap;
  line-height: 1;
}

/* El separador: un punto negro entre palabra y palabra. */
.smash-ticker__grupo i {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin: 0 clamp(12px, 3.4vw, 20px);
  border-radius: 50%;
  background: #080808;
}

@keyframes correr-cinta {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.smash-ticker:hover .smash-ticker__track { animation-play-state: paused; }

/* Sin movimiento para quien lo pidió en su sistema: la cinta
   igual se lee, simplemente queda quieta. */
@media (prefers-reduced-motion: reduce) {
  .smash-ticker__track { animation: none; }
}

/* La cinta cruza a lo ancho; sin esto aparecería barra horizontal. */
html, body { overflow-x: clip; }
#hero { overflow-x: clip; }


/* ============================================================
   4 · BEBIDAS MÁS GRANDES
   ------------------------------------------------------------
   La lata venía en un recuadro de 52x68 px con el nombre en 11 px:
   no se entendía ni la bebida ni la letra. Se agranda la lata al
   doble y el nombre sube a tamaño legible, en blanco en vez de gris.
   ============================================================ */

.drinks-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: clamp(12px, 3vw, 18px) !important;
}

.drink-card {
  padding: clamp(18px, 4vw, 24px) 12px clamp(14px, 3vw, 18px) !important;
  gap: clamp(12px, 3vw, 16px) !important;
  min-height: 0 !important;
}

.drink-img-wrap {
  width: clamp(96px, 27vw, 130px) !important;
  height: clamp(126px, 35vw, 172px) !important;
}

.drink-img {
  /* La lata usa todo el alto disponible y se le da algo de sombra
     para que no quede flotando plana sobre el negro. */
  height: 100%;
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.65));
}

.drink-name {
  font-size: clamp(14px, 3.8vw, 16px) !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  color: #fff !important;
  line-height: 1.25 !important;
}

/* El precio de la bebida, si lo hay, acompaña el tamaño nuevo. */
.drink-price {
  font-size: clamp(15px, 4vw, 17px) !important;
}

/* En pantallas anchas caben cuatro por fila sin achicar la lata. */
@media (min-width: 760px) {
  .drinks-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ============================================================
   5 · EL FONDO SE QUEDA COMO ESTABA
   ------------------------------------------------------------
   Acá hubo un intento de darle textura de marca al fondo: manchas
   del pudú repetidas, rayado vertical fino en los costados y un
   resplandor de plancha caliente.

   Se probó y se descartó: ensuciaba en vez de sumar. El fondo
   vuelve al de app.css (negro con los resplandores amarillos
   originales), que estaba bien.

   Si alguna vez se retoma: el problema no era la idea sino que
   una textura clara sobre negro se lee como suciedad de pantalla.
   El camino sería por el lado del amarillo, no del blanco.
   ============================================================ */

/* ============================================================
   6 · EL MANIFIESTO
   ------------------------------------------------------------
   Reemplaza el párrafo gris de debajo de la foto.
   Tres piezas con tres trabajos distintos:
     · el titular golpea,
     · las specs dan el argumento técnico de un vistazo,
     · el sello pone la actitud.
   ============================================================ */

.manifiesto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 3.5vw, 20px);
  margin: clamp(22px, 5vw, 32px) auto clamp(26px, 6vw, 38px);
  padding-inline: 16px;
  max-width: 620px;
}

/* --- El titular --- */
.manifiesto__titular {
  margin: 0;
  font-family: var(--f-display, 'Anton', Impact, sans-serif);
  font-size: clamp(30px, 8.5vw, 52px);
  line-height: .94;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  text-wrap: balance;
}

/* "EXACTO" en amarillo, subrayado con un trazo grueso: es la
   promesa del producto y es lo único que se pinta de marca. */
.manifiesto__titular span {
  position: relative;
  color: var(--y, #F5C518);
  white-space: nowrap;
}
.manifiesto__titular span::after {
  content: '';
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: .06em;
  height: .1em;
  background: var(--y, #F5C518);
  opacity: .3;
  border-radius: 2px;
}

/* --- La frase --- */
.manifiesto__frase {
  margin: 0;
  font-family: var(--f-body, 'Barlow', sans-serif);
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 600;
  font-style: italic;
  line-height: 1.45;
  color: #C6C6C6;
  text-align: center;
  text-wrap: balance;
}

/* --- El sello, ahora botón: mismo timbre torcido, pero se toca --- */
.manifiesto__sello {
  --giro: -2.5deg;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  /* Alto cómodo para el pulgar, que antes no hacía falta
     porque no se podía tocar. */
  min-height: 44px;
  padding: 10px 20px;
  border: 2px solid var(--y, #F5C518);
  border-radius: 4px;
  transform: rotate(var(--giro));
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif);
  font-size: clamp(13px, 3.6vw, 16px);
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--y, #F5C518);
  /* Apenas transparente, como tinta que no cargó parejo. */
  opacity: .88;
  box-shadow: inset 0 0 0 1px rgba(245,197,24,.18);
}

/* Al pasar por encima se endereza: detalle chico, se siente vivo. */
.manifiesto__sello {
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease,
              background .35s ease, color .35s ease;
}
.manifiesto__sello:hover,
.manifiesto__sello:focus-visible {
  transform: rotate(0deg) scale(1.03);
  opacity: 1;
  background: var(--y, #F5C518);
  color: #080808;
}
.manifiesto__sello:hover svg,
.manifiesto__sello:focus-visible svg { fill: #080808; }
.manifiesto__sello:active { transform: rotate(0deg) scale(.98); }

.manifiesto__sello svg {
  width: 16px;
  height: 16px;
  fill: var(--y, #F5C518);
  transition: fill .35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .manifiesto__sello { transition: none; }
}

/* ============================================================
   7 · EL PIE DE PÁGINA
   ------------------------------------------------------------
   Venía como una sola columna larga de líneas sueltas con emoji
   de sistema operativo por iconos. Se reordena en bloques con
   jerarquía y los iconos pasan a ser dibujos, que se ven igual
   en todos los teléfonos.
   ============================================================ */

footer {
  padding: clamp(44px, 9vw, 68px) 20px clamp(30px, 6vw, 42px) !important;
  border-top: 1px solid rgba(245,197,24,.14);
  text-align: center;
}

.footer-logo-img {
  display: block;
  width: clamp(130px, 34vw, 168px);
  height: auto;
  margin: 0 auto clamp(14px, 3vw, 18px);
  opacity: .95;
}

.footer-tagline {
  margin: 0 auto clamp(26px, 6vw, 36px) !important;
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif);
  font-size: clamp(11.5px, 3vw, 13px);
  font-weight: 800;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: #8A8A8A;
}

/* --- Los datos --- */
.footer-datos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  max-width: 460px;
  margin: 0 auto clamp(26px, 6vw, 34px);
  padding: 0;
  list-style: none;
  text-align: left;
}

@media (min-width: 560px) {
  /* Dos columnas: los cuatro datos entran en dos filas parejas. */
  .footer-datos { grid-template-columns: 1fr 1fr; gap: 2px 20px; }
}

.footer-datos li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 10px;
  font-family: var(--f-body, 'Barlow', sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: #C6C6C6;
  transition: background .2s ease;
}

.footer-datos li:hover { background: rgba(255,255,255,.035); }

.footer-datos svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  fill: var(--y, #F5C518);
  opacity: .85;
}

.footer-datos a {
  color: #C6C6C6;
  text-decoration: none;
  transition: color .2s ease;
}
.footer-datos a:hover {
  color: var(--y, #F5C518);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-copy {
  margin: 0 !important;
  font-family: var(--f-body, 'Barlow', sans-serif);
  font-size: 12.5px;
  color: #5f5f5f;
  letter-spacing: .3px;
}

/* El texto viejo del logo ya no se usa; si quedara alguno, fuera. */
.footer-logo { display: none !important; }

/* El horario ocupa tres líneas (el viernes tiene corte de tarde),
   así que esta fila se alinea arriba y no al centro como las otras. */
.footer-horario { align-items: flex-start !important; }
.footer-horario svg { margin-top: 3px; }
.footer-horario div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.footer-horario span { font-size: 14px; line-height: 1.35; }
.footer-horario b {
  display: inline-block;
  min-width: 66px;
  font-weight: 800;
  color: #fff;
}

/* ============================================================
   8 · UN SOLO PUDÚ POR PANTALLA
   ------------------------------------------------------------
   experiencia.css reparte el pudú en siete lugares con
   pseudo-elementos. Dos de ellos quedaron mal y se apagan:

   · El del pie chocaba con el logo oficial que ahora va ahí,
     y se veían dos pudús montados uno sobre otro.
   · El de la banda a cuadros salía recortado entre los cuadros,
     y se leía como un error de carga, no como un guiño.

   Los otros cinco se quedan: el del bloque de pedido, el del
   carrito vacío, el de la ficha y los de respaldo de imagen.
   ============================================================ */

footer::before,
.checker-divider::after {
  content: none !important;
  display: none !important;
}

/* Ese espacio arriba existía para dejarle sitio al pudú del pie. */
footer { padding-top: clamp(44px, 9vw, 68px) !important; }


/* ============================================================
   9 · PAPAS MÁS GRANDES
   ------------------------------------------------------------
   Venían en un cuadrado de 80x80 px: la papa no se distinguía.
   Mismo criterio que las bebidas — si es una carta, la comida
   tiene que verse.
   ============================================================ */

.fries-card {
  gap: clamp(16px, 4vw, 22px) !important;
  padding: clamp(14px, 3.5vw, 18px) !important;
}

.fries-img-wrap {
  width: clamp(112px, 30vw, 140px) !important;
  height: clamp(112px, 30vw, 140px) !important;
  border-radius: 14px !important;
}

.fries-name {
  font-size: clamp(20px, 5.5vw, 26px) !important;
  margin-bottom: 6px !important;
}


/* ============================================================
   10 · "HECHA AL MOMENTO" COMO PROTAGONISTA
   ------------------------------------------------------------
   Era una línea gris en cursiva debajo del titular. Ahora es
   una declaración: grande, en amarillo, con el subrayado
   grueso que la marca usa para lo que importa.
   ============================================================ */

.manifiesto__frase {
  position: relative;
  font-family: var(--f-display, 'Anton', Impact, sans-serif) !important;
  font-size: clamp(22px, 6.2vw, 34px) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  color: var(--y, #F5C518) !important;
  padding-bottom: 10px;
}

/* El trazo bajo la frase: grueso, corto y centrado. */
.manifiesto__frase::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 58px;
  height: 4px;
  margin-left: -29px;
  border-radius: 2px;
  background: var(--y, #F5C518);
  opacity: .45;
}

/* ============================================================
   11 · EL LOGO DEL PIE, MÁS GRANDE
   ------------------------------------------------------------
   Se eliminó la bajada "Smash Burgers Premium · Castro, Chiloé":
   el logo ya dice quiénes son y la ciudad aparece en el copyright.
   Sin esa línea, el logo puede crecer y cerrar la página con peso.
   ============================================================ */

.footer-logo-img {
  width: clamp(200px, 52vw, 280px) !important;
  margin-bottom: clamp(26px, 6vw, 36px) !important;
  opacity: 1 !important;
}


/* ============================================================
   12 · LA VISTA DE COMPUTADOR
   ------------------------------------------------------------
   En pantalla ancha el hero era una columna angosta al centro con
   medio monitor en negro a cada lado. Se reorganiza en dos
   columnas —el discurso a la izquierda, el producto a la derecha—
   que es como se lee un afiche y aprovecha el ancho real.

   En celular no cambia nada: sigue siendo una sola columna.
   ============================================================ */

@media (min-width: 900px) {

  #hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas:
      "cinta   cinta"
      "logo    foto"
      "claim   foto"
      "texto   foto"
      "sello   foto"
      "botones foto"
      "pie     pie";
    align-items: center;
    justify-items: start;
    gap: 0 clamp(36px, 5vw, 72px);
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(28px, 4vw, 56px) clamp(32px, 4vw, 52px);
    text-align: left;
  }

  /* La foto ocupa las cinco filas de la izquierda y se centra
     respecto de ellas: así ninguna fila queda con aire muerto. */
  .hero-logo  { margin-bottom: clamp(6px, 1vw, 12px) !important; }
  .hero-claim { margin-bottom: clamp(10px, 1.6vw, 18px) !important; }

  .smash-ticker      { grid-area: cinta; }
  .hero-logo         { grid-area: logo;  margin-inline: 0 !important; }
  .hero-claim        { grid-area: claim; }
  .manifiesto        { grid-area: texto; }
  .manifiesto__sello { grid-area: sello; }
  .hero-img-wrap     { grid-area: foto;  width: 100%; }
  .hero-ctas         { grid-area: botones; }
  .hero-checker-bottom { grid-area: pie; width: 100%; }

  /* Todo lo de la izquierda se alinea a la izquierda, no al centro. */
  .hero-logo img     { margin-left: 0 !important; }
  .hero-claim        { text-align: left !important; }
  .manifiesto {
    align-items: flex-start;
    max-width: none;
    padding-inline: 0;
    margin: clamp(14px, 2vw, 22px) 0 clamp(18px, 2.5vw, 26px);
  }
  .manifiesto__titular { text-align: left; }
  .manifiesto__frase   { text-align: left; }

  /* El trazo bajo la frase deja de estar centrado. */
  .manifiesto__frase::after { left: 0; margin-left: 0; }

  /* La foto crece: es la que tiene que llenar el lado derecho.
     app.css la clavaba en 360px de ancho, que en un monitor dejaba
     media pantalla vacía. */
  .hero-img-wrap {
    max-width: none !important;
    width: 100% !important;
    aspect-ratio: 1 / 1;
    max-height: min(62vh, 540px);
    margin: 0 !important;
    border-radius: 24px;
  }
  .hero-img { width: 100%; height: 100%; object-fit: contain; }

  /* Los botones lado a lado, no apilados a todo el ancho. */
  .hero-ctas {
    display: flex;
    flex-direction: row;
    gap: 14px;
    width: auto;
    margin-top: clamp(18px, 2.5vw, 26px);
  }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-wapp { width: auto; padding-inline: 30px; }

  /* El logo del hero puede crecer: hay ancho de sobra. */
  .hero-logo img { width: clamp(320px, 30vw, 430px) !important; }

  /* La cinta sigue cruzando de lado a lado, por encima del grid. */
  .smash-ticker {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-bottom: clamp(30px, 4vw, 46px);
  }
}

/* En pantallas muy anchas, la carta no se estira sin control. */
@media (min-width: 1400px) {
  #hero { max-width: 1280px; }
}