/* ===== INICIO FUENTES AUTOALOJADAS ===== */
/* ============================================================
   TIPOGRAFÍAS AUTOALOJADAS
   Servidas desde este mismo dominio, NO desde fonts.googleapis.com,
   para que Google no reciba la IP del visitante sin consentimiento.

   ⚠️ NO EDITAR A MANO: lo genera
      node herramientas/descargar-fuentes.mjs

   Son fuentes VARIABLES: un archivo por subconjunto cubre todos los
   pesos del rango, así que no hay un archivo por peso.
   ============================================================ */

/* Archivo · latin-ext · 31.8 KB */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fuentes/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo · latin · 34.1 KB */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fuentes/archivo-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;
}

/* Manrope · latin-ext · 14.8 KB */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fuentes/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Manrope · latin · 24.3 KB */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fuentes/manrope-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;
}
/* ===== FIN FUENTES AUTOALOJADAS ===== */

/* ============================================================
   Cafetería La Campana — hoja de estilos única del sitio.
   Contiene: configuración de marca, base, cabecera/pie,
   secciones de la home y el sistema de carta larga.
   ============================================================ */

/* ============================================================
   🎨 CONFIGURACIÓN DE MARCA
   Los dos colores de marca están tomados PÍXEL A PÍXEL de
   assets/Logo.jpg: azul #305ca5 y crema #f8f4f1. Coinciden con
   la carta impresa. (El rótulo de la fachada es negro sobre
   madera, pero la identidad gráfica es esta.)
   El resto de tonos son derivados de esos dos.
   ============================================================ */
:root {
  --bg:          #f8f4f1;   /* crema de marca (del logo)    */
  --surface:     #efe9e3;   /* cajas y franjas              */
  --text:        #16294a;   /* azul marino de texto         */
  --text-soft:   #59657c;   /* texto secundario             */
  --muted:       #9aa3b2;   /* etiquetas tenues             */
  --line:        #e3dbd3;   /* líneas y bordes              */
  --brand:       #305ca5;   /* azul de marca (exacto)       */
  --brand-dark:  #23447b;   /* hover de marca               */
  --cream:       #f8f4f1;   /* crema de marca (exacto)      */
  --highlight:   #e8c98a;   /* etiqueta destacada           */
  --font-title:  'Archivo', system-ui, sans-serif;
  --font-body:   'Manrope', system-ui, -apple-system, sans-serif;

  --header-h:    72px;
}

/* ============ BASE ============ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 4.5rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: inherit; }

.container { max-width: 1060px; margin: 0 auto; padding: 0 1.4rem; }
.container--narrow { max-width: 860px; }

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

.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 200;
  background: var(--text); color: var(--cream);
  padding: .7rem 1.1rem; border-radius: 0 0 10px 10px; text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 0; }

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

/* ============ BOTONES ============ */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: 999px;
  font-size: .92rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--brand); color: var(--cream); }
.btn--primary:hover { background: var(--brand-dark); }
.btn--ghost { border-color: var(--line); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--surface); }
.btn--small { padding: .6rem 1.1rem; font-size: .85rem; }
/* Botón redondo sólo con icono (redes sociales del hero) */
.btn--icono {
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  justify-content: center; border-color: var(--line); color: var(--text-soft);
}
.btn--icono:hover { border-color: var(--brand); color: var(--brand); background: var(--surface); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ============ CABECERA ============ */
.site-header {
  position: sticky; top: 0; z-index: 90;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(248, 244, 241, .9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; }

.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--text); }
.brand svg { flex-shrink: 0; }
.brand-name {
  font-family: var(--font-title);
  font-weight: 700; font-size: .84rem; letter-spacing: .2em; text-transform: uppercase; line-height: 1;
}
.brand-sub {
  display: block; font-weight: 500; font-size: .55rem; letter-spacing: .32em;
  text-transform: uppercase; color: var(--muted); margin-top: .3rem;
}

