/* Santa Pereza · capa de marca Ugly Ideas (nov 2026) */
:root { --f-texto: Nunito, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { font-family: var(--f-texto); }

/* fondo con trama de puntos de la paleta, sólo CSS */
body { background-image: radial-gradient(color-mix(in srgb, var(--carpa) 45%, transparent) 1px, transparent 1.4px); background-size: 22px 22px; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(20px, 5vw, 56px) clamp(32px, 6vw, 72px); overflow: hidden; }
.hero-rejilla { display: grid; gap: 20px; grid-template-areas: "arte" "texto" "hoy"; }
.hero-arte { grid-area: arte; margin: 0; justify-self: center; width: min(92vw, 520px); }
.hero-arte img { display: block; width: 100%; height: auto; }
.hero-texto { grid-area: texto; justify-items: center; text-align: center; }
.hero .hoy { grid-area: hoy; }
.hero-sello { width: 84px; height: auto; }
.hero-nombre { font-size: clamp(2.6rem, 1.6rem + 6vw, 5.2rem); }
.hero-tagline { margin: 0; font-weight: 800; font-size: clamp(1rem, .9rem + .6vw, 1.25rem); color: var(--mar); max-width: 34ch; }
.hero-lema { font-style: italic; }
.hero-acciones { justify-content: center; flex-wrap: wrap; gap: 10px; }
.hero-acciones .boton { min-height: 48px; }
.boton-principal { background: var(--terracota); color: #FBF6EC; border-color: var(--terracota); font-size: 1.05rem; }
.boton-principal:hover { background: var(--mar); border-color: var(--mar); }
@media (min-width: 900px) {
  .hero-rejilla { grid-template-columns: 1.1fr 1fr; grid-template-areas: "texto arte" "hoy arte"; align-items: center; }
  .hero-texto { justify-items: start; text-align: left; }
  .hero-acciones { justify-content: flex-start; }
}
@keyframes girito { from { rotate: 0deg; } to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .hero-arte { animation: none; } }
/* el mandala no debe girar el texto del centro: giro muy lento + pausado si se quiere leer */
.hero-arte:hover { animation-play-state: paused; }

/* ---------- carta ---------- */
.cn { position: sticky; top: var(--alto-cab); z-index: 5; display: grid; gap: 6px; margin: 14px calc(var(--margen) * -1) 8px; padding: 8px var(--margen);
  background: color-mix(in srgb, var(--fondo) 94%, transparent); backdrop-filter: blur(6px); border-bottom: 3px solid var(--dorado); }
.cn-fila { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; align-items: center; }
.cn-fila::-webkit-scrollbar { display: none; }
.cn-rot { flex: none; font-family: var(--f-cartel); color: var(--terracota); font-size: .95rem; min-width: 3.6em; }
.cn-chip { flex: none; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--carpa); background: var(--papel); color: var(--tinta); text-decoration: none; font-weight: 700; font-size: .88rem; white-space: nowrap; }
.cn-chip:hover, .cn-chip:focus-visible { background: var(--mar); border-color: var(--mar); color: #FBF6EC; }
.cl-grupo, .cl-plato { scroll-margin-top: calc(var(--alto-cab) + 110px); }

.cl-bloque { text-align: center; padding: 36px 0 6px; display: grid; justify-items: center; gap: 6px; }
.cl-bloque-titulo { font-family: var(--f-cartel); font-weight: 400; font-size: clamp(2rem, 1.4rem + 3vw, 3rem); margin: 0; color: var(--tinta); text-shadow: 2px 2px 0 var(--dorado); }
.cl-bloque-barra { margin-top: 36px; border-top: 3px dotted var(--terracota); }
.cl-mandala { width: 120px; height: auto; border-radius: 18px; box-shadow: 0 6px 0 var(--dorado); }

.cl-grupo { background: var(--papel); border: 1.5px solid var(--linea); border-radius: 16px; padding: 18px clamp(14px, 4vw, 28px) 8px; margin: 18px 0; }
.cl-grupo-titulo { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }
.cl-grupo-barra .cl-grupo-titulo { color: var(--terracota); }
.cl-grupo-barra .cl-grupo-titulo::before { background-image: url(/img/mandala-terracota-320.webp); border-radius: 8px; }
.cl-fila { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: baseline; }
.cl-nombre { font-family: var(--f-titulo); font-size: 1.06rem; margin: 0; }
.cl-carta { margin: 3px 0 0; color: var(--suave); line-height: 1.45; }
.cl-precio { font-weight: 800; color: var(--terracota); white-space: nowrap; }
.cl-etqs:empty { display: none; }
.etq-vegano, .etq-vegetariano { background: color-mix(in srgb, var(--mar) 14%, transparent); color: var(--mar); border-color: var(--mar); }

.cl-plato-fruta { background: linear-gradient(135deg, color-mix(in srgb, var(--dorado) 22%, transparent), transparent 70%); border-radius: 12px; padding-inline: 8px; }
.cl-fruta { display: grid; gap: 8px; }
.fr-siempre { font-weight: 700; color: var(--tinta); }
.fr-temporada { display: block; padding: 8px 12px; border: 1.5px dashed var(--mar); border-radius: 10px; background: var(--fondo); }
.fr-sello { display: block; font-family: var(--f-cartel); color: var(--mar); font-size: .95rem; }

@media (prefers-color-scheme: dark) {
  .boton-principal { background: var(--dorado); color: #12241A; border-color: var(--dorado); }
  .cn-rot, .cl-grupo-barra .cl-grupo-titulo, .cl-precio { color: #E9A68C; }
  .cl-bloque-titulo { text-shadow: 2px 2px 0 var(--esmeralda); }
}

/* v3: mandala terracota como protagonista del hero */
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero-arte { width: min(86vw, 440px); aspect-ratio: 1; border-radius: clamp(22px, 5vw, 36px); overflow: hidden; box-shadow: 0 10px 0 var(--dorado), 0 18px 40px rgb(18 36 26 / .25); }
.hero-arte img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .hero-arte { width: min(42vw, 520px); } }
@media (prefers-color-scheme: dark) { .hero-arte { box-shadow: 0 10px 0 var(--esmeralda), 0 18px 40px rgb(0 0 0 / .5); } }