/* Día de Muertos: noche morada de veladoras, papel picado de seis colores,
   cempasúchil y sarape. Las tarjetas son de "papel" claro para leerse bien al sol. */
:root {
  --noche1: #2A0636;
  --noche2: #5E0B4F;
  --on-bg: #FFF4E0;          /* texto sobre el fondo morado */
  --on-bg-muted: #F4C9E2;
  --surface: #FFF8EE;        /* papel de las tarjetas */
  --ink: #2A1433;
  --muted: #6E5A78;
  --line: #EBD9CF;
  --rosa: #E4007C;           /* rosa mexicano */
  --rosa-claro: #FF6CB8;
  --rosa-soft: #FFD3EA;
  --marigold: #FF8C00;       /* cempasúchil */
  --marigold-soft: #FFE3B8;
  --amarillo: #FFC20E;
  --morado: #7B2FA0;
  --verde: #00A651;
  --turquesa: #00AFAA;
  --ok: #00A651;
  --on-accent: #2A1433;
  --oro: #F5B800;
  --plata: #B8BCCB;
  --bronce: #CF6E2E;
  --font-display: "Alfa Slab One", "Rockwell", Georgia, serif;
  --font-body: "Figtree", "Segoe UI", system-ui, sans-serif;

  --flor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cdefs%3E%3Cellipse id='p' cx='0' cy='-30' rx='11' ry='19'/%3E%3C/defs%3E%3Cg fill='%23D95B00'%3E%3Cuse href='%23p'/%3E%3Cuse href='%23p' transform='rotate(30)'/%3E%3Cuse href='%23p' transform='rotate(60)'/%3E%3Cuse href='%23p' transform='rotate(90)'/%3E%3Cuse href='%23p' transform='rotate(120)'/%3E%3Cuse href='%23p' transform='rotate(150)'/%3E%3Cuse href='%23p' transform='rotate(180)'/%3E%3Cuse href='%23p' transform='rotate(210)'/%3E%3Cuse href='%23p' transform='rotate(240)'/%3E%3Cuse href='%23p' transform='rotate(270)'/%3E%3Cuse href='%23p' transform='rotate(300)'/%3E%3Cuse href='%23p' transform='rotate(330)'/%3E%3C/g%3E%3Cg fill='%23FF8C00' transform='scale(.78) rotate(15)'%3E%3Cuse href='%23p'/%3E%3Cuse href='%23p' transform='rotate(30)'/%3E%3Cuse href='%23p' transform='rotate(60)'/%3E%3Cuse href='%23p' transform='rotate(90)'/%3E%3Cuse href='%23p' transform='rotate(120)'/%3E%3Cuse href='%23p' transform='rotate(150)'/%3E%3Cuse href='%23p' transform='rotate(180)'/%3E%3Cuse href='%23p' transform='rotate(210)'/%3E%3Cuse href='%23p' transform='rotate(240)'/%3E%3Cuse href='%23p' transform='rotate(270)'/%3E%3Cuse href='%23p' transform='rotate(300)'/%3E%3Cuse href='%23p' transform='rotate(330)'/%3E%3C/g%3E%3Cg fill='%23FFB21C' transform='scale(.55)'%3E%3Cuse href='%23p'/%3E%3Cuse href='%23p' transform='rotate(30)'/%3E%3Cuse href='%23p' transform='rotate(60)'/%3E%3Cuse href='%23p' transform='rotate(90)'/%3E%3Cuse href='%23p' transform='rotate(120)'/%3E%3Cuse href='%23p' transform='rotate(150)'/%3E%3Cuse href='%23p' transform='rotate(180)'/%3E%3Cuse href='%23p' transform='rotate(210)'/%3E%3Cuse href='%23p' transform='rotate(240)'/%3E%3Cuse href='%23p' transform='rotate(270)'/%3E%3Cuse href='%23p' transform='rotate(300)'/%3E%3Cuse href='%23p' transform='rotate(330)'/%3E%3C/g%3E%3Ccircle r='9' fill='%23963F00'/%3E%3C/svg%3E");
  --picado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Cpath fill='white' d='M0 0H100V94L90 110L80 94L70 110L60 94L50 110L40 94L30 110L20 94L10 110L0 94Z'/%3E%3Cg fill='black'%3E%3Cpath d='M20 9l6 6-6 6-6-6zM50 9l6 6-6 6-6-6zM80 9l6 6-6 6-6-6z'/%3E%3Cg transform='translate(50 52)'%3E%3Cellipse cx='0' cy='-15' rx='6' ry='11'/%3E%3Cellipse cx='0' cy='-15' rx='6' ry='11' transform='rotate(60)'/%3E%3Cellipse cx='0' cy='-15' rx='6' ry='11' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='-15' rx='6' ry='11' transform='rotate(180)'/%3E%3Cellipse cx='0' cy='-15' rx='6' ry='11' transform='rotate(240)'/%3E%3Cellipse cx='0' cy='-15' rx='6' ry='11' transform='rotate(300)'/%3E%3C/g%3E%3Ccircle cx='14' cy='40' r='4'/%3E%3Ccircle cx='86' cy='40' r='4'/%3E%3Ccircle cx='14' cy='64' r='4'/%3E%3Ccircle cx='86' cy='64' r='4'/%3E%3Ccircle cx='20' cy='83' r='3'/%3E%3Ccircle cx='35' cy='83' r='3'/%3E%3Ccircle cx='50' cy='83' r='3'/%3E%3Ccircle cx='65' cy='83' r='3'/%3E%3Ccircle cx='80' cy='83' r='3'/%3E%3C/g%3E%3Ccircle cx='50' cy='52' r='4.5' fill='white'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='100' height='110' mask='url(%23m)'/%3E%3C/svg%3E");
  --sarape: repeating-linear-gradient(90deg,
    var(--rosa) 0 28px, var(--amarillo) 28px 34px, var(--marigold) 34px 58px, #fff 58px 61px,
    var(--verde) 61px 85px, var(--amarillo) 85px 91px, var(--turquesa) 91px 115px, #fff 115px 118px,
    var(--morado) 118px 142px, var(--amarillo) 142px 148px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--on-bg); font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  background-color: var(--noche1);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 140, 0, .16) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(255, 194, 14, .12) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% -10%, rgba(255, 140, 0, .22), transparent 55%),
    linear-gradient(170deg, var(--noche1), var(--noche2) 70%, #7A0E4A);
  background-size: 46px 46px, 62px 62px, 100% 100%, 100% 100%;
  background-attachment: fixed;
}
body::after { content: ""; display: block; height: 16px; background: var(--sarape); }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

