/* ============================================================================
   Ingeniería IT — sistema visual
   Los colores salen del logo (cuatro esquinas + la "it"), no son inventados:
     #FFD500 amarillo   esquina superior izquierda
     #95B422 verde      esquina superior derecha
     #ED6D05 naranja-o  esquina inferior izquierda
     #008ED5 azul       esquina inferior derecha
     #F39200 naranja    la "it" y el nombre  -> color principal
   El motivo del logo (una esquina que enmarca) se reutiliza como elemento
   grafico en toda la pagina: marcos, marcadores de seccion y los 4 pilares.
   ========================================================================== */

:root{
  --naranja:#F39200;
  --naranja-osc:#ED6D05;
  --amarillo:#FFD500;
  --verde:#95B422;
  --azul:#008ED5;

  --tinta:#11151B;
  --tinta-2:#1B2129;
  --tinta-3:#2C3644;
  --gris:#5B6673;
  --gris-claro:#8A939E;
  --linea:#E3E8ED;
  --papel:#FFFFFF;
  --papel-2:#F6F8FA;

  --ancho:1180px;
  --radio:14px;
  --sombra:0 1px 2px rgba(17,21,27,.04), 0 8px 30px rgba(17,21,27,.06);
  --sombra-alta:0 2px 6px rgba(17,21,27,.06), 0 24px 60px rgba(17,21,27,.12);
  --fuente:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --transicion:.45s cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--fuente);
  color:var(--tinta);
  background:var(--papel);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-.025em;font-weight:700}
h1{font-size:clamp(2.2rem,4.4vw,3.35rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:1.18rem;letter-spacing:-.015em}
p{margin:0}

.env{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 24px}
.seccion{padding:clamp(64px,9vw,120px) 0}
.seccion--papel2{background:var(--papel-2);border-block:1px solid var(--linea)}

/* --- etiqueta de seccion: hereda la esquina del logo -------------------- */
.etiqueta{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);margin-bottom:20px;
}
.etiqueta::before{
  content:"";width:14px;height:14px;flex:none;
  border-left:3px solid var(--naranja);border-top:3px solid var(--naranja);
}

.plomo{color:var(--gris);font-size:clamp(1.02rem,1.5vw,1.18rem);max-width:62ch}

/* --- botones ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:10px;border:1.5px solid transparent;
  font-size:.97rem;font-weight:650;letter-spacing:-.005em;cursor:pointer;
  font-family:inherit;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--principal{background:var(--naranja);color:#fff;box-shadow:0 6px 18px rgba(243,146,0,.32)}
.btn--principal:hover{background:var(--naranja-osc);box-shadow:0 10px 26px rgba(237,109,5,.4)}
.btn--linea{border-color:var(--linea);color:var(--tinta);background:var(--papel)}
.btn--linea:hover{border-color:var(--tinta-3);background:var(--papel-2)}
.btn--fantasma{border-color:rgba(255,255,255,.28);color:#fff}
.btn--fantasma:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--bloque{width:100%}

/* --- cabecera ----------------------------------------------------------- */
.cab{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s ease,box-shadow .3s ease;
}
.cab.pegada{border-bottom-color:var(--linea);box-shadow:0 1px 20px rgba(17,21,27,.05)}
.cab__fila{display:flex;align-items:center;gap:28px;height:72px}
.marca{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.03em;font-size:1.06rem}
.marca img{width:34px;height:34px}
.marca span b{color:var(--naranja)}
.nav{display:flex;gap:28px;margin-left:auto;font-size:.94rem;color:var(--gris);font-weight:550}
.nav a{position:relative;padding:4px 0;transition:color .2s ease}
.nav a:hover{color:var(--tinta)}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--naranja);
  transition:width .25s ease;
}
.nav a:hover::after{width:100%}
.cab .btn{padding:11px 20px;font-size:.92rem}
.cab__menu{display:none;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto}
.cab__menu span{display:block;width:22px;height:2px;background:var(--tinta);border-radius:2px}
.cab__menu span+span{margin-top:5px}

/* --- portada ------------------------------------------------------------ */
.portada{
  position:relative;overflow:hidden;
  background:var(--tinta);color:#fff;
  padding:clamp(52px,7vw,88px) 0 clamp(104px,12vw,168px);
}
.portada::before{ /* resplandor calido, muy tenue */
  content:"";position:absolute;inset:-40% 30% 40% -20%;
  background:radial-gradient(closest-side,rgba(243,146,0,.16),transparent 70%);
  pointer-events:none;
}
.portada::after{ /* trama fina */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000,transparent 78%);
}
.portada__reja{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
  gap:clamp(36px,5vw,64px);align-items:center;
}
.portada .etiqueta{color:rgba(255,255,255,.62)}
.portada .etiqueta::before{border-color:var(--amarillo)}
.portada h1{color:#fff;margin-bottom:22px}
.portada h1 em{font-style:normal;color:var(--naranja);position:relative;white-space:nowrap}
.portada h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.09em;
  background:var(--naranja);opacity:.35;border-radius:2px;
}
.portada__texto{color:rgba(255,255,255,.72);font-size:clamp(1.03rem,1.5vw,1.18rem);max-width:54ch}
.portada__acciones{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}

