/* ==========================================================================
   Dragones Elite — Sistema de diseño (tokens, base, componentes compartidos)
   ========================================================================== */

:root {
  /* Superficies */
  --bg:        #0a0a0f;
  --bg-2:      #0c0b10;
  --panel:     #121117;
  --panel-2:   #191821;
  --panel-3:   #22202b;
  --line:      rgba(245, 183, 0, .16);
  --line-soft: rgba(255, 255, 255, .07);

  /* Marca · "dragón en vuelo"
     Rojo, naranja y dorado salen del logo real (#B51E25, #A76713, #B3994D),
     llevados a su versión más viva. Contraste sobre el fondo:
       fire 3,98:1 → solo títulos grandes, brasas y bordes, nunca texto chico
       ember 6,3:1 y gold 11:1 → sirven para texto */
  --fire:      #e10600;
  --ember:     #ff5a1f;
  --gold:      #f5b700;
  --gold-deep: #ff5a1f;
  --gold-soft: #ffe08a;
  --ink:       #f7f3e9;
  /* Contraste medido contra el panel (#121117) y el fondo (#0a0a0f):
     ink 17:1 · muted 8.3:1 · muted-2 5.3:1. */
  --muted:     #b4ab99;
  --muted-2:   #8f8778;

  /* Semánticos */
  --ok:    #49dd9b;
  --warn:  #ffc24b;
  --alert: #ff6a4d;
  --info:  #7db8ff;

  /* Degradados
     grad-gold (brasa → oro) lleva texto oscuro encima: pasa AA en todo su largo.
     grad-fire incluye el rojo: solo decorativo, nunca detrás de texto. */
  --grad-gold: linear-gradient(115deg, var(--ember) 0%, var(--gold) 58%, var(--gold-soft) 100%);
  --grad-fire: linear-gradient(115deg, var(--fire) 0%, var(--ember) 45%, var(--gold) 100%);
  --grad-line: linear-gradient(90deg, transparent, var(--ember), var(--gold), transparent);

  /* Elevación */
  --sh-1: 0 2px 10px rgba(0, 0, 0, .35);
  --sh-2: 0 18px 44px rgba(0, 0, 0, .45);
  --sh-3: 0 36px 90px rgba(0, 0, 0, .6);
  --sh-gold: 0 14px 40px rgba(255, 90, 31, .30);

  /* Geometría */
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 26px;
  --r-xl: 34px;
  --shell: 1220px;
  --gutter: clamp(18px, 4vw, 40px);

  /* Tipografías */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-poster: Anton, Impact, sans-serif;
  --font-ui: Manrope, system-ui, sans-serif;

  /* Curvas */
  --ease: cubic-bezier(.22, .8, .28, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.3, .48, 1);
}

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: Manrope, system-ui, sans-serif; line-height: 1.08; letter-spacing: -.025em; }
p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--gold); color: #0b0a08; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- Tipografía ----------------------------------------------------------- */

.display {
  font-family: Anton, Manrope, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .004em;
  line-height: .92;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--gold);
  opacity: .65;
}

.lead { color: var(--muted); font-size: clamp(15px, 1.5vw, 18px); }
.shine {
  background: linear-gradient(100deg, var(--ink) 8%, var(--gold-soft) 32%, var(--gold) 50%, var(--gold-deep) 66%, var(--ink) 92%);
  background-size: 260% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 8s linear infinite;
}
@keyframes shine { to { background-position: 260% center; } }

/* --- Recursos editoriales --------------------------------------------------- */

/* Titular de revista: serif de alto contraste con la bastardilla en dorado */
.serif {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.02;
}
.serif em { font-style: italic; font-weight: 400; color: var(--gold); }

/* Numeración de sección, como el folio de una revista */
.folio {
  display: flex; align-items: center; gap: 12px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted-2);
}
.folio::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }

/* Nota al margen, como el post-it de una maqueta */
.note {
  position: relative;
  padding: 16px 18px;
  border: 1px dashed rgba(245, 183, 0, .35);
  border-radius: 4px;
  background: rgba(245, 183, 0, .05);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--gold-soft);
  transform: rotate(-1.2deg);
}
.note::before {
  content: '';
  position: absolute; top: -9px; left: 50%;
  width: 62px; height: 17px;
  transform: translateX(-50%) rotate(1.5deg);
  background: rgba(245, 183, 0, .22);
  border: 1px solid rgba(245, 183, 0, .18);
}
.note b { font-style: normal; font-family: var(--font-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: 5px; color: var(--muted); }

/* Capitular y cita destacada */
.dropcap::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-size: 3.4em;
  line-height: .82;
  padding: 6px 10px 0 0;
  color: var(--gold);
}
.pullquote {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.25;
  font-style: italic;
  color: var(--ink);
  padding-left: 22px;
  border-left: 2px solid var(--gold);
}

