/* ── home.css — la home, compartida por ES y EN ──
   Antes vivía duplicada en un <style> dentro de cada index.html. */

/* ── hero ─────────────────────────────────────────────
   Dos columnas desde 900px: el texto a la izquierda y la retícula de
   tokens a la derecha, a la altura del título. Así la firma del sitio se
   ve completa en cualquier laptop desde el primer segundo. Por debajo de
   900px la retícula vuelve a ser una banda bajo la lede. */
.hero{padding:calc(var(--u)*10) 0 calc(var(--u)*8)}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr)}
.hero-coord{color:var(--tinta-3);margin-bottom:calc(var(--u)*4);display:block}
h1{
  font-size:clamp(34px,5.6vw,64px);
  line-height:1.04;letter-spacing:-.035em;font-weight:700;
  max-width:19ch;text-wrap:balance;
}
h1 .alt{color:var(--tinta-3)}
.lede{
  margin-top:calc(var(--u)*4);max-width:52ch;
  font-size:18px;color:var(--tinta-2);
}
.lede b{color:var(--tinta);font-weight:600}

/* coreografía de entrada: palabra por palabra (--ed), luego los dos trazos
   del marcador (--pd), luego la retícula. Todo termina antes de los 2s.
   Todo con fill backwards: el estado base es visible, así reduced-motion o
   cualquier fallo degradan a página estática normal. */
@keyframes ent{from{opacity:0;transform:translateY(10px)}}
.hero-coord{animation:ent var(--t-entrada) var(--e-entrada) backwards}
h1 .w{display:inline-block;animation:ent var(--t-entrada) var(--e-entrada) var(--ed,0s) backwards}
.lede{animation:ent var(--t-entrada) var(--e-entrada) .5s backwards}

/* h1 .marca: misma especificidad que h1 .w y más tardío en la fuente,
   necesario para que la animación compuesta (entrada + plumón) no sea
   pisada por la regla de palabra */
h1 .marca{
  background:linear-gradient(var(--sol),var(--sol)) 0 0/100% 100% no-repeat;
  color:var(--sol-tinta);
  padding:0 .06em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  animation:
    ent var(--t-entrada) var(--e-entrada) var(--ed,0s) backwards,
    pinta var(--t-entrada) var(--e-entrada) var(--pd,0s) backwards;
}
@keyframes pinta{
  from{background-size:0 100%;color:inherit}
}

/* ── la retícula de tokens ─────────────────────────── */
.campo{margin-top:calc(var(--u)*6);--filas:8}
.tokens{
  display:grid;
  grid-template-columns:repeat(auto-fill,var(--cell));
  grid-auto-rows:var(--cell);
  height:calc(var(--cell)*var(--filas));
  overflow:hidden;
  will-change:transform; /* el snap la ancla a la grilla */
}
.tokens i{
  display:block;border-radius:0;cursor:crosshair;
  opacity:0;
  transition:transform var(--t-micro) var(--e-entrada);
}
/* revelado: cada celda nace gris, grande y tenue, y positiva su color.
   --d = retraso por ondas; backwards suelta el fill al terminar para no
   pisar el transform del hover */
.tokens i.on{
  opacity:1;
  animation:nace var(--t-entrada) var(--e-entrada) var(--d,0s) backwards;
}
@keyframes nace{
  from{opacity:0;filter:grayscale(1) brightness(1.15);transform:scale(.55)}
  to{opacity:1;filter:none;transform:scale(1)}
}
.tokens i.on:hover{transform:scale(1.3);z-index:2}
.tokens i.sem{background:var(--tinta)!important} /* token semántico: se adapta al tema */
.lector{
  margin-top:calc(var(--u)*2);color:var(--tinta-3);
  display:flex;align-items:center;gap:8px;min-height:18px;
}
.lector .chip{width:10px;height:10px;display:inline-block;background:transparent;flex:0 0 auto}
@media (hover:none){.lector{display:none}} /* sin hover no hay lector */