/* cifras */
.cifras{
  display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,52px);
  margin-top:clamp(38px,5vw,56px);padding-top:30px;
  border-top:1px solid rgba(255,255,255,.12);
}
.cifra b{display:block;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.035em;line-height:1}
.cifra span{display:block;font-size:.82rem;color:rgba(255,255,255,.55);margin-top:7px;letter-spacing:.01em}
.cifra:nth-child(1) b{color:var(--amarillo)}
.cifra:nth-child(2) b{color:var(--verde)}
.cifra:nth-child(3) b{color:var(--azul)}

/* --- tarjeta de acceso -------------------------------------------------- */
.acceso{
  position:relative;background:var(--papel);color:var(--tinta);
  border-radius:18px;padding:clamp(26px,3vw,36px);
  box-shadow:var(--sombra-alta);
}
/* las cuatro esquinas del logo, como marco */
.acceso::before,.acceso::after,
.acceso .esq1,.acceso .esq2{
  content:"";position:absolute;width:22px;height:22px;pointer-events:none;
}
.acceso::before{top:-7px;left:-7px;border-top:3px solid var(--amarillo);border-left:3px solid var(--amarillo);border-radius:6px 0 0 0}
.acceso::after{top:-7px;right:-7px;border-top:3px solid var(--verde);border-right:3px solid var(--verde);border-radius:0 6px 0 0}
.acceso .esq1{bottom:-7px;left:-7px;border-bottom:3px solid var(--naranja-osc);border-left:3px solid var(--naranja-osc);border-radius:0 0 0 6px}
.acceso .esq2{bottom:-7px;right:-7px;border-bottom:3px solid var(--azul);border-right:3px solid var(--azul);border-radius:0 0 6px 0}

.acceso h2{font-size:1.42rem;margin-bottom:6px}
.acceso__nota{color:var(--gris);font-size:.92rem;margin-bottom:22px}
.campo{margin-bottom:15px}
.campo label{display:block;font-size:.83rem;font-weight:650;margin-bottom:7px;color:var(--tinta-3)}
.campo input{
  width:100%;padding:13px 15px;font-size:.98rem;font-family:inherit;color:var(--tinta);
  border:1.5px solid var(--linea);border-radius:10px;background:var(--papel);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.campo input::placeholder{color:#AEB6BF}
.campo input:focus{
  outline:none;border-color:var(--naranja);
  box-shadow:0 0 0 3px rgba(243,146,0,.16);
}
.acceso .btn{margin-top:8px}
.acceso__pie{
  margin-top:20px;padding-top:17px;border-top:1px solid var(--linea);
  font-size:.85rem;color:var(--gris);line-height:1.6;
}
.acceso__pie a{color:var(--naranja);font-weight:600}
.acceso__seguro{display:flex;align-items:center;gap:7px;margin-top:11px;font-size:.79rem;color:var(--gris-claro)}
.acceso__seguro svg{flex:none}

.aviso{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border-radius:10px;font-size:.89rem;margin-bottom:18px;
  background:#FEF3F2;color:#B4241C;border:1px solid #FBD5D2;
}
.aviso svg{flex:none;margin-top:2px}

/* --- pilares ------------------------------------------------------------ */
.pilares{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:2px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;margin-top:52px}
.pilar{background:var(--papel);padding:clamp(26px,3vw,34px);position:relative;transition:background .3s ease}
.pilar:hover{background:var(--papel-2)}
.pilar__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:9px;margin-bottom:18px;
  font-weight:800;font-size:.94rem;color:#fff;letter-spacing:-.02em;
}
.pilar:nth-child(1) .pilar__num{background:var(--amarillo);color:var(--tinta)}
.pilar:nth-child(2) .pilar__num{background:var(--verde)}
.pilar:nth-child(3) .pilar__num{background:var(--azul)}
.pilar:nth-child(4) .pilar__num{background:var(--naranja)}
.pilar h3{margin-bottom:9px}
.pilar p{color:var(--gris);font-size:.95rem}
.pilar::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;transition:width .5s cubic-bezier(.22,.61,.36,1)}
.pilar:nth-child(1)::after{background:var(--amarillo)}
.pilar:nth-child(2)::after{background:var(--verde)}
.pilar:nth-child(3)::after{background:var(--azul)}
.pilar:nth-child(4)::after{background:var(--naranja)}
.pilar:hover::after{width:100%}

