/* ==================================================================
   Chronos Biosciences · Composición de la portada
   Se apoya en sistema.css. Nada de tokens aquí.
   ================================================================== */

/* ================= 00 · hero ================= */
.hero{position:relative; border-bottom:1px solid var(--borde); overflow:hidden; background:var(--w)}
.lienzo{
  position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none;
  /* se apaga sobre la columna de texto y conserva fuerza a la derecha */
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,.09), rgba(0,0,0,.16) 36%, #000 76%);
  mask-image:linear-gradient(to right, rgba(0,0,0,.09), rgba(0,0,0,.16) 36%, #000 76%);
}
.hero-rej{position:relative; padding-block:var(--e12) var(--e11); row-gap:var(--e9)}
.hero-txt{grid-column:1 / span 8}
.hero-lat{grid-column:11 / span 6; align-self:end}
@media (max-width:1055px){
  .hero-txt{grid-column:1 / span 8}
  .hero-lat{grid-column:1 / span 8}
}
@media (max-width:671px){
  .hero-txt,.hero-lat{grid-column:1 / span 4}
  .hero-rej{padding-block:var(--e10) var(--e9)}
  /* En una sola columna no hay lado libre: la mascara pasa a ser vertical
     y deja el campo apenas insinuado bajo el texto. */
  .lienzo{
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.09) 55%, rgba(0,0,0,.3));
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.09) 55%, rgba(0,0,0,.3));
  }
  /* Apilados, los botones tienen que llenar la fila o se ve el fondo del grupo. */
  .hero .acciones{width:100%}
  .hero .acciones .boton{flex:1 1 100%; max-width:none}
}

.hero .sobre{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e4); margin-bottom:var(--e7)}
.hero h1{max-width:19ch; margin-bottom:var(--e6); text-wrap:balance}
.hero .bajada{max-width:58ch; color:var(--texto-2); margin-bottom:var(--e8)}
.hero .acciones{display:flex; flex-wrap:wrap; gap:1px; background:var(--borde); width:fit-content}

/* ficha de estado */
.ficha-lat{background:var(--g10); border-left:3px solid var(--azul); padding:var(--e6) var(--e6) var(--e5)}
.ficha-lat .tit{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e5);
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--texto-3); padding-bottom:var(--e5); border-bottom:1px solid var(--g20);
}
.ficha-lat .tit .fecha{color:var(--texto-4); text-transform:none; letter-spacing:.02em}
.ficha-lat dl{margin:0; display:grid; grid-template-columns:minmax(92px,auto) 1fr}
.ficha-lat dt,.ficha-lat dd{padding:11px 0; border-bottom:1px solid var(--g20)}
.ficha-lat dl > :nth-last-child(1),.ficha-lat dl > :nth-last-child(2){border-bottom:0}
.ficha-lat dt{font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--texto-3); white-space:nowrap}
.ficha-lat dd{margin:0; font-size:14px; line-height:1.45; color:var(--texto); padding-left:var(--e5)}
.ficha-lat dd .pt{
  display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--g50);
  margin-right:7px; vertical-align:1px;
}
.ficha-lat dd .pt.act{background:var(--azul)}

/* indicación de desplazamiento */
.cue{
  position:absolute; left:var(--margen); bottom:var(--e6); z-index:2;
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--texto-4);
}
.cue:hover{color:var(--texto)}
.cue .fl{display:inline-block; animation:baja 2.4s var(--mov-expresivo) infinite}
@keyframes baja{0%,100%{transform:translateY(0); opacity:.6} 50%{transform:translateY(3px); opacity:1}}
@media (prefers-reduced-motion:reduce){.cue .fl{animation:none}}
@media (max-height:760px),(max-width:671px){.cue{display:none}}

/* ================= cifras ================= */
.cifras-env{border-block:1px solid var(--borde); background:var(--g10)}
.cifras-tit{
  max-width:var(--ancho); margin:0 auto; padding:var(--e5) var(--margen) 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--texto-3);
}
.cifras{
  max-width:var(--ancho); margin:0 auto; padding-inline:var(--margen);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--g20);
}
.cifra{
  background:var(--w); padding:var(--e6) var(--e6) var(--e6);
  border-top:2px solid var(--g30); transition:border-color .15s var(--mov-productivo);
}
.cifra:hover{border-top-color:var(--azul)}
.cifra .v{
  display:block; font-size:clamp(26px,2.6vw,34px); font-weight:600; letter-spacing:-.025em;
  line-height:1; font-variant-numeric:tabular-nums; margin-bottom:var(--e4); color:var(--texto);
}
.cifra .d{display:block; font-size:14px; line-height:1.5; color:var(--texto-2); margin-bottom:var(--e5)}
.cifra .f{display:block; font-family:var(--mono); font-size:11px; line-height:1.5}
.cifra .f a{color:var(--texto-3); text-decoration:none; border-bottom:1px solid var(--g30)}
.cifra .f a:hover{color:var(--azul-70); border-bottom-color:var(--azul)}
@media (max-width:1055px){.cifras{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.cifras{grid-template-columns:1fr}}

/* ================= encabezado de sección ================= */
.enc{
  display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); column-gap:var(--canal);
  margin-bottom:var(--e9);
}
.enc .idx{grid-column:1 / span 1; padding-top:var(--e4); border-top:2px solid var(--texto); align-self:start}
.seccion--oscura .enc .idx{border-top-color:var(--w)}
.enc .txt{grid-column:3 / span 9}
.enc h2{margin-bottom:var(--e5); max-width:26ch; text-wrap:balance}
.enc p{max-width:62ch; color:var(--texto-2); font-size:16px; line-height:1.6}
@media (max-width:1055px){
  .enc .idx{grid-column:1 / span 8; margin-bottom:var(--e5); width:fit-content; padding-right:var(--e8)}
  .enc .txt{grid-column:1 / span 8}
}
@media (max-width:671px){.enc .idx,.enc .txt{grid-column:1 / span 4}}

