/* Composiciones específicas de páginas */

/* ---------- Sin JavaScript: navegación visible en móvil ---------- */
html:not(.js) .site-header__toggle,
html:not(.js) .menu-panel { display: none; }
@media (max-width: 1023px) {
  html:not(.js) .site-header { position: absolute; height: auto; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; padding-block: var(--sp-3); }
  html:not(.js) .site-header__nav { display: block; width: 100%; overflow-x: auto; }
  html:not(.js) .site-header__nav ul { gap: var(--sp-4); }
}

/* ---------- Utilidades de composición ---------- */
.section--green { background: var(--c-green); color: var(--c-ink); }
.section--stage { isolation: isolate; overflow: hidden; }
.section--stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--c-ink) 0%, rgba(23,23,23,.82) 50%, var(--c-ink) 100%),
              url("/assets/img/texture-stage.webp") center / cover no-repeat;
  opacity: .9;
}
.section--green .section-head__eyebrow { color: var(--c-ink); }

.split-block { display: grid; gap: var(--sp-6); }
.split-block .section-head { margin-bottom: 0; }
.split-block .section-head { grid-template-columns: 1fr; }
.split-block .section-head__lead { justify-self: start; }
@media (min-width: 900px) {
  .split-block { grid-template-columns: 1fr 1fr; gap: 8%; align-items: start; }
}

/* ---------- Elenco (bloque promocional) ---------- */
.elenco-promo__grid { display: grid; gap: var(--sp-7); align-items: center; }
.elenco-promo__title { font-size: var(--fs-2xl); margin: var(--sp-4) 0 var(--sp-5); max-width: 14ch; }
.elenco-promo__title em { color: var(--c-green); }
.elenco-promo__words {
  display: grid;
  margin: 0;
  font: var(--fs-3xl)/1.02 var(--f-display);
  letter-spacing: -0.045em;
}
.elenco-promo__words em { color: var(--c-green); }
.elenco-promo__words span:nth-child(3) { color: transparent; -webkit-text-stroke: 1px var(--c-white); }
@media (min-width: 900px) { .elenco-promo__grid { grid-template-columns: 1fr 1fr; gap: 8%; } .elenco-promo__words { justify-self: end; } }

/* ---------- Iniciativas ---------- */
.initiatives { background: var(--c-white); border-top: 1px solid var(--c-line); }
.initiatives__head { padding-block: var(--sp-8) var(--sp-6); display: grid; gap: var(--sp-3); }
.initiatives__title { font-size: var(--fs-xl); max-width: 26ch; }

.research { padding-block: var(--sp-6) var(--section-y); }
.research__grid { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 900px) { .research__grid { grid-template-columns: .9fr 1.1fr; gap: 10%; } }
.research__visual {
  display: grid;
  place-items: center;
  gap: var(--sp-5);
  padding: var(--sp-8) var(--sp-5);
  background: var(--c-mist);
}
.research__book {
  position: relative;
  width: min(220px, 55%);
  aspect-ratio: .72;
  perspective: 900px;
}
.research__page {
  position: absolute;
  inset: 0;
  border: 1px solid #A9AA9E;
  background:
    repeating-linear-gradient(180deg, transparent 0 22px, rgba(23,23,23,.08) 22px 23px) 18% 30% / 64% 50% no-repeat,
    var(--c-paper);
  transform-origin: left center;
  box-shadow: 0 30px 50px -30px rgba(23,23,23,.45);
  transition: transform var(--dur-slow) var(--ease-out);
}
.research__page:nth-child(1) { transform: rotateY(-8deg) translateX(10px); }
.research__page:nth-child(2) { transform: rotateY(-16deg) translateX(5px); }
.research__page:nth-child(3) { transform: rotateY(-26deg); background-color: var(--c-white); }
.research__visual:hover .research__page:nth-child(3) { transform: rotateY(-48deg); }
.research__visual:hover .research__page:nth-child(2) { transform: rotateY(-28deg) translateX(5px); }
.research__caption { margin: var(--sp-4) 0 0; font: italic var(--fs-md) var(--f-display); color: var(--c-muted); }
.research__title { font-size: var(--fs-2xl); margin: var(--sp-4) 0 var(--sp-5); max-width: 13ch; }
.research__title em { color: var(--c-green-ink); }
.research__book-title { font: var(--fs-lg)/1.3 var(--f-display); margin-bottom: var(--sp-4); }
.research__copy > p:not(.eyebrow):not(.research__book-title) { color: var(--c-muted); max-width: 52ch; }

