/* ==========================================================================
   ALLIANCE — Portada. Secuencia: problema → solución → método → prueba → acción
   ========================================================================== */

/* ================================================================== HÉROE */
/* El relleno inferior deja sitio al pie del héroe, que va posicionado encima. */
.heroe{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-block:150px 128px}
.heroe__fondo{position:absolute;inset:0;z-index:var(--z-fondo)}
.heroe__fondo img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
/* Velo que hunde el lado izquierdo para que el titular tenga contraste real */
.heroe__velo{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,var(--grafito-900) 0%,rgba(11,12,14,.94) 26%,rgba(11,12,14,.55) 58%,rgba(11,12,14,.30) 100%),
    linear-gradient(to top,var(--grafito-900) 0%,transparent 42%);
}
/* El <canvas> es un elemento reemplazado: con `inset:0` y width auto se queda
   en su tamaño intrínseco (300x150). Hay que darle medidas explícitas. */
#lienzo-heroe{position:absolute;inset:0;width:100%;height:100%;z-index:var(--z-lienzo);pointer-events:none}
.heroe__interior{position:relative;z-index:var(--z-contenido);width:100%}
.heroe__titulo{
  font-family:var(--display);font-weight:400;font-size:var(--t-hero);
  line-height:.98;letter-spacing:-.022em;margin-block:var(--e-4) var(--e-4);
  max-width:17ch;text-wrap:balance;
}
.heroe__titulo em{font-style:italic;color:var(--rojo-alto)}
.heroe__lead{font-size:var(--t-lead);color:var(--texto-2);max-width:52ch;margin-bottom:var(--e-5)}
.heroe__acciones{display:flex;gap:var(--e-2);flex-wrap:wrap}
/* left/right a 0: el elemento ya lleva `.env`, que aporta max-width, centrado y
   canal. Poner además los insets a --canal sumaba el margen dos veces y
   desbordaba justo esos píxeles. */
.heroe__pie{
  position:absolute;left:0;right:0;bottom:var(--e-4);z-index:var(--z-contenido);
  /* wrap: en teléfono «Desliza» e «Intelligence in Motion» no caben en una línea */
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--e-1) var(--e-3);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--texto-3);
  border-top:1px solid var(--linea);padding-top:var(--e-3);
}
.heroe__desliza{display:flex;align-items:center;gap:var(--e-2)}
.heroe__desliza i{display:block;width:52px;height:1px;background:var(--texto-3);transform-origin:left;animation:barrer 2.6s var(--curva) infinite}
@keyframes barrer{0%,100%{transform:scaleX(.3);opacity:.45}50%{transform:scaleX(1);opacity:1}}

/* ======================================================= LA REALIDAD (datos) */
.realidad{border-top:1px solid var(--linea)}
.realidad__cab{max-width:62ch;margin-bottom:var(--e-7);display:grid;gap:var(--e-3)}
.datos{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--linea-fuerte)}
.dato{padding:var(--e-5) var(--e-3) var(--e-4);border-left:1px solid var(--linea);position:relative}
.dato:first-child{border-left:0;padding-left:0}
.dato__barra{position:absolute;top:-1px;left:0;height:2px;background:var(--rojo);width:0}
.dato__num{
  font-family:var(--display);font-size:clamp(3.25rem,6.2vw,5.5rem);line-height:.9;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--texto);
}
.dato__txt{margin-top:var(--e-2);font-size:var(--t-peq);color:var(--texto-3);max-width:30ch}
.realidad__cierre{margin-top:var(--e-6);display:flex;flex-wrap:wrap;gap:var(--e-3);align-items:center}

/* ================================================= TRES PALANCAS (bento) */
.palancas{background:var(--grafito-800);border-block:1px solid var(--linea)}
/* Tres servicios equivalentes: tercios iguales. Con 6 columnas la combinación
   3+2+2 sumaba 7 y tiraba la tercera tarjeta a una fila suelta. */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:var(--e-6)}
