/* ============================================================
   JASAN Generadores — Landing
   Tokens + estilos base. Mobile-first: base = 1 columna,
   los @media suben con min-width.
   ============================================================ */

:root{
  --ink:#1A1A1A;
  --blue:#23388C;
  --blue-dark:#16245e;
  --blue-soft:#93a5e8;
  --blue-pale:#d5dcf4;
  --white:#ffffff;
  --gray-100:#E6E6E6;
  --gray-300:#b9b9b8;
  --gray-500:#878786;   /* AA solo sobre --ink (4.84:1); NO usar sobre blanco */
  --gray-600:#757575;   /* texto secundario sobre fondos claros — AA 4.61:1 */
  --gray-700:#3d3d3d;
  --line-dark:#343434;
  --line-mid:#4a4a4a;
  --line-hero:#5f6470;
  /* Velo de legibilidad del hero: --ink con alfa. Tokens porque rgba() no
     admite var() de un hex sin color-mix(), y no queremos hex sueltos en reglas. */
  --veil-1:rgba(26,26,26,1);
  --veil-2:rgba(26,26,26,.86);
  --veil-3:rgba(26,26,26,.28);
  /* Anillo de foco: temático, nunca el azul por defecto del navegador */
  --focus:#23388C;
  --focus-light:#93a5e8; /* sobre --ink y --blue */
  --pill:999px;          /* botones de cotizar: forma de pastilla (v2) */
  --maxw:1280px;
  --pad-x:clamp(20px,4vw,56px);
  --pad-y:clamp(56px,7vw,96px);
  --header-h:96px;       /* alto del header sticky → scroll-margin de las anclas */
  --float-space:0px;     /* hueco para el WhatsApp flotante; 0 porque está oculto */
  --text-on-dark:#f0f0f0;    /* texto fuerte sobre --ink */
  --text-muted-dark:#c9c9c9; /* leads sobre --ink */
  --text-dim-dark:#a3a3a3;   /* texto terciario sobre --ink */
  --text-link-dark:#e2e2e2;  /* enlaces y datos sobre --ink */
  --blue-note:#a9b6e4;       /* nota sobre --blue */
  --blue-dot:#5f77d6;        /* punto decorativo sobre --ink */
  --hairline-on-blue:rgba(255,255,255,.6); /* filete del CTA sobre --blue */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:'Manrope',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-wrap:pretty;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--blue); text-decoration:none}
a:hover{color:var(--blue-dark)}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
/* El azul de marca es invisible sobre --ink (1.67:1): sobre superficies oscuras
   el anillo cambia a --focus-light (7.28:1 sobre --ink, 4.1:1 sobre --blue). */
.header :focus-visible,
.menu :focus-visible,
.hero :focus-visible,
.section--dark :focus-visible,
.proc__panel :focus-visible,
.close :focus-visible,
.footer :focus-visible,
.float:focus-visible{outline-color:var(--focus-light)}
::selection{background:var(--blue); color:var(--white)}
h1,h2,h3,p{margin:0}

/* El header sticky tapaba el inicio de la sección al saltar por ancla */
section[id],#main{scroll-margin-top:calc(var(--header-h) + 4px)}

.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad-x); padding-right:var(--pad-x)}
.section{padding-top:var(--pad-y); padding-bottom:var(--pad-y)}
.section--dark{background:var(--ink); color:var(--white)}
.section--rule{border-bottom:2px solid var(--ink)}
.skip{position:absolute; left:-9999px}
.skip:focus{
  left:8px; top:8px; z-index:100; background:var(--white); color:var(--ink);
  padding:12px 16px; min-height:44px; display:inline-flex; align-items:center;
  outline:2px solid var(--focus); outline-offset:2px;
}

