/* ============================================================
   MADERA JAZZ × JAZZ AL PARQUE 2026 — /jazzalparque
   Línea gráfica del festival (afiche oficial 2026, Idartes) sobre la
   anatomía de la banda. Se carga DESPUÉS de styles.css.
   Orden: fuente · tokens · tema · puente (overrides) · roles · secciones · responsive
   ============================================================ */

/* --- Fuente del festival (Google Fonts, OFL, subset latino) --- */
@font-face { font-family: "Bebas Neue"; src: url("../assets/fonts/bebas-neue.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bebas-fallback"; src: local("Arial Narrow"), local("Helvetica Neue"); size-adjust: 92%; ascent-override: 90%; descent-override: 20%; }

/* --- Tokens del festival (muestreados del afiche y del arte del piano) --- */
:root {
  --jap-sky-deep: #064f9e;      /* fondo de página */
  --jap-sky: #08579c;           /* tope del degradado, cierre */
  --jap-sky-light: #1567b1;     /* paneles; solo texto ≥ 24 px */
  --jap-cloud: #3b7ab0;         /* decorativo: nunca detrás de texto */
  --jap-navy: #003150;          /* header, footer, tinta de botón */
  --jap-teal: #066b77;          /* banda de datos (barra inferior del afiche) */
  --jap-cream: #e5e1c6;         /* wordmark, display */
  --jap-cream-soft: #dddcc0;    /* títulos, reglas */
  --jap-cream-bright: #e9f1e6;  /* nombres, cuerpo */
  --jap-ice: #d7f2fd;           /* rol Book: paréntesis, meta */
  --jap-lid: #301829;           /* tapa del piano: bloque compartir */
  --jap-lawn: #1d7064;
  --jap-lawn-deep: #206159;
  --jap-bass: #792a3d;          /* subrayado y hover puntual */
  --jap-cta: var(--halo-gold);  /* único color de acción = halo de la banda */
  --jap-cta-hover: #ffe4a0;
  --jap-sky-gradient: linear-gradient(180deg, #08579c 0%, #064f9e 55%, #0064b0 100%);
  --jap-hairline: rgba(229, 225, 198, .38);
  --jap-font-display: "Bebas Neue", "Bebas-fallback", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}

/* --- Tema: solo los alias semánticos --- */
[data-theme="jap"] {
  --surface-page: var(--jap-sky-deep);
  --surface-raised: var(--jap-sky);
  --surface-inset: var(--jap-navy);
  --surface-card: var(--jap-lid);
  --text-strong: var(--jap-cream);
  --text-body: rgba(233, 241, 230, .92);
  --text-muted: rgba(229, 225, 198, .84);
  --text-inverse: var(--jap-navy);
  --border-hairline: rgba(229, 225, 198, .16);
  --border-strong: rgba(229, 225, 198, .6);
  --accent-primary: var(--jap-cta);
  --focus-ring: var(--jap-cta);
}

/* --- Puente: lo que styles.css fija en colores de la banda --- */
[data-theme="jap"] .site-header { background: rgba(0, 49, 80, .82); }
[data-theme="jap"] .site-header[data-scrolled] { background: rgba(0, 49, 80, .94); }
[data-theme="jap"] .site-nav a,
[data-theme="jap"] .footer-links a {
  font: 400 14px/1 var(--jap-font-display); letter-spacing: .18em; text-transform: uppercase;
}
[data-theme="jap"] .footer-links a { font-size: 13px; line-height: 1.4; }
[data-theme="jap"] .site-nav a:hover,
[data-theme="jap"] .footer-links a:hover { color: var(--jap-cta); }
[data-theme="jap"] .site-nav a::after,
[data-theme="jap"] .footer-links a::after { background: var(--jap-cta); }
[data-theme="jap"] .footer-credits { font: 400 13px/1.4 var(--jap-font-display); letter-spacing: .1em; color: var(--text-muted); }
[data-theme="jap"] ::selection { background: var(--jap-bass); color: var(--jap-cream); }
[data-theme="jap"] .skip-link { background: var(--jap-cta); color: var(--jap-navy); }
[data-theme="jap"] .section-label { color: var(--jap-cream); opacity: .84; }

/* Botones: Bebas, planos, radio 2 px (el afiche no tiene sombras de imprenta) */
[data-theme="jap"] .btn {
  --btn-h: 48px; --btn-px: 24px;
  font-family: var(--jap-font-display); font-size: 18px; font-weight: 400; font-stretch: normal;
  letter-spacing: .1em; border-radius: var(--radius-xs);
}
[data-theme="jap"] .btn-sm { --btn-h: 36px; --btn-px: 14px; font-size: 14px; }
[data-theme="jap"] .btn-gold { background: var(--jap-cta); color: var(--jap-navy); border-color: var(--jap-cta); --btn-ink: var(--jap-cta-hover); }
[data-theme="jap"] .btn-gold:hover { border-color: var(--jap-cta-hover); color: var(--jap-navy); }
[data-theme="jap"] .btn-outline { --btn-ink: transparent; }
[data-theme="jap"] .btn-outline:hover { color: var(--jap-cta); border-color: var(--jap-cta); }

/* --- Roles tipográficos: Bebas Neue solo existe en Regular; Bold / Book / Thin se emulan --- */
.jap-d { font-family: var(--jap-font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .015em; }
.jap-bold { -webkit-text-stroke: .03em currentColor; letter-spacing: .02em; }
.jap-book { color: var(--jap-ice); opacity: .88; letter-spacing: .04em; }
.jap-thin { font-family: var(--jap-font-display); font-weight: 400; text-transform: uppercase; font-size: 12px; line-height: 1.4; letter-spacing: .34em; color: var(--jap-cream); opacity: .84; }
.jap-teal .jap-thin { opacity: 1; }
.jap-sep { color: var(--jap-cream); opacity: .8; margin: 0 .35em; }
.jap-body { margin: 0; font: var(--type-body); color: var(--text-body); max-width: var(--measure); text-wrap: pretty; }
.jap-link { color: var(--jap-cta); font-weight: var(--weight-semibold); }
.jap-link:hover { color: var(--jap-cta-hover); }

/* --- Secciones --- */
.jap-section { padding: clamp(56px, 7vw, 96px) var(--gutter-page) clamp(48px, 6vw, 80px); }
.jap-h2 { margin: 0; font-size: clamp(34px, 3.4vw, 44px); line-height: 1; color: var(--jap-cream-soft); }
.jap-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: clamp(28px, 3vw, 40px); }

/* Hero: cielo del afiche, wordmark, ilustración de la banda */
.jap-hero {
  position: relative; overflow-x: clip;
  padding: clamp(40px, 6vw, 72px) var(--gutter-page) 0;
  background: var(--jap-sky-gradient);
}
.jap-hero::before, .jap-hero::after {
  content: ""; position: absolute; border-radius: var(--radius-circle); pointer-events: none;
  background: radial-gradient(closest-side, rgba(59, 122, 176, .55), rgba(59, 122, 176, 0));
}
.jap-hero::before { left: -8%; top: 60px; width: 40%; height: 320px; }
.jap-hero::after { right: 8%; top: 220px; width: 50%; height: 380px; }
.jap-hero-grid {
  position: relative; display: grid; gap: var(--space-7);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start;
}
.jap-hero-copy { display: flex; flex-direction: column; gap: 24px; padding: 24px 0 clamp(48px, 6vw, 88px); }
.jap-hero-copy > * { margin: 0; }
.jap-wordmark {
  width: min(560px, 100%); aspect-ratio: 1200 / 657; background: var(--jap-cream);
  -webkit-mask: url("../assets/img/jap/wordmark-1200.png") center / contain no-repeat;
          mask: url("../assets/img/jap/wordmark-1200.png") center / contain no-repeat;
}
.jap-hero h1 { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.05; color: var(--jap-cream-soft); }
.jap-hero-day { font-size: clamp(88px, 11vw, 160px); line-height: .9; color: var(--jap-cream); }
.jap-hero-time { font-size: clamp(40px, 4vw, 56px); line-height: 1; color: var(--jap-cta); margin-top: -8px; }
.jap-hero-place { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; }
.jap-hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: 8px; }
.jap-hero-art { position: relative; z-index: 2; align-self: end; justify-self: end; margin: 0; }
.jap-hero-art picture { display: block; }
.jap-hero-art img { width: min(540px, 100%); height: auto; display: block; margin-bottom: clamp(-120px, -8vw, -40px); }

/* Datos para ir: banda teal del afiche */
.jap-datos { background: var(--jap-teal); }
.jap-datos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); }
.jap-card { border-top: 1px solid var(--jap-hairline); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.jap-card h3 { margin: 0 0 6px; font-size: 34px; line-height: 1; color: var(--jap-cream); }
.jap-card p { margin: 0; }
.jap-card .jap-soft { color: var(--jap-ice); }
.jap-card-links { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 6px; }
.jap-teal .jap-link { color: var(--jap-cream-bright); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--jap-hairline); }
.jap-teal .jap-link:hover { color: var(--jap-cta-hover); }
.jap-datos-note { margin: clamp(40px, 5vw, 64px) 0 0; padding-top: 20px; border-top: 1px solid var(--jap-hairline); }

