:root {
  --principal: #3b2a20;
  --acento: #a65f26;
  --texto: #23201c;
  --suave: #5f5a52;
  --fondo: #faf7f2;
  --fondo-alt: #f0ebe2;
  --radio: 12px;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texto); background: var(--fondo); }
img { display: block; max-width: 100%; }
a { color: var(--principal); }
h1, h2, h3 { font-family: var(--serif); font-weight: normal; line-height: 1.2; }
h2 { font-size: clamp(1.6rem, 5vw, 2.2rem); margin-bottom: 1.5rem; text-align: center; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
[hidden] { display: none !important; }

.icono { width: 1.6em; height: 1.6em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.boton { display: inline-block; padding: .8rem 1.4rem; border: 0; border-radius: 999px; background: var(--acento); color: #fff; font: inherit; font-weight: 600; text-decoration: none; text-align: center; cursor: pointer; transition: filter .2s; }
.boton:hover { filter: brightness(1.1); }
.boton.secundario { background: none; color: var(--principal); border: 2px solid var(--principal); }
.texto { min-height: 2.75rem; border: 0; background: none; color: var(--suave); font: inherit; text-decoration: underline; cursor: pointer; }

/* Portada */
.portada { position: relative; min-height: 70svh; display: grid; align-items: end; color: #fff; }
.portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--principal); }
.portada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .7), rgb(0 0 0 / .1) 60%); }
.portada-texto { position: relative; z-index: 1; padding: 2rem 1.25rem 3rem; max-width: 46rem; }
.zona { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; opacity: .9; }
.portada h1 { font-size: clamp(2.4rem, 9vw, 4.2rem); margin: .3rem 0 .6rem; }
.bajada { font-size: 1.1rem; margin-bottom: 1.6rem; max-width: 34rem; }

/* Secciones */
.seccion { padding: 4rem 1.25rem; }
.seccion > * { max-width: 64rem; margin-inline: auto; }
.fondo { background: var(--fondo-alt); }
.aviso { text-align: center; color: var(--suave); }

/* Catálogo */
.categorias { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1.5rem; }
.categorias a { flex: none; display: inline-flex; align-items: center; min-height: 2.75rem; padding: .4rem 1rem; border-radius: 999px; background: var(--fondo-alt); text-decoration: none; }
.titulo-categoria { font-size: 1.5rem; margin: 2rem 0 1rem; scroll-margin-top: 1rem; }
.grilla-productos { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.producto { display: flex; flex-direction: column; background: #fff; border-radius: var(--radio); overflow: hidden; box-shadow: 0 1px 4px rgb(0 0 0 / .1); }
.producto > img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--fondo-alt); }
.producto .cuerpo { display: flex; flex-direction: column; gap: .6rem; padding: 1rem; flex: 1; }
.producto h4 { font-size: 1.2rem; }
.producto p { color: var(--suave); font-size: .95rem; }
.producto .precio { color: var(--texto); font-weight: 700; font-size: 1.2rem; }
.sin-stock > img { opacity: .5; filter: grayscale(1); }
.agotado { color: var(--texto); font-weight: 700; }
.agotado { font-weight: 700; color: var(--acento) !important; }
.variantes { border: 0; padding: 0; display: grid; gap: .3rem; }
.variantes legend { font-size: .85rem; color: var(--suave); }
.variante { display: flex; gap: .5rem; align-items: center; padding: .5rem .6rem; border: 1px solid #cfc8bb; border-radius: 8px; cursor: pointer; }
.variante:has(:checked) { border-color: var(--principal); background: var(--fondo-alt); }
.opcion { display: grid; gap: .2rem; font-size: .85rem; color: var(--suave); }
.opcion select { font: inherit; padding: .5rem; border: 1px solid #b9b1a4; border-radius: 8px; background: #fff; color: var(--texto); }
.detalles { display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; font-size: .85rem; }
.detalles dt { font-weight: 600; }
.acciones { display: grid; gap: .5rem; margin-top: auto; padding-top: .5rem; }

/* Ubicación y cierre */
.direccion { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-bottom: 1.5rem; color: var(--suave); }
.ubicacion iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radio); background: var(--fondo-alt); }
.ubicacion p { margin-top: .5rem; font-size: .95rem; }
.puntos { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.puntos li { display: grid; padding: 1rem; background: var(--fondo); border-radius: var(--radio); }
.puntos span { color: var(--suave); font-size: .9rem; }
.cierre { text-align: center; }
.cierre p { max-width: 32rem; margin: 0 auto 1.6rem; }

/* Pie */
.pie { display: grid; gap: 2rem; padding: 3rem 1.25rem 7rem; background: var(--principal); color: #fff; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.pie h2 { text-align: left; font-size: 1.5rem; margin-bottom: .5rem; }
.pie h3 { font-size: 1rem; margin-bottom: .8rem; }
.pie a { color: #fff; display: inline-flex; align-items: center; gap: .5rem; padding: .3rem 0; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie .icono { width: 1.2em; height: 1.2em; }
.horarios dt { font-weight: 600; }
.horarios dd { margin-bottom: .5rem; opacity: .9; }

.wa-flotante { position: fixed; right: 1rem; bottom: 1rem; z-index: 10; width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border-radius: 50%; background: #128c7e; color: #fff; box-shadow: 0 4px 14px rgb(0 0 0 / .25); transition: opacity .3s, visibility .3s; }
.wa-flotante.oculto { opacity: 0; visibility: hidden; }
.wa-flotante svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.barra-carrito { position: fixed; left: 1rem; right: 5.5rem; bottom: 1rem; z-index: 10; padding: .9rem 1rem; border: 0; border-radius: 999px; background: var(--principal); color: #fff; font: inherit; font-weight: 600; box-shadow: 0 4px 14px rgb(0 0 0 / .3); cursor: pointer; }

/* Carrito */
#carrito { width: min(100% - 1rem, 30rem); max-height: 92svh; margin: auto; padding: 1.25rem; border: 0; border-radius: var(--radio); background: var(--fondo); }
#carrito::backdrop { background: rgb(0 0 0 / .6); }
#carrito[open] { display: grid; gap: .8rem; }
.cabecera-carrito { display: flex; justify-content: space-between; align-items: center; }
.cabecera-carrito h2 { margin: 0; font-size: 1.4rem; }
.cabecera-carrito button { width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--fondo-alt); font-size: 1.1rem; cursor: pointer; }
.lineas li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--fondo-alt); }
.cantidad { display: flex; align-items: center; gap: .5rem; flex: none; }
.cantidad button { width: 2.75rem; height: 2.75rem; border: 1px solid #b9b1a4; border-radius: 50%; background: #fff; font-size: 1.1rem; cursor: pointer; }
.total { font-size: 1.1rem; }
.datos-pedido { display: grid; gap: .6rem; }
.datos-pedido label { display: grid; gap: .2rem; font-size: .9rem; font-weight: 600; }
.datos-pedido input:not([type="radio"]), .datos-pedido textarea { font: inherit; font-weight: 400; padding: .6rem; border: 1px solid #b9b1a4; border-radius: 8px; background: #fff; }
.entrega { display: flex; gap: 1rem; border: 0; padding: 0; }
.entrega legend { font-size: .9rem; font-weight: 600; margin-bottom: .2rem; }
.entrega label { display: flex; flex-direction: row; align-items: center; gap: .4rem; font-weight: 400; }
.nota { font-size: .85rem; color: var(--suave); }

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

/* 16 px en los campos: con menos, iPhone hace zoom al tocarlos. */
.datos-pedido input:not([type=radio]), .datos-pedido textarea, .opcion select { font-size: 1rem; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }