/* Mazalán Producciones — estilo único del sitio (portada y páginas de espectáculo).
   Neutro: fondo claro, tipografía Inter, el color lo ponen los afiches. Modo oscuro automático. */
:root{
  color-scheme:light dark;
  --bg:#fafaf9;--surface:#fff;--ink:#18181b;--ink-2:#3f3f46;--muted:#71717a;--line:#e4e4e7;--soft:#f4f4f5;
  --primary:#18181b;--on-primary:#fff;--accent:#b4232f;--ok:#15803d;--warn:#b45309;
  --radius:12px;--maxw:1180px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0c0c0d;--surface:#161618;--ink:#f4f4f5;--ink-2:#d4d4d8;--muted:#a1a1aa;--line:#2a2a2e;--soft:#1f1f22;--primary:#f4f4f5;--on-primary:#111;--accent:#f87171;--ok:#4ade80;--warn:#fbbf24}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--font);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:16px}
.wrap.narrow>*{max-width:820px} /* texto angosto, alineado con el resto */
.center{text-align:center}
.muted{color:var(--muted)}.sm{font-size:13px}
.sr{position:absolute;left:-9999px}.sr:focus{left:16px;top:16px;z-index:100;background:var(--surface);padding:8px 12px;border-radius:8px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* Barra superior */
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:20px;min-height:68px}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand img{height:48px;width:auto}
@media (max-width:560px){.brand img{height:42px}}
footer .brand img{height:48px}
.navlinks{display:flex;gap:22px;margin-left:auto}
.navlinks a{text-decoration:none;font-size:14px;font-weight:500;color:var(--ink-2)}
.navlinks a:hover{color:var(--ink)}
@media (max-width:720px){.navlinks{display:none}.topbar .actions{margin-left:auto}}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;font:600 15px/1 var(--font);padding:13px 20px;border-radius:999px;transition:background .15s,transform .15s,box-shadow .15s;white-space:nowrap}
.btn.primary{background:var(--primary);color:var(--on-primary)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn.wa{background:#25d366;color:#fff}
.btn.wa:hover{background:#1ebe5b}
.btn.sm{padding:9px 14px;font-size:13.5px}
.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* Encabezados de sección */
.kicker{display:block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.h1{font-size:clamp(34px,5vw,56px);line-height:1.05;letter-spacing:-.02em;font-weight:800;margin:6px 0 10px;text-wrap:balance}
.h2{font-size:clamp(24px,3vw,32px);line-height:1.15;letter-spacing:-.01em;font-weight:750;margin:0 0 18px;text-wrap:balance}
.lead{font-size:18px;color:var(--ink-2);max-width:60ch;margin:0}
.sec{padding-block:56px}
.sec + .sec{border-top:1px solid var(--line)}

/* Chips / etiquetas */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:7px 14px;font:500 14px var(--font);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.tag{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--soft);color:var(--ink-2)}
.tag.bad{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.tag.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}

/* Tarjeta de espectáculo (portada y "También en cartel") */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:28px 22px;margin-top:28px}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.10)}
.card .art{position:relative;aspect-ratio:2/3;background:var(--soft);overflow:hidden}
.card .art img{width:100%;height:100%;object-fit:cover}
.card .art .ph{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;font-weight:800;font-size:24px;letter-spacing:-.01em;color:var(--muted)}
.card .badge{position:absolute;top:10px;left:10px;background:var(--primary);color:var(--on-primary);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:999px}
.card .body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{margin:0;font-size:19px;line-height:1.25;letter-spacing:-.01em}
.card h3 a{text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card{position:relative}
.card .meta{font-size:14px;color:var(--muted)}
.card .next{font-size:14px;color:var(--ink-2)}
.card .price{font-size:14px;font-weight:600}
.card .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:10px;position:relative;z-index:1}
@media (max-width:560px){
  .grid{grid-template-columns:1fr 1fr;gap:18px 12px;margin-top:20px}
  .card .body{padding:12px 12px 14px;gap:4px}
  .card h3{font-size:16px}
  .card .meta,.card .next,.card .price{font-size:13px}
  .card .actions .wide{display:none}
  .card .actions .btn{flex:1 1 100%;min-width:0;white-space:normal;text-align:center;padding:10px 8px;line-height:1.2}
}
.empty{grid-column:1/-1;padding:40px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius)}

/* Formularios */
label{display:block;font-size:14px;font-weight:500;color:var(--ink-2)}
input{width:100%;margin-top:6px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:16px var(--font)}
input:focus{outline:2px solid var(--ink);outline-offset:0;border-color:transparent}

/* Pie */
footer{border-top:1px solid var(--line);padding:36px 0 48px;color:var(--muted);font-size:14px}
footer .brand{margin-bottom:14px}
footer p{margin:6px 0}