/* =============================================================================
   Home Coffee — hoja de estilo única
   1. Tokens · 2. Reset · 3. Utilidades · 4. Tipografía · 5. Componentes
   6. Secciones · 7. Carrito y diálogos · 8. Efectos · 9. Responsive
   10. Movimiento reducido
   ========================================================================== */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  /* Papel */
  --paper:      #F7F2E9;
  --paper-2:    #EFE5D5;
  --card:       #FFFDF8;

  /* Espresso */
  --espresso:   #1A1310;
  --espresso-2: #241A15;
  --espresso-3: #32241C;

  /* Tinta */
  --ink:        #1A1310;
  --ink-soft:   #4A3A31;
  --ink-mute:   #8A7869;

  /* Crema (texto sobre oscuro) */
  --cream:      #F2E9DA;
  --cream-2:    #D8CBB6;
  --cream-3:    #9C8C77;

  /* Acento */
  --accent:      #C1741B;
  --accent-deep: #8F4F0E;
  --accent-soft: rgba(193, 116, 27, 0.12);

  /* Semáforo */
  --ok:    #3F7A4B;
  --warn:  #B4791C;
  --alert: #A3341F;

  /* Líneas */
  --line:       rgba(26, 19, 16, 0.14);
  --line-soft:  rgba(26, 19, 16, 0.08);
  --line-cream: rgba(242, 233, 218, 0.16);

  /* Tipografías */
  --display: "Bodoni Moda", "Didot", Georgia, "Times New Roman", serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:    "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Ritmo */
  --gutter:  clamp(1.15rem, 4vw, 4.5rem);
  --measure: 68ch;
  --radius:  14px;
  --radius-s: 9px;

  /* Curvas */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Capas */
  --z-nav:    60;
  --z-scrim:  80;
  --z-drawer: 90;
  --z-toast:  120;
}

/* =============================================================
   2. Reset y base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.62;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* El atributo `hidden` lo esconde el navegador con `display: none`, pero
   cualquier regla nuestra que fije `display` le gana por ser del autor. Sin
   esta guarda, el sello «Agotado» (`.dish-out { display: grid }`) se pintaba
   sobre las 25 fotos aunque el producto estuviera disponible, y el campo de
   dirección aparecía aun eligiendo recoger. */
[hidden] { display: none !important; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
p  { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.04; letter-spacing: -0.015em; font-weight: 400; }
ul, ol { list-style: none; padding: 0; }
dl, dd { margin: 0; }

::selection { background: var(--accent); color: var(--paper); }

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

/* =============================================================
   3. Utilidades
   ============================================================= */
.skip-link {
  position: fixed; top: -120px; left: 1rem; z-index: 999;
  padding: 0.7rem 1.1rem;
  background: var(--espresso); color: var(--cream);
  border-radius: var(--radius-s); font-size: 0.9rem; font-weight: 500;
  transition: top 0.25s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.muted { color: var(--ink-mute); }

.noscript-note {
  position: relative; z-index: 200;
  margin: 0; padding: 1rem var(--gutter);
  background: var(--espresso); color: var(--cream);
  font-size: 0.92rem; text-align: center;
}
.noscript-note a { color: var(--accent); text-decoration: underline; }

/* =============================================================
   4. Tipografía
   ============================================================= */
.kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1.35rem;
}
.kicker-light { color: var(--cream-3); }

.section-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.section-title em {
  font-style: italic;
  color: var(--accent);
}
.section-title-light { color: var(--cream); }
.section-title-light em { color: var(--accent); }

.lede {
  font-size: clamp(1.03rem, 1.5vw, 1.22rem);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 1.15rem;
}

/* =============================================================
   5. Componentes
   ============================================================= */

/* ---- Botones ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.92rem 1.6rem;
  border-radius: 100px;
  font-size: 0.94rem; font-weight: 500; letter-spacing: 0.01em;
  text-align: center;
  transition: transform 0.35s var(--ease-out), background-color 0.3s var(--ease-out),
              color 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
              box-shadow 0.35s var(--ease-out);
}
.btn-primary {
  background: var(--espresso); color: var(--cream);
  box-shadow: 0 1px 2px rgba(26, 19, 16, 0.16);
}
.btn-ghost {
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn-block { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: var(--accent-deep);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(143, 79, 14, 0.28);
  }
  .btn-ghost:hover {
    border-color: var(--ink);
    background: rgba(26, 19, 16, 0.04);
    transform: translateY(-2px);
  }
}
.btn:active { transform: translateY(0) scale(0.985); }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* ---- Navegación ---- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(247, 242, 233, 0.92);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 30px rgba(26, 19, 16, 0.07);
}
@supports (backdrop-filter: blur(14px)) {
  .nav.is-stuck {
    background: rgba(247, 242, 233, 0.72);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
  }
}

.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.95rem var(--gutter);
}

.nav-logo { display: flex; align-items: center; gap: 0.62rem; }
.nav-logo-mark {
  display: grid; place-items: center;
  width: 33px; height: 33px; border-radius: 8px;
  background: var(--espresso); color: var(--accent);
  font-family: var(--display); font-size: 1.05rem; line-height: 1;
  padding-bottom: 2px;
}
.nav-logo-text {
  font-family: var(--display);
  font-size: 1.12rem; letter-spacing: -0.01em;
}

/* En móvil el menú es una capa a pantalla completa; a partir de 960 px
   vuelve a ser una fila normal dentro de la barra (ver §9). */
.nav-links {
  position: fixed; inset: 0; z-index: 70;
  display: grid; align-content: center; justify-items: center; gap: 1.4rem;
  background: var(--paper);
  transform: translateY(-101%);
  transition: transform 0.55s var(--ease-out);
  visibility: hidden;
}
.nav-links.is-open { transform: none; visibility: visible; }
.nav-links a {
  position: relative;
  font-family: var(--display); font-size: clamp(1.9rem, 8vw, 2.6rem);
  color: var(--ink);
  transition: color 0.28s var(--ease-out);
}

/* Botón hamburguesa: dos trazos que se cruzan al abrir. */
.nav-toggle {
  position: relative; z-index: 80;
  display: grid; align-content: center; gap: 5px;
  width: 38px; height: 38px;
  padding: 0 8px;
}
.nav-toggle-bar {
  display: block; height: 1.5px; width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child  { transform: translateY(-3.25px) rotate(-45deg); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--ink); }
  .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
}

