/* ==========================================================================
   Festival +CIPER 2026 — estilos base (mobile-first)
   Autor: Andrea Urzua Assler
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --background: #ffffff;
  --foreground: #0A1E3C;
  --primary: #1A5BCC;
  --accent: #FFFF00;
  --muted: #F0F3F9;
  --muted-foreground: #526080;
  --border: #DDE3EE;
  --navy: #06101E;
  --orange: #FF4B0B;
  --ease-tw: cubic-bezier(0.4, 0, 0.2, 1);
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono: 'DM Mono', 'Cascadia Code', monospace;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid var(--border); outline-color: rgba(26, 91, 204, 0.2); }
html { font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; font-family: var(--font-sans); -webkit-tap-highlight-color: transparent; height: 100%; }
body { height: 100%; background: var(--background); color: var(--foreground); }
a { color: inherit; text-decoration: inherit; }
img, svg { display: block; vertical-align: middle; }
img { max-width: 100%; height: auto; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: transparent; border-radius: 0; }
ol, ul { list-style: none; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
strong { font-weight: 700; }
/* Estilos base de theme.css para button */
button { font-size: 1rem; font-weight: 500; line-height: 1.5; }

.page { min-height: 100vh; background: var(--background); color: var(--foreground); overflow-x: hidden; }

.icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Animaciones ---------- */
@keyframes enter { from { opacity: 0; transform: translate(var(--x, 0), var(--y, 0)); } to { opacity: 1; transform: none; } }
.enter { --x: 0px; --y: 0px; animation: enter var(--dur) var(--ease) var(--delay) both; }
.enter.is-done { animation: none; }

@keyframes reveal { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
.js .reveal { opacity: 0; }
.js .reveal.is-visible { animation: reveal 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--d, 0s) both; }
/* Al terminar la animación se fija el estado final, para que no se repita (p. ej. al redimensionar la ventana) */
.js .reveal.is-done { animation: none; opacity: 1; }

@keyframes ticker { from { transform: translateX(0%); } to { transform: translateX(-33.33%); } }

/* ---------- Layout común ---------- */
.container { max-width: 1400px; margin-inline: auto; padding-inline: 1.25rem; }
.container--z { position: relative; z-index: 10; }
.section { position: relative; padding-block: 5rem; }
.section--white { background: #fff; }
.section--muted { background: var(--muted); }
.section--navy { background: var(--navy); }
.section--clip { overflow: hidden; }
.section--bt { border-top: 1px solid var(--border); }
.section--bb { border-bottom: 1px solid var(--border); }

.section__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 3.5rem; }
.section__head--block { display: block; }
.section__head--mb12 { margin-bottom: 3rem; }

