/* Eden — estilos compartidos (sitio + panel). Tokens definidos en DESIGN.md */
:root {
  --paper: #f6f3ec;
  --paper-2: #ede7da;
  --ink: #151d33;
  --navy: #1f3d73;
  --navy-deep: #101a30;
  --muted: #5a6377;
  --line: #d8d0bf;
  --sand: #9a6e33; /* versión AA del arena #B8894A para texto pequeño */
  --sand-soft: #b8894a;
  --white: #fffdf9;
  --danger: #a3322a;
  --radius: 14px;
  --wrap: 1120px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.12; margin: 0; letter-spacing: -.01em; }
h2 em, h1 em { font-style: italic; color: var(--navy); }
p { margin: 0; }
a { color: var(--navy); }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--navy); color: var(--white); padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
[hidden] { display: none !important; }

.eyebrow {
  font: 700 .78rem/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 14px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 26px;
  border-radius: 999px; border: 1.5px solid var(--navy);
  background: var(--navy); color: var(--white);
  font: 700 1rem/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* ---------- Cabecera ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: auto; }
.brand-rings { width: 50px; }
.brand-word { width: 74px; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .98rem; position: relative; }
.nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { border: 1.5px solid var(--navy); color: var(--navy) !important; padding: 9px 18px; border-radius: 999px; }
.nav-cta:hover { background: var(--navy); color: var(--white) !important; }
.nav-toggle { display: none; }
@media (max-width: 1100px) { .nav { gap: 22px; } }

/* Submenú (Recursos) */
.nav-group { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-group[hidden] { display: none; }
.nav-sub-toggle { display: grid; place-items: center; width: 26px; height: 32px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--ink); border-radius: 6px; }
.nav-sub-toggle:hover { background: var(--paper-2); }
.chev { width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease); }
.nav-sub-toggle[aria-expanded="true"] .chev { transform: translateY(2px) rotate(-135deg); }
.nav-sub { list-style: none; margin: 0; padding: 10px; }
.nav-sub ul { list-style: none; margin: 2px 0 6px; padding: 0 0 0 12px; border-left: 2px solid var(--line); }
.nav .nav-sub a { display: block; padding: 7px 10px; border-radius: 8px; font-size: .95rem; }
.nav .nav-sub ul a { font-weight: 400; font-size: .92rem; padding: 5px 10px; color: var(--muted); }
.nav .nav-sub a::after { display: none; }
.nav .nav-sub a:hover { background: var(--paper-2); color: var(--ink); }
@media (min-width: 961px) {
  .nav-sub {
    position: absolute; top: calc(100% + 10px); left: -12px; min-width: 270px; z-index: 60;
    background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgb(16 26 48 / .14);
    max-height: calc(100vh - 110px); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, transform .2s var(--ease), visibility .2s;
  }
  .nav-group::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } /* puente para no perder el hover */
  .nav-group:focus-within .nav-sub, .nav-sub-toggle[aria-expanded="true"] + .nav-sub { opacity: 1; visibility: visible; transform: none; }
}
@media (min-width: 961px) and (hover: hover) {
  .nav-group:hover .nav-sub { opacity: 1; visibility: visible; transform: none; }
}

@media (max-width: 960px) {
  .nav-toggle {
    display: grid; place-items: center; width: 48px; height: 48px;
    background: none; border: 0; cursor: pointer; margin-right: -10px;
  }
  .bars, .bars::before, .bars::after { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
  .bars { position: relative; }
  .bars::before, .bars::after { content: ""; position: absolute; left: 0; }
  .bars::before { top: -7px; }
  .bars::after { top: 7px; }
  .nav-toggle[aria-expanded="true"] .bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-7px) rotate(-45deg); }
  .nav {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 8px 20px 20px;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
  .nav-group { display: grid; grid-template-columns: 1fr auto; align-items: stretch; gap: 0; }
  .nav-group > a { border-bottom: 1px solid var(--line); }
  .nav-sub-toggle, .nav-sub-toggle:hover { width: 48px; height: auto; margin-right: -10px; border-radius: 0; background: none; border-bottom: 1px solid var(--line); }
  .nav-sub { grid-column: 1 / -1; display: none; padding: 6px 0 10px; border-bottom: 1px solid var(--line); }
  .nav-sub-toggle[aria-expanded="true"] + .nav-sub { display: block; }
  .nav .nav-sub a { border-bottom: 0; }
  .nav-cta { margin-top: 14px; text-align: center; border-bottom: 1.5px solid var(--navy) !important; }
}

