/* ─────────────────────────────────────────────────────────────────
   TragosChilenos — sistema visual "El fichero del barman"
   Bitter (display) · Hanken Grotesk (UI) · Sometype Mono (datos)
   ───────────────────────────────────────────────────────────────── */

@font-face { font-family:'Bitter'; src:url('../fonts/bitter-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Bitter'; src:url('../fonts/bitter-var-italic.woff2') format('woff2'); font-weight:100 900; font-style:italic; font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; src:url('../fonts/hanken-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Sometype Mono'; src:url('../fonts/sometype-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }

:root {
  --tinta: #17120e;
  --tinta-2: #241b14;
  --tinta-3: #33261b;
  --papel: #f6efe0;
  --papel-2: #efe5cf;
  --papel-3: #e7dabd;
  --granadina: #a91d33;
  --granadina-viva: #d4435a;
  --ambar: #d9a13b;
  --verde-botella: #2e5d4b;
  --tinta-suave: #6b5b4a;
  --papel-suave: #ada599;
  --linea: rgba(246,239,224,.16);
  --linea-papel: rgba(23,18,14,.16);
  --ff-display: 'Bitter', 'Georgia', serif;
  --ff-ui: 'Hanken Grotesk', system-ui, sans-serif;
  --ff-mono: 'Sometype Mono', ui-monospace, monospace;
  --ancho: 1200px;
  --radio-ficha: 4px;
  --sombra-ficha: 0 1px 0 rgba(23,18,14,.12), 0 12px 32px -12px rgba(23,18,14,.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--ff-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--granadina); color: var(--papel); }
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--ambar); text-decoration: none; }
a:hover { color: var(--papel); }
h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 700; line-height: 1.12; margin: 0 0 .5em; }
kbd { font-family: var(--ff-mono); background: rgba(246,239,224,.12); padding: 0 .4em; border-radius: 3px; border: 1px solid var(--linea); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--granadina); color: var(--papel); padding: .75rem 1.25rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

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

/* ─── La barra (header) ─────────────────────────────────────────── */
.barra {
  position: sticky; top: 0; z-index: 90;
  background: rgba(23,18,14,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.barra-inner {
  max-width: var(--ancho); margin: 0 auto; padding: .7rem 1.25rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.marca { display: flex; align-items: center; gap: .7rem; color: var(--papel); }
.marca:hover { color: var(--papel); }
.marca-sello { width: 44px; height: 44px; display: block; color: var(--papel); }
.marca-sello svg { width: 100%; height: 100%; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.05; }
.marca-nombre { font-family: var(--ff-display); font-weight: 800; font-size: 1.3rem; letter-spacing: .01em; }
.marca-nombre em { font-style: normal; color: var(--granadina-viva); }
.marca-tag { font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .32em; text-transform: uppercase; color: var(--papel-suave); }
.nav { display: flex; gap: 1.4rem; margin-left: auto; }
.nav a {
  color: var(--papel); font-weight: 500; font-size: .95rem; letter-spacing: .02em;
  min-height: 44px; display: inline-flex; align-items: center; padding: .35rem 0; border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--granadina-viva); color: var(--papel); }
.barra-acciones { display: flex; align-items: center; gap: .6rem; }
.btn-buscar {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  background: var(--papel); color: var(--tinta); border: 0; cursor: pointer;
  font-family: var(--ff-mono); font-size: .8rem; font-weight: 500; letter-spacing: .08em;
  padding: .55rem 1rem; border-radius: var(--radio-ficha);
}
.btn-buscar svg { width: 16px; height: 16px; }
.btn-buscar:hover { background: var(--ambar); }
.btn-menu {
  display: none; background: none; border: 1px solid var(--linea); color: var(--papel);
  width: 44px; height: 44px; border-radius: var(--radio-ficha); cursor: pointer;
}
.btn-menu svg { width: 20px; height: 20px; }

.temporada { border-top: 1px solid var(--linea); background: var(--tinta-2); }
.temporada a {
  max-width: var(--ancho); min-height: 44px; margin: 0 auto; padding: .45rem 1.25rem;
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ambar);
}
.temporada a:hover { color: var(--papel); }
.temporada svg { width: 14px; height: 14px; }
.temporada strong { color: var(--papel); font-weight: 600; }

/* ─── Menú móvil ────────────────────────────────────────────────── */
.menu-movil[hidden] { display: none; }
.menu-movil {
  position: fixed; inset: 0; z-index: 120; background: var(--tinta);
  display: flex; flex-direction: column; justify-content: center; padding: 2rem 1.5rem;
}
.menu-movil nav { display: flex; flex-direction: column; gap: .25rem; }
.menu-movil a {
  display: flex; align-items: center; gap: .9rem; color: var(--papel);
  font-family: var(--ff-display); font-size: 1.6rem; font-weight: 600;
  padding: .8rem 0; border-bottom: 1px solid var(--linea);
}
.menu-movil a svg { width: 24px; height: 24px; color: var(--granadina-viva); }
.menu-cerrar {
  margin-top: 2rem; align-self: flex-start; display: inline-flex; gap: .5rem; align-items: center;
  background: var(--papel); color: var(--tinta); border: 0; padding: .7rem 1.2rem;
  font-family: var(--ff-mono); border-radius: var(--radio-ficha); cursor: pointer;
}
.menu-cerrar svg { width: 16px; height: 16px; }

/* ─── Búsqueda overlay ──────────────────────────────────────────── */
.busqueda-overlay[hidden] { display: none; }
.busqueda-overlay {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(23,18,14,.8); backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center; padding: 10vh 1rem 1rem;
}
.busqueda-ficha {
  position: relative; width: min(640px, 100%);
  background: var(--papel); color: var(--tinta);
  border-radius: var(--radio-ficha); box-shadow: var(--sombra-ficha);
  padding: 1.75rem 1.5rem 1.25rem;
}
.busqueda-perf, .ficha-perf {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--tinta); box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.5);
}
.busqueda-form { display: flex; align-items: center; gap: .75rem; border-bottom: 2px solid var(--tinta); padding-bottom: .75rem; margin-top: .5rem; }
.busqueda-form svg { width: 22px; height: 22px; flex: none; }
.busqueda-form input {
  flex: 1; border: 0; background: none; font-family: var(--ff-display);
  font-size: 1.35rem; font-weight: 600; color: var(--tinta); outline: none;
}
.busqueda-form input::placeholder { color: var(--tinta-suave); }
.busqueda-cerrar { background: none; border: 0; cursor: pointer; color: var(--tinta-suave); width: 40px; height: 40px; }
.busqueda-cerrar svg { width: 20px; height: 20px; }
.busqueda-ayuda { font-size: .82rem; color: var(--tinta-suave); margin: .8rem 0 0; }
.busqueda-resultados { list-style: none; margin: 1rem 0 0; padding: 0; max-height: 50vh; overflow: auto; }
.busqueda-resultados li a {
  display: flex; align-items: center; gap: .9rem; padding: .7rem .5rem;
  border-top: 1px dashed var(--linea-papel); color: var(--tinta);
}
.busqueda-resultados li a:hover { background: var(--papel-2); }
.busqueda-resultados img { width: 46px; height: 46px; object-fit: cover; border-radius: 3px; }
.busqueda-resultados .br-nombre { font-family: var(--ff-display); font-weight: 700; display: block; }
.busqueda-resultados .br-meta { font-family: var(--ff-mono); font-size: .7rem; color: var(--tinta-suave); }
.busqueda-resultados .br-vacio { padding: 1rem .5rem; color: var(--tinta-suave); }

