/* ==========================================================================
   MASCABO bakery & coffee — hoja de estilos
   Paleta tomada de la marca: el negro cálido del logo, la madera de las mesas
   y el caramelo del café.
   ========================================================================== */

/* ---------- Sistema de diseño ---------- */
:root {
  --ink:        #17110D;
  --ink-soft:   #2C221B;
  --cream:      #FBF8F3;
  --cream-2:    #F3EDE3;
  --caramel:    #B5793F;
  --caramel-lt: #D9A46B;
  --muted:      #6E6157;
  --line:       rgba(23, 17, 13, 0.12);
  --line-light: rgba(251, 248, 243, 0.22);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Escala tipográfica fluida */
  --fs-hero:  clamp(2.6rem, 1.4rem + 5.2vw, 5.4rem);
  --fs-h2:    clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  --fs-h3:    clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --fs-body:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --fs-small: 0.875rem;

  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4.5rem, 9vw, 8rem);
  --maxw:    1200px;

  --radius:   4px;
  --radius-lg: 8px;
  --shadow:   0 1px 2px rgba(23, 17, 13, 0.05), 0 8px 30px rgba(23, 17, 13, 0.08);
  --shadow-lg: 0 20px 60px rgba(23, 17, 13, 0.18);
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }
html:focus-within { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* Los atributos width/height del HTML están para reservar la proporción y evitar
   saltos al cargar, pero el navegador los aplica también como altura real. Sin
   esto, poner sólo el ancho por CSS deja la altura original y la imagen sale
   estirada. Las reglas con clase (.collage__item img, etc.) siguen mandando. */
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.1; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--caramel);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Utilidades ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.saltar-al-contenido {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--cream);
  color: var(--ink);
  border-radius: var(--radius);
  transition: top 0.2s var(--ease);
}
.saltar-al-contenido:focus { top: 1rem; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.antetitulo {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--caramel);
  margin-bottom: 1rem;
}

.seccion { padding-block: var(--section); }
.seccion--crema { background: var(--cream-2); }

