/* Diván: componentes. Requiere tokens.css y base.css.
   Cada bloque es una clase sobre HTML semántico, convertible en componente.
   Se adaptan con container queries, así que funcionan en cualquier columna. */

/* ---------- Arte de marca ----------
   <svg class="art art--logo" role="img" aria-label="Diván"><use href="#logo"/></svg>
   Heredan el color del texto (currentColor). */

.art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: currentColor;
}

.art--logo { aspect-ratio: 511.3 / 169.4; }
.art--sofa-cushions { aspect-ratio: 579.52 / 258.41; }
.art--sofa-straight { aspect-ratio: 564.64 / 305.52; }
.art--sofa-sun { aspect-ratio: 678.92 / 340.07; }
.art--figure-reading { aspect-ratio: 260.3 / 296; }
.art--figure-toast { aspect-ratio: 259.6 / 288.2; }
.art--figure-lying { aspect-ratio: 443.3 / 270.8; }

/* ---------- Sofá con titular: la firma de la marca ----------
   La forma lleva su propia base; el titular va dentro, recortado en el color
   de la superficie. Todo se mide en cqw, así que escala con su contenedor.
   Variantes: --straight (respaldo recto) y --sun (respaldo en estrella). */

.sofa-banner {
  --base: 21.4cqw;
  --title-size: 11.9cqw;
  container-type: inline-size;
  width: 100%;
}

.sofa-banner--straight { --base: 21.6cqw; }

.sofa-banner--sun {
  --base: 18cqw;
  --title-size: 8.6cqw;
}

.sofa-banner__stage {
  position: relative;
}

.sofa-banner__stage:has(.sofa-banner__figure) {
  padding-top: 17.5cqw;
}

.sofa-banner__sofa {
  color: var(--sofa);
}

.sofa-banner__figure {
  position: absolute;
  right: 3cqw;
  bottom: calc(var(--base) - 0.5cqw);
  width: 67cqw;
  color: var(--figure);
  pointer-events: none;
  transform-origin: 80% 100%;
  animation: settle var(--duration-settle) var(--ease-settle) 150ms backwards;
}

.sofa-banner__title {
  position: absolute;
  inset: auto 0 0;
  height: var(--base);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 3cqw;
  font-size: var(--title-size);
  font-weight: var(--weight-poster);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--surface);
}

.sofa-banner--sun .sofa-banner__title {
  padding-left: 12cqw;
}

.sofa-banner__logo {
  width: 30cqw;
  color: var(--figure);
}

/* Se acomoda hundiéndose hacia atrás: nunca sube por encima de su posición final */
@keyframes settle {
  from {
    transform: translateY(4%) rotate(2.5deg);
  }
}

/* ---------- Cabecera ---------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-4) var(--gutter);
}

.site-header__logo {
  display: flex;
  align-items: center;
  width: clamp(5.5rem, 4.5rem + 5vw, 9rem);
  min-height: var(--tap-target);
  border-radius: var(--radius-100);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-5);
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  font-weight: var(--weight-strong);
  text-decoration: none;
}

.site-nav__link:hover,
.site-nav__link[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* ---------- Selector de idioma ---------- */

.lang-switch {
  display: flex;
  gap: var(--space-1);
}

.lang-switch__link {
  display: inline-grid;
  place-items: center;
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  border-radius: var(--radius-full);
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
  text-decoration: none;
  transition: background-color var(--duration-control) ease-out, color var(--duration-control) ease-out;
}

.lang-switch__link:hover {
  text-decoration: underline;
}

.lang-switch__link[aria-current] {
  background: var(--accent);
  color: var(--on-accent);
}

.lang-switch__link:focus-visible {
  border-radius: var(--radius-full);
}

/* ---------- Botones ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-5);
  border: 2px solid var(--accent);
  border-radius: var(--radius-control);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--weight-strong);
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-control) ease-out,
    color var(--duration-control) ease-out,
    transform var(--duration-control) var(--ease-settle);
}

.button:hover {
  background: transparent;
  color: var(--text);
  border-color: var(--accent);
}

.button:active {
  transform: translateY(1px);
}

.button:focus-visible {
  border-radius: var(--radius-control);
}

.button--quiet {
  background: transparent;
  color: var(--text);
}

.button--quiet:hover {
  background: var(--accent);
  color: var(--on-accent);
}

.button:disabled,
.button[aria-disabled="true"] {
  border-style: dashed;
  background: transparent;
  color: var(--text);
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Índice de cartas ---------- */

.carta-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---------- Sección y plato ---------- */

.menu-section {
  container-type: inline-size;
}