/* ─── Portada ───────────────────────────────────────────────────── */
.portada {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(46,93,75,.35), transparent 60%),
    radial-gradient(900px 420px at -10% 110%, rgba(169,29,51,.22), transparent 55%),
    var(--tinta);
}
.portada-inner {
  max-width: var(--ancho); margin: 0 auto; padding: 4rem 1.25rem 3.5rem;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center;
}
.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ff-mono); font-size: .75rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ambar); margin: 0 0 1.2rem;
}
.kicker svg { width: 15px; height: 15px; }
.portada h1 {
  font-size: clamp(3.2rem, 8vw, 6.2rem); font-weight: 800; letter-spacing: -.015em;
  color: var(--papel); margin: 0 0 1.4rem; line-height: .98;
}
.portada h1 .punto { color: var(--granadina-viva); }
.portada-bajada { font-size: 1.2rem; color: rgba(246,239,224,.82); max-width: 34rem; margin: 0 0 2rem; }
.portada-bajada strong { color: var(--ambar); }
.portada-acciones { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 2.2rem; }
.portada-datos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.portada-datos li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: rgba(246,239,224,.66); }
.portada-datos svg { width: 17px; height: 17px; color: var(--ambar); }

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--ff-mono); font-weight: 600; font-size: .88rem; letter-spacing: .06em;
  padding: .85rem 1.5rem; border-radius: var(--radio-ficha); cursor: pointer;
  border: 1.5px solid transparent; transition: transform .16s ease, background .16s ease, color .16s ease;
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }
.btn-principal { background: var(--granadina); color: var(--papel); }
.btn-principal:hover { background: var(--granadina-viva); color: var(--papel); }
.btn-fantasma { background: transparent; color: var(--papel); border-color: var(--linea); }
.btn-fantasma:hover { border-color: var(--ambar); color: var(--ambar); }
.btn-linea { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.seccion-oscura .btn-linea, .footer .btn-linea, .btn-linea.en-oscuro { color: var(--papel); border-color: var(--linea); }
.btn-linea:hover { background: var(--tinta); color: var(--papel); }
.seccion-oscura .btn-linea:hover { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.btn-chico { font-size: .76rem; padding: .55rem .9rem; }

/* La ficha destacada de portada: objeto físico sobre la barra */
.portada-ficha {
  position: relative; background: var(--papel); color: var(--tinta);
  border-radius: var(--radio-ficha); box-shadow: var(--sombra-ficha);
  transform: rotate(1.4deg); padding: 1.1rem 1.1rem 1.3rem;
  max-width: 420px; justify-self: end; width: 100%;
}
.portada-ficha-link { color: inherit; display: block; }
.portada-ficha-link:hover { color: var(--granadina); }
.portada-ficha figure { margin: 0; position: relative; }
.portada-foto { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 2px; display: block; }
.sello-emblema {
  position: absolute; top: .7rem; left: .7rem;
  background: var(--granadina); color: var(--papel);
  font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem .7rem; border-radius: 2px;
}
.portada-ficha-datos { padding: 1rem .25rem 0; }
.portada-ficha-datos h2 { font-size: 1.7rem; margin-bottom: .35rem; }
.portada-ficha-datos p { color: var(--tinta-suave); font-size: .95rem; margin: 0 0 .8rem; }

/* Cinta de nombres */
.portada-cinta {
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  overflow: hidden; background: var(--tinta-2);
}
.cinta-track {
  display: flex; gap: 2.2rem; padding: .8rem 0; width: max-content;
  font-family: var(--ff-display); font-weight: 600; font-size: 1.05rem; color: rgba(246,239,224,.55);
  animation: cinta 46s linear infinite;
}
.cinta-track i { color: var(--ambar); font-style: normal; font-size: .7rem; align-self: center; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ─── Secciones ─────────────────────────────────────────────────── */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: 4rem 1.25rem 2rem; }
.seccion-oscura {
  max-width: none; background: var(--tinta-2);
  padding-left: 0;
  padding-right: 0;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.seccion-oscura > * {
  max-width: var(--ancho);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.seccion.seccion-oscura > .fichas-grid {
  max-width: var(--ancho);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.seccion-head { margin-bottom: 2.2rem; }
.seccion-head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; }
.seccion-head p { color: rgba(246,239,224,.66); max-width: 40rem; margin: 0; }
.seccion-mas { margin-top: 2.4rem; }

/* Índice de cajones */
.indice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.indice-grid-grande { grid-template-columns: repeat(4, 1fr); }
.indice-grid-pagina {
  max-width: var(--ancho); margin: 0 auto 3rem; padding: 0 1.25rem;
}
.indice-item {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .3rem;
  background: var(--tinta-2); border: 1px solid var(--linea); border-radius: var(--radio-ficha);
  padding: 0 1.15rem 1.15rem; color: var(--papel);
  transition: border-color .16s ease, transform .16s ease;
}
.seccion:not(.seccion-oscura) .indice-item { background: var(--papel); color: var(--tinta); border-color: transparent; box-shadow: var(--sombra-ficha); }
.indice-item:hover { border-color: var(--granadina-viva); transform: translateY(-3px); color: var(--granadina); }
.seccion:not(.seccion-oscura) .indice-item:hover { color: var(--granadina); }
.indice-arte {
  display: block; height: 7.2rem; margin: 0 -1.15rem .95rem; overflow: hidden;
  background: var(--tinta); border-bottom: 1px solid var(--linea);
}
.indice-arte img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.indice-item:hover .indice-arte img { transform: scale(1.045); }
.indice-icono {
  position: absolute; top: 1rem; left: 1rem; z-index: 1;
  display: grid; place-items: center; width: 2.15rem; height: 2.15rem;
  padding: .34rem; color: var(--granadina-viva); background: rgba(23,18,14,.82);
  border: 1px solid rgba(246,239,224,.22); border-radius: 50%;
}
.indice-icono svg { width: 100%; height: 100%; }
.indice-nombre { font-family: var(--ff-display); font-weight: 700; font-size: 1.15rem; }
.indice-total { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ambar); }
.indice-desc { font-size: .85rem; color: var(--tinta-suave); margin-top: .3rem; }
.seccion-oscura .indice-desc { color: var(--papel-suave); }

/* ─── La ficha (tarjeta de trago) ───────────────────────────────── */
.fichas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.ficha {
  position: relative; background: var(--papel); color: var(--tinta);
  border-radius: var(--radio-ficha); box-shadow: var(--sombra-ficha);
  padding: 1rem 1rem 1.15rem; transition: transform .18s ease, box-shadow .18s ease;
}
.ficha:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 2px 0 rgba(23,18,14,.12), 0 20px 44px -14px rgba(23,18,14,.45); }
.ficha-link { color: inherit; display: block; }
.ficha-link:hover { color: var(--granadina); }
.ficha-img { margin: 0 0 .9rem; }
.ficha-foto { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 2px; display: block; }
.img-placeholder {
  width: 100%; aspect-ratio: 4/3; display: flex; flex-direction: column; gap: .6rem;
  align-items: center; justify-content: center; background: var(--papel-2);
  border: 1.5px dashed var(--linea-papel); border-radius: 2px; color: var(--tinta-suave);
  font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  text-align: center; padding: 1rem;
}
.img-placeholder svg { width: 40px; height: 40px; }
.ficha-nombre { font-size: 1.35rem; margin: 0 0 .15rem; }
.ficha-aka { font-family: var(--ff-mono); font-size: .7rem; color: var(--tinta-suave); margin: 0 0 .5rem; }
.ficha-excerpt { font-size: .92rem; color: var(--tinta-suave); margin: 0 0 .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ficha-datos {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: .65rem 0;
  border-top: 1.5px solid var(--tinta); border-bottom: 1px dashed var(--linea-papel);
  font-family: var(--ff-mono); font-size: .72rem; color: var(--tinta-2);
}
.ficha-datos span { display: inline-flex; align-items: center; gap: .35rem; }
.ficha-datos svg { width: 14px; height: 14px; }
.ficha-pie { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .8rem; }
.ficha-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--ff-mono); font-size: .74rem; font-weight: 600; letter-spacing: .08em;
  color: var(--granadina); text-transform: uppercase;
}
.ficha-cta svg { width: 14px; height: 14px; transition: transform .16s ease; }
.ficha:hover .ficha-cta svg, .guia-card:hover .ficha-cta svg { transform: translateX(4px); }

/* Dificultad: copas llenas + texto */
.dificultad { display: inline-flex; align-items: center; gap: .55rem; }
.dificultad-copas { display: inline-flex; gap: 2.5px; }
.dif-copa { width: 15px; height: 15px; color: var(--tinta); opacity: .28; }
.dif-copa.llena { opacity: 1; color: var(--granadina); }
.dif-copa svg { width: 100%; height: 100%; }
.dificultad-texto { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }

/* Recientes */
.lista-recientes { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2.5rem; }
.lista-recientes li { break-inside: avoid; border-bottom: 1px solid var(--linea); }
.lista-recientes a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .9rem 0; color: var(--papel);
}
.lista-recientes a:hover .reciente-nombre { color: var(--ambar); }
.reciente-nombre { font-family: var(--ff-display); font-weight: 700; font-size: 1.1rem; }
.reciente-meta { font-family: var(--ff-mono); font-size: .7rem; color: var(--tinta-suave); white-space: nowrap; }
.lista-recientes .reciente-meta { color: var(--papel-suave); }