/* Compartir: tapa del piano */
.jap-compartir { background: var(--jap-lid); }
.jap-compartir-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.jap-display { margin: 0; font-size: clamp(64px, 8vw, 120px); line-height: .9; color: var(--jap-cream); }
.jap-lead { margin: 0; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; max-width: 34ch; }
.jap-share-copy { display: flex; flex-direction: column; gap: 20px; }
.jap-share-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.jap-share-fallback { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.jap-share-status { margin: 0; min-height: 1.4em; }
.jap-share-assets { display: flex; flex-direction: column; gap: 20px; }
.jap-share-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.jap-share-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); background: rgba(0, 0, 0, .18); }
.jap-share-card p { margin: 0; font-size: 11px; }
.jap-share-card img { width: 100%; height: auto; display: block; border-radius: var(--radius-xs); }
.jap-share-card .btn { --btn-px: 12px; width: 100%; margin-top: auto; white-space: normal; height: auto; min-height: var(--btn-h); padding-block: 10px; font-size: 16px; text-align: center; }
.jap-caption {
  margin: 0; padding: 20px; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 400 15px/1.6 var(--font-sans); color: var(--text-body);
  background: rgba(0, 0, 0, .22); border: 1px solid var(--border-hairline); border-radius: var(--radius-xs);
}

