/* Portada v3 — portada-v1's finished layout (night throughout, as portada-v2 A used it). Variants that
   keep this layout (E, H) build on it; F and G override what they restructure. */
:root{
  --apagado:#3B3743;          /* an unlit title on the night: the stack's unlit tone, a step darker */
  --superficie:#0F0E13;       /* a surface a shade above the night (variant A's cases) */
  --linea:rgba(255,255,255,.08);
}

/* ---------- sections ---------- */
.seccion{padding:var(--pad-seccion) 0}
.oscuro h2{max-width:none}

/* ---------- perfil: the title held on the left while the text runs on the right ---------- */
.perfil-rejilla{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.perfil-rejilla h2{position:sticky;top:128px;margin:0}
.perfil-cuerpo{margin-top:4px;max-width:none}
@media(max-width:900px){
  .perfil-rejilla{grid-template-columns:1fr;gap:28px}
  .perfil-rejilla h2{position:static}
}

/* ---------- casos: one palette, set per variant (comun/variantes.css) ---------- */
.casos{
  --c-fondo:var(--superficie); --c-titulo:var(--text); --c-texto:var(--text-2); --c-meta:var(--text-3);
  --c-acento:var(--accent-soft); --c-tab:rgba(255,255,255,.06); --c-tab-texto:var(--text-2);
  --c-tab-on:var(--accent); --c-tab-on-texto:var(--on-accent); --c-linea:rgba(255,255,255,.12);
  --c-foco:var(--accent);
  background:var(--c-fondo);color:var(--c-titulo)}
#caso1,#caso2{background:none}                         /* the site's #caso2 lavender belongs to another case now */
.caso{position:relative}
.caso+.caso{border-top:1px solid var(--c-linea)}
.caso :focus-visible{outline-color:var(--c-foco)}
.caso .caso-rotulo{margin:0 0 20px;font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--c-acento)}
.caso h2{margin:0 0 18px;font-size:clamp(1.9rem,4.4vw,2.9rem);font-weight:500;letter-spacing:-.03em;
  line-height:1.15;text-wrap:balance;color:var(--c-titulo)}
.caso p{font-size:16px;line-height:1.75;color:var(--c-texto);max-width:520px}
.caso .caso-nota-evidencia{font-family:inherit;font-size:14.5px;line-height:1.65;letter-spacing:0;
  color:var(--c-meta);max-width:520px}
.caso .etapa{background:var(--c-tab);color:var(--c-tab-texto)}
.caso .etapa[aria-selected="true"]{background:var(--c-tab-on);color:var(--c-tab-on-texto)}
.caso .panel-caso{border-left:1px solid var(--c-linea);background:none;padding:2px 0 2px 22px}
.caso .panel-caso h3{color:var(--c-titulo)}
.caso .panel-caso .meta{color:var(--c-meta)}
.caso .acciones{justify-content:flex-start;margin-top:30px}
.btn-caso-completo{box-shadow:none}
.caso-rejilla{display:grid;gap:64px;align-items:center}
.caso-con-foto{grid-template-columns:1.15fr .85fr}
.caso-dos-columnas{grid-template-columns:1fr 1fr;align-items:start}
.caso-dos-columnas .caso-etapas{padding-top:44px}
.caso-dos-columnas .caso-etapas .etapas{margin-top:0}
@media(max-width:900px){
  .caso-rejilla,.caso-con-foto,.caso-dos-columnas{grid-template-columns:1fr;gap:36px}
  .caso-con-foto .caso-media{order:-1}
  .caso-dos-columnas{gap:8px}
  .caso-dos-columnas .caso-etapas{padding-top:0}
}

/* ---------- experiencia: period and field on the left, the role beside ---------- */
#experiencia .linea-tiempo{margin-top:48px;padding-left:0;border-left:0}
#experiencia .entrada-exp{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:48px;
  padding:30px 0;border-top:1px solid var(--linea)}
#experiencia .entrada-exp::before{display:none}
#experiencia .entrada-exp .periodo{grid-column:1;grid-row:1;margin:5px 0 0;line-height:1.6}
#experiencia .badge-categoria{grid-column:1;grid-row:2;align-self:start;margin:6px 0 0;padding:0;
  border:0;border-radius:0;background:none;font-size:11px;letter-spacing:.12em}