/* Papel picado con flores recortadas */
.picado { display: flex; gap: 5px; padding: 0 6px; overflow: hidden; position: relative; height: 82px; }
.picado::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: var(--on-bg); opacity: .55; }
.flag {
  flex: 0 0 62px; height: 72px; margin-top: 6px; background: var(--c);
  -webkit-mask: var(--picado) center / 100% 100% no-repeat;
          mask: var(--picado) center / 100% 100% no-repeat;
  transform-origin: top center; animation: sway 4.5s ease-in-out infinite alternate;
}
.flag:nth-child(6n+1) { --c: var(--rosa); }
.flag:nth-child(6n+2) { --c: var(--marigold); }
.flag:nth-child(6n+3) { --c: var(--verde); }
.flag:nth-child(6n+4) { --c: var(--amarillo); }
.flag:nth-child(6n+5) { --c: var(--turquesa); }
.flag:nth-child(6n+6) { --c: #A64BD6; }
.flag:nth-child(even) { animation-delay: -2.2s; }
@keyframes sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }

/* Flor de cempasúchil */
.flor { display: inline-block; width: var(--s, 48px); height: var(--s, 48px); background: var(--flor) center / contain no-repeat; flex: none; }

/* Pétalos que caen */
.petalos { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.petalos i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 60% 60% 60% 0; background: var(--marigold); opacity: .75; animation: cae linear infinite; }
.petalos i:nth-child(3n) { background: var(--amarillo); }
.petalos i:nth-child(4n) { background: var(--rosa-claro); }
@keyframes cae {
  0% { transform: translate(0, -20px) rotate(0); }
  50% { transform: translate(30px, 50vh) rotate(200deg); }
  100% { transform: translate(-20px, 105vh) rotate(420deg); }
}
.wrap, .picado { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .flag { animation: none; }
  .petalos { display: none; }
  * { transition: none !important; }
}

.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amarillo); margin: 0; }
h1 { font-family: var(--font-display); font-weight: 400; line-height: 1; margin: 0; text-wrap: balance; color: var(--on-bg); text-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
h1 .alt { color: var(--rosa-claro); }
h1 .yr { color: var(--marigold); }

button { font: inherit; cursor: pointer; border-radius: 12px; border: 0; font-weight: 700; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .55; }
.btn { padding: 13px 20px; background: var(--marigold); color: var(--on-accent); font-size: 16px; box-shadow: 0 4px 0 #B85E00; }
.btn:hover:not(:disabled) { filter: brightness(1.06); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #B85E00; }
.btn-ghost { padding: 12px 18px; background: transparent; color: var(--on-bg); border: 1px solid rgba(255, 244, 224, .45); }

/* Marca de la institución: logo + nombre */
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* El logo, pintado con los colores del cartel: amarillo, cempasúchil, rosa mexicano y morado */
.marca .logo-wrap { flex: none; display: block; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
.marca .logo {
  display: block; height: var(--logo-h, 48px); aspect-ratio: 632 / 520;
  background: linear-gradient(135deg, var(--amarillo) 10%, var(--marigold) 38%, var(--rosa-claro) 68%, #C77DFF 92%);
  -webkit-mask: var(--logo-url) center / contain no-repeat;
          mask: var(--logo-url) center / contain no-repeat;
}
.marca span { font-weight: 700; font-size: var(--marca-fs, 14px); line-height: 1.2; color: var(--marca-c, var(--on-bg)); overflow-wrap: anywhere; }

.demo-banner { position: relative; z-index: 2; background: var(--rosa); color: #fff; text-align: center; font-size: 13px; font-weight: 600; padding: 6px 16px; }