/* --- Tipografía ------------------------------------------------ */
.kicker{
  font-size:12.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue);
}
.kicker--light{color:var(--blue-soft); letter-spacing:.16em}
.kicker-row{display:flex; align-items:center; gap:12px; margin-bottom:20px}
.kicker-dot{width:10px; height:10px; background:var(--blue); display:block; flex:0 0 auto}
.kicker-dot--light{background:var(--blue-dot)}
.kicker-bar{width:34px; height:2px; background:var(--blue-soft); display:block; flex:0 0 auto}
/* text-wrap:balance reparte las líneas para que la última no quede con una sola
   palabra. Hacía falta al alargarse el titular a tres plazas: "Aguascalientes"
   caía sola en TODOS los anchos. Bajar el font-size no lo arreglaba, porque
   max-width está en ch y se encoge en la misma proporción que la letra.
   Navegadores sin soporte lo ignoran y vuelven al reparto actual. */
.h1{
  font-weight:800; font-size:clamp(40px,5.6vw,86px); line-height:.98;
  letter-spacing:-.035em; color:var(--white); max-width:19ch;
  text-wrap:balance;
}
.h2{font-weight:800; font-size:clamp(30px,3.2vw,46px); line-height:1.05; letter-spacing:-.025em}
.h2--onink{color:var(--white)} /* sustituye los style="color:#fff" en línea */
.h3{font-weight:700; font-size:19px; line-height:1.2; letter-spacing:-.01em}
.lead{font-size:17px; line-height:1.6; color:var(--gray-700); max-width:52ch}
.lead--light{color:var(--text-muted-dark)}
.body{font-size:16px; line-height:1.55; color:var(--gray-700)}

/* --- CTA ------------------------------------------------------- */
.cta{
  display:inline-flex; align-items:center; gap:11px;
  background:var(--blue); color:var(--white); padding:14px 22px;
  font-size:14.5px; font-weight:600; letter-spacing:-.005em;
  min-height:44px; text-align:left;
  border-radius:var(--pill);
  transition:background 160ms ease,color 160ms ease;
}
.cta:hover{background:var(--blue-dark); color:var(--white)}
.cta svg{opacity:.9; flex:0 0 auto}
/* inset sin difuminado = filete de 1px, no una sombra */
.cta--onblue{background:transparent; box-shadow:inset 0 0 0 1px var(--hairline-on-blue)}
.cta--onblue:hover{background:var(--white); color:var(--blue)}
.cta--white{background:var(--white); color:var(--blue); padding:15px 24px; font-size:15px; letter-spacing:-.01em}
.cta--white:hover{background:var(--ink); color:var(--white)}
.cta--hero:hover{background:var(--white); color:var(--blue)}
/* <620px el botón del header queda solo con el ícono (el texto vive en aria-label) */
.header .cta{padding:14px}
.header .cta span{display:none}

/* --- Header ---------------------------------------------------- */
.header{position:sticky; top:0; z-index:50; background:var(--ink)}
.header__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--pad-x); height:96px;
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
}
.brand{display:flex; align-items:center; flex:0 0 auto}
.brand picture{display:flex}
.brand img{height:44px; width:auto}
.nav{display:none}
.header .cta{margin-left:auto}
.burger{
  margin-left:12px; flex:0 0 auto; width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; color:var(--white);
}
.burger span{display:block; width:24px; height:2px; background:var(--white); box-shadow:0 -7px 0 var(--white),0 7px 0 var(--white)}

.menu{
  position:fixed; inset:0; z-index:70; background:var(--ink);
  display:none; flex-direction:column; padding:24px var(--pad-x);
}
.menu[data-open]{display:flex}
.menu__top{display:flex; justify-content:flex-end}
.menu__close{
  width:44px; height:44px; background:transparent; border:0; cursor:pointer;
  color:var(--white); font-size:28px; line-height:1; font-family:inherit;
}
.menu__links{display:flex; flex-direction:column; gap:4px; margin-top:24px}
.menu__links a{
  color:var(--white); font-size:22px; font-weight:700; letter-spacing:-.01em;
  padding:16px 0; border-top:2px solid var(--line-mid);
}
.menu__links a:hover{color:var(--blue-soft)}

/* --- Hero ------------------------------------------------------ */
.hero{position:relative; background:var(--ink)}
/* El <picture> es quien se posiciona: así no genera caja de línea en el flujo */
.hero__pic{position:absolute; inset:0; display:block}
.hero__img{width:100%; height:100%; object-fit:cover; opacity:.42}
/* Parada oscura extendida a 58%: protege la columna de texto (max-width:58ch)
   en pantallas anchas, donde antes el lead caía sobre zona clara de la foto. */
