/* Pozolería Doña Nery — estilo público. Mobile-first, paleta Costa Chica. */
:root{
  --verde:#2f8f3e; --verde-osc:#1f6b2c;
  --mar:#12a7e0; --mar-osc:#0b7fb0;
  --arena:#fbf1d9; --crema:#fff9ee;
  --naranja:#e67e22; --naranja-osc:#c85f10;
  --barro:#b5623a;
  --tinta:#33261c; --gris:#7b6f63;
  --wa:#25d366; --wa-osc:#1da851;
  --linea:#ece1c9;
  --sombra:0 8px 30px rgba(51,38,28,.10);
  --radio:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Nunito",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--tinta); background:var(--crema); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{font-family:"Fredoka","Nunito",sans-serif; line-height:1.15; margin:0 0 .4em; color:var(--tinta)}
img{max-width:100%; height:auto; display:block}
a{color:var(--verde-osc)}
.wrap{width:100%; max-width:1080px; margin:0 auto; padding:0 20px}
.skip{position:absolute; left:-999px}
.skip:focus{left:12px; top:12px; background:#fff; padding:10px 14px; border-radius:10px; z-index:99}

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  padding:.72em 1.25em; border-radius:999px; font-weight:800; text-decoration:none;
  font-family:"Nunito",sans-serif; border:2px solid transparent; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease; font-size:1rem;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:1.15em; height:1.15em}
.btn-lg{padding:.9em 1.6em; font-size:1.08rem}
.btn-wa{background:var(--wa); color:#fff}
.btn-wa:hover{background:var(--wa-osc)}
.btn-linea{background:transparent; color:var(--tinta); border-color:var(--tinta)}
.btn-linea:hover{background:var(--tinta); color:#fff}
.btn-tel{background:var(--mar); color:#fff}
.btn-tel:hover{background:var(--mar-osc)}

/* Nav */
.nav{position:sticky; top:0; z-index:40; background:rgba(255,249,238,.92);
  backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--linea)}
.nav-in{max-width:1080px; margin:0 auto; padding:8px 16px; display:flex; align-items:center; gap:12px}
.marca{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--tinta); font-weight:800; font-family:"Fredoka",sans-serif; min-width:0}
.marca img{border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.08); flex:0 0 auto}
.marca span{font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.nav-links{display:none; margin-left:auto; gap:22px}
.nav-links a{text-decoration:none; color:var(--tinta); font-weight:700}
.nav-links a:hover{color:var(--verde)}
.nav-cta{margin-left:auto; padding:.55em .8em; font-size:.92rem; flex:0 0 auto; white-space:nowrap}
.nav-cta-ico{display:inline-flex}
.nav-cta-ico svg{width:1.3em; height:1.3em}
.nav-cta-txt{display:none}
@media(min-width:520px){
  .nav-cta-txt{display:inline}
  .nav-cta-ico{display:none}
  .nav-cta{padding:.55em 1em}
}
@media(min-width:900px){
  .nav-links{display:flex}
  .nav-cta{margin-left:0}
}

/* Hero */
.hero{position:relative; overflow:hidden; background:
  radial-gradient(1200px 500px at 80% -10%, rgba(18,167,224,.18), transparent 60%),
  linear-gradient(160deg, var(--arena), var(--crema) 70%)}
.hero-bg{position:absolute; inset:0;
  background:
   radial-gradient(circle at 12% 88%, rgba(47,143,62,.14), transparent 42%),
   radial-gradient(circle at 92% 20%, rgba(230,126,34,.10), transparent 38%);
  pointer-events:none}
.hero-in{position:relative; max-width:1080px; margin:0 auto; padding:38px 20px 46px;
  display:grid; grid-template-columns:minmax(0,1fr); gap:26px; align-items:center}
.kicker{color:var(--verde-osc); font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  font-size:.82rem; margin:0 0 .6em}
.hero h1{font-size:clamp(1.9rem,7vw,3.1rem); font-weight:700}
.hero-sub{font-size:1.1rem; color:var(--gris); max-width:34ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px}
.hero-rating{margin-top:18px; color:var(--gris); font-size:.98rem}
.estrellas{color:#f5a623; letter-spacing:1px}
.hero-rating strong{color:var(--tinta)}
.hero-foto img{width:100%; max-width:520px; margin:0 auto; border-radius:24px;
  box-shadow:var(--sombra); border:6px solid #fff; aspect-ratio:1/1; object-fit:cover}
@media(min-width:860px){
  .hero-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); padding:56px 20px 64px}
}

/* Secciones */
.sec{padding:54px 0}
.sec:nth-of-type(even){background:var(--arena)}
.titulo{font-size:clamp(1.5rem,5vw,2.2rem); text-align:center}
.titulo::after{content:""; display:block; width:64px; height:4px; border-radius:4px;
  background:linear-gradient(90deg,var(--verde),var(--mar)); margin:.5em auto 0}
.intro{text-align:center; max-width:56ch; margin:0 auto 34px; color:var(--gris); font-size:1.08rem}

/* Pozoles */
.pozoles-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:22px}
.pozole-card{background:#fff; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra);
  border:1px solid var(--linea)}
.pozole-img img{width:100%; aspect-ratio:4/3; object-fit:cover}
.pozole-txt{padding:20px 22px}
.pozole-txt h3{font-size:1.4rem; color:var(--barro)}
.pozole-txt p{margin:.3em 0 0; color:var(--gris)}
.pozole-txt .precio{color:var(--verde-osc); font-weight:800; font-size:1.25rem; margin-top:.5em}
.nota-antojo{text-align:center; margin-top:28px; color:var(--gris)}
.link-wa{color:var(--wa-osc); font-weight:800; text-decoration:none; white-space:nowrap}
@media(min-width:720px){.pozoles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Menú */
.menu-cols{display:grid; grid-template-columns:minmax(0,1fr); gap:30px}
.menu-cat{background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:22px 24px; box-shadow:var(--sombra)}
.menu-cat h3{font-size:1.3rem; color:var(--verde-osc); border-bottom:2px dashed var(--linea); padding-bottom:.4em}
.menu-lista{list-style:none; margin:0; padding:0}
.menu-lista li{display:flex; align-items:baseline; gap:8px; padding:.5em 0; border-bottom:1px dotted var(--linea)}
.menu-lista li:last-child{border-bottom:0}
.mi-nombre{font-weight:700}
.mi-nombre small{display:block; font-weight:600; color:var(--gris); font-size:.85rem}
.mi-linea{flex:1; border-bottom:1px dotted #d8cbb0; transform:translateY(-3px)}
.mi-precio{font-weight:800; color:var(--barro); white-space:nowrap}
.menu-nota{text-align:center; margin-top:26px; color:var(--gris); font-size:.92rem}
@media(min-width:760px){.menu-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .menu-cat.finde,.menu-cat:nth-child(3){grid-column:1/-1}}

/* Especialidades */
.esp-grid{display:grid; gap:20px; grid-template-columns:repeat(2,minmax(0,1fr))}
.esp-card{background:#fff; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); border:1px solid var(--linea)}
.esp-img img{width:100%; aspect-ratio:1/1; object-fit:cover}
.esp-txt{padding:14px 16px}
.esp-txt h3{font-size:1.1rem; color:var(--barro); margin-bottom:.2em}
.esp-txt p{margin:0; color:var(--gris); font-size:.92rem}
@media(min-width:760px){.esp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Aguas */
.sec-aguas{background:linear-gradient(160deg, rgba(18,167,224,.10), var(--crema))}
.aguas-chips{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.aguas-chips li{background:#fff; border:2px solid var(--mar); color:var(--mar-osc); font-weight:800;
  padding:.6em 1.3em; border-radius:999px; box-shadow:var(--sombra)}

/* Nosotros + reseñas */
.nosotros-in{display:grid; gap:34px}
.nosotros-txt p{color:var(--gris); font-size:1.06rem}
.resenas{display:grid; gap:16px}
.resena{margin:0; background:#fff; border:1px solid var(--linea); border-left:5px solid var(--verde);
  border-radius:12px; padding:16px 20px; box-shadow:var(--sombra)}
.resena-est{color:#f5a623; letter-spacing:1px}
.resena p{margin:.4em 0; font-style:italic}
.resena cite{color:var(--gris); font-weight:700; font-style:normal}
@media(min-width:820px){.nosotros-in{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start}}

/* Contacto */
.contacto-grid{display:grid; gap:18px}
.c-card{background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:22px 24px; box-shadow:var(--sombra)}
.c-card h3{color:var(--verde-osc); font-size:1.2rem}
.c-card .btn{margin:.4em .4em 0 0}
.horario{list-style:none; padding:0; margin:0}
.horario li{padding:.25em 0; border-bottom:1px dotted var(--linea)}
.horario li:last-child{border-bottom:0; color:var(--gris)}
@media(min-width:820px){.contacto-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Redes */
.redes{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px}
.red{width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--verde); color:#fff; transition:transform .12s, background .12s}
.red:hover{transform:translateY(-2px)}
.red svg{width:22px; height:22px}
.red-whatsapp{background:var(--wa)}
.red-instagram{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.red-facebook{background:#1877f2}
.red-tiktok{background:#111}
.red-linkedin{background:#0a66c2}
.red-email{background:var(--barro)}

/* Footer */
.pie{background:var(--tinta); color:#f4ece0; padding:40px 0 0}
.pie-in{display:grid; gap:26px; padding-bottom:30px}
.pie a{color:#ffd9a0}
.pie-col img{border-radius:50%; background:#fff; padding:3px}
.pie-nombre{font-family:"Fredoka",sans-serif; font-weight:700; font-size:1.15rem; margin:.5em 0 .1em}
.pie-dir,.pie-col p{margin:.15em 0; color:#cdbfae; font-size:.95rem}
.pie-h{font-weight:800; color:#fff; margin-bottom:.4em}
.pie .redes{margin-top:6px}
.pie .red{background:rgba(255,255,255,.12)}
.pie .red-whatsapp{background:var(--wa)}
.pie-tel a{font-weight:800}
.pie-credito{border-top:1px solid rgba(255,255,255,.14); padding:16px 20px; text-align:center;
  display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center; font-size:.88rem; color:#bdae9c;
  max-width:1080px; margin:0 auto}
.credito-infoweb a{color:#ffd9a0; font-weight:700; text-decoration:none}
.credito-infoweb a:hover{text-decoration:underline}
@media(min-width:760px){.pie-in{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}}

/* WhatsApp flotante */
.wa-flotante{position:fixed; right:16px; bottom:16px; z-index:50; width:58px; height:58px;
  background:var(--wa); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,.5); transition:transform .12s}
.wa-flotante:hover{transform:scale(1.06)}
.wa-flotante svg{width:32px; height:32px}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto; transition:none}}