/* ═══════════════════════════════════════════════════════════════
   christianrojas.co — hoja de estilos
   Sistema de marca V1 · 2026

   Una sola familia tipográfica (Archivo) en tres pesos:
     900 Black    → titulares y display
     600 SemiBold → etiquetas, kickers, navegación, botones
     400 Regular  → cuerpo de texto

   Proporción de superficie: 60 grafito / 30 hueso / 10 azul acero.
   El azul acero es acento (enlaces, segundo renglón del titular,
   elementos activos), nunca fondo de bloques grandes.
   El gris frío es apoyo (kickers, fechas, bordes), nunca texto corrido.

   Índice
     1. Variables          9. Bloque hueso (invertido)
     2. Base              10. Tesis
     3. Navegación        11. Línea de tiempo
     4. Botones           12. Formación
     5. Portada           13. ACCJ Builder
     6. Secciones         14. Contacto y pie
     7. Prosa             15. Revelado al hacer scroll
     8. Prensa            16. Responsive
                          17. Accesibilidad
   ═══════════════════════════════════════════════════════════════ */


/* ── 1. VARIABLES ─────────────────────────────────────────────── */

:root{
  /* Paleta de marca */
  --grafito:#0B0E12;      /* base · ~60% de la superficie */
  --hueso:#EDEAE2;        /* contraste y texto principal · ~30% */
  --azul-acero:#3B5C86;   /* acento · ~10% */
  --gris-frio:#8A909C;    /* apoyo: metadatos, etiquetas, bordes */

  /* Alias funcionales. No cambiar sin revisar contraste. */
  --bg:var(--grafito);
  --bg-2:#11151B;
  --bg-3:#151A21;
  --txt:var(--hueso);
  --txt-2:#BFBDB7;
  --txt-3:var(--gris-frio);
  --acento:var(--azul-acero);
  --acento-2:#6E93C0;     /* variante clara: enlaces sobre grafito */
  --line:rgba(138,144,156,.18);
  --line-2:rgba(138,144,156,.34);
  --glow:rgba(59,92,134,.30);

  --max:1180px;
  --r:14px;
}


/* ── 2. BASE ──────────────────────────────────────────────────── */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--txt);
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{font-weight:900;line-height:1.12;letter-spacing:-.025em}
a{color:inherit;text-decoration:none}
img{max-width:100%}
/* Ningún botón hereda el fondo gris por defecto del navegador. */
button{appearance:none;-webkit-appearance:none;background:none;border:0;font:inherit;color:inherit;cursor:pointer}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}


/* ── 3. NAVEGACIÓN ────────────────────────────────────────────── */

#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--acento-2);z-index:200;transition:width .1s linear}

#nav{position:fixed;top:0;left:0;right:0;z-index:150;backdrop-filter:blur(14px);background:rgba(11,14,18,0);border-bottom:1px solid transparent;transition:.35s}
#nav.solid{background:rgba(11,14,18,.92);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--max);margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}

.brand{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15px}
/* Monograma: círculo de contorno. Mínimo 32px, medio "CR" de aire alrededor. */
.mark{width:38px;height:38px;flex:0 0 38px;border-radius:50%;border:1.5px solid var(--gris-frio);display:grid;place-items:center;font-weight:900;font-size:13px;letter-spacing:.03em;color:var(--hueso)}

.nav-links{display:flex;gap:24px;font-size:14px;font-weight:600;color:var(--txt-2)}
.nav-links a{position:relative;padding:4px 0;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--txt)}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--acento-2);transition:width .25s}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}

.burger{display:none;background:none;border:0;color:var(--txt);font-size:22px;cursor:pointer;line-height:1;padding:4px}


/* ── 4. BOTONES ───────────────────────────────────────────────── */

