/* =========================================================
   Portafolio — Vicente Cáceres Farías
   Medidas tomadas del referente danielsun.space:
   contenedor 1200px con 24px de padding (columna util 1152px),
   340px de aire sobre el titular, 200px sobre cada seccion,
   fondo de color plano y tarjetas alternadas.
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --bg:#ffffff;
  --fg:#000000;
  --muted:rgba(0,0,0,.55);
  --faint:rgba(0,0,0,.30);
  --line:rgba(0,0,0,.10);
  --card:#f2f1ef;
  --invert-bg:#000000;
  --invert-fg:#ffffff;


  /* Una sola familia para todo el sitio: Libre Franklin.
     Se mantienen dos variables porque siguen siendo dos papeles
     distintos, titulos y texto corrido, y cada uno se ajusta aparte. */
  --titulos:"Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --texto:"Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Anchos: el contenedor es 1200, la columna util 1152.
     Los textos usan medidas mas cortas para seguir siendo legibles. */
  --maxw:1200px;         /* ancho del contenedor */
  --pad:24px;            /* padding lateral -> columna util de 1152px */
  --measure-hero:950px;  /* ancho maximo del titular de portada */
  --measure-head:800px;  /* ancho maximo de los titulos de seccion */
  --measure-text:400px;  /* ancho de las columnas de texto de servicios */

  /* Ritmo vertical */
  --air-hero:340px;      /* aire sobre el titular */
  --air-section:200px;   /* aire sobre cada titulo de seccion */
  --gap-card:12px;       /* separacion entre tarjetas */

  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .nav__marca{
    background-image:url("../assets/img/marca/ja-claro.png");
  }
  :root:not([data-theme="light"]){
    --bg:#0b0b0b; --fg:#f5f4f2;
    --muted:rgba(245,244,242,.58);
    --faint:rgba(245,244,242,.32);
    --line:rgba(245,244,242,.12);
    --card:#191918;
    --invert-bg:#f5f4f2; --invert-fg:#0b0b0b;
  }
}
:root[data-theme="dark"] .nav__marca{
  background-image:url("../assets/img/marca/ja-claro.png");
}
:root[data-theme="dark"]{
  --bg:#0b0b0b; --fg:#f5f4f2;
  --muted:rgba(245,244,242,.58);
  --faint:rgba(245,244,242,.32);
  --line:rgba(245,244,242,.12);
  --card:#191918;
  --invert-bg:#f5f4f2; --invert-fg:#0b0b0b;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  position:relative;
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--texto);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3,p,ul,figure,blockquote{margin:0}
ul{list-style:none; padding:0}
::selection{background:var(--fg); color:var(--bg)}

#app{position:relative; z-index:1}

/* ---------- Layout ---------- */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
}

/* Cada seccion abre con mucho aire arriba: es lo que da el ritmo. */
.section{padding-top:var(--air-section)}
.section:last-of-type{padding-bottom:var(--air-section)}
/* Seccion que va justo despues de un encabezado de pagina: menos aire. */
.section--tight{padding-top:64px}

