:root{
  --bg:#ffffff;           /* fondo general */
  --ink:#101828;          /* texto principal */
  --muted:#475467;        /* texto secundario */
  --brand:#00091A;        /* header y footer */
  --band:#F2F2F2;         /* franja de títulos full-bleed */
  --line:#e5e7eb;         /* bordes suaves */
  --radius:14px;
  --shadow:0 8px 24px rgba(16,24,40,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ===== NAV / FOOTER ===== */
.navbar{position:sticky; top:0; z-index:50; background:var(--brand); color:#fff}
.navwrap{max-width:1100px; margin:auto; display:flex; gap:16px; align-items:center; padding:14px 18px}
.brand{color:#fff; text-decoration:none; font-weight:800; letter-spacing:.3px}
.navspacer{flex:1}
.navlinks a{color:#d0d5dd; text-decoration:none; margin:0 10px; font-weight:600}
.navlinks a:hover{color:#fff}
.flags{display:flex; gap:8px}
.flags img{width:28px; height:20px; border-radius:3px; border:1px solid rgba(255,255,255,.35)}

.site-footer{background:var(--brand); color:#fff; text-align:center; padding:24px 18px; margin-top:40px}
.site-footer a{color:#fff; text-decoration:underline}

/* ===== Contenedor y tarjetas ===== */
.container{max-width:1100px; margin:auto; padding:28px 18px}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}

/* ===== Títulos con franja full-bleed ===== */
.band{background:var(--band); width:100%}
.band .container{padding-top:18px; padding-bottom:18px}
.band h2{margin:0; color:#101828; font-size:1.6rem; font-weight:800; text-align:left}

/* ===== Grids responsivos ===== */
.grid{display:grid; gap:22px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){ .grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){ .grid-2,.grid-3{grid-template-columns:1fr} }
@media (max-width: 1024px) {
  #servicios .card,
  #services .card {
    min-height: auto; /* se adaptan al contenido */
  }
}

/* ==== Ajuste de la sección Servicios ==== */

/* Hace que las tarjetas sean más altas y con más espacio interior */
#servicios .card,
#services .card {
  min-height: 520px;          /* antes 350–400px, ahora más alta */
  padding: 24px 22px;         /* un poco más de aire interno */
}

/* Aumenta la separación entre columnas y filas */
#servicios .grid,
#services .grid {
  gap: 30px;
}

/* Mejora legibilidad de listas largas */
#servicios ul,
#services ul {
  font-size: 0.96rem;
  line-height: 1.5;
  margin-bottom: 0;
  max-width: 95%;
}



/* ===== Imágenes de sección ===== */
.section-img{width:100%; height:220px; object-fit:cover; border-radius:12px; border:1px solid var(--line);}

/* ===== Botones y formularios ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--brand); color:#fff; border:none; cursor:pointer;
  padding:10px 16px; border-radius:10px; font-weight:700; font-size:.95rem;
}
.btn:hover{filter:brightness(1.1)}
.btn.small{padding:8px 12px; font-size:.9rem}

.form{display:grid; gap:14px}
.input,.textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink);
}
.input:focus,.textarea:focus{outline:none; border-color:#c7d2fe; box-shadow:0 0 0 3px rgba(58,134,255,.18)}
.checkbox{display:flex; gap:10px; align-items:center; color:var(--muted)}

/* ===== Clientes ===== */
.clients{display:grid; gap:16px; grid-template-columns:repeat(6, minmax(0,1fr))}
@media (max-width:960px){ .clients{grid-template-columns:repeat(3,1fr)} }
@media (max-width:520px){ .clients{grid-template-columns:repeat(2,1fr)} }
.client-logo {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  height: 100px; /* más alto para logos grandes */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
}

.client-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ajusta el logo sin deformar */
  display: block;
  filter: brightness(1);
  transition: transform 0.2s ease;
}

.client-logo img:hover {
  transform: scale(1.05); /* efecto ligero al pasar el mouse */
}

.client-badge {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
}