/* ============================================================
   T1 · PORTADA — hoja específica de la plantilla
   Requiere estilo-base.css cargado antes.
   ============================================================ */

/* ---------- cubierta ---------- */
.cover{position:relative; border-bottom:1px solid var(--line);
  background:linear-gradient(165deg,var(--brand-soft) 0%,transparent 70%);}
.cover-in{max-width:var(--wide); margin:0 auto; padding:72px 24px 56px;
  display:grid; grid-template-columns:1fr; gap:40px; align-items:center;}
@media(min-width:940px){ .cover-in{grid-template-columns:1.05fr .95fr; gap:56px; padding:96px 24px 80px;} }

/* isotipo del Laboratorio sobre el titular: una sola imagen; <picture> sirve la
   versión blanca cuando el sistema está en modo oscuro. */
.cover-logo{margin:0 0 28px; line-height:0;}
.cover-logo img{display:block; width:clamp(168px,20vw,248px); height:auto;}

.eyebrow{font-family:var(--sans); font-size:12.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 18px;}
.cover h1{font-size:clamp(38px,6.4vw,66px); line-height:1.02; letter-spacing:-.03em; margin:0 0 22px;}
.cover h1 em{font-style:normal; color:var(--accent);}
.thesis{font-size:clamp(19px,2.4vw,23px); line-height:1.5; color:var(--muted); margin:0 0 30px; max-width:34ch;}
.cover-actions{display:flex; flex-wrap:wrap; gap:12px; font-family:var(--sans);}
.btn{display:inline-block; text-decoration:none; font-weight:700; font-size:15px; padding:12px 22px; border-radius:8px;}
.btn.primary{background:var(--accent); color:#fff;}
.btn.primary:hover{filter:brightness(1.08);}
.btn.ghost{border:1px solid var(--line); color:var(--fg); background:var(--card);}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent);}

/* ---------- cifras de cabecera ---------- */
.figures{border-bottom:1px solid var(--line); background:var(--card);}
/* minmax 140px + separación 24px: en pantalla ancha caben las siete cifras
   en una sola fila. Con 150px/30px la séptima caía sola en una segunda fila. */
.figures-in{max-width:var(--wide); margin:0 auto; padding:28px 24px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:22px 24px; font-family:var(--sans);}
/* en la franja intermedia el reparto automático deja 6+1; forzando cuatro
   columnas queda 4+3, que se lee mucho mejor */
@media(min-width:900px) and (max-width:1199px){
  .figures-in{grid-template-columns:repeat(4,1fr);}
}
.fig b{display:block; font-size:clamp(24px,3.2vw,32px); line-height:1.1; letter-spacing:-.02em; color:var(--accent);
  font-variant-numeric:tabular-nums;}
.fig span{display:block; font-size:13px; color:var(--muted); margin-top:5px; line-height:1.4;}

/* ---------- secciones ---------- */
.band{max-width:var(--wide); margin:0 auto; padding:64px 24px;}
.band + .band{padding-top:0;}
.band-head{max-width:var(--read); margin:0 0 30px;}
.band-head h2{font-family:var(--sans); font-size:13px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin:0 0 12px;}
.band-head p.big{font-size:clamp(22px,2.8vw,27px); line-height:1.35; letter-spacing:-.015em; margin:0;}
.band-head p.sub{font-family:var(--sans); font-size:16px; color:var(--muted); margin:12px 0 0;}

/* ---------- tres puertas ---------- */
.doors{display:grid; grid-template-columns:1fr; gap:18px;}
@media(min-width:820px){ .doors{grid-template-columns:repeat(3,1fr);} }
.door{display:block; text-decoration:none; color:var(--fg); background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:26px 26px 24px; transition:border-color .15s,transform .15s;}
.door:hover{border-color:var(--accent); transform:translateY(-2px);}
.door .tag{font-family:var(--sans); font-size:11.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:12px;}
.door h3{font-size:25px; letter-spacing:-.02em; margin:0 0 10px;}
.door p{font-family:var(--sans); font-size:14.5px; line-height:1.6; color:var(--muted); margin:0 0 16px;}
.door ul{list-style:none; padding:0; margin:0; font-family:var(--sans); font-size:13.5px; color:var(--muted);}
.door li{margin:5px 0; padding-left:16px; position:relative;}
.door li::before{content:"›"; position:absolute; left:0; color:var(--accent);}