.nav-actions { display: flex; align-items: center; gap: 0.75rem; }

.nav-status {
  display: none; align-items: center; gap: 0.42rem;
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-mute);
}
.nav-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(63, 122, 75, 0.16);
}
.nav-status.is-closed .nav-status-dot {
  background: var(--alert);
  box-shadow: 0 0 0 3px rgba(163, 52, 31, 0.16);
}

/* ---- Botón del carrito ---- */
.cart-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.62rem 1.05rem;
  border-radius: 100px;
  background: var(--espresso); color: var(--cream);
  font-size: 0.88rem; font-weight: 500;
  transition: transform 0.35s var(--ease-out), background-color 0.3s var(--ease-out);
}
.cart-btn-label { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cart-btn:hover { background: var(--accent-deep); transform: translateY(-2px); }
}
.cart-btn.is-bumped { animation: cartBump 0.55s var(--ease-bounce); }
@keyframes cartBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.cart-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 21px; height: 21px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 100px;
  background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  border: 2px solid var(--paper);
}

/* =============================================================
   6. Secciones
   ============================================================= */

/* ---- Portada ---- */
.hero {
  padding: 7.5rem var(--gutter) 3rem;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
}
.hero-grid {
  width: 100%; max-width: 1500px; margin-inline: auto;
  display: grid; gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.7rem, 8.4vw, 6.1rem);
  line-height: 0.96;
  letter-spacing: -0.032em;
  margin-bottom: 1.5rem;
}
.hero-title em { font-style: italic; color: var(--accent); }

.hero-sub {
  font-size: clamp(1.02rem, 1.55vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 40ch;
  margin-bottom: 2.1rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 3rem; }

.hero-facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--line);
}
.hero-facts dt {
  font-family: var(--mono); font-size: 0.63rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 0.35rem;
}
.hero-facts dd { font-size: 0.87rem; color: var(--ink-soft); line-height: 1.4; }

.hero-figure { position: relative; margin: 0; }
.hero-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  filter: saturate(1.04) contrast(1.02);
  will-change: transform;
}

.hero-card {
  position: absolute; left: 50%; bottom: -1.4rem;
  transform: translateX(-50%);
  width: min(300px, 86%);
  display: grid; gap: 0.28rem;
  padding: 1.05rem 1.25rem;
  border-radius: var(--radius-s);
  background: var(--card);
  border: 1px solid var(--line-soft);
  box-shadow: 0 18px 44px rgba(26, 19, 16, 0.16);
}
.hero-card-kicker {
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--accent);
}
.hero-card-title { font-family: var(--display); font-weight: 600; font-size: 1.14rem; }
.hero-card-note { font-size: 0.79rem; color: var(--ink-mute); line-height: 1.45; }

/* ---- Cinta ---- */
.marquee {
  overflow: hidden;
  padding: 1.15rem 0;
  margin-top: 3.2rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.marquee-track {
  display: flex; align-items: center; gap: 1.6rem;
  width: max-content;
  animation: marqueeSlide 42s linear infinite;
}
.marquee-track span {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
}
.marquee-dot { color: var(--accent); }
@keyframes marqueeSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- La casa ---- */
.casa {
  background: var(--espresso);
  color: var(--cream);
  padding: clamp(3.4rem, 6.4vw, 5.6rem) var(--gutter);
}
.casa-inner {
  max-width: 1400px; margin-inline: auto;
  display: grid; gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.casa-figure { margin: 0; }
.casa-figure img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius);
  filter: saturate(0.95) brightness(0.95);
}
.casa-copy .section-title { color: var(--cream); }
.casa-copy .lede { color: var(--cream-2); max-width: 52ch; }
.casa-copy > p { color: var(--cream-3); max-width: 56ch; line-height: 1.72; }

.casa-pillars {
  display: grid; gap: 1.7rem;
  margin-top: 2.8rem; padding-top: 2.4rem;
  border-top: 1px solid var(--line-cream);
}
.pillar-num {
  display: block;
  font-family: var(--display); font-size: 1.05rem;
  color: var(--accent); margin-bottom: 0.45rem;
}
.casa-pillars h3 {
  font-family: var(--sans); font-size: 0.97rem; font-weight: 600;
  color: var(--cream); margin-bottom: 0.3rem; letter-spacing: 0;
}
.casa-pillars p { font-size: 0.87rem; color: var(--cream-3); line-height: 1.55; }

/* ---- Carta ---- */
.carta { padding: clamp(3.4rem, 6.4vw, 5.6rem) var(--gutter) 3.4rem; }
.carta-head { max-width: 1400px; margin: 0 auto 2.6rem; }

.store-closed {
  margin-top: 1.6rem; padding: 0.95rem 1.2rem;
  border-radius: var(--radius-s);
  background: rgba(163, 52, 31, 0.08);
  border: 1px solid rgba(163, 52, 31, 0.24);
  color: var(--ink-soft); font-size: 0.9rem;
  max-width: 52ch;
}

.carta-filters {
  position: sticky; top: 64px; z-index: 20;
  max-width: 1400px; margin: 0 auto 2.2rem;
  display: flex; gap: 0.5rem;
  overflow-x: auto; overflow-y: visible;
  padding: 0.7rem 0;
  scrollbar-width: none;
  background: linear-gradient(var(--paper) 62%, rgba(247, 242, 233, 0));
}
.carta-filters::-webkit-scrollbar { display: none; }