.dots { position: absolute; inset: 0; background-size: 40px 40px; }
.dots--light { opacity: 0.025; background-image: radial-gradient(circle, #fff 1px, transparent 1px); }
.dots--dark { opacity: 0.025; background-image: radial-gradient(circle, rgba(10, 30, 60, 0.1) 1px, transparent 1px); }
.dots--cta { opacity: 0.03; background-image: radial-gradient(circle, #fff 1px, transparent 1px); }

.text-fg { color: var(--foreground); }
.text-primary { color: var(--primary); }
.text-white { color: #fff; }

/* ---------- Título fantasma ---------- */
.ghost-title { font: inherit; }
.ghost-title--mt { margin-top: 0.5rem; }
.ghost-title--mb6 { margin-bottom: 1.5rem; }
.ghost { display: block; position: relative; line-height: 0.85; }
.ghost__outline, .ghost__solid { display: block; font-family: var(--font-display); font-weight: 900; font-size: var(--size); }
.ghost__outline { -webkit-text-stroke: 2px var(--stroke); color: transparent; user-select: none; }
.ghost__solid { margin-top: -1.08em; position: relative; }

.ghost-label { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.ghost-label__line { width: 1.5rem; height: 2px; background: var(--primary); }
.ghost-label__text { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4em; color: var(--primary); }
.ghost-label--dark .ghost-label__line { background: var(--accent); }
.ghost-label--dark .ghost-label__text { color: var(--accent); }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; transition: color 0.15s var(--ease-tw), background-color 0.15s var(--ease-tw), border-color 0.15s var(--ease-tw); }
.btn--primary { background: var(--primary); color: #fff; padding: 1rem 2rem; }
.btn--outline { border: 1px solid var(--border); color: var(--foreground); font-size: 11px; padding: 0.875rem 2rem; }
.btn__arrow, .btn__lift { transition: transform 0.15s var(--ease-tw), translate 0.15s var(--ease-tw); }
.cta-row { display: flex; justify-content: center; margin-top: 3.5rem; }
.cta-row--mt6 { margin-top: 1.5rem; }
.cta-row--gap { flex-wrap: wrap; gap: 1rem; }
.more-link { text-align: center; margin-top: 3rem; }

/* ---------- Placeholder de foto ---------- */
.photo-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; border: 1px dashed var(--border); background: rgba(240, 243, 249, 0.4); }
.photo-ph__box { width: 2.5rem; height: 2.5rem; border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; color: rgba(82, 96, 128, 0.25); }
.photo-ph__text { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; text-align: center; line-height: 1.625; padding-inline: 1rem; color: rgba(82, 96, 128, 0.4); }
.photo-ph--dark { border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.03); }
.photo-ph--dark .photo-ph__box { border-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.2); }
.photo-ph--dark .photo-ph__text { color: rgba(255, 255, 255, 0.2); }
.is-tbc { font-style: italic; opacity: 0.5; }

/* ---------- Nav ---------- */
.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--navy); border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.site-nav__accent { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); }
.site-nav__inner { max-width: 1400px; margin: 2px auto 0; padding-inline: 1.25rem; height: 76px; display: flex; align-items: center; justify-content: space-between; }
.logo-text { font-family: var(--font-display); font-weight: 900; color: #fff; font-size: 1.25rem; letter-spacing: -0.025em; line-height: 1; user-select: none; }
.logo-text__plus { color: var(--primary); }
.logo-text__brand { color: var(--accent); }
.site-nav__links { display: none; align-items: center; }
.site-nav__links a { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.4); padding: 0.5rem 1rem; transition: color 0.15s var(--ease-tw); }
.site-nav__cta { flex: 1; display: flex; justify-content: center; }
.nav-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; background: var(--accent); color: var(--navy); font-family: var(--font-mono); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.5rem 1rem; white-space: nowrap; transition: background-color 0.15s var(--ease-tw); }
.nav-toggle { color: rgba(255, 255, 255, 0.6); padding: 0.5rem; flex-shrink: 0; }
.nav-toggle__bars { display: block; width: 1.25rem; }
.nav-toggle__bars span { display: block; height: 1px; background: currentColor; transition: all 0.15s var(--ease-tw); }
.nav-toggle__bars span:not(:last-child) { margin-bottom: 0.375rem; }
.nav-toggle.is-open .nav-toggle__bars span:nth-child(1) { rotate: 45deg; translate: 0 0.5rem; }
.nav-toggle.is-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle__bars span:nth-child(3) { rotate: -45deg; translate: 0 -0.5rem; }
.mobile-menu { background: rgba(6, 16, 30, 0.98); border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 1.25rem; }
.mobile-menu a { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.5); padding-block: 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: color 0.15s var(--ease-tw); }
.mobile-menu a:not(:last-child) { margin-bottom: 0.25rem; }
.mobile-menu a:last-child { border-bottom: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; background: #fff; min-height: 82vh; min-height: 82svh; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
.hero__dots { position: absolute; inset: 0; opacity: 0.03; background-image: radial-gradient(circle, #0A1E3C 1px, transparent 1px); background-size: 40px 40px; }
.hero__layout { position: relative; z-index: 10; max-width: 1220px; width: 100%; margin-inline: auto; padding-inline: 1.25rem; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); justify-content: center; gap: 3rem; align-content: center; align-items: center; min-height: 82vh; min-height: 82svh; padding-top: 8rem; padding-bottom: 7rem; margin-top: 4rem; }
.hero__left { display: flex; flex-direction: column; justify-content: center; align-self: center; }
.hero__eyebrow { display: flex; align-items: center; gap: 0.75rem; }
.hero__eyebrow-line { width: 1.25rem; height: 2px; background: var(--orange); }
.hero__eyebrow-text { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4em; color: var(--foreground); }
.hero__logo { font: inherit; overflow: hidden; margin-top: 1.5rem; margin-bottom: 0.5rem; position: relative; }
.hero__logo-inner { display: block; }
.hero__logo img { width: 100%; max-width: 340px; height: auto; object-fit: contain; transform-origin: left; margin-left: -0.25rem; }
.hero__place { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.hero__place-row { display: flex; align-items: center; gap: 0.625rem; margin-top: 0.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.hero__place-row span { font-family: var(--font-mono); font-size: 0.875rem; line-height: calc(1.25 / 0.875); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--foreground); }
.hero__pin { color: var(--orange); flex-shrink: 0; }
.hero__right { display: flex; flex-direction: column; justify-content: center; align-self: center; overflow: hidden; user-select: none; }

.cloud { display: none; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.625rem; width: 100%; opacity: 0.9; transition: opacity 0.5s var(--ease-tw); }
.cloud li { font-weight: 700; font-size: 1.125rem; line-height: 1; }
.cloud__word, .cloud__chip { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.025em; }
.cloud__word { color: var(--foreground); }
.cloud__chip { display: inline-block; background: var(--orange); color: #fff; padding: 0.25rem 0.625rem; }
.cloud__dot { color: var(--orange); font-family: var(--font-sans); }

.hero__card { display: flex; flex-direction: column; margin-top: 2.5rem; padding: 1.5rem; background: var(--muted); border: 1px solid var(--border); border-top: 4px solid var(--orange); width: 100%; position: relative; z-index: 20; }
.hero__dates { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--border); }
.hero__date-main { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; line-height: calc(1 / 0.75); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--foreground); }
.hero__cal { color: var(--orange); flex-shrink: 0; }
.hero__date-sub { display: flex; align-items: center; gap: 0.5rem; padding-left: 0.125rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--foreground); }
.hero__date-dash { width: 0.75rem; height: 1.5px; background: var(--orange); flex-shrink: 0; }
.hero__count-label { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--foreground); margin-bottom: 0.75rem; }
.hero__count-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 1.5rem; }
.countdown { display: flex; gap: 0.5rem; flex-shrink: 0; }
.countdown__cell { display: flex; flex-direction: column; align-items: center; background: var(--primary); border: 1px solid var(--primary); padding: 0.625rem 0.75rem; min-width: 56px; }
.countdown__num { font-family: var(--font-display); font-weight: 900; color: #fff; font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown__label { font-family: var(--font-mono); font-size: 9px; color: rgba(255, 255, 255, 0.75); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.25rem; }
.hero__cta { width: 100%; display: flex; align-items: center; }
.hero__cta-link { display: flex; align-items: center; justify-content: center; gap: 0.625rem; width: 100%; background: var(--accent); color: var(--navy); font-family: var(--font-mono); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; padding-inline: 2rem; height: 68px; transition: background-color 0.15s var(--ease-tw); }

/* ---------- Stats ---------- */
.stats { display: none; position: relative; z-index: 30; margin-top: -52px; }
.stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--primary); }
.stats__cell { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.25rem; border-right: 1px solid rgba(255, 255, 255, 0.15); }
.stats__cell:last-child { border-right: 0; }
.stats__num { font-family: var(--font-display); font-weight: 900; color: #fff; font-size: 1.875rem; line-height: 1; }
.stats__label { font-family: var(--font-mono); font-size: 10px; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.375; }

/* ---------- Moderadores ---------- */
.speakers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.speaker__photo { aspect-ratio: 3 / 4; width: 100%; margin-bottom: 0.75rem; border: 1px solid var(--border); background: rgba(240, 243, 249, 0.4); overflow: hidden; transition: border-color 0.15s var(--ease-tw); }
/*.speaker__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(100%); transition: all 0.5s ease-out; }*/
.speaker__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: all 0.5s ease-out; }
.speaker__ph { aspect-ratio: 3 / 4; width: 100%; margin-bottom: 0.75rem; transition: border-color 0.15s var(--ease-tw); }
.speaker__name, .artist__name { font-family: var(--font-display); font-weight: 900; color: var(--foreground); font-size: 1rem; line-height: 1.25; letter-spacing: 0.015em; transition: color 0.15s var(--ease-tw); }
.artist__name { letter-spacing: -0.025em; }
.speaker__role, .artist__role { font-family: var(--font-mono); font-size: 9px; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.25rem; line-height: 1.625; }
.artist__role { font-style: italic; opacity: 0.5; }

/* ---------- Invitados internacionales ---------- */
.intl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.intl { border: 1px solid var(--border); background: rgba(240, 243, 249, 0.4); padding: 1.75rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.intl__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.intl__photo-wrap { position: relative; }
.intl__photo { aspect-ratio: 3 / 4; width: 100%; background: #fff; border: 1px solid var(--border); overflow: hidden; }
.intl__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.intl__corner { position: absolute; width: 1.5rem; height: 1.5rem; pointer-events: none; border-color: var(--primary); border-style: solid; border-width: 0; }
.intl__corner--tl { top: -0.5rem; left: -0.5rem; border-top-width: 2px; border-left-width: 2px; }
.intl__corner--br { bottom: -0.5rem; right: -0.5rem; border-bottom-width: 2px; border-right-width: 2px; }
.intl__role { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.intl__role span { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); }
.intl__globe { color: var(--primary); flex-shrink: 0; }
.intl__name { margin-bottom: 1.25rem; line-height: 0.92; }
.intl__name span { display: block; font-family: var(--font-display); font-weight: 900; color: var(--foreground); letter-spacing: -0.025em; font-size: clamp(2.5rem, 4.5vw, 4.5rem); }
.intl__name .intl__name-last { color: var(--primary); }
.intl__bio-text { color: var(--muted-foreground); line-height: 1.625; font-size: 1rem; }
.intl__bio-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.intl__more { margin-top: 0.625rem; display: inline-block; font-family: var(--font-mono); font-size: 12px; color: var(--primary); cursor: pointer; }
.intl__foot { border-top: 1px solid var(--border); padding-top: 1rem; display: flex; gap: 1.5rem; flex-wrap: wrap; }
.intl__meta { display: flex; align-items: center; gap: 0.5rem; color: var(--muted-foreground); }
.intl__meta span { font-family: var(--font-mono); font-size: 10px; color: rgba(82, 96, 128, 0.6); font-style: italic; }

/* ---------- Mesas ---------- */
.mesas__date { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--foreground); margin-top: 1.25rem; }
.mesas__date strong { color: var(--primary); }
.mesas-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.mesa { position: relative; border: 1px solid var(--border); background: rgba(240, 243, 249, 0.2); padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; overflow: hidden; transition: all 0.15s var(--ease-tw); }
.mesa__icon { position: absolute; top: 1.5rem; right: 1.5rem; width: 5rem; height: auto; opacity: 0.9; pointer-events: none; user-select: none; transition: transform 0.15s var(--ease-tw), scale 0.15s var(--ease-tw); }
.mesa__icon img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)); }
.mesa__icon svg { width: 100%; height: auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)); }
.mesa__num { position: relative; z-index: 10; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); }
.mesa__title { position: relative; z-index: 10; padding-right: 4rem; font-family: var(--font-display); font-weight: 900; color: var(--foreground); font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.015em; transition: color 0.15s var(--ease-tw); }
.mesa__body { position: relative; z-index: 10; flex: 1; margin-bottom: 0.5rem; }
.mesa__body > * + * { margin-top: 0.5rem; }
.mesa__sub { font-family: var(--font-mono); font-size: 10px; color: rgba(82, 96, 128, 0.6); text-transform: uppercase; letter-spacing: 0.1em; }
.mesa__people { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.625; }
.mesa__people li + li { margin-top: 0.375rem; }
.mesa__person { font-weight: 700; color: var(--primary); }
.mesa__role { font-size: 0.875rem; color: var(--foreground); line-height: 1.625; padding-top: 0.25rem; }
.mesa__foot { position: relative; z-index: 10; border-top: 1px solid var(--border); padding-top: 1rem; }
.mesa__foot p { display: flex; align-items: center; gap: 0.5rem; }
.mesa__foot p + p { margin-top: 0.5rem; }
.mesa__foot .icon { color: rgba(82, 96, 128, 0.6); flex-shrink: 0; }
.mesa__foot span { font-family: var(--font-mono); font-size: 10px; color: var(--muted-foreground); }

