/* ------------------------------------------------------------------
   josafet.com — hoja de estilos
   Retícula de 12 columnas. Márgenes 80, medianil 24, ancho máximo 1440.
   Las medidas vienen del archivo de Figma "josafet.com — Diagramación".
   ------------------------------------------------------------------ */

:root{
  --paper:#F1F2F4;
  --card:#FFFFFF;
  --ink:#16222E;
  --slate:#5B6C7A;
  --line:#D5DAE0;
  --signal:#0C9FD6;

  /* sobre fondo ink */
  --ink-text:#F1F2F4;
  --ink-soft:#9FB1BF;
  --ink-label:#7D93A3;
  --ink-line:#38485A;

  --max:1440px;
  --pad:80px;
  --gap:24px;

  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --text:"Newsreader",Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;transition:none !important;}
}
img{max-width:100%;display:block;}
a{color:inherit;}
a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px;}

/* ---------- la retícula ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
}
/* una fila interna que hereda las mismas 12 columnas */
.fila{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);
}

/* ---------- tipografía compartida ---------- */
.rotulo{
  font-family:var(--display);
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--slate);
  margin:0;
}
.titulo-seccion{
  grid-column:1 / -1;
  display:flex;
  align-items:baseline;
  gap:24px;
  margin:0 0 54px;
}
.titulo-seccion h2{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.6rem,3vw,34px);
  letter-spacing:-.02em;
  margin:0;
  white-space:nowrap;
}
.titulo-seccion::after{content:"";flex:1;height:1px;background:var(--line);}

/* ---------- barra superior ---------- */
.top{
  border-bottom:1px solid var(--line);
  background:rgba(241,242,244,.92);
  backdrop-filter:blur(6px);
  position:sticky;top:0;z-index:20;
}
.top .grid{align-items:center;padding-top:14px;padding-bottom:14px;}
.mark{grid-column:1 / 4;font-family:var(--display);font-weight:800;font-size:.95rem;text-decoration:none;}
.top nav{grid-column:5 / -1;display:flex;justify-content:flex-end;gap:26px;font-family:var(--display);font-size:.88rem;}
.top nav a{color:var(--slate);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;}
.top nav a:hover{color:var(--ink);border-bottom-color:var(--signal);}

/* ---------- 01 · portada ---------- */
.hero{background:var(--paper);overflow:hidden;}
.hero .grid{align-items:stretch;}
.hero-texto{
  grid-column:1 / 8;
  padding:140px 0 120px;
  align-self:center;
}
.hero-foto{
  grid-column:8 / -1;
  margin:0 calc(var(--pad) * -1) 0 0;
  min-height:760px;
  background:var(--line);
}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:center;}

