/* ----------------------------------------------------------------------
   Miracle Coffee Shop — sitio informativo
   Colores tomados del sistema interno (POS): verde profundo + crema. Ver
   src/styles.js del proyecto miracle-pos si algún color necesita
   mantenerse en sincronía. Tipografía: Quicksand (títulos, redondeada,
   estilo Apple/San Francisco Rounded) + Inter (texto) + Yellowtail (solo
   para el wordmark "miracle", igual que en los stickers/posts reales de
   la marca -- no usar Yellowtail para nada más).
---------------------------------------------------------------------- */

:root {
  --ink: #1C1C1A;
  --paper: #FBF3D6;
  --card: #FFFFFF;
  --primary: #0B4F41;
  --primary-dark: #073A2F;
  --primary-soft: #E7EFEC;
  --muted: #6E6E6A;
  --line: #E4E4E1;
  --accent: #EAC454;

  --cat-clasicas: var(--primary);
  --cat-refrescantes: #5C8374;
  --cat-especialidades: #EAC454;
  --cat-matcha: #8A9B5E;
  --cat-chai: #B0733C;
  --cat-coldbrew: #4A3222;
  --cat-tonicos: #C9A227;
  --cat-alimentos: #3F5148;
  --cat-milagritos: #E8749A;

  --shadow-soft: 0 4px 16px rgba(43, 29, 20, .08);
  --shadow-lift: 0 10px 28px rgba(43, 29, 20, .14);
  --radius-lg: 24px;
  --radius-md: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
section { padding: 88px 0; }
@media (max-width: 640px) {
  section { padding: 56px 0; }
  .container { padding: 0 20px; }
}

h1, h2, h3 { font-family: 'Quicksand', sans-serif; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.script { font-family: 'Yellowtail', cursive; font-weight: 400; }

/* Etiquetas cortas de interfaz (botones, chips, nombres/precios de menú,
   nav) -- Quicksand redondeada en vez de Inter, para que la letra tenga
   más "vida" donde es corta y en negritas. Los párrafos largos (hero-sub,
   descripciones de menú, about) se quedan en Inter -- Quicksand a tamaño
   de texto corrido se siente menos legible. */
.btn, .nav-links a, .hero-eyebrow, .menu-filter, .cat-chip, .menu-card-name,
.menu-card-price, .info-card h4, .footer-col h5, .announce {
  font-family: 'Quicksand', sans-serif;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 28px; border-radius: 999px; border: none; cursor: pointer;
  font-size: 15px; font-weight: 700;
  text-decoration: none; transition: transform .15s cubic-bezier(.2,1.4,.4,1), box-shadow .15s ease, background .15s ease;
}
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 0 var(--primary-dark); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--primary-dark); }
.btn-secondary { background: #fff; color: var(--primary); border: 2px solid var(--primary); }
.btn-secondary:hover { background: var(--primary-soft); }

/* ---------- Barra de anuncio ---------- */
.announce {
  background: var(--primary-dark); color: #fff; text-align: center;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; padding: 10px 16px;
}

/* ---------- Header ---------- */
header.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 243, 214, .96); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo img { height: 40px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14.5px; transition: color .15s ease; }
.nav-links a:hover { color: var(--primary); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
@media (max-width: 860px) {
  /* position:absolute (no top:64 hardcoded, no position:fixed) -- el header
     ya es el containing block (position:sticky también cuenta para esto),
     así el panel siempre queda pegado justo debajo del header sin importar
     cuánto mida la barra de aviso arriba. position:fixed se descartó porque
     se rompe si algún ancestro tiene transform (pasa dentro de vistas
     previas con zoom/escalado) -- absolute no tiene ese problema. */
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); flex-direction: column; justify-content: flex-start; gap: 0; padding: 8px 0; box-shadow: var(--shadow-lift); max-height: calc(100vh - 100%); overflow-y: auto; }
  .nav-links.open { display: flex; }
  .nav-links a { width: 100%; padding: 16px 24px; border-bottom: 1px solid var(--line); box-sizing: border-box; }
  .nav-toggle { display: block; }
  .nav-cta .btn-secondary { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 72px 0 96px; }