.filter {
  flex: 0 0 auto;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--card);
  font-size: 0.86rem; color: var(--ink-soft);
  white-space: nowrap;
  transition: background-color 0.28s var(--ease-out), color 0.28s var(--ease-out),
              border-color 0.28s var(--ease-out), transform 0.28s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .filter:hover { border-color: var(--ink-mute); transform: translateY(-1px); }
}
.filter.is-active {
  background: var(--espresso); color: var(--cream); border-color: var(--espresso);
}

.menu-grid {
  max-width: 1400px; margin-inline: auto;
  display: grid; gap: clamp(1.1rem, 2vw, 1.8rem);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.dish {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out),
              border-color 0.45s var(--ease-out);
}
.dish.is-hidden { display: none; }
@media (hover: hover) and (pointer: fine) {
  .dish:hover {
    transform: translateY(-5px);
    border-color: rgba(193, 116, 27, 0.36);
    box-shadow: 0 20px 42px rgba(26, 19, 16, 0.13);
  }
  .dish:hover .dish-media img { transform: scale(1.06); filter: saturate(1.14); }
}

.dish-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-2);
}
.dish-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.04);
  transition: transform 0.75s var(--ease-out), filter 0.55s var(--ease-out);
}

.dish-badge {
  position: absolute; top: 0.75rem; left: 0.75rem;
  padding: 0.3rem 0.62rem;
  border-radius: 100px;
  background: var(--card); color: var(--accent-deep);
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.11em; text-transform: uppercase;
  box-shadow: 0 3px 12px rgba(26, 19, 16, 0.14);
}

.dish-out {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(26, 19, 16, 0.62);
  color: var(--cream);
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.19em; text-transform: uppercase;
}

.dish-body {
  display: flex; flex-direction: column; flex: 1;
  padding: 1.05rem 1.15rem 1.15rem;
}
.dish-name {
  font-family: var(--display); font-weight: 600; font-size: 1.16rem;
  line-height: 1.18; margin-bottom: 0.38rem;
}
.dish-desc {
  font-size: 0.83rem; line-height: 1.5; color: var(--ink-mute);
  margin-bottom: 1.05rem;
}
.dish-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
  margin-top: auto;
}
.dish-price {
  font-family: var(--mono); font-size: 0.95rem; font-weight: 500;
  color: var(--ink);
}
.dish-add {
  display: inline-flex; align-items: center; gap: 0.32rem;
  padding: 0.46rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.82rem; font-weight: 500;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out),
              border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .dish-add:hover {
    background: var(--espresso); color: var(--cream);
    border-color: var(--espresso); transform: translateY(-1px);
  }
}
.dish-add:active { transform: scale(0.95); }
.dish.is-out .dish-add { opacity: 0.4; pointer-events: none; }
.dish.is-out .dish-media img { filter: grayscale(0.75); }

.carta-foot {
  max-width: 1400px; margin: 2.6rem auto 0;
  font-size: 0.8rem; color: var(--ink-mute);
}

/* ---- El café ---- */
.origen {
  position: relative;
  padding: clamp(3.4rem, 6.4vw, 5.6rem) var(--gutter);
  background: var(--espresso);
  overflow: hidden;
}
.origen-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.24;
  filter: grayscale(0.35);
}
.origen::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26, 19, 16, 0.82), rgba(26, 19, 16, 0.94));
}
.origen-inner {
  position: relative; z-index: 2;
  max-width: 1400px; margin-inline: auto;
}

.origen-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  margin: 3rem 0 2.6rem;
  padding-top: 2.6rem;
  border-top: 1px solid var(--line-cream);
}
.stat-num {
  display: block;
  font-family: var(--display); font-size: clamp(2.1rem, 5vw, 3.3rem);
  line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  display: block; margin-top: 0.45rem;
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-3);
}
.origen-note {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  line-height: 1.5; color: var(--cream-2);
  max-width: 44ch;
}

/* ---- Visítanos ---- */
.visitanos { padding: clamp(3.4rem, 6.4vw, 5.6rem) var(--gutter); }
.visitanos-inner {
  max-width: 1400px; margin-inline: auto;
  display: grid; gap: clamp(2.4rem, 5vw, 4.5rem);
  align-items: center;
}
.hours {
  display: grid; gap: 0.7rem;
  margin: 2rem 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hours > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.hours dt { font-size: 0.92rem; color: var(--ink-soft); }
.hours dd { font-family: var(--mono); font-size: 0.86rem; color: var(--ink); }

.visitanos-contact { margin-bottom: 2rem; display: grid; gap: 0.9rem; }
.visitanos-contact a {
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .visitanos-contact a:hover { color: var(--accent); border-color: var(--accent); }
}
.visitanos-figure { margin: 0; }
.visitanos-figure img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius);
}

/* ---- Pie ---- */
.footer {
  background: var(--espresso); color: var(--cream-3);
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) 2.5rem;
}
.footer-inner {
  max-width: 1400px; margin-inline: auto;
  display: grid; gap: 2.2rem;
}
.footer-brand { display: flex; align-items: flex-start; gap: 0.9rem; }
.footer-brand .nav-logo-mark { background: var(--espresso-3); flex: 0 0 auto; }
.footer-tag {
  font-family: var(--display); font-size: 1.02rem;
  line-height: 1.42; color: var(--cream-2);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.footer-links a {
  font-size: 0.87rem;
  transition: color 0.28s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover { color: var(--accent); }
}
.footer-legal { font-size: 0.76rem; line-height: 1.65; }
.footer-legal .muted { color: var(--cream-3); opacity: 0.72; }
.footer-legal a { text-decoration: underline; text-underline-offset: 2px; }

/* =============================================================
   7. Carrito y diálogos
   ============================================================= */
.drawer-scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  background: rgba(26, 19, 16, 0.42);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.drawer-scrim.is-open { opacity: 1; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer);
  width: min(430px, 100%);
  display: flex; flex-direction: column;
  background: var(--paper);
  border-left: 1px solid var(--line-soft);
  box-shadow: -18px 0 60px rgba(26, 19, 16, 0.16);
  transform: translateX(102%);
  transition: transform 0.5s var(--ease-out);
  visibility: hidden;
}
.drawer.is-open { transform: translateX(0); visibility: visible; }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem 1.4rem;
  border-bottom: 1px solid var(--line-soft);
}
.drawer-head h2 { font-family: var(--display); font-size: 1.42rem; }
.drawer-close {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.5rem; line-height: 1; color: var(--ink-mute);
  transition: background-color 0.28s var(--ease-out), color 0.28s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .drawer-close:hover { background: var(--paper-2); color: var(--ink); }
}