#experiencia .badge-categoria.tecnologia{color:var(--accent-soft)}
#experiencia .badge-categoria.otra-area{color:var(--text-3)}
#experiencia .entrada-exp h3{grid-column:2;grid-row:1;margin:0 0 8px;font-size:19px}
#experiencia .entrada-exp p.desc{grid-column:2;grid-row:2/span 2}
@media(max-width:700px){
  #experiencia .entrada-exp{display:block;padding:24px 0}
  #experiencia .badge-categoria{display:inline;margin:0 0 0 10px}
  #experiencia .entrada-exp .periodo{display:inline;margin:0}
  #experiencia .entrada-exp h3{margin:8px 0 6px;font-size:17px}
  #experiencia .entrada-exp p.desc{font-size:14.5px;line-height:1.65}
}
#experiencia .formacion{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;margin-top:40px;padding-top:40px;
  border-top:1px solid var(--linea)}
#experiencia .formacion h3,#experiencia .idiomas h3{margin:0 0 18px;font-family:inherit;font-size:15px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--text)}
#experiencia .formacion-lista{margin:0}
#experiencia .idiomas-lista{flex-direction:column;gap:10px}
@media(max-width:700px){ #experiencia .formacion{grid-template-columns:1fr;gap:36px} }

/* ---------- stack: three columns of plain lists; the level is the column title ---------- */
#stack .stack-grupos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:48px}
#stack .stack-grupo h3{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--linea);
  min-height:calc(2.6em + 12px);display:flex;align-items:flex-end;     /* one- and two-line titles share the rule */
  font-family:inherit;font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text)}
#stack .stack-items{display:block;font-size:15px;line-height:1.9}
#stack .stack-items span{display:inline;padding:0;border:0;border-radius:0;background:none;
  font-family:inherit;font-size:inherit;letter-spacing:0;white-space:nowrap}   /* lines break between tools, never inside one */
/* the site's script joins the items with no space between them: the separator carries the only break
   opportunity, so it must allow wrapping (first phone capture: one line running off the screen) */
#stack .stack-items span:not(:last-child)::after{content:' · ';white-space:normal;color:var(--text-3)}
#stack .grupo-1 .stack-items span{color:var(--text)}
#stack .grupo-2 .stack-items span{color:var(--text-2)}
#stack .grupo-3 .stack-items span{color:var(--text-3)}
#stack .stack-nota{margin:48px 0 0;font-family:inherit;font-style:normal;font-size:15px;line-height:1.7;color:var(--text-2)}
@media(max-width:900px){ #stack .stack-grupos{grid-template-columns:1fr;gap:32px} #stack .stack-grupo h3{min-height:0} }

/* ---------- constelación and galaxias ---------- */
/* the site gives this paragraph no style of its own (browser default: white, tight); same as the others */
.constelacion .wrap>p{max-width:620px;margin:0;font-size:16px;line-height:1.75;color:var(--text-2)}
/* without WebGPU the piece shows its fallback QR: a shorter stage, no large void (comun/secciones.js) */
html.sin-webgpu .constelacion-stage{height:min(60vh,540px);min-height:400px}
.galaxia-preview-eyebrow{font-family:inherit;font-size:12px;font-weight:500;letter-spacing:.08em}

/* ---------- contacto: the hero's warm light again, still ---------- */
/* clipped only sideways: clipping it at the top drew a straight edge across the page (first capture) */
footer#contacto{position:relative;overflow-x:clip;padding:128px 0 64px}
footer#contacto .wrap{position:relative}
.resplandor{position:absolute;left:50%;top:-120px;width:min(960px,100vw);height:560px;transform:translateX(-50%);
  pointer-events:none;background:radial-gradient(closest-side,rgba(255,238,214,.09),rgba(255,238,214,0))}
.credito{font-family:inherit;font-size:12px;letter-spacing:.08em}

/* the profile's title does not stick here: the wireframe copy lives in a fixed band, where a sticky
   element cannot follow the page (the copy's title drifted up to 128 px from the real one) */
.perfil-rejilla h2{position:static}
/* the carousel's sky, relative to this sheet */
.escena .cielo-e{background-image:url("../assets/hero-cielo.webp")}
/* A · Noche continua (portada-v1): the cases on a surface a shade above the night */
.casos{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}

/* Nothing below the hero is drawn during the intro (portada-v1: it cost frames of 67–117 ms). Unlike
   portada-v1, the sections are all drawn once the intro is over: the wireframe band is a copy of the
   page and must match its real layout, which placeholder heights would not. */
html.js:not(.intro-fin) :is(main>.escena,#perfil,main>.casos,#experiencia,#stack,#constelacion,footer#contacto){
  content-visibility:auto;contain-intrinsic-size:auto 1000px}