/* ==========================================================================
   Boneless Grills — hoja de estilos única
   Reconstrucción estática (sin WordPress, sin base de datos)
   --------------------------------------------------------------------------
   Índice:
   01. Tokens y reset
   02. Tipografía
   03. Utilidades de layout
   04. Cabecera y navegación
   05. Hero
   06. Bloques de contenido (split, iconos, banda)
   07. Botones
   08. Formularios
   09. Newsletter
   10. Pie de página
   11. Banner de cookies y volver arriba
   12. Animaciones de entrada
   13. Responsive
   ========================================================================== */

/* 00. Fuentes ------------------------------------------------------------- */
/* Autoalojadas: antes se pedían a fonts.googleapis.com, lo que bloqueaba el
   render con una petición a un tercero y enviaba la IP del visitante a Google
   (el motivo de que Google Fonts sea problemático con el RGPD).

   Son fuentes VARIABLES: un solo fichero por familia cubre todos los pesos
   del rango. Las 5 instancias estáticas equivalentes pesaban 157 KB; estas
   dos, 68 KB. Subset latin únicamente, que es lo que usa el sitio.

   Si algún día añades un peso fuera del rango declarado, el navegador lo
   sintetizará (falso negrita) en vez de fallar: revisa estos rangos. */

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/oswald-variable-latin.woff2") format("woff2-variations"),
       url("../fonts/oswald-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-variable-latin.woff2") format("woff2-variations"),
       url("../fonts/inter-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 01. Tokens y reset ------------------------------------------------------ */

:root {
  /* Paleta. Si tienes el manual de marca, ajusta --rojo al Pantone real. */
  --negro:        #000000;
  --carbon:       #101010;
  --grafito:      #1a1a1a;
  --humo:         #2a2a2a;
  --blanco:       #ffffff;
  --gris-texto:   #b8b8b8;
  --rojo:         #e4322b;
  --rojo-oscuro:  #b21f19;

  /* Tipografía */
  --display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Ritmo vertical */
  --seccion-y: clamp(4rem, 9vw, 7.5rem);
  --ancho-max: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --alto-header: 84px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--alto-header);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
video { max-width: 100%; height: auto; display: block; }

/* <picture> es solo un envoltorio para ofrecer WebP: no debe crear una caja
   propia, o se convertiría en el hijo de las rejillas y los flex en lugar de
   la <img>, y se romperían selectores como `.app-bloque__logos img`.
   display:contents lo saca del layout dejando la <img> en su sitio. */
picture { display: contents; }

a { color: var(--rojo); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--blanco); }

:focus-visible {
  outline: 3px solid var(--rojo);
  outline-offset: 3px;
}

.saltar-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--rojo);
  color: var(--blanco);
  padding: .75rem 1.25rem;
  z-index: 999;
}
.saltar-contenido:focus { left: 0; }

/* 02. Tipografía ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: .01em;
  margin: 0 0 1rem;
}

h1 { font-size: clamp(2.4rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4.5vw, 3.2rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.35rem); letter-spacing: .06em; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

/* Los subtítulos del sitio original son <h4> con peso ligero: aquí van
   como .lead para no romper la jerarquía semántica de encabezados. */
.lead {
  font-family: var(--body);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--gris-texto);
  text-transform: none;
  letter-spacing: 0;
}
.lead strong { color: var(--blanco); font-weight: 600; }

.eyebrow {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--rojo);
  margin: 0 0 1rem;
}

.acento { color: var(--rojo); }

/* 03. Utilidades de layout ------------------------------------------------ */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.contenedor--ancho { max-width: 1440px; }

.seccion { padding-block: var(--seccion-y); }
.seccion--negro   { background: var(--negro); }
.seccion--carbon  { background: var(--carbon); }
.seccion--grafito { background: var(--grafito); }

.centrado { text-align: center; }

.cabecera-seccion {
  max-width: 780px;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

/* 04. Cabecera y navegación ----------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--humo);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--alto-header);
}

.logo img {
  height: 38px;
  width: auto;
}

.nav-principal ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-principal a {
  font-family: var(--display);
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blanco);
  padding-block: .5rem;
  position: relative;
}

.nav-principal a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--rojo);
  transition: width .25s ease;
}
.nav-principal a:hover::after,
.nav-principal a[aria-current="page"]::after { width: 100%; }
.nav-principal a[aria-current="page"] { color: var(--rojo); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: .5rem;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--blanco);
  margin: 5px 0;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 05. Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Fondo por si el vídeo tarda en cargar o no llega a reproducirse */
  background: var(--negro) center / cover no-repeat;
}

