/* ============================================================
   Joksan Cruz — sistema de diseño
   Paleta, escala tipográfica y componentes compartidos.
   ============================================================ */

:root{
  /* color */
  --void:#0B0F0D;
  --surface:#121815;
  --surface-2:#182019;
  --line:#242E28;
  --line-hi:#36443C;
  --bone:#EDEFEA;
  --dim:#8A968F;
  --synth:#8FA8FF;   /* lo sintético: IA, simulación, research */
  --human:#F2A93B;   /* lo humano y el negocio: resultados, cifras */

  /* medidas */
  --g:clamp(1.25rem,4.5vw,4rem);
  --maxw:88rem;
}

/* ── TIPOGRAFÍA ───────────────────────────────────────────────
   Fjalla One para display, Mulish para lectura.
   --dsc compensa que Fjalla es condensada: necesita más puntos
   para pesar lo mismo en pantalla que una grotesca normal.
   ──────────────────────────────────────────────────────────── */
:root{
  --fd:"Fjalla One", Impact, sans-serif;   /* display */
  --fb:"Mulish", system-ui, sans-serif;    /* cuerpo  */
  --dw:400;      /* Fjalla tiene un solo peso */
  --dls:-.006em; /* tracking del display */
  --dlh:1;       /* interlineado del display */
  --dsc:1.07;    /* multiplicador de tamaño */
  --fbw:400;     /* peso del cuerpo */
  --lblw:700;    /* peso de las etiquetas */

  /* Escala de texto pequeño. Antes había diecisiete valores sueltos entre
     .72 y 1.1rem, que es lo que hace que una interfaz se vea despareja. */
  --t-2xs:.72rem;   /* etiquetas en mayúsculas */
  --t-xs:.8rem;     /* pies de figura, notas al margen */
  --t-s:.88rem;     /* texto secundario */
  --t-m:.95rem;     /* cuerpo de tarjeta */
  --t-l:1.05rem;    /* destacado dentro de bloque */
}

/* ── base ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--bone);
  font-family:var(--fb);font-weight:var(--fbw);
  font-size:clamp(1rem,.4vw + .92rem,1.0625rem);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--synth);outline-offset:3px}
.w{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--g)}
.skip{position:absolute;left:-9999px;background:var(--bone);color:var(--void);padding:.7rem 1rem;z-index:99}
.skip:focus{left:0}

/* ── tipografía display ───────────────────────────────────── */
.d{font-family:var(--fd);font-weight:var(--dw);letter-spacing:var(--dls);
   line-height:var(--dlh);margin:0}
.d--xl{font-size:calc(clamp(2.6rem,8.2vw,7.5rem) * var(--dsc))}
.d--l {font-size:calc(clamp(2rem,5.2vw,4rem)   * var(--dsc))}
.d--m {font-size:calc(clamp(1.5rem,3.2vw,2.5rem) * var(--dsc))}
.d--s {font-size:calc(clamp(1.15rem,1.9vw,1.5rem) * var(--dsc))}
.lbl{font-family:var(--fb);font-weight:var(--lblw);font-size:var(--t-2xs);letter-spacing:.16em;
     text-transform:uppercase;color:var(--dim);margin:0}

/* ── topbar ───────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:50;background:rgba(11,15,13,.88);
     backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.95rem}
.top__nav{display:flex;gap:1.6rem;font-size:var(--t-m);font-weight:500}
.top__nav a{text-decoration:none;color:var(--dim);transition:color .15s}
.top__nav a:hover,.top__nav a[aria-current="page"]{color:var(--bone)}
/* El botón de contacto usa el ámbar del sistema, el mismo del correo y de
   las cifras de negocio: es la acción comercial de la barra. */
.top__cta{font-size:var(--t-s);font-weight:700;text-decoration:none;padding:.55rem 1.1rem;
          border:1px solid var(--human);color:var(--human);white-space:nowrap;
          transition:background .18s,color .18s,border-color .18s}
.top__cta:hover,.top__cta:focus-visible{background:var(--human);color:var(--void)}

/* ── hero ─────────────────────────────────────────────────── */
.hero{position:relative;min-height:min(92vh,54rem);display:flex;align-items:flex-end;overflow:hidden}
.hero__photo{position:absolute;inset:0 0 0 38%;background-size:cover;background-position:52% 16%;
             filter:grayscale(1) contrast(1.08) brightness(.82)}