/* Guías */
.guias-grid { max-width: var(--ancho); margin: 0 auto 3rem; padding: 0 1.25rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.seccion .guias-grid, .trago-wrap .guias-grid { max-width: none; margin: 0; padding: 0; }
.guias-grid-grande { grid-template-columns: repeat(2, 1fr); }
.guia-card {
  display: block; background: var(--papel); color: var(--tinta);
  border-radius: var(--radio-ficha); box-shadow: var(--sombra-ficha); padding: 0; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.guia-card:hover { transform: translateY(-4px); color: var(--granadina); box-shadow: 0 2px 0 rgba(23,18,14,.12), 0 20px 44px -14px rgba(23,18,14,.45); }
.guia-card-imagen { margin: 0 0 1.2rem; background: var(--papel-2); }
.guia-card-imagen .guia-imagen-frame, .guia-card-foto { display: block; width: 100%; }
.guia-card-foto { aspect-ratio: 1200 / 630; object-fit: cover; }
.guia-card > .guia-fecha, .guia-card > h2, .guia-card > h3, .guia-card > p:not(.guia-fecha), .guia-card > .ficha-cta {
  margin-left: 1.5rem; margin-right: 1.5rem;
}
.guia-card > .ficha-cta { margin-bottom: 1.5rem; }
.guia-fecha { font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--granadina); margin: 0 0 .7rem; }
.guia-card h3, .guia-card h2 { font-size: 1.35rem; margin-bottom: .5rem; }
.guia-card p:not(.guia-fecha) {
  color: var(--tinta-suave); font-size: .93rem; margin: 0 1.5rem 1rem;
  overflow-wrap: anywhere;
}

/* ─── Interludios: de la receta al evento ──────────────────────── */
.seccion-interstitial {
  max-width: var(--ancho);
  padding-top: 4.5rem;
  padding-bottom: 3rem;
}
.interstitial-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  min-height: 410px;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: var(--radio-ficha);
  box-shadow: 0 1px 0 rgba(23,18,14,.2), 0 22px 54px -28px rgba(0,0,0,.7);
  isolation: isolate;
  color: var(--papel);
  transition: transform .38s cubic-bezier(.16,1,.3,1), box-shadow .38s ease, border-color .38s ease, color .24s ease;
}
.interstitial-cta:hover { transform: translateY(-5px); }
.interstitial-cta:focus-visible { outline: 2.5px solid var(--ambar); outline-offset: 5px; }
.interstitial-cta--calc { background: var(--tinta-2); border-color: rgba(217,161,59,.38); }
.interstitial-cta--calc:hover { border-color: var(--ambar); color: var(--papel); box-shadow: 0 24px 58px -26px rgba(217,161,59,.35); }
.interstitial-cta--calc .interstitial-cta-art { order: 2; }
.interstitial-cta--calc .interstitial-cta-copy { order: 1; }
.interstitial-cta--return { background: var(--papel); color: var(--tinta); border-color: var(--papel-3); }
.interstitial-cta--return:hover { border-color: var(--verde-botella); color: var(--granadina); box-shadow: 0 24px 58px -26px rgba(46,93,75,.45); }
.interstitial-cta-art {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  background: var(--tinta-3);
}
.interstitial-cta-art::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(23,18,14,.84) 0%, rgba(23,18,14,.08) 62%, rgba(23,18,14,.22) 100%);
}
.interstitial-cta--calc .interstitial-cta-art::before {
  background: linear-gradient(270deg, rgba(36,27,20,.9) 0%, rgba(36,27,20,.12) 60%, rgba(23,18,14,.18) 100%);
}
.interstitial-cta--return .interstitial-cta-art::before {
  background: linear-gradient(90deg, rgba(23,18,14,.72) 0%, rgba(23,18,14,.04) 68%, rgba(23,18,14,.16) 100%);
}
.interstitial-cta-art::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: -12%;
  width: 1px;
  background: var(--ambar);
  box-shadow: 0 0 24px 3px rgba(217,161,59,.72);
  opacity: 0;
  transform: translateX(-80px);
  animation: interstitial-scan 8s cubic-bezier(.16,1,.3,1) infinite;
  pointer-events: none;
}
.interstitial-cta--return .interstitial-cta-art::after {
  background: var(--verde-botella);
  box-shadow: 0 0 24px 3px rgba(46,93,75,.62);
}
.interstitial-cta:hover .interstitial-cta-art::after,
.interstitial-cta:focus-visible .interstitial-cta-art::after { animation-duration: 3.6s; }
.interstitial-cta-art .guia-imagen-frame { display: block; width: 100%; height: 100%; }
.interstitial-cta-foto { display: block; width: 100%; height: 100%; min-height: 410px; object-fit: cover; transition: transform .9s cubic-bezier(.16,1,.3,1), filter .4s ease; }
.interstitial-cta:hover .interstitial-cta-foto,
.interstitial-cta:focus-visible .interstitial-cta-foto { transform: scale(1.045); filter: saturate(1.06); }
.interstitial-cta-regla {
  position: absolute;
  z-index: 3;
  right: 1.5rem;
  bottom: 1.35rem;
  left: 1.5rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--papel);
  font-family: var(--ff-mono);
  font-size: .62rem;
  letter-spacing: .09em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(23,18,14,.65);
}
.interstitial-cta-regla::before { content: ''; flex: 1 1 auto; height: 1px; background: currentColor; opacity: .7; }
.interstitial-cta-regla i { display: block; width: 1px; height: 9px; background: currentColor; opacity: .8; }
.interstitial-cta-regla b { font-weight: 500; white-space: nowrap; }
.interstitial-cta-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(2rem, 4vw, 3.25rem);
}
.interstitial-cta-logo {
  display: grid;
  place-items: center start;
  min-height: 66px;
  margin-bottom: 1.7rem;
}
.interstitial-cta-logo img { display: block; max-width: 100%; height: auto; object-fit: contain; }
.interstitial-cta-logo--calc { padding: .55rem .8rem; background: var(--papel-2); border-radius: var(--radio-ficha); }
.interstitial-cta-logo--calc img { width: 190px; }
.interstitial-cta-logo--return { width: 138px; height: 82px; padding: .7rem; background: var(--papel); border-radius: 50%; }
.interstitial-cta-logo--return img { width: 100%; }
.interstitial-cta h2 { max-width: 12ch; margin: 0 0 1rem; font-size: clamp(2rem, 4.2vw, 3.35rem); letter-spacing: -.035em; line-height: 1.02; }
.interstitial-cta p { max-width: 34rem; margin: 0; font-size: 1.02rem; line-height: 1.55; }
.interstitial-cta--calc p { color: rgba(246,239,224,.82); }
.interstitial-cta--return p { color: var(--tinta-suave); }
.interstitial-cta-detalle { margin-top: .8rem !important; font-family: var(--ff-mono); font-size: .72rem !important; letter-spacing: .02em; }
.interstitial-cta--calc .interstitial-cta-detalle { color: var(--ambar); }
.interstitial-cta--return .interstitial-cta-detalle { color: var(--verde-botella); }
.interstitial-cta-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: auto; padding-top: 1.5rem; }
.interstitial-cta-tags i { padding: .32rem .52rem; border: 1px solid currentColor; font-family: var(--ff-mono); font-size: .62rem; font-style: normal; letter-spacing: .08em; text-transform: uppercase; transition: transform .24s ease, background .24s ease, color .24s ease; }
.interstitial-cta--calc .interstitial-cta-tags { color: var(--ambar); }
.interstitial-cta--return .interstitial-cta-tags { color: var(--verde-botella); }
.interstitial-cta:hover .interstitial-cta-tags i:nth-child(1), .interstitial-cta:focus-visible .interstitial-cta-tags i:nth-child(1) { transform: translateY(-2px); }
.interstitial-cta:hover .interstitial-cta-tags i:nth-child(2), .interstitial-cta:focus-visible .interstitial-cta-tags i:nth-child(2) { transform: translateY(-5px); transition-delay: .04s; }
.interstitial-cta:hover .interstitial-cta-tags i:nth-child(3), .interstitial-cta:focus-visible .interstitial-cta-tags i:nth-child(3) { transform: translateY(-2px); transition-delay: .08s; }
.interstitial-cta-accion { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.45rem; font-family: var(--ff-mono); font-size: .73rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.interstitial-cta--calc .interstitial-cta-accion { color: var(--ambar); }
.interstitial-cta--return .interstitial-cta-accion { color: var(--verde-botella); }
.interstitial-cta-accion svg { width: 15px; height: 15px; transition: transform .24s ease; }
.interstitial-cta:hover .interstitial-cta-accion svg, .interstitial-cta:focus-visible .interstitial-cta-accion svg { transform: translateX(5px); }
@keyframes interstitial-scan {
  0%, 58% { opacity: 0; transform: translateX(-80px); }
  66% { opacity: .85; }
  82%, 100% { opacity: 0; transform: translateX(740px); }
}

/* ─── Página de trago ───────────────────────────────────────────── */
.trago-wrap { max-width: var(--ancho); margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.migas { margin-bottom: 1.8rem; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; font-family: var(--ff-mono); font-size: .74rem; }
.migas li { display: flex; align-items: center; gap: .4rem; color: var(--tinta-suave); }
.migas li + li::before { content: '→'; color: var(--ambar); }
.migas a { color: var(--tinta-suave); }
.migas li, .migas a { color: var(--papel-suave); }
.migas a:hover { color: var(--ambar); }

.trago-head {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center;
  margin-bottom: 2.5rem;
}
.trago-titulos h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 800; letter-spacing: -.01em; }
.trago-bajada { font-size: 1.15rem; color: rgba(246,239,224,.8); max-width: 34rem; }
.trago-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--linea); border-radius: 999px; padding: .4rem .95rem;
  font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--papel);
}
.chip svg { width: 13px; height: 13px; color: var(--ambar); }
a.chip:hover { border-color: var(--ambar); color: var(--ambar); }
.chip-quieto { color: var(--tinta-suave); }
.trago-hero { position: relative; margin: 0; background: var(--papel); padding: .9rem; border-radius: var(--radio-ficha); box-shadow: var(--sombra-ficha); transform: rotate(.8deg); }
.trago-foto { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 2px; display: block; }