@media(min-width:900px){
  .hero{padding-top:calc(var(--u)*12)}
  .hero-in{grid-template-columns:minmax(0,1fr) calc(var(--cell)*14);column-gap:calc(var(--u)*4)}
  /* --filas la fija home.js según el alto del bloque de texto */
  .campo{grid-column:2;grid-row:1;margin-top:0;--filas:28}
}

/* ── secciones del índice ──────────────────────────── */
.sec{padding:calc(var(--u)*10) 0}
.sec-label{
  font-family:var(--mono);font-size:11.5px;letter-spacing:1.5px;font-weight:400;
  text-transform:uppercase;color:var(--tinta-3);
  margin-bottom:calc(var(--u)*5);
}

/* ── índice de casos: texto a la izquierda, la escena del caso a la derecha.
   La miniatura es la misma escena que abre el caso por dentro. */
.caso{
  display:grid;grid-template-columns:56px minmax(0,1fr) calc(var(--cell)*22);
  column-gap:20px;row-gap:8px;align-items:baseline;
  grid-template-rows:auto auto 1fr;
  padding:calc(var(--u)*4) 0;
  text-decoration:none;position:relative;
  border-top:1px solid var(--grid-mayor);
}
.caso:first-of-type{border-top:0}

/* el índice se lee por producto: cada grupo abre con una regla de tinta,
   su nombre y una línea que dice qué une a sus casos */
