/* ══════════════════════════════════════════════
   Blue4 Alliance
   Sobre IBM Carbon (vendor/carbon.css). Todos los colores salen de sus
   tokens --cds-*, que cambian solos entre g100 (oscuro) y g10 (claro); aquí
   sólo se decide el layout y la tipografía de marketing.
   ══════════════════════════════════════════════ */

@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/IBMPlexSans-Light-Latin1.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/IBMPlexSans-Regular-Latin1.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/IBMPlexSans-SemiBold-Latin1.woff2) format("woff2")}
/* Sólo para el logotipo (ver scripts/build.mjs). */
@font-face{font-family:"Raleway";font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/Raleway-ExtraBold-Latin.woff2) format("woff2")}

:root{
  /* Escala de espaciado de Carbon (múltiplos de 8). */
  --s3:.5rem;--s5:1rem;--s6:1.5rem;--s7:2rem;--s9:3rem;--s10:4rem;--s11:5rem;--s12:6rem;
  --wrap:82rem;                                  /* breakpoint xlg de Carbon */
  --gutter:clamp(1rem,3vw,2rem);
  --nav-h:4rem;
  /* Único color de marca fuera de Carbon: el cuadro hueco del logotipo, en
     el mismo turquesa que usa la alianza en interware.com.mx. */
  --teal:#00c7b1;
  /* Curvas de movimiento de Carbon: entrance expressive y productive. */
  --ease-in:cubic-bezier(0,0,.3,1);
  --ease:cubic-bezier(.2,0,.38,.9);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 1rem)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--cds-background);color:var(--cds-text-primary);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1rem;line-height:1.5;letter-spacing:0;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
svg{flex:none}
a{color:var(--cds-link-primary)}
:focus-visible{outline:2px solid var(--cds-focus);outline-offset:-2px}
[hidden]{display:none!important}
strong,b{font-weight:600}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--cds-button-primary);color:var(--cds-text-on-color);padding:.75rem 1rem}
.skip:focus{left:0}

.wrap{width:min(100% - 2 * var(--gutter),var(--wrap));margin-inline:auto}
.sec{padding:clamp(var(--s10),8vw,var(--s12)) 0}
.sec--alt{background:var(--cds-layer-01)}

/* ── Tipografía (escala expressive de Carbon) ── */
.h1{
  font-size:clamp(2.25rem,1.2rem + 2.6vw,3.25rem);line-height:1.17;font-weight:300;
  margin:0;max-width:18ch;
}
.h2{
  font-size:clamp(1.75rem,1.3rem + 1.5vw,2.625rem);line-height:1.2;font-weight:300;margin:0;
}
.lede{
  color:var(--cds-text-secondary);font-size:clamp(1rem,.9rem + .4vw,1.25rem);line-height:1.5;
  max-width:44ch;margin:var(--s6) 0 0;
}

/* ── Botones ──
   Carbon limita los botones a 20rem y les reserva a la derecha el hueco del
   ícono. Estos dos ajustes son los únicos que se le hacen. */
.form__btn{width:100%;max-width:none}
.nav__cta{padding-inline-end:var(--s5)}

/* ── Navegación ── */
.nav{position:sticky;top:0;z-index:50;background:var(--cds-background);border-bottom:1px solid var(--cds-border-subtle-00)}
.nav__in{display:flex;align-items:center;gap:var(--s7);height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:.625rem;text-decoration:none;color:var(--cds-text-primary);margin-right:auto}
.brand__mark{width:28px;height:28px}
.brand__sq{fill:var(--cds-button-primary)}
.brand__hot{fill:none;stroke:var(--teal);stroke-width:2}
/* El logotipo es la única excepción a Plex: va en Raleway ExtraBold, como en
   la página de la alianza, porque sus cifras de estilo antiguo bajan el «4»
   por debajo de la línea base. Se piden explícitas por si otra versión de la
   fuente cambia el valor por omisión. */
.logo-type{font-family:"Raleway","IBM Plex Sans",sans-serif;font-weight:800;letter-spacing:-.025em;
  font-variant-numeric:oldstyle-nums}
.brand__txt{font-size:1.0625rem;white-space:nowrap}
.nav__links{display:flex;gap:var(--s7)}
.nav__links a{text-decoration:none;color:var(--cds-text-secondary);font-size:.875rem;letter-spacing:.16px}
.nav__links a:hover{color:var(--cds-text-primary)}
@media (max-width:760px){.nav__links{display:none}}
@media (max-width:400px){.brand__txt span{display:none}}  /* sólo «Blue4» */