.hero-pattern { position: absolute; inset: 0; background-image: url('../img/pattern-bg.jpg'); background-size: 340px; opacity: .16; pointer-events: none; }
.hero-inner { position: relative; display: flex; align-items: center; gap: 48px; }
.hero-copy { flex: 1; min-width: 0; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 7px 16px; font-size: 12.5px; font-weight: 700; color: var(--primary); box-shadow: var(--shadow-soft); margin-bottom: 22px; }
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #2FBF71; }
.hero-title { font-size: 52px; line-height: 1.05; }
.hero-title .script { display: block; font-size: 64px; color: var(--primary); margin-top: 2px; }
.hero-sub { font-size: 17px; color: var(--muted); max-width: 460px; margin: 22px 0 32px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-art { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; }
/* Marco blanco fijo alrededor de la foto -- las fotos del carrusel no
   comparten fondo (blanco, amarillo, oscuro...), así que sin este marco
   cada una se veía distinto en vez de leerse como "una tarjeta de fotos".
   El float/bounce va en el marco completo, no en la imagen suelta. */
.hero-frame { position: relative; max-width: 320px; width: 100%; padding: 14px; border-radius: 28px; box-shadow: 0 24px 40px rgba(43,29,20,.22); animation: heroFloat 5s ease-in-out infinite; transition: background .35s ease; }
.hero-photo { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 18px; transition: opacity .35s ease; }
.hero-photo.is-fading, .hero-badge.is-fading { opacity: 0; }
/* Badge estilo Chamberlain Coffee: etiqueta oscura sobre la tarjeta de
   color, distinta por slide (ver HERO_IMAGES en menu-data.js). */
.hero-badge { position: absolute; top: 26px; left: 26px; z-index: 1; background: var(--primary-dark); color: #fff; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 12.5px; padding: 7px 14px; border-radius: 999px; transition: opacity .3s ease; }
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.hero-sticker { position: absolute; width: 96px; filter: drop-shadow(0 8px 16px rgba(43,29,20,.15)); z-index: 1; }
.hero-sticker.s1 { top: -14px; left: -24px; transform: rotate(-10deg); }
.hero-sticker.s2 { bottom: 10px; right: -6px; transform: rotate(8deg); width: 84px; }
@media (max-width: 860px) {
  .hero-inner { flex-direction: column; text-align: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-title { font-size: 40px; }
  .hero-title .script { font-size: 50px; }
  .hero-frame { max-width: 240px; }
}

/* ---------- Franja de categorías ---------- */
.cat-strip { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cat-strip-title { text-align: center; font-size: 30px; margin-bottom: 32px; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.cat-chip {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 12px; border-radius: var(--radius-md); background: var(--paper);
  text-decoration: none; color: var(--ink); font-weight: 700; font-size: 13px; text-align: center;
  transition: transform .15s cubic-bezier(.2,1.4,.4,1), box-shadow .15s ease;
  border: 2px solid transparent;
}
.cat-chip:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--dot); }
.cat-chip .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--dot); }

/* ---------- Menú ---------- */
.menu-section { }
.menu-head { text-align: center; max-width: 560px; margin: 0 auto 40px; }
.menu-head h2 { font-size: 38px; }
.menu-head p { color: var(--muted); margin-top: 12px; font-size: 15px; }
.menu-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 40px; }
.menu-filter {
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font-weight: 700; font-size: 13px; cursor: pointer; color: var(--muted);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.menu-filter:active { transform: scale(.96); }
.menu-filter.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.menu-category { margin-bottom: 52px; }
.menu-category-title { display: flex; align-items: center; gap: 10px; font-size: 24px; margin-bottom: 20px; }
.menu-category-title .dot { width: 12px; height: 12px; border-radius: 50%; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.menu-card {
  background: var(--card); border-radius: var(--radius-md); padding: 20px 22px;
  box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 8px;
  border-left: 4px solid var(--dot); transition: transform .15s ease, box-shadow .15s ease;
}
.menu-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.menu-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.menu-card-name { font-weight: 800; font-size: 16px; }
.menu-card-price { font-weight: 800; font-size: 16px; color: var(--primary); white-space: nowrap; }
.menu-card-desc { color: var(--muted); font-size: 13.5px; line-height: 1.45; }

/* ---------- Nosotros ---------- */
.about { background: var(--primary); color: #fff; position: relative; overflow: hidden; }
.about-inner { display: flex; align-items: center; gap: 56px; }
.about-copy { flex: 1.1; }
.about-copy .eyebrow { font-weight: 800; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.about-copy h2 { font-size: 36px; margin: 14px 0 20px; }
.about-copy p { font-size: 15.5px; opacity: .92; max-width: 480px; margin: 0 0 14px; }
.about-art { flex: 1; display: flex; justify-content: center; }
.about-photo { max-width: 320px; width: 100%; border-radius: 20px; filter: drop-shadow(0 20px 30px rgba(0,0,0,.25)); }
@media (max-width: 860px) {
  .about-inner { flex-direction: column; text-align: center; }
  .about-copy p { margin-left: auto; margin-right: auto; }
}

/* ---------- Ubicación ---------- */
.location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.location-map { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); border: 1px solid var(--line); }
.location-map iframe { width: 100%; height: 380px; border: 0; display: block; }
.info-card { background: var(--card); border-radius: var(--radius-md); padding: 22px 24px; box-shadow: var(--shadow-soft); display: flex; gap: 16px; margin-bottom: 14px; }
.info-card .icon { width: 42px; height: 42px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-card h4 { font-weight: 800; font-size: 14px; margin: 0 0 4px; }
.info-card p, .info-card a { font-size: 14px; color: var(--muted); margin: 0; text-decoration: none; }
.info-card a:hover { color: var(--primary); }
.hours-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.hours-table td { padding: 3px 0; color: var(--muted); }
.hours-table td:last-child { text-align: right; font-weight: 700; color: var(--ink); }
@media (max-width: 860px) { .location-grid { grid-template-columns: 1fr; } }

/* ---------- CTA final ---------- */
.cta-band { background: var(--paper); text-align: center; }
.cta-band h2 { font-size: 34px; margin-bottom: 16px; }
.cta-band p { color: var(--muted); max-width: 420px; margin: 0 auto 30px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
footer.site-footer { background: var(--primary-dark); color: #fff; padding: 56px 0 28px; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-brand img { height: 34px; filter: brightness(0) invert(1); }
.footer-tag { opacity: .7; font-size: 13.5px; max-width: 260px; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col h5 { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin: 0 0 14px; }
.footer-col a { display: block; text-decoration: none; color: #fff; opacity: .85; font-size: 14px; margin-bottom: 10px; }
.footer-col a:hover { opacity: 1; text-decoration: underline; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
.footer-social a:hover { background: rgba(255,255,255,.2); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); padding-top: 22px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; opacity: .6; }