.grupo+.grupo{margin-top:calc(var(--u)*5)}
.grupo-cab{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  column-gap:calc(var(--u)*3);row-gap:4px;
  border-top:1px solid var(--tinta);padding-top:calc(var(--u)*1.5);
}
.grupo-t{
  font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--tinta);display:flex;align-items:center;gap:8px;
}
.grupo-t::before{content:"";width:6px;height:6px;background:var(--sol);flex:0 0 auto}
.grupo-d{font-size:11.5px;color:var(--tinta-3)}
.caso-n{font-family:var(--mono);font-size:18px;color:var(--tinta-3);letter-spacing:.5px}
.caso-t{
  font-size:clamp(22px,3.4vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1.12;
  transition:transform var(--t-estado) var(--e-entrada);
}
.caso-sum{grid-column:2;max-width:58ch;color:var(--tinta-2);font-size:15px}
.caso-meta{grid-column:2;color:var(--tinta-3);margin-top:2px;align-self:start}
.caso .portada{
  display:block;grid-column:3;grid-row:1/4;align-self:start;
  transition:
    opacity var(--t-entrada) var(--e-entrada),
    transform var(--t-entrada) var(--e-entrada),
    box-shadow var(--t-micro);
}
/* hover y foco: el título se corre una unidad y la miniatura se subraya
   con sol. La escena se re-dibuja (lo dispara portadas.js). */
@media(hover:hover){
  .caso:hover .caso-t{transform:translateX(var(--u))}
  .caso:hover .portada{box-shadow:0 3px 0 0 var(--sol)}
}
.caso:focus-visible .portada{box-shadow:0 3px 0 0 var(--sol)}
.candado{font-family:var(--mono);font-size:11.5px;color:var(--tinta-3);margin-top:calc(var(--u)*4)}

@media (max-width:899px){
  .caso{grid-template-columns:56px minmax(0,1fr) calc(var(--cell)*17)}
}
@media (max-width:640px){
  /* una sola columna: cada pieza declara la suya, y la escena va al final */
  .caso{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .caso-n,.caso-t,.caso-sum,.caso-meta{grid-column:1}
  .caso .portada{grid-column:1;grid-row:auto;margin-top:calc(var(--u)*2)}
  .caso-n{font-size:12.5px}
}

/* ── ahora: lo que está en curso, fechado ──────────────
   Sección densa a propósito, pegada al índice: tres líneas de estado, no
   tres tarjetas. El mes va en el rótulo para que se note cuando envejezca. */
.sec.ahora-sec{padding-top:0}
.ahora{display:grid;gap:calc(var(--u)*4)}
@media(min-width:800px){.ahora{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ahora>div{border-top:1px solid var(--borde);padding-top:calc(var(--u)*2)}
.ahora-k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--tinta-3);display:flex;align-items:center;gap:8px;
}
.ahora-k::before{content:"";width:6px;height:6px;background:var(--sol);flex:0 0 auto}
.ahora-t{font-size:18px;font-weight:600;letter-spacing:-.4px;line-height:1.25;margin-top:calc(var(--u)*1.5)}
.ahora-b{font-size:15px;color:var(--tinta-2);margin-top:var(--u)}

/* ── método: 4 pasos, cada uno con su artefacto ──────── */
.plano{
  background:var(--papel-2);border:1px solid var(--borde);
  padding:calc(var(--u)*5);
  display:grid;gap:calc(var(--u)*5) calc(var(--u)*6);
}
@media(min-width:720px){.plano{grid-template-columns:1fr 1fr}}
.paso-n{
  font-family:var(--mono);font-size:11.5px;color:var(--tinta-3);
  display:inline-block;position:relative;z-index:1;
  background:var(--papel-2);padding:2px 6px;margin:-2px 0 6px -6px;
  transition:background var(--t-micro),color var(--t-micro);
}
.paso-n.is-sel{background:var(--sol);color:var(--sol-tinta)}
@media(hover:hover){.plano>div:hover .paso-n{background:var(--sol);color:var(--sol-tinta)}}
.paso-t{font-size:18px;font-weight:600;letter-spacing:-.4px;margin-bottom:8px}
.paso-b{font-size:15px;color:var(--tinta-2)}

/* artefactos por paso: la pieza de cada etapa, dibujada en papel/tinta/sol.
   Estado base = construido; .is-act (la ola, o hover) la re-dibuja desde
   cero. reduced-motion mata las animaciones y queda el estado final. */
.paso-fig{
  width:292px;max-width:100%;height:104px;border:1px solid var(--grid-mayor);background:var(--papel);
  padding:12px;margin-bottom:12px;display:flex;flex-direction:column;
  justify-content:center;gap:8px;overflow:hidden;
}
/* 01: el requerimiento, tachado y reescrito */
.pf1-mal{font-family:var(--mono);font-size:10.5px;color:var(--tinta-3);position:relative;align-self:flex-start}
.pf1-mal::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:1.5px;background:var(--tinta-2);transform-origin:left center}
.pf1-bien{font-size:13.5px;font-weight:600;letter-spacing:-.2px;color:var(--tinta);align-self:flex-start;border-bottom:2px solid var(--sol);padding-bottom:2px}
.is-act .pf1-mal::after{animation:pfTacha var(--t-estado) var(--e-entrada) .05s backwards}
.is-act .pf1-bien{animation:pfSube var(--t-estado) var(--e-entrada) .25s backwards}
@keyframes pfTacha{from{transform:scaleX(0)}}
@keyframes pfSube{from{opacity:0;transform:translateY(5px)}}
/* 02: la matriz de reglas, perfil × capacidad */
.pf2{display:grid;grid-template-columns:auto repeat(3,56px);gap:7px 10px;align-items:center;justify-items:center;justify-content:flex-start}
.pf2 .cl,.pf2 b{font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--tinta-3);letter-spacing:.2px}
.pf2 b{justify-self:start}
.pf2 i{width:12px;height:12px;display:block}
.pf2 i.si{background:var(--tinta)}
.pf2 i.sol{background:var(--sol)}
.pf2 i.no{border:1px solid var(--grid-mayor)}
.is-act .pf2 i{animation:pfSello var(--t-estado) var(--e-entrada) backwards}
.is-act .pf2 i:nth-of-type(1){animation-delay:.05s}
.is-act .pf2 i:nth-of-type(2){animation-delay:.1s}
.is-act .pf2 i:nth-of-type(3){animation-delay:.15s}
.is-act .pf2 i:nth-of-type(4){animation-delay:.2s}
.is-act .pf2 i:nth-of-type(5){animation-delay:.25s}
.is-act .pf2 i:nth-of-type(6){animation-delay:.3s}
@keyframes pfSello{from{opacity:0;transform:scale(.4)}}
/* 03: el prototipo, código a la izquierda y UI viva a la derecha */
.pf3{padding:0;justify-content:flex-start;gap:0}
.pf3-bar{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--grid-mayor)}
.pf3-bar i{width:6px;height:6px;border-radius:50%;background:var(--grid-mayor)}
.pf3-body{display:grid;grid-template-columns:140px 118px;gap:12px;padding:12px 10px;flex:1;align-items:center;justify-content:flex-start}
.pf3-code{display:flex;flex-direction:column;gap:6px}
.pf3-code i{height:5px;width:var(--w);background:color-mix(in srgb,var(--tinta) 22%,transparent)}
.pf3-code i.sol{background:var(--sol)}
.pf3-ui{border:1px solid var(--grid-mayor);padding:8px;display:flex;flex-direction:column;gap:6px;justify-content:center;align-self:stretch}
.pf3-ui .blk{height:5px;width:80%;background:color-mix(in srgb,var(--tinta) 14%,transparent)}
.pf3-ui .btn{width:34px;height:12px;background:var(--sol)}
.is-act .pf3-code i{transform-origin:left center;animation:pfCrece var(--t-estado) var(--e-entrada) backwards}
.is-act .pf3-code i:nth-of-type(2){animation-delay:.08s}
.is-act .pf3-code i:nth-of-type(3){animation-delay:.16s}
.is-act .pf3-code i:nth-of-type(4){animation-delay:.24s}
.is-act .pf3-ui .btn{animation:pfSello var(--t-estado) var(--e-entrada) .35s backwards}
@keyframes pfCrece{from{transform:scaleX(0)}}
/* 04: el handoff, decisiones con veredicto, incluida la descartada */
.pf4{gap:11px}
.pf4-row{display:flex;align-items:center;gap:8px;width:250px;max-width:100%}
.pf4-row .b{width:6px;height:6px;background:var(--sol);flex:0 0 auto}
.pf4-row .ln{height:5px;width:var(--w);background:color-mix(in srgb,var(--tinta) 22%,transparent);position:relative}
.pf4-row .vk{font-family:var(--mono);font-size:10.5px;color:var(--tinta-2);margin-left:auto}
.pf4-row.des .ln{background:color-mix(in srgb,var(--tinta) 12%,transparent)}
.pf4-row.des .b{background:var(--grid-mayor)}
.pf4-row.des .vk{color:var(--tinta-3)}
.pf4-row.des .ln::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:1.5px;background:var(--tinta-2)}
.is-act .pf4-row{animation:pfSube var(--t-estado) var(--e-entrada) backwards}
.is-act .pf4-row:nth-of-type(2){animation-delay:.12s}
.is-act .pf4-row:nth-of-type(3){animation-delay:.24s}

