/* ---------------------------------------------------------------------------
   Tema de Nativa: sustituye a web/css/tema.css al desplegar (npm run web -- nativa)
   y lo cargan la carta (después de carta.css) y la landing (antes de landing.css).

   Paleta de las cartas impresas del local: fondo de pergamino, ilustraciones de
   hojas en sepia, titulares en naranja tostado y texto marrón oscuro. Nada es
   blanco puro ni gris: los fondos son crema y los bordes madera clara. El verde
   queda para los botones principales y el rosa del neón solo para "Fuel your
   energy". Contrastes WCAG AA comprobados sobre --bg, --bg-alt y --card.

   Para cambiar colores o fuentes de Nativa: editar este bloque y volver a
   desplegar. Platos, precios, fotos y descripciones se cambian en el panel.
--------------------------------------------------------------------------- */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/fraunces-latin-wght-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
}

:root {
  /* Paleta de Nativa */
  --n-bg: #f6ecdb; /* pergamino */
  --n-bg-alt: #efe0c8; /* un tono más tostado, para alternar secciones */
  --n-card: #fbf5ea; /* crema claro de las tarjetas */
  --n-ink: #3b2a1e; /* texto y títulos (10,5:1) */
  --n-ink-soft: #6b5443; /* texto secundario (5,4:1) */
  --n-wood: #cfb28a; /* bordes y separadores, decorativo */
  --n-field: #967650; /* borde de los campos de formulario (3,2:1) */
  --n-accent: #bd6422; /* naranja tostado: titulares de 24 px o más */
  --n-accent-deep: #9a511f; /* naranja para texto pequeño: precios, etiquetas (4,5:1) */
  --n-accent-bright: #d9772e; /* solo trazos decorativos, nunca texto */
  --n-accent-soft: #f5dcc2;
  --n-green-deep: #1f4d33; /* botones y estados elegidos (7,5:1) */
  --n-green: #2b7049; /* enlaces en hover (4,6:1) */
  --n-pink: #c2185b;
  --n-pink-neon: #ff8fc1; /* "Fuel your energy" sobre fotografía */
  --n-leaf: #b0936a; /* ilustraciones de hojas (máscaras) */
  --n-on-dark: #fbf5ea;
  --n-scrim: 59 42 30; /* --n-ink en RGB, para velos sobre foto */

  /* La carta (web/css/carta.css) con la paleta de Nativa */
  --primary: var(--n-green-deep);
  --primary-dark: var(--n-green-deep);
  --primary-deep: var(--n-green-deep);
  --primary-ink: var(--n-green-deep);
  --primary-ink-hover: #163a26;
  --primary-soft: #e3ead9;
  --primary-border: #9fb89a;
  --primary-border-soft: #c4d3bd;
  --on-primary: var(--n-card);
  --bg: var(--n-bg);
  --surface: var(--n-card);
  --surface-soft: var(--n-card);
  --surface-alt: var(--n-bg-alt);
  --text: var(--n-ink);
  --text-soft: var(--n-ink-soft);
  --text-muted: var(--n-ink-soft);
  --text-faint: #8d7563;
  --border: #e3cfae;
  --border-strong: var(--n-wood);
  --radius: 18px;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
}

/* ------------------------------------------------------------- carta */

body {
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--n-green-deep);
}

a:hover {
  color: var(--n-green);
}