/* Medida de lectura cómoda: ningún párrafo más ancho que esto */
.measure { max-width: 62ch; }

/* --- Layout --------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding: clamp(56px, 7.5vw, 108px) 0; position: relative; }
.section-head { display: grid; gap: 18px; max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 { font-size: clamp(30px, 4.6vw, 54px); }
.section-head.editorial h2 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.015em; line-height: 1.02; font-size: clamp(32px, 5vw, 60px); }
.section-head.editorial h2 em { font-style: italic; color: var(--gold); }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.stack { display: grid; gap: 16px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spread { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }

/* --- Botones -------------------------------------------------------------- */

.btn {
  --btn-pad: 14px 24px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--btn-pad);
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: transform .25s var(--spring), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-gold { background: var(--grad-gold); color: #100d06; box-shadow: var(--sh-gold); }
.btn-gold:hover:not(:disabled) { box-shadow: 0 18px 46px rgba(200, 155, 60, .42); }

.btn-ghost { border: 1px solid var(--line); color: var(--ink); background: rgba(255, 255, 255, .015); }
.btn-ghost:hover { border-color: rgba(245, 183, 0, .45); background: rgba(245, 183, 0, .07); }

.btn-solid { background: var(--panel-2); border: 1px solid var(--line-soft); color: var(--ink); }
.btn-solid:hover { background: var(--panel-3); }

.btn-sm { --btn-pad: 9px 16px; font-size: 12.5px; }
.btn-lg { --btn-pad: 17px 32px; font-size: 15px; }
.btn-block { width: 100%; }
.btn .ico { font-size: 15px; line-height: 1; transition: transform .3s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }

/* --- Píldoras y etiquetas -------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(245, 183, 0, .07);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gold);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.live .dot { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.7); } }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}
.tag.ok    { background: rgba(73, 221, 155, .13); color: var(--ok); }
.tag.warn  { background: rgba(255, 194, 75, .13); color: var(--warn); }
.tag.alert { background: rgba(255, 106, 77, .13); color: var(--alert); }
.tag.info  { background: rgba(125, 184, 255, .13); color: var(--info); }
.tag.mute  { background: rgba(255, 255, 255, .06); color: var(--muted); }

/* --- Tarjeta base --------------------------------------------------------- */

.card {
  background: linear-gradient(160deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-l);
  box-shadow: var(--sh-2);
}

/* --- Campos de formulario -------------------------------------------------- */

.field { display: grid; gap: 8px; }
.field > span { font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.field > span em { font-style: normal; color: var(--gold); }
.field .hint { font-size: 11px; color: var(--muted-2); }

.input, .field input, .field textarea, .field select {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .028);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-s);
  color: var(--ink);
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.input:focus, .field input:focus, .field textarea:focus, .field select:focus {
  border-color: rgba(245, 183, 0, .55);
  box-shadow: 0 0 0 4px rgba(245, 183, 0, .13);
  background: rgba(255, 255, 255, .045);
}
.field textarea { resize: vertical; min-height: 84px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
.field.invalid input, .field.invalid textarea, .field.invalid .combo { border-color: rgba(255, 106, 77, .6); box-shadow: 0 0 0 4px rgba(255, 106, 77, .1); }

.combo { display: flex; align-items: stretch; border: 1px solid var(--line-soft); border-radius: var(--r-s); background: rgba(255, 255, 255, .028); overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.combo:focus-within { border-color: rgba(245, 183, 0, .55); box-shadow: 0 0 0 4px rgba(245, 183, 0, .13); }
.combo b { display: grid; place-items: center; padding-inline: 14px; font-size: 13px; color: var(--muted); border-right: 1px solid var(--line-soft); background: rgba(255, 255, 255, .02); }
.combo input { border: 0; background: none; box-shadow: none !important; }

.check { display: flex; gap: 11px; align-items: flex-start; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.check input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--gold-deep); }

/* --- Marca ---------------------------------------------------------------- */

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #0a0906;
  border: 1px solid var(--line);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.brand-text strong { display: block; font-family: Manrope, sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .13em; }
.brand-text small { display: block; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }

/* --- Fondo ambiental ------------------------------------------------------- */

.ambient { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.ambient i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .34;
  animation: drift 26s ease-in-out infinite;
}
.ambient i:nth-child(1) { width: 46vw; height: 46vw; background: #a31c05; top: -14vw; left: -10vw; opacity: .3; }
.ambient i:nth-child(2) { width: 34vw; height: 34vw; background: #7a3208; top: 34%; right: -12vw; animation-duration: 32s; animation-delay: -6s; }
.ambient i:nth-child(3) { width: 30vw; height: 30vw; background: #f5b700; bottom: -12vw; left: 22%; opacity: .12; animation-duration: 38s; animation-delay: -14s; }
@keyframes drift {
  33% { transform: translate3d(4vw, -3vw, 0) scale(1.12); }
  66% { transform: translate3d(-3vw, 3vw, 0) scale(.92); }
}

.grain {
  position: fixed;
  inset: -120px;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-40px, 20px); }
  40% { transform: translate(30px, -30px); }
  60% { transform: translate(-20px, -20px); }
  80% { transform: translate(20px, 30px); }
}

/* --- Animaciones de entrada ------------------------------------------------ */

[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
[data-reveal="left"]  { transform: translateX(-38px); }
[data-reveal="right"] { transform: translateX(38px); }
[data-reveal="zoom"]  { transform: scale(.94); }
[data-reveal="mask"]  { clip-path: inset(0 0 100% 0); transform: none; }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="mask"].in { clip-path: inset(0 0 0 0); }

/* En pantallas angostas los desplazamientos horizontales de entrada asoman
   fuera del viewport y provocan scroll lateral: ahí todo entra en vertical. */
@media (max-width: 760px) {
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(26px); }
}

.split-line { display: block; overflow: hidden; padding-top: .12em; margin-top: -.12em; }
.split-line > span { display: block; transform: translateY(105%); transition: transform 1s var(--ease-out); transition-delay: var(--delay, 0ms); }
.split-line.in > span { transform: none; }

/* --- Transición entre páginas ---------------------------------------------- */

.page-veil {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  pointer-events: none;
  opacity: 0;
  transition: opacity .42s var(--ease);
}
.page-veil.on { opacity: 1; }
body.booting .page-veil { opacity: 1; }

/* --- Banner de consentimiento ----------------------------------------------- */

.consent {
  position: fixed;
  left: 50%; bottom: 18px;
  z-index: 190;
  width: min(760px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  background: rgba(18, 17, 23, .97);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--sh-3);
  backdrop-filter: blur(14px);
  transform: translate(-50%, 130%);
  transition: transform .45s var(--ease-out);
}
.consent.on { transform: translate(-50%, 0); }
.consent-txt strong { display: block; font-family: var(--font-ui); font-size: 14px; margin-bottom: 3px; }
.consent-txt p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.consent-txt a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.consent-btns { display: flex; gap: 10px; margin-left: auto; flex: 0 0 auto; }

/* Los dos botones son idénticos a propósito: rechazar no puede costar más
   esfuerzo ni verse menos disponible que aceptar. */
.btn-consent {
  min-width: 118px;
  padding: 11px 20px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
}
.btn-consent:hover { background: rgba(245, 183, 0, .12); border-color: rgba(245, 183, 0, .5); }

@media (max-width: 640px) {
  .consent { flex-direction: column; align-items: stretch; gap: 14px; bottom: 12px; }
  .consent-btns { margin-left: 0; }
  .consent-btns .btn-consent { flex: 1; }
}

/* --- Toast ---------------------------------------------------------------- */

.toast-stack { position: fixed; left: 50%; bottom: 26px; z-index: 180; display: grid; gap: 10px; justify-items: center; transform: translateX(-50%); pointer-events: none; }
.toast {
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: min(92vw, 460px);
  padding: 13px 20px;
  background: rgba(24, 22, 30, .96);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--sh-2);
  backdrop-filter: blur(14px);
  font-size: 13px;
  opacity: 0;
  transform: translateY(18px) scale(.96);
  transition: opacity .3s var(--ease), transform .4s var(--spring);
}
.toast.on { opacity: 1; transform: none; }
.toast b { color: var(--gold); }
.toast.err b { color: var(--alert); }

/* --- Fotos ------------------------------------------------------------------ */

/* Cualquier elemento con data-foto se cambia solo si el archivo existe
   en assets/fotos/. Mientras no exista, se ve la ilustración de marca. */
[data-foto] { background-size: cover; background-position: center; }
.con-foto .ini-text { display: none; }
.con-foto { background-color: transparent !important; }

/* --- Barra de progreso ----------------------------------------------------- */

.bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad-gold); width: 0; transition: width 1.2s var(--ease-out) .1s; }

/* --- Utilidades ------------------------------------------------------------ */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.num { font-variant-numeric: tabular-nums; }
.divider { height: 1px; background: var(--grad-line); opacity: .3; border: 0; margin: 0; }
[hidden] { display: none !important; }

/* --- Barra de scroll ------------------------------------------------------- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2733; border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

/* --- Accesibilidad: menos movimiento --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  .split-line > span { transform: none; }
}