/* Cemitas El Pariente — estilos
 * Concepto: hero fotográfico con texto encima (madera cálida y café), cuerpo en crema,
 * rojo ladrillo solo para acciones y precios, greca como separador. Un solo tema claro de marca. */
/* Fuentes alojadas en el propio sitio (licencia SIL OFL, ver assets/fonts) */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/fraunces-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/fraunces-latin-600-italic.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/fraunces-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/figtree-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/figtree-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/figtree-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/figtree-latin-700-normal.woff2") format("woff2")}
:root{
  --rojo:#B71C1C; --rojo-osc:#941616; --naranja:#F28C28; --mostaza:#F2B632;
  --crema:#FBF3DC; --crema-2:#F3E5C0; --verde:#1B6B3A; --cafe:#3B1F17; --cafe-2:#54302A;
  --tinta:#3B1F17; --tinta-suave:#6B4A3E; --linea:#E2CFA0; --blanco:#FFFDF6; --crema-txt:#EFE2C6;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --body:"Figtree", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --gl:max(16px, env(safe-area-inset-left, 0px));
  --gr:max(16px, env(safe-area-inset-right, 0px));
  --max:1180px;
  --hero-img-h:min(112vw, 560px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
section[id]{scroll-margin-top:calc(80px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--crema);color:var(--tinta);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;line-height:1.05;text-wrap:balance}
:focus-visible{outline:3px solid var(--mostaza);outline-offset:3px;border-radius:8px}
.wrap{max-width:var(--max);margin-inline:auto;padding-left:var(--gl);padding-right:var(--gr)}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--cafe);color:var(--crema);padding:10px 16px;border-radius:10px;font-weight:700}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}

/* ---------- Pantalla de carga: la mascota aparece al centro y viaja al hero (≈2 s) ---------- */
.loader{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background-color:var(--crema);
  transition:background-color .7s cubic-bezier(.65,0,.35,1);
  animation:loader-respaldo .01s linear 4.6s forwards}
.loader-cara{width:min(200px,46vw);opacity:0;transform-origin:50% 50%;will-change:transform}
.loader.play .loader-cara{animation:cara-entra .65s cubic-bezier(.2,1.5,.4,1) both, cara-saluda .6s ease-in-out .7s both}
.loader.fly{background-color:rgba(251,243,220,0)}
.loader.fly .loader-cara{opacity:1;animation:none;transition:transform .7s cubic-bezier(.65,0,.35,1), filter .7s ease}
.loader.fade{opacity:0;transition:opacity .4s ease}
.is-ready .loader{visibility:hidden;pointer-events:none}
@keyframes cara-entra{from{opacity:0;transform:translateY(20px) scale(.55)}to{opacity:1;transform:none}}
@keyframes cara-saluda{0%,100%{transform:rotate(0)}30%{transform:rotate(-7deg)}65%{transform:rotate(5deg)}}
@keyframes loader-respaldo{to{opacity:0;visibility:hidden;pointer-events:none}}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:.75em 1.4em;border-radius:999px;font:700 1rem/1 var(--body);text-decoration:none;border:2px solid transparent;transition:transform .15s ease, background-color .15s ease, color .15s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:20px;height:20px;flex:none}
.btn .flecha{width:18px;height:18px;transition:transform .15s ease}
.btn:hover .flecha{transform:translateX(3px)}
.btn-rojo{background:var(--rojo);color:var(--blanco);box-shadow:0 10px 24px -12px rgba(183,28,28,.8)}
.btn-rojo:hover{background:var(--rojo-osc)}
.btn-crema{background:var(--crema);color:var(--cafe)}
.btn-crema:hover{background:var(--blanco)}
.btn-borde{background:transparent;color:var(--crema);border-color:rgba(251,243,220,.5)}
.btn-borde:hover{background:rgba(251,243,220,.1)}