.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:100px;font-size:14px;font-weight:600;border:1px solid var(--line-2);transition:.25s;cursor:pointer;background:transparent;color:var(--txt);font-family:inherit}
.btn:hover{border-color:var(--acento-2);color:var(--acento-2);transform:translateY(-1px)}
.btn.primary{background:var(--acento);color:var(--hueso);border-color:var(--acento)}
.btn.primary:hover{background:#47709F;border-color:#47709F;color:var(--hueso);transform:translateY(-1px);box-shadow:0 12px 30px -12px var(--glow)}


/* ── 5. PORTADA ───────────────────────────────────────────────── */

header{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:130px 0 80px;overflow:hidden}

.orb{position:absolute;border-radius:50%;filter:blur(95px);opacity:.55;pointer-events:none}
.orb-1{width:520px;height:520px;background:radial-gradient(circle,rgba(59,92,134,.30),transparent 70%);top:-120px;right:-80px}
.orb-2{width:420px;height:420px;background:radial-gradient(circle,rgba(59,92,134,.16),transparent 70%);bottom:-100px;left:-120px}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:70px 70px;mask-image:radial-gradient(ellipse at 50% 40%,black 20%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at 50% 40%,black 20%,transparent 72%);opacity:.45;pointer-events:none}

.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.28fr .72fr;gap:56px;align-items:center}

.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 15px;border:1px solid var(--line-2);border-radius:100px;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-2);margin-bottom:26px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--acento-2);animation:pulse 2.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(110,147,192,.45)}
  70%{box-shadow:0 0 0 11px rgba(110,147,192,0)}
  100%{box-shadow:0 0 0 0 rgba(110,147,192,0)}
}

h1{font-size:clamp(2.3rem,5vw,3.4rem)}
h1 em{font-style:normal;color:var(--acento-2)}

/* El titular respira más al no haber bajada debajo. */
h1{margin-bottom:26px}
.lead{font-size:clamp(1.06rem,2.1vw,1.22rem);color:var(--txt-2);max-width:58ch;margin-bottom:36px}
.lead strong{color:var(--txt);font-weight:600}

.hero-cta{display:flex;gap:13px;flex-wrap:wrap}

.portrait{position:relative;border:1px solid var(--line);border-radius:20px;background:linear-gradient(160deg,var(--bg-3),var(--bg-2));padding:24px;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:13px}
.portrait .cap{margin-top:18px;font-size:13px;color:var(--txt-2)}
.portrait .cap b{color:var(--txt);display:block;font-weight:600;margin-bottom:3px;font-size:14px}
.portrait .loc{margin-top:10px;font-size:12.5px;color:var(--txt-3);display:flex;gap:8px;align-items:center}


/* ── 6. SECCIONES ─────────────────────────────────────────────── */

section{padding:110px 0;position:relative}
.alt{background:var(--bg-2)}

.sec-head{max-width:66ch;margin-bottom:50px}
.tag{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-frio);display:block;margin-bottom:15px}
.sec-head h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin-bottom:16px}
.sec-head p{color:var(--txt-2);font-size:1.02rem}


/* ── 7. PROSA (Historia y Origen · columna única centrada) ────── */

.prose{max-width:65ch;margin:0 auto}
.prose p{color:var(--txt-2);font-size:1.07rem;line-height:1.72;margin-bottom:19px}
.prose p:last-child{margin-bottom:0}
.prose p strong{color:var(--txt);font-weight:600}
.prose p.beat{color:var(--txt);font-weight:900;font-size:clamp(1.24rem,2.6vw,1.5rem);line-height:1.26;letter-spacing:-.028em;margin:34px 0}
.quote{border-left:2px solid var(--acento-2);padding:8px 0 8px 26px;font-weight:600;font-size:1.2rem;line-height:1.5;letter-spacing:-.012em;color:var(--txt);margin:46px 0 0}
/* Puente al lector: cierra la sección narrativa sin romper el tono. */
.bridge{color:var(--txt-2);font-size:1.07rem;line-height:1.72;margin:26px 0 0}

