/* ==========================================================================
   CV dinámico de Javier Aguirre — cv.javitech.top
   Claro, con el naranja de JaviTech (var(--acento)) como único acento y movimiento.
   ========================================================================== */

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fuentes/manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Color del motivo: cambiando SOLO esto cambia todo el CV */
  --acento: #f76a0c;
  --naranja-suave: color-mix(in srgb, var(--acento) 12%, transparent);
  --naranja-borde: color-mix(in srgb, var(--acento) 35%, transparent);
  --tinta: #14130f;
  --gris: #6a6762;
  --linea: #e8e5e0;
  --humo: #f7f6f4;
  --blanco: #fff;
  --radio: 14px;
  --radio-g: 22px;
  --transicion: cubic-bezier(.22, .68, .36, 1);
  --ancho: 1160px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: 'Manrope', system-ui, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* overflow-x: clip (no hidden) para que las tarjetas apiladas puedan ser sticky */
  overflow-x: clip;
}
html { overflow-x: clip; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.02em; margin: 0; }
em { font-style: normal; color: var(--acento); }
ul { margin: 0; padding-left: 1.15rem; }
li { margin-bottom: .45rem; }
li::marker { color: var(--acento); }

.envoltorio { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }

/* ------------------------------------------------------------- progreso */
.progreso {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: 90;
  background: transparent;
}
.progreso span {
  display: block; height: 100%; width: 0;
  background: var(--acento);
  transition: width .1s linear;
}

/* ------------------------------------------------------------------ halo */
.halo {
  position: fixed; top: 0; left: 0; width: 620px; height: 620px;
  border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--acento) 13%, transparent), transparent 62%);
  transform: translate3d(-50%, -50%, 0);
  transition: opacity .6s;
}
body.con-halo .halo { opacity: 1; }

/* -------------------------------------------------------------- cabecera */
.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 80;
  transition: background .4s, box-shadow .4s, backdrop-filter .4s;
}
.cabecera.pegada {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--linea), 0 10px 30px rgba(20, 19, 15, .05);
}
.cabecera-int {
  display: flex; align-items: center; gap: 1.6rem;
  padding: .95rem 0;
}
.marca { font-weight: 800; font-size: 1.08rem; letter-spacing: -.03em; }
.marca span { color: var(--acento); }
.cabecera nav { margin-left: auto; display: flex; gap: 1.5rem; }
.cabecera nav a {
  font-size: .88rem; font-weight: 600; color: var(--gris);
  position: relative; transition: color .3s;
}
.cabecera nav a::after {
  content: ''; position: absolute; left: 0; bottom: -.35rem; height: 2px; width: 0;
  background: var(--acento); transition: width .35s var(--transicion);
}
.cabecera nav a:hover { color: var(--tinta); }
.cabecera nav a:hover::after { width: 100%; }

/* ---------------------------------------------------------------- botones */
.boton {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--acento); color: #fff;
  padding: .95rem 1.5rem; border-radius: 999px;
  font-weight: 700; font-size: .95rem; border: 1px solid var(--acento);
  transition: transform .35s var(--transicion), box-shadow .35s, background .35s;
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--acento) 30%, transparent); }
.boton-fantasma { background: transparent; color: var(--tinta); border-color: var(--linea); }
.boton-fantasma:hover { border-color: var(--naranja-borde); box-shadow: none; }
.boton-pequeno { padding: .62rem 1.05rem; font-size: .84rem; }
.flecha { transition: transform .35s var(--transicion); }
.boton:hover .flecha { transform: translateX(4px); }

/* --------------------------------------------------------------- etiqueta */
.etiqueta {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--acento);
}
.etiqueta::before {
  content: ''; width: 26px; height: 2px; background: var(--acento); border-radius: 2px;
}

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative; padding: clamp(7.5rem, 15vh, 10rem) 0 clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; z-index: -1;
  top: -22%; right: -12%; width: 46rem; height: 46rem; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--acento) 10%, transparent), transparent 65%);
}
.hero-int {
  display: grid; grid-template-columns: 1.35fr .65fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.titulo {
  font-size: clamp(2.3rem, 5.6vw, 4.15rem);
  font-weight: 800; margin: 1.4rem 0 1.5rem;
}
.titulo .palabra { display: inline-block; }
/* letra a letra, entrando desde el desenfoque (lo hace el JS) */
html.js .titulo .letra {
  display: inline-block; opacity: 0; filter: blur(9px);
  transform: translateY(.5em) rotate(5deg);
  animation: entra-letra .9s var(--transicion) forwards;
}
@keyframes entra-letra { to { opacity: 1; filter: blur(0); transform: none; } }
html.js .titulo .palabra {
  opacity: 0; transform: translateY(.65em);
  animation: subir-palabra .95s var(--transicion) forwards;
}
.titulo .linea { display: block; }
@keyframes subir-palabra { to { opacity: 1; transform: none; } }

.entradilla { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--gris); max-width: 46ch; }
.acciones { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2.1rem; }