.nombre{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.9rem,7.2vw,104px);
  line-height:.88;
  letter-spacing:-.035em;
  text-transform:uppercase;
  margin:0;
}
.nombre span{display:block;}
.regla{
  height:5px;
  background:var(--signal);
  width:min(190px,55%);
  margin:34px 0 38px;
  transform-origin:left center;
  animation:draw .9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes draw{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.claim{
  font-style:italic;
  font-size:clamp(1.5rem,2.6vw,36px);
  line-height:1.25;
  margin:0 0 34px;
  max-width:19ch;
}
.entrada{color:var(--slate);margin:0 0 38px;max-width:46ch;}
.entrada strong{color:var(--ink);font-weight:500;}

.acciones{display:flex;flex-wrap:wrap;gap:12px;}
.btn{
  font-family:var(--display);font-size:15px;font-weight:600;
  text-decoration:none;padding:14px 26px;border:1px solid var(--ink);
  display:inline-block;transition:background .18s ease,color .18s ease;
}
.btn-solido{background:var(--ink);color:var(--paper);}
.btn-solido:hover{background:var(--signal);border-color:var(--signal);color:#fff;}
.btn-linea{background:transparent;color:var(--ink);}
.btn-linea:hover{background:var(--ink);color:var(--paper);}

/* ---------- 02 · banda de marcas (ink) ---------- */
.marcas{background:var(--ink);padding:40px 0 48px;}
.marcas .rotulo{grid-column:1 / -1;color:var(--ink-label);margin-bottom:26px;}
.marcas ul{
  grid-column:1 / -1;
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;
  column-gap:34px;row-gap:12px;
}
.marcas li{
  font-family:var(--display);font-weight:600;font-size:21px;
  color:var(--ink-text);
  position:relative;
}
.marcas li + li::before{
  content:"";position:absolute;left:-18px;top:50%;
  transform:translateY(-50%);
  width:1px;height:20px;background:var(--ink-line);
}

/* ---------- 03 · sobre mí ---------- */
.sobre{background:var(--paper);padding:96px 0 110px;}
.sobre-lead{grid-column:1 / 7;font-size:25px;line-height:1.5;margin:0;}
.sobre-apoyo{grid-column:8 / -1;font-size:16px;line-height:1.65;color:var(--slate);margin:0;}
.cita{
  grid-column:4 / -1;
  margin:86px 0 0;
  font-style:italic;
  font-size:clamp(1.3rem,2.2vw,30px);
  line-height:1.45;
}
.cita::before{
  content:"";display:block;
  width:calc((100% - 7 * var(--gap)) / 8);
  min-width:60px;height:4px;background:var(--signal);
  margin-bottom:34px;
}
.sobre .rotulo.hab{grid-column:1 / -1;margin:96px 0 34px;}
.habilidades{
  grid-column:1 / -1;
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:var(--gap);
}
.habilidades li{
  font-family:var(--display);font-size:16px;
  border-top:1px solid var(--line);
  padding:16px 0 28px;
}
.idiomas-rotulo{grid-column:1 / 4;margin-top:40px;}
.idiomas{grid-column:4 / -1;margin:37px 0 0;font-family:var(--display);font-size:16px;}

/* ---------- 04 · recorrido ---------- */
.recorrido{background:var(--paper);padding:96px 0 110px;}
.bloque-ahora{background:var(--ink);padding:34px 0 10px;margin:0 0 10px;}

.puesto{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);
  border-top:1px solid var(--line);
  padding:30px 0 34px;
}
.bloque-ahora .puesto{border-top:0;padding:26px 0 36px;}
.puesto .anio{grid-column:1 / 3;}
.puesto .anio b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:44px;letter-spacing:-.03em;line-height:1;
  color:var(--line);
}
.puesto .anio span{
  display:block;font-family:var(--display);font-size:14px;
  letter-spacing:.03em;color:var(--slate);margin-top:8px;
}
.puesto .cuerpo{grid-column:3 / 10;}
.puesto h3{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.3;margin:0 0 6px;}
.puesto .donde{font-family:var(--display);font-size:14px;color:var(--slate);margin:0 0 14px;}
.puesto p.que{margin:0;font-size:16px;line-height:1.55;color:var(--slate);}
.puesto .tipo{
  grid-column:11 / -1;
  font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.08em;color:var(--slate);padding-top:6px;
}
/* puestos actuales, sobre ink */
.bloque-ahora .puesto .anio b{color:var(--signal);}
.bloque-ahora .puesto .anio span,
.bloque-ahora .puesto .donde,
.bloque-ahora .puesto p.que,
.bloque-ahora .puesto .tipo{color:var(--ink-soft);}
.bloque-ahora .puesto h3{color:var(--ink-text);}

/* ---------- 05 · qué hago + formación (blanco) ---------- */
.hacer{background:var(--card);padding:96px 0 0;}
.disciplina{grid-column:1 / 6;}
.disciplina + .disciplina{grid-column:8 / -1;}
.disciplina h3{
  font-family:var(--display);font-weight:800;
  font-size:40px;letter-spacing:-.025em;margin:0 0 20px;
}
.disciplina > p{font-style:italic;font-size:19px;line-height:1.45;color:var(--slate);margin:0 0 42px;}
.disciplina ul{list-style:none;margin:0;padding:0;}
.disciplina li{border-top:1px solid var(--line);padding:16px 0 20px;}
.disciplina li span{display:block;font-family:var(--display);font-size:17px;line-height:1.4;}
.disciplina li em{
  display:block;font-style:normal;font-family:var(--display);
  font-size:12px;letter-spacing:.02em;color:var(--slate);margin-top:8px;
}

.formacion{background:var(--card);padding:90px 0 110px;}
.formacion .rotulo.a{grid-column:1 / 5;margin-bottom:30px;}
.formacion .rotulo.b{grid-column:6 / -1;margin-bottom:30px;}
.estudios{grid-column:1 / 5;}
.certificados{grid-column:6 / -1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gap);}
.estudios ul,.certificados ul{list-style:none;margin:0;padding:0;}
.certificados ul{grid-column:span 3;}
.estudios li,.certificados li{border-top:1px solid var(--line);padding:14px 0 26px;}
.estudios .anio,.certificados .anio{
  display:block;font-family:var(--display);font-size:13px;
  letter-spacing:.02em;color:var(--signal);margin-bottom:6px;
}
.estudios b{display:block;font-family:var(--display);font-weight:600;font-size:17px;line-height:1.35;}
.certificados b{display:block;font-family:var(--display);font-weight:600;font-size:15px;line-height:1.35;}
.estudios em,.certificados em{
  display:block;font-style:normal;font-family:var(--display);
  color:var(--slate);margin-top:8px;
}
.estudios em{font-size:14px;}
.certificados em{font-size:13px;}

