/* Prisma BI — la página comercial (prismabi.com).
   Hereda los tokens y la tipografía de portal.css. Misma regla que el portal: las BANDAS de fondo
   van de borde a borde del viewport; el contenido va en un marco centrado. Móvil primero. */

body.landing{background:#fff;color:var(--ink2);line-height:1.5}
.landing h1,.landing h2,.landing h3{color:var(--ink);letter-spacing:-.01em;font-weight:600;margin:0}
.landing h2{font-size:26px;line-height:1.2;margin-bottom:18px}
.landing h3{font-size:19px;line-height:1.25;margin-bottom:8px}
.landing p{margin:0 0 12px}
.centrado{text-align:center}

/* el marco: contenido centrado; las bandas no lo respetan, sólo lo que se lee.
   Se llama .l-marco y no .marco a propósito: portal.css tiene un .marco con `>*{margin-inline:auto}`
   y en una fila flex esos márgenes automáticos empujaban el logo y «Iniciar sesión» al centro. */
.l-marco{max-width:1180px;margin:0 auto;padding:0 22px}
.l-marco.angosto{max-width:760px}
.banda{padding:56px 0}
.banda.negra{background:#0A0A0A;color:#fff}
.banda.negra h1,.banda.negra h2{color:#fff}
.banda.gris{background:var(--field)}
.banda.blanca{background:#fff}
.banda.verde{background:var(--greenbg)}

/* cabezal: barra negra con su línea de espectro, como en el portal */
.l-top{background:#0A0A0A;color:#fff;position:relative}
.l-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--spec)}
.l-top-fila{display:flex;justify-content:space-between;align-items:center;padding-top:14px;padding-bottom:14px}
.l-marca img{display:block;height:30px;width:auto}
.l-entrar{font-size:13px;color:#B4B9C4;padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px}
.l-entrar:hover{color:#fff;border-color:rgba(255,255,255,.5)}

/* botones */
.btn-l{display:inline-block;font:inherit;font-size:15px;font-weight:600;padding:13px 22px;border-radius:999px;
       text-align:center;cursor:pointer;border:1.5px solid transparent;line-height:1.2}
.btn-l.primario{background:#fff;color:#0A0A0A;border-color:#fff}
.banda.gris .btn-l.primario,.banda.blanca .btn-l.primario{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-l.secundario{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-l.secundario.oscuro{color:var(--ink);border-color:var(--ink)}
.btn-l:focus-visible{outline:3px solid #D7FF3E;outline-offset:3px}

/* hero. El teléfono va ENTERO dentro de la banda, con el mismo aire arriba y abajo: antes se asomaba
   hacia la sección siguiente con un margen negativo y overflow:hidden, y en escritorio el marco
   quedaba pegado al borde y cortado. Verse completo importa más que verse grande. */
.hero{padding:48px 0}
.hero-fila{display:grid;gap:36px;align-items:center}
.hero h1{font-size:34px;line-height:1.12;margin-bottom:16px}
.hero-sub{font-size:17px;color:#B4B9C4;margin-bottom:26px;max-width:560px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}

/* marcos de dispositivo, dibujados en CSS: no hay imágenes de teléfonos, sólo la captura */
.tel{margin:0 auto;width:min(300px,86%);background:#15171c;border-radius:36px;padding:10px;
     box-shadow:0 18px 40px rgba(0,0,0,.35),inset 0 0 0 2px #2a2d35}
.tel img{display:block;width:100%;height:auto;border-radius:27px}
.tel.chico{width:min(260px,80%)}
.lap{margin:0 auto;width:min(680px,100%);background:#15171c;border-radius:14px;padding:12px 12px 26px;
     box-shadow:0 30px 60px rgba(0,0,0,.18),inset 0 0 0 2px #2a2d35;position:relative;overflow:hidden}
/* la barra inferior del "laptop" va absoluta: con margen negativo desbordaba a lo ancho */
.lap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:#0f1115}
.lap img{display:block;width:100%;height:auto;border-radius:6px 6px 0 0}

/* muro de logos: cada tarjeta con el fondo que le corresponde a su logo; 2 → 3 → 5 columnas */
/* minmax(0,1fr) y no 1fr: 1fr es minmax(auto,1fr), y el ancho intrínseco de un PNG de 1092 px
   inflaba las columnas más allá del contenedor — scroll lateral, tarjetas cuadradas y el grid
   encimado con la sección siguiente. La imagen llena la tarjeta por dentro del relleno. */
.logos{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/* Sin relleno en la tarjeta: los archivos ya vienen normalizados a 3:2 con la marca a ~70 % del
   ancho y margen uniforme, sobre su propio color de fondo. Así todos pesan igual a la vista. */
.logo-tarjeta{aspect-ratio:3/2;border-radius:14px;padding:0;min-width:0;overflow:hidden;
              box-shadow:0 1px 0 rgba(15,17,21,.04),0 6px 20px rgba(15,17,21,.06)}
.logo-tarjeta img{width:100%;height:100%;object-fit:contain;display:block}

/* el problema: tres líneas, la última pesa */
.problema{list-style:none;padding:0;margin:0;counter-reset:linea}
.problema li{font-size:18px;line-height:1.45;padding:14px 0 14px 34px;position:relative;border-top:1px solid var(--rule)}
.problema li::before{counter-increment:linea;content:counter(linea);position:absolute;left:0;top:14px;width:24px;height:24px;
                     border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center}
.problema li:last-child{font-weight:600;color:var(--ink)}

/* lo que hacemos distinto */
.intro{font-size:16px;color:var(--grey);max-width:640px;margin-inline:auto;margin-bottom:34px}
.bloque{display:grid;gap:26px;align-items:center;padding:34px 0;border-top:1px solid var(--rule)}
.bloque:first-of-type{border-top:0}
.bloque-texto p{font-size:16px;color:var(--ink2);max-width:520px}

/* resultados */
.caso{font-size:19px;line-height:1.45;color:var(--ink);max-width:640px;margin-bottom:26px}
.cifras{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.cifras li{border-top:2px solid var(--green);padding-top:12px}
.cifras b{display:block;font-size:44px;font-weight:600;color:var(--green);letter-spacing:-.02em;line-height:1}
.cifras span{display:block;font-size:14px;color:var(--ink2);margin-top:6px}

/* cómo trabajamos */
/* Los cuatro pasos: mismo alto (las celdas de la rejilla se estiran) y todo alineado arriba —el
   número, el título y el texto arrancan a la misma altura en cada bloque. */
.pasos{list-style:none;padding:0;margin:0;display:grid;gap:22px;align-items:stretch}
.pasos li{display:grid;grid-template-rows:auto auto 1fr;align-content:start;gap:8px;
          padding:22px 20px;border:1px solid var(--rule);border-radius:14px;background:#fff}
.pasos i{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;
         font-style:normal;font-weight:600;display:grid;place-items:center}
.pasos h3{margin:0}
.pasos p{color:var(--grey);font-size:15px;margin:0}

/* formulario */
.contacto{margin-top:8px}
.campos{display:grid;gap:14px}
.campo-l label{display:block;font-size:12.5px;color:var(--grey);margin-bottom:5px}
.campo-l input,.campo-l textarea{width:100%;font:inherit;font-size:16px;padding:13px 15px;border:1px solid var(--rule);
                                  border-radius:12px;background:#fff;color:var(--ink)}
.campo-l input:focus,.campo-l textarea:focus{outline:2px solid var(--ink);border-color:transparent}
.campo-l textarea{resize:vertical;min-height:88px}
.contacto .btn-l{margin-top:18px;width:100%}
.landing .error{font-size:13px;color:var(--red);background:var(--redbg);padding:9px 12px;border-radius:10px;margin:8px 0 0}
/* el campo trampa: fuera de la vista y del tabulador, pero presente para un bot que rellena todo */
.hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* gracias */
.gracias{min-height:60dvh;display:grid;align-items:center}
.gracias h1{font-size:34px;margin-bottom:10px}

/* pie */
.l-pie{background:#0A0A0A;color:#B4B9C4;padding:34px 0 calc(34px + env(safe-area-inset-bottom));font-size:13.5px}
.l-pie-fila{display:grid;gap:12px;justify-items:start}
.l-pie a{color:#fff}
.l-pie a:hover{text-decoration:underline}
.l-pie img{display:block;height:26px;width:auto}

/* tablet */
@media (min-width:640px){
  .logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .campos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .campo-l.ancho{grid-column:1/-1}
  .contacto .btn-l{width:auto}
  .cifras{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pasos{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .l-pie-fila{grid-auto-flow:column;align-items:center;justify-content:space-between}
}

/* escritorio */
@media (min-width:900px){
  .landing h2{font-size:34px}
  .landing h3{font-size:22px}
  .banda{padding:80px 0}
  .hero{padding:64px 0}
  .hero-fila{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px}
  .hero h1{font-size:50px}
  .hero-sub{font-size:19px}
  /* a la derecha de su columna, pero con 40 px de aire hasta el borde del marco */
  .hero .tel{margin:0 40px 0 auto;width:260px}
  .logos{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
  .bloque{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;padding:56px 0}
  .bloque.invertido .bloque-texto{order:2}
  .bloque-texto p{font-size:17px}
  .cifras b{font-size:56px}
  .pasos{grid-template-columns:repeat(4,minmax(0,1fr))}
}