.menu-section__title {
  margin-bottom: var(--gap-block);
}

.menu-section__list {
  display: grid;
  gap: var(--space-5);
}

.dish__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: last baseline;
  column-gap: var(--space-3);
}

/* Filete en línea: sigue siempre a la última palabra y se recorta en la celda */
.dish__name {
  overflow: hidden;
  padding-block: 0.1em;
  font-size: var(--text-body);
  font-weight: var(--weight-strong);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.dish__name::after {
  content: "";
  display: inline-block;
  width: 100%;
  margin-left: var(--space-3);
  margin-right: -100%;
  border-top: 1px solid var(--line);
  vertical-align: 0.32em;
}

.dish__price {
  flex: none;
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dish__desc {
  margin-top: var(--space-1);
  max-width: 54ch;
  line-height: 1.32;
  text-wrap: pretty;
}

/* Como en la carta impresa: números entre paréntesis tras los ingredientes, sin partirse */
.dish__allergens {
  white-space: nowrap;
}

.dish__meta {
  margin-top: var(--space-1);
  max-width: 54ch;
  font-size: var(--text-small);
  line-height: 1.3;
}

.dish__note {
  margin-top: var(--space-1);
  max-width: 54ch;
  font-style: normal;
  line-height: 1.32;
}

/* ---------- Leyenda de alérgenos ---------- */

.allergens {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.allergens__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap-target);
  font-weight: var(--weight-strong);
  cursor: pointer;
}

.allergens__summary::-webkit-details-marker {
  display: none;
}

.allergens__summary {
  list-style: none;
}

/* Signo + dibujado; al abrir pierde el trazo vertical y queda en − */
.allergens__summary::after {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}

.allergens[open] .allergens__summary::after {
  background-size: 100% 2px, 2px 0;
}

.allergens__list {
  columns: 2 13rem;
  column-gap: var(--space-6);
  padding-bottom: var(--space-4);
  font-size: var(--text-small);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.allergens__list li {
  break-inside: avoid;
}

/* ---------- Menú de grupo ---------- */

.group-menu {
  display: grid;
  gap: var(--gap-block);
  padding: var(--space-6) clamp(1.25rem, 5cqw, 3rem);
  border-radius: var(--radius-media);
  background: var(--surface);
  color: var(--text);
}

.group-menu__course-title {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.group-menu__list {
  display: grid;
  gap: var(--space-3);
}

.group-menu__price {
  font-size: var(--text-heading-sm);
  font-weight: var(--weight-strong);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--heading);
}

/* ---------- Horario y ubicación: cartel ---------- */

.visit {
  container-type: inline-size;
  display: grid;
  gap: var(--gap-block);
}

.hours {
  display: grid;
  gap: var(--space-6);
  justify-items: end;
  text-align: right;
  font-size: var(--text-poster);
  font-weight: var(--weight-strong);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--heading);
}

.hours dd {
  margin: 0;
}

.visit__note {
  justify-self: end;
  max-width: 44ch;
  text-align: right;
  text-wrap: pretty;
}

.visit__address {
  font-style: normal;
  font-size: var(--text-heading-sm);
  font-weight: var(--weight-strong);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.visit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* ---------- Especialidad: cartel de texto ---------- */

.feature {
  container-type: inline-size;
}

.feature__grid {
  display: grid;
  gap: var(--gap-block);
}

.feature__body {
  display: grid;
  align-content: end;
  gap: var(--space-5);
}

.feature__art {
  max-width: 24rem;
  color: var(--figure);
}

@container (min-width: 44rem) {
  .feature__grid {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-8);
  }

  .feature__art {
    justify-self: end;
    align-self: end;
    width: 100%;
  }
}

/* ---------- Lista de palabras (de la carta al cartel): un solo cuerpo, libre sobre el campo ---------- */

.word-stack {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  padding-block: var(--space-7);
  text-align: center;
  font-size: var(--text-heading);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--heading);
  hyphens: auto;
  hyphenate-limit-chars: 11 5 5;
}

.word-stack__lead {
  color: var(--text);
}

.word-stack__list {
  display: grid;
  justify-items: center;
}

/* ---------- Foto enmarcada ---------- */

.frame {
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--surface);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame--square { aspect-ratio: 1; }
.frame--portrait { aspect-ratio: 4 / 5; }
.frame--landscape { aspect-ratio: 3 / 2; }

/* ---------- Pie ---------- */

.site-footer {
  display: grid;
  gap: var(--gap-section);
  padding: var(--gap-section) var(--gutter) var(--gutter);
}

.site-footer__columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--gap-section);
}

.site-footer__title {
  margin-bottom: var(--space-2);
}