/* ══════════════════════════════════════════════
   Blue4 Alliance
   Réplica del diseño de https://www.interware.com.mx/campaign/blue4-alliance.
   Los valores (colores, tamaños, espaciados) salen de sus clases de Tailwind;
   el nombre de la utilidad original va en comentario cuando ayuda a comparar.
   ══════════════════════════════════════════════ */

@font-face{font-family:"Raleway";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/Raleway.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/Inter.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/IBMPlexMono-Medium.woff2) format("woff2")}

:root{
  --navy:#1f2a44;
  --navy-d:#14171f;           /* hover de los botones navy */
  --teal:#00c7b1;
  --teal-700:#007d6e;
  --red:#e4002b;
  --red-700:#c8002a;
  --text:#1d1d1d;             /* iw-text */
  --border:#e2e4e9;           /* iw-border */
  --surface:#f6f6f8;          /* iw-surface */
  --paper:#eef1f5;
  --display:"Raleway",system-ui,sans-serif;
  --sans:"Inter",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:4rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);font-size:1rem;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
h1,h2,h3,p,ul{margin:0}
ul{list-style:none;padding:0}
img,svg{display:block}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--navy);color:#fff;padding:.75rem 1rem}
.skip:focus{left:0}
.teal{color:var(--teal)}

/* max-w-[1440px] px-5 md:px-8 lg:px-20 */
.wrap{max-width:1440px;margin-inline:auto;padding-inline:1.25rem}
@media (min-width:768px){.wrap{padding-inline:2rem}}
@media (min-width:1024px){.wrap{padding-inline:5rem}}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;color:#fff;
  font-family:var(--sans);text-transform:uppercase;white-space:nowrap;transition:background-color .15s,filter .15s,opacity .15s}
.btn--sm{height:2.5rem;padding:0 1.25rem;font-size:12px;font-weight:600;letter-spacing:.1em}
.btn--lg{height:3rem;padding:0 2rem;font-size:.75rem;font-weight:700;letter-spacing:1.5px}
.btn--navy{background:var(--navy)}
.btn--navy:hover{background:var(--navy-d)}
.btn--red{background:var(--red);border-radius:.25rem}
.btn--red:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.6;cursor:progress}
.btn--full{width:100%}

/* ── Etiqueta con barra roja (kicker) ── */
.kicker{display:flex;align-items:center;gap:.5rem}
.kicker__bar{width:10px;height:2px;background:var(--red);border-radius:1px;flex:none}
.kicker__t{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgb(29 29 29 / .7)}
.kicker__t--teal{color:var(--teal)}
.kicker__t--red{color:var(--red-700)}

/* ── Navegación ── */
.nav{position:sticky;top:0;z-index:50;background:rgb(238 241 245 / .9);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-bottom:1px solid var(--border)}
.nav__in{height:4rem;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.625rem;flex:none}
.brand__mark{display:grid;place-items:center;width:1.75rem;height:1.75rem;background:var(--navy)}
.brand__mark span{width:.75rem;height:.75rem;border:2px solid var(--teal);border-radius:2px}
.brand__txt{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.025em;color:var(--navy)}

/* ── Hero ── */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;scroll-margin-top:4rem}
.hero__grid{padding-top:3rem;padding-bottom:3.5rem;display:grid;gap:3rem;align-items:center}
@media (min-width:768px){.hero__grid{padding-top:4rem;padding-bottom:5rem}}
@media (min-width:1024px){.hero__grid{padding-block:6rem;grid-template-columns:repeat(12,minmax(0,1fr));gap:4rem}
  .hero__copy{grid-column:span 7}
  .card{grid-column:span 5}}
.hero__copy{display:flex;flex-direction:column;gap:1.5rem;min-width:0}
/* b4-hero-title */
.hero__t{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  font-size:clamp(1.75rem,6vw,4rem);line-height:1;max-width:14ch}
.hero__lede{font-weight:600;font-size:15px;line-height:1.625;color:rgb(255 255 255 / .75);max-width:480px}
@media (min-width:768px){.hero__lede{font-size:1rem}}
.hero__list{display:flex;flex-direction:column;gap:.625rem;max-width:460px}
.hero__list li{display:flex;align-items:flex-start;gap:.75rem;font-size:.875rem;line-height:1.375;color:rgb(255 255 255 / .7)}
.dot{margin-top:7px;width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none}

.allies{display:flex;flex-direction:column;align-items:center;gap:2rem;margin-top:.25rem;padding-top:1.5rem;
  border-top:1px solid rgb(255 255 255 / .15)}
.allies__grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;place-items:center}
/* Sus logotipos traen margen dentro del archivo y los muestran en cajas de
   72/90 px de alto; los nuestros vienen recortados. Cada caja conserva la
   altura del original y el logo va adentro al tamaño visible que tiene allá. */
.allies__grid img{box-sizing:content-box;width:auto;max-width:200px;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.7;transition:opacity .15s;--box:72px;
  height:var(--h);padding-block:calc((var(--box) - var(--h)) / 2)}