.hero__veil{position:absolute; inset:0; background:linear-gradient(90deg,var(--veil-1) 0%,var(--veil-2) 58%,var(--veil-3) 100%)}
.hero__inner{position:relative; max-width:var(--maxw); margin:0 auto; padding:clamp(70px,9vw,140px) var(--pad-x) clamp(60px,7vw,110px)}
.hero__lead{font-size:clamp(16px,1.2vw,19px); line-height:1.6; color:var(--text-muted-dark); max-width:58ch; margin-top:32px}
.hero__actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px}
.trust{
  margin-top:clamp(52px,6vw,88px);
  display:grid; grid-template-columns:1fr; gap:36px clamp(20px,2.4vw,40px);
}
.trust > div{border-top:2px solid var(--line-hero); padding-top:20px}
.trust p{font-size:15px; line-height:1.45; font-weight:600; color:var(--text-on-dark)}

/* --- Encabezado de sección (lead grid) ------------------------- */
.lead-grid{
  display:grid; grid-template-columns:1fr; gap:24px clamp(32px,5vw,80px);
  align-items:start; margin-bottom:clamp(36px,4vw,56px);
}

/* --- Capacidad ------------------------------------------------- */
.caps{display:grid; grid-template-columns:1fr; gap:34px}
.cap{display:flex; flex-direction:column}
.cap__txt{display:flex; flex-direction:column}
.cap__media{
  height:clamp(150px,15vw,200px); background:var(--gray-100);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.cap__media picture{display:block; width:100%; height:100%}
.cap__media img{width:100%; height:100%; object-fit:contain; padding:14px}
.cap__num{font-weight:800; font-size:clamp(28px,2.6vw,38px); line-height:1; letter-spacing:-.02em; color:var(--blue); margin-top:26px}
.cap__tag{margin-top:14px; font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-600)}
.cap__body{margin-top:16px}
.caps-foot{
  border-top:2px solid var(--ink); margin-top:clamp(32px,3.5vw,44px);
  padding-top:clamp(32px,3.5vw,44px);
  display:grid; grid-template-columns:1fr; gap:28px clamp(32px,5vw,72px); align-items:center;
}
.caps-foot p{font-size:17px; line-height:1.6; max-width:64ch}
.caps-foot .cta{justify-self:start}

/* --- Industrias ------------------------------------------------ */
.inds{display:grid; grid-template-columns:1fr; gap:0 clamp(32px,5vw,80px)}
.ind{border-top:2px solid var(--line-mid); padding:22px 0; display:flex; align-items:baseline; gap:20px}
/* --blue sobre --ink da 1.67:1 (ilegible): en oscuro va --blue-soft (7.28:1) */
.ind__num{font-weight:800; font-size:13px; letter-spacing:.1em; color:var(--blue-soft); flex:0 0 auto}
.ind__name{font-weight:700; font-size:clamp(20px,2vw,28px); line-height:1.1; letter-spacing:-.02em; color:var(--white)}

/* --- Proceso --------------------------------------------------- */
/* Lista de pasos + foto con el panel azul encima. Apilados en móvil,
   a dos columnas (1.15fr / 1fr) desde 980px. */
.proc{display:grid; grid-template-columns:1fr; gap:clamp(32px,4vw,64px)}

.steps{border-top:2px solid var(--ink)}
.step{
  display:flex; align-items:baseline; gap:clamp(20px,2.4vw,36px);
  padding:clamp(24px,2.8vw,36px) 0;
  border-bottom:2px solid var(--gray-100);
}
.step__num{
  font-weight:800; font-size:clamp(32px,3.2vw,46px); line-height:1;
  letter-spacing:-.03em; color:var(--blue); flex:0 0 auto;
}
.step h3{font-weight:700; font-size:clamp(19px,1.7vw,23px); line-height:1.2; letter-spacing:-.015em}
/* Va por clase y no como `.step p`: ese selector (0,1,1) le gana a .step__num
   (0,1,0) y dejaba el número en 16px gris en vez de grande y azul. */
