/* ---------------------------------------------------------------
   Firmeza Software — hoja de estilo del sitio (rediseño 2026)
   Claro, sobrio, azul corporativo. Sin frameworks: CSS propio.
   Los colores y medidas se definen una sola vez, acá arriba.
--------------------------------------------------------------- */

:root{
  --azul:#1256c4;
  --azul-osc:#0d3f92;
  --azul-claro:#eaf1ff;
  --tinta:#0f1b2d;
  --texto:#3b4759;
  --suave:#6b7789;
  --linea:#e4e9f2;
  --fondo:#ffffff;
  --fondo-alt:#f6f8fc;
  --radio:14px;
  --sombra:0 1px 2px rgba(15,27,45,.05), 0 8px 24px rgba(15,27,45,.06);
  --ancho:1120px;
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;   /* el equivalente en Firefox (Mac) */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

img{max-width:100%;height:auto;display:block;}

/* En pantallas muy angostas (o muy ampliadas) una palabra larga, como "Infraestructura"
   en un título o un correo, no debe ensanchar la página: se corta si no entra. */
h1,h2,h3,h4,p,li,td,figcaption{overflow-wrap:break-word;}
p a,li a{overflow-wrap:anywhere;}

h1,h2,h3,h4{
  color:var(--tinta);
  line-height:1.2;
  margin:0 0 .6em;
  font-weight:700;
  letter-spacing:-.02em;
}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem);}
h2{font-size:clamp(1.6rem,3vw,2.3rem);}
h3{font-size:1.2rem;}
p{margin:0 0 1.1em;}
strong{color:var(--tinta);font-weight:600;}

a{color:var(--azul);text-decoration:none;}
/* Foco con teclado: igual en todos los navegadores. En fondos oscuros, blanco. */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--azul);outline-offset:3px;border-radius:4px;}
.portada :focus-visible,.cierre :focus-visible,.pie :focus-visible{outline-color:#fff;}
a:hover{color:var(--azul-osc);}

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 1.25rem;}
.centrado{text-align:center;}
.estrecho{max-width:48rem;margin-left:auto;margin-right:auto;}

/* --- Botones ------------------------------------------------- */
.boton{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.5rem;
  border-radius:999px;
  font-weight:600;font-size:1rem;
  border:1px solid transparent;
  transition:background .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s;
  cursor:pointer;
}
.boton svg{width:.95em;height:.95em;fill:currentColor;flex:0 0 auto;}
/* Un <button> no hereda la tipografia ni el interlineado: cada navegador pone los suyos. */
button.boton{font-family:inherit;line-height:inherit;}
.boton-primario{background:var(--azul);color:#fff;box-shadow:0 6px 18px rgba(18,86,196,.25);}
.boton-primario:hover{background:var(--azul-osc);color:#fff;transform:translateY(-1px);}
.boton-borde{border-color:var(--linea);color:var(--tinta);background:#fff;}
.boton-borde:hover{border-color:var(--azul);color:var(--azul);}
.boton-claro{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.45);}
.boton-claro:hover{background:#fff;color:var(--azul-osc);}

/* --- Cabecera ------------------------------------------------ */
.cabecera{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--linea);
}
.cabecera .contenedor{display:flex;align-items:center;gap:1.5rem;min-height:88px;}
.marca{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--tinta);}
.marca img{height:54px;width:auto;}
.menu{display:flex;align-items:center;gap:.25rem;margin-left:auto;}
.menu a{
  padding:.5rem .8rem;border-radius:8px;
  color:var(--texto);font-size:.97rem;font-weight:500;
}
.menu a:hover{background:var(--azul-claro);color:var(--azul-osc);}
.menu a.activo{color:var(--azul);font-weight:600;}
.menu .boton{margin-left:.5rem;padding:.55rem 1.1rem;font-size:.95rem;}
/* El botón del menú es un enlace más: sin esto, la regla ".menu a" le pone letra gris sobre el azul. */
.menu .boton-primario,.menu .boton-primario:hover{color:#fff;}
.menu .boton-primario:hover{background:var(--azul-osc);}
.abrir-menu{
  display:none;margin-left:auto;background:none;border:0;padding:.4rem;
  color:var(--tinta);cursor:pointer;
}
.abrir-menu svg{width:26px;height:26px;fill:currentColor;}

@media (max-width:960px){
  .abrir-menu{display:block;}
  .marca img{height:44px;}
  .menu{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--linea);
    padding:.5rem 1.25rem 1.25rem;
    box-shadow:var(--sombra);
  }
  .menu.abierto{display:flex;}
  .menu a{padding:.75rem .25rem;border-bottom:1px solid var(--linea);border-radius:0;}
  .menu .boton{margin:.9rem 0 0;justify-content:center;border-bottom:0;}
}

/* --- Portada ------------------------------------------------- */
.portada{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#0b2a5c 0%,#123f8f 45%,#1256c4 100%);
  color:#dbe6f8;
}
.portada::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60rem 28rem at 78% -10%,rgba(93,165,255,.35),transparent 65%);
  pointer-events:none;
}
.portada .contenedor{position:relative;z-index:1;padding-top:4.5rem;padding-bottom:4.5rem;}
.portada .dos-columnas{align-items:center;gap:3rem;}
.portada figure{margin:0;}
.portada figure img{
  border-radius:var(--radio);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 18px 40px rgba(4,17,40,.45);
}
/* La copia de la foto para el celular no se ve en pantallas grandes. */
.portada .solo-movil{display:none;}