.drawer-body { flex: 1; overflow-y: auto; padding: 1.15rem 1.4rem; }
.cart-empty { text-align: center; padding: 3.5rem 1rem; color: var(--ink-soft); font-size: 0.93rem; }

.cart-line {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 0.85rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line img {
  width: 56px; height: 66px; object-fit: cover;
  border-radius: var(--radius-s);
}
.cart-line-name { font-size: 0.92rem; font-weight: 500; line-height: 1.3; margin-bottom: 0.15rem; }
.cart-line-unit { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-mute); }
.cart-line-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 0.5rem; }
.cart-line-total { font-family: var(--mono); font-size: 0.88rem; font-weight: 500; }

.qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 100px;
  overflow: hidden;
}
.qty button {
  width: 27px; height: 27px;
  display: grid; place-items: center;
  font-size: 0.95rem; line-height: 1; color: var(--ink-soft);
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .qty button:hover { background: var(--espresso); color: var(--cream); }
}
.qty span {
  min-width: 26px; text-align: center;
  font-family: var(--mono); font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.drawer-foot {
  padding: 1.15rem 1.4rem 1.4rem;
  border-top: 1px solid var(--line-soft);
  background: var(--card);
}
.cart-totals { margin-bottom: 1rem; display: grid; gap: 0.42rem; }
.cart-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: 0.89rem; color: var(--ink-soft);
}
.cart-row span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cart-row-total {
  padding-top: 0.6rem; margin-top: 0.25rem;
  border-top: 1px solid var(--line-soft);
  font-size: 1.05rem; font-weight: 600; color: var(--ink);
}

/* ---- Diálogos ---- */
.modal {
  width: min(620px, calc(100vw - 2rem));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(26, 19, 16, 0.3);
  overflow: hidden;
}
.modal-narrow { width: min(430px, calc(100vw - 2rem)); }
.modal::backdrop { background: rgba(26, 19, 16, 0.5); }
.modal[open] { animation: modalIn 0.42s var(--ease-out); }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.checkout { display: flex; flex-direction: column; max-height: inherit; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}
.modal-head h2 { font-family: var(--display); font-size: 1.45rem; }
.modal-body { padding: 1.35rem 1.5rem; overflow-y: auto; display: grid; gap: 1.15rem; }
.modal-foot {
  display: flex; gap: 0.7rem; justify-content: flex-end;
  padding: 1.1rem 1.5rem 1.4rem;
  border-top: 1px solid var(--line-soft);
  background: var(--card);
}

.field { display: grid; gap: 0.42rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > span, .field legend {
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-mute);
  padding: 0;
}
.field input[type="text"],
.field input[type="tel"],
.field textarea {
  width: 100%;
  padding: 0.72rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--card);
  font-size: 0.94rem;
  transition: border-color 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(138, 120, 105, 0.65); }
.field textarea { resize: vertical; min-height: 62px; }
.field-row { display: grid; gap: 1.15rem; }

.choice-row { display: grid; gap: 0.6rem; margin-top: 0.2rem; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input {
  position: absolute; opacity: 0;
  width: 1px; height: 1px; margin: 0;
}
.choice > span {
  display: block;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--card);
  transition: border-color 0.28s var(--ease-out), background-color 0.28s var(--ease-out);
}
.choice strong { display: block; font-size: 0.9rem; font-weight: 500; }
.choice small { display: block; font-size: 0.76rem; color: var(--ink-mute); margin-top: 0.1rem; }
.choice input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.checkout-summary {
  padding: 1rem 1.1rem;
  border-radius: var(--radius-s);
  background: var(--paper-2);
  display: grid; gap: 0.42rem;
}

.form-error {
  padding: 0.8rem 1rem;
  border-radius: var(--radius-s);
  background: rgba(163, 52, 31, 0.09);
  border: 1px solid rgba(163, 52, 31, 0.28);
  color: #7E2716; font-size: 0.87rem;
}

/* ---- Confirmación y seguimiento ---- */
.confirm { padding: 2.2rem 1.6rem 1.6rem; text-align: center; }
.confirm-mark { color: var(--ok); display: grid; place-items: center; margin-bottom: 1.1rem; }
.confirm-circle {
  stroke-dasharray: 145; stroke-dashoffset: 145;
  animation: drawCircle 0.7s var(--ease-out) forwards;
}
.confirm-check {
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: drawCheck 0.45s var(--ease-out) 0.55s forwards;
}
@keyframes drawCircle { to { stroke-dashoffset: 0; } }
@keyframes drawCheck  { to { stroke-dashoffset: 0; } }

.confirm h2 { font-family: var(--display); font-size: 1.65rem; margin-bottom: 0.5rem; }
.confirm-code { font-size: 0.94rem; color: var(--ink-soft); margin-bottom: 0.35rem; }
.confirm-code strong { font-family: var(--mono); font-size: 1.15rem; color: var(--accent-deep); }
.confirm-note { font-size: 0.87rem; color: var(--ink-mute); margin-bottom: 1.5rem; }

.track {
  padding: 1.1rem 0 0.4rem;
  border-top: 1px solid var(--line-soft);
  margin-bottom: 1.4rem;
}
.track-steps { display: grid; gap: 0.72rem; text-align: left; }
.track-steps li {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.87rem; color: var(--ink-mute);
  transition: color 0.4s var(--ease-out);
}
.track-steps li span {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--line);
  background: transparent;
  transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.track-steps li.is-done { color: var(--ink-soft); }
