/* Apex Carteles — hoja de estilos de producción.
   Base: sistema Modernist (tokens + componentes) con la identidad púrpura/oro encima. */

:root {
  --color-bg: #140B24;
  --color-surface: #1D1234;
  --color-text: #F4F0FA;
  --color-divider: color-mix(in srgb, #F4F0FA 22%, transparent);
  --color-accent: #7C3AED;
  --color-accent-2: #7C3AED;

  --color-accent-100: #2A1B4D; --color-accent-200: #3B2669; --color-accent-300: #4C2E8A;
  --color-accent-400: #A78BFA; --color-accent-500: #7C3AED; --color-accent-600: #6D28D9;
  --color-accent-700: #C4B5FD; --color-accent-800: #DDD6FE; --color-accent-900: #EDE9FE;

  --color-accent-2-100: #2A1B4D; --color-accent-2-200: #3B2669; --color-accent-2-300: #4C2E8A;
  --color-accent-2-400: #A78BFA; --color-accent-2-500: #7C3AED; --color-accent-2-600: #6D28D9;
  --color-accent-2-700: #C4B5FD; --color-accent-2-800: #DDD6FE; --color-accent-2-900: #EDE9FE;

  --color-neutral-100: #221636; --color-neutral-200: #2B1D44; --color-neutral-300: #3A2B55;
  --color-neutral-400: #55467A; --color-neutral-500: #7A6C99; --color-neutral-600: #9E92B8;
  --color-neutral-700: #BBB1D0; --color-neutral-800: #DBD3E8; --color-neutral-900: #F4F0FA;

  --kp-gold: #D9B55B; --kp-gold-600: #C6A247; --kp-gold-700: #B08F3A;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 6px 18px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.55);
}

/* — base — */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400;
  background: var(--color-bg); color: var(--color-text); font-family: var(--font-body);
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; } h2 { font-size: 32px; } h3 { font-size: 25px; } h4 { font-size: 20px; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-400); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-700); }
img { display: block; max-width: 100%; }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.grayscale { filter: grayscale(1) contrast(1.08); }