/* La banda */
.jap-banda { background: var(--jap-sky-deep); }
.jap-banda-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(40px, 5vw, 64px); align-items: center; }
.jap-banda-copy { display: flex; flex-direction: column; gap: 20px; }
.jap-banda-copy > * { margin: 0; }
.jap-banda-name { font-size: clamp(56px, 7vw, 96px); line-height: .9; color: var(--jap-cream); }
.jap-banda-photo { margin: 0; width: min(100%, 520px); justify-self: end; }
/* Foto en círculo (la forma de marca) con anillo fino separado, mismo patrón
   que .member picture::before en la portada; el recorte lo hace el img. */
.jap-banda-photo picture { position: relative; display: block; border-radius: var(--radius-circle); }
.jap-banda-photo picture::before {
  content: ""; position: absolute; inset: -9px; border-radius: var(--radius-circle);
  border: 1px solid var(--jap-hairline); pointer-events: none;
}
.jap-banda-photo img {
  width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 50%;
  display: block; border-radius: var(--radius-circle);
}
.jap-banda-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin-top: 8px; }
.jap-textlink { font-family: var(--jap-font-display); font-size: 18px; letter-spacing: .1em; text-transform: uppercase; color: var(--jap-cta); border-bottom: 2px solid var(--jap-bass); padding-bottom: 2px; }
.jap-textlink:hover { color: var(--jap-cta-hover); }