/* ---------- Lanzamiento ---------- */
.launch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; }
.launch__titles { margin-top: 0.5rem; }
.launch__quote { margin-top: 2rem; border-left: 2px solid var(--accent); padding: 0.25rem 0 0.25rem 1.25rem; }
.launch__kicker { display: block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.35em; color: var(--accent); margin-bottom: 0.375rem; }
.launch__podcast { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: #fff; font-size: 1.5rem; line-height: 1.375; }
.launch__meta { margin-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1.5rem; }
.launch__meta p { display: flex; align-items: center; gap: 0.75rem; }
.launch__meta p + p { margin-top: 0.75rem; }
.launch__meta span { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.85); }

.launch__datetime { margin-top: 1.5rem; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.launch__date { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1; color: var(--accent); text-transform: uppercase; letter-spacing: -0.02em; }
.launch__time { font-family: var(--font-mono); font-size: 1.25rem; letter-spacing: 0.1em; color: #fff; text-transform: uppercase; }

.launch__ico { color: var(--accent); flex-shrink: 0; }
.launch__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.host { border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); padding: 1rem; transition: all 0.15s var(--ease-tw); }
.host__photo { aspect-ratio: 3 / 4; width: 100%; margin-bottom: 1rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.03); }
.host__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.host__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; }
.host__role { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.host__dash { width: 1rem; height: 1px; background: rgba(255, 255, 0, 0.6); }
.host__name { font-family: var(--font-display); font-weight: 900; color: #fff; font-size: 1.5rem; line-height: 1.25; letter-spacing: 0.015em; transition: color 0.15s var(--ease-tw); }
.guest { width: 100%; display: flex; flex-direction: column; }
.guest__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; padding-inline: 0.125rem; }
.guest__label { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.45); }
.guest__dash { width: 0.75rem; height: 1px; background: rgba(255, 255, 255, 0.25); }
.guest__box { border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); padding: 0.875rem; transition: all 0.15s var(--ease-tw); }
.guest__ph { aspect-ratio: 3 / 4; width: 100%; max-width: 140px; margin-inline: auto; margin-bottom: 0.75rem; }
.guest__name { font-family: var(--font-display); font-weight: 900; color: #fff; font-size: 1.125rem; line-height: 1.25; letter-spacing: 0.015em; transition: color 0.15s var(--ease-tw); }
.guest__role { font-family: var(--font-mono); font-size: 9px; color: rgba(255, 255, 255, 0.45); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.25rem; line-height: 1.625; }

/* ---------- Artistas ---------- */
/* ---------- Artistas (Exclusivo) ---------- */
.artists-grid { 
  display: flex; 
  flex-direction: column; /* En móvil se apilan uno abajo del otro */
  align-items: center;    /* Centrado horizontal */
  gap: 2.5rem; 
  padding-top: 1rem;
}

.artist-card { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  text-align: center; 
  width: 100%; 
  max-width: 320px; /* Esto limita el tamaño de la foto a la mitad */
}

.artist-img-wrap { 
  width: 100%; 
  aspect-ratio: 3 / 4; 
  margin-bottom: 1rem; 
  border: 1px solid var(--border); 
  background: rgba(240, 243, 249, 0.4); 
  overflow: hidden; 
  transition: border-color 0.15s var(--ease-tw); 
}

.artist-img-wrap img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  object-position: top; 
}