.palanca{
  position:relative;display:flex;flex-direction:column;min-height:340px;
  padding:var(--e-5) var(--e-4) var(--e-4);
  background:var(--grafito-700);border:1px solid var(--linea);overflow:hidden;
  transition:border-color var(--ms) var(--curva),background-color var(--ms) var(--curva);
}
.palanca--ancha,.palanca--angosta{grid-column:span 1}
.palanca::before{content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--rojo);transition:width var(--ms-lento) var(--curva)}
.palanca:hover,.palanca:focus-within{border-color:var(--linea-fuerte);background:var(--grafito-600)}
.palanca:hover::before,.palanca:focus-within::before{width:100%}
.palanca__n{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.22em;color:var(--texto-3)}
.palanca h3{font-family:var(--display);font-size:var(--t-h3);font-weight:400;line-height:1.1;margin-block:var(--e-3) var(--e-2)}
.palanca p{font-size:var(--t-peq);color:var(--texto-2);flex:1}
.palanca__mas{display:inline-flex;align-items:center;gap:var(--e-1);min-height:44px;margin-top:var(--e-3);font-size:var(--t-peq);font-weight:700;color:var(--rojo-alto)}
.palanca__mas svg{width:15px;height:15px;transition:transform var(--ms) var(--curva)}
.palanca:hover .palanca__mas svg{transform:translateX(5px)}

/* ============================================================ EL MÉTODO */
.metodo__linea{position:relative;margin-top:var(--e-7);display:grid;gap:0}
.metodo__riel{position:absolute;left:0;right:0;top:11px;height:1px;background:var(--linea)}
.metodo__avance{position:absolute;left:0;top:11px;height:1px;background:var(--rojo);width:0}
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);position:relative}
.paso{padding-top:var(--e-5);position:relative}
.paso::before{content:"";position:absolute;top:7px;left:0;width:9px;height:9px;border-radius:50%;background:var(--grafito-600);border:1px solid var(--linea-fuerte);transition:background-color var(--ms) var(--curva)}
.paso.activo::before{background:var(--rojo);border-color:var(--rojo)}
.paso__n{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.22em;color:var(--texto-3)}
.paso h3{font-family:var(--display);font-size:var(--t-h3);font-weight:400;margin-block:var(--e-2) var(--e-1)}
.paso p{font-size:var(--t-peq);color:var(--texto-2)}

/* ======================================================== POR QUÉ ALLIANCE */
.porque{border-top:1px solid var(--linea)}
.porque__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,120px);align-items:start}
.afirmaciones{display:grid;gap:0;border-top:1px solid var(--linea)}
.afirmacion{display:flex;gap:var(--e-3);align-items:baseline;padding-block:var(--e-3);border-bottom:1px solid var(--linea)}
.afirmacion__i{font-family:var(--mono);font-size:var(--t-micro);color:var(--rojo-alto);flex:none}
.afirmacion p{font-size:1.0625rem}

/* ================================================= SERVICIOS COMPLEMENTARIOS */
.complementarios{background:var(--grafito-800);border-block:1px solid var(--linea)}
.compl__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:var(--e-6);border-top:1px solid var(--linea-fuerte)}
.compl{padding:var(--e-4) var(--e-3);border-left:1px solid var(--linea)}
.compl:first-child{border-left:0;padding-left:0}
.compl h3{font-family:var(--sans);font-size:1.0625rem;font-weight:700;margin-bottom:var(--e-1)}
.compl p{font-size:var(--t-peq);color:var(--texto-3)}