.step__body{margin-top:10px; font-size:16px; line-height:1.55; color:var(--gray-700)}

.proc__media{position:relative; min-height:clamp(300px,34vw,520px); background:var(--gray-100); overflow:hidden}
.proc__media picture{display:block}
.proc__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.proc__panel{
  position:absolute; left:0; right:0; bottom:0;
  background:var(--blue); color:var(--white);
  padding:clamp(20px,2.4vw,30px);
}
.proc__panel p{font-weight:800; font-size:clamp(18px,1.7vw,24px); line-height:1.2; letter-spacing:-.02em}

/* --- Por qué --------------------------------------------------- */
.whys{display:grid; grid-template-columns:1fr; gap:0 clamp(20px,2.4vw,32px)}
.why{border-top:2px solid var(--line-mid); padding:22px 0 26px}
.why p{font-weight:700; font-size:17.5px; line-height:1.3; letter-spacing:-.01em; color:var(--white)}

/* --- Casos ----------------------------------------------------- */
.cases{display:grid; grid-template-columns:1fr; gap:36px clamp(20px,2.4vw,32px)}
.case__media{position:relative; height:clamp(200px,20vw,280px); overflow:hidden; background:var(--gray-100)}
.case__media picture{display:block}
.case__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.case__tag{margin-top:20px; font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue)}
.case__body{margin-top:12px; font-size:16px; line-height:1.55}

/* --- FAQ ------------------------------------------------------- */
.faq{background:var(--gray-100)}
.faq__grid{display:grid; grid-template-columns:1fr; gap:36px clamp(32px,5vw,80px); align-items:start}
.faq__intro p{margin-top:22px; font-size:16px; line-height:1.6; color:var(--gray-700); max-width:36ch}
.faq__item{border-bottom:2px solid var(--gray-300)}
/* Cada pregunta es un h3 real (jerarquía h1→h2→h3 y navegable por encabezados);
   el h3 no aporta estilo: manda el botón. */
.faq__h{margin:0; font:inherit}
.faq__q{
  width:100%; background:transparent; border:0; padding:24px 0;
  display:flex; align-items:flex-start; gap:20px;
  cursor:pointer; text-align:left; font-family:inherit; min-height:44px;
}
.faq__q:hover{opacity:.6}
.faq__n{font-weight:800; font-size:13px; letter-spacing:.08em; color:var(--blue); flex:0 0 auto; padding-top:5px}
.faq__label{flex:1 1 auto; font-weight:700; font-size:clamp(17px,1.5vw,20px); line-height:1.3; letter-spacing:-.01em; color:var(--ink)}
.faq__icon{flex:0 0 auto; width:22px; height:22px; position:relative; margin-top:4px}
.faq__icon i{position:absolute; top:10px; left:0; width:22px; height:2px; background:var(--blue); display:block}
.faq__icon i:last-child{transition:transform 220ms ease; transform:rotate(90deg)}
.faq__q[aria-expanded="true"] .faq__icon i:last-child{transform:rotate(0deg)}
.faq__a{overflow:hidden; max-height:0; transition:max-height 300ms ease}
.faq__a p{margin:0 0 26px; padding-left:33px; font-size:16px; line-height:1.6; color:var(--gray-700); max-width:62ch}

/* --- CTA final ------------------------------------------------- */
.close{background:var(--blue); color:var(--white)}
.close__grid{display:grid; grid-template-columns:1fr; gap:36px clamp(32px,5vw,80px); align-items:center; padding-top:clamp(60px,7vw,104px); padding-bottom:clamp(60px,7vw,104px)}
.close h2{font-weight:800; font-size:clamp(34px,4.2vw,62px); line-height:1.02; letter-spacing:-.03em; color:var(--white)}
.close__lead{margin-top:26px; font-size:clamp(16px,1.15vw,18px); line-height:1.6; color:var(--blue-pale); max-width:48ch}
.close__actions{display:flex; flex-direction:column; gap:16px; align-items:flex-start}
.close__note{font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-note)}