/* ================= 01 · tabla de frentes ================= */
.tabla-env{max-height:none}
.tabla-env table.datos thead th{position:sticky; top:0; z-index:2}
td .chip-mod{
  display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.03em;
  padding:3px 8px; border:1px solid var(--g30); color:var(--texto-2); white-space:nowrap;
}
td .chip-mod.humano{border-color:var(--azul); color:var(--azul-70); background:var(--azul-10)}

/* medidor de madurez con escala */
.medidor{display:block; min-width:168px}
.medidor .via{
  position:relative; height:6px; background:var(--g20);
  background-image:linear-gradient(90deg, var(--g30) 1px, transparent 1px);
  background-size:25% 100%;
}
.medidor .val{position:absolute; inset:0 auto 0 0; background:var(--azul); transform-origin:left; transform:scaleX(0)}
.visible .medidor .val{transform:scaleX(1); transition:transform .9s var(--mov-expresivo)}
@media (prefers-reduced-motion:reduce){.visible .medidor .val{transition:none}}
.medidor .et{
  display:block; margin-top:7px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.03em; color:var(--texto-3);
}
.escala-med{
  display:flex; justify-content:space-between; margin-top:var(--e5);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--texto-4);
}

/* ================= 02 · esquema de mecanismo ================= */
.esquema{background:var(--w); border:1px solid var(--borde)}
.esquema .fig-cab{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--e4);
  padding:var(--e5) var(--e6); border-bottom:1px solid var(--borde); background:var(--g10);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--texto-3);
}
.esquema .fig-cab b{color:var(--texto); font-weight:500}
.esquema .lienzo-fig{padding:var(--e7) var(--e6) var(--e6); overflow-x:auto}
.esquema svg{width:100%; min-width:720px; height:auto; display:block}
.esquema .caja{fill:var(--w); stroke:var(--g40); stroke-width:1}
.esquema .caja-ini{fill:var(--g10); stroke:var(--g50)}
.esquema .caja-fin{fill:var(--azul-10); stroke:var(--azul)}
.esquema .rot{font-family:var(--sans); font-size:11.5px; font-weight:500; fill:var(--texto)}
.esquema .rot-sm{font-family:var(--mono); font-size:9.5px; fill:var(--texto-3); letter-spacing:.02em}
.esquema .flecha{stroke:var(--g50); stroke-width:1; fill:none; marker-end:url(#pta)}
.esquema .flecha-az{stroke:var(--azul); stroke-width:1.4; fill:none; marker-end:url(#pta-az)}
/* el dibujo se arma con --l, que fija el script desde getTotalLength() */
.js .esquema .flecha,.js .esquema .flecha-az{stroke-dasharray:var(--l); stroke-dashoffset:var(--l)}
.js .visible .esquema .flecha,.js .visible .esquema .flecha-az{
  stroke-dashoffset:0; transition:stroke-dashoffset .9s var(--mov-expresivo) var(--d, 0s);
}
@media (prefers-reduced-motion:reduce){
  .js .esquema .flecha,.js .esquema .flecha-az{stroke-dashoffset:0; transition:none}
}
.pie-fig{
  margin-top:var(--e5); font-family:var(--mono); font-size:11px; line-height:1.7;
  color:var(--texto-3); max-width:96ch;
}
.pie-fig b{color:var(--texto-2); font-weight:500}
.seccion--oscura .pie-fig{color:var(--g50)}
.seccion--oscura .pie-fig b{color:var(--g30)}

/* ================= 03 · cronología ================= */
.crono{position:relative; margin-top:var(--e6)}
.crono-eje{position:relative; height:1px; background:var(--borde-fuerte); margin:var(--e11) 72px 132px}
.crono-eje::before,.crono-eje::after{
  content:attr(data-ini); position:absolute; top:-7px; left:-58px;
  font-family:var(--mono); font-size:11px; color:var(--texto-4); font-variant-numeric:tabular-nums;
}
.crono-eje::after{content:attr(data-fin); left:auto; right:-58px}
.crono-it{position:absolute; top:0; transform:translateX(-50%); text-align:center; width:132px}
.crono-it .pt{
  width:9px; height:9px; background:var(--w); border:1.5px solid var(--g70); border-radius:50%;
  margin:-5px auto 0; transition:transform .15s var(--mov-productivo), border-color .15s var(--mov-productivo);
}
.crono-it.hito .pt{background:var(--azul); border-color:var(--azul)}
.crono-it:hover .pt{transform:scale(1.5)}
.crono-it .an{display:block; font-family:var(--mono); font-size:12px; color:var(--texto); margin-top:var(--e4); font-variant-numeric:tabular-nums}
.crono-it .qu{display:block; font-size:11.5px; line-height:1.45; color:var(--texto-3); margin-top:3px; transition:color .15s var(--mov-productivo)}
.crono-it:hover .qu{color:var(--texto)}
.crono-it .arriba{position:absolute; bottom:18px; left:0; right:0}
.crono-it .arriba .qu{margin-top:0; margin-bottom:5px}
.crono-it.hito .an::after{
  content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--azul); margin-left:6px; vertical-align:2px;
}
@media (max-width:1055px){
  /* En angosto pasa a lista vertical. El eje deja de ser una caja de 1 px
     —que aprisionaba a sus marcas— y pasa a ser el borde del contenedor. */
  .crono-eje{
    height:auto; width:auto; background:none; min-height:0;
    border-left:1px solid var(--borde-fuerte);
    margin:var(--e6) 0 0; padding-left:var(--e7);
  }
  .crono-eje::before,.crono-eje::after{display:none}
  .crono-it{
    position:relative; left:auto !important; transform:none; width:auto; text-align:left;
    display:flex; flex-direction:column; padding:0 0 var(--e6);
  }
  .crono-it .arriba{display:contents}
  .crono-it .pt{position:absolute; left:calc(-1 * var(--e7) - 5px); top:5px; margin:0}
  .crono-it .an{order:1; margin:0}
  .crono-it .qu{order:2; margin:3px 0 0; max-width:52ch}
}

/* ================= lista numerada pública ================= */
.num-pub{list-style:none; margin:0; padding:0}
.num-pub li{
  display:grid; grid-template-columns:44px 1fr; gap:var(--e6);
  padding:var(--e6) 0; border-top:1px solid var(--borde);
}
.num-pub li:last-child{border-bottom:1px solid var(--borde)}
.num-pub .n{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--azul); padding-top:4px}
.num-pub h3{font-size:18px; letter-spacing:-.012em; margin-bottom:6px}
.num-pub p{font-size:15.5px; line-height:1.65; color:var(--texto-2); max-width:72ch}
@media (max-width:671px){.num-pub li{grid-template-columns:1fr; gap:var(--e3)}}

/* ================= 05 · documentos ================= */
.docs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--borde); border:1px solid var(--borde)}
@media (max-width:671px){.docs{grid-template-columns:1fr}}
.tarjeta{padding:var(--e6) var(--e6) var(--e10); min-height:210px}
.tarjeta .flecha{transition:transform .15s var(--mov-productivo)}
a.tarjeta:hover .flecha{transform:translateX(4px)}
.tarjeta .ficha-meta{
  display:flex; flex-wrap:wrap; gap:var(--e3) var(--e5); margin-top:var(--e5);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:var(--texto-4);
}
.tarjeta .ficha-meta span{display:inline-flex; align-items:center; gap:5px}
.tarjeta .ficha-meta span::before{content:""; width:3px; height:3px; border-radius:50%; background:var(--g40)}