/* Ficha técnica */
.ficha-tecnica {
  position: relative; background: var(--papel); color: var(--tinta);
  border-radius: var(--radio-ficha); box-shadow: var(--sombra-ficha);
  padding: 1.9rem 1.6rem 1.4rem; margin-bottom: 3rem;
}
.tecnica-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.2rem 1.6rem; margin: 0;
}
.tecnica-grid dt {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--granadina); margin-bottom: .35rem;
}
.tecnica-grid dt svg { width: 16px; height: 16px; }
.tecnica-grid dd { margin: 0; font-family: var(--ff-display); font-weight: 600; font-size: 1.02rem; }

/* Cuerpo del trago */
.trago-cuerpo { display: grid; grid-template-columns: 1fr 380px; gap: 3rem; align-items: start; }
.trago-principal h2 {
  font-size: 1.65rem; margin: 0 0 1rem; display: flex; align-items: center; gap: .6rem;
}
.trago-principal h2 svg { width: 22px; height: 22px; color: var(--granadina-viva); }
.trago-principal section { margin-bottom: 2.8rem; }
.trago-intro p, .trago-historia p, .guia-contenido p { color: rgba(246,239,224,.85); font-size: 1.08rem; }
.trago-intro p:first-child { font-size: 1.25rem; color: var(--papel); }
.trago-intro a, .trago-historia a, .guia-contenido a { color: var(--ambar); border-bottom: 1px dotted var(--ambar); }
.trago-historia .matiz {
  border-top: 1px dashed var(--ambar); border-bottom: 1px dashed var(--ambar);
  padding: .9rem .2rem; margin: 1.2rem 0;
  background: transparent; font-size: .98rem;
}
.trago-historia .matiz strong { color: var(--ambar); }