.allies__grid img:hover{opacity:1}
.logo--iw{--h:36px}.logo--tps{--h:38px}.logo--cmx{--h:28px}.logo--jv{--h:24px}
.allies__ibm{display:flex;align-items:center;justify-content:center;flex:none;padding-top:1.75rem;border-top:1px solid rgb(255 255 255 / .1)}
/* El sello de IBM va en su gris original, sin filtro, igual que allá. */
.allies__ibm img{height:5rem;width:auto}
@media (min-width:768px){
  .allies{flex-direction:row;gap:2.5rem}
  .allies__grid{flex:1;min-width:0}
  .allies__grid img{--box:90px}
  .logo--iw{--h:44px}.logo--tps{--h:46px}.logo--cmx{--h:34px}.logo--jv{--h:29px}
  .allies__ibm{padding:0 0 0 2.5rem;border-top:0;border-left:1px solid rgb(255 255 255 / .15)}
  .allies__ibm img{height:6rem}
}

/* ── Formulario ── */
.card{width:100%;background:#fff;color:var(--text);border:1px solid var(--border);border-radius:.5rem;padding:1.5rem;
  box-shadow:0 25px 50px -12px rgb(0 0 0 / .3);scroll-margin-top:5rem}
@media (min-width:768px){.card{padding:2rem}}
.kicker--card{margin-bottom:.375rem}
.card__t{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.333;letter-spacing:.3px;color:var(--navy);margin-bottom:1.5rem}
.fields{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:640px){.fields{grid-template-columns:1fr 1fr}.field--full{grid-column:span 2}}
.field label{display:block;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgb(29 29 29 / .6);margin-bottom:.375rem}
.req{color:var(--red)}
.field input,.field select{width:100%;height:2.75rem;padding:0 .875rem;background:#fff;border:1px solid var(--border);border-radius:.25rem;
  font-family:var(--sans);font-size:.875rem;color:var(--navy);outline:none;transition:border-color .15s,box-shadow .15s}
