/* Sitio publico K'apul'Its. Tokens de DESIGN.md. Sin JS, sin red: todo viene de /sitio/. */
@font-face {
  font-family: "Anton";
  src: url("/sitio/anton.woff2") format("woff2"); /* Anton, SIL OFL 1.1: ver anton-OFL.txt */
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #f6efe6;
  --surface: #fffaf4;
  --band: #fbe9d6;
  --text: #2d170b;
  --muted: #6b4a38;
  --guinda: #7b1e0c;
  --brand-strong: #b94c0e;
  --brand-soft: #f2bf5a;
  --chile: #c2321a;
  --chile-3: #fbe3dd;
  --chile-11: #7d1f0f;
  --o3: #fbe3cc;
  --o6: #e3b48a;
  --o11: #8f3708;
  --verde-3: #dcf0e5;
  --verde-11: #1e5a3d;
  --e1: 0 1px 2px rgb(123 30 12 / .08), 0 6px 16px -4px rgb(123 30 12 / .10);
  --e2: 0 2px 4px rgb(123 30 12 / .08), 0 14px 32px -8px rgb(123 30 12 / .16);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --titular: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --ancho: 68rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--o11); text-underline-offset: .18em; }
a:hover { color: var(--guinda); }
:focus-visible { outline: 3px solid var(--guinda); outline-offset: 3px; border-radius: 6px; }

.contenedor { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }
.salto { position: absolute; left: -999px; top: 0; background: var(--surface); padding: .75rem 1rem; z-index: 10; }
.salto:focus { left: 1rem; top: 1rem; }

/* Titulares: Anton solo en titulos, cifras y marca (DESIGN.md) */
h1, h2, .marca-nombre, .cifra {
  font-family: var(--titular);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--guinda);
  line-height: .95;
  margin: 0;
}
h1 { font-size: clamp(3rem, 12vw, 6rem); letter-spacing: .005em; }
h2 { font-size: clamp(2.1rem, 7vw, 3.25rem); }
h3 { font: 800 1.0625rem/1.25 system-ui, -apple-system, "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: .02em; margin: 0; color: var(--text); }
p { margin: 0; }
.texto > * + * { margin-top: 1rem; }
.texto { max-width: 42rem; }

.kicker {
  display: inline-block;
  padding: .25rem .75rem;
  border: 1px solid var(--o6);
  border-radius: 99px;
  font: 800 .75rem/1.4 system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--o11);
  background: var(--surface);
  margin-bottom: 1rem;
}

/* Cabecera */
.cabecera { padding-block: .75rem; }
.cabecera .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; }
.marca { display: inline-flex; align-items: center; gap: .625rem; min-height: 44px; text-decoration: none; }
.marca img { width: 40px; height: 40px; }
.marca-nombre { font-size: 1.75rem; }
.nav { display: flex; flex-wrap: wrap; gap: 0 .25rem; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: .75rem;
  font-weight: 700; text-decoration: none; color: var(--text); border-radius: 14px;
}
.nav a:hover { background: var(--o3); color: var(--o11); }

/* Botones: un solido por pantalla; el resto en tinte */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: 52px; padding: .75rem 1.5rem; border-radius: 16px; border: 0;
  font: 800 1.0625rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-decoration: none; cursor: pointer;
  background: var(--brand-strong); color: #fff; box-shadow: var(--e1);
  transition: transform 100ms var(--ease), box-shadow 160ms var(--ease);
}
.boton:hover { color: #fff; box-shadow: var(--e2); }
.boton:active { transform: scale(.97); }
.boton-suave { background: var(--o3); color: var(--o11); box-shadow: none; }
.boton-suave:hover { background: var(--o6); color: var(--guinda); box-shadow: none; }
.sprite { position: absolute; }
.icono { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .boton:hover:not(:active) { transform: translateY(-2px); } }

/* Lo que falta: visible para que nadie lo publique sin completar */
.falta {
  display: inline; padding: .1em .45em; border: 1px dashed var(--chile); border-radius: 8px;
  background: var(--chile-3); color: var(--chile-11); font-weight: 700; font-size: .9em; overflow-wrap: anywhere;
}

/* Portada */
.portada { padding-block: 1.5rem 3rem; }
.portada .contenedor { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem 3rem; }
.portada-texto { flex: 1 1 22rem; }
.portada-texto h1 + p { margin-top: 1.25rem; font-size: 1.1875rem; max-width: 32rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.portada-foto { flex: 1 1 18rem; }
.portada-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 28px; box-shadow: var(--e2); }

/* Secciones */
.seccion { padding-block: 3.5rem; }
.seccion-banda { background: var(--band); }
.encabezado { margin-bottom: 1.75rem; }

/* Colecciones: flex con crecimiento, sin filas huerfanas (DESIGN.md) */
.tarjetas { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0; margin: 0; list-style: none; }
.tarjeta { flex: 1 1 15rem; background: var(--surface); border-radius: 24px; box-shadow: var(--e1); overflow: hidden; }
.tarjeta-cuerpo { padding: 1.25rem; }
.tarjeta-cuerpo > * + * { margin-top: .5rem; }
.modalidad .icono { width: 40px; height: 40px; padding: 8px; border-radius: 14px; background: var(--o3); color: var(--o11); stroke-width: 1.75; margin-bottom: .5rem; }
.tarjeta p { color: var(--muted); }

.producto { flex: 1 1 17rem; }
.producto img, .mosaico { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mosaico {
  display: grid; place-items: center; padding: 1rem; text-align: center;
  font-family: var(--titular); font-size: 2rem; line-height: 1; text-transform: uppercase; color: var(--guinda);
  background: linear-gradient(135deg, var(--o3), var(--brand-soft));
}
.nota { margin-top: 1.5rem; max-width: 42rem; color: var(--muted); }

/* Horario */
.horario { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; }
.cifra { font-size: clamp(2.6rem, 11vw, 4.75rem); }
.horario .texto { flex: 1 1 20rem; }
.pildora {
  display: inline-block; padding: .3rem .875rem; border-radius: 99px; background: var(--verde-3); color: var(--verde-11);
  font-weight: 800; font-size: .9375rem;
}

/* Ubicacion */
.ubicacion { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; }
.ubicacion .texto { flex: 1 1 20rem; }
.direccion { font-size: 1.1875rem; font-weight: 700; }

/* Cierre con WhatsApp */
.pedir { text-align: center; }
.pedir .texto { margin-inline: auto; }
.pedir .acciones { justify-content: center; }

/* Pie */
.pie { padding-block: 2rem 3rem; color: var(--muted); font-size: .9375rem; }
.pie .contenedor { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; align-items: center; }
.pie nav { display: flex; flex-wrap: wrap; gap: 0 .25rem; }
.pie nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .5rem; }

/* Paginas legales: texto corrido, nada de Anton salvo titulos */
.legal { padding-block: 1.5rem 3rem; }
.legal .texto { max-width: 46rem; }
.legal h1 { font-size: clamp(2.4rem, 9vw, 4rem); margin-bottom: 1rem; }
.legal h2 { font-size: 1.75rem; margin-top: 2.25rem; }
.legal h2 + * { margin-top: .75rem; }
.legal ul { padding-left: 1.25rem; margin: .75rem 0 0; }
.legal li + li { margin-top: .4rem; }
.legal .vigencia { color: var(--muted); }
.legal .aviso { margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: 18px; background: var(--band); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}