/* ==========================================================================
   lab-tokens.css — F4/W3 visual-alignment layer for lab.sespinelectric.com
   Loaded LAST on every lab page. Selector-level overrides only: no markup,
   copy, structure or interactive/3D logic is touched by this file.
   Ref: outputs/dga_execution/tasks/F4_AUDIT/A2_VISUAL.md
   ========================================================================== */

:root{
  --lab-container:1200px;
  --lab-container-wide:1320px;
  --lab-container-text:900px;

  --lab-h1:clamp(40px,5.2vw,64px);
  --lab-h2:clamp(28px,3.4vw,40px);
  --lab-h3:22px;
  --lab-body:17px;

  --lab-radius-sm:14px;
  --lab-radius-lg:20px;
  --lab-card-pad:24px;
  --lab-card-pad-lg:32px;

  --lab-section-space:clamp(64px,8vw,112px);

  --lab-top-gap-desktop:96px;
  --lab-top-gap-mobile:48px;
}

/* --------------------------------------------------------------------
   1. Base type scale — applies wherever no page-specific rule below wins.
   -------------------------------------------------------------------- */
body{ font-size:var(--lab-body); line-height:1.6; }
h3{ font-size:var(--lab-h3); }

/* --------------------------------------------------------------------
   2. Container width convergence.
   Collapses the 9 distinct max-widths (900–1440px) found in the audit
   to two tokens: a text column (~900px) and a wide band (~1320px).
   -------------------------------------------------------------------- */
.contenedor{ max-width:var(--lab-container-wide) !important; }

/* lab home / case studies (experience.css) — wide band token */
.lab-home-hero,
.study-strip,
.case-cards,
.lab-close,
.story-gallery,
.story-split,
.lab-story #modelo,
.lab-footer{ max-width:var(--lab-container-wide) !important; }
.story-intro{ max-width:var(--lab-container-text) !important; }

/* dga (inline-styled) — align its 1200px band to the same wide token */
.dga-labdga__hero,
.dga-labdga__block,
.dga-labdga__dark{
  padding-left:max(1.25rem,calc((100% - var(--lab-container-wide))/2)) !important;
  padding-right:max(1.25rem,calc((100% - var(--lab-container-wide))/2)) !important;
}

/* falla — containers only, per the falla-scoped instruction (hero excluded) */
.workspace{ max-width:var(--lab-container-wide) !important; }
.author-card{ max-width:var(--lab-container-wide) !important; }

/* --------------------------------------------------------------------
   3. Heading type scale convergence (h1/h2/h3) across all lab templates.
   High-specificity component selectors are targeted explicitly because
   an element-level h1{} cannot out-rank them without !important.
   -------------------------------------------------------------------- */
h1,
.hero__titulo,
.caso-hero h1,
.demo-hero h1,
.cigre-hero h1,
.campaign-hero h1,
.lab-home-hero h1,
.dga-labdga h1,
.lab-story .campaign-hero h1{
  font-size:var(--lab-h1) !important;
  line-height:1.08 !important;
}

h2,
.momentos h2,
.story-intro h2,
.story-split h2,
.story-band h2,
.lab-close h2,
.caso-hero__copy h2,
.escena__texto h2,
.cierre h2,
.dga-labdga h2,
.lab-dga-hero h2,
.dga-recovery__close h2,
.panel h2{
  font-size:var(--lab-h2) !important;
  line-height:1.15 !important;
}

/* falla hero h1 stays untouched (explicitly excluded); align its non-hero
   headings (.panel h2 above) and body copy only. */
.lab-unified .hero h1{ font-size:inherit; }

/* --------------------------------------------------------------------
   4. Card radius / padding convergence.
   Target: radius 14/20px, padding 24/32px, wherever a "card"-like
   component currently diverges (0px radius on lab-home tarjetas, mixed
   0/16px on falla, ad-hoc values on case-cards/momento/perla, etc.)
   -------------------------------------------------------------------- */
.tarjeta,
.momento,
.pasos__panel,
.case-cards article,
.study-strip a,
.dga-labdga__card,
.dga-labdga__asset,
.dga-labdga__asset-grid div,
.lab-close-proof > div,
.scene,
.panel,
.perla{
  border-radius:var(--lab-radius-sm) !important;
}

.tarjeta{
  padding:var(--lab-card-pad) !important;
}
.case-cards article > div,
.dga-labdga__card,
.dga-labdga__asset-grid div{
  padding:var(--lab-card-pad) !important;
}
.panel{
  padding:var(--lab-card-pad-lg) !important;
}
.lab-close,
.dga-recovery__close{
  border-radius:var(--lab-radius-lg) !important;
  padding:var(--lab-card-pad-lg) !important;
}

/* --------------------------------------------------------------------
   5. Section spacing convergence.
   -------------------------------------------------------------------- */