.field input::placeholder{color:rgb(29 29 29 / .3)}
.field input:focus,.field select:focus{border-color:var(--navy);box-shadow:0 0 0 2px rgb(31 42 68 / .1)}
.field__err{display:none;margin-top:.25rem;font-size:11px;color:var(--red)}
.field.is-bad input{border-color:var(--red)}
.field.is-bad .field__err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__btn{margin-top:1.5rem}
.form__msg{margin-top:.75rem;font-size:11px;text-align:center;color:rgb(29 29 29 / .7)}
.form__msg:empty{display:none}
.form__msg.err{color:var(--red)}
.form__msg.ok{color:var(--teal-700)}
.form__legal{margin-top:.875rem;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:11px;text-align:center;color:rgb(29 29 29 / .55)}
.form__legal svg{width:.875rem;height:.875rem;flex:none;fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.done{text-align:center;padding-block:1rem}
.done__ic{display:grid;place-items:center;width:3.5rem;height:3.5rem;margin:0 auto 1.25rem;border-radius:50%;background:rgb(0 199 177 / .12)}
.done__ic svg{width:1.75rem;height:1.75rem;fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.done h3{font-family:var(--display);font-weight:800;font-size:1.25rem;text-transform:uppercase;color:var(--navy);margin-bottom:.5rem}
.done p{font-size:.875rem;color:rgb(29 29 29 / .7);max-width:20rem;margin:0 auto 1.5rem}
.done__reset{background:none;border:0;font-weight:600;font-size:.75rem;letter-spacing:1.5px;text-transform:uppercase;color:rgb(29 29 29 / .5);transition:color .15s}
.done__reset:hover{color:var(--navy)}

/* ── Secciones ── */
.sec{border-bottom:1px solid var(--border);scroll-margin-top:4rem}
.sec > .wrap{padding-block:4rem}
@media (min-width:768px){.sec > .wrap{padding-block:5rem}}
@media (min-width:1024px){.sec > .wrap{padding-block:6rem}}
.sec--paper{background:var(--paper)}
.sec--surface{background:var(--surface)}
.sec--navy{background:var(--navy);color:#fff;border-bottom:0}
.sec--flat{border-bottom:0}   /* el pie ya trae su línea superior */
.sec__head{display:flex;flex-direction:column;gap:.75rem;margin-bottom:3rem}
.sec__head--center{align-items:center;text-align:center;gap:1rem;margin-bottom:3.5rem}
/* b4-h2 */
.h2{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--navy);
  font-size:clamp(1.6rem,5vw,3rem);line-height:1.05}
.rule{display:block;width:4rem;height:3px;background:var(--red)}
.sec__lede{font-size:.875rem;line-height:1.625;color:rgb(29 29 29 / .7);max-width:36rem}
@media (min-width:768px){.sec__lede{font-size:15px}}

/* ── Por qué ── */
.why{display:grid;grid-template-columns:1fr}
.why__item{display:flex;flex-direction:column;gap:1rem;padding-block:2rem;border-bottom:1px solid var(--border)}
.why__item:last-child{border-bottom:0}
@media (min-width:768px){
  .why{grid-template-columns:repeat(3,1fr)}
  .why__item{padding:.5rem 2.25rem;border-bottom:0}
  .why__item + .why__item{border-left:1px solid var(--border)}
}
.why__ic{display:grid;place-items:center;width:3rem;height:3rem;background:var(--navy)}
.why__ic svg{width:1.5rem;height:1.5rem;fill:none;stroke:var(--teal);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.why h3{font-family:var(--display);font-weight:700;font-size:1.125rem;line-height:1.556;letter-spacing:.3px;color:var(--navy)}
.why p{font-size:.875rem;line-height:1.65;color:rgb(29 29 29 / .75);max-width:20rem}

/* ── Catálogo ── */
.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;border-bottom:1px solid var(--border);margin-bottom:2.5rem;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{white-space:nowrap;padding:.875rem 1.25rem;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  font-weight:700;font-size:13px;letter-spacing:.5px;text-transform:uppercase;color:rgb(29 29 29 / .55);transition:color .15s,border-color .15s}
.tab:hover{color:var(--navy)}
.tab[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--navy)}
.panel{display:grid;gap:2.5rem;align-items:start}
.panel + .panel{margin-top:2.5rem}
.js .panel + .panel{margin-top:0}
@media (min-width:1024px){.panel{grid-template-columns:1fr 1fr;gap:4rem}}
.panel__txt{display:flex;flex-direction:column;gap:1rem}
.panel h3{font-family:var(--display);font-weight:700;font-size:1.25rem;line-height:1.4;letter-spacing:.3px;color:var(--navy)}
.panel p{font-size:.875rem;line-height:1.7;color:rgb(29 29 29 / .75);max-width:28rem}
@media (min-width:768px){.panel h3{font-size:1.5rem;line-height:1.333}.panel p{font-size:15px}}
.ticks li{display:flex;align-items:flex-start;gap:.75rem;padding-block:.875rem;border-bottom:1px solid var(--border);font-size:15px;color:var(--text)}
.ticks li:first-child{border-top:1px solid var(--border)}
.ticks svg{width:1.25rem;height:1.25rem;margin-top:.125rem;flex:none;fill:none;stroke:var(--teal-700);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ── Métricas ── */
.stats{display:grid;grid-template-columns:1fr;row-gap:2.5rem;border-bottom:1px solid rgb(255 255 255 / .15);padding-bottom:3.5rem;margin-bottom:3rem}
.stat{display:flex;flex-direction:column;align-items:center;text-align:center}
@media (min-width:640px){
  .stats{grid-template-columns:repeat(3,1fr);row-gap:0}
  .stat{padding-inline:2rem}
  .stat + .stat{border-left:1px solid rgb(255 255 255 / .15)}
}
.stat__n{font-family:var(--display);font-weight:800;font-size:3rem;line-height:1;color:var(--teal)}
@media (min-width:768px){.stat__n{font-size:3.75rem}}
.stat__l{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgb(255 255 255 / .65);margin-top:.75rem}
.accr{display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.accr h3{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:rgb(255 255 255 / .5)}
.accr__list{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem}
.accr__list span{display:inline-flex;align-items:center;padding:.5rem 1rem;border:1px solid rgb(255 255 255 / .2);
  font-weight:700;font-size:13px;letter-spacing:.5px;color:rgb(255 255 255 / .85)}

/* ── Cierre ── */
.cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem;border:1px solid var(--border);background:#fff;padding:3.5rem 1.5rem}
@media (min-width:768px){.cta{padding:4rem 3rem}}
.cta .h2{max-width:42rem}
.cta p{font-size:1rem;line-height:1.625;color:rgb(29 29 29 / .7);max-width:42rem}
.cta__btns{display:flex;flex-direction:column;gap:.75rem;padding-top:.5rem;width:100%}
.cta__btns .btn{width:100%}
@media (min-width:640px){.cta__btns{flex-direction:row;align-items:center;justify-content:center;width:auto}.cta__btns .btn{width:auto}}

/* ── Pie ── */
.foot{background:var(--paper);border-top:1px solid var(--border)}
.foot__in{padding-block:2.5rem;display:flex;flex-direction:column;gap:1.5rem;text-align:center}
@media (min-width:768px){.foot__in{flex-direction:row;align-items:center;justify-content:space-between;text-align:left}}
.foot__brand{font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:-.025em;color:var(--navy)}
.foot__c{font-size:12px;color:rgb(29 29 29 / .55);margin-top:.25rem}

/* ── Entrada al hacer scroll ──
   Igual que el original: sube 24 px y aparece en 0.7 s. Sólo se oculta con JS
   activo, para que sin JS no quede nada invisible. */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}