.hero__photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--void) 4%,rgba(11,15,13,.72) 34%,rgba(11,15,13,.1) 78%)}
.hero__in{position:relative;width:100%;padding-block:clamp(6rem,14vw,9rem) clamp(2rem,4vw,3rem)}
.hero h1{max-width:15ch}
.hero__sub{margin:1.6rem 0 0;max-width:44ch;color:#C4CCC6;font-size:clamp(1rem,1.1vw,1.15rem)}
.hero__meta{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center}
.hero__scroll{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-size:var(--t-s);
  color:var(--dim);border-bottom:1px solid var(--line-hi);padding-bottom:.3rem}
.hero__scroll:hover{color:var(--bone);border-bottom-color:var(--bone)}

/* hero corto para páginas internas */
.phero{border-bottom:1px solid var(--line);padding-block:clamp(4rem,10vw,7.5rem) clamp(2.5rem,5vw,4rem)}
.phero h1{max-width:18ch;margin-top:1rem}
.phero__sub{margin:1.5rem 0 0;max-width:56ch;color:#B4BDB7;font-size:clamp(1rem,1.15vw,1.15rem)}

/* ── disciplinas ──────────────────────────────────────────── */
.disc{border-block:1px solid var(--line)}
.disc__in{display:grid;grid-template-columns:repeat(4,1fr);align-items:center}
.disc__i{padding:clamp(1.5rem,3vw,2.5rem) 0}
.disc__i + .disc__i{border-left:1px solid var(--line);padding-left:clamp(1rem,2.5vw,2rem)}
.disc__k{font-family:var(--fd);font-weight:var(--dw);letter-spacing:calc(var(--dls) - .008em);
         font-size:calc(clamp(1.8rem,4vw,3.4rem) * var(--dsc));line-height:1;color:var(--synth)}
.disc__t{margin-top:.5rem;font-size:var(--t-s);color:var(--dim);line-height:1.3;font-weight:500}

/* ── manifiesto ───────────────────────────────────────────── */
.mani{padding-block:clamp(4rem,10vw,8rem)}
.mani__big{max-width:26ch}
.mani__big em{font-style:normal;color:var(--dim)}
.mani__note{margin-top:2.5rem;max-width:58ch;color:#B4BDB7;font-size:clamp(1rem,1.1vw,1.1rem)}

/* ── tira de contextos ────────────────────────────────────── */
.trust{border-block:1px solid var(--line);padding-block:1.6rem;overflow:hidden}
.trust__row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.5rem,3.5vw,3rem);
  font-family:var(--fd);font-weight:var(--dw);letter-spacing:var(--dls);
  font-size:calc(clamp(1rem,1.6vw,1.35rem) * var(--dsc));color:var(--dim)}
.trust__t{transition:color .2s}
.trust__i:hover .trust__t,.trust:hover .trust__t{color:var(--bone)}

/* ── secciones ────────────────────────────────────────────── */
.sec{padding-block:clamp(4rem,9vw,7rem)}
.sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
           flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3rem)}
.sec__head p.note{margin:.6rem 0 0;max-width:34ch;color:var(--dim);font-size:var(--t-m)}

/* ── caso destacado ───────────────────────────────────────── */
.feat{display:block;text-decoration:none;position:relative;background:var(--surface)}
.feat__img{position:relative;aspect-ratio:16/8;overflow:hidden;background:var(--surface-2)}
.feat__img img{width:100%;height:100%;object-fit:cover;object-position:top center;
               transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.feat:hover .feat__img img{transform:scale(1.025)}
.feat__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,15,13,.93) 6%,rgba(11,15,13,.28) 45%,transparent 75%)}
.feat__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.5rem,3.5vw,3rem);
            display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.feat__t{max-width:20ch;margin-top:.6rem}