/* ---------- Hero ---------- */
.hero { padding: 56px 0 88px; overflow: hidden; }
.hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 48px; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); max-width: 12ch; }
.lead { font-size: 1.2rem; color: var(--muted); margin-top: 22px; max-width: 46ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-art img {
  width: 100%; max-width: 520px; margin-left: auto;
  animation: drift 9s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: rotate(-3deg) translateY(0); } to { transform: rotate(3deg) translateY(-12px); } }
@media (max-width: 860px) {
  .hero { padding: 24px 0 64px; }
  .hero-inner { grid-template-columns: 1fr; gap: 8px; }
  .hero-art { order: -1; }
  .hero-art img { max-width: 240px; margin: 0 auto; }
}

/* ---------- Secciones ---------- */
.section { padding: 96px 0; }
.section-alt { background: var(--paper-2); }
.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head h1, .section-head h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
.page-top { padding-top: 72px; min-height: 60vh; }
.page-back { margin-top: 56px; font-weight: 600; }
.section-text { margin-top: 18px; color: var(--muted); font-size: 1.1rem; white-space: pre-line; }
@media (max-width: 640px) { .section { padding: 72px 0; } .section-head { margin-bottom: 36px; } }

.empty { color: var(--muted); font-style: italic; padding: 28px; border: 1.5px dashed var(--line); border-radius: var(--radius); text-align: center; grid-column: 1 / -1; list-style: none; }

/* Qué es: ejes */
/* Todas las tarjetas miden lo mismo; al abrir una cita solo crece su fila */
.pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 20px; }
.pillars:has(.pillar-quote[open]) { grid-auto-rows: auto; }
.pillar { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 30px 28px; display: flex; flex-direction: column; }
.pillar > .pillar-quote, .pillar > .pillar-source { margin-top: auto; }
.pillar > p:not(.pillar-source):not(:last-child) { margin-bottom: 18px; }
.pillar-num { font: 700 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sand); }
.pillar h3 { font-size: 1.45rem; margin-top: 12px; }
.pillar > p { color: var(--muted); margin-top: 12px; font-size: 1rem; white-space: pre-line; }
.pillar-source { font-size: .9rem; }
.pillar-quote { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.pillar-quote summary { cursor: pointer; color: var(--navy); font-weight: 700; font-size: .95rem; min-height: 32px; display: flex; align-items: center; gap: 8px; list-style: none; }
.pillar-quote summary::-webkit-details-marker { display: none; }
.pillar-quote summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid currentColor; border-radius: 50%; font-size: .9rem; line-height: 1; transition: transform .3s var(--ease); }
.pillar-quote[open] summary::before { transform: rotate(45deg); }
.pillar-quote blockquote { margin: 14px 0 0; padding-left: 18px; border-left: 3px solid var(--sand-soft); }
.pillar-quote blockquote p { font: italic 400 1.02rem/1.6 var(--serif); color: var(--ink); }
.pillar-quote footer { margin-top: 10px; font-size: .9rem; color: var(--muted); }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; grid-auto-rows: auto; } .pillar { padding: 24px 22px; } }

/* Nota aclaratoria */
.note {
  margin-top: 28px; padding: 18px 22px 18px 54px; position: relative;
  background: var(--paper-2); border-radius: var(--radius); color: var(--ink); font-size: .98rem; max-width: 820px;
}
.note::before {
  content: "i"; position: absolute; left: 18px; top: 18px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--navy); color: var(--white); font: italic 600 .85rem/1 var(--serif);
}