.hero-foto { margin: 0; position: relative; }
.hero-foto::after {
  content: ''; position: absolute; inset: auto -14px -14px auto;
  width: 42%; height: 42%; border-radius: var(--radio-g);
  border-right: 3px solid var(--acento); border-bottom: 3px solid var(--acento);
}
.hero-foto img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--radio-g); filter: saturate(1.02);
}

.bajar {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gris); display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.bajar span {
  width: 1px; height: 34px; background: linear-gradient(var(--acento), transparent);
  animation: latido 2.2s var(--transicion) infinite;
}
@keyframes latido { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* --------------------------------------------------------------- numeros */
.numeros { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.rejilla-numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.numero { padding: 2.3rem 1.6rem; border-right: 1px solid var(--linea); }
.numero:last-child { border-right: 0; }
.numero .n {
  font-size: clamp(2.1rem, 4.2vw, 3rem); font-weight: 800;
  color: var(--acento); letter-spacing: -.04em; line-height: 1;
}
.numero .d { margin-top: .55rem; font-size: .9rem; color: var(--gris); }

/* ------------------------------------------------------------ marquesina */
.marquesina { overflow: hidden; background: var(--acento); color: #fff; padding: 1rem 0; }
.marquesina-int {
  display: flex; gap: 2.8rem; width: max-content;
  animation: deslizar 38s linear infinite;
}
.marquesina-int span {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .2em; white-space: nowrap;
}
.marquesina-int span::after { content: '·'; margin-left: 2.8rem; opacity: .5; }
@keyframes deslizar { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------- bloques */
.bloque { padding: clamp(3.4rem, 8vw, 6rem) 0; }
.bloque-humo { background: var(--humo); }
.bloque h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; margin: 1rem 0 2.4rem; }
.manifiesto {
  font-size: clamp(1.25rem, 2.6vw, 1.9rem); font-weight: 700;
  letter-spacing: -.02em; max-width: 34ch; margin: 1.2rem 0 3rem;
}

.rejilla { display: grid; gap: 1.5rem; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.rejilla-formacion { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }

/* -------------------------------------------------------------- tarjetas */
.tarjeta {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio-g); padding: 1.7rem 1.6rem;
  transition: transform .45s var(--transicion), box-shadow .45s, border-color .45s;
}
.tarjeta:hover {
  transform: translateY(-6px); box-shadow: 0 20px 44px rgba(20, 19, 15, .08);
  border-color: var(--naranja-borde);
}
.tarjeta h3 { font-size: 1.12rem; margin-bottom: .6rem; }
.tarjeta p { margin: 0; color: var(--gris); font-size: .96rem; }

/* ---------------------------------------------------------- linea de tiempo */
.linea-tiempo { position: relative; padding-left: 0; }
.hito {
  display: grid; grid-template-columns: 11rem 1fr; gap: 2rem;
  padding: 1.9rem 0 1.9rem 1.7rem; position: relative;
  border-top: 1px solid var(--linea);
  transition: padding-left .45s var(--transicion);
}
.hito:last-child { border-bottom: 1px solid var(--linea); }
.hito::before {
  content: ''; position: absolute; left: 0; top: 2.5rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--blanco); border: 2px solid var(--acento);
  transition: transform .45s var(--transicion), background .45s;
}
.hito:hover { padding-left: 2.3rem; }
.hito:hover::before { transform: scale(1.5); background: var(--acento); }
.hito-fecha {
  font-size: .82rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--acento); padding-top: .35rem;
}
.hito h3 { font-size: 1.28rem; }
.hito-donde { color: var(--gris); font-size: .92rem; margin: .3rem 0 .9rem; }
.hito ul { color: var(--gris); font-size: .97rem; }

/* ----------------------------------------------------------- competencias */
.area {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio-g); padding: 1.6rem 1.5rem;
  transition: transform .45s var(--transicion), border-color .45s, box-shadow .45s;
}
.area:hover {
  transform: translateY(-5px); border-color: var(--naranja-borde);
  box-shadow: 0 18px 40px rgba(20, 19, 15, .07);
}
.area h3 { font-size: 1.05rem; margin-bottom: 1rem; }
.pastillas { display: flex; flex-wrap: wrap; gap: .45rem; }
.pastillas span {
  font-size: .82rem; font-weight: 600; color: var(--tinta);
  background: var(--humo); border: 1px solid var(--linea);
  padding: .38rem .72rem; border-radius: 999px;
  transition: background .3s, color .3s, border-color .3s, transform .3s;
}
.pastillas span:hover {
  background: var(--naranja-suave); border-color: var(--naranja-borde);
  color: var(--acento); transform: translateY(-2px);
}