/* Encabezado de seccion: etiqueta chica + titulo serif grande */
.section-head{margin-bottom:64px}
.eyebrow{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:24px;
}
.section-head h2{
  font-family:var(--titulos);
  font-weight:400;
  font-size:clamp(34px, 5vw, 64px);
  line-height:1.08;
  letter-spacing:-.032em;
  max-width:var(--measure-head);
}
.section-head .intro{
  font-family:var(--titulos);
  font-size:20px; line-height:1.45;
  color:var(--fg);
  max-width:56ch;
  margin-top:24px;
}

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--line)}
.nav__in{
  max-width:var(--maxw);
  margin:0 auto; padding:18px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.nav__name{font-size:13px; letter-spacing:-.01em}
/* La marca Ja de la barra. El archivo cambia con el tema: disco negro
   sobre fondo claro, disco blanco sobre fondo oscuro. */
.nav__marca{
  display:inline-block; width:22px; height:22px; margin-right:9px; vertical-align:-6px;
  background:url("../assets/img/marca/ja-oscuro.png") center/contain no-repeat;
}
.nav__name-rol{color:var(--muted)}
.nav__links{display:flex; align-items:center; gap:24px; font-size:13px}
.nav__links a{color:var(--muted); transition:color .2s var(--ease)}
.nav__links a:hover, .nav__links a[aria-current="page"]{color:var(--fg)}
/* pestana externa sin URL todavia */
.nav__links a[aria-disabled="true"]{color:var(--faint); cursor:default}
.nav__links a[aria-disabled="true"]:hover{color:var(--faint)}
.theme-btn{
  font:inherit; font-size:13px; color:var(--muted);
  background:none; border:0; padding:0; cursor:pointer;
  transition:color .2s var(--ease);
}
.theme-btn:hover{color:var(--fg)}
.theme-btn__ico{display:none; font-size:15px; line-height:1}

/* ---------- Portada ---------- */
.hero{padding:var(--air-hero) 0 0}
.hero h1{
  font-family:var(--titulos);
  font-weight:400;
  font-size:clamp(36px, 5.4vw, 64px);
  line-height:1.13;
  letter-spacing:-.032em;
  max-width:var(--measure-hero);
}
.hero h1 em{font-style:normal; color:var(--muted)}
.hero__row{
  display:flex; flex-wrap:wrap; align-items:center; gap:24px 40px;
  margin-top:32px;
}
.hero__note{
  font-family:var(--titulos);
  font-size:20px; line-height:1.45; color:var(--fg);
  max-width:46ch;
}

/* Boton principal */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--invert-bg); color:var(--invert-fg);
  padding:0 22px; height:40px; border-radius:999px;
  font-size:14px; white-space:nowrap;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.btn:hover{opacity:.82; transform:translateY(-1px)}
.btn .dot{
  width:7px; height:7px; border-radius:50%;
  background:currentColor; opacity:.7;
  animation:pulse 2.4s infinite;
}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- Catalogo ----------
   Todas las tarjetas del mismo porte: mismo ancho, misma proporcion
   de imagen. No hay ninguna regla nth-child aqui, a proposito. El
   referente alterna una ancha y dos angostas, pero ese ritmo
   jerarquiza: la ancha se lee como "este importa mas", y quien cae
   ahi depende de la posicion en el array, no de una decision. */