.artist-name { 
  font-family: var(--font-display); 
  font-weight: 900; 
  color: var(--foreground); 
  font-size: 1.75rem; /* Nombres más grandes */
  line-height: 1.1; 
  letter-spacing: 0.015em; 
  margin-bottom: 0.25rem;
  transition: color 0.15s var(--ease-tw); 
}

.artist-role { 
  font-family: var(--font-mono); 
  font-size: 10px; 
  color: var(--muted-foreground); 
  text-transform: uppercase; 
  letter-spacing: 0.05em; 
  line-height: 1.625; 
  font-style: italic; 
  opacity: 0.8; 
}

/* Efecto Hover (puedes dejarlo aquí o moverlo a la sección hover al final) */
@media (hover: hover) {
  .artist-card:hover .artist-img-wrap { border-color: rgba(26, 91, 204, 0.3); }
  .artist-card:hover .artist-name { color: var(--primary); }
}

/* ---------- Feria del libro ---------- */
.feria { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: start; }
.feria__text { color: var(--muted-foreground); line-height: 1.625; font-size: 1rem; max-width: 24rem; margin-bottom: 1.5rem; }
.feria__label { display: flex; align-items: center; gap: 0.5rem; }
.feria__label span { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); }
.feria__ico { color: var(--primary); }
.logo-grid { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.logo-cell { background: #fff; padding: 1.5rem; min-width: 140px; flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; transition: background-color 0.15s var(--ease-tw); }
.logo-cell--lg { padding: 2rem; min-width: 200px; gap: 1.25rem; }
.logo-cell__circle { width: 3.5rem; height: 3.5rem; border: 1px dashed var(--border); background: rgba(240, 243, 249, 0.2); display: flex; align-items: center; justify-content: center; border-radius: 9999px; color: rgba(82, 96, 128, 0.3); transition: border-color 0.15s var(--ease-tw); }
.logo-cell__circle--lg { width: 4rem; height: 4rem; }
.logo-cell__circle .icon { transition: color 0.15s var(--ease-tw); }
.logo-cell__name { font-family: var(--font-mono); font-size: 11px; color: rgba(82, 96, 128, 0.6); text-align: center; transition: color 0.15s var(--ease-tw); }
.logo-cell__name--lg { font-size: 12px; }

/* ---------- Talleres ---------- */
.talleres__lead { font-family: var(--font-serif); font-style: italic; color: rgba(255, 255, 255, 0.45); font-size: 1.25rem; line-height: 1.625; margin-top: 1rem; max-width: 32rem; }
.taller-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.taller { position: relative; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; overflow: hidden; transition: all 0.15s var(--ease-tw); }
.taller__bgnum { position: absolute; top: 0.75rem; right: 1rem; font-family: var(--font-display); font-weight: 900; color: rgba(255, 255, 255, 0.05); font-size: 3.75rem; line-height: 1; user-select: none; }
.taller__top { display: flex; align-items: center; justify-content: space-between; }
.taller__tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.taller__dash { width: 1.25rem; height: 1px; background: var(--accent); }
.taller__title { flex: 1; font-family: var(--font-display); font-weight: 900; color: #fff; font-size: 1.5rem; line-height: 1.25; letter-spacing: 0.015em; transition: color 0.15s var(--ease-tw); }
.taller__desc { font-size: 0.875rem; color: rgba(255, 255, 255, 0.45); line-height: 1.625; }
.taller__foot { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1rem; }
.taller__foot p { display: flex; align-items: center; gap: 0.5rem; }
.taller__foot p + p { margin-top: 0.5rem; }
.taller__foot .icon { color: rgba(255, 255, 255, 0.25); flex-shrink: 0; }
.taller__foot span { font-family: var(--font-mono); font-size: 10px; color: rgba(255, 255, 255, 0.3); font-style: italic; }
.taller__btn { border: 1px solid var(--accent); color: var(--accent); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; padding-block: 0.75rem; text-align: center; transition: all 0.15s var(--ease-tw); }

/* ---------- Ticker ---------- */
.ticker { overflow: hidden; border-block: 1px solid var(--border); padding-block: 0.75rem; background: var(--muted); }
.ticker__track { display: flex; gap: 2.5rem; white-space: nowrap; animation: ticker 44s linear infinite; }
.ticker__track span { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.35em; flex-shrink: 0; }
.ticker__word { color: rgba(82, 96, 128, 0.4); }
.ticker__dot { color: var(--border); }

/* ---------- Programa ---------- */
.filters { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.filter { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.5rem 1rem; border: 1px solid var(--border); color: var(--muted-foreground); transition: all 0.15s var(--ease-tw); }
.filter.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.timeline { position: relative; }
.timeline__line { display: none; position: absolute; left: 132px; top: 0; bottom: 0; width: 1px; background: var(--border); }
.pi { display: flex; align-items: flex-start; gap: 0; padding: 1.5rem 0.75rem; margin-inline: -0.75rem; border-bottom: 1px solid var(--border); transition: background-color 0.15s var(--ease-tw); }
.pi--last { border-bottom: 0; }
.pi[hidden] { display: none; }
.pi__side { display: none; flex-direction: column; align-items: flex-end; flex-shrink: 0; width: 124px; padding-right: 2rem; padding-top: 0.125rem; }
.pi__tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.125rem 0.5rem; }
.pi__tag--mobile { font-size: 9px; flex-shrink: 0; margin-top: 0.125rem; }
.pi__tag--lanzamiento { background: var(--primary); color: #fff; }
.pi__tag--mesa { background: rgba(26, 91, 204, 0.12); color: var(--primary); border: 1px solid rgba(26, 91, 204, 0.2); }
.pi__tag--taller { background: rgba(10, 30, 60, 0.07); color: var(--foreground); border: 1px solid var(--border); }
.pi__tag--cierre { background: rgba(26, 91, 204, 0.2); color: var(--primary); border: 1px solid rgba(26, 91, 204, 0.3); }
.pi__date { font-family: var(--font-mono); font-size: 9px; color: var(--primary); margin-top: 0.375rem; text-align: right; line-height: 1.25; }
.pi__dotwrap { display: none; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.375rem; }
.pi__dot { width: 0.75rem; height: 0.75rem; border: 2px solid rgba(26, 91, 204, 0.4); border-radius: 9999px; background: #fff; transition: border-color 0.15s var(--ease-tw); }
.pi__dot--launch { background: var(--primary); border-color: var(--primary); }
.pi__dot--close { background: rgba(26, 91, 204, 0.5); border-color: rgba(26, 91, 204, 0.5); }
.pi__main { flex: 1; }
.pi__titlerow { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.375rem; }
.pi__title { font-family: var(--font-display); font-weight: 900; color: var(--foreground); font-size: 1.25rem; line-height: 1.25; letter-spacing: 0.025em; transition: color 0.15s var(--ease-tw); }
.pi__desc { display: none; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.625; margin-bottom: 0.5rem; }
.pi__meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; row-gap: 0.25rem; }
.pi__person { font-family: var(--font-mono); font-size: 11px; color: var(--primary); font-weight: 500; }
.pi__tbc { font-family: var(--font-mono); font-size: 10px; color: rgba(82, 96, 128, 0.5); font-style: italic; border: 1px dashed var(--border); padding: 0.125rem 0.375rem; }
.pi__time { display: flex; align-items: center; gap: 0.25rem; font-family: var(--font-mono); font-size: 10px; color: var(--muted-foreground); }

/* ---------- FAQ ---------- */
.faq { max-width: 56rem; }
.faq__list { border-top: 1px solid var(--border); }
.faq__item { display: flex; align-items: flex-start; gap: 1rem; padding-block: 1.5rem; }
.faq__item:not(:last-child) { border-bottom: 1px solid var(--border); }
.faq__num { font-family: var(--font-mono); font-size: 11px; color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 0.375rem; flex-shrink: 0; }
.faq__body { flex: 1; cursor: pointer; user-select: none; }
.faq__q { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.faq__qtext { font-family: var(--font-serif); font-style: italic; color: var(--foreground); font-size: 1.25rem; line-height: 1.375; transition: color 0.15s var(--ease-tw); }
.faq__chev { color: rgba(82, 96, 128, 0.5); transition: transform 0.3s var(--ease-tw); margin-top: 0.5rem; flex-shrink: 0; }
.faq__item.is-open .faq__chev { transform: rotate(180deg); }
.faq__a { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows 0.3s ease-out, opacity 0.3s ease-out, visibility 0s linear 0.3s; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
.faq__a-clip { overflow: hidden; min-height: 0; }
.faq__a-inner { color: var(--muted-foreground); line-height: 1.625; font-size: 0.875rem; padding-top: 1rem; padding-bottom: 0.5rem; }
.faq__a-inner p + p { margin-top: 1rem; }

/* ---------- Ediciones anteriores ---------- */
.editions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.edition { display: block; }
.edition__box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: #fff; border: 1px dashed var(--border); transition: all 0.15s var(--ease-tw); }
.edition__top { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(26, 91, 204, 0.2); z-index: 10; transition: background-color 0.15s var(--ease-tw); }
.edition__box img { width: 100%; height: 100%; object-fit: cover;  transition: all 0.5s ease-out; }
.edition__ph { display: block; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(82, 96, 128, 0.4); text-align: center; line-height: 1.625; padding-inline: 0.75rem; }
.edition__ext { position: absolute; top: 0.5rem; right: 0.5rem; opacity: 0; z-index: 10; color: rgba(26, 91, 204, 0.4); transition: opacity 0.15s var(--ease-tw); }
.edition__box--img .edition__ext { color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06)); }
.edition__year { display: block; font-family: var(--font-display); font-weight: 900; color: rgba(82, 96, 128, 0.6); line-height: 1; margin-top: 0.5rem; font-size: clamp(3rem, 8vw, 5rem); transition: color 0.15s var(--ease-tw); }
.edition__link { display: block; font-family: var(--font-mono); font-size: 10px; color: rgba(82, 96, 128, 0.6); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.5rem; transition: color 0.15s var(--ease-tw); }

/* ---------- CTA final ---------- */
.cta-final__bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; user-select: none; overflow: hidden; }
.cta-final__bg span { font-family: var(--font-display); font-weight: 900; color: rgba(255, 255, 255, 0.03); line-height: 1; font-size: clamp(16rem, 45vw, 70rem); }
.cta-final__in { text-align: center; }
.cta-final__top { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 2.5rem; }
.cta-final__rule { display: none; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.08); }
.cta-final__tag { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4em; color: rgba(255, 255, 255, 0.3); }
.cta-final__lead { font-family: var(--font-serif); font-style: italic; color: rgba(255, 255, 255, 0.4); font-size: 1.25rem; line-height: 1.625; margin: 2rem auto 3rem; max-width: 32rem; }
.cta-final__btns { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
.cta-final__main { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; background: var(--accent); color: var(--navy); font-family: var(--font-mono); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; padding: 1rem 3rem; transition: background-color 0.15s var(--ease-tw); }
.cta-final__alt { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.6); font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; padding: 1rem 3rem; transition: color 0.15s var(--ease-tw), border-color 0.15s var(--ease-tw); }
.cta-final__foot { font-family: var(--font-mono); font-size: 10px; color: rgba(255, 255, 255, 0.2); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 3rem; }

/* ---------- Footer ---------- */
.footer { background: #030D17; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.footer__in { padding-block: 3rem; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-bottom: 2.5rem; }
.footer__logo { font-family: var(--font-display); font-weight: 900; color: #fff; font-size: 1.5rem; line-height: calc(2 / 1.5); letter-spacing: -0.025em; margin-bottom: 0.75rem; }
.footer__text { font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.25); line-height: 1.625; max-width: 20rem; }
.footer__title { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.2); margin-bottom: 1rem; }
.footer__link { display: block; font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.3); padding-block: 0.375rem; transition: color 0.15s var(--ease-tw); }
.footer__contact { display: inline-flex; align-items: center; gap: 0.375rem; font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.3); transition: color 0.15s var(--ease-tw); }
.footer__note { font-family: var(--font-mono); font-size: 10px; color: rgba(255, 255, 255, 0.2); margin-top: 1rem; line-height: 1.625; }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.footer__copy { font-family: var(--font-mono); font-size: 10px; color: rgba(255, 255, 255, 0.2); text-transform: uppercase; letter-spacing: 0.05em; }
.footer__tag { font-family: var(--font-mono); font-size: 10px; color: rgba(255, 255, 255, 0.15); }