/* Preguntas frecuentes: respuestas cortas y citables (GEO) */
.jap-faq { background: var(--jap-sky); }
.jap-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-7); }
.jap-faq .jap-card h3 { font-size: 26px; line-height: 1.05; }

/* El festival: cartel completo, Madera Jazz destacada */
.jap-festival { background: var(--jap-navy); }
.jap-festival-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5) var(--space-7); margin-bottom: clamp(32px, 4vw, 48px); }
.jap-quote { grid-column: 1 / -1; margin: 8px 0 0; padding: 20px 24px; border-left: 3px solid var(--jap-cta); background: rgba(255, 255, 255, .04); display: flex; flex-direction: column; gap: 10px; }
.jap-quote p { max-width: none; }
.jap-lineup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-6); }
.jap-lineup-group { border-top: 1px solid var(--jap-hairline); padding-top: 20px; }
.jap-lineup-group h3 { margin: 0 0 14px; font-size: 26px; line-height: 1; color: var(--jap-cream); }
.jap-lineup-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.jap-lineup-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: var(--type-body); color: var(--text-body); }
.jap-lineup-name { font-family: var(--jap-font-display); font-size: 22px; line-height: 1; text-transform: uppercase; letter-spacing: .03em; color: var(--jap-cream-bright); }
.jap-lineup-origin { font-size: 14px; color: var(--jap-ice); opacity: .88; }
.jap-lineup-list li.is-us { padding: 10px 12px; margin: 2px -12px; background: var(--jap-cta); }
.jap-lineup-list li.is-us .jap-lineup-name, .jap-lineup-list li.is-us .jap-lineup-origin { color: var(--jap-navy); opacity: 1; }
.jap-festival-note { margin: clamp(32px, 4vw, 48px) 0 0; padding-top: 20px; border-top: 1px solid var(--jap-hairline); display: flex; flex-direction: column; gap: 12px; }

/* Diálogo de calendario (escritorio): Google · Apple/Outlook (.ics) · Outlook.com */
.jap-cal-dialog {
  width: min(440px, calc(100vw - 32px)); max-width: none; padding: 28px; margin: auto;
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs);
  background: var(--jap-navy); color: var(--text-body);
}
.jap-cal-dialog::backdrop { background: rgba(0, 20, 40, .72); }
.jap-cal-dialog p { margin: 0; }
.jap-cal-dialog h2 { margin: 6px 0 20px; font-size: 34px; line-height: 1; color: var(--jap-cream); }
.jap-cal-options { display: flex; flex-direction: column; gap: var(--space-3); }
.jap-cal-options .btn { width: 100%; }
.jap-cal-dialog form { margin: 18px 0 0; display: flex; justify-content: flex-end; }

/* Cierre */
.jap-cierre { background: var(--jap-sky); display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 4vw, 40px); text-align: center; }
.jap-cierre .jap-share-row { justify-content: center; }

/* Pie: nota del festival + barra de plataformas de la banda */
.jap-footer-note { padding: 28px var(--gutter-page) 0; }
.jap-footer-note p { margin: 0; }
[data-theme="jap"] .site-footer { background: var(--jap-navy); border-top: 0; }

