@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,800&family=Figtree:wght@400;500;600&display=swap');

:root {
  --nopal: #0e3b2e;
  --nopal-2: #1b5a47;
  --rosa: #c4145f;       /* 5.6:1 sobre papel */
  --limon: #f5d547;
  --papel: #fff6f8;
  --blanco: #ffffff;
  --linea: #ecd9df;
  --suave: #5b6b64;
  --ok: #1d7a4f;
  --radio: 14px;
  font-family: 'Figtree', system-ui, sans-serif;
  color: var(--nopal);
  background: var(--papel);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

* { box-sizing: border-box; }
body { margin: 0; line-height: 1.55; }
h1, h2, h3 { font-family: 'Bricolage Grotesque', sans-serif; line-height: 1.05; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 800; }
p { margin: 0 0 1em; max-width: 62ch; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; }
.wrap { width: min(1100px, 100% - 2rem); margin-inline: auto; }
section { padding: 3.5rem 0; }

/* botones */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; border: 2px solid var(--nopal); border-radius: 999px; background: var(--nopal); color: var(--blanco); font: 600 1rem 'Figtree'; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--nopal-2); }
.btn.rosa { background: var(--rosa); border-color: var(--rosa); }
.btn.rosa:hover { background: #a30f4d; }
.btn.claro { background: transparent; color: var(--nopal); }
.btn.claro:hover { background: var(--limon); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* aviso + header */
.aviso { background: var(--limon); text-align: center; font-weight: 600; padding: .45rem 1rem; font-size: .95rem; }
header.top { position: sticky; top: 0; z-index: 20; background: var(--papel); border-bottom: 1px solid var(--linea); }
header.top .wrap { display: flex; align-items: center; gap: 1rem; padding-block: .7rem; flex-wrap: wrap; }
.logo { font: 800 1.5rem 'Bricolage Grotesque'; text-decoration: none; letter-spacing: -.03em; }
.logo b { color: var(--rosa); }
nav.main { display: flex; gap: .25rem; margin-left: auto; flex-wrap: wrap; }
nav.main a { padding: .4rem .8rem; border-radius: 999px; text-decoration: none; font-weight: 600; }
nav.main a:hover, nav.main a[aria-current] { background: var(--nopal); color: var(--blanco); }
.tel { font-weight: 600; text-decoration: none; }
.carrito-btn { position: relative; }
.carrito-btn .n { background: var(--limon); color: var(--nopal); border-radius: 999px; padding: 0 .5rem; font-weight: 800; }

/* hero */
.hero { padding-block: 4rem 3rem; }
.hero .wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: center; }
.estado { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; margin-bottom: 1rem; }
.estado::before { content: ''; width: .7rem; height: .7rem; border-radius: 50%; background: var(--suave); }
.estado.abierto::before { background: var(--ok); box-shadow: 0 0 0 4px #1d7a4f33; }
.hero p.lead { font-size: 1.2rem; }
.hero .acciones { display: flex; gap: .75rem; flex-wrap: wrap; }

/* comanda: el elemento memorable */
.comanda { background: var(--limon); padding: 1.5rem 1.5rem 2.2rem; transform: rotate(2deg); box-shadow: 6px 8px 0 var(--nopal); font-family: 'Figtree'; border-radius: 4px 4px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 95% 96%, 90% 100%, 85% 96%, 80% 100%, 75% 96%, 70% 100%, 65% 96%, 60% 100%, 55% 96%, 50% 100%, 45% 96%, 40% 100%, 35% 96%, 30% 100%, 25% 96%, 20% 100%, 15% 96%, 10% 100%, 5% 96%, 0 100%); }
.comanda h3 { font-size: 1rem; border-bottom: 2px dashed var(--nopal); padding-bottom: .5rem; }
.comanda ul { list-style: none; padding: 0; margin: 0 0 .75rem; }
.comanda li { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
.comanda .tot { border-top: 2px dashed var(--nopal); padding-top: .5rem; font-weight: 800; display: flex; justify-content: space-between; }

/* galería, tarjetas genéricas */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.tile { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.25rem; }
.arte { display: grid; place-items: center; aspect-ratio: 4/3; font-size: 3.5rem; border-radius: 10px; margin-bottom: .75rem; background: #f9dfe8; }
.tile:nth-child(3n+2) .arte { background: #fbf0b8; }
.tile:nth-child(3n) .arte { background: #cfe8dc; }
.franja { background: var(--nopal); color: var(--blanco); }
.franja a { color: var(--limon); }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }

/* formularios */
label { display: block; font-weight: 600; margin-bottom: .75rem; }
input:not([type=radio]):not([type=checkbox]), textarea, select { display: block; width: 100%; margin-top: .25rem; padding: .6rem .75rem; border: 2px solid var(--linea); border-radius: 10px; font: inherit; background: var(--blanco); color: inherit; }
input:focus, textarea:focus, select:focus { border-color: var(--rosa); outline: none; }
.franja input, .franja textarea { border-color: transparent; }
.msg { font-weight: 600; min-height: 1.5em; }

/* faq */
details.faq { border-bottom: 1px solid var(--linea); padding: .9rem 0; }
details.faq summary { font: 800 1.1rem 'Bricolage Grotesque'; cursor: pointer; }
details.faq p { margin: .5rem 0 0; }

/* menú */
.barra { position: sticky; top: 3.7rem; z-index: 10; background: var(--papel); padding: .75rem 0; border-bottom: 1px solid var(--linea); }
.barra .fila { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.barra input[type=search] { flex: 1 1 200px; margin: 0; }
.chips { display: flex; gap: .4rem; overflow-x: auto; padding-top: .6rem; }
.chip { white-space: nowrap; padding: .35rem .9rem; border-radius: 999px; border: 2px solid var(--nopal); text-decoration: none; font-weight: 600; background: transparent; }
.chip:hover { background: var(--limon); }
.cat { scroll-margin-top: 9rem; padding-top: 2rem; }
.productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.prod { text-align: left; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; cursor: pointer; font: inherit; color: inherit; }
.prod:hover { border-color: var(--rosa); }
.prod p { font-size: .95rem; color: var(--suave); margin-bottom: .5rem; }
.precio { font-weight: 800; }
.aviso-cerrado { background: #fbf0b8; border-radius: var(--radio); padding: .75rem 1rem; margin-top: 1rem; font-weight: 600; }

/* dialogs */
dialog { border: none; border-radius: 18px; padding: 0; width: min(560px, 100% - 1.5rem); max-height: 90vh; color: var(--nopal); background: var(--papel); }
dialog::backdrop { background: #0e3b2e99; }
dialog .cuerpo { padding: 1.5rem; }
dialog .cerrar { float: right; }
fieldset { border: 2px solid var(--linea); border-radius: 12px; margin: 0 0 1rem; padding: .75rem 1rem; }
legend { font-weight: 800; padding: 0 .4rem; }
legend small { background: var(--rosa); color: var(--blanco); border-radius: 999px; padding: .05rem .5rem; margin-left: .4rem; font-weight: 600; }
fieldset label { display: flex; gap: .6rem; margin: 0 0 .4rem; font-weight: 500; }
fieldset label span:last-child { margin-left: auto; color: var(--suave); }
.cant { display: inline-flex; align-items: center; gap: .6rem; }
.cant button { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid var(--nopal); background: transparent; font-size: 1.1rem; cursor: pointer; }
.linea-carrito { display: flex; gap: .75rem; justify-content: space-between; border-bottom: 1px solid var(--linea); padding: .6rem 0; }
.linea-carrito small { display: block; color: var(--suave); }
.totales div { display: flex; justify-content: space-between; }
.totales .gran { font: 800 1.3rem 'Bricolage Grotesque'; }

/* admin */
.pedido { background: var(--blanco); border: 1px solid var(--linea); border-left: 8px solid var(--rosa); border-radius: var(--radio); padding: 1rem; margin-bottom: 1rem; }
.pedido.preparando { border-left-color: var(--limon); }
.pedido.en_camino { border-left-color: var(--nopal-2); }
.pedido.entregado { border-left-color: var(--ok); opacity: .7; }
.pedido.cancelado { border-left-color: var(--suave); opacity: .5; }
.pedido header { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

footer.pie { background: var(--nopal); color: var(--blanco); padding: 2rem 0; }
footer.pie .wrap { display: flex; gap: 1.5rem; justify-content: space-between; flex-wrap: wrap; }
footer.pie a { color: var(--limon); }
.cookies { position: fixed; inset: auto 1rem 1rem 1rem; z-index: 40; background: var(--blanco); border: 2px solid var(--nopal); border-radius: var(--radio); padding: 1rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; max-width: 640px; margin-inline: auto; }
.cookies p { margin: 0; font-size: .9rem; }

@media (max-width: 760px) {
  .hero .wrap, .dos { grid-template-columns: 1fr; }
  .comanda { transform: none; }
  nav.main { margin-left: 0; width: 100%; }
  .barra { top: 0; position: static; }
  .cat { scroll-margin-top: 1rem; }
}