.feat__d{margin:.75rem 0 0;max-width:46ch;color:#C4CCC6;font-size:var(--t-m)}
.feat__r{text-align:right;flex-shrink:0}
.feat__r b{display:block;font-family:var(--fd);font-weight:var(--dw);
  letter-spacing:calc(var(--dls) - .01em);font-size:calc(clamp(2.4rem,5.5vw,4.2rem) * var(--dsc));
  line-height:.9;color:var(--human)}
.feat__r span{display:block;margin-top:.5rem;font-size:var(--t-xs);color:var(--dim);max-width:20ch;margin-left:auto}

/* ── grid de tiles ────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:1px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.tile{position:relative;text-decoration:none;background:var(--surface);
      padding:clamp(1.5rem,3vw,2.25rem);min-height:19rem;overflow:hidden;
      display:flex;flex-direction:column;justify-content:space-between;transition:background .2s}
.tile:hover{background:var(--surface-2)}
.tile__t{position:relative;margin:.9rem 0 0;max-width:15ch}
.tile__d{position:relative;margin:.7rem 0 0;color:var(--dim);font-size:var(--t-m);max-width:32ch}
.tile__r{position:relative;margin-top:1rem;color:var(--human);font-weight:600;font-size:var(--t-m)}

/* ── bloque de superficie ─────────────────────────────────── */
.slab{background:var(--surface);border-block:1px solid var(--line)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
       gap:clamp(2rem,5vw,4.5rem);align-items:start}
.split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.copy p{color:#B4BDB7;max-width:48ch}
.copy p:first-of-type{margin-top:1.5rem}
.link{display:inline-block;margin-top:1.5rem;color:var(--synth);font-size:var(--t-m);
      text-underline-offset:4px;text-decoration-thickness:1px}
.link:hover{color:var(--bone)}

/* ── simulador ────────────────────────────────────────────── */
.sim{border:1px solid var(--line-hi);background:var(--void)}
.sim__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
          padding:.85rem 1.1rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.sim__btn{font-family:var(--fb);font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;background:var(--synth);color:var(--void);border:0;
  padding:.55rem 1.1rem;cursor:pointer;transition:filter .15s}
.sim__btn:hover{filter:brightness(1.12)}
.sim__btn[disabled]{background:var(--line-hi);color:var(--dim);cursor:default;filter:none}
.sim__cells{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;padding:1.1rem}
.cell{aspect-ratio:1;background:var(--line);border-radius:1px}
.cell.on{background:var(--synth)}
.cell.hit{background:var(--human)}
.sim__read{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.sim__read > div{padding:.9rem 1.1rem}
.sim__read > div + div{border-left:1px solid var(--line)}
.sim__n{font-family:var(--fd);font-weight:var(--dw);font-size:calc(clamp(1.2rem,2.4vw,1.8rem) * var(--dsc));
        letter-spacing:var(--dls);line-height:1}
.sim__n--s{color:var(--synth)} .sim__n--h{color:var(--human)}
.sim__cap{margin:.4rem 0 0;font-size:var(--t-2xs);color:var(--dim);line-height:1.3}
.sim__foot{padding:.8rem 1.1rem;border-top:1px solid var(--line);font-size:var(--t-xs);color:var(--dim)}

/* ── cifras ───────────────────────────────────────────────── */
.impact{border-bottom:1px solid var(--line)}
.impact__in{display:grid;grid-template-columns:repeat(3,1fr)}
.impact__i{padding:clamp(2.25rem,5vw,4rem) 0}
.impact__i + .impact__i{border-left:1px solid var(--line);padding-left:clamp(1.25rem,3vw,2.5rem)}
.impact__n{font-family:var(--fd);font-weight:var(--dw);letter-spacing:calc(var(--dls) - .01em);
  line-height:.9;font-size:calc(clamp(2.4rem,7vw,5.5rem) * var(--dsc));color:var(--human)}
.impact__t{margin-top:1rem;max-width:26ch;font-size:var(--t-m);color:#B4BDB7}
.impact__t span{display:block;margin-top:.45rem;font-size:var(--t-xs);color:var(--dim)}

/* ── ideas ────────────────────────────────────────────────── */
.ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.idea{background:var(--void);padding:clamp(1.5rem,3vw,2.25rem);text-decoration:none;
      display:flex;flex-direction:column;gap:.7rem;transition:background .2s}
.idea:hover{background:var(--surface)}
.idea h3{margin:0}
.idea p{margin:0;color:var(--dim);font-size:var(--t-m)}
.idea__go{margin-top:auto;padding-top:.9rem;font-size:var(--t-xs);color:var(--synth);
          letter-spacing:.1em;text-transform:uppercase;font-weight:700}

/* ── filtros ──────────────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.filters button{font-family:var(--fb);font-size:var(--t-xs);font-weight:600;color:var(--dim);
  background:transparent;border:1px solid var(--line);padding:.45rem 1rem;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s}
.filters button:hover{color:var(--bone);border-color:var(--line-hi)}
.filters button[aria-pressed="true"]{color:var(--void);background:var(--bone);border-color:var(--bone)}

/* ── caso de estudio ──────────────────────────────────────── */
.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;border-block:1px solid var(--line);
      padding-block:1.75rem}
.meta h3{margin:0 0 .4rem;font-size:var(--t-2xs);letter-spacing:.14em;text-transform:uppercase;
         color:var(--dim);font-weight:700}
.meta p{margin:0;font-size:var(--t-m)}
/* Contenedor de lectura. Los casos usan .w.w--read en vez de .w:
   62rem centrados en vez de 88rem, para que el contenido no quede
   colgado del borde izquierdo con medio ancho vacío a la derecha. */
.w--read{max-width:62rem}

/* La prosa es una rejilla de tres carriles: el texto va en el central,
   con medida cómoda, y los diagramas y figuras se salen a los laterales. */
.prose{
  max-width:none;
  display:grid;
  grid-template-columns:
    [wide-start] minmax(0,1fr)
    [text-start] min(41rem,100%) [text-end]
    minmax(0,1fr) [wide-end];
}
.prose > *{grid-column:text}
.prose > .dia,.prose > .figs,.prose > .vs,.prose > .stats,.prose > .labcase{grid-column:wide}
.prose h2{margin:3.5rem 0 1rem}
.prose h3{margin:2.25rem 0 .5rem;font-size:var(--t-l);font-weight:700}
.prose p{color:#C4CCC6}
.prose ul{margin:1rem 0;padding-left:1.1rem;color:#C4CCC6}
.prose li{margin-bottom:.6rem}
.prose li::marker{color:var(--synth)}
.pull{border-left:2px solid var(--human);padding:.25rem 0 .25rem 1.25rem;margin:2.5rem 0;
      color:var(--bone);font-size:1.1rem}
.figs{display:grid;gap:1px;background:var(--line);margin:2.5rem 0}
.w--read > .figs,.w--read > .results,.w--read > .meta{margin-inline:0}
.figs--2{grid-template-columns:repeat(2,1fr)}
.figs figure{margin:0;background:var(--surface);padding:1rem}
.figs img{width:100%;background:var(--surface-2)}
.figs figcaption{margin-top:.75rem;font-size:var(--t-xs);color:var(--dim)}
.results{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:1rem}
.results > div{background:var(--surface);padding:clamp(1.5rem,3vw,2.25rem)}
.results b{display:block;font-family:var(--fd);font-weight:var(--dw);color:var(--human);
  font-size:calc(clamp(2rem,4.5vw,3.4rem) * var(--dsc));line-height:.9;letter-spacing:var(--dls)}
.results span{display:block;margin-top:.6rem;color:#B4BDB7;font-size:var(--t-m)}

/* navegación entre casos */
.casenav{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
         border-top:1px solid var(--line)}
.casenav a{background:var(--void);padding:clamp(1.5rem,3vw,2.5rem);text-decoration:none;
           transition:background .2s}
.casenav a:hover{background:var(--surface)}
.casenav a:last-child{text-align:right}

/* ── formulario ───────────────────────────────────────────── */
.form{display:grid;gap:1.25rem;max-width:34rem}
.field label{display:block;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
             color:var(--dim);font-weight:700;margin-bottom:.5rem}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--fb);font-size:var(--t-l);color:var(--bone);background:var(--surface);
  border:1px solid var(--line-hi);padding:.8rem .9rem;transition:border-color .15s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--synth);outline:none}
.field textarea{min-height:9rem;resize:vertical}
.btn{display:inline-block;font-family:var(--fb);font-weight:700;font-size:var(--t-m);
     letter-spacing:.04em;text-transform:uppercase;background:var(--human);color:var(--void);
     border:0;padding:.85rem 1.6rem;cursor:pointer;text-decoration:none;transition:filter .15s}
.btn:hover{filter:brightness(1.1)}
.btn--ghost{background:transparent;color:var(--bone);border:1px solid var(--line-hi)}
.btn--ghost:hover{background:var(--bone);color:var(--void);filter:none}

/* ── contacto / cierre ────────────────────────────────────── */
.cta{border-top:1px solid var(--line);padding-block:clamp(4rem,9vw,7rem)}
.cta__mail{display:inline-block;margin-top:1.5rem;text-decoration:none;color:var(--human);
  font-family:var(--fd);font-weight:var(--dw);letter-spacing:var(--dls);
  font-size:calc(clamp(1.3rem,4.4vw,3rem) * var(--dsc));line-height:1;word-break:break-word;
  border-bottom:2px solid transparent;transition:border-color .18s}
.cta__mail:hover{border-bottom-color:var(--human)}
.cta__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem;
           margin-top:clamp(2.5rem,5vw,4rem);padding-top:2rem;border-top:1px solid var(--line)}
.cta__cols h3{margin:0 0 .5rem;font-size:var(--t-2xs);letter-spacing:.14em;text-transform:uppercase;
              color:var(--dim);font-weight:700}
.cta__cols a,.cta__cols p{margin:0;font-size:var(--t-m);color:var(--bone);text-decoration:none;display:block}
.cta__cols a:hover{color:var(--synth)}
.foot{border-top:1px solid var(--line);padding-block:1.5rem 2.5rem;display:flex;
      justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:var(--t-xs);color:var(--dim)}

/* ── motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(16px);animation:rise .8s cubic-bezier(.2,.7,.3,1) forwards}
  .rise:nth-child(1){animation-delay:.08s}
  .rise:nth-child(2){animation-delay:.2s}
  .rise:nth-child(3){animation-delay:.32s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ── responsive ───────────────────────────────────────────── */
@media(max-width:66rem){
  .split,.split--even,.grid,.grid--2,.ideas,.results{grid-template-columns:1fr}
  .tile{min-height:14rem}
  .cta__cols,.meta{grid-template-columns:repeat(2,1fr)}
  .figs--2{grid-template-columns:1fr}
}
@media(max-width:52rem){
  .hero{min-height:0}
  .hero__photo{inset:0;background-position:52% 14%}
  .hero__photo::after{background:linear-gradient(to top,var(--void) 22%,rgba(11,15,13,.55) 62%,rgba(11,15,13,.35) 100%)}
  .hero__in{padding-block:clamp(9rem,34vw,14rem) 2.25rem}
  .disc__in{grid-template-columns:repeat(2,1fr)}
  .disc__i:nth-child(3),.disc__i:nth-child(4){border-top:1px solid var(--line)}
  .disc__i:nth-child(3){border-left:0;padding-left:0}
  .impact__in{grid-template-columns:1fr}
  .impact__i + .impact__i{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .feat__body{flex-direction:column;align-items:flex-start}
  .feat__r{text-align:left} .feat__r span{margin-left:0}
  .sim__cells{grid-template-columns:repeat(16,1fr)}
  .sim__read{grid-template-columns:1fr}
  .sim__read > div + div{border-left:0;border-top:1px solid var(--line)}
  .casenav{grid-template-columns:1fr}
  .casenav a:last-child{text-align:left}
}

/* ── trayectoria y educación ──────────────────────────────── */
.cv{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cv li{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:1.5rem;
       padding-block:1.35rem;border-bottom:1px solid var(--line)}
.cv__y{font-family:var(--fd);font-weight:var(--dw);letter-spacing:var(--dls);
       font-size:calc(1rem * var(--dsc));color:var(--synth);padding-top:.15rem;
       font-variant-numeric:tabular-nums}
.cv h3{margin:0;font-size:var(--t-l);font-weight:700;line-height:1.3}
.cv p{margin:.35rem 0 0;color:var(--dim);font-size:var(--t-m);max-width:56ch}

/* ── etiquetas de herramientas ────────────────────────────── */
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.tags span{font-size:var(--t-s);color:#B4BDB7;border:1px solid var(--line);padding:.35rem .8rem}

/* ── tarjetas de video ────────────────────────────────────── */
.ideas--4{grid-template-columns:repeat(4,1fr)}
.idea img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--surface-2)}

@media(max-width:66rem){ .ideas--4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:52rem){
  .ideas--4{grid-template-columns:1fr}
  .cv li{grid-template-columns:1fr;gap:.35rem}
  .cv__y{padding-top:0}
}


/* ── ICONOGRAFÍA ──────────────────────────────────────────────
   Sprite SVG inline. El trazo hereda currentColor, así que un
   icono sirve en fondo claro y oscuro sin duplicar archivo.
   ─────────────────────────────────────────────────────────── */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1.4em;height:1.4em;flex-shrink:0;vertical-align:-.3em}
.ico--lg{width:2rem;height:2rem}

.tile__ico{display:block;color:var(--synth);width:1.9rem;height:1.9rem;margin-bottom:.9rem}
.disc__i .ico{display:block;width:1.6rem;height:1.6rem;color:var(--synth);margin-bottom:.9rem}

.iconlist{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1.1rem}
.iconlist li{display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.9rem;align-items:start}
.iconlist .ico{width:1.4rem;height:1.4rem;color:var(--synth);margin-top:.15rem}
.iconlist strong{display:block;font-weight:700;margin-bottom:.15rem}
.iconlist span{color:var(--dim);font-size:var(--t-m)}

/* ── DIAGRAMAS ────────────────────────────────────────────────
   Cada infográfico es un <figure class="dia"> con SVG responsivo.
   Los textos usan clases para no repetir atributos en cada nodo;
   sin estas reglas el texto SVG sale en negro y desaparece.
   ─────────────────────────────────────────────────────────── */
.dia{margin:2.5rem 0;background:var(--surface);border:1px solid var(--line);
     padding:clamp(1.1rem,2.6vw,1.9rem)}
.dia > svg{width:100%;height:auto;display:block}
.dia figcaption{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line);
                font-size:var(--t-s);color:var(--dim);line-height:1.45}
.dia--plain{background:transparent;border:0;padding:0}
.dia text,.cover text{font-family:var(--fb)}
.dia .dia-lbl{font-size:10px;letter-spacing:.13em;font-weight:700;fill:var(--dim)}
.dia .dia-t{font-size:13px;font-weight:700;fill:var(--bone)}
.dia .dia-sm{font-size:12px;fill:var(--dim)}
.dia .dia-in{font-size:13px;font-weight:700;fill:var(--void)}
.dia .dia-big{font-family:var(--fd);font-weight:var(--dw);font-size:26px;
              letter-spacing:var(--dls);fill:var(--bone)}

/* ── MARCA ────────────────────────────────────────────────────
   Un solo modo: el lockup dibujado desde el sprite con <use>, y el
   nombre en texto oculto para accesibilidad. El alto se controla
   aquí; el ancho va siempre en automático para no deformarlo.
   ─────────────────────────────────────────────────────────── */
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--bone)}
/* El logo se dibuja desde el sprite con <use>, así que hereda el color:
   "JOKSAN" toma currentColor (blanco) y "CRUZ" conserva su azul fijo.
   Con <img> esto no funciona: un SVG externo no ve el color del documento. */