/* Misión y visión */
.mv { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mv-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 32px; }
.mv-card h3 { font: 700 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sand); }
.mv-card p { font: 400 1.25rem/1.55 var(--serif); margin-top: 16px; }
.mv-mission { background: var(--navy); border-color: var(--navy); color: var(--white); }
.mv-mission h3 { color: #e3c48f; }
@media (max-width: 760px) { .mv { grid-template-columns: 1fr; } .mv-card { padding: 26px 24px; } .mv-card p { font-size: 1.12rem; } }

/* Equipo */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px; }
.member { text-align: center; padding: 8px 12px; }
.member-photo {
  width: 168px; height: 168px; margin: 0 auto 20px; border-radius: 50%;
  object-fit: cover; background: var(--paper-2);
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 7.5px var(--line);
}
.member-initials {
  display: grid; place-items: center;
  font: 500 3rem/1 var(--serif); color: var(--navy);
  background: var(--paper-2);
}
.member h3 { font-size: 1.4rem; }
.member-role { color: var(--sand); font-weight: 700; font-size: .92rem; margin-top: 6px; }
.member-bio { color: var(--muted); margin-top: 12px; font-size: 1rem; white-space: pre-line; }

/* Para quién */
.audience-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.audience-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; }
.audience-card h3 { font-size: 1.3rem; margin-top: 18px; }
.audience-card p { color: var(--muted); margin-top: 10px; font-size: 1rem; white-space: pre-line; }
.rings-icon { position: relative; width: 46px; height: 30px; }
.rings-icon::before, .rings-icon::after {
  content: ""; position: absolute; top: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--navy);
}
.rings-icon::before { left: 0; opacity: .55; }
.rings-icon::after { left: 16px; }

/* Carrusel */
.carousel { position: relative; }
.carousel-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 860px); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding-bottom: 4px; border-radius: var(--radius);
}
.carousel-track::-webkit-scrollbar { display: none; }
.slide { scroll-snap-align: center; position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); aspect-ratio: 16 / 10; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide figcaption {
  position: absolute; inset: auto 0 0 0; padding: 48px 24px 20px;
  background: linear-gradient(transparent, rgb(16 26 48 / .78));
  color: var(--white); font-weight: 600;
}
.slide figcaption small { display: block; font-weight: 400; opacity: .85; margin-top: 2px; }
.carousel-track:has(.empty) { display: block; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; }
.carousel-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--navy);
  background: transparent; color: var(--navy); font-size: 1.2rem; cursor: pointer;
  transition: background .25s, color .25s;
}
.carousel-btn:hover { background: var(--navy); color: var(--white); }
.carousel-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.carousel-dots button { width: 24px; height: 24px; border: 0; background: none; cursor: pointer; padding: 0; display: grid; place-items: center; }
.carousel-dots button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: background .25s, transform .25s; }
.carousel-dots button[aria-current="true"]::before { background: var(--navy); transform: scale(1.25); }
@media (max-width: 640px) { .carousel-track { grid-auto-columns: 92%; gap: 12px; } .slide { aspect-ratio: 4 / 3; } }