/* ---------- Botones ---------- */
.boton {
  --btn-bg: var(--ink);
  --btn-fg: var(--cream);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 2rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
              color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.boton:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.boton:active { transform: translateY(0); }

.boton--claro { --btn-bg: var(--cream); --btn-fg: var(--ink); --btn-bd: var(--cream); }
.boton--fantasma {
  --btn-bg: transparent;
  --btn-fg: var(--cream);
  --btn-bd: var(--line-light);
  backdrop-filter: blur(6px);
}
.boton--fantasma:hover { --btn-bg: rgba(251, 248, 243, 0.14); --btn-bd: var(--cream); }
.boton--fantasma-oscuro { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.boton--fantasma-oscuro:hover { --btn-bd: var(--ink); }

.boton svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* ==========================================================================
   Barra de navegación
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 84px;
  transition: min-height 0.4s var(--ease);
}
.nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.nav__logo img {
  height: 52px;
  width: auto;
  transition: height 0.4s var(--ease), opacity 0.3s var(--ease);
}
.nav__logo-oscuro { display: none; }

.nav__enlaces {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  list-style: none;
  padding: 0;
}
.nav__enlace {
  position: relative;
  color: var(--cream);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  padding-block: 0.35rem;
  transition: color 0.3s var(--ease);
}
.nav__enlace::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.nav__enlace:hover::after,
.nav__enlace[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* Estado tras hacer scroll: la barra se vuelve crema y el texto oscuro */
.nav.is-scrolled {
  background: rgba(251, 248, 243, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.nav.is-scrolled .nav__inner { min-height: 68px; }
.nav.is-scrolled .nav__logo img { height: 42px; }
.nav.is-scrolled .nav__logo-claro { display: none; }
.nav.is-scrolled .nav__logo-oscuro { display: block; }
.nav.is-scrolled .nav__enlace { color: var(--ink); }
.nav.is-scrolled .nav__hamburguesa span { background: var(--ink); }

/* La carta no tiene hero oscuro: la barra nace ya en claro */
.nav--solida {
  background: rgba(251, 248, 243, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.nav--solida .nav__logo-claro { display: none; }
.nav--solida .nav__logo-oscuro { display: block; }
.nav--solida .nav__enlace { color: var(--ink); }
.nav--solida .nav__hamburguesa span { background: var(--ink); }

.nav__cta { padding: 0.7rem 1.5rem; font-size: 0.9rem; }

.nav__hamburguesa {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__hamburguesa span {
  display: block;
  width: 24px; height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.2s var(--ease),
              background-color 0.3s var(--ease);
}
.nav__hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav__hamburguesa { display: flex; }
  .nav__hamburguesa[aria-expanded="true"] span { background: var(--ink); }

  .nav__enlaces {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    background: var(--cream);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
                visibility 0.35s;
  }
  .nav__enlaces.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__enlace { color: var(--ink) !important; font-size: 1.5rem; font-family: var(--font-display); }
  .nav__cta { font-size: 1rem; padding: 0.9rem 2rem; }
}

/* ==========================================================================
   Hero con vídeo
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media video,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* La foto de respaldo va POR ENCIMA del vídeo y se desvanece cuando el vídeo
   está listo. Así, si todavía no hay hero.mp4 (o el navegador no lo reproduce),
   el inicio nunca se queda en negro. Va con un zoom lento para no quedar quieto.
   Nota: el vídeo no puede ir con display:none o hidden, porque entonces algunos
   navegadores se niegan a reproducirlo solo. */
.hero__respaldo {
  z-index: 1;
  animation: kenburns 24s ease-in-out infinite alternate;
  transition: opacity 1s var(--ease);
}
.hero__respaldo.is-oculto { opacity: 0; animation: none; }
@keyframes kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.14); }
}

.hero__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Dos capas: un degradado vertical que asienta la barra de arriba y el pie del
     hero, y una viñeta que apaga las esquinas para que el texto del centro
     respire por encima de una foto con mucho detalle. */
  background:
    radial-gradient(ellipse 90% 75% at 50% 45%,
      rgba(23, 17, 13, 0.20) 0%,
      rgba(23, 17, 13, 0.60) 100%),
    linear-gradient(180deg,
      rgba(23, 17, 13, 0.70) 0%,
      rgba(23, 17, 13, 0.42) 38%,
      rgba(23, 17, 13, 0.55) 72%,
      rgba(23, 17, 13, 0.90) 100%);
}

.hero__contenido {
  position: relative;
  text-align: center;
  color: var(--cream);
  padding-block: 8rem 6rem;
}
.hero__logo {
  width: clamp(104px, 13vw, 148px);
  margin-inline: auto;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.45));
}
.hero__titulo {
  font-size: var(--fs-hero);
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  letter-spacing: -0.02em;
  max-width: 15ch;
  margin-inline: auto;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.hero__titulo em { font-style: italic; color: var(--caramel-lt); }

.hero__sub {
  margin-top: 1.5rem;
  margin-inline: auto;
  max-width: 46ch;
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.2rem);
  color: rgba(251, 248, 243, 0.88);
  text-wrap: balance;
}
.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  color: rgba(251, 248, 243, 0.7);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}
.hero__scroll-linea {
  width: 1px; height: 46px;
  background: linear-gradient(180deg, transparent, rgba(251, 248, 243, 0.7));
  animation: bajar 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes bajar {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}
@media (max-width: 640px) { .hero__scroll { display: none; } }

/* Botón de sonido del vídeo — sólo aparece si hay vídeo con audio */
.hero__sonido {
  position: absolute;
  right: var(--gutter);
  bottom: 2rem;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line-light);
  background: rgba(23, 17, 13, 0.4);
  backdrop-filter: blur(6px);
  color: var(--cream);
  cursor: pointer;
  transition: background-color 0.25s var(--ease);
}
.hero__sonido.is-visible { display: flex; }
.hero__sonido:hover { background: rgba(23, 17, 13, 0.7); }
.hero__sonido svg { width: 18px; height: 18px; }