/* --- Footer ---------------------------------------------------- */
.footer{background:var(--ink); color:var(--white)}
/* El WhatsApp flotante es fixed y se posa sobre el final del footer: se le
   reserva el hueco para que nunca tape los enlaces ni el aviso legal. */
.footer__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(40px,4.5vw,60px) var(--pad-x)
          calc(clamp(40px,4.5vw,60px) + var(--float-space));
}
.footer__grid{display:grid; grid-template-columns:1fr; gap:32px clamp(32px,5vw,72px); align-items:start}
.footer picture{display:flex}
.footer img{height:44px; width:auto}
.footer__about{margin-top:22px; font-size:14.5px; line-height:1.6; color:var(--text-dim-dark); max-width:34ch}
.footer__head{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-500)}
/* gap reducido porque cada enlace ya ocupa 44px de alto (target táctil) */
.footer__links{display:flex; flex-direction:column; gap:2px; margin-top:18px}
.footer__links a{
  font-size:14.5px; color:var(--text-link-dark);
  min-height:44px; display:inline-flex; align-items:center;
}
.footer__links a:hover{color:var(--blue-soft)}
.footer__cov{margin-top:18px; font-size:14.5px; line-height:1.7; color:var(--text-link-dark)}
.footer__base{
  border-top:2px solid var(--line-dark); margin-top:clamp(32px,3.5vw,48px);
  padding-top:24px; display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between;
}
.footer__base span{font-size:13px; color:var(--gray-500)}

/* --- WhatsApp flotante ----------------------------------------- */
.float{
  position:fixed; bottom:20px; right:20px; z-index:60;
  display:inline-flex; align-items:center; gap:11px;
  background:var(--blue); color:var(--white); padding:16px;
  font-size:14.5px; font-weight:600; min-height:44px;
  border-radius:var(--pill);
}
.float:hover{background:var(--blue-dark); color:var(--white)}
.float span{display:none}
/* OCULTO a pedido. Va después del bloque de arriba a propósito: ese redeclara
   `display:inline-flex` con la misma especificidad, así que puesto antes no
   ganaría. Para reactivarlo: borra esta regla y devuelve --float-space a 84px,
   que reserva el hueco del footer para que el botón no tape el aviso legal. */
.float{display:none}

/* ============================================================
   BREAKPOINTS
   ============================================================ */

@media (min-width:620px){
  .header__inner{height:112px}
  :root{--header-h:112px}
  .header .cta{padding:14px 22px}
  .header .cta span{display:inline}
  .brand img{height:56px}
  .footer img{height:50px}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px clamp(20px,2.4vw,40px)}
  .whys{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .float{padding:14px 22px}
  .float span{display:inline}
}

@media (min-width:980px){
  /* gap:0 para que los border-top de las 3 tarjetas formen una sola regla continua.
     El separador entre columnas cambia de color según lo que atraviesa: blanco sobre
     el plato gris (lee como franja) y --gray-100 en la zona de texto (lee como filete).
     Por eso vive en .cap__media / .cap__txt y no en .cap. */
  .caps{grid-template-columns:repeat(3,minmax(0,1fr)); gap:0}
  .cap{border-top:2px solid var(--ink)}
  .cap__media{border-left:2px solid var(--white)}
  .cap__txt{border-left:2px solid var(--gray-100); padding:0 clamp(18px,2.4vw,32px)}
  .cap:first-child .cap__media,.cap:first-child .cap__txt{border-left:0; padding-left:0}
  .cap:last-child .cap__txt{padding-right:0}
  .cap__body{margin-bottom:26px}
  .caps-foot{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  .proc{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .inds{grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,auto); grid-auto-flow:column}
  .faq__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr)}
  .close__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .footer__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width:1080px){
  .nav{display:flex; align-items:center; gap:clamp(12px,2vw,26px); margin-left:auto}
  .nav a{
    font-size:14px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
    color:var(--text-on-dark); white-space:nowrap;
    min-height:44px; display:inline-flex; align-items:center;
  }
  .nav a:hover{color:var(--blue-soft)}
  .burger{display:none}
  .lead-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:end}
  .trust{grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 clamp(20px,2.4vw,40px)}
  .whys{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cases{grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 clamp(20px,2.4vw,32px)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
}