/* Eventos: tarjetas */
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; align-items: start; }
.ev-card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .25s, box-shadow .25s; }
.ev-card:hover { border-color: color-mix(in srgb, var(--navy) 45%, var(--line)); box-shadow: 0 14px 40px rgb(16 26 48 / .08); }
.ev-media { position: relative; aspect-ratio: 16 / 9; background: var(--paper-2); }
.ev-media img { width: 100%; height: 100%; object-fit: cover; }
.ev-placeholder { position: absolute; inset: 0; background: url("/img/rings.png") center / 42% no-repeat, linear-gradient(135deg, var(--paper-2), #e2dac9); }
.ev-date {
  position: absolute; left: 16px; top: 16px; display: grid; justify-items: center; gap: 4px;
  min-width: 62px; padding: 10px 10px 9px; border-radius: 14px; background: var(--white); box-shadow: 0 6px 18px rgb(16 26 48 / .14);
}
.ev-day { font: 500 1.9rem/1 var(--serif); color: var(--navy); }
.ev-month { font: 700 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sand); }
.ev-body { padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ev-body h3 { font-size: 1.45rem; }
.ev-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: .94rem; }
.ev-meta li::first-letter { text-transform: uppercase; }
.ev-desc { font-size: 1rem; white-space: pre-line; }
.ev-more { font-size: .92rem; font-weight: 700; }
.ev-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line); flex-wrap: wrap; }
.ev-price { font: 600 1.35rem/1.1 var(--serif); color: var(--ink); }
.ev-price small { font: 400 .85rem var(--sans); color: var(--muted); }
.ev-price del { font-size: .95rem; color: var(--muted); font-weight: 500; }
.ev-promo { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px; background: var(--navy); color: var(--white); font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.ev-group { font-size: .88rem; font-weight: 700; color: var(--navy); margin-top: 4px; }
.ev-stock { font-size: .88rem; font-weight: 700; color: var(--muted); margin-top: 4px; }
.ev-stock.low { color: #a1561c; }
.ev-stock.sold { color: var(--danger); }
.ev-foot .btn[disabled] { background: var(--paper-2); border-color: var(--line); color: var(--muted); cursor: not-allowed; }
@media (max-width: 420px) { .ev-grid { grid-template-columns: 1fr; } .ev-body { padding: 20px; } .ev-foot .btn { width: 100%; } }

/* Recursos */
.resource-groups { display: grid; gap: 64px; }
.resource-group-head { display: grid; gap: 6px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.resource-group-head:last-child { margin-bottom: 0; }
.resource-group-head h3 { font-size: clamp(1.6rem, 3vw, 2rem); color: var(--navy); }
.resource-group-head p { color: var(--muted); white-space: pre-line; max-width: 68ch; }
.resource-group-link { justify-self: start; margin-top: 10px; min-height: 42px; padding: 0 20px; font-size: .92rem; }
@media (max-width: 640px) { .resource-groups { gap: 48px; } }
.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.resource-card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: border-color .25s, box-shadow .25s, transform .25s var(--ease); }
.resource-card:hover { transform: translateY(-2px); }
.resource-open { all: unset; cursor: pointer; }
.resource-open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* toda la tarjeta es clicable */
.resource-open:focus-visible::after { outline: 3px solid var(--navy); outline-offset: -3px; }
.resource-card:hover { border-color: color-mix(in srgb, var(--navy) 45%, var(--line)); box-shadow: 0 14px 40px rgb(16 26 48 / .08); }
.resource-photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--paper-2); }
.resource-body { padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.resource-body .rings-icon { margin-bottom: 6px; }
.resource-body h4 { font-size: 1.35rem; }
.resource-text { font-size: 1rem; color: var(--muted); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.resource-link { font-size: .92rem; font-weight: 700; color: var(--navy); margin-top: auto; padding-top: 4px; align-self: flex-start; }

/* Ficha del recurso */
.resource-dialog { width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - 32px); border: 0; border-radius: 20px; padding: 0; overflow-y: auto; background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px rgb(16 26 48 / .3); }
.resource-dialog::backdrop { background: rgb(16 26 48 / .5); backdrop-filter: blur(2px); }
.resource-dialog-photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper-2); }
.resource-dialog-art { height: 150px; background: url("/img/rings.png") center / auto 70% no-repeat, linear-gradient(135deg, var(--paper-2), #e2dac9); }
.resource-dialog-body { padding: 26px 30px 30px; display: grid; gap: 12px; }
.resource-dialog-body .eyebrow { margin: 0; }
.resource-dialog-body h2 { font-size: clamp(1.7rem, 4vw, 2.2rem); }
.resource-dialog-text { font-size: 1.05rem; white-space: pre-line; color: var(--ink); }
.resource-dialog-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.resource-dialog-close { position: absolute; top: 14px; right: 14px; box-shadow: 0 4px 14px rgb(16 26 48 / .15); }
@media (max-width: 520px) { .resource-dialog-body { padding: 22px 20px 24px; } .resource-dialog-foot .btn { flex: 1; } }
@media (max-width: 420px) { .resource-grid { grid-template-columns: 1fr; } .resource-body { padding: 20px; } }

/* Cómo funciona */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; counter-reset: step; }
.step { counter-increment: step; position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px 28px; }
.step::before { content: counter(step); display: block; font: italic 500 2.6rem/1 var(--serif); color: var(--sand-soft); margin-bottom: 14px; }
.step h3 { font-size: 1.3rem; }
.step p { color: var(--muted); margin-top: 10px; font-size: 1rem; white-space: pre-line; }

/* Preguntas frecuentes */
.faq-wrap { max-width: 840px; }
.faq { display: grid; gap: 12px; }
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .25s; }
.faq-item[open] { border-color: color-mix(in srgb, var(--navy) 45%, var(--line)); }
.faq-item summary {
  cursor: pointer; list-style: none; min-height: 56px; padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font: 500 1.15rem/1.3 var(--serif);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--navy); border-radius: 50%;
  color: var(--navy); font: 400 1.1rem/1 var(--sans); transition: transform .3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 22px 22px; color: var(--muted); font-size: 1rem; white-space: pre-line; max-width: 68ch; }