/* La <img> de respaldo dentro del <video> debe ocupar todo el hueco */
.hero__media video img {
  position: absolute;
  inset: 0;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.85) 100%);
}

.hero__contenido {
  position: relative;
  z-index: 1;
  max-width: 900px;
  padding: var(--seccion-y) var(--gutter);
}

.hero__contenido h1 { text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.hero__contenido .lead { color: #e6e6e6; max-width: 640px; margin-inline: auto; }

.hero--corto { min-height: min(62vh, 560px); }

/* Botón de reproducción que crea main.js cuando Safari bloquea el autoplay.
   Lo genera el JS, así que sin estas reglas salía como un botón nativo suelto
   encima del hero: justo en el caso que el código intenta resolver. */
.play-hero {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: var(--blanco);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.play-hero:hover {
  background: var(--rojo);
  border-color: var(--rojo);
  transform: translate(-50%, -50%) scale(1.06);
}
.play-hero svg { width: 30px; height: 30px; fill: currentColor; margin-left: 4px; }

/* Fallback si el navegador no soporta el vídeo embebido */
.hero__media video + .aviso-video {
  position: absolute;
  inset: auto 0 1rem 0;
  font-size: .8rem;
  color: var(--gris-texto);
}

/* 06. Bloques de contenido ------------------------------------------------ */

/* Split: imagen a un lado, texto al otro. Alterna con .split--invertido */
.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.split + .split { margin-top: clamp(3rem, 7vw, 6rem); }

.split--invertido .split__media { order: 2; }

.split__media img {
  width: 100%;
  border-radius: 2px;
}

.split__texto h2 { margin-bottom: 1.25rem; }

/* Rejilla de iconos con texto */
.rejilla-iconos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

.icono-item { text-align: center; }
.icono-item img {
  width: 84px;
  height: auto;
  margin: 0 auto 1.25rem;
}
.icono-item .lead { font-size: 1rem; }

/* Banda de imagen a sangre completa con titular encima */
.banda {
  position: relative;
  min-height: 460px;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}
.banda__media { position: absolute; inset: 0; }
.banda__media img { width: 100%; height: 100%; object-fit: cover; }
.banda__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}
.banda__texto { position: relative; z-index: 1; padding: 4rem var(--gutter); max-width: 900px; }

/* Bloque de la app móvil */
.app-bloque { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.app-bloque__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.app-bloque__logos img { height: 48px; width: auto; }
.app-bloque__marca { height: 64px !important; margin-bottom: 1rem; }

/* Prosa: páginas de texto largo (aviso legal, privacidad, cookies).
   Ancho limitado a ~70 caracteres, que es donde la lectura deja de cansar. */
.prosa {
  max-width: 72ch;
  margin-inline: auto;
  color: var(--gris-texto);
}
.prosa h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  color: var(--blanco);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.prosa h2:first-of-type { margin-top: 0; }
.prosa h3 {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  color: var(--blanco);
  letter-spacing: .04em;
  margin-top: 2rem;
}
.prosa p, .prosa li { font-size: 1rem; line-height: 1.75; }
.prosa strong { color: var(--blanco); font-weight: 600; }
.prosa a { text-decoration: underline; text-underline-offset: .2em; }
.prosa ul, .prosa ol { padding-left: 1.4rem; margin: 0 0 1.15rem; }
.prosa li { margin-bottom: .6rem; }
.prosa li::marker { color: var(--rojo); }

.prosa table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: .92rem;
}
.prosa th, .prosa td {
  border: 1px solid var(--humo);
  padding: .7rem .85rem;
  text-align: left;
  vertical-align: top;
}
.prosa th { color: var(--blanco); font-family: var(--display); font-weight: 500; letter-spacing: .06em; }

/* Las tablas anchas se desplazan solas en móvil en vez de reventar la página */
.tabla-scroll { overflow-x: auto; }

.fecha-actualizacion {
  font-size: .85rem;
  color: #7c7c7c;
  border-bottom: 1px solid var(--humo);
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
}

/* 07. Botones ------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 1rem 2.4rem;
  border: 2px solid var(--rojo);
  border-radius: 2px;
  background: var(--rojo);
  color: var(--blanco);
  cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.btn:hover { background: transparent; color: var(--rojo); }

.btn--fantasma { background: transparent; color: var(--blanco); border-color: var(--blanco); }
.btn--fantasma:hover { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }

.btn-fila { margin-top: 2rem; }

/* 08. Formularios --------------------------------------------------------- */

.formulario { display: grid; gap: 1.1rem; }
.campo { display: grid; gap: .45rem; }

.campo label {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-texto);
}

.campo input,
.campo textarea {
  width: 100%;
  background: var(--carbon);
  border: 1px solid var(--humo);
  border-radius: 2px;
  color: var(--blanco);
  font-family: var(--body);
  font-size: 1rem;
  padding: .95rem 1rem;
  transition: border-color .2s ease;
}
.campo input:focus,
.campo textarea:focus { border-color: var(--rojo); outline: none; }
.campo textarea { min-height: 150px; resize: vertical; }

/* Honeypot anti-spam: invisible para personas, visible para bots */
.campo-trampa {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.aviso-form {
  font-size: .82rem;
  color: #8a8a8a;
  line-height: 1.5;
}
.aviso-form a { color: var(--gris-texto); text-decoration: underline; }

/* 09. Newsletter ---------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.newsletter { text-align: center; }
.newsletter .formulario {
  max-width: 620px;
  margin: 2rem auto 0;
  grid-template-columns: 1fr 1fr auto;
  gap: .75rem;
  align-items: stretch;
}
.newsletter .campo { text-align: left; }
.newsletter .btn { white-space: nowrap; }
.newsletter .form-resultado { grid-column: 1 / -1; }

/* 10. Pie de página ------------------------------------------------------- */

.site-footer {
  background: var(--carbon);
  border-top: 1px solid var(--humo);
  padding-top: clamp(3.5rem, 6vw, 5rem);
  font-size: .95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3rem;
}

.footer-col h4 {
  font-size: .85rem;
  letter-spacing: .18em;
  color: var(--blanco);
  margin-bottom: 1.25rem;
}

.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-col ul a { color: var(--gris-texto); }
.footer-col ul a:hover { color: var(--rojo); }

.footer-logo img { height: 34px; margin-bottom: 1.5rem; }

.footer-direccion {
  color: var(--gris-texto);
  line-height: 1.75;
  font-style: normal;
}
.footer-direccion a { color: var(--gris-texto); }
.footer-direccion a:hover { color: var(--rojo); }

.footer-legal {
  border-top: 1px solid var(--humo);
  padding-block: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  font-size: .85rem;
  color: #7c7c7c;
}
.footer-legal a { color: #7c7c7c; }
.footer-legal a:hover { color: var(--blanco); }

.redes { display: flex; gap: .85rem; }
.redes a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--humo);
  border-radius: 50%;
  color: var(--gris-texto);
}
.redes a:hover { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }
.redes svg { width: 17px; height: 17px; fill: currentColor; }

/* 11. Cookies y volver arriba --------------------------------------------- */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--grafito);
  border-top: 2px solid var(--rojo);
  padding: 1.25rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  font-size: .9rem;
  transform: translateY(110%);
  transition: transform .35s ease;
}
.cookie-banner.visible { transform: translateY(0); }
.cookie-banner p { margin: 0; max-width: 640px; color: var(--gris-texto); }
.cookie-banner .btn { padding: .65rem 1.6rem; font-size: .78rem; }