/* — botones — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--kp-gold); color: #140B24; }
.btn-primary:hover { background: var(--kp-gold-600); }
.btn-primary:active { background: var(--kp-gold-700); }
.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent-400); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }

/* — formularios — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input option { background: var(--color-surface); }
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.input:disabled { opacity: .6; }
textarea.input { min-height: 90px; resize: vertical; }
input[type="date"].input { color-scheme: dark; }

/* — etiquetas — */
.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — tablas — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — página — */
.kp-nav a { color: inherit; text-decoration: none; font-size: 14px; cursor: pointer; transition: color .2s; }
.kp-nav a:hover { color: var(--color-accent-400); }
.kp-row { transition: background .2s; }
.kp-row:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); cursor: pointer; }
.kp-poster { transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.kp-poster:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.kp-kart { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.kp-poster:hover .kp-kart { transform: translateX(4%); }
.kp-select {
  appearance: none; -webkit-appearance: none; background: transparent; border: 0; font: inherit; font-size: 13px;
  color: inherit; cursor: pointer; letter-spacing: .06em; text-transform: uppercase;
}
.kp-select option { background: var(--color-surface); }
.kp-gal { scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.kp-gal::-webkit-scrollbar { display: none; }
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in { opacity: 1; transform: none; }
.kp-link { color: inherit; text-decoration: none; }
.kp-plain { font: inherit; color: inherit; text-align: left; width: 100%; }
.kp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kp-sr:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@keyframes kp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes kp-marquee { to { transform: translateX(-50%); } }

/* — cartel de muestra — */
.kp-p { position: relative; aspect-ratio: 4/5; overflow: hidden; container-type: inline-size; font-family: var(--font-heading); }
.kp-p-dots { position: absolute; inset: 0; opacity: .14; background-image: radial-gradient(circle, currentColor 1.1px, transparent 1.3px); background-size: 7px 7px; }
.kp-p-band { position: absolute; left: -15%; top: 58%; width: 130%; height: 12%; transform: rotate(-14deg); }
.kp-p-line { position: absolute; left: -15%; top: 72%; width: 130%; height: 2.5%; background: currentColor; opacity: .5; transform: rotate(-14deg); }
.kp-p-kart { position: absolute; right: -6%; bottom: 15%; width: 92%; fill: currentColor; }
.kp-p-top { position: absolute; left: 7%; top: 6%; right: 7%; display: flex; justify-content: space-between; font-size: 3.6cqw; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.kp-p-big { position: absolute; left: 5%; top: 11%; font-weight: 800; font-size: 52cqw; line-height: .85; letter-spacing: -.06em; }
.kp-p-foot { position: absolute; left: 7%; bottom: 6%; right: 20%; }
.kp-p-name { font-weight: 800; font-size: 9cqw; line-height: .95; text-transform: uppercase; letter-spacing: -.02em; }
.kp-p-meta { font-size: 3.8cqw; margin-top: 2cqw; opacity: .85; font-weight: 600; }
.kp-p-tag { position: absolute; right: -3%; top: 50%; font-size: 2.8cqw; letter-spacing: .14em; text-transform: uppercase; opacity: .6; rotate: 90deg; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ══ v2 ══════════════════════════════════════════════════════════════ */

/* Titulares con aire de carreras: la misma Archivo, estrecha y en cursiva */
.kp-display {
  font-family: var(--font-heading); font-weight: 800; font-style: italic; font-stretch: 75%;
  text-transform: uppercase; line-height: .9; letter-spacing: -.005em; padding-right: .06em;
}

/* Franja de oferta */
.kp-banner, .kp-banner:hover { display: block; color: #fff; text-decoration: none; }
.kp-banner:hover .kp-banner-text { text-decoration: underline; text-underline-offset: 3px; }

/* Sección clara */
.kp-light { background: #EDE9FE; color: #140B24; }
.kp-light ::selection { background: rgba(124, 58, 237, .25); }
.kp-light a { color: #6D28D9; }
.kp-light a:hover { color: #4C1D95; }

/* Preguntas desplegables */
.kp-faq { border-top: 1px solid var(--color-divider); }
.kp-faq:last-child { border-bottom: 1px solid var(--color-divider); }
.kp-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; font-family: var(--font-heading); font-weight: 800; font-size: 16px; line-height: 1.35; transition: color .2s;
}
.kp-faq summary::-webkit-details-marker { display: none; }
.kp-faq summary::after {
  content: ""; width: 12px; height: 12px; flex: none; color: var(--color-accent-400); transition: transform .2s;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
              linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}
.kp-faq summary:hover { color: var(--color-accent-400); }
.kp-faq[open] summary::after { transform: rotate(45deg); }
.kp-faq p { margin: -4px 0 18px; font-size: 14px; line-height: 1.6; color: var(--color-neutral-800); max-width: 70ch; }

/* Campo trampa anti-spam */
.kp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ══ v2.1 ════════════════════════════════════════════════════════════ */
.kp-faq p { font-size: 15px; }

/* El pack sobresale en escritorio */
@media (min-width: 1000px) { .kp-pack-lift { margin: -16px 0; } }

/* Botón claro sobre el morado */
.kp-on-accent, .kp-on-accent:hover { color: #fff; border-color: rgba(255,255,255,.5); }
.kp-on-accent:hover { background: rgba(255,255,255,.12); }

/* Enlaces del pie */
.kp-foot-link { color: inherit; text-decoration: none; transition: color .2s; }
.kp-foot-link:hover { color: var(--color-accent-400); }

/* Barra fija en móvil */
.kp-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 2px solid var(--color-divider);
  transform: translateY(110%); visibility: hidden;
  transition: transform .3s ease, visibility 0s linear .3s;
}
html[data-sticky="on"] .kp-sticky { transform: none; visibility: visible; transition: transform .3s ease, visibility 0s; }

/* ══ v2.2: mosaico, pilotos, reseñas y visor ═════════════════════════ */
.kp-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: min(94vh, 900px); }
.kp-hero-grid { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2px; background: var(--color-divider); }
.kp-hero-cell { overflow: hidden; }
.kp-hero-cell img { object-position: center 30%; }
.kp-hero-veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 85% at 14% 74%, rgba(124, 58, 237, .34), transparent 64%),
    linear-gradient(180deg, rgba(20, 11, 36, .45) 0%, rgba(20, 11, 36, .72) 38%, rgba(20, 11, 36, .94) 82%, #140B24 100%);
}
.kp-hero-inner { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: clamp(72px, 9vw, 150px) clamp(20px, 5vw, 72px) clamp(40px, 5vw, 72px); }
.kp-hero-card {
  margin-top: 28px; max-width: 540px; padding: 16px 18px;
  border: 2px solid color-mix(in srgb, var(--color-text) 28%, transparent);
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (max-width: 700px) {
  .kp-hero { min-height: min(92svh, 760px); }
  .kp-hero-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); }
}

/* Huecos pendientes de material */
.kp-slot { border: 2px dashed var(--color-divider); display: grid; place-items: center; text-align: center; padding: 12px; font-size: 13px; color: var(--color-neutral-600); }
.kp-demo-tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--color-divider); color: var(--color-neutral-700); white-space: nowrap; }

/* Visor de carteles */
.kp-lb { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, #0B0616 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kp-lb-fig { margin: 0; max-width: min(92vw, 720px); }
.kp-lb-fig img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; box-shadow: var(--shadow-lg); }
.kp-lb-btn { background: color-mix(in srgb, var(--color-bg) 80%, transparent); }
@media (max-width: 700px) { .kp-lb { padding: 12px; } .kp-lb-fig { max-width: 94vw; } }

/* ══ Imágenes que van cambiando ══════════════════════════════════════ */
.kp-rot { display: block; width: 100%; height: 100%; animation: kp-fade .8s ease both; }
@keyframes kp-fade { from { opacity: 0; } to { opacity: 1; } }

/* ══ Tarjetas de redes sociales ══════════════════════════════════════ */
.kp-social {
  display: flex; align-items: center; gap: 18px; padding: 20px 22px;
  border: 2px solid var(--color-divider); background: var(--color-surface);
  color: var(--color-text); text-decoration: none; transition: border-color .2s, transform .2s;
}
.kp-social:hover { color: var(--color-text); border-color: var(--color-accent-400); transform: translateY(-2px); }
.kp-social-ico { width: 64px; height: 64px; flex: none; display: grid; place-items: center; color: #fff; }
.kp-social-ico svg { width: 30px; height: 30px; }
.kp-social-arrow { color: var(--color-neutral-600); transition: transform .2s, color .2s; }
.kp-social:hover .kp-social-arrow { color: var(--color-accent-400); transform: translateX(4px); }

/* «Ver más» dentro de las fichas de piloto */
.kp-more { margin-top: 10px; }
.kp-more summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--kp-gold); display: inline-flex; align-items: center; gap: 6px; }
.kp-more summary::-webkit-details-marker { display: none; }
.kp-more summary::after { content: '+'; font-size: 16px; line-height: 1; }
.kp-more[open] summary::after { content: '–'; }
.kp-more summary:hover { color: var(--color-accent-400); }
.kp-more summary:focus-visible { outline: 2px solid var(--kp-gold); outline-offset: 3px; }
.kp-more .kp-more-b, .kp-more[open] .kp-more-a { display: none; }
.kp-more[open] .kp-more-b { display: inline; }
.kp-more p { font-size: 13px; line-height: 1.7; color: var(--color-neutral-800); margin: 10px 0 0; }