#historia .sec-head,#origen .sec-head{max-width:65ch;margin-left:auto;margin-right:auto}


/* ── 8. PRENSA ────────────────────────────────────────────────── */

.press{display:grid;gap:12px;max-width:920px}
.press a{display:flex;justify-content:space-between;align-items:baseline;gap:22px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-3);transition:border-color .25s,transform .25s}
.press a:hover{border-color:var(--acento-2);transform:translateY(-2px)}
.press b{font-size:1.02rem;font-weight:600}
.press em{font-style:normal;color:var(--txt-3);font-size:13.5px;text-align:right}
.press .arw{color:var(--acento-2);font-size:13px}


/* ── 9. BLOQUE HUESO (invertido) ──────────────────────────────── */
/* Compensa la proporción de 30% de hueso. Redefine los alias locales,
   así los componentes de dentro no necesitan reglas propias. */

.invert{
  background:var(--hueso);
  --txt:#0B0E12;
  --txt-2:#3A4049;
  --txt-3:#5C6472;
  --acento-2:#2E4A6E;
  --line:rgba(11,14,18,.14);
  --line-2:rgba(11,14,18,.28);
  --bg-3:#E3DFD6;
  color:var(--txt);
}


/* ── 10. TESIS ────────────────────────────────────────────────── */

.theses{display:grid;gap:36px;max-width:78ch}
.thesis{border-top:1px solid var(--line);padding-top:24px}
.thesis .n{font-weight:600;color:var(--txt-3);font-size:12.5px;letter-spacing:.14em;display:block;margin-bottom:11px}
.thesis h3{font-size:clamp(1.14rem,2.4vw,1.32rem);margin-bottom:12px}
.thesis p{color:var(--txt-2);margin-bottom:14px}
.thesis p:last-child{margin-bottom:0}


/* ── 11. LÍNEA DE TIEMPO ──────────────────────────────────────── */

.tl{position:relative;padding-left:38px}
.tl::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,transparent,var(--line-2) 10%,var(--line-2) 90%,transparent)}
.tl-item{position:relative;padding-bottom:42px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:'';position:absolute;left:-34px;top:7px;width:15px;height:15px;border-radius:50%;background:var(--bg);border:1px solid var(--line-2);transition:.3s}
.tl-item.hot::before,.tl-item.open::before{border-color:var(--acento);background:var(--acento);box-shadow:0 0 0 5px rgba(59,92,134,.20)}

.tl-head{display:block;width:100%;text-align:left;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
.tl-yr{font-size:12.5px;letter-spacing:.1em;color:var(--txt-3);font-weight:600;margin-bottom:6px;text-transform:uppercase}
.tl-item h3{font-size:1.16rem;margin-bottom:4px}
.tl-org{font-size:13.5px;color:var(--txt-3);margin-bottom:9px}
.tl-item p{font-size:14.7px;color:var(--txt-2);max-width:64ch}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.chip{font-size:12px;padding:5px 11px;border:1px solid var(--line);border-radius:100px;color:var(--txt-3)}
.chip.hi{border-color:rgba(110,147,192,.55);color:var(--acento-2)}


/* ── 12. FORMACIÓN ────────────────────────────────────────────── */

.edu{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:22px}
.edu-card{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--bg-3)}
.edu-card.hi{border-color:rgba(110,147,192,.42)}
.edu-card .yr{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-bottom:9px}
.edu-card h3{font-size:1.02rem;margin-bottom:5px}
.edu-card p{font-size:14px;color:var(--txt-2)}
.edu-card a:hover{color:var(--acento-2)}


/* ── 13. ACCJ BUILDER ─────────────────────────────────────────── */

.accj-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.accj h2{font-size:clamp(1.7rem,3.6vw,2.4rem);margin-bottom:20px}
.accj p{color:var(--txt-2);margin-bottom:17px}
.accj p strong{color:var(--txt);font-weight:600}
.accj-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}