/* ── contacto ──────────────────────────────────────── */
.contacto h2{font-size:clamp(30px,5vw,48px);letter-spacing:-.035em;font-weight:700;line-height:1.05}
.contacto p{margin-top:calc(var(--u)*2);color:var(--tinta-2);max-width:50ch}
.mail{
  display:inline-block;margin-top:calc(var(--u)*4);
  font-family:var(--mono);font-size:clamp(15px,2.6vw,20px);
  color:var(--tinta);text-decoration:none;
  border-bottom:2px solid var(--tinta);padding-bottom:3px;
  transition:background var(--t-micro),color var(--t-micro);
}
.mail:hover{background:var(--sol);color:var(--sol-tinta);border-color:var(--sol-tinta)}
.redes{margin-top:calc(var(--u)*2);display:flex;gap:16px}
.redes a{
  font-family:var(--mono);font-size:12.5px;color:var(--tinta-2);text-decoration:none;
  padding:14px 0;transition:color var(--t-micro); /* 44px de alto táctil */
}
.redes a:hover{color:var(--tinta)}
.antes{margin-top:calc(var(--u)*5);color:var(--tinta-3)}
.antes+.antes{margin-top:calc(var(--u)*2)}

@media (max-width:640px){
  .plano{padding:calc(var(--u)*3)}
}