.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.pasos li {
  display: flex; gap: 1.1rem; padding: 1.05rem 0; border-bottom: 1px dashed var(--linea);
  font-size: 1.05rem; color: rgba(246,239,224,.88);
}
.paso-num {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1.5px solid var(--ambar); border-radius: 50%;
  font-family: var(--ff-mono); font-weight: 700; font-size: .9rem; color: var(--ambar);
}
.trago-errores ul, .trago-tips ul { list-style: none; margin: 0; padding: 0; }
.trago-errores li, .trago-tips li { padding: .7rem 0 .7rem 1.6rem; position: relative; border-bottom: 1px dashed var(--linea); }
.trago-errores li::before { content: '✕'; position: absolute; left: 0; color: var(--granadina-viva); font-weight: 700; }
.trago-tips li::before { content: '◆'; position: absolute; left: 0; color: var(--ambar); font-size: .8em; top: 1rem; }

.variantes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.variante { background: var(--tinta-2); border: 1px solid var(--linea); border-radius: var(--radio-ficha); padding: 1.2rem; }
.variante h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.variante p { color: rgba(246,239,224,.72); font-size: .92rem; margin: 0 0 .6rem; }
.variante a { font-family: var(--ff-mono); font-size: .74rem; display: inline-flex; gap: .35rem; align-items: center; }
.variante a svg { width: 13px; height: 13px; }