:focus-visible {
  outline: 2px solid var(--n-green);
  outline-offset: 3px;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

/* Cabecera crema translúcida con el isotipo, como la web de Nativa */
header {
  background: color-mix(in srgb, var(--n-bg) 95%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--n-wood);
}

/* La carta con el mismo ancho que la landing (.shell de landing.css: 1180 px con margen fluido), así la marca
   y el contenido no se mueven al pasar de una página a otra. No toca la cabecera de la landing (.l-header). */
header:not(.l-header) {
  padding-block: 0.75rem;
  padding-inline: calc(max(0px, (100% - 1180px) / 2) + clamp(1rem, 4vw, 2.5rem));
}

.controls,
.menu-container {
  max-width: 1180px;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.nav-tema {
  font-size: 15px;
}

.nav-tema a {
  color: var(--n-ink);
}

.nav-tema a:hover {
  color: var(--n-green);
}

.nav-tema a[aria-current="page"] {
  border-bottom-color: var(--n-accent-bright);
}

.brand-logo {
  display: block;
  width: 34px;
  height: 34px;
  background: url("/img/isotip.png") center / contain no-repeat;
}

.brand h1 {
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  color: var(--n-ink);
}

.search-input {
  border-color: var(--n-field);
  border-radius: 999px;
  padding-inline: 1.25rem;
}

.cat-btn {
  border-color: var(--n-wood);
  color: var(--n-ink);
}

.cat-btn.active {
  background: var(--n-green-deep);
  border-color: var(--n-green-deep);
  color: var(--n-on-dark);
}

/* Familias: titular grande en Fraunces y filete de madera */
.family-header {
  border-bottom: 1px solid var(--n-wood);
}

.family-title {
  font-size: clamp(1.75rem, 3.6vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--n-accent);
}

.family-count-label {
  color: var(--n-accent-deep);
}

/* Platos: tarjeta crema con borde de madera y la foto 4:3 arriba, a sangre. Dos por fila desde tableta (uno en
   móvil) para que las fotos se vean grandes */
.family-cards-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 640px) {
  .family-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.card {
  background: var(--n-card);
  border: 1px solid var(--n-wood);
  border-radius: 18px;
  padding: 0.75rem 0.75rem 0.85rem;
}

.card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--n-wood);
}

/* La foto ocupa todo el ancho de la tarjeta (se come el relleno de 0.75rem) */
.card-img-container {
  width: calc(100% + 1.5rem);
  margin: -0.75rem -0.75rem 0.9rem;
  border-radius: 17px 17px 0 0;
  background: var(--n-bg-alt);
}

/* Bebidas frescas sin foto todavía: el hueco de la foto con el isotipo, hasta que se suba en el panel */
.family-section:is([data-familia="17"], [data-familia="18"], [data-familia="8"]) .card:not(.has-image)::before {
  content: "";
  display: block;
  flex: none;
  aspect-ratio: 4 / 3;
  margin: -0.75rem -0.75rem 0.9rem;
  border-radius: 17px 17px 0 0;
  background:
    linear-gradient(rgb(239 224 200 / 0.8), rgb(239 224 200 / 0.8)),
    url("/img/isotip.png") center / 72px no-repeat,
    var(--n-bg-alt);
}

/* El texto, con un poco de aire respecto al borde de la tarjeta */
.card > div:not(.card-img-container) {
  padding-inline: 0.25rem;
}

.card-meta .family-tag {
  color: var(--n-accent-deep);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.card h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.card-desc {
  font-size: 0.97rem;
  line-height: 1.58;
  color: var(--n-ink-soft);
  margin: 0 0 0.75rem;
  text-wrap: pretty;
}

.card-footer {
  padding-top: 0.5rem;
}

.card .price {
  color: var(--n-ink);
  font-weight: 600;
  font-size: 1.05rem;
}

.btn-add,
.btn-checkout {
  border-radius: 999px;
  padding-inline: 1.4rem;
}

.btn-add:hover:not(:disabled),
.btn-checkout:hover:not(:disabled) {
  background: var(--n-green);
}

/* Botones de tamaño con su precio ("L 8,90 €"), un poco más grandes, como en su web */
.variant-chip {
  border-color: var(--n-wood);
  padding: 0.45rem 1rem;
  font-size: 0.95rem;
}

.lang-switch {
  border-color: var(--n-wood);
}

.bottom-bar {
  background: var(--n-card);
  border-top-color: var(--n-wood);
  box-shadow: 0 -10px 30px rgb(var(--n-scrim) / 0.12);
}

.modal,
.drawer {
  background: var(--n-card);
}

.modal-product-img-wrapper {
  border-radius: 18px;
}

.form-group input,
.form-group select,
.form-group textarea {
  border-color: var(--n-field);
  background: var(--n-card);
}

/* Cafés: lista compacta de nombres. En la carta (modo-carta) sin precio ni complementos; para pedir (modo-takeaway)
   se quedan el precio y el botón de añadir, que hacen falta para hacer el pedido */
.family-section[data-familia="7"] .family-cards-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

@media (min-width: 640px) {
  .family-section[data-familia="7"] .family-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .family-section[data-familia="7"] .family-cards-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.family-section[data-familia="7"] .card {
  justify-content: center;
  padding: 0.7rem 0.95rem;
  border-radius: 12px;
}

.family-section[data-familia="7"] :is(.card-meta, .card-desc) {
  display: none;
}

.family-section[data-familia="7"] .card h3 {
  margin: 0;
  font-size: 1.1rem;
}

body.modo-carta .family-section[data-familia="7"] .card-footer {
  display: none;
}

body.modo-takeaway .family-section[data-familia="7"] .card-footer {
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.45rem;
}

body.modo-takeaway .family-section[data-familia="7"] .btn-add {
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
}

/* ------------------------------------------------------------- bloques propios de la carta (js/tema.js) */

/* Cabecera "Fresh drinks" (antes de smoothies, iced teas y matchas) y el café Delta (antes de los cafés) */
.bloque-tema {
  margin-top: clamp(0.5rem, 3vw, 1.75rem);
}

.bloque-kicker {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--n-accent-deep);
}

.bloque-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 7vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--n-ink);
}