main > section:not([class*="hero"]),
.criterio,
.momentos,
.escena,
.evidencia,
.cierre,
.story-intro,
.story-band,
.dga-labdga__block,
.dga-labdga__dark{
  padding-top:var(--lab-section-space) !important;
  padding-bottom:var(--lab-section-space) !important;
}

/* --------------------------------------------------------------------
   6. Top gap under header — convergence + the trafoohm/cortocircuito/
   coordinacion mobile blow-up fix (240px desktop -> 553px mobile bug:
   .caso-hero__figura carries an unconditional min-height:340px!important
   that stacks ABOVE the title on narrow viewports). Shrinking that
   min-height on mobile only is a visual sizing change; it does not
   touch structure, order or any interactive/3D logic.
   -------------------------------------------------------------------- */
@media (max-width:640px){
  .caso-hero__figura{
    min-height:0 !important;
    height:140px !important;
    max-height:140px !important;
  }
  .caso-hero__figura:not(.caso-hero__figura--modelo):not(.caso-hero__figura--diagrama) img.no-zoom{
    min-height:0 !important;
    height:100% !important;
  }
  .caso-hero__texto{
    padding-block:1.25rem 1.5rem !important;
  }
}

/* sfra/oltc full-bleed campaign hero: reduce excess min-height so the
   H1 isn't pushed ~470px down on desktop, while keeping the photographic
   hero treatment (cannot reach the 96px token without removing the
   hero image — see F4_W3 report). */
.campaign-hero{
  min-height:min(480px,72svh) !important;
  padding-top:clamp(48px,6vw,96px) !important;
}
@media (max-width:850px){
  .campaign-hero{
    min-height:min(360px,58svh) !important;
    padding-top:clamp(24px,5vw,48px) !important;
  }
}

/* dga hero already close to the token band; keep its own grid but cap
   vertical padding to the section-space token for convergence. */
.dga-labdga__hero{
  padding-top:var(--lab-top-gap-desktop) !important;
}
@media (max-width:700px){
  .dga-labdga__hero{
    padding-top:var(--lab-top-gap-mobile) !important;
  }
}

/* --------------------------------------------------------------------
   7. Mobile body-size / line-height parity (falla runs a 16px/1.5 base
   independent of lab.css's 17px/1.68 — bring within the 16-17px/1.6
   token band without touching its hero).
   -------------------------------------------------------------------- */
body.lab-unified{
  font-size:16px;
  line-height:1.6;
}

/* ==========================================================================
   F9 (2026-09-24) — convergencia de familias. Sólo visual: texto, orden de
   lectura del contenido y lógica 3D intactos. Ref: E:\hoy opus\OPUS55_MISION_20260924\AUDIT_FINDING_F9_20260924.md
   ========================================================================== */
/* Tipografía: la home caía a system-ui (experience.css .lab-story). */
.lab-story,.lab-btn{font-family:Manrope,system-ui,sans-serif !important}
.lab-story h1,.lab-story h2,.lab-story h3{font-family:Sora,Manrope,sans-serif !important}
h1,.hero__titulo,.caso-hero h1,.dga-labdga h1,.lab-home-hero h1,.cigre-hero h1,.campaign-hero h1{font-family:Sora,Manrope,sans-serif !important;font-weight:700 !important;letter-spacing:-.035em !important}

/* Botones: una familia (píldora 46px, Manrope 700, sin subrayado).
   Primario cian LAB relleno · secundario contorno. Controles de herramienta 3D no cambian. */
.lab-btn,.boton,.boton--oro,.boton--linea,.dga-labdga__button,.hero-actions a{
  display:inline-flex !important;align-items:center;justify-content:center;min-height:46px !important;
  padding:12px 22px !important;border-radius:999px !important;font:700 15px/1.3 Manrope,system-ui,sans-serif !important;
  text-decoration:none !important;letter-spacing:.005em !important;text-transform:none !important;transition:filter .2s,transform .2s}