.faq-item { border-bottom: 1px solid var(--linea); }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--ff-display); font-weight: 700; font-size: 1.08rem; padding: 1.05rem 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { width: 18px; height: 18px; color: var(--ambar); transition: transform .2s; flex: none; }
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-resp { padding: 0 0 1.1rem; color: rgba(246,239,224,.8); }

/* Ingredientes (aside) */
.trago-aside { position: sticky; top: 108px; }
.ingredientes-ficha {
  position: relative; background: var(--papel); color: var(--tinta);
  border-radius: var(--radio-ficha); box-shadow: var(--sombra-ficha); padding: 1.7rem 1.4rem 1.2rem;
}
.ing-head { margin: .6rem 0 1rem; }
.ing-head h2 { font-size: 1.5rem; margin-bottom: .7rem; }
.para-cuantos { font-family: var(--ff-mono); font-size: .78rem; color: var(--tinta-suave); }
.escalador { display: flex; gap: .35rem; }
.escalador button {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--tinta);
  background: none; font-family: var(--ff-mono); font-weight: 700; cursor: pointer; color: var(--tinta);
  transition: all .15s ease;
}
.escalador button:hover { border-color: var(--granadina); color: var(--granadina); }
.escalador button.activo { background: var(--tinta); color: var(--papel); }
.ingredientes { list-style: none; margin: 0; padding: 0; }
.ingrediente {
  display: grid; grid-template-columns: 34px minmax(72px, auto) 1fr; gap: .8rem; align-items: center;
  padding: .75rem 0; border-bottom: 1px dashed var(--linea-papel);
}
.ingrediente.opcional { opacity: .75; }
.ing-icono { width: 30px; height: 30px; color: var(--verde-botella); }
.ing-icono svg { width: 100%; height: 100%; }
.ing-cant { font-family: var(--ff-mono); font-size: .85rem; }
.ing-cant strong { color: var(--granadina); font-size: 1rem; }
.ing-nombre { font-weight: 600; font-size: .98rem; }
.ing-nombre a { color: var(--tinta); border-bottom: 1px dotted var(--granadina); }
.ing-nombre small { display: block; font-weight: 400; color: var(--tinta-suave); font-size: .8rem; }
.ing-opcional { font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); margin-left: .4rem; }
.ing-acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }

.seccion-relacionados { padding-bottom: 0; }

/* ─── Páginas genéricas ─────────────────────────────────────────── */
.pagina-head { max-width: var(--ancho); margin: 0 auto; padding: 2.5rem 1.25rem 2rem; }
.pagina-head h1 { font-size: clamp(2.4rem, 5.5vw, 3.8rem); font-weight: 800; }
.bajada { font-size: 1.15rem; color: rgba(246,239,224,.75); max-width: 44rem; margin: 0 0 1.4rem; }

/* Filtros */
.filtros { max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; display: flex; flex-direction: column; gap: .7rem; }
.filtros-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.filtro-label {
  display: inline-flex; align-items: center; gap: .4rem; margin-right: .5rem;
  font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave);
}
.filtro-label { color: var(--papel-suave); }
.filtro-label svg { width: 14px; height: 14px; }
.filtro {
  border: 1px solid var(--linea); background: none; color: var(--papel); cursor: pointer;
  font-family: var(--ff-mono); font-size: .76rem; padding: .45rem .95rem; border-radius: 999px;
  transition: all .15s ease;
}
.filtro:hover { border-color: var(--ambar); color: var(--ambar); }
.filtro.activo { background: var(--papel); color: var(--tinta); border-color: var(--papel); font-weight: 700; }
.filtros-conteo { max-width: var(--ancho); margin: 1.2rem auto 0; padding: 0 1.25rem; font-family: var(--ff-mono); font-size: .76rem; color: var(--papel-suave); }
.filtros-vacio { max-width: 560px; margin: 3rem auto; text-align: center; color: var(--papel-suave); }
.filtros-vacio svg { width: 40px; height: 40px; margin-bottom: 1rem; color: var(--granadina-viva); }
.filtros-vacio h2 { color: var(--papel); }
.tragos-grid-pad, .fichas-grid[data-fichas-grid] { max-width: var(--ancho); margin: 1.5rem auto 3rem; padding: 0 1.25rem; }
.fichas-grid { padding: 0 1.25rem; max-width: var(--ancho); margin-left: auto; margin-right: auto; }
.seccion .fichas-grid, .seccion-relacionados .fichas-grid { padding: 0; max-width: none; margin: 0; }
.categoria-editorial { max-width: 760px; margin: 0 auto 2.5rem; padding: 0 1.25rem; }
.categoria-editorial p { color: rgba(246,239,224,.85); font-size: 1.08rem; }
.categoria-editorial a { color: var(--ambar); border-bottom: 1px dotted var(--ambar); }
.categoria-editorial h2 { margin-top: 1.8rem; }