/* -------------------------------------------------------------- formacion */
.estudio {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 1.35rem 1.3rem;
  border-left: 3px solid var(--acento);
  transition: transform .45s var(--transicion), box-shadow .45s;
}
.estudio:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20, 19, 15, .07); }
.estudio h3 { font-size: 1rem; }
.estudio p { margin: .4rem 0 0; color: var(--gris); font-size: .88rem; }
.destaca { color: var(--acento); font-weight: 800; }
.nota-pie { margin-top: 2.4rem; color: var(--gris); font-size: .9rem; }

/* --------------------------------------------------------------- contacto */
.contacto-rejilla { margin: 2.4rem 0 .5rem; }
.dato {
  display: flex; flex-direction: column; gap: .35rem;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 1.35rem 1.4rem;
  transition: transform .4s var(--transicion), border-color .4s, box-shadow .4s;
}
.dato:hover {
  transform: translateY(-4px); border-color: var(--naranja-borde);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--acento) 12%, transparent);
}
.dato-etiqueta { font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.dato-valor { font-weight: 700; font-size: 1.02rem; }
.dato:hover .dato-valor { color: var(--acento); }

.cierre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.6rem; flex-wrap: wrap; margin-top: 3rem;
  padding-top: 2.2rem; border-top: 1px solid var(--linea);
}
.cierre-titulo { font-weight: 800; font-size: 1.3rem; }
.cierre-sub { color: var(--gris); font-size: .92rem; }

/* ------------------------------------------------------------------- pie */
.pie { border-top: 1px solid var(--linea); padding: 2.2rem 0; }
.pie-int {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: var(--gris); font-size: .86rem;
}

/* --------------------------------------------------------------- whatsapp */
.whatsapp {
  position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 70;
  width: 64px; height: 64px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .4);
  transition: transform .35s var(--transicion);
}
.whatsapp:hover { transform: scale(1.08) translateY(-2px); }

/* ----------------------------------------------------------- animaciones */
/* OJO: solo se ocultan si hay JavaScript (html.js). Sin JS la página se ve
   entera igual — es la red de seguridad, igual que en JaviTech.top. */
html.js .revela {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s var(--transicion), transform .8s var(--transicion);
}
html.js .revela.visible { opacity: 1; transform: none; }
html.js .revela-2 { transition-delay: .12s; }

body.sin-animacion .revela,
html.js body.sin-animacion .revela,
body.sin-animacion .titulo .palabra { opacity: 1 !important; transform: none !important; animation: none !important; }
body.sin-animacion .marquesina-int { animation: none; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 62rem) {
  .hero-int { grid-template-columns: 1fr; }
  .hero-foto { max-width: 20rem; order: -1; }
  .hito { grid-template-columns: 1fr; gap: .5rem; }
  .hito-fecha { padding-top: 0; }
  .cabecera nav { display: none; }
}
@media (max-width: 40rem) {
  body { font-size: 16px; }
  .numero { border-right: 0; border-bottom: 1px solid var(--linea); }
  .numero:last-child { border-bottom: 0; }
  .whatsapp { width: 56px; height: 56px; }
  .halo { display: none; }
  .cierre { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revela { opacity: 1; transform: none; transition: none; }
  .titulo .palabra { opacity: 1; transform: none; animation: none; }
  .marquesina-int { animation: none; }
  .bajar span { animation: none; }
}

/* ============================================================= cargador */
#carga {
  position: fixed; inset: 0; z-index: 200; background: var(--blanco);
  display: grid; place-items: center;
  transition: opacity .7s var(--transicion), visibility .7s;
}
#carga.fuera { opacity: 0; visibility: hidden; }
.carga-nombre {
  font-size: clamp(1.5rem, 5vw, 2.8rem); font-weight: 800;
  letter-spacing: .3em; text-transform: uppercase;
  opacity: 0; animation: aparecer-letras .9s var(--transicion) .15s forwards;
}
.carga-nombre span { color: var(--acento); }
.carga-barra {
  width: min(58vw, 260px); height: 2px; background: var(--linea);
  margin: 1.5rem auto 0; overflow: hidden; border-radius: 2px;
}
.carga-barra i {
  display: block; height: 100%; width: 0; background: var(--acento);
  animation: llenar 1.15s var(--transicion) .1s forwards;
}
@keyframes aparecer-letras {
  from { opacity: 0; transform: translateY(16px); letter-spacing: .52em; }
  to { opacity: 1; transform: none; }
}
@keyframes llenar { to { width: 100%; } }
html:not(.js) #carga { display: none; }

/* =================================================== constelación (hero) */
.hero { isolation: isolate; }
#constelacion { position: absolute; inset: 0; z-index: -2; pointer-events: none; }