/* ================= 06 · contacto ================= */
.contacto-rej{row-gap:var(--e8)}
.contacto-rej .izq{grid-column:1 / span 6}
.contacto-rej .der{grid-column:9 / span 7}
@media (max-width:1055px){.contacto-rej .izq,.contacto-rej .der{grid-column:1 / span 8}}
@media (max-width:671px){.contacto-rej .izq,.contacto-rej .der{grid-column:1 / span 4}}
.correo-g{
  display:inline-block; font-size:clamp(18px,2vw,24px); font-weight:400; letter-spacing:-.01em;
  color:#78a9ff; text-decoration:none; border-bottom:1px solid #4589ff; padding-bottom:4px;
  transition:color .15s var(--mov-productivo), border-color .15s var(--mov-productivo);
}
.correo-g:hover{color:var(--w); border-bottom-color:var(--w)}
.lista-cont{list-style:none; margin:0; padding:0}
.lista-cont li{
  padding:var(--e5) 0; border-top:1px solid var(--g80); font-size:14px; line-height:1.55; color:var(--g30);
  display:grid; grid-template-columns:auto 1fr; gap:var(--e5); align-items:baseline;
}
.lista-cont li:first-child{border-top:0; padding-top:0}
.lista-cont .nm{font-family:var(--mono); font-size:11px; color:var(--g50); font-variant-numeric:tabular-nums}
.lista-cont b{color:var(--w); font-weight:600}