.bloque-texto {
  margin: 0.75rem 0 0;
  max-width: 48ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--n-ink-soft);
  text-wrap: pretty;
}

.bloque-fresh {
  padding-top: clamp(1.75rem, 5vw, 3rem);
  border-top: 1px solid var(--n-wood);
  text-align: center;
}

.bloque-fresh .bloque-texto {
  margin-inline: auto;
}

/* Café Delta: foto grande (granos y paquete) y el texto al lado; en móvil, uno encima del otro */
.bloque-cafe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--n-card);
  border: 1px solid var(--n-wood);
  border-radius: 18px;
  overflow: hidden;
}

@media (min-width: 760px) {
  .bloque-cafe {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
  }
}

/* Sin foto todavía, el hueco lleva un grano de café dibujado en color madera */
.bloque-cafe-foto {
  aspect-ratio: 4 / 3;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0936a' stroke-width='1' stroke-linecap='round'%3E%3Cg transform='rotate(30 12 12)'%3E%3Cellipse cx='12' cy='12' rx='6' ry='9'/%3E%3Cpath d='M12 3c-2 3 2 6 0 9s2 6 0 9'/%3E%3C/g%3E%3C/svg%3E")
      center / 96px no-repeat,
    var(--n-bg-alt);
}

.bloque-cafe-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bloque-cafe-texto {
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

.bloque-cafe .bloque-titulo {
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
}

/* ------------------------------------------------------------- iconos de dietas y alérgenos (js/tema.js) */

/* En el plato, cada alérgeno en un círculo con borde de madera, como en su web */
.allergen-micro-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border-color: var(--n-wood);
  color: var(--n-ink-soft);
  font-size: 1rem;
}

.allergen-micro-badge:hover {
  background: transparent;
  border-color: var(--n-green);
  color: var(--n-green);
  transform: none;
}

/* Dietas: etiqueta verde con su icono */
.badge-diet[class*="diet-"] {
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--n-green) 10%, transparent);
  border-color: color-mix(in srgb, var(--n-green) 40%, transparent);
  color: var(--n-green-deep);
}

/* Sin la barra de filtros por dieta (ni su botón de leyenda): la leyenda se abre desde el pie de la carta y desde
   los iconos de cada plato */
.dietary-filter-bar {
  display: none;
}

.diet-btn-icon {
  font-size: 0.95rem;
}

/* Pie de la carta (aviso de alergias), con el mismo ancho que el resto de la carta */
.menu-legend-section {
  max-width: 1180px;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.legend-footnote {
  border-top-color: var(--n-wood);
  color: var(--n-ink-soft);
}

.legend-info-badge {
  color: var(--n-green-deep);
}

.legend-modal-box-icon {
  color: var(--n-ink-soft);
}

.legend-modal-box.highlighted {
  background: var(--n-accent-soft);
  border-color: var(--n-accent-deep);
}