.ledger{border:1px solid var(--line);border-radius:18px;background:var(--bg-3);padding:8px 24px}
.led-row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:15px 0;border-bottom:1px solid var(--line);font-size:14px}
.led-row:last-child{border-bottom:0}
.led-row b{font-weight:400;color:var(--txt-2)}
.led-row span{font-weight:600;color:var(--acento-2);font-size:.98rem;text-align:right}


/* ── 14. CONTACTO Y PIE ───────────────────────────────────────── */

.contact{max-width:70ch}
.contact h2{font-size:clamp(1.7rem,3.6vw,2.4rem);margin-bottom:16px}
.contact p{color:var(--txt-2);margin-bottom:30px}
.contact .links{display:flex;gap:13px;flex-wrap:wrap}

footer{border-top:1px solid var(--line);padding:34px 0;font-size:13.5px;color:var(--txt-3)}
.foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-links a{color:var(--txt-2);transition:color .2s}
.foot-links a:hover{color:var(--acento-2)}


/* ── 15. REVELADO AL HACER SCROLL ─────────────────────────────── */

.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}


/* ── 16. RESPONSIVE ───────────────────────────────────────────── */

@media(max-width:1100px){
  .wrap{padding:0 24px}
  .hero-in{gap:40px}
  .accj-grid{gap:40px}
  .nav-links{gap:18px;font-size:13.5px}
}

/* Línea de tiempo: en táctil no hay cursor, cada hito se abre al tocarlo */
@media(min-width:1024px){
  .tl-body{display:block !important}
  .tl-head{cursor:default}
  .tl-toggle{display:none}
  /* La instrucción de abrir cada hito solo aplica en táctil. */
  .solo-tactil{display:none}
}
@media(max-width:1023px){
  .tl-body{display:none}
  .tl-item.open .tl-body{display:block;padding-top:8px}
  .tl-toggle{float:right;margin-left:16px;color:var(--txt-3);font-weight:600;font-size:19px;line-height:1.2;transition:transform .25s}
  .tl-item.open .tl-toggle{transform:rotate(45deg)}
}

@media(max-width:900px){
  section{padding:84px 0}
  .hero-in,.accj-grid{grid-template-columns:1fr}
  .hero-in{gap:44px}
  .portrait{max-width:340px;margin:0 auto;width:100%}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:rgba(11,14,18,.97);border-bottom:1px solid var(--line);padding:8px 24px 18px;display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;border-bottom:1px solid var(--line)}
  .burger{display:block}
  .nav-in .btn.primary{display:none}
}

@media(max-width:640px){
  .wrap{padding:0 20px}
  header{padding:110px 0 60px;min-height:auto}
  section{padding:70px 0}
  .brand{font-size:14px;gap:10px}
  .mark{width:34px;height:34px;flex:0 0 34px;font-size:12px}
  .eyebrow{font-size:11.5px;padding:6px 13px}
  .portrait{padding:18px;border-radius:16px}
  .tl{padding-left:30px}
  .tl-item{padding-bottom:32px}
  .tl-item::before{left:-30px;width:13px;height:13px;top:6px}
  .tl-item h3{font-size:1.06rem}
  .tl-item p{font-size:14.2px}
  .press a{flex-direction:column;gap:7px}
  .press em{text-align:left}
  .foot-in{flex-direction:column;align-items:flex-start}
}

@media(max-width:400px){
  .btn{padding:11px 17px;font-size:13.5px}
  .hero-cta{gap:10px}
}


/* ── 17. ACCESIBILIDAD ────────────────────────────────────────── */

:target{scroll-margin-top:96px}
section[id],header[id]{scroll-margin-top:80px}

a:focus-visible,button:focus-visible{outline:2px solid var(--acento-2);outline-offset:3px;border-radius:6px}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--acento);color:var(--hueso);padding:12px 18px;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
  .rv{opacity:1;transform:none}
}