@media (max-width:860px){
  /* En el celular la foto va entre el texto y los botones. */
  .portada .dos-columnas > figure{display:none;}
  .portada .solo-movil{display:block;margin:0 0 1.6rem;}
  .portada .solo-movil img{width:100%;height:190px;object-fit:cover;}
}
.portada h1{color:#fff;max-width:20ch;}
.portada .bajada{font-size:1.15rem;max-width:56ch;color:#cfdcf2;}
.portada .acciones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem;}
.sello{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  color:#e8f0ff;border-radius:999px;padding:.35rem .9rem;
  font-size:.85rem;font-weight:500;margin-bottom:1.4rem;
}
.sello span.punto{width:.5rem;height:.5rem;border-radius:50%;background:#7fe3a3;}

/* Cabecera interna de las páginas que no son la portada */
.titular{
  background:var(--fondo-alt);
  border-bottom:1px solid var(--linea);
  padding:3.5rem 0 3rem;
}
.titular p{max-width:60ch;font-size:1.1rem;margin-bottom:0;}
.migas{font-size:.85rem;color:var(--suave);margin-bottom:.8rem;}
.migas a{color:var(--suave);}
.migas a:hover{color:var(--azul);}

/* --- Secciones ----------------------------------------------- */
.seccion{padding:4.5rem 0;}
.seccion-alt{background:var(--fondo-alt);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);}
.seccion h2{margin-bottom:.4em;}
.entrada{max-width:62ch;margin-bottom:2.5rem;}
.entrada p:last-child{margin-bottom:0;}
.rotulo{
  display:block;text-transform:uppercase;letter-spacing:.14em;
  font-size:.8rem;font-weight:700;color:var(--azul);margin-bottom:.7rem;
}

/* --- Rejillas y tarjetas ------------------------------------- */
.rejilla{display:grid;gap:1.25rem;}
.rejilla-2{grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));}
.rejilla-3{grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));}

.tarjeta{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:1.6rem;box-shadow:var(--sombra);
  display:flex;flex-direction:column;
}
.tarjeta h3{margin-bottom:.4rem;}
.tarjeta p{font-size:.97rem;margin-bottom:.8rem;}
.tarjeta p:last-child{margin-bottom:0;}
.tarjeta .mas{margin-top:auto;font-weight:600;font-size:.95rem;display:inline-flex;align-items:center;gap:.35rem;}
.tarjeta .mas svg{width:.8em;height:.8em;fill:currentColor;}
a.tarjeta{color:inherit;transition:border-color .15s,transform .15s,box-shadow .15s;}
a.tarjeta:hover{border-color:var(--azul);transform:translateY(-2px);box-shadow:0 10px 28px rgba(15,27,45,.10);}