/* ---------- 06 · contacto (ink) ---------- */
.contacto{background:var(--ink);color:var(--ink-text);padding:110px 0 0;}
.contacto .titulo-seccion h2{color:var(--ink-text);}
.contacto .titulo-seccion::after{background:var(--ink-line);}
.contacto .lead{grid-column:1 / 6;font-size:clamp(1.3rem,2.2vw,30px);line-height:1.45;margin:0;}
.datos{grid-column:8 / -1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--gap);row-gap:34px;margin:0;}
.datos dt{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--ink-label);}
.datos dd{margin:6px 0 0;font-family:var(--display);font-size:17px;font-weight:600;overflow-wrap:anywhere;}
.datos dd a{text-decoration:none;border-bottom:1px solid rgba(241,242,244,.28);padding-bottom:2px;}
.datos dd a:hover{color:var(--signal);border-bottom-color:var(--signal);}
.datos .par{grid-column:span 3;}
.datos .impar{grid-column:span 2;}

.pie{background:var(--ink);color:var(--ink-label);padding:0 0 46px;}
.pie .grid{padding-top:24px;}
.pie .grid::before{
  content:"";grid-column:1 / -1;height:1px;background:var(--ink-line);
  margin-bottom:24px;
}
.pie p{margin:0;font-family:var(--display);font-size:14px;}
.pie p:first-of-type{grid-column:1 / 8;}
.pie p:last-of-type{grid-column:9 / -1;}

/* ==================================================================
   RESPONSIVE
   La retícula de 12 se mantiene hasta 1000px; de ahí para abajo
   casi todo pasa a ancho completo.
   ================================================================== */

@media (max-width:1240px){
  :root{--pad:48px;}
  .hero-texto{padding:110px 0 90px;}
  .hero-foto{min-height:640px;}
}

@media (max-width:1000px){
  :root{--pad:40px;--gap:20px;}

  .hero .grid{grid-template-columns:minmax(0,1fr);}
  .hero-texto{grid-column:1 / -1;padding:80px 0 56px;}
  .hero-foto{
    grid-column:1 / -1;
    margin:0 calc(var(--pad) * -1);
    min-height:0;
    aspect-ratio:4 / 3;
  }

  .sobre-lead,.sobre-apoyo,.cita,.idiomas-rotulo,.idiomas{grid-column:1 / -1;}
  .sobre-lead{font-size:22px;}
  .sobre-apoyo{margin-top:30px;}
  .cita{margin-top:60px;}
  .idiomas{margin-top:10px;}
  .habilidades{grid-template-columns:repeat(2,minmax(0,1fr));}

  .puesto{grid-template-columns:minmax(0,1fr);row-gap:12px;}
  .puesto .anio,.puesto .cuerpo,.puesto .tipo{grid-column:1 / -1;}
  .puesto .anio{display:flex;align-items:baseline;gap:12px;}
  .puesto .anio b{font-size:34px;}
  .puesto .anio span{margin-top:0;}
  .puesto .tipo{padding-top:4px;}

  .disciplina,.disciplina + .disciplina{grid-column:1 / -1;}
  .disciplina + .disciplina{margin-top:64px;}
  .disciplina h3{font-size:32px;}

  .formacion .rotulo.a,.formacion .rotulo.b,.estudios,.certificados{grid-column:1 / -1;}
  .formacion .rotulo.b{margin-top:54px;}
  .certificados{grid-template-columns:repeat(2,minmax(0,1fr));}
  .certificados ul{grid-column:span 1;}

  .contacto .lead{grid-column:1 / -1;}
  .datos{grid-column:1 / -1;margin-top:46px;grid-template-columns:repeat(2,minmax(0,1fr));}
  .datos .par,.datos .impar{grid-column:span 1;}

  .pie p:first-of-type,.pie p:last-of-type{grid-column:1 / -1;}
  .pie p:last-of-type{margin-top:8px;}
}

@media (max-width:620px){
  :root{--pad:24px;}
  body{font-size:16px;}
  .top nav{gap:18px;}
  .top nav a:nth-child(1),.top nav a:nth-child(3){display:none;}
  .mark{grid-column:1 / 7;}
  .top nav{grid-column:7 / -1;}

  .hero-texto{padding:64px 0 44px;}
  .hero-foto{aspect-ratio:1 / 1;}
  .marcas li{font-size:18px;}
  .habilidades{grid-template-columns:minmax(0,1fr);}
  .habilidades li{padding:14px 0 18px;}
  .certificados{grid-template-columns:minmax(0,1fr);}
  .sobre,.recorrido{padding:70px 0 80px;}
  .hacer{padding:70px 0 0;}
  .formacion{padding:64px 0 80px;}
  .contacto{padding:80px 0 0;}
  .titulo-seccion{margin-bottom:38px;}
}