.to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 150;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--rojo);
  color: var(--blanco);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease, background .2s ease;
}
.to-top.visible { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--rojo-oscuro); }
.to-top svg { width: 18px; height: 18px; fill: currentColor; }

/* 12. Animaciones de entrada ---------------------------------------------- */

/* El estado oculto va condicionado a `.js`, que añade un script en el <head>.
   Antes estaba suelto en el CSS, así que si el JS fallaba —o si quien miraba
   la página no lo ejecutaba: un bot, el previo de un enlace en WhatsApp o
   Slack— TODO el contenido quedaba invisible y la página salía en negro.
   Sin `.js` no se oculta nada y el sitio se lee entero.

   La transición es corta a propósito: con .7s, al bajar rápido se cruzaban
   pantallas enteras todavía en blanco antes de que diera tiempo a aparecer. */
.js .revelar {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .45s ease, transform .45s ease;
}
.js .revelar.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .revelar { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* 13. Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }

  .nav-principal {
    position: fixed;
    inset: var(--alto-header) 0 auto 0;
    background: var(--negro);
    border-bottom: 1px solid var(--humo);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .nav-principal.abierto { max-height: 60vh; }

  .nav-principal ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--gutter) 1.5rem;
  }
  .nav-principal li { border-bottom: 1px solid var(--humo); }
  .nav-principal a { display: block; padding: 1rem 0; font-size: 1rem; }
  .nav-principal a::after { display: none; }

  .split,
  .app-bloque { grid-template-columns: 1fr; }
  .split--invertido .split__media { order: 0; }
  .split__texto { text-align: center; }

  .newsletter .formulario { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-legal { flex-direction: column; text-align: center; }
  .logo img { height: 30px; }
  .cookie-banner { flex-direction: column; text-align: center; }
}