/* ==========================================================================
   Hover
   ========================================================================== */
@media (hover: hover) {
  .btn--primary:hover { background: #1550b8; }
  .btn--outline:hover { border-color: var(--primary); color: var(--primary); }
  .btn:hover .btn__arrow, .nav-cta:hover .btn__arrow, .hero__cta-link:hover .btn__arrow, .cta-final__main:hover .btn__arrow { translate: 0.125rem 0; }
  .btn--lift:hover .btn__lift { translate: 0 -0.125rem; }
  .btn--lift:hover .btn__lift--send { translate: 0.125rem -0.125rem; }
  .site-nav__links a:hover, .mobile-menu a:hover { color: #fff; }
  .nav-cta:hover, .hero__cta-link:hover, .cta-final__main:hover { background: rgba(255, 255, 0, 0.9); }
  .cloud:hover { opacity: 1; }
  .speakers > li:hover .speaker__photo, .speakers > li:hover .speaker__ph, .artists > li:hover .artist__ph { border-color: rgba(26, 91, 204, 0.3); }
  /*.speaker__photo img:hover { filter: grayscale(0); }*/
  .speakers > li:hover .speaker__name, .artists > li:hover .artist__name { color: var(--primary); }
  .intl__more:hover { text-decoration: underline; }
  .mesa:hover { border-color: rgba(26, 91, 204, 0.4); background: rgba(240, 243, 249, 0.4); }
  .mesa:hover .mesa__icon { scale: 1.1; }
  .mesa:hover .mesa__title { color: var(--primary); }
  .host:hover, .guest__box:hover { border-color: rgba(255, 255, 0, 0.4); background: rgba(255, 255, 255, 0.05); }
  .host:hover .host__name, .guest__box:hover .guest__name { color: var(--accent); }
  .logo-cell:hover { background: rgba(240, 243, 249, 0.4); }
  .logo-cell:hover .logo-cell__circle { border-color: rgba(26, 91, 204, 0.3); }
  .logo-cell:hover .logo-cell__circle .icon { color: rgba(26, 91, 204, 0.4); }
  .logo-cell__name:hover { color: var(--foreground); }
  .taller:hover { border-color: rgba(255, 255, 0, 0.4); background: rgba(255, 255, 255, 0.05); }
  .taller:hover .taller__title { color: var(--accent); }
  .taller__btn:hover { background: var(--accent); color: var(--navy); }
  .filter:not(.is-active):hover { border-color: rgba(26, 91, 204, 0.4); color: var(--foreground); }
  .pi:hover { background: rgba(240, 243, 249, 0.3); }
  .pi:hover .pi__title { color: var(--primary); }
  .pi:hover .pi__dot:not(.pi__dot--launch):not(.pi__dot--close) { border-color: var(--primary); }
  .faq__item:hover .faq__qtext { color: var(--primary); }
  .edition:hover .edition__box { border-color: rgba(26, 91, 204, 0.4); }
  .edition:hover .edition__top { background: rgba(26, 91, 204, 0.5); }
  .edition:hover .edition__box img { opacity: 1; scale: 1.02; }
  .edition:hover .edition__ext { opacity: 1; }
  .edition:hover .edition__year, .edition:hover .edition__link { color: var(--primary); }
  .cta-final__alt:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
  .footer__link:hover, .footer__contact:hover { color: rgba(255, 255, 255, 0.6); }
}