.icono{
  width:4.3rem;height:4.3rem;border-radius:16px;
  background:var(--azul-claro);color:var(--azul);
  display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
}
.icono svg{width:2.3rem;height:2.3rem;fill:currentColor;}

/* Lista con tilde */
.lista{list-style:none;padding:0;margin:0 0 1.2em;}
.lista li{position:relative;padding-left:1.9rem;margin-bottom:.7rem;}
.lista li::before{
  content:"";position:absolute;left:0;top:.45em;
  width:1.15rem;height:1.15rem;border-radius:50%;
  background:var(--azul-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231256c4'%3E%3Cpath d='M6.2 11.6 2.8 8.2l1.1-1.1 2.3 2.3 5.9-5.9 1.1 1.1z'/%3E%3C/svg%3E") center/.8rem no-repeat;
}

/* Dos columnas: texto + imagen */
.dos-columnas{display:grid;gap:2.5rem;align-items:center;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));}
.dos-columnas figure{margin:0;}
.dos-columnas img{border-radius:var(--radio);box-shadow:var(--sombra);}
figcaption{font-size:.85rem;color:var(--suave);margin-top:.6rem;}

/* Dato destacado */
.destacado{
  border-left:3px solid var(--azul);
  background:var(--azul-claro);
  border-radius:0 var(--radio) var(--radio) 0;
  padding:1.2rem 1.4rem;margin:0 0 1.4em;
}
.destacado p:last-child{margin-bottom:0;}