.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav a { text-decoration: none; font-size: .88rem; font-weight: 500; color: var(--text-soft); transition: color .2s ease; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--brand); }
.site-nav a[aria-current="page"] { font-weight: 700; }
.site-nav .btn--primary { color: var(--cream); }

@media (max-width: 760px) {
  .site-nav { gap: 1rem; }
  .site-nav .nav-link-hide-sm { display: none; }
  .brand-sub { display: none; }
}
/* En pantallas estrechas el rótulo partía en dos líneas por culpa del
   botón del teléfono. Se aprieta todo un poco y se prohíbe el salto. */
.brand-name { white-space: nowrap; }
@media (max-width: 460px) {
  .site-header .container { gap: .7rem; }
  .brand-name { font-size: .74rem; letter-spacing: .14em; }
  .brand svg { width: 22px; height: 26px; }
  .site-nav { gap: .75rem; }
  .site-nav .btn--small { padding: .55rem .8rem; font-size: .78rem; }
}

/* ============ HERO (home) ============ */
.hero {
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5rem);
  position: relative; overflow: hidden;
}
.hero > .container { position: relative; z-index: 1; }
.hero-inner { max-width: 780px; }

/* Campana de marca al fondo, a la derecha del hero. Decorativa:
   va incrustada en el HTML con fill="currentColor".
   Sólo a partir de 1200px: por debajo, el bloque de texto llega
   hasta donde estaría la campana y se le montaría encima. */
.hero-mark { display: none; }

