/* El Pasticho · sitio claro por páginas.
   Layout: barra y pie en carbón con dorado; contenido sobre crema cálido; el dorado oscuro marca precios y acciones. */
:root {
  color-scheme: light;
  --crema: #F7F1E6;
  --papel: #FFFCF6;
  --carbon: #1E1C1A;
  --noche: #181818;
  --suave: #6B6157;
  --linea: #E6DAC7;
  --dorado: #C9A063;
  --dorado-claro: #F3DD9C;
  --dorado-oscuro: #A9783A;
  --dorado-texto: #8A6126;
  --verde: #1F7A4A;
  --rojo: #CD212A;
  --display: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;
  --cuerpo: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --radio: 10px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--crema); color: var(--carbon); font-family: var(--cuerpo); font-weight: 300; font-size: 16px; line-height: 1.6; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--dorado-oscuro); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; text-transform: uppercase; letter-spacing: 0.035em; line-height: 1.08; }
p { margin: 0; }
.ancho { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dorado-texto); }
.suave { color: var(--suave); }

/* Barra: logo al centro, secciones repartidas a los lados */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--noche); }
.barra { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--noche); color: #F4F1EA; border-bottom: 1px solid #2c2925; }
.barra .ancho { display: grid; grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); align-items: center; gap: 24px; height: 68px; }
.nav-lado { display: flex; align-items: center; gap: 28px; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.nav-lado.izq { justify-content: flex-end; }
.nav-lado.der { justify-content: flex-start; }
.nav-lado a:not(.boton) { text-decoration: none; color: #CFC7BA; padding-block: 6px; border-bottom: 1px solid transparent; }
.nav-lado a:not(.boton):hover { color: #fff; }
.nav-lado a[aria-current="page"] { color: var(--dorado-claro); border-bottom-color: var(--dorado); }
.nav-lado .pedir-barra { margin-left: auto; }
.marca { grid-column: 2; justify-self: center; display: block; align-self: start; height: 68px; position: relative; z-index: 2; }
.marca img { width: 96px; height: 96px; margin-top: 6px; border-radius: 50%; background: var(--noche); padding: 4px; box-shadow: 0 10px 24px -12px rgba(0,0,0,0.8); transition: width .3s ease, height .3s ease, margin .3s ease, padding .3s ease, box-shadow .3s ease, transform .2s ease; }
.barra.compacta .marca img { width: 58px; height: 58px; margin-top: 5px; padding: 0; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .marca img { transition: none; } }
.marca:hover img { transform: scale(1.04); }
.barra .menu-movil, .barra .nav-movil, .barra .carrito-movil { display: none; }
.menu-movil { background: none; border: 0; color: #F4F1EA; width: 44px; height: 44px; padding: 10px; border-radius: 50%; cursor: pointer; justify-self: end; }
.menu-movil svg { width: 24px; height: 24px; display: block; }
.menu-movil[aria-expanded="true"] { color: var(--dorado-claro); }
@media (max-width: 900px) {
  .barra .ancho { height: 60px; gap: 12px; grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr); }
  .nav-lado { display: none; }
  .barra .menu-movil { display: block; grid-column: 3; grid-row: 1; }
  .barra .carrito-movil { display: block; grid-column: 1; grid-row: 1; justify-self: start; }
  .marca { grid-column: 2; grid-row: 1; height: 60px; }
  .marca img { width: 64px; height: 64px; margin-top: 4px; padding: 2px; }
  .barra.compacta .marca img { width: 46px; height: 46px; margin-top: 7px; }
  .nav-movil { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; background: var(--noche); padding: 24px max(16px, env(safe-area-inset-left, 0px)) 16px; border-top: 1px solid #2e2b28; }
  .barra .nav-movil.abierto { display: flex; }
  .nav-movil a { padding-block: 12px; border-bottom: 1px solid #2e2b28; font-size: 16px; text-decoration: none; color: #E9E2D6; }
  .nav-movil a[aria-current="page"] { color: var(--dorado-claro); }
}

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 14px var(--cuerpo); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: #1a1408; background: linear-gradient(100deg, var(--dorado-oscuro), var(--dorado) 50%, var(--dorado-claro)); border-radius: 999px; padding: 13px 24px; border: 0; cursor: pointer; transition: transform .15s ease, filter .15s ease; }
.boton:hover { filter: brightness(1.05); transform: translateY(-1px); }
.boton svg { width: 18px; height: 18px; flex: none; }
.boton.borde { background: transparent; color: var(--dorado-texto); border: 1.5px solid var(--dorado-oscuro); padding: 9px 18px; font-size: 12.5px; }
.boton.borde:hover { background: rgba(169,120,58,0.08); }
.boton.claro { background: rgba(255,255,255,0.12); color: #fff; border: 1.5px solid rgba(255,255,255,0.6); backdrop-filter: blur(4px); }
.barra .boton.borde { color: var(--dorado-claro); border-color: var(--dorado); }
.barra .ancho { position: relative; }

/* Héroe del inicio */
.heroe { position: relative; min-height: max(460px, calc(100svh - 69px - 150px)); display: grid; align-items: end; overflow: hidden; background: var(--noche); color: #fff; }
.heroe .fondo { position: absolute; inset: 0; }
.heroe .fondo img, .heroe .fondo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.heroe .fondo img { opacity: 0; animation: diapositiva 18s infinite; }
.heroe .fondo img:nth-child(2) { animation-delay: 6s; }
.heroe .fondo img:nth-child(3) { animation-delay: 12s; }
@keyframes diapositiva {
  0% { opacity: 0; transform: scale(1.12) translate(1%, 1%); }
  6% { opacity: 1; }
  33% { opacity: 1; }
  40% { opacity: 0; transform: scale(1) translate(0, 0); }
  100% { opacity: 0; }
}
.heroe::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,12,10,0.92) 0%, rgba(14,12,10,0.55) 45%, rgba(14,12,10,0.15) 100%); }
.heroe .ancho { position: relative; z-index: 1; padding-block: 64px 56px; display: flex; flex-direction: column; gap: 18px; width: 100%; }
.heroe .eyebrow { color: var(--dorado-claro); }
.heroe h1 { font-size: clamp(42px, 8vw, 92px); max-width: 12ch; animation: subir .9s ease both .2s; }
.heroe h1 span { background: linear-gradient(100deg, var(--dorado), var(--dorado-claro) 60%, var(--dorado)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.heroe .lead { font-size: 18px; max-width: 44ch; color: #E9E2D6; animation: subir .9s ease both .45s; }
.heroe .acciones { display: flex; flex-wrap: wrap; gap: 12px; animation: subir .9s ease both .7s; }
@keyframes subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .heroe .fondo img { animation: none; opacity: 0; }
  .heroe .fondo img:first-child { opacity: 1; }
  .heroe h1, .heroe .lead, .heroe .acciones { animation: none; }
}

/* Cabecera de páginas internas */
.cabeza { background: var(--noche); color: #F4F1EA; }
.cabeza .ancho { padding-block: 52px 32px; display: flex; flex-direction: column; gap: 12px; }
.cabeza .eyebrow { color: var(--dorado); }
.cabeza h1 { font-size: clamp(40px, 7vw, 72px); color: #fff; }
.cabeza p { color: #CFC7BA; max-width: 58ch; font-size: 17px; }

/* Bloques */
.bloque { padding-block: 72px; }
.bloque.papel { background: var(--papel); border-block: 1px solid var(--linea); }
.cabecera { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.cabecera h2 { font-size: clamp(32px, 5vw, 48px); }
.cabecera p { color: var(--suave); max-width: 60ch; }
.cabecera.centro { align-items: center; text-align: center; }

/* Franja de datos */
.datos { background: var(--papel); border-bottom: 1px solid var(--linea); }
.datos ul { list-style: none; margin: 0 auto; padding-block: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.datos li { display: flex; gap: 14px; align-items: center; }
.datos .ico { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--crema); border: 1px solid var(--linea); display: grid; place-items: center; color: var(--dorado-texto); }
.datos .ico svg { width: 22px; height: 22px; }
.datos b { display: block; font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: 0.03em; text-transform: uppercase; }
.datos span { font-size: 13.5px; color: var(--suave); }
@media (max-width: 760px) { .datos ul { grid-template-columns: 1fr; } }

/* Tarjetas de producto */
.tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 700px) { .tarjetas { grid-template-columns: 1fr; } }
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: transform .2s ease, box-shadow .2s ease; }
.tarjeta:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(60,40,10,0.35); }
.tarjeta img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tarjeta .cuerpo { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tarjeta h3 { font-size: 20px; }
.tarjeta p { font-size: 14.5px; color: var(--suave); }
.tarjeta .fila { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.precio { font-weight: 600; color: var(--dorado-texto); font-variant-numeric: tabular-nums; font-size: 19px; white-space: nowrap; }

/* Pasos */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: paso; }
@media (max-width: 760px) { .pasos { grid-template-columns: 1fr; } }
.pasos li { counter-increment: paso; display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 2px solid var(--dorado); }
.pasos li::before { content: counter(paso); font-family: var(--display); font-size: 40px; line-height: 1; color: var(--dorado-oscuro); }
.pasos h3 { font-size: 21px; }
.pasos p { color: var(--suave); font-size: 15px; }

/* Bloque partido imagen + texto */
.partido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 820px) { .partido { grid-template-columns: 1fr; gap: 28px; } }
.partido .media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); }
.partido .texto { display: flex; flex-direction: column; gap: 16px; }
.partido .texto h2 { font-size: clamp(32px, 5vw, 46px); }
.partido .texto p { color: var(--suave); }
.oscuro { background: var(--noche); color: #F4F1EA; }
.oscuro .eyebrow { color: var(--dorado); }
.oscuro .partido .texto p, .oscuro .suave { color: #CFC7BA; }

/* Carta (página de menú) */
.pestanas { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 68px); z-index: 20; background: var(--crema); border-bottom: 1px solid var(--linea); }
.pestanas .ancho { display: flex; gap: 8px; padding-block: 10px; overflow-x: auto; }
.pestanas a { flex: none; text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--linea); background: var(--papel); }
.pestanas a:hover { border-color: var(--dorado-oscuro); }
@media (max-width: 700px) {
  .pestanas .ancho { gap: 6px; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); scrollbar-width: none; }
  .pestanas .ancho::-webkit-scrollbar { display: none; }
  .pestanas a { font-size: 13px; padding: 7px 12px; }
}
.carta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 820px) { .carta { grid-template-columns: 1fr; } }
.plato { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; min-width: 0; }
.plato h3 { font-size: 22px; }
.plato p { grid-column: 1 / -1; font-size: 14.5px; color: var(--suave); }
.plato .pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 8px; }
.plato .pie .boton { margin-left: auto; }
.etiqueta { font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--crema); border: 1px solid var(--linea); color: var(--suave); }
.etiqueta.veg { background: #EAF4EC; border-color: #BFDCC8; color: var(--verde); }
.tamanos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14.5px; color: var(--suave); }
.tamanos b { color: var(--dorado-texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.aviso { display: flex; gap: 12px; align-items: center; background: #FBF3E3; border: 1px solid #EBD8B4; border-radius: var(--radio); padding: 14px 18px; margin-bottom: 20px; font-size: 15px; }
.aviso b { font-weight: 600; }
.galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.galeria img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radio); }
.nota-foto { margin-top: 10px; font-size: 13px; color: var(--suave); }
.seccion-menu { scroll-margin-top: 130px; }
.pestanas + .bloque { padding-top: 36px; }
#mas-vendidas .cabecera { margin-bottom: 20px; }
.seccion-menu + .seccion-menu { margin-top: 64px; }

/* Preparación */
.metodos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .metodos { grid-template-columns: 1fr; } }
.metodo { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.metodo .tit { display: flex; align-items: center; gap: 12px; }
.metodo .tit svg { width: 36px; height: 36px; flex: none; color: var(--dorado-texto); }
.metodo h3 { font-size: 22px; }
.metodo .clave { font-family: var(--display); font-size: 34px; color: var(--dorado-texto); font-variant-numeric: tabular-nums; line-height: 1; }
.metodo .clave small { font-family: var(--cuerpo); font-size: 14px; color: var(--suave); }
.metodo ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.metodo ol b { font-weight: 600; }
.metodo .nota { font-size: 13px; color: var(--suave); border-top: 1px solid var(--linea); padding-top: 12px; }
.consejos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.consejos span { font-size: 14px; padding: 8px 14px; border-radius: 999px; background: var(--papel); border: 1px solid var(--linea); }

/* Formulario de eventos */
.cotizador { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 620px) { .cotizador { grid-template-columns: 1fr; } }
.cotizador label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 500; }
.cotizador input, .cotizador select, .cotizador textarea { font: 400 15px var(--cuerpo); color: var(--carbon); background: #fff; border: 1px solid var(--linea); border-radius: 8px; padding: 11px 12px; width: 100%; }
.cotizador .todo { grid-column: 1 / -1; }
.cotizador textarea { min-height: 84px; resize: vertical; }
.cotizador .boton { justify-self: start; }

/* Contacto */
.cajas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 820px) { .cajas { grid-template-columns: 1fr; } }
.caja { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.caja h3 { font-size: 20px; color: var(--dorado-texto); }
.caja .grande { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.caja p { font-size: 14.5px; color: var(--suave); }
.caja .boton { align-self: start; margin-top: 8px; }

.cobertura { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cobertura .cajas.zonas { grid-template-columns: 1fr; gap: 14px; }
@media (max-width: 820px) { .cobertura { grid-template-columns: 1fr; } }
.mapa { margin: 0; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px; }
.mapa-cobertura { display: block; width: 100%; height: auto; }
.mapa-cobertura path { stroke: #fff; stroke-width: 1; stroke-linejoin: round; }
.mapa-cobertura path.atiende { fill: var(--dorado); }
.mapa-cobertura path.fuera { fill: #E4DCCF; }
.mapa-cobertura path.alto { fill: #E3C99A; }
.mapa-cobertura text { font: 600 13px var(--cuerpo); fill: #3a2a12; text-anchor: middle; paint-order: stroke; stroke: rgba(255,252,246,0.85); stroke-width: 3px; }
.mapa-cobertura path.via { fill: none; stroke: #7a5320; stroke-width: 2; stroke-dasharray: 5 4; }
.mapa-cobertura text.via { font-size: 11px; font-weight: 500; fill: #7a5320; }
.mapa-cobertura text.nada { font-weight: 500; fill: #6b4a1c; }
.mapa-cobertura text.fuera { fill: var(--suave); font-weight: 500; }
.mapa figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--suave); padding: 10px 4px 2px; }
.ref { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.ref.atiende { background: var(--dorado); }
.ref.fuera { background: #E4DCCF; }
.ref.alto { background: #E3C99A; }
.mapa figcaption > span { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
.nota-zonas { margin-top: 18px; font-size: 15px; color: var(--suave); }
.nota-zonas b { color: var(--carbon); }
.zonas + .nota-zonas { max-width: 70ch; }


/* Llamado final */
.llamado { background: var(--noche); color: #F4F1EA; text-align: center; }
.llamado .ancho { padding-block: 72px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.llamado h2 { font-size: clamp(32px, 5vw, 52px); }
.llamado p { color: #CFC7BA; max-width: 46ch; }

/* Pie */
footer { background: #121212; color: #A9A196; font-size: 14px; padding-bottom: 96px; }
footer a { color: inherit; text-decoration: none; }
footer a:hover { color: #fff; }
footer p { margin: 0; }
.pie { padding-block: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.pie > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 12px; }
.pie-enlaces { flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 2px 24px !important; }
.pie-nombre { font-family: var(--display); font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dorado); }
.pie-final { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 20px; text-align: center; padding-block: 8px 10px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 12.5px; color: #7D766C; }
@media (min-width: 821px) { footer { padding-bottom: 0; } }

/* Carrito */
.cuenta { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--dorado); color: #1a1408; font-size: 11.5px; font-weight: 600; letter-spacing: 0; line-height: 1; }
.cuenta[hidden] { display: none; }
.carrito-movil { position: relative; background: none; border: 0; color: #F4F1EA; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
.carrito-movil svg { width: 24px; height: 24px; display: block; }
.carrito-movil .cuenta { position: absolute; top: 2px; right: -2px; }
.boton.hecho, .boton.hecho:hover { background: var(--verde); border-color: var(--verde); color: #fff; }
.elige { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.plato .pie .elige .boton { margin-left: 0; }
.opcion { font: 500 13.5px var(--cuerpo); color: var(--carbon); background: #fff; border: 1px solid var(--linea); border-radius: 999px; padding: 8px 12px; }
.carrito-fondo { position: fixed; inset: 0; z-index: 40; background: rgba(20,16,12,0.5); }
.carrito { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(440px, 100%); background: var(--crema); box-shadow: -20px 0 40px -20px rgba(0,0,0,0.5); display: flex; flex-direction: column; overflow-y: auto; transform: translateX(100%); transition: transform .25s ease; padding-bottom: env(safe-area-inset-bottom, 0px); }
.carrito.abierto { transform: none; }
@media (prefers-reduced-motion: reduce) { .carrito { transition: none; } }
body.carrito-abierto { overflow: hidden; }
.carrito-cabeza { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: var(--noche); color: #F4F1EA; }
.carrito-cabeza h2 { font-size: 24px; }
.carrito .cerrar { background: none; border: 0; color: inherit; font-size: 30px; line-height: 1; width: 44px; height: 44px; cursor: pointer; }
.carrito-vacio, .carrito-lleno { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.carrito-vacio { align-items: flex-start; }
.carrito.vacio .carrito-lleno, .carrito:not(.vacio) .carrito-vacio { display: none; }
.carrito-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.carrito-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.carrito-lista li > div:first-child { display: flex; flex-direction: column; font-size: 15px; }
.carrito-lista li > div:first-child span { font-size: 13px; color: var(--suave); }
.carrito-lista .subtotal { grid-column: 2; grid-row: 2; justify-self: end; font-weight: 600; color: var(--dorado-texto); font-variant-numeric: tabular-nums; }
.cantidad { grid-row: 2; display: inline-flex; align-items: center; border: 1px solid var(--linea); border-radius: 999px; background: var(--papel); justify-self: start; }
.cantidad button { width: 36px; height: 36px; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--carbon); }
.cantidad output { min-width: 24px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.carrito-form select { font: 400 16px var(--cuerpo); color: var(--carbon); background: #fff; border: 1px solid var(--linea); border-radius: 8px; padding: 11px 12px; width: 100%; }
.ubicacion { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
#ubic-res { font-size: 13.5px; color: var(--verde); font-weight: 500; }
.buscar-barrio { font-weight: 400 !important; color: var(--suave); }
#barrio-res { color: var(--verde); font-weight: 500; }
.cuentas { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-block: 1px solid var(--linea); font-size: 15px; }
.cuentas div { display: flex; justify-content: space-between; align-items: baseline; font-variant-numeric: tabular-nums; }
.cuentas .final b { font-family: var(--display); font-size: 28px; font-weight: 500; color: var(--dorado-texto); }
.dom-falta { font-size: 13.5px; color: var(--dorado-texto); }
.dom-falta[hidden], .carrito .aviso[hidden] { display: none; }
.carrito-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; }
.carrito-total b { font-family: var(--display); font-size: 28px; font-weight: 500; color: var(--dorado-texto); font-variant-numeric: tabular-nums; }
.carrito-nota { font-size: 13.5px; color: var(--suave); margin-top: -8px; }
.carrito .aviso { margin: 0; font-size: 14px; }
.carrito .aviso[hidden] { display: none; }
.carrito-form { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.carrito-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 500; }
.carrito-form input, .carrito-form textarea { font: 400 16px var(--cuerpo); color: var(--carbon); background: #fff; border: 1px solid var(--linea); border-radius: 8px; padding: 11px 12px; width: 100%; }
.carrito-form .boton { margin-top: 4px; }
.carrito-enviado { font-size: 14px; color: var(--verde); }
.carrito-enviado button { background: none; border: 0; padding: 0; font: inherit; color: var(--suave); text-decoration: underline; cursor: pointer; }

/* Botón fijo en el celular */
.flotante { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: linear-gradient(to top, rgba(247,241,230,1) 55%, rgba(247,241,230,0)); display: none; }
.flotante .boton { width: 100%; box-shadow: 0 10px 24px -12px rgba(60,40,10,0.6); }
.flotante .con-pedido, .con-carrito .flotante .sin-pedido { display: none; }
.con-carrito .flotante .con-pedido { display: inline-flex; }
@media (max-width: 820px) { .flotante { display: block; } }

/* Aparecer al hacer scroll (solo si hay JS y movimiento permitido) */
.js .revelar { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.js .revelar.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .revelar { opacity: 1; transform: none; transition: none; } }

/* Franja de marca en el inicio */
.marca-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.marca-fotos img { width: 100%; height: 100%; aspect-ratio: 6 / 5; object-fit: cover; border-radius: var(--radio); border: 1px solid var(--linea); }
@media (max-width: 700px) { .marca-fotos { grid-template-columns: 1fr; gap: 14px; } }

/* Nosotros */
.historia { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 56px; align-items: center; }
.historia-logo { background: var(--noche); border-radius: var(--radio); aspect-ratio: 1; display: grid; place-items: center; }
.historia-logo img { width: 62%; height: auto; }
.historia .texto { display: flex; flex-direction: column; gap: 16px; }
.historia h2 { font-size: clamp(32px, 5vw, 46px); }
.historia p { color: var(--suave); margin: 0; }
.historia em { color: var(--carbon); }
.firma { font-family: var(--display); font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--carbon) !important; display: flex; flex-direction: column; }
.firma span { font-family: var(--cuerpo); font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--suave); }
.cierre { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.cierre h2 { font-size: clamp(32px, 5vw, 46px); }
.cierre .acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cierre .boton.borde { padding: 12px 24px; font-size: 14px; }
@media (max-width: 820px) { .historia { grid-template-columns: 1fr; gap: 28px; } .historia-logo { max-width: 320px; } }

/* Páginas legales */
.legal { max-width: 760px; }
.legal h2 { font-size: 22px; margin: 32px 0 10px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--suave); }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 20px; }
.legal a { color: var(--dorado-texto); }
.ingredientes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ingredientes li { background: var(--crema); border: 1px solid var(--linea); border-top: 3px solid var(--dorado); border-radius: var(--radio); padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.ingredientes h3 { font-size: 21px; }
.ingredientes p { margin: 0; color: var(--suave); font-size: 15px; }
@media (max-width: 900px) { .ingredientes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ingredientes { grid-template-columns: 1fr; } }
.pie-final nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 20px; }
@media (max-width: 600px) {
  footer { font-size: 12.5px; }
  .pie-enlaces { gap: 2px 14px !important; }
  .pie-final { font-size: 11px; gap: 0 14px; }
  .pie-final nav { gap: 0 14px; }
}
.pie > div:first-child { flex-direction: column; align-items: center; gap: 0; }
.pie { padding-top: 14px; }
.pie-nombre { line-height: 1; margin-bottom: 9px !important; }

/* Página temporal "muy pronto" */
.heroe .pronto { margin: 4px 0 0; font-size: 0.95rem; color: var(--dorado-claro, #C9A063); max-width: 34em; }
@media (min-width: 901px) {
  .barra .ancho { grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr); }
  .marca img { width: 150px; height: 150px; margin-top: 8px; padding: 5px; }
  .heroe { min-height: max(440px, calc(100svh - 69px - 87px)); }
  .heroe .ancho { padding-block: 84px 20px; gap: 10px; }
  .heroe h1 { font-size: clamp(42px, 4.4vw, 62px); max-width: 20ch; }
  .heroe .lead { font-size: 17px; max-width: 62ch; }
  .heroe .pronto { max-width: 70ch; }
  .datos ul { padding-block: 14px; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .heroe h1 { font-size: 52px; }
  .heroe .lead { font-size: 16px; }
}