/* ---------- cita grande ---------- */
.pullquote{background:var(--accent-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.pullquote-in{max-width:840px; margin:0 auto; padding:64px 24px; text-align:center;}
.pullquote p{font-size:clamp(23px,3.2vw,31px); line-height:1.4; letter-spacing:-.015em; margin:0 0 20px;}
.pullquote footer{font-family:var(--sans); font-size:14px; color:var(--muted); line-height:1.6;}
.pullquote footer strong{color:var(--fg);}

/* ---------- hito destacado ---------- */
.feature{display:grid; grid-template-columns:1fr; gap:28px; background:var(--card);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;}
@media(min-width:860px){ .feature{grid-template-columns:1fr 1fr; align-items:stretch;} }
.feature .art{background:var(--code); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:40px 26px; gap:8px; font-family:var(--sans); min-height:240px;}
@media(min-width:860px){ .feature .art{border-bottom:none; border-right:1px solid var(--line);} }
.feature .art b{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);}
.feature .art span{font-size:13.5px; color:var(--muted); max-width:34ch;}
.feature .art.tiene{padding:0; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; background:var(--code);}
.feature .art.tiene img{display:block; width:100%; height:auto; max-height:560px; object-fit:contain; object-position:center top;}
.feature .art.tiene .cred{display:block; padding:8px 14px 10px; font-family:var(--sans); font-size:12px; color:var(--muted); max-width:none;}
.feature .txt{padding:32px 30px 34px;}
.feature .txt .tag{font-family:var(--sans); font-size:11.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:12px;}
.feature .txt h3{font-size:30px; letter-spacing:-.025em; margin:0 0 12px; line-height:1.12;}
.feature .txt p{font-size:17px; line-height:1.65; margin:0 0 18px;}
.feature .txt a.more{font-family:var(--sans); font-weight:700; font-size:15px; text-decoration:none; color:var(--accent);}
.feature .txt a.more:hover{text-decoration:underline;}

/* ---------- mini línea de tiempo ---------- */
.mini{position:relative; margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:0;
  border-top:2px solid var(--line); font-family:var(--sans);}
.mini li{padding:20px 16px 0 0; position:relative;}
.mini li::before{content:""; position:absolute; top:-6px; left:0; width:10px; height:10px;
  border-radius:50%; background:var(--accent); border:2px solid var(--bg);}
.mini b{display:block; font-size:19px; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.mini span{display:block; font-size:13.5px; color:var(--muted); line-height:1.45; margin-top:4px;}

/* ---------- presente: tarjetas de experimento ---------- */
.cards{display:grid; grid-template-columns:1fr; gap:18px;}
@media(min-width:760px){ .cards{grid-template-columns:repeat(2,1fr);} }
.xcard{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:24px 26px;}
.xcard .state{display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-size:11.5px;
  font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ok); margin-bottom:12px;}
.xcard .state i{width:7px; height:7px; border-radius:50%; background:var(--ok); display:block;}
.xcard h3{font-size:23px; letter-spacing:-.02em; margin:0 0 8px;}
.xcard p{font-family:var(--sans); font-size:14.5px; line-height:1.6; color:var(--muted); margin:0 0 14px;}
.xcard .partners{font-family:var(--sans); font-size:12.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:12px;}

/* ---------- noticias ---------- */
.news{display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--line);}
.news a{display:grid; grid-template-columns:1fr; gap:4px; padding:18px 0; border-bottom:1px solid var(--line);
  text-decoration:none; color:var(--fg); font-family:var(--sans);}
@media(min-width:700px){ .news a{grid-template-columns:130px 1fr; gap:24px; align-items:baseline;} }
.news a:hover h4{color:var(--accent);}
.news time{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums;}
.news h4{margin:0; font-size:17px; font-weight:650; line-height:1.4;}

/* ---------- llamada final ---------- */
.finale{background:var(--accent); color:#fff; margin-top:64px;}
.finale-in{max-width:840px; margin:0 auto; padding:64px 24px; text-align:center;}
.finale h2{font-size:clamp(27px,3.6vw,36px); line-height:1.2; letter-spacing:-.025em; margin:0 0 16px; color:#fff;}
.finale p{font-family:var(--sans); font-size:17px; line-height:1.6; opacity:.93; margin:0 auto 26px; max-width:56ch;}
.finale .btn.primary{background:#fff; color:var(--accent);}
.finale .btn.ghost{border-color:rgba(255,255,255,.5); color:#fff; background:transparent;}
.finale .btn.ghost:hover{border-color:#fff; color:#fff;}
.finale .cover-actions{justify-content:center;}
footer.site-foot{margin-top:0;}