/* ── Hero ── */
.hero{padding:var(--s10) 0 var(--s11)}
.hero__grid{display:grid;grid-template-columns:3fr 2fr;gap:var(--s10);align-items:start}
.hero__copy{padding-top:var(--s7)}
.hero__img{margin:var(--s9) 0 0;aspect-ratio:16/9;overflow:hidden;background:var(--cds-layer-01)}
.hero__img img{width:100%;height:100%;object-fit:cover}
@media (max-width:1056px){
  .hero{padding-top:var(--s9)}
  .hero__grid{grid-template-columns:1fr;gap:var(--s9)}
  .hero__copy{padding-top:0}
}

/* ── Formulario ── */
.formcard{background:var(--cds-layer-01);padding:clamp(var(--s6),3vw,var(--s7))}
.formcard__k{margin:0;font-size:.875rem;font-weight:600;letter-spacing:.16px;color:var(--cds-link-primary)}
.formcard__t{font-size:1.75rem;line-height:1.29;font-weight:400;margin:var(--s3) 0 var(--s6)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6) var(--s5)}
.form .cds--form-item{min-width:0}
.field--full{grid-column:1/-1}
@media (max-width:520px){.form{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__msg{margin:0;font-size:.875rem;letter-spacing:.16px;color:var(--cds-text-secondary)}
.form__msg:empty{display:none}
.form__msg.err{color:var(--cds-text-error,var(--cds-support-error))}
.form__msg.ok{color:var(--cds-support-success)}
.form__legal{display:flex;gap:var(--s3);align-items:center;margin:0;font-size:.75rem;letter-spacing:.32px;color:var(--cds-text-helper)}
.form__legal svg{fill:currentColor}

.done{padding:var(--s7) 0 var(--s5)}
.done__ic{fill:var(--cds-support-success)}
.done h3{font-size:1.75rem;font-weight:400;margin:var(--s5) 0 var(--s3)}
.done p{color:var(--cds-text-secondary);margin:0 0 var(--s6);max-width:36ch}

/* ── Aliados ── */
.allies{border-block:1px solid var(--cds-border-subtle-00)}
.allies__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}
.allies__list li{display:grid;place-items:center;height:6rem;padding:var(--s6)}
.allies__list li + li{border-left:1px solid var(--cds-border-subtle-00)}
.allies__list img{max-height:2.5rem;width:auto;object-fit:contain;
  /* Los logotipos llegan en colores distintos (blancos, TPS en azul marino,
     IBM en gris). Se igualan al color del texto para que ninguno se pierda en
     el fondo ni destaque sobre los demás. */
  filter:brightness(0);opacity:.8}
.allies__ibm img{max-height:3.5rem}
@media (prefers-color-scheme:dark){.allies__list img{filter:brightness(0) invert(1);opacity:.85}}
@media (max-width:760px){
  .allies__list{grid-template-columns:1fr 1fr}
  .allies__list li{height:5rem;border-left:0!important;border-top:1px solid var(--cds-border-subtle-00)}
  .allies__list li:nth-child(-n+2){border-top:0}
  .allies__list li:nth-child(even){border-left:1px solid var(--cds-border-subtle-00)!important}
  .allies__ibm{grid-column:1/-1}
}

/* ── Por qué ──
   Composición 2 + 1: el enfoque holístico es el argumento central de la
   alianza («sin silos») y ocupa la columna grande. El hueco de 1px deja ver el
   fondo como línea divisoria, igual que las retículas de ibm.com. */
.why{display:grid;grid-template-columns:7fr 5fr;gap:1px;background:var(--cds-border-subtle-00);
  border:1px solid var(--cds-border-subtle-00);margin-top:var(--s9)}
.why__tile{background:var(--cds-layer-01);padding:var(--s7)}
.why__tile--lead{grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s10);
  min-height:26rem;background:var(--cds-background-brand);color:var(--cds-text-on-color);
  position:relative;isolation:isolate;overflow:hidden}
/* La foto va en gris y se multiplica con el azul del bloque: las zonas
   claras quedan en #0f62fe y las oscuras casi negras, así que el texto blanco
   nunca baja del contraste que tiene sobre el azul liso. La foto se oscurece
   antes porque las oficinas claras casi desaparecen al multiplicarse. */