.lab-btn:not(.secondary):not(.lab-btn--secondary),.boton:not(.boton--linea),.boton--oro,.dga-labdga__button--primary,.hero-actions .hero-primary{
  background:#59d8dc !important;border:1px solid #59d8dc !important;color:#041c25 !important}
.lab-btn.secondary,.lab-btn--secondary,.boton--linea,.dga-labdga__button:not(.dga-labdga__button--primary),.hero-actions .hero-secondary{
  background:transparent !important;border:1px solid rgba(89,216,220,.7) !important;color:#dff6f6 !important}
.lab-btn:hover,.boton:hover,.dga-labdga__button:hover,.hero-actions a:hover{filter:brightness(1.08);transform:translateY(-1px)}
.lab-btn:focus-visible,.boton:focus-visible,.dga-labdga__button:focus-visible,.hero-actions a:focus-visible{outline:2px solid #e0c060;outline-offset:3px}

/* Cards: un solo radio. */
.tarjeta,.momento,.case-cards article,.study-strip a,.dga-labdga__card,.lab-close-proof > div,.campaign-card,.modelo-card{border-radius:var(--lab-radius-sm) !important}

/* Top-gap móvil (trafoohm / cortocircuito / coordinación): el titular va primero,
   la figura después con su proporción natural (antes: figura recortada arriba + texto centrado). */
@media (max-width:640px){
  .caso-hero__rejilla{display:flex !important;flex-direction:column !important}
  .caso-hero__texto{order:1 !important;justify-content:flex-start !important;padding-block:24px 28px !important}
  .caso-hero__figura{order:2 !important;height:auto !important;max-height:none !important;min-height:0 !important}
  .caso-hero__figura:not(.caso-hero__figura--modelo):not(.caso-hero__figura--diagrama) img.no-zoom,
  .caso-hero__figura img{height:auto !important;min-height:0 !important;aspect-ratio:16/10;object-fit:cover}
}

/* ==========================================================================
   F10 (2026-09-24) — cierre de familias LAB tras QA propia 1440/390.
   Ref: E:\hoy opus\OPUS55_MISION_20260924\F10\AUDIT_F10.md. Sólo visual.
   ========================================================================== */
/* Una sola etiqueta superior por hero: la pseudo-etiqueta genérica
   ("Caso técnico · evidencia para decidir" / "Producto técnico · …") se encimaba
   con el kicker real en 390 px y duplicaba la jerarquía en desktop. */
.lab-story .campaign-hero:before,
.caso--omicron .caso-hero__texto::before{content:none !important;display:none !important}

/* Acción secundaria de los heroes: el enlace subrayado de bajo contraste pasa a la
   misma familia de píldora (contorno), igual que .lab-btn.secondary. */
.lab-actions > a:not(.lab-btn){
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 22px;
  border-radius:999px;border:1px solid rgba(89,216,220,.7);color:#dff6f6 !important;background:transparent;
  font:700 15px/1.3 Manrope,system-ui,sans-serif;text-decoration:none !important;transition:filter .2s,transform .2s}
.lab-actions > a:not(.lab-btn):hover{filter:brightness(1.12);transform:translateY(-1px)}
.lab-actions > a:not(.lab-btn):focus-visible{outline:2px solid #e0c060;outline-offset:3px}

/* Cabecera compartida también en /sfra/cigre/ (antes cabecera blanca .cab propia). */
.lab-header{position:sticky;top:0;z-index:60;background:#071923f5;border-bottom:1px solid #254550;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.lab-header-inner{max-width:1440px;margin:auto;padding:20px 5%;display:flex;align-items:center;gap:32px;position:relative}
.lab-wordmark{color:#fff !important;font:800 20px/1.1 Sora,Manrope,system-ui,sans-serif;text-decoration:none !important;letter-spacing:.13em;white-space:nowrap}
.lab-wordmark span{color:#e5b866;font-size:13px;margin-left:7px}
.lab-menu{display:flex;align-items:center;justify-content:flex-end;gap:24px;flex:1}
.lab-menu a{color:#c5d7d8;text-decoration:none !important;font:600 14px/1.3 Manrope,system-ui,sans-serif}
.lab-menu a:hover,.lab-menu a[aria-current=page]{color:#59d8dc}
.lab-menu-toggle{display:none}
.lab-header a.lab-contact{border:1px solid #59d8dc;padding:9px 17px;border-radius:30px;color:#59d8dc}
@media (max-width:850px){
  .lab-header-inner{padding:16px 5%;justify-content:space-between}
  .lab-menu-toggle{display:block;background:transparent;color:#59d8dc;border:1px solid #365965;border-radius:22px;padding:8px 15px;font:600 14px Manrope,system-ui,sans-serif;cursor:pointer}
  .lab-menu{display:none;position:absolute;left:0;right:0;top:100%;background:#071923;padding:22px 6%;flex-direction:column;align-items:stretch;border-bottom:1px solid #31535c;gap:18px}
  .lab-menu.is-open{display:flex}
}
/* CIGRE móvil: titular primero, figura después (misma regla que .caso-hero F9). */
@media (max-width:920px){
  body.pagina-cigre .cg-hero__media{order:2 !important}
  body.pagina-cigre .cg-hero__text{order:1 !important}
}
/* Kicker del hero CIGRE en la misma voz que .lab-kicker (oro, versalitas). */
body.pagina-cigre .cg-hero .cg-kicker{color:#e5b866 !important;font:750 12px/1.3 Manrope,system-ui,sans-serif !important;letter-spacing:.16em !important;text-transform:uppercase}

/* Casos de texto largo (cortocircuito / coordinación y sus mantenimientos):
   antes columna estrecha pegada a la izquierda + ~200 px muertos entre secciones.
   Ahora índice editorial: número + título fijo a la izquierda, lectura a la derecha,
   filetes finos entre capítulos. El texto no cambia; el número es decorativo (CSS). */
body.lab-unified .main--caso{counter-reset:labsec}
body.lab-unified .main--caso > section.contenedor:has(> h2){counter-increment:labsec;margin:0 auto !important;border-top:1px solid rgba(89,216,220,.14)}
body.lab-unified .main--caso > section.contenedor:has(> h2) > h2::before{
  content:counter(labsec,decimal-leading-zero);display:block;margin-bottom:12px;
  font:700 12px/1 Manrope,system-ui,sans-serif;letter-spacing:.18em;color:#e5b866}
body.lab-unified .main--caso > section.contenedor:not(:has(> h2)){margin:0 auto !important;padding-block:clamp(32px,4vw,56px) !important}
@media (min-width:1000px){
  body.lab-unified .main--caso > section.contenedor:has(> h2){
    display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(48px,6vw,112px);
    max-width:1200px;padding:clamp(56px,6vw,88px) 48px !important}
  body.lab-unified .main--caso > section.contenedor:has(> h2) > h2{
    grid-column:1;grid-row:1 / span 40;align-self:start;position:sticky;top:104px;margin:0 !important;
    font-size:clamp(28px,2.4vw,36px) !important;line-height:1.12 !important}
  body.lab-unified .main--caso > section.contenedor:has(> h2) > :not(h2){grid-column:2;max-width:62ch}
  body.lab-unified .main--caso > section.contenedor:has(> h2) > :nth-child(2){margin-top:0}
}
@media (max-width:999px){
  body.lab-unified .main--caso > section.contenedor:has(> h2){padding:40px 20px !important}
  body.lab-unified .main--caso > section.contenedor:has(> h2) > h2{margin-top:0 !important}
}

/* CIGRE: cuerpo en la misma familia oscura del LAB (antes documento blanco).
   Las figuras técnicas conservan su lienzo claro dentro de una ficha oscura para
   no alterar la lectura de las curvas. Texto intacto. */
body.pagina-cigre{background:#071923}
.pagina-cigre{--cg-azul2:#59d8dc;--cg-linea:#254550;--cg-papel:#0c2832;--cg-muted:#b4c9cd}
body.pagina-cigre .cg-page{background:#071923 !important;color:#edf3f1 !important}
body.pagina-cigre .cg-section--soft{background:#0b2530 !important;border-color:#1c3a44 !important}
body.pagina-cigre .cg-head h2,body.pagina-cigre .cg-model h3,body.pagina-cigre .cg-bandrow__mode b,body.pagina-cigre .cg-bandrow__watch b{color:#edf3f1 !important}
body.pagina-cigre .cg-model,body.pagina-cigre .cg-bandrow{background:#0c2832 !important;border-color:#254550 !important}
body.pagina-cigre .cg-bandrow > div{color:#c1d4d7}
body.pagina-cigre .cg-bandrow__band{background:#123a47 !important}
body.pagina-cigre .cg-page figure{background:#0c2832 !important;border-color:#254550 !important;border-radius:var(--lab-radius-sm,14px) !important}
body.pagina-cigre .cg-page figure img{background:#fff !important}
body.pagina-cigre .cg-page figcaption{color:#b4c9cd !important;border-top-color:#254550 !important}
body.pagina-cigre .cg-page figcaption b{color:#59d8dc !important}
body.pagina-cigre .cg-note{color:#9db5bb !important}
body.pagina-cigre .cg-panel{background:#102f38 !important;border:1px solid #254550}
body.pagina-cigre .cg-close{background:#0c2832 !important;border:1px solid #254550}
body.pagina-cigre .cg-hero{background:linear-gradient(118deg,#071923 0%,#0c2832 60%,#123a47 100%) !important}
body.pagina-cigre .pie{background:#071923 !important;border-top:1px solid #254550 !important;margin-top:0 !important;color:#9db5bb}
body.pagina-cigre .pie p,body.pagina-cigre .pie a{color:#9db5bb !important}
body.pagina-cigre .cg-close .boton,body.pagina-cigre .cg-close .boton--linea{white-space:nowrap;flex:0 0 auto}
body.pagina-cigre .cg-page figcaption{letter-spacing:0 !important}
body.pagina-cigre .cg-page figcaption b{letter-spacing:.01em !important}
/* F12 · fotografía: nunca deformar; mismo criterio de 3 niveles que MAIN (LAB sin gradación de color) */
figure img{object-fit:cover!important}
figure.caso-hero__figura--diagrama img,figure img[src*="diagrama"],figure img[src*="cartel"]{object-fit:contain!important}
:where(img[width][height]){height:auto}