/* --- Responsive: mismos cortes que la portada --- */
@media (max-width: 1023px) {
  .jap-hero-grid, .jap-compartir-grid, .jap-banda-grid, .jap-faq-grid, .jap-festival-intro { grid-template-columns: 1fr; }
  .jap-lineup { grid-template-columns: 1fr; }
  .jap-datos-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .jap-hero-copy { padding-bottom: 0; }
  .jap-hero-art { justify-self: end; margin-right: calc(-1 * var(--gutter-page) + 8px); }
  .jap-hero-art img { width: min(360px, 78vw); margin-bottom: -48px; }
  .jap-banda-grid { grid-template-columns: 1fr; }
  .jap-banda-photo { order: -1; width: min(100%, 420px); justify-self: center; }
}
@media (max-width: 639px) {
  .jap-hero-copy { gap: 18px; }
  .jap-hero-cta .btn, .jap-share-row .btn, .jap-share-fallback .btn, .jap-cierre .btn { width: 100%; }
  .jap-share-fallback { width: 100%; }
  .jap-share-cards { gap: var(--space-3); }
  .jap-share-card { padding: 12px; }
  .jap-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .jap-cal-dialog { width: 100%; margin: auto 0 0; border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
}

/* --- Movimiento (sin librerías). Estados ocultos solo bajo html.js; arrancan con html.ready
   (fuentes listas, tope 400 ms en main.js). La ilustración es el LCP: nunca pasa por opacity 0. --- */
.js .jap-hero-copy > :not(.jap-hero-cta), .js .jap-hero-cta .btn { opacity: 0; }
@keyframes jap-rise { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes jap-eyebrow { from { opacity: 0; letter-spacing: .7em; } to { opacity: 1; letter-spacing: .34em; } }
@keyframes jap-wordmark { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 -2% 0 0); } }
@keyframes jap-settle { from { translate: 0 18px; } to { translate: 0 0; } }
@keyframes jap-cloud-a { to { translate: 4vw 2vh; } }
@keyframes jap-cloud-b { to { translate: -3vw -2vh; } }
.jap-hero-copy > :nth-child(2) { --i: 1; } .jap-hero-copy > :nth-child(3) { --i: 2; } .jap-hero-copy > :nth-child(4) { --i: 3; }
.jap-hero-copy > :nth-child(5) { --i: 4; } .jap-hero-copy > :nth-child(6) { --i: 5; } .jap-hero-copy > :nth-child(7) { --i: 6; }
.js.ready .jap-hero-copy > * { animation: jap-rise var(--dur-hero) var(--ease-out) calc(var(--i, 0) * 110ms) both; }
.js.ready .jap-hero-copy > .jap-thin:first-child { animation-name: jap-eyebrow; }
.js.ready .jap-wordmark { animation-name: jap-wordmark; animation-duration: calc(var(--dur-hero) * 1.2); }
.js.ready .jap-hero-cta { animation: none; opacity: 1; }
.js.ready .jap-hero-cta .btn { animation: jap-rise var(--dur-hero) var(--ease-groove) both; }
.js.ready .jap-hero-cta .btn:nth-child(1) { animation-delay: 760ms; }
.js.ready .jap-hero-cta .btn:nth-child(2) { animation-delay: 850ms; }
.js.ready .jap-hero-art img { animation: jap-settle var(--dur-hero) var(--ease-out) 200ms both; }
.js.ready .jap-hero::before { animation: jap-cloud-a 28s var(--ease-in-out) infinite alternate; }
.js.ready .jap-hero::after { animation: jap-cloud-b 34s var(--ease-in-out) infinite alternate; }
/* Foto de la banda: se asienta al entrar en pantalla (el reveal lo dispara main.js) */
.js .jap-banda-photo[data-reveal] img { scale: 1.06; transition: scale calc(var(--dur-reveal) * 1.4) var(--ease-out); }
.js .jap-banda-photo.is-in img { scale: 1; }

@media (prefers-reduced-motion: reduce) {
  /* Repite el prefijo .js.ready para ganar en especificidad a las reglas de arriba. */
  .js .jap-hero-copy > :not(.jap-hero-cta), .js .jap-hero-cta .btn,
  .js.ready .jap-hero-copy > *, .js.ready .jap-hero-cta .btn, .js.ready .jap-wordmark,
  .js.ready .jap-hero-art img, .js.ready .jap-hero::before, .js.ready .jap-hero::after { opacity: 1; animation: none; }
  .js .jap-banda-photo[data-reveal] img { scale: none; transition: none; }
}