/* ---------- Encabezado (crema, logotipo original) ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:var(--crema)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:80;background:var(--crema);border-bottom:1px solid var(--linea);transition:box-shadow .3s ease}
.top.is-solid{box-shadow:0 8px 22px -16px rgba(59,31,23,.55)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:8px;min-height:66px}
.top-logo{display:flex;align-items:center;gap:6px;text-decoration:none}
.top-mascota{width:46px}
.top-letras{width:118px}
.top nav{display:flex;align-items:center;gap:26px}
.top nav .link{font-weight:600;text-decoration:none;color:var(--cafe);font-size:.96rem}
.top nav .link:hover{color:var(--rojo)}
.top .btn{min-height:42px;padding:.55em 1.1em;font-size:.94rem;box-shadow:none}
@media (min-width:900px){.top-mascota{width:54px}.top-letras{width:138px}}
@media (max-width:760px){.top nav .link{display:none}}

/* ---------- Hero minimalista: la foto manda, poco texto ---------- */
.hero{position:relative;background:var(--cafe);color:var(--crema);overflow:hidden;isolation:isolate}
.hero-media{position:relative;aspect-ratio:4/3;max-width:100%;z-index:-1}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:76% 55%}
.hero-media::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(180deg, rgba(59,31,23,0), var(--cafe))}
.hero-copy{padding-block:6px 40px;display:grid;gap:14px;margin-top:-34px}
.hero .eyebrow{color:var(--mostaza);letter-spacing:.24em;font-size:.72rem}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.85rem, 7.2vw, 3.1rem);line-height:1.08;color:var(--blanco);letter-spacing:-.01em;max-width:17ch}
.hero h1 .acento{color:var(--mostaza);font-style:italic}
.hero-lead{font-size:1rem;color:var(--crema-txt)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.hero-ctas .btn{min-height:48px;padding:.7em 1.3em;font-size:.95rem;box-shadow:none}
@media (min-width:900px){
  .hero{min-height:clamp(560px, 82vh, 780px);display:flex;align-items:flex-end}
  .hero-media{position:absolute;inset:0;aspect-ratio:auto}
  .hero-media img{object-position:center 58%}
  .hero-media::after{inset:0;height:auto;background:
    linear-gradient(90deg, rgba(40,20,14,.78) 0%, rgba(40,20,14,.5) 26%, rgba(40,20,14,0) 46%),
    linear-gradient(0deg, rgba(40,20,14,.55) 0%, rgba(40,20,14,0) 40%)}
  .hero-copy{width:100%;margin-top:0;padding-block:64px 64px;gap:16px}
  .hero-copy > *{max-width:430px}
  .hero h1{font-size:clamp(2.4rem, 3.3vw, 3.1rem)}
}
.is-ready .hero-copy > *{animation:sube .8s cubic-bezier(.2,.8,.2,1) both}
.is-ready .hero-copy > :nth-child(2){animation-delay:.08s}
.is-ready .hero-copy > :nth-child(3){animation-delay:.16s}
.is-ready .hero-copy > :nth-child(4){animation-delay:.24s}
html:not(.is-ready) .hero-copy > *, html:not(.is-ready) .top-mascota{opacity:0;animation:aparece-respaldo .01s linear 4.6s forwards}
@keyframes aparece-respaldo{to{opacity:1}}
@keyframes sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Franja de datos bajo el hero */
.franja{background:var(--cafe);color:var(--crema-txt);border-top:1px solid rgba(251,243,220,.12);font-size:.86rem}
.franja .wrap{display:flex;flex-wrap:wrap;gap:6px 0;padding-block:14px}
.franja span{display:inline-flex;align-items:center}
.franja span + span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--mostaza);margin-inline:14px}
@media (max-width:620px){.franja .wrap{display:grid;gap:4px}.franja span + span::before{display:none}}

/* ---------- Greca ---------- */
.greca{height:28px;background:var(--rojo) url("../img/marca/greca.webp") repeat-x left center/auto 28px}