/* Botón flotante de WhatsApp */
.wa-float {
  position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: #0f7a66; color: var(--white); box-shadow: 0 8px 24px rgb(16 26 48 / .28);
  transition: transform .3s var(--ease), background .25s var(--ease);
}
.wa-float:hover { background: #0a5e4f; transform: translateY(-2px); }
.wa-float:focus-visible { outline-color: var(--navy); outline-offset: 4px; border-radius: 50%; }
body:has(.wa-float:not([hidden])) .site-footer { padding-bottom: 88px; } /* que el botón no tape el pie */
@media print { .wa-float { display: none !important; } }

/* Formulario público de inscripción */
.signup input {
  width: 100%; font: inherit; color: var(--ink); background: var(--white);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 14px; min-height: 48px; margin-top: 6px;
}
.signup input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgb(31 61 115 / .15); }
.signup {
  width: min(560px, calc(100% - 24px)); border: 0; border-radius: 20px; padding: 0;
  background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px rgb(16 26 48 / .3);
}
.signup::backdrop { background: rgb(16 26 48 / .5); backdrop-filter: blur(2px); }
.signup form { display: grid; gap: 16px; padding: 28px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.signup-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.signup-head .eyebrow { margin-bottom: 8px; }
.signup-head h2 { font-size: 1.6rem; }
.signup-when { color: var(--muted); margin-top: 6px; font-size: .95rem; }
.signup-when::first-letter { text-transform: uppercase; }
.signup-close { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--white); cursor: pointer; font-size: 1rem; color: var(--ink); }
.signup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.signup-grid label { font-weight: 700; font-size: .9rem; }
.signup-grid .span-2 { grid-column: 1 / -1; }
.opt { font-weight: 400; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup-pay { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.signup-pay legend { font-weight: 700; font-size: .9rem; padding: 0; margin-bottom: 8px; }
.signup .pay-option { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); font-weight: 400; font-size: .95rem; line-height: 1.35; cursor: pointer; }
.signup .pay-option input { width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; padding: 0; flex: none; accent-color: var(--navy); box-shadow: none; }
.signup .pay-option:has(input:checked) { border-color: var(--navy); background: #eef2f9; }
.signup .pay-option:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 2px; }
.signup-pay-hint { grid-column: 1 / -1; font-size: .88rem; color: var(--muted); }
.signup-pay-hint:empty { display: none; }
.signup-total {font: 600 1.15rem var(--serif); color: var(--navy); }
.signup .form-error { color: var(--danger); font-weight: 600; min-height: 1.4em; margin-top: -6px; }
.signup-privacy { font-size: .85rem; color: var(--muted); margin-top: -8px; }
.signup-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
@media (max-width: 520px) { .signup-grid, .signup-pay { grid-template-columns: 1fr; } .signup form { padding: 22px 18px; } .signup-foot .btn { flex: 1; } }

/* Entrada */
.ticket-page { min-height: 100vh; display: flex; flex-direction: column; }
.ticket-top { padding: 20px 0; }
.ticket-main { flex: 1; padding: 12px 0 72px; }
.ticket-intro { text-align: center; max-width: 560px; margin: 0 auto 28px; }
.ticket-intro h1 { font-size: clamp(2rem, 5vw, 2.6rem); }
.ticket-intro p { color: var(--muted); margin-top: 10px; }
.ticket { max-width: 620px; margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 20px 60px rgb(16 26 48 / .1); }
.ticket-media { aspect-ratio: 21 / 8; background: var(--paper-2); position: relative; }
.ticket-media img { width: 100%; height: 100%; object-fit: cover; }
.ticket-head { padding: 26px 30px 6px; }
.ticket-head h2 { font-size: 1.8rem; }
.ticket-status { display: inline-block; margin-bottom: 12px; padding: 6px 12px; border-radius: 999px; font: 700 .75rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; background: #e3eddd; color: #2f5a25; }
.ticket-status.cancelled { background: #f6dedb; color: var(--danger); }
.ticket-status.attended { background: #dfe6f3; color: var(--navy); }
.ticket-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; padding: 18px 30px 26px; margin: 0; }
.ticket-grid div { min-width: 0; }
.ticket-grid dt { font: 700 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sand); }
.ticket-grid dd { margin: 6px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.ticket-grid dd::first-letter { text-transform: uppercase; }
.ticket-tear { position: relative; height: 0; border-top: 2px dashed var(--line); margin: 0 22px; }
.ticket-tear::before, .ticket-tear::after { content: ""; position: absolute; top: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); }
.ticket-tear::before { left: -38px; }
.ticket-tear::after { right: -38px; }
.ticket-code { padding: 26px 30px 30px; text-align: center; }
.ticket-code span { font: 700 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ticket-code strong { display: block; margin-top: 10px; font: 600 clamp(1.5rem, 6vw, 2.2rem)/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; color: var(--navy); }
.ticket-code p { color: var(--muted); font-size: .9rem; margin-top: 12px; }
.ticket-pay { margin: 0 30px 26px; padding: 14px 18px; border-radius: 12px; background: var(--paper-2); font-size: .95rem; white-space: pre-line; }
.ticket-bank { margin: 0 30px 26px; padding: 18px 20px; border-radius: 12px; background: #eef2f9; border: 1px solid color-mix(in srgb, var(--navy) 22%, transparent); }
.ticket-bank h3 { font-size: 1.2rem; color: var(--navy); margin-bottom: 10px; }
.ticket-bank dl { margin: 0; display: grid; }
.ticket-bank dl > div { display: grid; grid-template-columns: 9.5rem 1fr; align-items: center; gap: 4px 12px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--navy) 12%, transparent); }
.ticket-bank dl > div:first-child { border-top: 0; }
.ticket-bank dt { font: 700 .72rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ticket-bank dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.ticket-bank dd span { font-weight: 600; overflow-wrap: anywhere; }
.ticket-bank .is-amount dd span { font: 600 1.35rem/1.1 var(--serif); color: var(--navy); }
.copy-btn { flex: none; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--navy); background: var(--white); color: var(--navy); font: 700 .8rem var(--sans); cursor: pointer; }
.copy-btn:hover { background: var(--navy); color: var(--white); }
.ticket-bank-note { margin-top: 10px; font-size: .9rem; color: var(--muted); white-space: pre-line; }
@media (max-width: 520px) {
  .ticket-bank { margin: 0 20px 22px; padding: 16px; }
  .ticket-bank dl > div { grid-template-columns: 1fr; }
}
@media print { .copy-btn { display: none; } }
.ticket-receipt { margin: 0 30px 26px; padding: 16px 18px; border: 1.5px dashed var(--line); border-radius: 12px; font-size: .95rem; display: grid; gap: 12px; justify-items: start; }
.ticket-receipt .btn { min-height: 44px; padding: 0 18px; font-size: .95rem; }
.ticket-receipt label:focus-within { outline: 3px solid var(--navy); outline-offset: 3px; }
.ticket-receipt-status:empty { display: none; }
.ticket-switch-row, .ticket-payment > .ticket-receipt-status { margin: -12px 30px 24px; font-size: .92rem; }
.ticket-switch { background: none; border: 0; padding: 6px 0; min-height: 40px; color: var(--navy); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.ticket-receipt-status { color: var(--muted); }
.ticket-receipt-status.is-error { color: var(--danger); font-weight: 600; }
.ticket-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.ticket-error { text-align: center; max-width: 480px; margin: 40px auto; }
.ticket-error p { color: var(--muted); margin: 12px 0 24px; }
@media (max-width: 520px) {
  .ticket-grid { padding: 16px 20px 22px; }
  .ticket-head { padding: 22px 20px 4px; }
  .ticket-code { padding-left: 20px; padding-right: 20px; }
  .ticket-pay, .ticket-receipt { margin: 0 20px 22px; }
  .ticket-switch-row, .ticket-payment > .ticket-receipt-status { margin: -10px 20px 20px; }
}
@media print {
  body { background: #fff; }
  /* Impresa, la entrada lleva sólo los datos del evento y el QR: sin datos de pago ni de transferencia */
  .ticket-top, .ticket-actions, .ticket-intro, .ticket-payment, .ticket-price { display: none !important; }
  .ticket { box-shadow: none; border-color: #999; }
  .ticket-tear::before, .ticket-tear::after { display: none; }
}

/* Pie */
.site-footer { background: var(--navy-deep); color: #e9e4d8; padding: 88px 0 28px; }
.site-footer h2 { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--white); margin-top: 18px; }
.site-footer p { margin-top: 12px; max-width: 40ch; color: #c5c9d4; }
.footer-logo { width: 72px; height: auto; filter: brightness(0) invert(1); opacity: .9; }
.footer-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.contact a, .contact span {
  display: flex; align-items: center; gap: 14px; color: var(--white); text-decoration: none;
  padding: 14px 18px; border: 1px solid rgb(255 255 255 / .16); border-radius: 12px; transition: background .25s;
}
.contact a:hover { background: rgb(255 255 255 / .07); }
.contact a, .contact span { overflow-wrap: anywhere; } /* un correo largo no debe ensanchar la página en el celular */
.contact b { flex: none; font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sand-soft); min-width: 92px; }
.footer-inner > * { min-width: 0; }
@media (max-width: 480px) {
  .contact a, .contact span { flex-direction: column; align-items: flex-start; gap: 4px; }
}
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 72px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / .12); font-size: .9rem; color: #9aa1b2; }
.footer-bottom a { color: #c5c9d4; }
.site-footer :focus-visible { outline-color: var(--white); }
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; } }

/* ---------- Temáticas por festividad (fiestas.js) ----------
   Sólo cambian los acentos: el papel sigue claro y la tinta oscura. Paletas verificadas con contraste AA. */
:root[data-fiesta="anio-nuevo"] { --navy: #1c2a57; --navy-deep: #0b1330; --sand: #785a0b; --sand-soft: #c9a43c; }
:root[data-fiesta="amor-amistad"] { --paper: #f8f2ef; --paper-2: #f1e3df; --line: #e0cdc7; --navy: #8c2343; --navy-deep: #4a1022; --sand: #a13d57; --sand-soft: #e28fa2; }
:root[data-fiesta="carnaval"] { --navy: #7a1d6a; --navy-deep: #3a0d33; --sand: #0d6a65; --sand-soft: #f0a81c; }
:root[data-fiesta="mujer"] { --navy: #5a2a86; --navy-deep: #2c143f; --sand: #2f6b3a; --sand-soft: #b48fd0; }
:root[data-fiesta="pascua"] { --paper: #f7f5ee; --paper-2: #eceadb; --navy: #3d5596; --navy-deep: #1d2a52; --sand: #7a6511; --sand-soft: #e3c35a; }
:root[data-fiesta="salud-mental"] { --navy: #2e6a4f; --navy-deep: #143326; --sand: #8a5d1c; --sand-soft: #7fb59a; }
:root[data-fiesta="halloween"] { --paper: #f7f1e6; --paper-2: #f0e3cf; --line: #dfcbb0; --navy: #4a2470; --navy-deep: #22102f; --sand: #9c4a0c; --sand-soft: #e07b22; }
:root[data-fiesta="muertos"] { --paper: #f8f1e6; --paper-2: #f2e2cc; --line: #e2cbab; --navy: #8a1f5f; --navy-deep: #3a0c29; --sand: #a14d07; --sand-soft: #f29b1d; }
/* Días patrios argentinos: celeste y blanco con el dorado del Sol de Mayo */
:root:is([data-fiesta="malvinas"], [data-fiesta="revolucion-mayo"], [data-fiesta="bandera"], [data-fiesta="independencia"], [data-fiesta="san-martin"], [data-fiesta="soberania"]) {
  --paper: #f5f6f2; --paper-2: #e6eef4; --line: #cfdbe4; --navy: #2b6699; --navy-deep: #11304a; --sand: #7f5c05; --sand-soft: #f6b40e;
}
:root[data-fiesta="navidad"] { --paper: #f7f4ee; --navy: #1e5a3e; --navy-deep: #0f2e21; --sand: #a3302a; --sand-soft: #c9a24a; }

/* Saludo arriba de la cabecera */
.fiesta-banner { background: var(--navy-deep); color: var(--white); }
.fiesta-banner p { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 9px; padding-bottom: 9px; font-weight: 600; font-size: .95rem; line-height: 1.4; text-align: center; }
.fiesta-icon { flex: none; width: 20px; height: 20px; color: var(--sand-soft); }
.fiesta-banner .hole { fill: var(--navy-deep); }
.fiesta-banner .cut { fill: none; stroke: var(--navy-deep); }

/* Adornos alrededor del logo de la portada */
[data-fiesta] .hero { background: radial-gradient(55% 50% at 74% 48%, color-mix(in srgb, var(--sand-soft) 16%, transparent), transparent 72%); }
[data-fiesta] .hero-art { position: relative; }
.fiesta-decor { position: absolute; inset: -4% -2%; pointer-events: none; }
.fiesta-decor svg { position: absolute; height: auto; aspect-ratio: 1; color: var(--sand-soft); opacity: .9; animation: fiesta-float 7s ease-in-out infinite alternate; }
.fiesta-decor svg:nth-child(even) { color: var(--navy); opacity: .75; }
.fiesta-decor .hole { fill: var(--paper); }
.fiesta-decor .cut { fill: none; stroke: var(--paper); }
/* La escarapela y la bandera llevan sus colores reales, sin importar la posición */
.fiesta-decor svg:is(.m-escarapela, .m-bandera), .fiesta-icon:is(.m-escarapela, .m-bandera) { color: #74acdf; opacity: 1; }
.fiesta-banner :is(.m-escarapela, .m-bandera) .hole { fill: var(--white); }
[data-fiesta] .sun { fill: #f6b40e; }
.fiesta-decor svg:nth-child(1) { top: 0; left: 2%; width: 13%; animation-duration: 8s; }
.fiesta-decor svg:nth-child(2) { top: -2%; right: 14%; width: 9%; animation-delay: -2s; }
.fiesta-decor svg:nth-child(3) { top: 30%; right: -2%; width: 11%; animation-duration: 6s; animation-delay: -1s; }
.fiesta-decor svg:nth-child(4) { bottom: 8%; right: 4%; width: 9.5%; animation-delay: -4s; }
.fiesta-decor svg:nth-child(5) { bottom: -3%; left: 32%; width: 10%; animation-duration: 9s; animation-delay: -3s; }
.fiesta-decor svg:nth-child(6) { bottom: 20%; left: -2%; width: 9%; animation-duration: 6.5s; animation-delay: -5s; }
.fiesta-decor svg:nth-child(7) { top: 4%; left: 44%; width: 6.5%; animation-duration: 5.5s; animation-delay: -2.5s; }
@keyframes fiesta-float { from { transform: translateY(0) rotate(-8deg); } to { transform: translateY(-10px) rotate(8deg); } }
@media (max-width: 860px) {
  [data-fiesta] .hero { background: radial-gradient(70% 34% at 50% 16%, color-mix(in srgb, var(--sand-soft) 16%, transparent), transparent 72%); }
  [data-fiesta] .hero-art { width: min(100%, 330px); justify-self: center; }
  .fiesta-decor { bottom: 6%; } /* que no toque la etiqueta que va debajo del logo */
  .fiesta-banner p { font-size: .9rem; }
}
@media print { .fiesta-banner, .fiesta-decor { display: none; } }

/* Aparición suave */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .carousel-track { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* QR de la entrada */
.ticket-qr { display: block; width: min(240px, 70vw); height: auto; margin: 0 auto 18px; border-radius: 12px; border: 1px solid var(--line); image-rendering: pixelated; }
@media print { .ticket-qr { width: 200px; } }