/* ==========================================================================
   Intro / pilares
   ========================================================================== */
.intro { text-align: center; }
.intro__titulo {
  font-size: var(--fs-h2);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}
.intro__texto {
  margin: 1.5rem auto 0;
  max-width: 58ch;
  color: var(--muted);
  text-wrap: pretty;
}

.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  text-align: left;
}
.pilar { display: grid; gap: 0.75rem; align-content: start; }
.pilar__num {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--caramel);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.pilar__titulo { font-size: var(--fs-h3); }
.pilar__texto { color: var(--muted); font-size: 0.98rem; }

/* ==========================================================================
   Collage
   ========================================================================== */
.collage__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.collage__titulo { font-size: var(--fs-h2); font-variation-settings: "SOFT" 40, "WONK" 1; }
.collage__nota { color: var(--muted); font-size: 0.95rem; max-width: 34ch; }

.collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(120px, 15vw, 180px);
  grid-auto-flow: dense;
  gap: clamp(0.5rem, 1.2vw, 0.9rem);
}
.collage__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream-2);
  border: 0;
  padding: 0;
  cursor: zoom-in;
}
.collage__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
}
.collage__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(23, 17, 13, 0.62));
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.collage__item:hover img { transform: scale(1.06); }
.collage__item:hover::after { opacity: 1; }