/* ---------- Nuestro pan ---------- */
.pan{padding-block:76px}
.pan .wrap{display:grid;gap:44px}
@media (min-width:880px){.pan .wrap{grid-template-columns:1fr 1fr;gap:72px;align-items:center}}
.pan .eyebrow{color:var(--rojo)}
.pan h2{font-family:var(--serif);font-size:clamp(2.1rem,5vw,3.2rem);margin-top:10px;color:var(--cafe)}
.pan .texto{margin-top:18px;color:var(--tinta-suave);max-width:56ch}
.dia{list-style:none;margin:0;padding:8px 0 8px 0;position:relative;display:grid;gap:26px}
.dia::before{content:"";position:absolute;left:11px;top:18px;bottom:18px;width:2px;background:repeating-linear-gradient(var(--linea) 0 6px, transparent 6px 12px)}
.dia li{position:relative;padding-left:46px;display:grid;gap:4px}
.dia li::before{content:"";position:absolute;left:4px;top:12px;width:16px;height:16px;border-radius:50%;background:var(--crema);border:3px solid var(--rojo)}
.dia .hora{font-family:var(--serif);font-size:2.3rem;line-height:1;color:var(--rojo);font-variant-numeric:tabular-nums}
.dia .hora small{font-family:var(--body);font-size:.9rem;font-weight:700;letter-spacing:.06em;margin-left:.3em;color:var(--tinta-suave)}
.dia p{color:var(--tinta-suave);max-width:40ch}
.dia strong{color:var(--cafe)}