.track-steps li.is-done span { background: var(--ok); border-color: var(--ok); }
.track-steps li.is-current { color: var(--ink); font-weight: 500; }
.track-steps li.is-current span { background: var(--accent); border-color: var(--accent); }

.track-live {
  display: flex; align-items: center; gap: 0.45rem;
  margin-top: 0.9rem;
  font-family: var(--mono); font-size: 0.63rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: livePulse 1.9s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}

/* ---- Avisos ---- */
.toast-region {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: var(--z-toast);
  transform: translateX(-50%);
  display: grid; gap: 0.5rem;
  width: min(420px, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  padding: 0.82rem 1.1rem;
  border-radius: var(--radius-s);
  background: var(--espresso); color: var(--cream);
  font-size: 0.88rem; line-height: 1.4;
  box-shadow: 0 14px 40px rgba(26, 19, 16, 0.3);
  animation: toastIn 0.4s var(--ease-out);
}
.toast.is-error { background: #7E2716; }
.toast.is-out { animation: toastOut 0.35s var(--ease-out) forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(14px); } }
@keyframes toastOut { to   { opacity: 0; transform: translateY(10px); } }

/* =============================================================
   8. Efectos
   ============================================================= */

/* Aparición al hacer scroll */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Red de seguridad: si un elemento lleva .reveal y además texto partido,
   nunca debe quedarse invisible. Esta regla gana por ir declarada después. */
.reveal[data-split] { opacity: 1; transform: none; }

/* Si no hay JavaScript, todo se ve igualmente. */
.no-js .reveal { opacity: 1; transform: none; }

/* El vuelo del producto al carrito: la interacción firma de la tienda. */
.fly-ghost {
  position: fixed; z-index: 200;
  width: 74px; height: 88px;
  object-fit: cover;
  border-radius: var(--radius-s);
  box-shadow: 0 12px 30px rgba(26, 19, 16, 0.3);
  pointer-events: none;
  will-change: transform, opacity;
}

/* =============================================================
   9. Responsive
   ============================================================= */
@media (min-width: 540px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .choice-row { grid-template-columns: 1fr 1fr; }
  .cart-btn-label { display: inline; }
}

@media (min-width: 720px) {
  .origen-stats { grid-template-columns: repeat(4, 1fr); }
  .casa-pillars { grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
  .footer-inner {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .footer-legal { grid-column: 1 / -1; padding-top: 1.6rem; border-top: 1px solid var(--line-cream); }
}

@media (min-width: 960px) {
  /* El menú vuelve a ser una fila dentro de la barra. */
  .nav-links {
    position: static; inset: auto; z-index: auto;
    display: flex; gap: 1.9rem;
    background: none;
    transform: none; visibility: visible;
  }
  .nav-links a { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); }
  .nav-toggle { display: none; }
  .nav-status { display: inline-flex; }
  html { scroll-padding-top: 100px; }

  .hero-grid { grid-template-columns: 1.06fr 0.94fr; }
  .hero-facts { max-width: 520px; }

  .casa-inner { grid-template-columns: 0.82fr 1.18fr; }
  .visitanos-inner { grid-template-columns: 1fr 1.1fr; }

  .carta-filters { top: 76px; }
}

@media (min-width: 1280px) {
  .menu-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .hero-card { left: auto; right: 1.8rem; transform: none; bottom: -1.8rem; }
}

/* =============================================================
   10. Movimiento reducido
   Solo se apaga lo intrusivo. Los micro-gestos (hover, aparición,
   desplazamiento suave) siguen funcionando: Windows trae esta
   preferencia activada de fábrica en muchos equipos y apagarlo
   todo dejaría la web muerta sin que nadie lo haya pedido.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; transform: none; }
  .live-dot { animation: none; }
  .hero-figure img { transform: none !important; }
}

/* =============================================================
   Uso táctil: teléfono y tablet
   -------------------------------------------------------------
   Se separa por `pointer: coarse` y no por ancho: una tablet de 1024 px se
   toca igual que un teléfono, y un portátil de 1024 px no debe engordar.
   ============================================================= */
@media (pointer: coarse) {
  /* Safari en iPhone amplía la página al enfocar un campo de menos de 16 px
     y se queda ampliada: el cliente acaba el pedido a ciegas. */
  .field input[type="text"],
  .field input[type="tel"],
  .field textarea { font-size: 16px; padding: 0.8rem 0.9rem; }

  /* Blancos de toque de 44 px en todo lo que se pulsa para comprar. */
  .nav-toggle   { width: 44px; height: 44px; }
  .opcion > span   { min-height: 44px; display: flex; align-items: center; }
  .opcion-select   { min-height: 44px; }
  .faq-item summary { min-height: 44px; }
  .nav-logo     { min-height: 44px; }
  .cart-btn     { min-height: 44px; padding: 0.7rem 1.05rem; }
  .filter       { min-height: 44px; padding: 0.6rem 1.05rem; }
  .dish-add     { min-height: 44px; padding: 0.6rem 1.1rem; }
  .drawer-close { width: 44px; height: 44px; }
  .footer-links a { display: inline-block; padding: 0.68rem 0; }

  /* Teléfono y correo del local: en el móvil son botones de llamada. */
  a[href^="tel:"], a[href^="mailto:"] { display: inline-block; padding: 0.6rem 0; }
  .muted a { display: inline-block; padding: 0.6rem 0; }

  /* El paso de cantidad iba en 27 px. Se queda en 40 de ancho para no
     estrangular el nombre del producto en una línea de carrito de 329 px. */
  .qty button { width: 40px; height: 44px; font-size: 1.05rem; }
  .qty span   { min-width: 30px; font-size: 0.88rem; }

  /* Etiquetas diminutas: 9.6 px no se leen con el móvil en la mano. */
  .hero-card-kicker, .dish-badge { font-size: 0.72rem; }
  .stat-label, .track-live       { font-size: 0.74rem; }

  /* Sin destello azul al tocar y sin la espera del doble toque. */
  button, a, .choice, .filter, .dish-add { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
}

/* ---- Muescas y barra de gestos (iPhone, Android con gestos) ---- */
@supports (padding: max(0px)) {
  .nav-inner   { padding-left:  max(var(--gutter), env(safe-area-inset-left));
                 padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  .drawer-foot { padding-bottom: max(1.4rem, env(safe-area-inset-bottom)); }
}

/* =============================================================
   Café en grano
   ============================================================= */
.grano { padding: clamp(3.4rem, 6.4vw, 5.6rem) var(--gutter) 3.4rem; background: var(--paper-2); }
.grano-head { max-width: 1400px; margin: 0 auto 2.4rem; }

/* Frescura y logística: la garantía explícita, no enterrada en un párrafo. */
.frescura {
  max-width: 1400px; margin: 0 auto 3rem;
  display: grid; gap: 1px; grid-template-columns: 1fr;
  background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden;
}
.frescura li { padding: 1.15rem 1.3rem; background: var(--card); display: grid; gap: 0.3rem; align-content: start; }
.frescura-k {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
.frescura strong { font-size: 1.02rem; font-weight: 500; }
.frescura-d { font-size: 0.83rem; color: var(--ink-mute); line-height: 1.5; }

.grano-grid { max-width: 1400px; margin: 0 auto; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.grano-vacio { padding: 2.5rem 0; text-align: center; color: var(--ink-mute); }

.bag {
  display: grid; grid-template-columns: 1fr;
  background: var(--card);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden;
}
.bag-media { position: relative; background: var(--paper-2); }
.bag-media img { width: 100%; height: 100%; object-fit: cover; }
.bag-body { padding: 1.4rem 1.4rem 1.5rem; display: grid; gap: 0.75rem; align-content: start; }

.bag-name { font-family: var(--display); font-weight: 600; font-size: 1.55rem; }
.bag-origen {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
}
.bag-desc { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.55; }

.bag-notas { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bag-notas li {
  padding: 0.3rem 0.7rem; border-radius: 100px;
  background: var(--accent-soft); color: var(--accent-deep); font-size: 0.76rem;
}

/* Ficha técnica: origen, finca, altitud, variedad, proceso, tueste, método. */
.ficha {
  display: grid; gap: 0.55rem;
  padding: 0.95rem 0; margin: 0.15rem 0;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.ficha > div { display: grid; grid-template-columns: 8.2rem 1fr; gap: 0.7rem; align-items: baseline; }
.ficha dt {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-mute);
}
.ficha dd { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.45; }

.perfil { display: grid; gap: 0.4rem; }
.perfil-fila {
  display: grid; grid-template-columns: 8.2rem 1fr; gap: 0.7rem; align-items: center;
  font-size: 0.78rem; color: var(--ink-mute);
}
.perfil-escala { display: flex; gap: 0.28rem; }
.perfil-punto { width: 22px; height: 5px; border-radius: 100px; background: var(--line); }
.perfil-punto.is-on { background: var(--accent); }

.bag-tueste { font-size: 0.83rem; color: var(--ink-soft); }
.bag-tueste strong { color: var(--ink); font-weight: 500; }

.bag-opciones { display: grid; gap: 0.85rem; margin-top: 0.2rem; }
.opcion-grupo { border: 0; padding: 0; margin: 0; display: grid; gap: 0.45rem; min-width: 0; }
.opcion-grupo legend, .opcion-legend {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-mute); padding: 0;
}
.opcion-fila { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.opcion { position: relative; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion > span {
  display: block; padding: 0.55rem 1rem;
  border: 1px solid var(--line); border-radius: 100px;
  font-size: 0.85rem; color: var(--ink-soft);
  transition: border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}
.opcion input:checked + span {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent-deep); font-weight: 500;
}
.opcion input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.opcion-select {
  width: 100%; padding: 0.62rem 0.85rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--paper); font-size: 0.88rem; color: var(--ink);
}
.opcion-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.bag-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 0.35rem; padding-top: 0.95rem;
  border-top: 1px solid var(--line-soft);
}
.bag-price { font-family: var(--mono); font-size: 1.32rem; font-weight: 500; }

/* Tamaño y molido elegidos, bajo el nombre en el carrito. */
.cart-line-variant { font-size: 0.76rem; color: var(--accent-deep); margin-top: 0.1rem; }

/* =============================================================
   Preguntas frecuentes
   ============================================================= */
.faq { padding: clamp(3.4rem, 6.4vw, 5.6rem) var(--gutter); }
.faq-inner { max-width: 1400px; margin: 0 auto; display: grid; gap: 2.4rem; grid-template-columns: 1fr; }
.faq-head .btn { margin-top: 1.4rem; }
.faq-list { display: grid; gap: 0.7rem; align-content: start; }

.faq-item {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--card); overflow: hidden;
}
.faq-item summary {
  padding: 1.05rem 1.2rem;
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 0.97rem; font-weight: 500;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: 0 0 auto;
  font-family: var(--mono); font-size: 1.2rem; color: var(--accent);
  transition: transform 0.3s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 1.2rem 1.15rem; font-size: 0.89rem; color: var(--ink-soft); line-height: 1.6; }

/* Aviso de pago seguro dentro del checkout. */
.pago-seguro {
  display: flex; gap: 0.55rem; align-items: flex-start;
  padding: 0.8rem 0.95rem; margin-top: 0.2rem;
  border-radius: var(--radius-s);
  background: rgba(78, 155, 94, 0.1);
  border: 1px solid rgba(78, 155, 94, 0.28);
  font-size: 0.8rem; color: var(--ink-soft); line-height: 1.5;
}
.pago-seguro svg { flex: 0 0 auto; margin-top: 0.1rem; color: #3F7A4C; }

/* =============================================================
   Botón de contacto flotante
   ============================================================= */
.contacto-float {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 60;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.8rem 1.1rem; border-radius: 100px;
  background: var(--espresso); color: var(--cream);
  box-shadow: 0 14px 34px rgba(26, 19, 16, 0.28);
  font-size: 0.88rem; font-weight: 500;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .contacto-float:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(26, 19, 16, 0.36); }
}
@supports (padding: max(0px)) {
  .contacto-float { bottom: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-bottom)); }
}

/* =============================================================
   Grano y ayuda en pantallas grandes
   ============================================================= */
@media (min-width: 720px) {
  .frescura { grid-template-columns: repeat(2, 1fr); }
  .bag { grid-template-columns: 240px 1fr; }
}
@media (min-width: 960px) {
  .frescura { grid-template-columns: repeat(4, 1fr); }
  .grano-grid { grid-template-columns: repeat(2, 1fr); }
  .bag { grid-template-columns: 1fr; }
  .bag-media { aspect-ratio: 4 / 3; }
  .faq-inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3.5rem; }
}
@media (min-width: 1280px) {
  .bag { grid-template-columns: 260px 1fr; }
  .bag-media { aspect-ratio: auto; }
}

/* En el móvil la bolsa no necesita media pantalla. */
@media (max-width: 719px) {
  .bag-media { aspect-ratio: 16 / 10; }
  .ficha > div, .perfil-fila { grid-template-columns: 7rem 1fr; }
  .contacto-float-text { display: none; }
  .contacto-float { padding: 0.85rem; }
}

/* =============================================================
   Esqueleto de carga del café en grano
   -------------------------------------------------------------
   Un hueco gris que late en vez de un texto solo: el cliente ve dónde va a
   aparecer cada ficha antes de que llegue la respuesta de la API.
   ============================================================= */
.bag-esqueleto { pointer-events: none; }
.bag-esqueleto .bag-media { background: var(--paper-2); min-height: 190px; }
.bag-esqueleto .bag-body { gap: 0.7rem; }

.hueso {
  display: block; height: 12px; border-radius: 100px;
  background: linear-gradient(
    90deg,
    var(--paper-2) 0%,
    rgba(255, 253, 248, 0.9) 42%,
    var(--paper-2) 84%
  );
  background-size: 260% 100%;
  animation: latido 1.5s var(--ease-soft) infinite;
}
.hueso-titulo { height: 24px; width: 62%; }
.hueso-corto  { width: 45%; }

@keyframes latido {
  0%   { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}

.grano-cargando {
  grid-column: 1 / -1;
  padding: 0.4rem 0 0;
  text-align: center;
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
}

/* =============================================================
   Movimiento de las fichas de café
   ============================================================= */
.bag {
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out),
              border-color 0.45s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .bag:hover {
    transform: translateY(-3px);
    border-color: var(--line);
    box-shadow: 0 16px 44px rgba(26, 19, 16, 0.1);
  }
  .bag:hover .bag-media img { transform: scale(1.035); }
}
.bag-media { overflow: hidden; }
.bag-media img { transition: transform 0.7s var(--ease-out); }

/* El precio cambia contando; el brinco subraya que cambió. */
.bag-price { transition: color 0.3s var(--ease-out); }
.bag-price.is-cambiando { color: var(--accent); }

/* Las notas de cata entran una tras otra con la ficha. */
.bag.is-visible .bag-notas li {
  animation: notaEntra 0.5s var(--ease-out) backwards;
}
.bag.is-visible .bag-notas li:nth-child(2) { animation-delay: 0.07s; }
.bag.is-visible .bag-notas li:nth-child(3) { animation-delay: 0.14s; }
@keyframes notaEntra {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* El punto del perfil de taza se llena de izquierda a derecha. */
.bag.is-visible .perfil-punto.is-on {
  animation: puntoEntra 0.4s var(--ease-out) backwards;
}
.perfil-fila:nth-child(2) .perfil-punto.is-on { animation-delay: 0.06s; }
.perfil-fila:nth-child(3) .perfil-punto.is-on { animation-delay: 0.12s; }
@keyframes puntoEntra {
  from { transform: scaleX(0); transform-origin: left center; }
  to   { transform: none; }
}

/* =============================================================
   Preguntas frecuentes: el contenido se despliega, no aparece
   ============================================================= */
.faq-item { transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.faq-item[open] {
  border-color: var(--line);
  box-shadow: 0 10px 30px rgba(26, 19, 16, 0.06);
}
.faq-item[open] p { animation: faqAbre 0.4s var(--ease-out); }
@keyframes faqAbre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* =============================================================
   Botón flotante de contacto: entra cuando ya hay algo que leer
   ============================================================= */
.contacto-float {
  animation: flotanteEntra 0.6s var(--ease-bounce) 1.2s backwards;
}
@keyframes flotanteEntra {
  from { opacity: 0; transform: translateY(18px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

/* =============================================================
   Nada de esto se mueve si el sistema pide calma
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .hueso,
  .bag.is-visible .bag-notas li,
  .bag.is-visible .perfil-punto.is-on,
  .faq-item[open] p,
  .contacto-float { animation: none; }
  .bag, .bag-media img, .bag-price { transition: none; }
}

/* =============================================================================
   Tres dimensiones
   -----------------------------------------------------------------------------
   Perspectiva real: cada bolsa es un cuerpo con cinco caras que se proyectan de
   verdad, no una imagen con sombra. Se prefirió CSS 3D sobre WebGL porque no
   añade un megabyte de librería, no exige tarjeta gráfica y en un teléfono de
   gama media sigue yendo a 60 fps.

   Las medidas viven en variables para que el mismo cuerpo sirva en la ficha
   grande y en cualquier tamaño que venga después.
   ========================================================================== */

.bolsa {
  --bolsa-ancho: 190px;
  --bolsa-alto:  248px;
  --bolsa-fondo: 68px;

  position: relative;
  display: grid; place-items: center;
  min-height: calc(var(--bolsa-alto) + 86px);
  perspective: 1000px;
  perspective-origin: 50% 44%;
  cursor: grab;
  touch-action: pan-y;          /* el dedo sigue pudiendo desplazar la página */
}
.bolsa:active { cursor: grabbing; }

.bolsa-cuerpo {
  position: relative;
  width: var(--bolsa-ancho);
  height: var(--bolsa-alto);
  transform-style: preserve-3d;
  transform: rotateX(-6deg) rotateY(-26deg);
  will-change: transform;
}

.bolsa-cara {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 3px;
}

/* Cara frontal: la etiqueta se compone con la tipografía de la casa, no con
   una foto de banco. */
.bolsa-frente {
  transform: translateZ(calc(var(--bolsa-fondo) / 2));
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.09) 0%, transparent 42%),
    var(--bolsa-color, #2E1F16);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 1.1rem 0.9rem 1rem;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.32);
}

.bolsa-trasera {
  transform: rotateY(180deg) translateZ(calc(var(--bolsa-fondo) / 2));
  background: var(--bolsa-color, #2E1F16);
  filter: brightness(0.72);
}

/* Los lomos son lo que delata que el cuerpo es real al girarlo. */
.bolsa-lomo {
  width: var(--bolsa-fondo);
  left: calc(50% - var(--bolsa-fondo) / 2);
  background: var(--bolsa-color, #2E1F16);
}
.bolsa-lomo-izq { transform: rotateY(-90deg) translateZ(calc(var(--bolsa-ancho) / 2)); filter: brightness(0.62); }
.bolsa-lomo-der { transform: rotateY(90deg)  translateZ(calc(var(--bolsa-ancho) / 2)); filter: brightness(0.82); }

/* Pliegue central del fuelle */
.bolsa-lomo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.34) 48%, transparent 52%, rgba(255, 255, 255, 0.05) 100%);
}

.bolsa-tapa {
  height: var(--bolsa-fondo);
  top: calc(50% - var(--bolsa-fondo) / 2);
  transform: rotateX(90deg) translateZ(calc(var(--bolsa-alto) / 2));
  background: var(--bolsa-color, #2E1F16);
  filter: brightness(1.12);
}
/* El precinto de arriba, dentado */
.bolsa-tapa::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 4px, transparent 4px 8px);
}

/* --- Contenido de la etiqueta --- */
.bolsa-valvula {
  width: 21px; height: 21px; border-radius: 50%;
  margin: 0 auto;
  border: 1.5px solid var(--bolsa-acento, #C1741B);
  display: grid; place-items: center;
}
.bolsa-valvula::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--bolsa-acento, #C1741B);
}

.bolsa-etiqueta {
  align-self: center;
  background: var(--bolsa-papel, #F2E9DA);
  color: var(--bolsa-color, #2E1F16);
  border-radius: 4px;
  padding: 0.85rem 0.6rem;
  text-align: center;
  display: grid; gap: 0.28rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}
.bolsa-marca { font-family: var(--display); font-size: 1.25rem; line-height: 1; }
.bolsa-linea { height: 1px; background: currentColor; opacity: 0.24; }
.bolsa-origen {
  font-family: var(--display); font-weight: 600;
  font-size: 0.94rem; line-height: 1.15; letter-spacing: 0.02em;
}
.bolsa-region { font-size: 0.6rem; opacity: 0.72; line-height: 1.3; }
.bolsa-tueste {
  font-family: var(--mono); font-size: 0.5rem;
  letter-spacing: 0.22em; color: var(--bolsa-acento, #C1741B);
}
.bolsa-pie {
  font-family: var(--mono); font-size: 0.46rem;
  letter-spacing: 0.24em; text-align: center;
  color: var(--bolsa-papel, #F2E9DA); opacity: 0.45;
}

/* Sombra proyectada: se aplasta y aclara conforme el cuerpo se inclina. */
.bolsa-sombra {
  position: absolute; bottom: 14px; left: 50%;
  width: calc(var(--bolsa-ancho) * 0.92); height: 24px;
  transform: translateX(-50%) rotateX(84deg);
  background: radial-gradient(ellipse at center, rgba(26, 19, 16, 0.42) 0%, transparent 70%);
  filter: blur(6px);
  pointer-events: none;
}

.bolsa-pista {
  position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute);
  opacity: 0; transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
}
.bolsa:hover .bolsa-pista, .bolsa.is-tocada .bolsa-pista { opacity: 1; }

/* =============================================================
   Inclinación de las tarjetas
   ============================================================= */
.menu-grid, .grano-grid { perspective: 1400px; }

.dish, .bag {
  transform-style: preserve-3d;
  will-change: transform;
}

/* Brillo que recorre la tarjeta según dónde está el cursor. */
.dish::after, .bag::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--brillo-x, 50%) var(--brillo-y, 0%),
    rgba(255, 255, 255, 0.14), transparent 42%
  );
  opacity: 0; transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
}
.dish.is-inclinada::after, .bag.is-inclinada::after { opacity: 1; }
.dish, .bag { position: relative; }

/* =============================================================
   Profundidad en la portada
   ============================================================= */
.hero-grid { perspective: 1200px; perspective-origin: 50% 40%; }
.hero-copy, .hero-figure { transform-style: preserve-3d; }
.hero-card { will-change: transform; }

/* La cinta deja de ser una línea plana y pasa por delante. */
.marquee { perspective: 700px; }
.marquee-track { transform: rotateX(9deg); transform-origin: 50% 0; }

/* =============================================================
   Nada gira si el sistema pide calma
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .bolsa-cuerpo { transform: rotateX(-4deg) rotateY(-20deg) !important; }
  .marquee-track { transform: none; }
  .dish, .bag { transform: none !important; }
}