.projects{display:grid; gap:var(--gap-card)}
@media (min-width:820px){ .projects{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ .projects{grid-template-columns:repeat(3,1fr)} }

.card{
  display:block; position:relative;
  border-radius:16px; overflow:hidden;
  background:var(--card);
  transition:transform .45s var(--ease);
}
.card:hover{transform:translateY(-3px)}
.card__media{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--card);
}
.card__media img, .card__media svg{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.card:hover .card__media img, .card:hover .card__media svg{transform:scale(1.035)}

.card__bar{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; padding:20px 24px 24px;
}
.card__title{font-size:15px}
.card__meta{font-size:13px; color:var(--muted); text-align:right}

/* Etiquetas bajo la imagen, en la zona de informacion: encima de la
   foto la ensuciaban y tapaban justo lo que hay que mirar. */
.card__info{padding:20px 24px 22px}
.card__bar{padding:0}
.card__tags{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:14px;
}
.tag{
  font-size:12px; line-height:18px;
  padding:3px 10px; border-radius:999px;
  border:1px solid var(--line); color:var(--muted);
}
.card[hidden]{display:none}

/* ---------- Filtro del catalogo ---------- */
.filtros{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 28px;
}
.filtro{
  display:inline-flex; align-items:center; gap:7px;
  font:inherit; font-size:13px; line-height:20px;
  padding:6px 14px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.filtro:hover{color:var(--fg); border-color:var(--fg)}
.filtro.is-on{
  background:var(--invert-bg); border-color:var(--invert-bg); color:var(--invert-fg);
}
.filtro__n{font-size:11px; opacity:.6; font-variant-numeric:tabular-nums}
/* Las etiquetas de un solo proyecto se despliegan a pedido */
.filtro--extra{display:none}
.filtros.muestra-todo .filtro--extra{display:inline-flex}
/* la elegida se ve siempre, aunque se cierre el desplegable */
.filtro--extra.is-on{display:inline-flex}
.filtro--mas{border-style:dashed}
.filtros.muestra-todo .filtro--mas{order:1}
.filtros__estado{
  font-size:13px; color:var(--muted);
  margin:-16px 0 24px; min-height:20px;
}

/* Boton secundario, en linea: codigo en GitHub y descargas */
.btn--linea{
  background:transparent; color:var(--fg);
  border:1px solid var(--line);
}
.btn--linea:hover{border-color:var(--fg)}
.acciones{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:28px;
}
.footer__descargas{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:28px;
}

/* ---------- Servicios ----------
   Rejilla 2x2 con celdas altas: el aire es parte del diseno. */
.services{display:grid; gap:72px 24px}
@media (min-width:820px){
  .services{grid-template-columns:1fr 1fr; gap:120px 24px}
}
.service h3{
  font-family:var(--titulos); font-weight:400;
  font-size:30px; line-height:40px; letter-spacing:-.022em;
  max-width:var(--measure-text);
  margin-bottom:16px;
}
.service p{
  font-size:16px; line-height:26px; letter-spacing:.006em;
  color:var(--fg);
  max-width:var(--measure-text);
}

/* Subtitulo bajo el nombre del curso */
.subtitulo{
  font-family:var(--titulos);
  font-size:clamp(20px,2.4vw,28px); line-height:1.3;
  letter-spacing:-.02em; color:var(--muted);
  max-width:var(--measure-head); margin-top:12px;
}

/* ---------- Recuadros destacados ----------
   Autoria del curso, el robot educativo, etc. */
.notas{display:grid; gap:16px; margin:64px 0 0}
@media (min-width:820px){ .notas{grid-template-columns:1fr 1fr} }
.nota{
  background:var(--card); border-radius:16px;
  padding:28px 30px 30px;
}
.nota h3{
  font-family:var(--titulos); font-weight:400;
  font-size:22px; line-height:30px; letter-spacing:-.02em;
  margin-bottom:10px;
}
.nota p{
  font-size:15px; line-height:25px; color:var(--fg);
  max-width:46ch;
}

/* ---------- Temario de un curso ----------
   Una clase por fila, con el numero en una columna fija a la izquierda. */
.temario{border-top:1px solid var(--line); counter-reset:clase}
.temario li{
  display:grid; gap:4px 24px;
  padding:20px 0; border-bottom:1px solid var(--line);
}
@media (min-width:820px){ .temario li{grid-template-columns:56px minmax(0,1fr)} }
.temario__n{
  font-size:12px; letter-spacing:.1em; color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.temario__t{font-size:16px; line-height:26px; max-width:62ch}
.temario__d{
  display:block; margin-top:4px;
  font-size:15px; line-height:24px; color:var(--fg);
}

/* ---------- Galeria de un curso ---------- */
.galeria{display:grid; gap:24px}
@media (min-width:820px){ .galeria{grid-template-columns:1fr 1fr; gap:32px 24px} }
.galeria figure{margin:0}
.galeria img, .galeria svg, .galeria video{
  width:100%; border-radius:16px; display:block;
  aspect-ratio:4/3; object-fit:cover; background:var(--card);
}
/* Contenedor de proporcion 16:9 para los videos incrustados */
.video{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:16px; overflow:hidden; background:var(--card);
}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* Subtitulo dentro de una pagina (Trayectoria, Instituciones) */
.subhead{
  font-family:var(--titulos); font-weight:400;
  font-size:30px; line-height:40px; letter-spacing:-.022em;
  margin:96px 0 24px;
}

/* ---------- Trayectoria ---------- */
.rows{border-top:1px solid var(--line)}
.row{
  display:grid; gap:4px 32px;
  padding:22px 0; border-bottom:1px solid var(--line);
  font-size:15px;
}
@media (min-width:820px){ .row{grid-template-columns:170px minmax(0,1fr) minmax(0,1fr); align-items:baseline} }
.row .yr{color:var(--faint); font-size:13px; letter-spacing:.04em}
.row .org{color:var(--muted)}

.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{
  font-size:13px; color:var(--muted);
  border:1px solid var(--line); border-radius:999px;
  padding:8px 16px;
}

/* ---------- Prosa (historia / caso) ---------- */
.prose{max-width:62ch}

/* Retrato y bio de la pagina Historia */
/* El titular y el texto quedaban pegados: la seccion entra con
   padding-top:0 y .case-head no trae nada abajo. El aire se pone aca
   para no mover las fichas de proyecto, que ya lo resuelven solas. */
.bio{display:grid; gap:32px; margin-top:clamp(48px, 7vw, 96px)}
.retrato{order:-1; margin:0; max-width:300px}  /* en movil el retrato va primero */
.retrato img{
  display:block; width:100%; height:auto;
  aspect-ratio:1/1; object-fit:cover; object-position:center 22%;
  border-radius:2px; background:var(--card);
}
@media (min-width:820px){
  .bio{grid-template-columns:minmax(0,1fr) 300px; gap:56px; align-items:start}
  .retrato{order:0; max-width:300px; position:sticky; top:96px}
}
.prose h2{
  font-family:var(--titulos); font-weight:400;
  font-size:30px; line-height:40px; letter-spacing:-.022em;
  margin:72px 0 16px;
}
.prose p{
  font-family:var(--titulos);
  font-size:20px; line-height:1.6; color:var(--fg);
  margin-bottom:20px;
}
.prose li{
  font-size:16px; line-height:26px; color:var(--fg);
  padding:14px 0; border-bottom:1px solid var(--line);
}
.quote{
  font-family:var(--titulos); font-size:30px; line-height:40px;
  letter-spacing:-.022em; color:var(--fg);
  border-left:2px solid var(--fg); padding-left:28px;
  margin:72px 0; max-width:34ch;
}
figure{margin:72px 0}
figure img, figure svg{border-radius:16px; width:100%}
figcaption{font-size:13px; color:var(--fg); margin-top:12px}

/* ---------- Encabezado de caso ---------- */
.case-head{padding:var(--air-hero) 0 0}
.case-head h1{
  font-family:var(--titulos); font-weight:400;
  font-size:clamp(34px,5vw,64px); line-height:1.08; letter-spacing:-.032em;
  max-width:var(--measure-head);
}
.case-head .lead{
  font-family:var(--titulos); font-size:20px; line-height:1.45;
  color:var(--fg); max-width:52ch; margin-top:24px;
}
.case-facts{
  display:flex; flex-wrap:wrap; gap:40px;
  margin-top:56px; padding-top:24px; border-top:1px solid var(--line);
  font-size:14px;
}
.case-facts div span{
  display:block; color:var(--faint); font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px;
}

.back{
  display:inline-block; font-size:13px; color:var(--muted);
  margin-bottom:32px; transition:color .2s var(--ease);
}
.back:hover{color:var(--fg)}

/* Siguiente proyecto */
.next{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; margin-top:var(--air-section);
  padding:40px 0; border-top:1px solid var(--line);
}
.next strong{
  font-family:var(--titulos); font-weight:400;
  font-size:30px; line-height:40px; letter-spacing:-.022em;
}

/* ---------- Pie ---------- */
.footer{padding:var(--air-section) 0 40px}
.footer h2{
  font-family:var(--titulos); font-weight:400;
  font-size:clamp(30px,4.4vw,54px); letter-spacing:-.03em; line-height:1.1;
  margin-top:24px;
}
.footer h2 a{border-bottom:1px solid var(--line)}
.footer h2 a:hover{border-bottom-color:var(--fg)}
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:16px 32px;
  justify-content:space-between; align-items:center;
  margin-top:96px; padding-top:24px;
  border-top:1px solid var(--line);
  font-size:13px; color:var(--muted);
}
.footer__social{display:flex; flex-wrap:wrap; gap:24px}
.footer__social a{transition:color .2s var(--ease)}
.footer__social a:hover{color:var(--fg)}

/* ---------- Animacion de entrada ---------- */
/* Solo se ocultan si JS esta corriendo: sin JS el contenido se ve igual. */
.js .rise{opacity:0; transform:translateY(14px)}
.rise.in{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease)}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  /* misma especificidad que .js .rise para poder anularla */
  .js .rise{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ----------
   El aire se reduce proporcionalmente, pero se mantiene generoso. */
@media (max-width:1023px){
  :root{--air-hero:200px; --air-section:128px}
}
@media (max-width:819px){
  :root{--air-hero:148px; --air-section:96px; --pad:20px}
  .nav__name{font-size:12px}
  /* en movil queda solo el nombre de pila: hay cinco destinos que ubicar */
  .nav__name-resto, .nav__name-rol{display:none}
  .nav__links{gap:13px; font-size:12px}
  .nav__links a[data-solo-desktop]{display:none}
  /* el boton de tema pasa a icono para que la barra quepa en una linea */
  .theme-btn__txt{display:none}
  .theme-btn__ico{display:block}
  .section-head{margin-bottom:40px}
  .footer__bottom{margin-top:64px}
}