/* ---------- Menú ---------- */
.menu{background:var(--blanco);padding-block:80px;border-block:1px solid var(--linea)}
.menu-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:14px 32px}
.menu-head .eyebrow{color:var(--rojo)}
.menu-head h2{font-family:var(--serif);font-size:clamp(2.3rem,5.4vw,3.5rem);margin-top:8px;color:var(--cafe)}
.menu-head p{color:var(--tinta-suave);max-width:38ch}
.cubana{margin-top:40px;display:grid;background:var(--cafe);color:var(--crema);border-radius:26px;overflow:hidden}
.cubana-img{margin:0;padding:28px 24px 0;display:grid;justify-items:center;gap:6px;background:radial-gradient(closest-side, rgba(242,182,50,.26), transparent 70%)}
.cubana-img img{width:min(300px,72%);filter:drop-shadow(0 24px 22px rgba(0,0,0,.4))}
.cubana-img figcaption{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mostaza)}
.cubana-body{padding:18px 24px 30px;display:grid;gap:18px;align-content:center}
.tier{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.tier h3{font-family:var(--serif);font-size:clamp(1.8rem,5vw,2.4rem);color:var(--blanco)}
.precio{font-family:var(--serif);font-weight:700;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.02em}
.cubana .precio{font-size:clamp(2.6rem,7vw,3.4rem);color:var(--mostaza)}
.lista-oscura{grid-template-columns:repeat(2,minmax(0,1fr))}
.lista-oscura li{border-bottom-color:rgba(251,243,220,.18);color:var(--blanco);font-size:1.05rem}
@media (min-width:820px){.cubana{grid-template-columns:1fr 1.1fr}.cubana-img{padding:40px}.cubana-body{padding:44px 52px 44px 4px}}
.sub{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:6px 24px;margin-top:68px;padding-bottom:14px;border-bottom:2px solid var(--cafe)}
.sub h3{font-family:var(--serif);font-size:clamp(1.8rem,5vw,2.4rem);color:var(--cafe)}
.sub .precio{font-size:clamp(2.6rem,7vw,3.4rem);color:var(--rojo)}
.sub p{flex-basis:100%;color:var(--tinta-suave);font-size:.98rem}
.platos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px;margin-top:32px}
@media (min-width:860px){.platos{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}}
.plato{display:grid;gap:12px;text-align:center;min-width:0;margin:0}
.plato .img{position:relative;width:100%;aspect-ratio:1;background:var(--crema);border-radius:50%;transition:transform .25s ease}
.plato:hover .img{transform:rotate(-3deg) scale(1.03)}
.plato img{position:absolute;inset:4% 8%;width:84%;height:92%;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(59,31,23,.22))}
.plato h4{font:700 1.05rem/1.25 var(--body);color:var(--cafe)}
.otros{margin-top:46px;display:grid;gap:12px}
.otros h4{font:700 .78rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
@media (min-width:700px){.lista{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:980px){.lista{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lista li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;padding:12px 0;border-bottom:1px dotted var(--linea);font-weight:600;min-width:0}
.lista li span:nth-child(2){color:var(--rojo);font-variant-numeric:tabular-nums}
.lista li small{flex-basis:100%;font-weight:400;color:var(--tinta-suave);font-size:.88rem}
.nota{margin-top:38px;display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;justify-content:space-between;background:var(--crema);border-radius:16px;padding:18px 22px}
.nota p{font-weight:600;color:var(--cafe)}
.nota small{color:var(--tinta-suave);font-size:.82rem}
.infantil{margin-top:60px}

/* ---------- Galería (se muestra cuando config.js tiene fotos/videos) ---------- */
.galeria{padding-block:80px}
.galeria h2{font-family:var(--serif);font-size:clamp(2.1rem,5vw,3.1rem);color:var(--cafe);margin-top:8px}
.galeria .eyebrow{color:var(--rojo)}
.galeria-grid{margin-top:32px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:16px}
.galeria-item{margin:0;border-radius:18px;overflow:hidden;background:var(--crema-2);display:grid}
.galeria-item img,.galeria-item video{width:100%;aspect-ratio:4/3;object-fit:cover}
.galeria-item figcaption{padding:10px 14px;font-size:.88rem;color:var(--tinta-suave)}

/* ---------- Visítanos ---------- */
.visita{background:var(--cafe);color:var(--crema);padding-block:80px}
.visita .wrap{display:grid;gap:40px}
@media (min-width:900px){.visita .wrap{grid-template-columns:1fr 1.15fr;gap:68px;align-items:start}}
.visita .eyebrow{color:var(--mostaza)}
.visita h2{font-family:var(--serif);font-size:clamp(2.2rem,5.2vw,3.2rem);margin-top:10px;color:var(--blanco)}
.visita h2 .acento{color:var(--mostaza);font-style:italic}
.visita .intro p{margin-top:16px;color:var(--crema-txt);max-width:44ch}
.mascota{width:min(220px,55%);margin-top:30px}
.datos{display:grid;gap:14px}
.dato{background:var(--cafe-2);border-radius:18px;padding:22px 24px;display:grid;gap:8px;min-width:0}
.dato h3{font:700 .78rem/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--mostaza)}
.dato p{font-size:1.1rem;line-height:1.45;color:var(--blanco)}
.dato .muted{font-size:.95rem;color:#D9C8A6}
.tels{display:grid;gap:10px;margin-top:4px}
.tel{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:12px;background:rgba(251,243,220,.06);border:1px solid rgba(251,243,220,.14);text-decoration:none}
.tel:hover{border-color:var(--mostaza)}
.tel span{font-family:var(--serif);font-size:1.5rem;color:var(--blanco);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tel small{color:#D9C8A6;font-size:.85rem}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.acciones .btn{min-height:46px}
.ig{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--blanco);padding:.6em 0;text-decoration:none}
.ig svg{width:20px;height:20px}

/* ---------- Pie ---------- */
footer{background:var(--crema);padding-block:46px calc(46px + 78px)}
footer .wrap{display:grid;gap:16px;justify-items:center;text-align:center}
footer .logo{width:min(300px,78%)}
footer p{color:var(--tinta-suave);font-size:.9rem}
footer .credito{font-size:.8rem;opacity:.8}
@media (min-width:720px){footer{padding-block:54px}}

/* ---------- Barra fija en móvil ---------- */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--cafe);display:flex;gap:10px;
  padding:10px max(12px, env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px, env(safe-area-inset-left,0px));
  box-shadow:0 -8px 24px rgba(0,0,0,.2)}
.barra .btn{flex:1;min-height:48px;padding-inline:.6em}
@media (min-width:720px){.barra{display:none}}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .loader{animation:loader-respaldo .01s linear 2s forwards!important}
}

/* ---------- 404 ---------- */
.error404{min-height:100vh;display:grid;place-items:center;text-align:center;padding-block:40px}
.error404-img{width:180px;margin:0 auto 20px}
.error404 h1{font-family:var(--serif);font-size:2.6rem;color:var(--cafe)}
.error404 p{margin:12px 0 24px;color:var(--tinta-suave)}

/* ---------- Menú: botones para agregar ---------- */
.add{display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:42px;padding:.5em 1.1em;border-radius:999px;border:2px solid var(--rojo);background:transparent;color:var(--rojo);font:700 .92rem/1 var(--body);cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .15s ease}
.add svg{width:16px;height:16px}
.add:hover{background:var(--rojo);color:var(--blanco)}
.add:active{transform:scale(.96)}
.plato .add{justify-self:center}
.add-grande{justify-self:start;background:var(--mostaza);border-color:var(--mostaza);color:var(--cafe);min-height:50px;padding-inline:1.4em;font-size:1rem}
.add-grande:hover{background:var(--crema);border-color:var(--crema);color:var(--cafe)}
.add-mini{width:38px;height:38px;min-height:0;padding:0;flex:none}
.lista-add li{align-items:center;flex-wrap:nowrap;padding:8px 0}
@media (max-width:540px){.lista-add{grid-template-columns:1fr!important}}
.lleva{color:var(--crema-txt);max-width:40ch}
.cubana-body{gap:16px}

/* ---------- Barra del pedido ---------- */
.carrito{position:fixed;z-index:75;left:max(12px, env(safe-area-inset-left,0px));right:max(12px, env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;pointer-events:none}
.carrito-btn{pointer-events:auto;display:flex;align-items:center;gap:12px;width:100%;max-width:520px;min-height:58px;padding:8px 10px 8px 8px;border:0;border-radius:999px;background:var(--rojo);color:var(--blanco);font:600 1rem/1 var(--body);cursor:pointer;box-shadow:0 14px 30px -12px rgba(59,31,23,.7)}
.carrito-btn:hover{background:var(--rojo-osc)}
.carrito-cuenta{display:grid;place-items:center;min-width:42px;height:42px;border-radius:50%;background:var(--blanco);color:var(--rojo);font-weight:700;font-variant-numeric:tabular-nums}
.carrito-total{margin-left:auto;font-family:var(--serif);font-size:1.25rem;font-variant-numeric:tabular-nums}
.carrito-ver{padding:.65em 1em;border-radius:999px;background:rgba(255,253,246,.16);font-weight:700;font-size:.92rem}
.carrito.late .carrito-btn{animation:late .45s ease}
@keyframes late{30%{transform:scale(1.04)}60%{transform:scale(.98)}}
body.con-pedido .barra{display:none}
body.con-pedido footer{padding-bottom:calc(46px + 84px)}
@media (min-width:720px){.carrito{justify-content:flex-end;right:max(24px, env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px))}.carrito-btn{width:auto}}

.toast{position:fixed;z-index:76;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,10px);background:var(--cafe);color:var(--crema);padding:10px 16px;border-radius:12px;font-size:.92rem;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;max-width:calc(100% - 32px);text-align:center}
.toast.visible{opacity:1;transform:translate(-50%,0)}