/* Ingredientes grid */
.ingredientes-grid {
  max-width: var(--ancho); margin: 0 auto 3rem; padding: 0 1.25rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.ingrediente-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
  background: var(--papel); color: var(--tinta); border-radius: var(--radio-ficha);
  box-shadow: var(--sombra-ficha); padding: 0 1.2rem 1.2rem; transition: transform .16s ease;
}
.ingrediente-card:hover { transform: translateY(-3px); color: var(--granadina); }
.ing-card-arte {
  display: block; width: calc(100% + 2.4rem); height: 7.2rem; margin: 0 -1.2rem .95rem;
  overflow: hidden; background: var(--papel-2); border-bottom: 1px solid var(--linea-papel);
}
.ing-card-arte img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ingrediente-card:hover .ing-card-arte img { transform: scale(1.045); }
.ing-card-icono {
  position: absolute; top: 1rem; left: 1.2rem; z-index: 1;
  display: grid; place-items: center; width: 2.15rem; height: 2.15rem; padding: .34rem;
  color: var(--verde-botella); background: rgba(246,239,224,.9); border: 1px solid rgba(46,93,75,.28); border-radius: 50%;
}
.ing-card-icono svg { width: 100%; height: 100%; }
.ing-card-nombre { font-family: var(--ff-display); font-weight: 700; font-size: 1.1rem; }
.ing-card-usos { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--granadina); }
.ingrediente-cuerpo {
  max-width: var(--ancho); margin: 0 auto 3rem; padding: 0 1.25rem;
}
.ingrediente-contenido { max-width: 760px; margin: 0 auto; }
.ingrediente-contenido h2 { margin-top: 1.6rem; }
.ingrediente-contenido p, .ingrediente-contenido li { color: rgba(246,239,224,.85); }
.ingrediente-contenido a { color: var(--ambar); border-bottom: 1px dotted var(--ambar); }
.ingrediente-tragos {
  margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: 1.8rem;
  border-top: 1px solid var(--linea);
}
.ingrediente-tragos-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.ingrediente-tragos h2 { margin: 0; font-size: clamp(1.8rem, 3.5vw, 2.65rem); }
.ingrediente-tragos-count {
  flex: 0 0 auto; color: var(--ambar); font-family: var(--ff-mono);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
}
.ingrediente-tragos .fichas-grid { max-width: none; margin: 0; padding: 0; }
.ing-hero-icono svg { width: 18px; height: 18px; }

/* Guía */
.guia { max-width: 760px; margin: 0 auto; }
.guia-head { margin-bottom: 2.2rem; }
.guia-head h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; }
.guia-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-family: var(--ff-mono); font-size: .76rem; color: var(--papel-suave); }
.guia-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.guia-meta svg { width: 14px; height: 14px; }
.guia-hero { margin: 0 0 2.5rem; padding: .7rem; background: var(--papel); border-radius: var(--radio-ficha); box-shadow: var(--sombra-ficha); transform: rotate(-.25deg); }
.guia-imagen-frame { display: block; }
.guia-foto { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 2px; }
.guia-hero figcaption { padding: .55rem .25rem .1rem; color: var(--tinta-suave); font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; }
.guia-contenido h2 { font-size: 1.6rem; margin-top: 2.4rem; }
.guia-contenido h3 { font-size: 1.25rem; margin-top: 1.8rem; }
.guia-contenido ul, .guia-contenido ol { color: rgba(246,239,224,.85); padding-left: 1.3rem; }
.guia-contenido li { margin-bottom: .45rem; }
.guia-contenido blockquote {
  margin: 1.8rem 0; padding: 1.1rem .2rem;
  border-top: 3px double var(--granadina-viva); border-bottom: 3px double var(--granadina-viva);
  background: transparent; font-family: var(--ff-display); font-style: italic; font-size: 1.15rem;
}
.guia-contenido table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: .95rem; }
.guia-contenido th, .guia-contenido td { border: 1px solid var(--linea); padding: .6rem .8rem; text-align: left; }
.guia-contenido th { font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ambar); }
.guia-pie { display: flex; gap: .6rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); }
.guia-pie .btn-linea { color: var(--papel); border-color: var(--linea); }
.guia-pie .btn-linea:hover { background: var(--papel); color: var(--tinta); }

/* Búsqueda página */
.buscar-form {
  display: flex; align-items: center; gap: .8rem; max-width: 620px;
  background: var(--papel); color: var(--tinta); border-radius: var(--radio-ficha);
  padding: .5rem .6rem .5rem 1.1rem; box-shadow: var(--sombra-ficha);
}
.buscar-form > svg { width: 20px; height: 20px; flex: none; }
.buscar-form input { flex: 1; border: 0; background: none; font-size: 1.1rem; font-family: var(--ff-display); font-weight: 600; color: var(--tinta); outline: none; min-width: 0; }

/* 404 */
.pagina-404 { max-width: 620px; margin: 0 auto; padding: 5rem 1.25rem; }
.ficha-404 {
  position: relative; background: var(--papel); color: var(--tinta);
  border-radius: var(--radio-ficha); box-shadow: var(--sombra-ficha);
  padding: 3rem 2.2rem 2.2rem; text-align: center; transform: rotate(-.6deg);
}
.ficha-404 .kicker { color: var(--granadina); }
.ficha-404 h1 { font-size: 5rem; font-weight: 800; margin-bottom: .5rem; }
.ficha-404 p { color: var(--tinta-suave); }
.ficha-404 .buscar-form { margin: 1.6rem auto; box-shadow: none; border: 1.5px solid var(--tinta); }
.e404-links { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }

