/* WOW by rubIA Flow · estilos comunes
   Los colores y letras van en variables ("tema"). Por defecto son los de
   rubIA Flow (portada). En la carta y el photocall, js/marca.js los cambia
   por los del restaurante, que se escriben en config.js.                  */

:root {
  /* Firma rubIA Flow: fija, solo para el pie "Experiencia WOW by rubIA Flow" */
  --rubia-naranja: #E5772C;
  --rubia-gris: #919094;

  /* Tema (por defecto, rubIA Flow; sin negro: lo más oscuro es marengo) */
  --principal: #E5772C;                    /* botones y acentos */
  --titulo: #2E3A46;                       /* titulares */
  --acento: #DC9030;                       /* filete bajo los títulos */
  --texto: #2E3A46;
  --texto-suave: #919094;
  --fondo: #FFFFFF;
  --fondo-suave: rgba(145, 144, 148, 0.08);
  --linea: rgba(145, 144, 148, 0.28);
  --velo: rgba(46, 58, 70, 0.55);          /* fondo detrás de las ventanas */

  --f-titulo: "Playfair Display", Georgia, serif;
  --f-texto: "Newsreader", Georgia, serif;
  --f-ui: "Inter", system-ui, sans-serif;
  --peso-titulo: 700;
  --peso-texto: 300;
}

* { box-sizing: border-box; }

/* Lo que está oculto, siempre oculto (ningún otro estilo puede mostrarlo) */
[hidden] { display: none !important; }

html, body { margin: 0; }

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-weight: var(--peso-texto);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.contenedor {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- Titulares ---------- */
.titulo {
  font-family: var(--f-titulo);
  font-weight: var(--peso-titulo);
  color: var(--titulo);
  line-height: 1.15;
  margin: 0;
}
.titulo em { font-style: italic; color: var(--principal); }

/* Filete bajo cada título */
.filete {
  width: 68px;
  height: 3px;
  background: var(--acento);
  border: 0;
  margin: 14px 0 0;
}

.etiqueta {
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 2px solid var(--principal);
  background: var(--principal);
  color: #FFFFFF;
  font-family: var(--f-ui);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.boton:active { transform: scale(0.98); }
.boton--borde {
  background: transparent;
  color: var(--principal);
}
.boton--gris {
  background: transparent;
  border-color: var(--linea);
  color: var(--texto);
}
.boton[disabled] { opacity: 0.5; cursor: default; }

/* ---------- Firma rubIA Flow: "IA" en naranja, el resto en gris ---------- */
.rubia { font-family: "Inter", system-ui, sans-serif; font-weight: 700; color: var(--rubia-gris); white-space: nowrap; }
.rubia b { color: var(--rubia-naranja); font-weight: 700; }

.pie-wow {
  text-align: center;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--rubia-gris);
  padding: 28px 16px 32px;
}
.pie-wow strong { color: var(--rubia-gris); font-weight: 700; letter-spacing: 0.04em; }

/* ---------- Hueco "FALTA" (material que aún no tenemos) ---------- */
.hueco {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px dashed var(--rubia-naranja);
  border-radius: 12px;
  background: rgba(229, 119, 44, 0.06);
  color: var(--rubia-naranja);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px;
}