/* --- Llamada final ------------------------------------------- */
.cierre{
  background:linear-gradient(160deg,#0b2a5c,#1256c4);
  color:#dbe6f8;border-radius:var(--radio);
  padding:3rem 2rem;text-align:center;
}
.cierre h2{color:#fff;}
.cierre p{max-width:52ch;margin-left:auto;margin-right:auto;color:#cfdcf2;}
.cierre .acciones{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:1.6rem;}

/* --- Formulario ---------------------------------------------- */
.formulario{display:grid;gap:1rem;}
.campo label{display:block;font-size:.92rem;font-weight:600;color:var(--tinta);margin-bottom:.35rem;}
.campo input,.campo textarea{
  width:100%;padding:.75rem .9rem;font:inherit;color:var(--tinta);
  background:#fff;border:1px solid var(--linea);border-radius:10px;
  transition:border-color .15s,box-shadow .15s;
}
.campo input:focus,.campo textarea:focus{
  outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(18,86,196,.15);
}
.campo textarea{min-height:9rem;resize:vertical;}
.trampa{position:absolute;left:-9999px;}
.aviso{border-radius:10px;padding:.9rem 1.1rem;margin-bottom:1.2rem;font-size:.95rem;}
.aviso-ok{background:#e9f8ef;border:1px solid #b7e4c7;color:#12683a;}
.aviso-error{background:#fdecec;border:1px solid #f5c2c2;color:#8a1c1c;}

/* --- Pie ----------------------------------------------------- */
.pie{background:#0b1a30;color:#93a4bd;padding:3.5rem 0 2rem;font-size:.95rem;}
.pie h4{color:#fff;font-size:.9rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:1rem;}
.pie a{color:#c3d1e6;}
.pie a:hover{color:#fff;}
.pie-rejilla{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));}
.pie ul{list-style:none;padding:0;margin:0;}
.pie li{margin-bottom:.5rem;}
.pie img{height:52px;margin-bottom:1rem;}
.pie-legal{
  border-top:1px solid rgba(255,255,255,.1);margin-top:2.5rem;padding-top:1.5rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  font-size:.87rem;color:#7c8ca6;
}

/* Respeta a quien pidió menos animación */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* ---------------------------------------------------------------
   Bloques visuales que cortan el texto (21/09/2026).
   La gente que leyó el sitio dijo que era mucho texto seguido.
--------------------------------------------------------------- */

/* Pasos numerados: 1, 2, 3 ... */
.pasos{counter-reset:paso;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));}
.paso{
  position:relative;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:1.6rem 1.4rem 1.4rem;box-shadow:var(--sombra);
}
.paso::before{
  counter-increment:paso;content:counter(paso);
  position:absolute;top:-1rem;left:1.4rem;
  width:2.2rem;height:2.2rem;border-radius:50%;
  background:var(--azul);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1rem;
  box-shadow:0 4px 10px rgba(18,86,196,.3);
}
.paso h3{margin:.5rem 0 .3rem;font-size:1.05rem;}
.paso p{font-size:.95rem;margin:0;}

/* Antes y después, en dos columnas */
.comparacion{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));}
.antes,.despues{border-radius:var(--radio);padding:1.5rem;border:1px solid var(--linea);background:#fff;}
.antes{border-left:3px solid #d98b8b;}
.despues{border-left:3px solid #4caf7d;}
.antes h3,.despues h3{font-size:1rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.9rem;}
.antes h3{color:#8a4b4b;}
.despues h3{color:#1f7a52;}
.antes ul,.despues ul{list-style:none;padding:0;margin:0;}
.antes li,.despues li{position:relative;padding-left:1.6rem;margin-bottom:.6rem;font-size:.97rem;}
.antes li:last-child,.despues li:last-child{margin-bottom:0;}
.antes li::before{content:"×";position:absolute;left:0;top:-.1em;color:#b83232;font-size:1.2rem;font-weight:700;}
.despues li::before{content:"✓";position:absolute;left:0;color:#1f7a52;font-weight:700;}

/* Cifras grandes */
.cifras{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));text-align:center;}
.cifra{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:1.6rem 1.2rem;box-shadow:var(--sombra);}
.cifra strong{display:block;font-size:2.4rem;line-height:1.1;color:var(--azul);letter-spacing:-.03em;}
.cifra span{display:block;font-size:.95rem;color:var(--suave);margin-top:.4rem;}

/* Figura suelta, centrada y con ancho cómodo */
.figura{margin:0 auto 2rem;max-width:52rem;}
.figura img{border-radius:var(--radio);border:1px solid var(--linea);background:#fff;}
.figura figcaption{text-align:center;}

/* Capturas de pantalla del sistema (Firmeza Resto): la imagen lleva mas
   ancho que el texto, porque la interfaz tiene letra chica, y se puede
   abrir en grande con un toque. Sin JavaScript. */
.dos-columnas.captura{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);}
.dos-columnas.captura figure a{display:block;cursor:zoom-in;}
.dos-columnas.captura figure img{width:100%;height:auto;}
@media (max-width:860px){
  .dos-columnas.captura{grid-template-columns:minmax(0,1fr);}
}

/* Imagen en la parte de arriba de una tarjeta (Qué hacemos, Portafolio).
   Ocupa todo el ancho de la tarjeta; las capturas se recortan desde arriba
   a la izquierda, que es donde está lo importante de la pantalla. */
.tarjeta .miniatura{
  display:block;max-width:none;width:calc(100% + 3.2rem);aspect-ratio:16/10;
  margin:-1.6rem -1.6rem 1.2rem;
  object-fit:cover;object-position:left top;
  border-radius:calc(var(--radio) - 1px) calc(var(--radio) - 1px) 0 0;
  border-bottom:1px solid var(--linea);background:var(--fondo-alt);
}
.tarjeta .miniatura.centrada{object-position:center;}
.tarjeta .miniatura.esquema{object-fit:contain;}
.tarjeta .miniatura + .icono{display:none;}