/* ============================================================== EL ASESOR */
.asesor__grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,6vw,96px);align-items:center}
.asesor__foto{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--grafito-700);border:1px solid var(--linea)}
.asesor__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
/* Marcador mientras no esté la foto real */
.asesor__pendiente{position:absolute;inset:0;display:grid;place-items:center;gap:var(--e-2);text-align:center;padding:var(--e-4);color:var(--texto-3);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;line-height:2}
.asesor__cinta{position:absolute;left:0;bottom:0;background:var(--rojo);color:#fff;padding:10px var(--e-3);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase}
.asesor__cita{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.25;font-style:italic;color:var(--texto);border-left:2px solid var(--rojo);padding-left:var(--e-4);margin-block:var(--e-4)}
.asesor__redes{display:flex;gap:var(--e-1);margin-top:var(--e-4)}
.asesor__redes a{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--linea);color:var(--texto-2);transition:background-color var(--ms) var(--curva),border-color var(--ms) var(--curva),color var(--ms) var(--curva)}
.asesor__redes a:hover{background:var(--rojo);border-color:var(--rojo);color:#fff}
.asesor__redes svg{width:18px;height:18px}

/* ============================================================ TESTIMONIOS */
.testimonios{background:var(--grafito-800);border-block:1px solid var(--linea)}
.cita-grande{font-family:var(--display);font-size:clamp(1.6rem,3.6vw,3rem);line-height:1.18;letter-spacing:-.012em;max-width:22ch;text-wrap:balance}
.cita-grande::before{content:"“";color:var(--rojo);margin-right:.06em}
.clientes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:var(--e-7);border-top:1px solid var(--linea-fuerte)}
.cliente{padding:var(--e-4) var(--e-3);border-left:1px solid var(--linea)}
.cliente:first-child{border-left:0;padding-left:0}
.cliente__nombre{font-weight:700}
.cliente__cargo{font-size:var(--t-peq);color:var(--texto-3)}
.cliente__empresa{margin-top:6px;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--rojo-alto)}

/* ============================================================== CONVERSIÓN */
.conversion{position:relative;overflow:hidden;text-align:center;border-top:1px solid var(--linea)}
.conversion__trama{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:calc(100%/12) 100%}
.conversion .env{position:relative;z-index:2}
.conversion .titulo{max-width:20ch;margin-inline:auto}
.conversion .lead{margin-inline:auto;margin-top:var(--e-3)}
.conversion__acciones{display:flex;gap:var(--e-2);justify-content:center;flex-wrap:wrap;margin-top:var(--e-6)}
.conversion__directo{margin-top:var(--e-6);padding-top:var(--e-4);border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e-2) var(--e-6);font-family:var(--mono);font-size:var(--t-peq);color:var(--texto-3)}
/* Enlaces dentro de un renglón: no pueden crecer a 44px sin romper la línea,
   pero sí al mínimo AA de 24px. */
.conversion__directo a{display:inline-block;padding-block:6px;min-height:24px;color:var(--texto-2)}
.conversion__directo a:hover{color:var(--rojo-alto)}

/* ---------------------------------------------------------- nota editorial */
.nota-pendiente{
  margin-top:var(--e-4);padding:var(--e-3);border:1px dashed var(--linea-fuerte);
  font-family:var(--mono);font-size:var(--t-micro);line-height:1.9;color:var(--texto-3);
}
.nota-pendiente b{color:var(--rojo-alto);font-weight:400}

/* ------------------------------------------------------------- responsive */
@media(max-width:1024px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .palanca--ancha,.palanca--angosta{grid-column:span 1}
  .datos{grid-template-columns:repeat(2,1fr)}
  .dato:nth-child(3){border-left:0;padding-left:0}
  .dato:nth-child(n+3){border-top:1px solid var(--linea)}
  .pasos{grid-template-columns:repeat(2,1fr);gap:var(--e-5) var(--gap)}
  .metodo__riel,.metodo__avance{display:none}
  .porque__grid,.asesor__grid{grid-template-columns:1fr}
  .compl__grid{grid-template-columns:repeat(2,1fr)}
  .compl:nth-child(3){border-left:0;padding-left:0}
  .compl:nth-child(n+3){border-top:1px solid var(--linea)}
  .clientes{grid-template-columns:1fr}
  .cliente{border-left:0;padding-inline:0;border-bottom:1px solid var(--linea)}
}
@media(max-width:640px){
  .heroe{min-height:auto;padding-block:140px var(--e-7)}
  .heroe__pie{position:static;margin-top:var(--e-6);padding-inline:0}
  .bento,.datos,.pasos,.compl__grid{grid-template-columns:1fr}
  .dato,.compl{border-left:0;padding-inline:0;border-top:1px solid var(--linea)}
  .dato:first-child,.compl:first-child{border-top:0}
  .asesor__foto{aspect-ratio:4/3}
}