.brand__full{height:clamp(1rem,1.6vw,1.3rem);width:auto;display:block;
             color:#FFFFFF;fill:currentColor}
/* El nombre en texto queda para lectores de pantalla y buscadores. */
.brand__word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.foot .brand__full{height:1rem;opacity:.7}
.foot .brand__full:hover{opacity:1}
.foot__brand{flex-shrink:0}

/* ── PANEL DE CASO SINTÉTICO ──────────────────────────────────
   Los casos del laboratorio comparten una ficha de métricas:
   escala de la cohorte, velocidad frente al método tradicional,
   confianza (fidelity y utility) y resultados de negocio.
   ─────────────────────────────────────────────────────────── */
.labcase{border:1px solid var(--line);background:var(--surface);margin:2.5rem 0}
.labcase__head{padding:clamp(1.25rem,3vw,2rem);border-bottom:1px solid var(--line)}
.labcase__head h3{margin:.5rem 0 0}
.labcase__head p{margin:.9rem 0 0;color:#B4BDB7;max-width:52ch}

.scale{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.scale > div{padding:1rem clamp(1.25rem,3vw,2rem)}
.scale > div + div{border-left:1px solid var(--line)}
.scale b{display:block;font-family:var(--fd);font-weight:var(--dw);letter-spacing:var(--dls);
         font-size:calc(1.6rem * var(--dsc));line-height:1;color:var(--bone)}
.scale span{display:block;margin-top:.35rem;font-size:var(--t-xs);color:var(--dim);
            letter-spacing:.1em;text-transform:uppercase}

.speed{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
       padding:1rem clamp(1.25rem,3vw,2rem);background:var(--surface-2);
       border-bottom:1px solid var(--line)}
.speed__t{font-family:var(--fd);font-weight:var(--dw);letter-spacing:var(--dls);
          font-size:calc(1.3rem * var(--dsc));color:var(--bone)}
.speed__t em{font-style:normal;color:var(--dim);font-size:.75em;margin:0 .5rem}
.speed__d{font-family:var(--fd);font-weight:var(--dw);letter-spacing:var(--dls);
          font-size:calc(1.3rem * var(--dsc));color:var(--human)}
.speed small{display:block;font-family:var(--fb);font-size:var(--t-2xs);color:var(--dim);
             letter-spacing:.1em;text-transform:uppercase;margin-bottom:.3rem}

.trust2{display:grid;grid-template-columns:repeat(2,1fr);border-bottom:1px solid var(--line)}
.trust2 > div{padding:1rem clamp(1.25rem,3vw,2rem)}
.trust2 > div + div{border-left:1px solid var(--line)}
.trust2 b{font-size:var(--t-s);font-weight:700}
.trust2 .bar{position:relative;height:5px;background:var(--line);margin:.6rem 0 .5rem}
.trust2 .bar i{position:absolute;inset:0 auto 0 0;background:var(--synth);display:block}
.trust2 .val{float:right;font-family:var(--fd);font-weight:var(--dw);color:var(--synth);
             font-size:calc(1.1rem * var(--dsc));line-height:1}
.trust2 span{font-size:var(--t-xs);color:var(--dim)}

.outcome{display:grid;grid-template-columns:repeat(3,1fr)}
.outcome > div{padding:1rem clamp(1.25rem,3vw,2rem)}
.outcome > div + div{border-left:1px solid var(--line)}
.outcome b{display:block;font-family:var(--fd);font-weight:var(--dw);letter-spacing:var(--dls);
           font-size:calc(1.5rem * var(--dsc));line-height:1;color:var(--human)}
.outcome span{display:block;margin-top:.35rem;font-size:var(--t-xs);color:#B4BDB7}
.labcase__foot{padding:.8rem clamp(1.25rem,3vw,2rem);border-top:1px solid var(--line);
               font-size:var(--t-xs);color:var(--dim)}

/* ── FICHA DE MÉTRICAS SIMPLE (design systems) ───────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
       border:1px solid var(--line);margin:2rem 0}
.stats > div{background:var(--surface);padding:clamp(1rem,2.5vw,1.5rem)}
.stats b{display:block;font-family:var(--fd);font-weight:var(--dw);letter-spacing:var(--dls);
         font-size:calc(1.9rem * var(--dsc));line-height:1;color:var(--human)}
.stats span{display:block;margin-top:.5rem;font-size:var(--t-s);color:var(--dim);line-height:1.3}

/* ── COMPARATIVA DE DOS COLUMNAS ────────────────────────────── */
.vs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);margin:2.5rem 0}
.vs > div{background:var(--surface);padding:clamp(1.25rem,3vw,2rem)}
.vs h4{margin:0 0 1rem;font-size:var(--t-2xs);letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.vs--a h4{color:var(--dim)} .vs--b h4{color:var(--human)}
.vs ul{margin:0;padding-left:1.1rem;color:#B4BDB7;font-size:var(--t-m)}
.vs li{margin-bottom:.6rem}
.vs--a li::marker{color:var(--line-hi)} .vs--b li::marker{color:var(--human)}

@media(max-width:66rem){
  .scale,.outcome{grid-template-columns:1fr}
  .scale > div + div,.outcome > div + div{border-left:0;border-top:1px solid var(--line)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .vs{grid-template-columns:1fr}
}
@media(max-width:44rem){
  .trust2{grid-template-columns:1fr}
  .trust2 > div + div{border-left:0;border-top:1px solid var(--line)}
  .stats{grid-template-columns:1fr}
}

/* Bloques que nunca deben estirarse a lo ancho del contenedor grande:
   un diagrama a 88rem pierde legibilidad y una ficha de caso se desarma. */
.w > .dia,.w > .labcase,.w > .vs,.w > .stats,
.sec > .dia,.sec > .labcase,.sec > .vs,.sec > .stats{
  max-width:62rem;margin-inline:auto;
}
.w--read .iconlist,.w--read > .prose{max-width:none}

/* Muro de ilustraciones: se usa cuando el caso tiene un set de iconos
   propios y enseñarlos juntos dice más que describirlos. */
.iconwall{margin:2.5rem 0;background:var(--surface);border:1px solid var(--line);
          padding:clamp(1.1rem,2.6vw,1.9rem)}
.iconwall > div{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.5rem,1.5vw,1rem)}
.iconwall img{width:100%;height:auto}
.iconwall figcaption{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line);
                     font-size:var(--t-s);color:var(--dim);line-height:1.45}
@media(max-width:52rem){ .iconwall > div{grid-template-columns:repeat(4,1fr)} }
@media(max-width:34rem){ .iconwall > div{grid-template-columns:repeat(3,1fr)} }

/* ── SELECTOR DE IDIOMA ───────────────────────────────────────
   Dos enlaces reales, no un desplegable: cada versión del sitio
   tiene su URL propia, así que se puede compartir e indexar.
   ─────────────────────────────────────────────────────────── */
.top__end{display:flex;align-items:center;gap:1rem}
.langsw{display:flex;margin:0;font-size:var(--t-xs);font-weight:700;letter-spacing:.08em}
.langsw a{text-decoration:none;color:var(--dim);padding:.35rem .45rem;transition:color .15s}
.langsw a:hover{color:var(--bone)}
.langsw a[aria-current="true"]{color:var(--bone)}
.langsw a + a{border-left:1px solid var(--line-hi);margin-left:.1rem}

/* ══════════════════════════════════════════════════════════════
   MÓVIL
   El sitio se construyó primero para escritorio y eso dejó tres
   problemas: sin navegación, logo diminuto y diagramas ilegibles
   al reducirse. Esta sección los corrige.
   ══════════════════════════════════════════════════════════════ */

/* ── Botón de menú ─────────────────────────────────────────── */
.burger{display:none;position:relative;width:2.75rem;height:2.75rem;margin-right:-.6rem;
        background:none;border:0;cursor:pointer;color:var(--bone);flex-shrink:0}
.burger span{position:absolute;left:.7rem;right:.7rem;height:2px;background:currentColor;
             transition:transform .22s ease,opacity .18s ease}
.burger span:nth-child(1){top:1rem}
.burger span:nth-child(2){top:1.32rem}
.burger span:nth-child(3){top:1.64rem}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.32rem) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-.32rem) rotate(-45deg)}