@media (min-width: 1280px) {
  .hero-mark {
    display: block;
    position: absolute;
    /* Centrada en el hueco que queda a la derecha del bloque de texto,
       sin sangrar fuera de la pantalla. */
    right: 3.5%;
    top: 50%;
    /* Girada 14°, la caja envolvente crece ~1,38× el ancho: a este
       tamaño la campana entra entera en el alto del hero, y en pantallas
       justas no se mete en la columna de texto. */
    width: clamp(240px, 23vw, 380px);
    height: auto;
    color: var(--brand);
    opacity: .09;
    transform: translateY(-50%) rotate(14deg);
    transform-origin: center;
    pointer-events: none;
  }

  /* Realce que sigue al cursor.
     Es una COPIA de la campana (la clona el script de index.html), más
     marcada y recortada con una máscara radial centrada en el puntero.
     El resultado: la zona donde está el ratón se ve más oscura.
     La máscara vive en el sistema de coordenadas del elemento SIN rotar,
     por eso el script deshace los 14° antes de posicionarla. */
  .hero-mark--glow {
    color: var(--brand-dark);
    opacity: 0;
    transition: opacity .4s ease;
    -webkit-mask-image: radial-gradient(circle var(--radio, 230px) at var(--mx, 50%) var(--my, 50%), #000 0%, #000 30%, transparent 100%);
    mask-image: radial-gradient(circle var(--radio, 230px) at var(--mx, 50%) var(--my, 50%), #000 0%, #000 30%, transparent 100%);
  }
  .hero.tiene-cursor .hero-mark--glow { opacity: .28; }

  /* Sin puntero fino (táctil, lápiz) no se activa: no hay hover que valga. */
  @media (hover: none) {
    .hero-mark--glow { display: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mark--glow { transition: none; }
}
.hero-eyebrow {
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brand); font-weight: 700; margin: 0 0 1.2rem;
}
.hero h1 {
  font-family: var(--font-title); font-weight: 600;
  font-size: clamp(2.4rem, 6.6vw, 4.1rem); line-height: 1.04; letter-spacing: -.025em;
  margin: 0;
}
.hero h1 em { font-style: normal; color: var(--brand); }
.hero-lead { font-size: clamp(1.02rem, 2vw, 1.18rem); color: var(--text-soft); margin: 1.5rem 0 0; max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }

.quickbar {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin: 0;
}
.quickbar div { background: var(--bg); padding: 1.6rem 1.4rem; }
.quickbar dt { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.quickbar dd { margin: .5rem 0 0; font-family: var(--font-title); font-weight: 500; font-size: 1.1rem; line-height: 1.35; }
.quickbar dd a { text-decoration: none; }
.quickbar dd a:hover { color: var(--brand); }

/* Campana decorativa: sólo en móvil, aprovechando el hueco que queda a la
   derecha cuando los tres datos se apilan. En escritorio no cabe (tres
   columnas llenas), así que ahí no existe. */
.quickbar-mark { display: none; }

@media (max-width: 760px) {
  /* Las separaciones pasan de ser el truco del `gap` a bordes reales:
     así los bloques dejan de tener fondo opaco y la campana se ve DETRÁS
     del texto en vez de taparlo. */
  .quickbar {
    grid-template-columns: 1fr; gap: 0;
    background: transparent; position: relative; overflow: hidden;
  }
  .quickbar div {
    background: transparent; padding: 1.2rem 1.4rem;
    border-bottom: 1px solid var(--line);
    position: relative; z-index: 1;
  }
  .quickbar div:last-child { border-bottom: 0; }

  .quickbar-mark {
    display: block; position: absolute; z-index: 0;
    right: -6%; top: 50%;
    transform: translateY(-50%) rotate(14deg);
    width: clamp(150px, 46vw, 230px); height: auto;
    opacity: .09; pointer-events: none;
  }
}

/* ============ SECCIONES GENÉRICAS ============ */
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section--surface { background: var(--surface); }
.section-head { max-width: 640px; margin-bottom: 3rem; }
.section-head h2 {
  font-family: var(--font-title); font-weight: 600;
  font-size: clamp(1.9rem, 4.2vw, 2.8rem); line-height: 1.1; letter-spacing: -.02em; margin: 0;
}
.section-head h2 em { font-style: normal; color: var(--brand); }
.section-head p { color: var(--text-soft); margin: 1rem 0 0; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; }
@media (max-width: 860px) { .feature-grid { grid-template-columns: 1fr; gap: 1.8rem; } }
.feature h3 { font-family: var(--font-title); font-weight: 600; font-size: 1.25rem; margin: 0 0 .5rem; }
.feature p { color: var(--text-soft); margin: 0; font-size: .95rem; }
.feature-num {
  display: block; font-size: .7rem; letter-spacing: .2em; color: var(--brand);
  font-weight: 700; margin-bottom: .9rem;
}

/* ============ HORARIO + UBICACIÓN ============ */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
@media (max-width: 860px) { .info-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Variante con el mapa a la derecha: las dos columnas igualan altura
   para que el mapa llegue arriba y abajo como la información. */
.info-grid--mapa { align-items: stretch; gap: 3rem; }
.info-grid--mapa .map-wrap { margin-top: 0; height: 100%; }
.subtitulo-bloque {
  font-family: var(--font-title); font-weight: 600;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin: 2.2rem 0 .9rem;
}

.hours { list-style: none; margin: 0; padding: 0; }
.hours li {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .8rem 0; border-bottom: 1px dashed var(--line); font-size: .95rem;
}
.hours li:last-child { border-bottom: 0; }
.hours .day { color: var(--text-soft); }
.hours .time { font-weight: 600; white-space: nowrap; }

.address { font-style: normal; color: var(--text-soft); font-size: 1rem; line-height: 1.7; }
.address strong { color: var(--text); font-weight: 600; }
.address-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }

.note-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.note-list li { position: relative; padding-left: 1.6rem; margin-bottom: .6rem; color: var(--text-soft); font-size: .92rem; }
.note-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
}

/* ============ MAPA (mismo patrón que Cachitos) ============ */
.map-wrap {
  margin-top: 3rem;
  border-radius: 24px; overflow: hidden;
  border: 1px solid var(--line);
  min-height: 420px;
  filter: saturate(.85) contrast(.95);
}
.map-wrap iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
@media (max-width: 700px) { .map-wrap, .map-wrap iframe { min-height: 320px; } }

/* Marcador que ocupa el sitio del incrustado hasta que hay consentimiento */
.embed-placeholder {
  min-height: 420px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; text-align: center; padding: 2.5rem 1.5rem;
  background: var(--surface);
}
.embed-placeholder-icono { color: var(--brand); opacity: .35; }
.embed-placeholder p { margin: 0; color: var(--text-soft); font-size: .95rem; max-width: 40ch; }
.embed-placeholder .nota { font-size: .8rem; color: var(--muted); }
.embed-placeholder .nota a { color: var(--brand); }
@media (max-width: 700px) { .embed-placeholder { min-height: 320px; } }

/* ============ AVISO DE COOKIES ============ */
.cookie-banner {
  position: fixed; bottom: 1rem; left: 1rem; right: 1rem; max-width: 520px; margin-left: auto;
  background: var(--text); color: var(--cream);
  padding: 1rem 1.1rem; border-radius: 14px;
  font-size: .82rem; line-height: 1.45;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .45);
  z-index: 120;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  opacity: 0; animation: cookieIn .35s ease .6s forwards;
}
@keyframes cookieIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.cookie-banner p { margin: 0; flex: 1; min-width: 200px; color: rgba(248, 244, 241, .92); }
.cookie-banner a { color: var(--highlight); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner a:hover { text-decoration: none; }
.cookie-actions { display: inline-flex; gap: .5rem; flex-shrink: 0; }
.cookie-btn {
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  padding: .55rem 1rem; border-radius: 999px; cursor: pointer; border: 0;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.cookie-btn--accept { background: var(--highlight); color: var(--text); }
.cookie-btn--accept:hover { background: var(--cream); transform: translateY(-1px); }
.cookie-btn--reject { background: transparent; color: rgba(248, 244, 241, .65); border: 1px solid rgba(248, 244, 241, .25); }
.cookie-btn--reject:hover { color: var(--cream); border-color: rgba(248, 244, 241, .5); }
@media (max-width: 520px) {
  .cookie-banner { left: .5rem; right: .5rem; bottom: .5rem; padding: .9rem 1rem; gap: .75rem; }
  .cookie-actions { width: 100%; }
  .cookie-btn { flex: 1; padding: .65rem .9rem; }
}
@media (prefers-reduced-motion: reduce) { .cookie-banner { animation: none; opacity: 1; } }

/* ============ PÁGINAS LEGALES ============ */
.legal { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3.5rem, 8vw, 6rem); }
.legal-inner { max-width: 720px; margin: 0 auto; }
.legal .meta {
  display: block; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: 1.2rem;
}
.legal h1 {
  font-family: var(--font-title); font-weight: 600;
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1.08; letter-spacing: -.025em; margin: 0 0 1.5rem;
}
.legal h1 em { font-style: normal; color: var(--brand); }
.legal h2 {
  font-family: var(--font-title); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1.1rem; margin: 2.5rem 0 .8rem;
}
.legal p, .legal li { color: var(--text-soft); font-size: .95rem; line-height: 1.7; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .6rem; }
.legal li strong { color: var(--text); }
.legal a { color: var(--brand); text-underline-offset: 2px; }
.legal code {
  font-size: .86em; background: var(--surface); padding: .12rem .35rem;
  border-radius: 5px; color: var(--text);
}
.legal-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .88rem; }
.legal-table th, .legal-table td {
  text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top;
}
.legal-table th {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.legal-table td { color: var(--text-soft); }
.legal-back {
  display: inline-block; margin-top: 2.5rem; font-weight: 600;
  font-size: .9rem; color: var(--brand); text-decoration: none;
}
.legal-back:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table thead { display: none; }
  .legal-table tr { border-bottom: 1px solid var(--line); padding: .6rem 0; }
  .legal-table td { border: 0; padding: .25rem 0; }
  .legal-table td::before { content: attr(data-th) ": "; font-weight: 700; color: var(--text); }
}

/* ============ CTA FINAL ============ */
.cta-band { background: var(--brand); color: var(--cream); text-align: center; padding: clamp(3.5rem, 8vw, 5.5rem) 0; }
.cta-band h2 {
  font-family: var(--font-title); font-weight: 600;
  font-size: clamp(1.8rem, 4.2vw, 2.7rem); letter-spacing: -.02em; margin: 0 0 1rem;
}
.cta-band p { color: rgba(248, 244, 241, .78); margin: 0 auto 2rem; max-width: 46ch; }
.cta-band .btn--primary { background: var(--cream); color: var(--brand); }
.cta-band .btn--primary:hover { background: var(--highlight); color: var(--text); }

/* ============ PIE ============ */
.site-footer { border-top: 1px solid var(--line); padding: 3.5rem 0 2.5rem; font-size: .9rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }
.site-footer h3 { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 .9rem; font-weight: 700; }
.site-footer p, .site-footer address { color: var(--text-soft); margin: 0 0 .4rem; font-style: normal; line-height: 1.7; }
.site-footer a { color: var(--text-soft); text-decoration: none; }
.site-footer a:hover { color: var(--brand); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .45rem; }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
  color: var(--muted); font-size: .82rem;
}

/* Crédito de Enlace Estudio */
.creditos {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--muted); font-size: .82rem;
}
.creditos img { width: 22px; height: 22px; display: block; flex-shrink: 0; }
.creditos strong { font-weight: 700; color: var(--text-soft); transition: color .2s ease; }
.creditos:hover strong { color: var(--brand); }