.why__img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.72) contrast(1.35);mix-blend-mode:multiply}
/* Velo en la mitad inferior, donde va el texto: la foto trae detalle justo ahí. */
.why__tile--lead::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgb(0 17 65 / .8),rgb(0 17 65 / 0) 65%)}
.why__ic{fill:var(--cds-link-primary)}
.why__tile--lead .why__ic{fill:currentColor}
.why h3{font-size:1.25rem;line-height:1.4;font-weight:400;margin:var(--s5) 0 var(--s3)}
.why__tile--lead h3{font-size:clamp(1.75rem,1.4rem + 1vw,2.25rem);line-height:1.25;font-weight:300;margin:0 0 var(--s5)}
.why p{margin:0;color:var(--cds-text-secondary);max-width:48ch}
.why__tile--lead p{color:var(--cds-text-on-color);font-size:1.125rem}
@media (max-width:860px){
  .why{grid-template-columns:1fr}
  .why__tile--lead{grid-row:auto;min-height:0}
}

/* ── Catálogo ── */
.catalog__tabs{margin-top:var(--s9)}
.panels{padding-top:var(--s9)}
.panel{display:grid;grid-template-columns:5fr 7fr;gap:var(--s7) var(--s10);align-items:start}
.panel + .panel{margin-top:var(--s10)}
.js .panel + .panel{margin-top:0}
.panel__ic{fill:var(--cds-link-primary)}
.panel h3{font-size:1.75rem;line-height:1.29;font-weight:400;margin:var(--s6) 0 var(--s5)}
.panel p{color:var(--cds-text-secondary);margin:0}
.ticks{list-style:none;margin:0;padding:0;border-top:1px solid var(--cds-border-subtle-01)}
.ticks li{display:flex;gap:var(--s5);align-items:flex-start;padding:var(--s6) 0;font-size:1.125rem;line-height:1.4}
.ticks li + li{border-top:1px solid var(--cds-border-subtle-01)}
.ticks svg{fill:var(--cds-link-primary);margin-top:.15em}
@media (max-width:860px){.panel{grid-template-columns:1fr}}

/* ── Resultados ── */
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7)}
.stats li{border-top:1px solid var(--cds-border-subtle-01);padding-top:var(--s5)}
.stats b{display:block;font-size:clamp(3.5rem,2rem + 4.5vw,5.75rem);line-height:1.1;font-weight:300}
.stats b::first-letter{color:var(--cds-link-primary)}
.stats span{display:block;margin-top:var(--s3);color:var(--cds-text-secondary);font-size:1.125rem}
@media (max-width:700px){.stats{grid-template-columns:1fr}}
.accr{margin-top:var(--s10);display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s5) var(--s9)}
.accr__t{margin:0;font-size:1rem;font-weight:600}
.accr__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s3) var(--s7)}
.accr__list li{color:var(--cds-text-secondary);font-size:1.125rem}

/* ── Cierre ── */
.cta{background:var(--cds-background-brand);color:var(--cds-text-on-color);padding:clamp(var(--s10),8vw,var(--s12)) 0}
.cta__in{display:grid;grid-template-columns:1fr auto;gap:var(--s7) var(--s10);align-items:end}
.cta .h2{max-width:22ch}
.cta .lede{color:var(--cds-text-on-color);max-width:52ch}
/* El foco por defecto de g10 es azul y desaparece sobre esta banda. */
.cta :focus-visible{outline-color:#fff}
@media (max-width:860px){.cta__in{grid-template-columns:1fr}}

/* ── Pie ── */
.foot{padding:var(--s7) 0;color:var(--cds-text-helper);font-size:.875rem;letter-spacing:.16px}
.foot__in{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s7);align-items:center}
.foot p{margin:0}
.foot a{color:var(--cds-link-primary)}
.foot__brand{color:var(--cds-text-primary)}
.foot__c{margin-left:auto!important}
@media (max-width:700px){.foot__c{margin-left:0!important}}

/* ── Entrada al hacer scroll ──
   Sólo cuando el visitante no pidió movimiento reducido; app.js pone .rv
   únicamente si hay IntersectionObserver, así que sin JS todo se ve. */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;translate:0 1.5rem;transition:opacity .4s var(--ease-in),translate .4s var(--ease-in)}
  .rv.in{opacity:1;translate:0 0}
}