.top__menu{display:flex;align-items:center;gap:clamp(1rem,2.5vw,1.6rem);margin-left:auto}

@media(max-width:66rem){
  .burger{display:block}
  .top__in{position:relative}
  .top__menu{
    display:none;position:absolute;top:100%;left:calc(var(--g) * -1);right:calc(var(--g) * -1);
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--surface);border-block:1px solid var(--line);
    /* sangría propia, mayor que el margen de página: el panel es una
       superficie aparte y necesita leerse como tal */
    padding:.25rem clamp(1.5rem,6vw,2.5rem) 1.5rem;
  }
  .top__menu[data-open]{display:flex}
  .top__nav{flex-direction:column;gap:0}
  .top__nav a{
    display:flex;align-items:center;min-height:3.25rem;   /* objetivo táctil cómodo */
    padding:.5rem 0;border-bottom:1px solid var(--line);
    font-size:1.1rem;font-weight:600;color:var(--bone);
  }
  .top__nav a[aria-current="page"]{color:var(--human)}
  .top__nav a[aria-current="page"]::before{
    content:"";width:.4rem;height:.4rem;background:var(--human);
    border-radius:50%;margin-right:.65rem;flex-shrink:0;
  }

  /* El idioma y el botón de contacto dejan de compartir renglón: cada uno
     ocupa su propia franja, con el contacto abajo y a todo el ancho. */
  .top__end{flex-direction:column;align-items:stretch;gap:1rem;margin-top:1.5rem}
  .langsw{justify-content:flex-start;font-size:var(--t-m);align-self:flex-start;
          border:1px solid var(--line);}
  .langsw a{padding:.7rem 1.1rem;min-width:3.25rem;text-align:center}
  .langsw a[aria-current="true"]{background:var(--line);color:var(--bone)}
  .top__cta{
    display:flex;align-items:center;justify-content:center;
    min-height:3.25rem;padding:.85rem 1.2rem;font-size:var(--t-l);
  }
  /* con el menú abierto no se hace scroll detrás */
  html[data-menu-open]{overflow:hidden}
}