/* Migas de pan */
.breadcrumb { padding: 1.5rem 0 0; font-size: .82rem; color: var(--muted); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.breadcrumb a { color: var(--text-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb li + li::before { content: "/"; margin-right: .45rem; color: var(--line); }

/* ============================================================
   ============ CARTA LARGA ============
   Sustituye al bloque `carta-visual` del kit: esta carta tiene
   ~110 platos y hasta 4 precios por plato (bocadillo/pulguita/
   croissant/sándwich), así que el modelo "una miniatura por
   plato" no encaja. Aquí: una foto por SECCIÓN y el texto debajo.
   Breakpoint móvil: 700px.
   ============================================================ */
.menu-wrap { padding: 2.5rem 0 5rem; }

.menu-intro { max-width: 700px; margin: 0 auto 2.5rem; text-align: center; }
.menu-intro h1 {
  font-family: var(--font-title); font-weight: 600;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem); letter-spacing: -.025em; margin: 0;
}
.menu-intro h1 em { font-style: normal; color: var(--brand); }
.menu-intro p { color: var(--text-soft); font-size: 1.02rem; margin-top: 1rem; }

/* Índice de secciones, pegajoso bajo la cabecera */
.menu-nav {
  position: sticky; top: var(--header-h); z-index: 80;
  background: rgba(248, 244, 241, .94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  margin-bottom: 3rem;
}
.menu-nav-inner {
  display: flex; gap: .45rem; padding: .8rem 1.4rem;
  max-width: 1060px; margin: 0 auto;
  overflow-x: auto; scrollbar-width: none;
}
.menu-nav-inner::-webkit-scrollbar { display: none; }
.menu-nav a {
  flex-shrink: 0;
  padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--text-soft); text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.menu-nav a:hover { background: var(--brand); color: var(--cream); border-color: var(--brand); }

/* ====== Cabecera de sección (con foto opcional) ====== */
.menu-sec { margin-bottom: 4rem; scroll-margin-top: calc(var(--header-h) + 4.5rem); }

.menu-sec-head { margin-bottom: 1.8rem; }

/* Variante sin foto: sólo título + filete */
.menu-sec-head h2 {
  font-family: var(--font-title); font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.1;
  letter-spacing: .01em; text-transform: uppercase; margin: 0;
}
.menu-sec-head .menu-sec-note { font-size: .88rem; color: var(--text-soft); margin: .6rem 0 0; }

.menu-sec-head--plain {
  border-bottom: 2px solid var(--text); padding-bottom: .9rem;
}

/* Variante con foto: banner con degradado y título encima */
.menu-sec-head--photo {
  position: relative; border-radius: 18px; overflow: hidden;
  background: var(--surface);
}
.menu-sec-head--photo img {
  width: 100%; height: clamp(230px, 34vw, 400px);
  object-fit: cover; display: block;
}

/* ====== Cabecera con VARIAS fotos ======
   Dos comportamientos distintos a propósito:
   · MÓVIL      → mosaico: se ven todas de un vistazo, sin tocar nada.
   · ESCRITORIO → carrusel de una en una, a pantalla completa del banner,
                  con flechas. Tres fotos en fila quedaban pequeñas y frías.
   ======================================== */

/* Móvil (base): mosaico a dos columnas */
.menu-sec-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.menu-sec-fotos img { height: clamp(130px, 30vw, 200px); }

/* Con EXACTAMENTE 3 fotos, la primera va a lo ancho y las otras dos debajo.
   (`:first-child:nth-last-child(3)` sólo casa si hay tres hermanos.)
   OJO: tiene que ir dentro del media query. Suelta, gana por especificidad
   a la regla del carrusel y dejaba la primera foto a 240px en escritorio. */
@media (max-width: 700px) {
  .menu-sec-fotos img:first-child:nth-last-child(3) {
    grid-column: 1 / -1; height: clamp(160px, 38vw, 240px);
  }
}

/* Escritorio: carrusel con scroll-snap. Sin JS ya es deslizable;
   las flechas las añade carta.html. */
@media (min-width: 701px) {
  .menu-sec-fotos {
    display: flex; gap: 0;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .menu-sec-fotos::-webkit-scrollbar { display: none; }
  .menu-sec-fotos img {
    flex: 0 0 100%; scroll-snap-align: start;
    height: clamp(230px, 34vw, 400px);
  }
}

/* Flechas y contador. Sólo existen en escritorio y sólo si hay más de una foto. */
.foto-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer; z-index: 3;
  background: rgba(248, 244, 241, .92); color: var(--text);
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(22, 41, 74, .28);
  transition: background .2s ease, transform .2s ease;
}
.foto-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.foto-nav:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.foto-nav--prev { left: 14px; }
.foto-nav--next { right: 14px; }

.foto-contador {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  display: none;
  background: rgba(22, 41, 74, .55); color: var(--cream);
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  padding: .3rem .65rem; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 701px) {
  .foto-nav { display: flex; }
  .foto-contador { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .foto-nav:hover { transform: translateY(-50%); }
}
.menu-sec-head--photo .menu-sec-title {
  position: absolute; inset: auto 0 0 0;
  padding: 1.6rem 1.6rem 1.3rem;
  background: linear-gradient(to top, rgba(22, 41, 74, .88) 10%, rgba(22, 41, 74, .55) 55%, rgba(22, 41, 74, 0));
  color: var(--cream);
}
.menu-sec-head--photo h2 { color: var(--cream); }
.menu-sec-head--photo .menu-sec-note { color: rgba(248, 244, 241, .82); margin-top: .35rem; }

/* ====== Tabla de platos ====== */
.menu-table { margin-bottom: 1.5rem; }

.menu-table-head,
.menu-row {
  display: grid;
  align-items: baseline;
  gap: 0 1rem;
}

/* Nº de columnas de precio por variante */
.menu-table--p1 .menu-table-head, .menu-table--p1 .menu-row { grid-template-columns: 1fr auto; }
.menu-table--p2 .menu-table-head, .menu-table--p2 .menu-row { grid-template-columns: 1fr repeat(2, 6.5rem); }
.menu-table--p3 .menu-table-head, .menu-table--p3 .menu-row { grid-template-columns: 1fr repeat(3, 6rem); }
.menu-table--p4 .menu-table-head, .menu-table--p4 .menu-row { grid-template-columns: 1fr repeat(4, 5.6rem); }

.menu-table-head {
  padding-bottom: .7rem; margin-bottom: .3rem;
  border-bottom: 2px solid var(--text);
}
.menu-table-head span {
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--text-soft); text-align: right;
}

.menu-row { padding: .85rem 0; border-bottom: 1px dashed var(--line); }
.menu-row:last-child { border-bottom: 0; }

.menu-row-main { min-width: 0; }
.menu-item-name {
  font-family: var(--font-title); font-weight: 600;
  font-size: .95rem; letter-spacing: .04em; text-transform: uppercase;
  margin: 0; display: inline;
}
.menu-item-desc { font-size: .89rem; color: var(--text-soft); margin: .2rem 0 0; line-height: 1.45; }
/* Nombre y descripción en la misma línea cuando la descripción es corta */
.menu-item-name + .menu-item-desc { margin-top: .25rem; }

.menu-row-prices { display: contents; }
.menu-price {
  font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: .95rem; text-align: right; white-space: nowrap;
}
.menu-price:empty::after { content: "—"; color: var(--muted); font-weight: 400; }
/* Precio único dentro de una tabla de varias columnas (p. ej. "Crema del día") */
.menu-price--span2 { grid-column: span 2; }

/* Subtítulo dentro de una tabla (Ron, Vodka, Whisky…) */
.menu-subhead {
  font-family: var(--font-title); font-weight: 600;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand); margin: 1.8rem 0 .2rem;
}
.menu-subhead:first-of-type { margin-top: 1.2rem; }

/* Etiquetas */
.menu-tag {
  display: inline-block; vertical-align: middle;
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  padding: .2rem .45rem; border-radius: 999px; margin-left: .4rem;
  background: var(--highlight); color: var(--text);
}

/* Nota al pie de una tabla */
.menu-note {
  font-size: .85rem; color: var(--text-soft); font-style: italic;
  margin: 1rem 0 0; padding-left: 1rem; border-left: 2px solid var(--line);
}

/* ====== Móvil: los precios pasan a ser chips con su etiqueta ====== */
@media (max-width: 700px) {
  .menu-table-head { display: none; }
  .menu-table--p1 .menu-row,
  .menu-table--p2 .menu-row,
  .menu-table--p3 .menu-row,
  .menu-table--p4 .menu-row { grid-template-columns: 1fr; }

  .menu-row { padding: 1rem 0; }
  .menu-row-prices { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }

  .menu-price {
    background: var(--surface); border-radius: 8px;
    padding: .32rem .6rem; font-size: .84rem; text-align: left;
  }
  .menu-price[data-col]::before {
    content: attr(data-col) " · ";
    font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
    font-weight: 700; color: var(--text-soft);
  }
  .menu-price:empty { display: none; }

  /* En tablas de precio único el chip queda pegado a la derecha */
  .menu-table--p1 .menu-row-prices { justify-content: flex-start; }
}

/* ====== Alérgenos ====== */
.alergenos { background: var(--surface); border-radius: 18px; padding: clamp(1.6rem, 4vw, 2.5rem); }
.alergenos h2 {
  font-family: var(--font-title); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1.25rem; margin: 0 0 .6rem;
}
.alergenos > p { color: var(--text-soft); font-size: .9rem; margin: 0 0 1.6rem; max-width: 60ch; }
.alergenos ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem 1rem;
}
.alergenos li {
  font-size: .82rem; color: var(--text-soft);
  padding: .3rem 0 .3rem 1.1rem; position: relative;
}
.alergenos li::before {
  content: ""; position: absolute; left: 0; top: .95em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand);
}

/* Aviso legal al final de la carta */
.menu-legal {
  text-align: center; font-size: .85rem; color: var(--text-soft);
  margin: 2.5rem auto 0; max-width: 60ch;
}
.menu-legal strong { color: var(--text); }