/* ─── Footer ────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--linea); background: var(--tinta-2); margin-top: 3rem; }
.footer-inner {
  max-width: var(--ancho); margin: 0 auto; padding: 3.5rem 1.25rem 2.5rem;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem;
}
.footer-sello { width: 56px; height: 56px; display: block; color: var(--papel); margin-bottom: .9rem; }
.footer-sello svg { width: 100%; height: 100%; }
.footer-nombre { font-family: var(--ff-display); font-weight: 800; font-size: 1.5rem; margin: 0 0 .2rem; }
.footer-nombre em { font-style: normal; color: var(--granadina-viva); }
.footer-tag { color: var(--ambar); font-family: var(--ff-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 1rem; }
.footer-legal { color: var(--papel-suave); font-size: .82rem; max-width: 34rem; }
.footer-col h2 {
  font-family: var(--ff-mono); font-size: .72rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ambar); margin-bottom: 1.1rem;
}
.footer-col a { display: block; color: rgba(246,239,224,.8); padding: .32rem 0; font-size: .95rem; }
.footer-col a:hover { color: var(--ambar); }
.footer-base {
  border-top: 1px solid var(--linea);
  max-width: var(--ancho); margin: 0 auto; padding: 1.2rem 1.25rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  font-family: var(--ff-mono); font-size: .72rem; color: var(--papel-suave);
}
.footer-base p { margin: 0; }
.footer-18 { color: var(--ambar); font-weight: 700; }

.ir-arriba {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 80;
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--granadina); color: var(--papel); box-shadow: var(--sombra-ficha);
}
.ir-arriba svg { width: 20px; height: 20px; }

/* ─── Animación de aparición (solo si hay JS; sin JS todo visible) ── */
html.js .aparecer { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
html.js .aparecer.visible { opacity: 1; transform: none; }

/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .indice-grid, .indice-grid-grande { grid-template-columns: repeat(2, 1fr); }
  .fichas-grid { grid-template-columns: repeat(2, 1fr); }
  .guias-grid, .guias-grid-grande { grid-template-columns: 1fr; }
  .ingredientes-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .trago-cuerpo { grid-template-columns: 1fr; }
  .trago-aside { position: static; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .btn-menu { display: grid; place-items: center; }
  .btn-buscar span { display: none; }
  .btn-buscar { width: 44px; height: 44px; justify-content: center; padding: 0; }
  .portada-inner { grid-template-columns: 1fr; gap: 2.5rem; padding: 3rem 1.25rem 2.5rem; }
  .portada-ficha { justify-self: center; transform: rotate(0); }
  .trago-head { grid-template-columns: 1fr; gap: 1.8rem; }
  .trago-hero { transform: none; }
  .guia-hero { transform: none; }
  .lista-recientes { columns: 1; }
  .interstitial-cta { grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr); }
  .interstitial-cta-copy { padding: 2rem; }
  .interstitial-cta h2 { font-size: clamp(1.85rem, 5vw, 2.7rem); }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .indice-grid, .indice-grid-grande { grid-template-columns: 1fr; }
  .indice-arte, .ing-card-arte { height: 6.4rem; }
  .fichas-grid { grid-template-columns: 1fr; }
  .ingredientes-grid { grid-template-columns: repeat(2, 1fr); }
  .ingrediente-tragos-head { align-items: flex-start; flex-direction: column; gap: .45rem; }
  .variantes { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .ingrediente { grid-template-columns: 28px minmax(64px, auto) 1fr; gap: .6rem; }
  .tecnica-grid { grid-template-columns: repeat(2, 1fr); }
  .seccion-interstitial { padding-top: 3.3rem; padding-bottom: 2rem; }
  .interstitial-cta { display: flex; flex-direction: column; min-height: 0; }
  .interstitial-cta-art, .interstitial-cta--calc .interstitial-cta-art { order: 0; min-height: 245px; }
  .interstitial-cta-copy, .interstitial-cta--calc .interstitial-cta-copy { order: 1; padding: 1.5rem; }
  .interstitial-cta-foto { min-height: 245px; }
  .interstitial-cta-logo { margin-bottom: 1.35rem; }
  .interstitial-cta-logo--calc img { width: 164px; }
  .interstitial-cta-logo--return { width: 112px; height: 70px; }
  .interstitial-cta h2 { max-width: 13ch; font-size: clamp(1.9rem, 10vw, 2.55rem); }
  .interstitial-cta p { font-size: .96rem; }
  .interstitial-cta-tags { margin-top: 1.5rem; padding-top: 0; }
  .interstitial-cta-regla { right: 1rem; bottom: 1rem; left: 1rem; font-size: .54rem; gap: .4rem; }
}

/* ─── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cinta-track { animation: none; }
  .aparecer { opacity: 1; transform: none; }
  .interstitial-cta, .interstitial-cta:hover { transform: none; transition: none; }
  .interstitial-cta-art::after { animation: none; opacity: 0; }
  .interstitial-cta-foto, .interstitial-cta:hover .interstitial-cta-foto { transform: none; transition: none; }
}

/* ─── Impresión (la ficha sale limpia) ──────────────────────────── */
@media print {
  body { background: #fff; color: #000; }
  .barra, .temporada, .footer, .ir-arriba, .busqueda-overlay, .menu-movil,
  .trago-chips, .ing-acciones, .seccion-relacionados, .migas { display: none !important; }
  .trago-cuerpo { grid-template-columns: 1fr; }
  .ficha-tecnica, .ingredientes-ficha { box-shadow: none; border: 1.5px solid #000; }
  a { color: #000; }
}