/* ---------- Panel del pedido ---------- */
.pedido{border:0;padding:0;margin:0;width:100%;max-width:100%;max-height:100%;height:100%;background:var(--crema);color:var(--tinta)}
.pedido::backdrop{background:rgba(30,15,10,.55)}
@media (min-width:720px){.pedido{margin:0 0 0 auto;width:460px;height:100%}}
.pedido form{display:flex;flex-direction:column;height:100%}
.pedido-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(14px + env(safe-area-inset-top,0px)) max(18px, env(safe-area-inset-right,0px)) 14px max(18px, env(safe-area-inset-left,0px));border-bottom:1px solid var(--linea);background:var(--crema)}
.pedido-head h2{font-family:var(--serif);font-size:1.7rem;color:var(--cafe)}
.cerrar{width:44px;height:44px;border-radius:50%;border:1px solid var(--linea);background:var(--blanco);color:var(--cafe);display:grid;place-items:center;cursor:pointer}
.cerrar svg{width:20px;height:20px}
.pedido-cuerpo{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px max(18px, env(safe-area-inset-right,0px)) 20px max(18px, env(safe-area-inset-left,0px));display:grid;gap:14px;align-content:start}
.pedido-items{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"info sub" "cant cant" "nota nota";gap:10px 12px;background:var(--blanco);border:1px solid var(--linea);border-radius:16px;padding:14px}