/* ── Logo: al liberarse la barra, cabe más grande ──────────── */
@media(max-width:66rem){ .brand__full{height:1.5rem} }
@media(max-width:34rem){ .brand__full{height:1.3rem} }

/* ── Diagramas legibles ────────────────────────────────────────
   Un SVG de 586 de ancho metido en 360px reduce su texto a 7px.
   En vez de encogerlo, se deja desplazar a lo ancho conservando
   un mínimo legible, y se avisa de que se puede deslizar.       */
@media(max-width:52rem){
  .dia{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dia > svg{min-width:30rem}
  .dia figcaption::after{content:" Desliza el diagrama para verlo completo.";color:var(--line-hi)}
  html[lang="en"] .dia figcaption::after{content:" Swipe the diagram to see it all."}
}

/* ── Encimados y aprietes concretos ────────────────────────── */
@media(max-width:66rem){
  .meta{grid-template-columns:1fr;gap:1.25rem}
  .sec__head{align-items:flex-start}
  .feat__body{position:static;padding-inline:0}
  .feat__img::after{background:linear-gradient(to top,rgba(11,15,13,.6),transparent 60%)}
  .feat{background:transparent}
  .feat__t{max-width:none}
}
@media(max-width:44rem){
  .hero__sub{max-width:none}
  .phero h1,.hero h1{max-width:none}
  .labcase__head h3{font-size:calc(1.5rem * var(--dsc))}
  .speed{flex-direction:column;align-items:flex-start;gap:.6rem}
  .iconwall > div{gap:.4rem}
  .tags span{font-size:var(--t-xs);padding:.3rem .6rem}
  .cta__cols{grid-template-columns:1fr;gap:1.25rem}
  .foot{flex-direction:column;gap:.6rem}
  .filters button{flex:1 1 auto}
}
@media(max-width:30rem){
  .d--xl{font-size:calc(2.25rem * var(--dsc))}
  .impact__n,.stats b{font-size:calc(2.2rem * var(--dsc))}
  .cta__mail{font-size:calc(1.35rem * var(--dsc))}
}

/* ── ICONOS DE CONTACTO Y REDES ───────────────────────────────
   Los mismos trazos del resto del sprite, para que un logo de
   marca no desentone junto a un icono de proceso.
   ─────────────────────────────────────────────────────────── */
.cta__cols a{display:inline-flex;align-items:center;gap:.55rem}
.cta__cols a .ico{width:1.15rem;height:1.15rem;color:var(--dim);flex-shrink:0;
                  transition:color .15s}
.cta__cols a:hover .ico{color:var(--synth)}
.link .ico,.idea .lbl .ico{width:1.05rem;height:1.05rem;vertical-align:-.22em;margin-right:.4rem}
.btn .ico{width:1rem;height:1rem;vertical-align:-.18em;margin-right:.5rem}

.social{display:flex;gap:.35rem;align-items:center}
.social a{display:inline-flex;padding:.5rem;color:var(--dim);transition:color .15s,background .15s}
.social a:hover{color:var(--bone);background:var(--surface)}
.social .ico{width:1.2rem;height:1.2rem;vertical-align:0}

.contactlist{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid var(--line)}
.contactlist li{border-bottom:1px solid var(--line)}
.contactlist li,.contactlist a{display:flex;align-items:center;gap:.9rem;
  padding:.9rem 0;text-decoration:none;color:var(--bone)}
.contactlist li > .ico{margin-left:0}
.contactlist a{padding:0;flex:1}
.contactlist li:has(> a){padding:0}
.contactlist li:has(> a) > a{padding:.9rem 0}
.contactlist .ico{width:1.35rem;height:1.35rem;color:var(--synth);flex-shrink:0}
.contactlist span{display:flex;flex-direction:column;line-height:1.3;
  font-size:var(--t-s);color:var(--dim)}
.contactlist strong{font-weight:700;font-size:var(--t-m);color:var(--bone)}
.contactlist a:hover strong{color:var(--synth)}
@media(max-width:44rem){ .social{flex-wrap:wrap} }

/* ── MURO DE CLIENTES ─────────────────────────────────────────
   Los logotipos llegan en cualquier color; el filtro los pasa a
   blanco puro para que la tira se lea como una sola pieza. El
   nombre en texto queda siempre en el marcado: si el archivo
   falta, reaparece, y los lectores de pantalla lo leen igual.
   ─────────────────────────────────────────────────────────── */
.trust__i{display:inline-flex;align-items:center}
.trust__i img{height:clamp(1.1rem,2.2vw,1.6rem);width:auto;max-width:9rem;
  object-fit:contain;display:block;opacity:.5;transition:opacity .2s}
/* Solo para logos que llegan en negro o a color sobre fondo transparente.
   Nunca aplicar a un logo con placa de fondo: se convertiría en un bloque
   blanco sólido y el nombre de la marca desaparecería. */
.trust__i--invertir img{filter:grayscale(1) brightness(0) invert(1)}
.trust:hover .trust__i img,.trust__i:hover img{opacity:.9}
.trust__i--logo .trust__t{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:44rem){
  .trust__row{gap:1.25rem}
  .trust__i img{height:1.05rem;max-width:6.5rem}
}

/* Accesibilidad del menú: el foco tiene que verse dentro del panel oscuro
   y el botón necesita un objetivo táctil de 44px aunque el trazo sea fino. */
.burger:focus-visible{outline:2px solid var(--human);outline-offset:-4px}
.top__nav a:focus-visible,.langsw a:focus-visible{outline:2px solid var(--human);
  outline-offset:-2px;border-radius:2px}
.top__cta:focus-visible{outline:2px solid var(--bone);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .burger span{transition:none} }

/* ── FILTROS: hidden tiene que ganar ──────────────────────────
   .tile declara display:flex y .feat display:block, y ambos vencen
   al [hidden]{display:none} del navegador. Sin esta regla los
   botones de filtro cambiaban de estado pero no ocultaban nada.
   ─────────────────────────────────────────────────────────── */
[hidden]{display:none !important}

/* ── PORTADA DE CASO ──────────────────────────────────────────── */
.cover{margin:0 0 clamp(1.5rem,4vw,2.5rem);position:relative;background:var(--surface)}
.cover img,.cover svg{width:100%;display:block}
.cover img{aspect-ratio:16/7;object-fit:cover;object-position:top center}
.cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(11,15,13,.55),transparent 55%)}
.cover--svg::after{display:none}
.cover__cap{position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:clamp(.9rem,2.5vw,1.4rem);font-size:var(--t-xs);color:#C4CCC6}
.cover .cover-t{font-family:var(--fd);font-weight:var(--dw);font-size:24px;
  letter-spacing:var(--dls);fill:var(--bone)}
.cover .cover-n{font-family:var(--fd);font-weight:var(--dw);font-size:34px;
  letter-spacing:var(--dls);fill:var(--human)}
.cover .dia-lbl{font-size:10px;letter-spacing:.13em;font-weight:700;fill:var(--dim)}
.cover .dia-sm{font-size:11px;fill:var(--dim)}

/* ── TARJETA CON MINIATURA ────────────────────────────────────── */
.tile--img{padding:0;min-height:0;display:flex;flex-direction:column}
.tile__img{display:block;position:relative;overflow:hidden;background:var(--surface-2);
  aspect-ratio:16/9;border-bottom:1px solid var(--line)}
.tile__img img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);opacity:.9}
.tile--img:hover .tile__img img{transform:scale(1.04);opacity:1}
.tile__img--gen svg{width:100%;height:100%;display:block}
.tile__body{display:flex;flex-direction:column;gap:.35rem;flex:1;
  padding:clamp(1.25rem,2.6vw,1.75rem)}
.tile--img .tile__t{margin:.25rem 0 0;max-width:none}
.tile--img .tile__d{margin:.3rem 0 0;max-width:none}
.tile--img .tile__r{margin-top:auto;padding-top:.9rem}