.collage__pie {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 1rem;
  color: var(--cream);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.collage__item:hover .collage__pie { opacity: 1; transform: none; }

.collage__item--grande { grid-column: span 2; grid-row: span 2; }
.collage__item--ancho  { grid-column: span 2; }
.collage__item--alto   { grid-row: span 2; }

@media (max-width: 720px) {
  .collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 42vw; }
  .collage__item--grande { grid-column: span 2; grid-row: span 1; }
  .collage__item--ancho  { grid-column: span 2; }
  .collage__item--alto   { grid-row: span 1; }
  /* En el móvil no hay hover, así que el pie va siempre visible. Y con él tiene
     que ir siempre su sombreado: sobre las fotos claras (el carrot cake, la
     tostada) el texto blanco a pelo no se lee. */
  .collage__pie { opacity: 1; transform: none; }
  .collage__item::after { opacity: 1; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(12, 9, 7, 0.94);
  backdrop-filter: blur(8px);
  border: 0;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
/* Hace falta porque el display:grid de arriba pisa el display:none que el
   navegador le da al atributo hidden. Sin esto, el atributo no ocultaría nada.
   Se oculta con display en vez de con visibility a propósito: un elemento en
   visibility:hidden no es enfocable, y entonces el foco no entraría al abrir. */
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__figura { margin: 0; display: grid; gap: 1rem; justify-items: center; }
.lightbox__img {
  max-width: min(1100px, 92vw);
  max-height: 78vh;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.lightbox__pie { color: rgba(251, 248, 243, 0.75); font-size: 0.9rem; text-align: center; }

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 999px;
  border: 1px solid var(--line-light);
  background: rgba(251, 248, 243, 0.08);
  color: var(--cream);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.lightbox__btn:hover { background: rgba(251, 248, 243, 0.2); }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__btn--cerrar { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__btn--prev { left: clamp(0.5rem, 3vw, 2rem); top: 50%; translate: 0 -50%; }
.lightbox__btn--next { right: clamp(0.5rem, 3vw, 2rem); top: 50%; translate: 0 -50%; }

@media (max-width: 640px) {
  .lightbox__btn--prev { left: 0.5rem; }
  .lightbox__btn--next { right: 0.5rem; }
  .lightbox__btn { width: 44px; height: 44px; }
}

/* ==========================================================================
   Franja de la carta
   ========================================================================== */
.franja-carta {
  position: relative;
  isolation: isolate;
  padding-block: clamp(5rem, 10vw, 9rem);
  text-align: center;
  color: var(--cream);
  overflow: hidden;
}
.franja-carta__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.franja-carta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(23, 17, 13, 0.72);
}
.franja-carta__titulo {
  font-size: var(--fs-h2);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  max-width: 18ch;
  margin-inline: auto;
  text-wrap: balance;
}
.franja-carta__titulo em { font-style: italic; color: var(--caramel-lt); }
.franja-carta__texto {
  margin: 1.25rem auto 2.5rem;
  max-width: 50ch;
  color: rgba(251, 248, 243, 0.82);
  text-wrap: pretty;
}

/* ==========================================================================
   Horario y ubicación
   ========================================================================== */
.visita {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.visita__titulo {
  font-size: var(--fs-h2);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  margin-bottom: 2rem;
}

/* Horario */
.horario { list-style: none; padding: 0; margin: 0; }
.horario__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.horario__fila:first-child { border-top: 1px solid var(--line); }
.horario__dia {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
}
.horario__dia .emoji { font-size: 1.1rem; line-height: 1; }
.horario__hora {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.horario__fila--cerrado { color: var(--muted); }
.horario__fila--cerrado .horario__hora { font-size: 1rem; font-style: italic; }

/* Chip de abierto/cerrado, lo rellena main.js */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.75rem;
  padding: 0.5rem 1rem 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--cream);
  font-size: 0.88rem;
  visibility: hidden;
}
.estado.is-listo { visibility: visible; }
.estado__punto {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--muted);
  flex-shrink: 0;
}
.estado.is-abierto .estado__punto {
  background: #3F8A4B;
  box-shadow: 0 0 0 3px rgba(63, 138, 75, 0.18);
}
.estado.is-cerrado .estado__punto { background: #B0483C; box-shadow: 0 0 0 3px rgba(176, 72, 60, 0.15); }
.estado__texto strong { font-weight: 500; }

/* Foto bajo el horario: equilibra la columna, que si no queda muy corta al lado
   del mapa. Se esconde en móvil, donde las columnas van apiladas y no hace falta. */
.horario__foto { margin: 2.5rem 0 0; }
.horario__foto img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.horario__foto figcaption {
  margin-top: 0.85rem;
  color: var(--muted);
  font-size: 0.88rem;
  font-style: italic;
}
@media (max-width: 700px) { .horario__foto { display: none; } }

/* Ubicación */
.ubicacion__datos { display: grid; gap: 1.5rem; }
.dato { display: flex; gap: 1rem; align-items: flex-start; }
.dato__icono {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 0.28rem;
  color: var(--caramel);
}
.dato__icono svg { width: 100%; height: 100%; }
.dato__etiqueta {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.15rem;
}
.dato__valor { font-style: normal; }
.dato__valor a { text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color 0.25s var(--ease); }
.dato__valor a:hover { border-color: var(--ink); }

.ubicacion__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
}

.mapa {
  margin-top: 2rem;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--cream-2);
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   Pie
   ========================================================================== */
.pie {
  background: var(--ink);
  color: rgba(251, 248, 243, 0.72);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
}
.pie__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line-light);
}
.pie__logo { width: 96px; margin-bottom: 1.25rem; }
.pie__lema { font-size: 0.92rem; max-width: 30ch; }
.pie__titulo {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 1.1rem;
}
.pie__lista { list-style: none; padding: 0; display: grid; gap: 0.6rem; font-size: 0.92rem; }
.pie__lista a { text-decoration: none; transition: color 0.25s var(--ease); }
.pie__lista a:hover { color: var(--cream); }
.pie__horario-linea { display: flex; justify-content: space-between; gap: 1rem; }

.pie__social { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.pie__social a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line-light);
  border-radius: 999px;
  color: var(--cream);
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.pie__social a:hover { background: rgba(251, 248, 243, 0.14); transform: translateY(-2px); }
.pie__social svg { width: 18px; height: 18px; }

.pie__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  font-size: 0.82rem;
  color: rgba(251, 248, 243, 0.5);
}

/* ==========================================================================
   Página de la carta
   ========================================================================== */