.item-info{grid-area:info;display:grid;gap:2px;min-width:0}
.item-info strong{color:var(--cafe);font-size:1.02rem}
.item-info span{color:var(--tinta-suave);font-size:.85rem}
.item-sub{grid-area:sub;justify-self:end;font-family:var(--serif);font-size:1.15rem;color:var(--cafe);font-variant-numeric:tabular-nums;align-self:start}
.item-cant{grid-area:cant;display:flex;align-items:center;gap:4px;background:var(--crema);border-radius:999px;padding:3px;justify-self:start}
.item-cant output{min-width:28px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.cant-btn{width:36px;height:36px;border-radius:50%;border:0;background:var(--blanco);color:var(--rojo);font:700 1.2rem/1 var(--body);cursor:pointer}
.cant-btn:hover{background:var(--rojo);color:var(--blanco)}
.item-nota{width:100%;min-width:0;border:1px dashed var(--linea);border-radius:10px;padding:9px 11px;font:400 .88rem/1.3 var(--body);background:transparent;color:var(--tinta)}
.item-nota:focus{outline:2px solid var(--mostaza);border-color:transparent}
.pedido-vacio{color:var(--tinta-suave)}
.pedido-vacio a{color:var(--rojo);font-weight:700}
.pedido-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:6px;border-top:2px solid var(--cafe);font-weight:700;color:var(--cafe)}
.pedido-total strong{font-family:var(--serif);font-size:1.7rem;font-variant-numeric:tabular-nums}
.aviso{font-size:.85rem;color:var(--tinta-suave);background:var(--crema-2);border-radius:10px;padding:10px 12px}
.campos{border:0;margin:6px 0 0;padding:0;display:grid;gap:14px;min-width:0}
.campos legend{font:700 .78rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--rojo);margin-bottom:12px;padding:0}
.campo{display:grid;gap:6px;min-width:0}
.campo > span{font-weight:600;font-size:.92rem;color:var(--cafe)}
.campo em{font-style:normal;font-weight:400;color:var(--tinta-suave)}
.campo input[type=text],.campo input[type=time],.campo textarea{width:100%;border:1px solid var(--linea);border-radius:12px;background:var(--blanco);padding:12px 13px;font:400 1rem/1.4 var(--body);color:var(--tinta);resize:vertical}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--mostaza);border-color:transparent}
.opciones{display:flex;flex-wrap:wrap;gap:8px}
.opciones label{position:relative;cursor:pointer}
.opciones input{position:absolute;opacity:0;inset:0}
.opciones span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--linea);background:var(--blanco);font-weight:600;font-size:.94rem}
.opciones input:checked + span{background:var(--cafe);border-color:var(--cafe);color:var(--crema)}
.opciones input:focus-visible + span{outline:3px solid var(--mostaza);outline-offset:2px}
.pedido-pie{border-top:1px solid var(--linea);background:var(--crema);padding:12px max(18px, env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(18px, env(safe-area-inset-left,0px));display:grid;gap:10px}
.pedido-error{color:var(--rojo);font-weight:600;font-size:.92rem}
.pedido-error:empty{display:none}
.pedido-listo{background:#E3F1E7;color:#14532D;border-radius:12px;padding:10px 12px;font-size:.9rem;display:grid;gap:4px}
.pedido-listo a{color:#14532D;font-weight:700}
.btn-wa{background:#1F8B4C;color:#fff;width:100%}
.btn-wa:hover{background:#18723E}
.vaciar{justify-self:center;border:0;background:none;color:var(--tinta-suave);font:600 .88rem/1 var(--body);text-decoration:underline;cursor:pointer;padding:6px}
body.panel-abierto{overflow:hidden}

/* ---------- Cómo llegar ---------- */
.mapa{padding-block:80px;background:var(--crema)}
.mapa .wrap{display:grid;gap:32px}
@media (min-width:880px){.mapa .wrap{grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}}
.mapa .eyebrow{color:var(--rojo)}
.mapa h2{font-family:var(--serif);font-size:clamp(2rem,4.6vw,2.9rem);margin-top:10px;color:var(--cafe)}
.mapa address{font-style:normal;margin-top:18px;font-size:1.12rem;line-height:1.55;color:var(--tinta)}
.mapa-horario{margin:12px 0 22px;color:var(--tinta-suave)}
.mapa-marco{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:24px;overflow:hidden;background:var(--crema-2);box-shadow:0 22px 44px -26px rgba(59,31,23,.55)}
.mapa-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapa-portada{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;text-align:center;padding:20px;
  background:radial-gradient(circle at 50% 40%, var(--blanco), var(--crema-2) 70%),repeating-linear-gradient(45deg, transparent 0 22px, rgba(226,207,160,.35) 22px 23px)}
.mapa-portada img{width:96px}
.mapa-portada p{font-weight:700;color:var(--cafe)}
.mapa-portada small{color:var(--tinta-suave);font-size:.8rem}
.mapa-portada .btn-crema{background:var(--cafe);color:var(--crema)}
.ver-mapa-link{color:var(--mostaza);font-weight:700;font-size:.92rem}

.add-claro{border-color:var(--mostaza);color:var(--mostaza)}
.add-claro:hover{background:var(--mostaza);color:var(--cafe)}
.cubana .lista-add{margin-top:4px}
.cubana .lista-add{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 24px}
@media (max-width:540px){.cubana .lista-add{grid-template-columns:1fr!important}}

/* Preferencias por cemita */
.item-pref{grid-area:nota;display:grid;gap:8px;min-width:0}
.item-pref > span{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:34px;padding:0 12px;border-radius:999px;border:1.5px solid var(--linea);background:var(--crema);color:var(--cafe);font:600 .85rem/1 var(--body);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--cafe);border-color:var(--cafe);color:var(--crema)}
.otra{justify-self:start;border:0;background:none;padding:2px 0;color:var(--rojo);font:700 .84rem/1.2 var(--body);cursor:pointer;text-decoration:underline}

/* ---------- Pedido v2 ---------- */
.lleva strong{color:var(--blanco);font-weight:600}
.pref-grupo{display:grid;gap:6px}
.pref-grupo small{font-size:.8rem;color:var(--tinta-suave)}
.chips-lleva .chip[aria-pressed="false"]{background:transparent;color:var(--tinta-suave);text-decoration:line-through;border-style:dashed}
.repetir{margin-top:22px;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:.6em 1.1em;border-radius:999px;border:1.5px solid var(--linea);background:var(--crema);color:var(--cafe);font:500 .95rem/1.2 var(--body);cursor:pointer}
.repetir b{color:var(--rojo)}
.repetir svg{width:18px;height:18px;color:var(--rojo)}
.repetir:hover{border-color:var(--rojo)}
.cerrado{background:#FFF1D6;border:1px solid var(--mostaza);color:var(--cafe);border-radius:12px;padding:10px 12px;font-size:.9rem;font-weight:600}
.recordar{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;color:var(--cafe);cursor:pointer}
.recordar input{width:20px;height:20px;margin-top:1px;accent-color:var(--cafe);flex:none}
.olvidar{justify-self:start;border:0;background:none;padding:0;color:var(--rojo);font:600 .85rem/1.2 var(--body);text-decoration:underline;cursor:pointer}
.bebidas{margin-top:44px;display:grid;gap:10px}
.bebidas h4{font:700 .78rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.bebidas .lista{grid-template-columns:1fr!important;max-width:560px}
.bebidas li span{display:grid;gap:2px}
.bebidas li small{font-weight:400;color:var(--tinta-suave);font-size:.86rem}
.bebidas-nota{font-size:.9rem;color:var(--tinta-suave)}