/* --- comparacion: contable vs gerencial --------------------------------- */
.balanza{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,26px);margin-top:48px}
.balanza__lado{border:1px solid var(--linea);border-radius:var(--radio);padding:clamp(24px,3vw,34px);background:var(--papel)}
.balanza__lado--nuestro{border-color:rgba(243,146,0,.4);background:linear-gradient(180deg,rgba(243,146,0,.045),transparent 60%);box-shadow:var(--sombra)}
.balanza__tit{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-claro);margin-bottom:16px}
.balanza__lado--nuestro .balanza__tit{color:var(--naranja)}
.balanza h3{margin-bottom:18px;font-size:1.3rem}
.balanza ul{list-style:none;margin:0;padding:0}
.balanza li{position:relative;padding-left:27px;margin-bottom:11px;font-size:.95rem;color:var(--gris)}
.balanza li::before{
  content:"";position:absolute;left:0;top:.52em;width:11px;height:2px;background:var(--linea);border-radius:2px;
}
.balanza__lado--nuestro li{color:var(--tinta-3)}
.balanza__lado--nuestro li::before{
  content:"";width:9px;height:9px;top:.42em;background:none;
  border-left:2.5px solid var(--naranja);border-bottom:2.5px solid var(--naranja);
  transform:rotate(-45deg);border-radius:1px;
}

/* --- modulos ------------------------------------------------------------ */
.modulos{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px;margin-top:48px}
.modulo{
  border:1px solid var(--linea);border-radius:12px;padding:22px 22px 20px;background:var(--papel);
  transition:transform .28s var(--transicion),box-shadow .28s ease,border-color .28s ease;
}
.modulo:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:#D2D9E1}
.modulo__ico{width:34px;height:34px;margin-bottom:15px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--papel-2)}
.modulo h3{font-size:1.02rem;margin-bottom:6px}
.modulo p{font-size:.89rem;color:var(--gris);line-height:1.55}