.network { background: var(--c-ink); color: var(--c-white); padding-block: var(--section-y); }
.network__grid { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 900px) { .network__grid { grid-template-columns: 1fr 1fr; gap: 10%; } }
.network__title { font-size: var(--fs-3xl); line-height: 1.02; margin: var(--sp-4) 0 var(--sp-5); max-width: 11ch; }
.network__title em { color: var(--c-green); }
.network__map { list-style: none; display: grid; gap: var(--sp-6); text-align: center; position: relative; }
.network__map::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10%; bottom: 10%;
  width: 1px;
  background: linear-gradient(var(--c-green), var(--c-green)) top / 100% 0 no-repeat, var(--c-line-dark);
  transition: background-size 1.6s var(--ease-out) .3s;
}
.network__map.is-revealed::before { background-size: 100% 100%; }
.network__map li { position: relative; padding: var(--sp-4); background: var(--c-ink); }
.network__map small { display: block; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted-dark); }
.network__map strong { display: block; margin: var(--sp-1) 0; font: var(--fs-xl) var(--f-display); font-weight: 400; }
.network__map span { font-size: var(--fs-sm); color: var(--c-muted-dark); }
.network__map .is-center { border: 1px solid var(--c-green); border-radius: var(--radius); }
.network__map .is-center strong { color: var(--c-green); }
.network__choices { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
@media (min-width: 600px) { .network__choices { grid-template-columns: 1fr 1fr; } }
.network__choices .disclosure { margin: 0; padding-top: var(--sp-4); border-top: 1px solid var(--c-line-dark); }
.network__choices summary { color: var(--c-green); }
.network__choices p { font-size: var(--fs-sm); color: #DDDDD6; }

.festival { background: var(--c-coral); color: var(--c-ink); padding-block: var(--sp-8); overflow: hidden; }
.festival__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.festival__status { font-size: var(--fs-xs); border: 1px solid var(--c-ink); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius); }
.festival__title {
  margin: var(--sp-7) 0;
  font-size: clamp(3.25rem, 1rem + 9.5vw, 9.5rem);
  line-height: .96;
  letter-spacing: -0.055em;
  max-width: 12ch;
}
.festival__stage { position: relative; display: grid; align-items: end; margin: var(--sp-7) 0; }
.festival__stage .festival__title { margin: 0 0 var(--sp-6); }
.festival__media { margin: 0 0 var(--sp-6); width: min(260px, 60%); order: -1; aspect-ratio: 3 / 4; overflow: hidden; justify-self: end; box-shadow: 0 30px 60px -30px rgba(23,23,23,.6); }
.festival__media img { width: 100%; height: 120%; object-fit: cover; }
@media (min-width: 900px) {
  .festival__stage { grid-template-columns: 1fr minmax(240px, 30%); gap: var(--sp-6); }
  .festival__media { margin: 0 0 var(--sp-6); width: 100%; max-width: 340px; order: 0; }
  .festival__stage .festival__title { margin-bottom: var(--sp-7); }
}
.festival__bottom { display: grid; gap: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid #873B30; }
@media (min-width: 900px) { .festival__stage { position: relative; display: grid; align-items: end; margin: var(--sp-7) 0; }
.festival__stage .festival__title { margin: 0 0 var(--sp-6); }
.festival__media { margin: 0 0 var(--sp-6); width: min(260px, 60%); order: -1; aspect-ratio: 3 / 4; overflow: hidden; justify-self: end; box-shadow: 0 30px 60px -30px rgba(23,23,23,.6); }
.festival__media img { width: 100%; height: 120%; object-fit: cover; }
@media (min-width: 900px) {
  .festival__stage { grid-template-columns: 1fr minmax(240px, 30%); gap: var(--sp-6); }
  .festival__media { margin: 0 0 var(--sp-6); width: 100%; max-width: 340px; order: 0; }
  .festival__stage .festival__title { margin-bottom: var(--sp-7); }
}
.festival__bottom { grid-template-columns: 1.1fr .9fr; gap: 10%; } }
.festival__bottom p { max-width: 56ch; }

/* ---------- Memoria y temporada destacada ---------- */
.memory__grid { display: grid; gap: var(--sp-7); align-items: center; }
.memory .section-head { grid-template-columns: 1fr; margin-bottom: var(--sp-5); }
@media (min-width: 900px) { .memory__grid { grid-template-columns: 1fr 1fr; gap: 8%; } }
.season-feature {
  position: relative;
  padding: clamp(2rem, 4vw, 3.5rem);
  background: var(--c-ink);
  color: var(--c-white);
  overflow: hidden;
}
.season-feature__roman {
  display: block;
  font: clamp(5rem, 12vw, 9rem)/.9 var(--f-display);
  letter-spacing: -0.05em;
  color: var(--c-coral);
  margin-bottom: var(--sp-5);
}
.season-feature .eyebrow { color: var(--c-muted-dark); }
.season-feature h3 { font-size: var(--fs-xl); margin: var(--sp-3) 0 var(--sp-4); }

/* ---------- Aliado ---------- */
.ally__grid { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 900px) { .ally__grid { grid-template-columns: 1.4fr 1fr; gap: 8%; } }
.ally__title { font-size: var(--fs-2xl); margin: var(--sp-4) 0 var(--sp-5); max-width: 14ch; }
.ally__title em { color: var(--c-coral-ink); }
.ally__logo { justify-self: center; width: min(320px, 80%); }
.ally__logo img { width: 100%; height: auto; }

/* ---------- Banda de llamada a la acción ---------- */
.cta-band__title { font-size: var(--fs-3xl); line-height: 1.02; margin: var(--sp-4) 0 var(--sp-6); max-width: 14ch; }
.cta-band__title em { font-style: italic; }
.cta-band__row { display: grid; gap: var(--sp-4); padding-top: var(--sp-5); border-top: 1px solid rgba(23,23,23,.3); }
.cta-band__row .btn-row { margin-top: 0; }
.cta-band__row a:not(.btn) { color: inherit; }
.cta-band__primary { --btn-bg: var(--c-ink); --btn-fg: var(--c-white); --btn-fill: var(--c-white); --btn-fill-fg: var(--c-ink); border-color: var(--c-ink); }
@media (min-width: 900px) { .cta-band__row { grid-template-columns: 1fr auto; align-items: center; } }

.cta-dark__title { font-size: var(--fs-2xl); margin-top: var(--sp-4); max-width: 14ch; }
.cta-dark__title em { color: var(--c-green); }

/* ---------- Academia: pasos ---------- */
.steps { list-style: none; display: grid; gap: var(--sp-5); }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { padding-top: var(--sp-5); border-top: 2px solid var(--c-ink); }
.steps__num { font: italic var(--fs-2xl)/1 var(--f-display); color: var(--c-green-ink); }
.steps h3 { font-size: var(--fs-lg); margin: var(--sp-4) 0 var(--sp-3); }
.steps p { color: var(--c-muted); }

/* ---------- Gastrocultural: dos modalidades ---------- */
.duo { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo__item { padding: clamp(1.75rem, 4vw, 3rem); border: 1px solid var(--c-line); background: var(--c-paper); }
.duo__item h3 { font-size: var(--fs-xl); margin: var(--sp-4) 0; }
.duo__item p { color: var(--c-muted); }
.duo__item--dark { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
.duo__item--dark p { color: var(--c-muted-dark); }

/* ---------- Agenda: tarjetas de enlace ---------- */
.link-cards { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); max-width: 880px; }
@media (min-width: 700px) { .link-cards { grid-template-columns: 1fr 1fr; } }
.link-card {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  background: var(--c-white);
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.link-card strong { font: var(--fs-lg) var(--f-display); font-weight: 400; }
.link-card .eyebrow { color: var(--c-muted); }
.link-card__arrow { position: absolute; top: var(--sp-5); right: var(--sp-5); transition: transform var(--dur-base) var(--ease-out); }
.link-card:hover { background: var(--c-ink); color: var(--c-white); }
.link-card:hover .eyebrow { color: var(--c-green); }
.link-card:hover .link-card__arrow { transform: translate(4px, -4px); }

/* ---------- Agrupaciones ---------- */
.check-list { list-style: none; display: grid; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-5); }
.check-list li { display: flex; gap: var(--sp-3); align-items: baseline; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-line); }
.check-list li::before { content: "✦"; color: var(--c-green-ink); font-size: .8em; }

/* ---------- Elenco ---------- */
.formation { margin-top: var(--sp-7); padding-left: var(--sp-5); border-left: 3px solid var(--c-green-ink); max-width: 760px; }
.formation h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.repertoire { display: grid; gap: var(--sp-6); }
@media (min-width: 800px) { .repertoire { grid-template-columns: 1fr 1fr; } }
.repertoire article { padding-top: var(--sp-5); border-top: 1px solid var(--c-line-dark); }
.repertoire .eyebrow { color: var(--c-green); }
.repertoire h3 { font-size: var(--fs-2xl); margin: var(--sp-4) 0; }
.repertoire p { color: var(--c-muted-dark); max-width: 48ch; }

/* ---------- Contacto ---------- */
.contact-grid { display: grid; gap: var(--sp-7); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.3fr 1fr; gap: 8%; } }
.contact-grid__title { font-size: var(--fs-xl); margin-bottom: var(--sp-4); }
.contact-side { display: grid; gap: var(--sp-4); align-content: start; }
.contact-card { padding: var(--sp-6); border: 1px solid var(--c-line); background: var(--c-paper); }
.contact-card h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.contact-card--dark { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
.contact-card--dark p { color: var(--c-muted-dark); }
.social-list { list-style: none; display: grid; margin-top: var(--sp-4); }
.social-list a {
  display: flex;
  justify-content: space-between;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-line);
  font: var(--fs-lg) var(--f-display);
  text-decoration: none;
  transition: padding var(--dur-base) var(--ease-out), color var(--dur-fast);
}
.social-list a:hover { padding-left: var(--sp-3); color: var(--c-green-ink); }

/* ---------- Reservas (Whimo incrustado) ---------- */
.booking { border: 1px solid var(--c-line); background: var(--c-white); box-shadow: 0 30px 60px -40px rgba(23,23,23,.35); }
.booking__frame { position: relative; background: var(--c-white); }
/* Alto medido del formulario de Whimo (29-10-2026) + margen: 1181 px desde 640 px de ancho, hasta 1356 px en 328 px.
   Si Whimo envía su altura (embed-height.js), el estilo en línea la reemplaza y sigue los cambios del formulario. */
.booking__frame iframe { display: block; width: 100%; height: 1240px; transition: height var(--dur-base) var(--ease-out); }
@media (max-width: 640px) { .booking__frame iframe { height: 1420px; } }
/* lenis.css desactiva el puntero en iframes mientras hay scroll suave: el formulario debe ser siempre usable */
.lenis.lenis-smooth .booking__frame iframe { pointer-events: auto; }
.booking__help {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5) clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--c-line);
  background: var(--c-paper);
}
.booking__help .btn-row { margin-top: 0; }
@media (min-width: 900px) { .booking__help { grid-template-columns: 1fr auto; align-items: center; } }
.booking__notes { list-style: none; display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }
@media (min-width: 800px) { .booking__notes { grid-template-columns: repeat(3, 1fr); } }
.booking__notes li { padding-top: var(--sp-4); border-top: 2px solid var(--c-ink); }
.booking__notes .eyebrow { color: var(--c-green-ink); }
.booking__notes p { margin-top: var(--sp-3); color: var(--c-muted); }

/* ---------- Preguntas frecuentes (contacto) ---------- */
.faq__list { border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  list-style: none;
  font: var(--fs-lg)/1.3 var(--f-display);
  letter-spacing: -0.01em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  flex: none;
  font: 400 1.4em/1 var(--f-body);
  color: var(--c-green-ink);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--c-green-ink); }
.faq__answer { padding: 0 0 var(--sp-5); max-width: 62ch; color: var(--c-muted); }
.faq__item[open] .faq__answer { animation: disclose var(--dur-base) var(--ease-out); }