/* ===================================================== revelados nuevos */
html.js .revela-zoom { opacity: 0; transform: scale(.94); transition: opacity 1s var(--transicion), transform 1.1s var(--transicion); }
html.js .revela-zoom.visible { opacity: 1; transform: none; }
html.js .revela-lado { opacity: 0; transform: translateX(-30px); transition: opacity .9s var(--transicion), transform 1s var(--transicion); }
html.js .revela-lado.visible { opacity: 1; transform: none; }
html.js .revela-cortina { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--transicion); }
html.js .revela-cortina.visible { clip-path: inset(0 0 0 0); }

/* ============================================ experiencia en tarjetas apiladas */
html.js .linea-tiempo { padding-bottom: 10vh; }
html.js .hito {
  position: sticky; top: 86px;
  background: var(--humo); border: 1px solid var(--linea);
  border-radius: var(--radio-g); margin-bottom: 1.1rem; padding: 2rem 1.9rem;
  box-shadow: 0 20px 44px rgba(20, 19, 15, .06);
}
html.js .hito:nth-child(odd) { background: var(--blanco); }
html.js .hito::before { left: 1.9rem; top: 2.7rem; }
html.js .hito:hover { padding-left: 1.9rem; }
@media (max-width: 62rem) {
  html.js .hito { position: static; padding: 1.6rem 1.4rem; }
  html.js .hito::before { left: 1.4rem; top: 2.2rem; }
}

/* ============================================================== cursor */
.con-cursor, .con-cursor a, .con-cursor button { cursor: none; }
#cursor, #cursor-anillo {
  position: fixed; top: 0; left: 0; z-index: 190;
  pointer-events: none; border-radius: 50%; opacity: 0;
}
#cursor { width: 7px; height: 7px; background: var(--acento); }
#cursor-anillo {
  width: 40px; height: 40px; border: 1.5px solid var(--naranja-borde);
  transition: width .32s var(--transicion), height .32s var(--transicion),
              background .32s, border-color .32s, opacity .3s;
}
body.con-cursor #cursor, body.con-cursor #cursor-anillo { opacity: 1; }
body.cursor-grande #cursor-anillo {
  width: 68px; height: 68px; background: var(--naranja-suave); border-color: transparent;
}
html:not(.js) #cursor, html:not(.js) #cursor-anillo { display: none; }

/* ============================== el scroll suave lo lleva el JS, no el navegador */
html.js { scroll-behavior: auto; }

/* ================================================ menú: sección activa */
.cabecera nav a.activo { color: var(--tinta); }
.cabecera nav a.activo::after { width: 100%; }

/* ============================== quien reduce movimiento: todo quieto */
@media (prefers-reduced-motion: reduce) {
  html.js .revela, html.js .revela-zoom, html.js .revela-lado,
  html.js .revela-cortina {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .carga-nombre, .carga-barra i { animation: none !important; opacity: 1; }
  .carga-barra i { width: 100%; }
  html.js .hito { position: static; }
}

@media print {
  .cabecera, .whatsapp, .progreso, .halo, .bajar, .marquesina { display: none !important; }
  .revela { opacity: 1 !important; transform: none !important; }
  body { font-size: 12px; }
  .bloque, .numero { break-inside: avoid; }
}


/* ==========================================================================
   ESTILOS DEL CV — se eligen con una clase en <html>.
   Los tres salen del mismo motor: cambia lo que se enciende, no el diseno.
     .estilo-dinamico     todo (intro, constelacion, letras, tarjetas, cursor)
     .estilo-equilibrado  diseno + apariciones suaves, sin adornos
     .estilo-sobrio       quieto del todo (como la plantilla clasica)
   ========================================================================== */
.estilo-equilibrado #carga,
.estilo-sobrio #carga { display: none; }

.estilo-equilibrado #constelacion,
.estilo-sobrio #constelacion { display: none; }

.estilo-equilibrado #cursor,
.estilo-equilibrado #cursor-anillo,
.estilo-sobrio #cursor,
.estilo-sobrio #cursor-anillo { display: none !important; }

.estilo-sobrio .halo { display: none; }

/* sobrio: nada se esconde, nada se mueve */
.estilo-sobrio .revela,
.estilo-sobrio .revela-zoom,
.estilo-sobrio .revela-lado,
.estilo-sobrio .revela-cortina {
  opacity: 1 !important; transform: none !important; clip-path: none !important;
}
.estilo-sobrio .titulo .letra,
.estilo-sobrio .titulo .palabra { opacity: 1 !important; transform: none !important; animation: none !important; filter: none !important; }
.estilo-sobrio .marquesina-int,
.estilo-sobrio .bajar span { animation: none !important; }
.estilo-sobrio .hito { position: static; }

/* equilibrado: las tarjetas no se apilan, el resto igual */
.estilo-equilibrado .hito { position: static; }