/* --- franja de facturacion electronica ---------------------------------- */
.fe{background:var(--tinta);color:#fff;border-radius:var(--radio);padding:clamp(32px,4.5vw,58px);position:relative;overflow:hidden}
.fe::before{
  content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,142,213,.22),transparent 70%);
}
.fe__reja{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(30px,4vw,54px);align-items:center}
.fe .etiqueta{color:rgba(255,255,255,.6)}
.fe .etiqueta::before{border-color:var(--azul)}
.fe h2{color:#fff;margin-bottom:16px}
.fe p{color:rgba(255,255,255,.72)}
.fe__lista{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.fe__lista li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:rgba(255,255,255,.86)}
.fe__lista svg{flex:none;margin-top:3px}
.fe__sello{
  display:inline-flex;align-items:center;gap:9px;margin-top:26px;padding:9px 15px;
  border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:.83rem;color:rgba(255,255,255,.8)
}
.punto{width:7px;height:7px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 4px rgba(149,180,34,.2)}

/* --- cierre / contacto -------------------------------------------------- */
.cierre{text-align:center;max-width:640px;margin:0 auto}
.cierre h2{margin-bottom:16px}
.cierre .plomo{margin:0 auto 30px}
.cierre__acciones{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

.pie{background:var(--tinta);color:rgba(255,255,255,.6);padding:52px 0 34px;font-size:.9rem}
.pie__reja{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start}
.pie .marca{color:#fff;margin-bottom:12px}
.pie a{color:rgba(255,255,255,.78)}
.pie a:hover{color:var(--naranja)}
.pie__contacto{display:grid;gap:7px}
.pie__legal{
  margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.82rem;color:rgba(255,255,255,.4)
}

/* --- aparicion al hacer scroll ------------------------------------------ */
.revelar{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.revelar.visible{opacity:1;transform:none}

/* --- responsivo --------------------------------------------------------- */
@media (max-width:940px){
  .portada__reja{grid-template-columns:1fr}
  .acceso{order:-1}            /* el cliente que vuelve entra sin bajar */
  .fe__reja{grid-template-columns:1fr}
  .balanza{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav{display:none}
  .nav.abierto{
    display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:72px;
    background:var(--papel);border-bottom:1px solid var(--linea);padding:8px 24px 18px;
    box-shadow:0 18px 40px rgba(17,21,27,.09);
  }
  .nav.abierto a{padding:12px 0;border-bottom:1px solid var(--linea)}
  .nav.abierto a::after{display:none}
  .cab__menu{display:block}
  .cab .btn{display:none}
  .cifras{gap:22px}
  .cifra{min-width:118px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .revelar{opacity:1;transform:none}
}

/* ============================================================================
   VITRINA — el tablero que demuestra de que se trata
   Se monta a caballo entre la portada oscura y la seccion clara: ancla la
   pagina con algo que se ve, no solo con texto.
   ========================================================================== */
.vitrina{position:relative;z-index:3;margin-top:clamp(-96px,-7vw,-52px);padding-bottom:clamp(30px,4vw,48px)}
.tablero{
  background:var(--papel);border:1px solid var(--linea);border-radius:16px;
  box-shadow:0 30px 70px rgba(17,21,27,.28),0 4px 12px rgba(17,21,27,.1);
  overflow:hidden;
}
.tablero__barra{
  display:flex;align-items:center;gap:9px;padding:12px 16px;
  background:var(--papel-2);border-bottom:1px solid var(--linea);
}
.tablero__luces{display:flex;gap:6px}
.tablero__luces i{width:9px;height:9px;border-radius:50%;background:#D8DEE5}
.tablero__ruta{
  font-size:.76rem;color:var(--gris-claro);letter-spacing:.02em;
  padding:4px 12px;background:var(--papel);border:1px solid var(--linea);border-radius:6px;
}
.tablero__cuerpo{padding:clamp(18px,2.4vw,26px)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-bottom:18px}
.kpi{border:1px solid var(--linea);border-radius:11px;padding:15px 16px}
.kpi__rot{font-size:.71rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--gris-claro)}
.kpi__val{font-size:clamp(1.25rem,2.3vw,1.6rem);font-weight:700;letter-spacing:-.03em;margin:6px 0 3px;font-variant-numeric:tabular-nums}
.kpi__var{font-size:.79rem;font-weight:650;display:inline-flex;align-items:center;gap:4px}
.kpi__var--sube{color:#5E7415}
.kpi__var--baja{color:#B4241C}
.kpi__var--baja.bueno{color:#5E7415}

.paneles{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:12px}
.panelito{border:1px solid var(--linea);border-radius:11px;padding:16px 17px}
.panelito h4{margin:0 0 15px;font-size:.83rem;font-weight:700;letter-spacing:-.005em;color:var(--tinta-3)}

/* barras por mes */
.barras{display:flex;align-items:flex-end;gap:clamp(4px,1vw,9px);height:118px}
.barra{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px;height:100%}
.barra i{
  display:block;width:100%;border-radius:4px 4px 2px 2px;background:#E7ECF1;
  transform:scaleY(0);transform-origin:bottom;transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.visible .barra i{transform:scaleY(1)}
.barra:nth-child(n+11) i{background:var(--naranja)}
.barra span{font-size:.66rem;color:var(--gris-claro);letter-spacing:.02em}

/* comprobantes */
.estados{display:grid;gap:11px}
.estado{display:flex;align-items:center;gap:10px;font-size:.87rem}
.estado b{margin-left:auto;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.estado i{width:8px;height:8px;border-radius:50%;flex:none}
.estado--ok i{background:var(--verde)}
.estado--esp i{background:var(--amarillo)}
.estado--no i{background:var(--naranja-osc)}
.estados__linea{height:6px;border-radius:99px;overflow:hidden;display:flex;margin-top:5px}
.estados__linea b{display:block;height:100%}

.vitrina__pie{text-align:center;margin-top:15px;font-size:.78rem;color:var(--gris-claro)}

@media (max-width:820px){
  .paneles{grid-template-columns:1fr}
  .vitrina{margin-top:clamp(-56px,-5vw,-30px)}
  .barra span{display:none}
}

/* ============================================================================
   FOTO DE FONDO de la portada
   Se desvanece hacia la izquierda contra el negro de la marca: el titular cae
   siempre sobre fondo solido, sin depender de que zona de la foto le toque.
   El extremo DERECHO tambien se oscurece, porque ahi va la caja de acceso y el
   grafico de la foto le competia.
   En pantallas chicas no se descarga: es decorativa.
   ========================================================================== */
.portada__foto{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("../images/portada.jpg");
  background-size:cover;background-position:72% 42%;
  opacity:.70;
}
.portada__foto::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      var(--tinta) 0%,
      rgba(17,21,27,.90) 28%,
      rgba(17,21,27,.56) 52%,
      rgba(17,21,27,.62) 100%),
    linear-gradient(180deg,
      rgba(17,21,27,.5) 0%,
      rgba(17,21,27,.12) 35%,
      rgba(17,21,27,.86) 88%,
      var(--tinta) 100%);
}
/* con foto, la trama fina estorba */
.portada::after{opacity:.28}

@media (max-width:760px){
  .portada__foto{display:none}
}