:root{
  --azul: #233E85;
  --azul-oscuro: #182C63;
  --azul-tinta: #101B3D;
  --dorado: #C9962C;
  --verde: #2E7D5B;
  --morado: #6B4FA0;
  --teal: #1B8A94;
  --terracota: #B4533C;
  --fondo: #FFFFFF;
  --fondo-clara: #F4F6FB;
  --texto: #1F2430;
  --texto-suave: #5B6072;
  --borde: #E5E8F0;
  --sombra: 0 4px 18px rgba(24, 44, 99, 0.08);
  --sombra-hover: 0 10px 28px rgba(24, 44, 99, 0.14);
  --radio: 16px;
  --radio-chico: 10px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins', sans-serif;
  color:var(--texto);
  background:var(--fondo-clara);
  line-height:1.6;
}
h1,h2,h3{font-family:'Poppins', sans-serif; font-weight:600; color:var(--azul-oscuro); line-height:1.2;}
a{color:inherit;}
img{max-width:100%; display:block;}
.ancho{max-width:1120px; margin:0 auto; padding:0 32px;}

/* ---------- cabecera ---------- */
.cabecera{
  background:var(--azul);
  position:sticky; top:0; z-index:20;
}
.cabecera-interior{
  max-width:1120px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.logo{display:flex; align-items:center;}
.logo img{height:38px; width:auto;}
.logo-texto{color:#fff; font-weight:700; letter-spacing:0.03em; font-size:1rem;}
.menu-nav{display:flex; align-items:center; gap:28px;}
.menu-nav a{
  color:#fff; font-size:0.92rem; font-weight:500;
  border-bottom:2px solid transparent; padding-bottom:4px;
  transition:border-color .15s;
}
.menu-nav a:hover, .menu-nav a:focus-visible{border-color:var(--dorado);}
.menu-nav a.enlace-login{
  background:#fff;
  color:var(--azul-oscuro);
  border-radius:999px;
  padding:9px 20px;
  font-weight:600;
  border-bottom:none;
}
.menu-nav a.enlace-login:hover, .menu-nav a.enlace-login:focus-visible{
  background:var(--dorado);
  color:#fff;
}
.menu-boton{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; width:32px; height:32px; cursor:pointer;
}
.menu-boton span{display:block; height:2px; background:#fff; border-radius:1px;}

/* ---------- banner ---------- */
.banner{width:100%; aspect-ratio:16 / 5; overflow:hidden; background:var(--fondo-clara);}
.banner img{width:100%; height:100%; object-fit:cover;}
.banner-vacio{
  display:flex; align-items:center; justify-content:center;
  color:var(--texto-suave); font-size:0.95rem;
}

/* ---------- secciones ---------- */
.seccion{padding:76px 0;}
.seccion-clara{background:#fff;}
.seccion-oscura{background:var(--azul-tinta); color:#fff;}
.encabezado-seccion{margin-bottom:40px; max-width:640px;}
.etiqueta{
  display:inline-block; font-size:0.74rem; font-weight:700; letter-spacing:0.04em;
  color:var(--azul); background:rgba(35,62,133,0.09);
  padding:5px 14px; border-radius:999px; margin-bottom:14px;
  text-transform:uppercase;
}
.etiqueta-clara{color:#E7DCC0; background:rgba(255,255,255,0.12);}
.encabezado-seccion h2{font-size:1.75rem;}
.titulo-claro{color:#fff;}
.intro-clara{color:#C7CEE4; margin-top:14px; max-width:60ch; text-align:justify; hyphens:auto;}
.intro-acceso{color:var(--texto-suave); margin-top:14px; max-width:60ch;}

/* ---------- quienes somos ---------- */
.quienes-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:48px;
  align-items:center;
}
.texto-somos{max-width:62ch;}
.texto-somos p{
  color:var(--texto-suave); margin-bottom:16px; font-size:1rem;
  text-align:justify; hyphens:auto;
}
.foto-somos img{
  width:100%; height:100%; max-height:420px; object-fit:cover;
  border-radius:var(--radio);
  box-shadow:var(--sombra);
}
.foto-somos-vacia{
  width:100%; aspect-ratio:4/5; max-height:420px;
  background:var(--fondo-clara); border:1px dashed var(--borde);
  border-radius:var(--radio); display:flex; align-items:center; justify-content:center;
  color:var(--texto-suave); font-size:0.85rem; text-align:center; padding:20px;
}

/* ---------- servicios ---------- */
.lista-servicios{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.servicio{
  padding:26px 24px;
  background:#fff;
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  border-top:4px solid var(--color-servicio, var(--azul));
  transition:transform .15s, box-shadow .15s;
}
.servicio:hover{transform:translateY(-3px); box-shadow:var(--sombra-hover);}
.servicio:nth-child(1){--color-servicio: var(--azul);}
.servicio:nth-child(2){--color-servicio: var(--dorado);}
.servicio:nth-child(3){--color-servicio: var(--verde);}
.servicio:nth-child(4){--color-servicio: var(--morado);}
.servicio:nth-child(5){--color-servicio: var(--teal);}
.servicio:nth-child(6){--color-servicio: var(--terracota);}
.servicio h3{font-size:1.02rem; margin-bottom:10px;}
.servicio p{color:var(--texto-suave); font-size:0.9rem; text-align:justify; hyphens:auto;}

/* ---------- clientes ---------- */
.grilla-clientes{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:18px;
}
.logo-cliente{
  background:#fff;
  border-radius:var(--radio-chico);
  box-shadow:var(--sombra);
  padding:18px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center;
  transition:transform .15s, box-shadow .15s;
}
.logo-cliente:hover{transform:translateY(-3px); box-shadow:var(--sombra-hover);}
.logo-cliente img{height:56px; width:auto; max-width:100%; object-fit:contain;}
.logo-cliente span{font-size:0.78rem; color:var(--texto-suave);}
.sin-contenido{color:var(--texto-suave); font-size:0.95rem;}

/* ---------- contacto ---------- */
.grilla-contacto{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  max-width:680px;
}
.dato-contacto{
  display:flex; flex-direction:column; gap:6px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radio-chico);
  padding:16px 18px;
}
.dato-contacto .k{font-size:0.78rem; color:#B9C2DE;}
.dato-contacto .v{font-size:1rem; font-weight:500;}

/* ---------- pie ---------- */
.pie{background:#fff; border-top:1px solid var(--borde); padding:24px 0;}
.pie-interior{
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.8rem; color:var(--texto-suave); flex-wrap:wrap; gap:10px;
}
.pie-interior img{height:22px; width:auto;}
.pie-interior a{
  color:var(--azul); text-decoration:none; font-weight:600;
  background:rgba(35,62,133,0.08); padding:7px 16px; border-radius:999px;
}
.pie-interior a:hover{background:rgba(35,62,133,0.16);}

/* ---------- página de acceso ---------- */
.seccion-acceso{background:var(--fondo-clara);}
.grilla-acceso{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.tarjeta-acceso{
  background:#fff;
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  border-top:5px solid var(--color-acceso, var(--azul));
  transition:transform .15s, box-shadow .15s;
}
.tarjeta-acceso:hover{transform:translateY(-4px); box-shadow:var(--sombra-hover);}
.tarjeta-acceso.color-azul{--color-acceso: var(--azul);}
.tarjeta-acceso.color-dorado{--color-acceso: var(--dorado);}
.tarjeta-acceso.color-verde{--color-acceso: var(--verde);}
.tarjeta-acceso.color-teal{--color-acceso: var(--teal);}
.tarjeta-acceso.color-morado{--color-acceso: var(--morado);}
.tarjeta-acceso.color-terracota{--color-acceso: var(--terracota);}
.tarjeta-acceso-tipo{
  display:inline-block;
  font-size:0.7rem; font-weight:700; letter-spacing:0.03em;
  color:var(--color-acceso, var(--azul));
  background:rgba(0,0,0,0.05);
  padding:4px 12px; border-radius:999px;
  margin-bottom:14px;
  width:fit-content;
  text-transform:uppercase;
}
.tarjeta-acceso.color-azul .tarjeta-acceso-tipo{background:rgba(35,62,133,0.1);}
.tarjeta-acceso.color-dorado .tarjeta-acceso-tipo{background:rgba(201,150,44,0.13);}
.tarjeta-acceso.color-verde .tarjeta-acceso-tipo{background:rgba(46,125,91,0.12);}
.tarjeta-acceso.color-teal .tarjeta-acceso-tipo{background:rgba(27,138,148,0.12);}
.tarjeta-acceso.color-morado .tarjeta-acceso-tipo{background:rgba(107,79,160,0.12);}
.tarjeta-acceso.color-terracota .tarjeta-acceso-tipo{background:rgba(180,83,60,0.12);}
.tarjeta-acceso h3{font-size:1.12rem; margin-bottom:12px;}
.tarjeta-acceso p{font-size:0.88rem; color:var(--texto-suave); margin-bottom:8px; text-align:justify; hyphens:auto;}
.tarjeta-acceso .boton-acceso{
  margin-top:16px;
  align-self:flex-start;
  background:var(--color-acceso, var(--azul));
  color:#fff;
  padding:11px 22px;
  border-radius:999px;
  font-size:0.86rem;
  font-weight:600;
  text-decoration:none;
  transition:opacity .15s;
}
.tarjeta-acceso .boton-acceso:hover{opacity:0.85;}

/* ---------- pantalla dividida (login / instalación) ---------- */
.pantalla-dividida{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
}
.panel-azul{
  background:linear-gradient(160deg, var(--azul-tinta) 0%, var(--azul) 100%);
  color:#fff;
  padding:56px 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.panel-azul .logo-instalacion{height:52px; width:auto; margin-bottom:36px;}
.panel-azul h1{color:#fff; font-size:1.9rem; max-width:14ch; margin-bottom:18px;}
.panel-azul p.descripcion{color:#C7CEE4; max-width:42ch; font-size:0.98rem; margin-bottom:32px;}
.lista-caracteristicas{display:flex; flex-direction:column; gap:16px;}
.lista-caracteristicas li{
  list-style:none;
  display:flex; align-items:center; gap:14px;
  font-size:0.92rem; color:#E4E8F5;
}
.lista-caracteristicas .punto{
  width:8px; height:8px; border-radius:50%;
  background:var(--dorado); flex-shrink:0;
}
.panel-blanco{
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}
.formulario-caja{width:100%; max-width:380px;}
.formulario-caja h2{font-size:1.6rem; margin-bottom:8px;}
.formulario-caja p.subtitulo{color:var(--texto-suave); font-size:0.92rem; margin-bottom:28px;}
.formulario-caja label{display:block; font-size:0.85rem; font-weight:500; color:var(--texto); margin:16px 0 6px;}
.formulario-caja input{
  width:100%; padding:12px 14px;
  border:1px solid var(--borde); border-radius:var(--radio-chico);
  font-family:inherit; font-size:0.95rem;
  background:var(--fondo-clara);
}
.formulario-caja input:focus{outline:2px solid var(--azul); outline-offset:1px; background:#fff;}
.formulario-caja button{
  margin-top:26px; width:100%; padding:13px;
  background:var(--azul); color:#fff; border:none; border-radius:999px;
  font-family:inherit; font-size:0.95rem; font-weight:600; cursor:pointer;
  transition:background .15s;
}
.formulario-caja button:hover{background:var(--azul-oscuro);}
.aviso-formulario{
  padding:12px 16px; border-radius:var(--radio-chico); font-size:0.85rem; margin-bottom:6px;
}
.aviso-formulario.error{background:#FDECEC; color:#B3261E;}
.aviso-formulario.ok{background:#EAF2E6; color:#2E6B32;}
.volver-inicio{display:block; margin-top:22px; text-align:center; font-size:0.85rem; color:var(--texto-suave); text-decoration:none;}
.volver-inicio:hover{color:var(--azul);}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .lista-servicios{grid-template-columns:1fr 1fr;}
  .grilla-acceso{grid-template-columns:1fr 1fr;}
}
@media (max-width:820px){
  .grilla-contacto{grid-template-columns:1fr;}
  .quienes-grid{grid-template-columns:1fr; gap:28px;}
  .foto-somos{order:-1;}
  .pantalla-dividida{grid-template-columns:1fr;}
  .panel-azul{padding:44px 32px; min-height:280px;}
}
@media (max-width:700px){
  .menu-boton{display:flex;}
  .menu-nav{
    position:absolute; top:72px; left:0; right:0;
    background:var(--azul);
    flex-direction:column; gap:0; align-items:stretch;
    max-height:0; overflow:hidden;
  }
  .menu-nav.abierto{max-height:340px;}
  .menu-nav a{padding:16px 32px; border-bottom:1px solid rgba(255,255,255,0.12);}
  .menu-nav a.enlace-login{margin:14px 32px; text-align:center;}
  .encabezado-seccion h2{font-size:1.4rem;}
  .lista-servicios{grid-template-columns:1fr;}
  .grilla-acceso{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}