.carta-hero {
  padding-block: clamp(8rem, 14vw, 11rem) clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
}
.carta-hero__titulo {
  font-size: clamp(2.8rem, 1.6rem + 5vw, 5rem);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.carta-hero__sub { margin: 1rem auto 0; max-width: 48ch; color: var(--muted); text-wrap: pretty; }

.carta-hero__filete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2rem auto 0;
  max-width: 220px;
  color: var(--caramel);
}
.carta-hero__filete::before,
.carta-hero__filete::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.carta-hero__filete svg { width: 26px; height: 26px; }

/* Aviso de precios por confirmar — borrar el <aside> cuando estén revisados */
.aviso {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--caramel);
  border-radius: var(--radius);
  background: rgba(181, 121, 63, 0.07);
  color: var(--ink);
  font-size: 0.9rem;
  text-align: left;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}
.aviso svg { width: 18px; height: 18px; color: var(--caramel); flex-shrink: 0; margin-top: 0.22rem; }

/* Navegación por categorías */
.carta-nav {
  position: sticky;
  top: 68px;
  z-index: 50;
  background: rgba(251, 248, 243, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.carta-nav__lista {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0.9rem 0;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.carta-nav__lista::-webkit-scrollbar { display: none; }
.carta-nav__enlace {
  display: block;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
  font-size: 0.88rem;
  color: var(--muted);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.carta-nav__enlace:hover { background: var(--cream-2); color: var(--ink); }
.carta-nav__enlace.is-activo { background: var(--ink); color: var(--cream); }

/* Secciones de la carta */
.carta-cuerpo { padding-block: clamp(3.5rem, 7vw, 6rem); }

.menu-seccion { scroll-margin-top: 130px; }
.menu-seccion + .menu-seccion { margin-top: clamp(3.5rem, 6vw, 5.5rem); }

.menu-seccion__cabecera {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.menu-seccion__titulo {
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  white-space: nowrap;
}
.menu-seccion__linea { flex: 1; height: 1px; background: var(--line); }
.menu-seccion__en {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--caramel);
  white-space: nowrap;
}
/* En pantallas estrechas no cabe junto al título y se sale por la derecha.
   Es un adorno, así que fuera. */
@media (max-width: 620px) { .menu-seccion__en { display: none; } }

.menu-intro {
  max-width: 62ch;
  margin: -0.5rem 0 2.5rem;
  color: var(--muted);
  text-wrap: pretty;
}

.menu-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* 400px de mínimo para que en escritorio salgan dos columnas y no tres: con
     tres, el nombre y la descripción se parten en demasiadas líneas.
     El min(...,100%) es imprescindible: sin él, en un móvil de 390px la columna
     se planta en 400px y saca a toda la página fuera de pantalla. */
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 0 clamp(2rem, 5vw, 4.5rem);
}
.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0 0.75rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--line);
}
.menu-item__nombre { font-weight: 500; font-size: 1.02rem; }
.menu-item__precio {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.menu-item__desc {
  grid-column: 1 / -1;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.88rem;
  max-width: 46ch;
}
.menu-item__desc em { font-style: italic; opacity: 0.72; }

/* ==========================================================================
   "Conoce nuestros cafés" — las tazas dibujadas por capas,
   igual que la pizarra que hay en la barra.
   ========================================================================== */
:root {
  --capa-cafe:       #43220F;
  --capa-cafe-largo: #8A5A38;
  --capa-agua:       #D8CCB9;
  --capa-leche:      #EADFC8;
  --capa-espuma:     #FBF7EE;
  --capa-chocolate:  #74452A;
  --capa-condensada: #E2AF56;
  --capa-chai:       #C08A4E;
}

.cafes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: clamp(2.25rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 3rem);
}

.cafe {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.25rem;
  align-items: start;
}

.cafe__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.cafe__nombre { font-size: 1.05rem; font-weight: 500; font-family: var(--font-body); }
.cafe__precio {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cafe__capas {
  margin-top: 0.65rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--caramel);
}
.cafe__desc { margin-top: 0.5rem; font-size: 0.9rem; color: var(--muted); }

/* La taza */
.taza { position: relative; width: 96px; height: 88px; }
.taza__cuerpo {
  position: absolute;
  left: 4px; top: 0;
  width: 68px; height: 78px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 3px 3px 24px 24px;
}
.taza__asa {
  position: absolute;
  left: 70px; top: 16px;
  width: 20px; height: 30px;
  border: 1.5px solid var(--ink);
  border-left: 0;
  border-radius: 0 0 14px 14px / 0 0 12px 12px;
  border-top-right-radius: 12px;
}
.taza__plato {
  position: absolute;
  left: 0; bottom: 0;
  width: 76px; height: 4px;
  background: var(--ink);
  border-radius: 2px;
}

/* Las capas van en el orden en que se ven en la taza: de arriba abajo */
.capa { width: 100%; height: var(--h); }
/* Una línea fina entre capas contiguas: sin ella, las dos oscuras del moka
   (chocolate y café) se funden en una sola mancha y no se distinguen. */
.capa + .capa { border-top: 1px solid rgba(23, 17, 13, 0.22); }
.capa--cafe       { background: var(--capa-cafe); }
.capa--cafe-largo { background: var(--capa-cafe-largo); }
.capa--agua       { background: var(--capa-agua); }
.capa--leche      { background: var(--capa-leche); }
.capa--espuma     { background: var(--capa-espuma); }
.capa--chocolate  { background: var(--capa-chocolate); }
.capa--condensada { background: var(--capa-condensada); }
.capa--chai       { background: var(--capa-chai); }

/* Vaso alto para los que van con hielo: sin asa, más estrecho y más alto que
   una taza, y con las esquinas de abajo apenas redondeadas. */
.taza--vaso .taza__cuerpo {
  left: 14px;
  width: 52px; height: 88px;
  border-radius: 2px 2px 7px 7px;
  position: absolute;
}
/* El hielo va DENTRO del cuerpo del vaso, así el overflow:hidden lo recorta
   contra el cristal y los cubitos no quedan flotando por fuera. */
.taza__hielo { position: absolute; inset: 0; }
.taza__hielo i {
  position: absolute;
  width: 14px; height: 14px;
  border: 1.5px solid rgba(23, 17, 13, 0.55);
  border-radius: 2px;
  background: rgba(251, 248, 243, 0.62);
}
.taza__hielo i:nth-child(1) { left: 6px;  top: 9px;  transform: rotate(-14deg); }
.taza__hielo i:nth-child(2) { left: 27px; top: 24px; transform: rotate(12deg); }
.taza__hielo i:nth-child(3) { left: 9px;  top: 44px; transform: rotate(6deg); }

@media (max-width: 460px) {
  .cafes { grid-template-columns: 1fr; }
  .cafe { grid-template-columns: 80px 1fr; gap: 1rem; }
  .taza { width: 80px; transform: scale(0.86); transform-origin: top left; }
}

/* Etiquetas tipo "sin gluten" / "novedad" */
.etiqueta {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  vertical-align: 0.14em;
  white-space: nowrap;
}
.etiqueta--sg { background: rgba(63, 138, 75, 0.12); color: #2F6B39; }
.etiqueta--nuevo { background: rgba(181, 121, 63, 0.14); color: var(--caramel); }

/* Precio sin confirmar: se marca en caramelo y con subrayado punteado */
.por-confirmar {
  color: var(--caramel);
  border-bottom: 1px dotted var(--caramel);
  cursor: help;
}

.menu-nota {
  margin-top: clamp(3rem, 5vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
  display: grid;
  gap: 0.5rem;
}

.carta-pie-cta {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ---------- Impresión ---------- */
@media print {
  .nav, .carta-nav, .aviso, .carta-pie-cta, .pie, .hero__scroll { display: none !important; }
  body { background: #fff; font-size: 10pt; }
  .carta-hero { padding-block: 1rem; background: none; }
  .menu-lista { grid-template-columns: repeat(2, 1fr); }
  .menu-seccion { break-inside: avoid; }
  .por-confirmar { color: inherit; border: 0; }
}

/* ---------- Animación de entrada al hacer scroll ---------- */
.revelar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.revelar.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; }
  .hero__respaldo { animation: none; }
}