:root{
  --ays-blue:#165BAA; --ays-red:#E53935;
  /* ancla cerca del título/sección */
  --anchor-offset:95px;
  /* columnas laterales del menú-píldora (logo/espaciador) para centrarlo */
  --pill-col:140px;
}

html{ scroll-behavior:smooth; scroll-padding-top: var(--anchor-offset); }
#soluciones, #nosotros, #contacto { scroll-margin-top: var(--anchor-offset); }

/* NAV pill centrado respecto a la píldora */
.navbar{ background: transparent !important; box-shadow:none; }
.menu-pill-large{
  background: linear-gradient(#ffffff, #F7F9FC);
  border-radius:9999px; border:1px solid rgba(0,0,0,.06);
  padding:.6rem 1.2rem; width:100%; margin:0 auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 20px 34px rgba(0,0,0,.20), 0 8px 14px rgba(0,0,0,.12);
  display:grid; grid-template-columns: var(--pill-col) 1fr var(--pill-col); align-items:center; gap:1rem;
}
.pill-logo{ height:76px; width:auto; display:block; }
.pill-logo-wrap{ margin-left:19px; }
.pill-spacer{ width:100%; height:1px; } /* simula la columna del logo a la derecha */
.pill-center{ display:flex; align-items:center; justify-content:center; gap:.5rem; }
.pill-center .nav-link{ color:var(--ays-blue) !important; font-weight:700; border-radius:9999px; padding:.7rem 1.15rem; font-size:1.1rem; }
.pill-center .nav-link:hover{ background:rgba(0,0,0,.06); color:#0036C6 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95); text-decoration:none; }

/* Fondo + hero */
body{ background-image:url('../img/bg-circuit.png'); background-repeat:repeat; background-size:768px 768px; background-attachment:fixed; }
:root{ --nav-top-gap: 28px; }
.hero{ background: linear-gradient(120deg, #0b2239 0%, #123456 100%); color:#fff; padding: 4.2rem 0 3.2rem; border-bottom:4px solid rgba(255,255,255,.08); margin-top: var(--nav-top-gap); }
.hero .lead{ color: rgba(255,255,255,.9); }
.hero-title{ font-weight:900; line-height:1.12; letter-spacing:.4px; }
.hero-line1{ color:var(--ays-blue); text-transform:uppercase; font-size:clamp(1.8rem, 3.1vw, 2.35rem); display:inline-block; }
.hero-line2{ color:var(--ays-red);  text-transform:uppercase; font-size:clamp(1.7rem, 2.9vw, 2.15rem); display:inline-block; }

/* Sublead “Soluciones” (sin negrita) */
.solu-sublead{ font-weight:400; font-size:1.25rem; line-height:1.45; }

/* Grelha tarjetas: más separación */
.cards-grid{
  --bs-gutter-x: 2.25rem;
  --bs-gutter-y: 2.25rem;
  margin-left: -.5rem; margin-right: -.5rem;
}
.col-card{ display:flex; }

/* Tarjetas: más estrechas, altas; imagen arriba (soporte SVG sin recorte) */
.service-card{
  border:1px solid #e6eaf0; border-radius:18px; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
  display:flex; flex-direction:column;
  max-width: 360px; margin-left:auto; margin-right:auto;
}
.service-card:hover{ transform: translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.12); }

/* --- Área de imagen --- */
.service-img{ width:100%; display:block; object-fit:cover; }                /* por defecto, raster: cover */
.service-img[src$=".svg"]{
  /* Para SVG: mostrar todo el gráfico SIN recortar ni deformar */
  object-fit:contain;
  background:#ffffff;               /* fondo claro para transparencias */
  padding: 12px;                    /* respira dentro del marco */
}

/* Alturas en escritorio: imagen ~30%, texto ~70% */
@media (min-width: 992px){
  .service-card{ height: 560px; }
  .service-img{ height: 30%; min-height:150px; }
}

/* Texto de la tarjeta */
.service-card .card-title{ font-weight:800; letter-spacing:.2px; }
.service-card .card-text{ color:#5b6b7b; }

/* Contacto + paneles */
#contacto .p-4.border.rounded-3.h-100{ background:#fff !important; border:2px solid var(--ays-blue) !important; border-radius:14px !important; box-shadow:0 8px 24px rgba(0,0,0,.08); }
#contacto .form-control{ background:#F5F7FB; border:1px solid #D9E1EC; }
#contacto .form-control:focus{ border-color:var(--ays-blue); box-shadow:0 0 0 .2rem rgba(22,91,170,.15); }
#contacto .btn-primary{ border-radius:10px; padding:.85rem 1.25rem; font-weight:700; }
.contact-equal .p-4.border.rounded-3.h-100{ min-height: 440px; }
.map-wrap{ width:100%; height:100%; border-radius:.5rem; overflow:hidden; }
.map-iframe{ width:100%; height:100%; border:0; }

.contact-panels{ background:#0F6CBD; color:#fff; border-radius:22px; box-shadow:0 18px 36px rgba(0,0,0,.16); overflow:hidden; }
.qp-item{ display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.35rem; padding:1.15rem .75rem; min-height:120px; }
.qp-item .bi{ font-size:2rem; line-height:1; }
.qp-img{ width:36px; height:36px; display:block; object-fit:contain; }
.qp-text{ font-weight:700; }
.qp-link{ color:#fff; text-decoration:none; }
.qp-link:hover{ background: rgba(255,255,255,.08); color:#fff; }
@media (min-width: 992px){ .contact-panels .col-lg-3 + .col-lg-3{ border-left:1px solid rgba(255,255,255,.35); } }

/* WhatsApp FAB */
.whatsapp-fab{ position:fixed; right:18px; bottom:18px; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background:#25D366; box-shadow:0 12px 24px rgba(0,0,0,.2); z-index:1050; text-decoration:none; transition: transform .2s ease, box-shadow .2s ease; }
.whatsapp-fab .bi{ font-size:1.8rem; }
.whatsapp-fab:hover{ transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,.24); color:#fff; }

/* Honeypot oculto (form) */
.hp-field{ position:absolute !important; left:-5000px !important; height:0 !important; width:0 !important; opacity:0 !important; }

/* Botoncito años de servicio */
.years-badge{
  display:inline-block; background:var(--ays-blue); color:#fff;
  font-weight:700; border-radius:9999px; padding:.45rem .9rem;
  box-shadow:0 6px 16px rgba(0,0,0,.12); letter-spacing:.2px;
}

/* Responsive */
@media (max-width: 991.98px){
  :root{ --anchor-offset: 88px; }
  .pill-logo{ height:48px; }
  .menu-pill-large{ grid-template-columns: 100px 1fr 100px; border-radius:28px; padding:.55rem .8rem; }
  .service-img{ height: 180px; } /* en móvil, imagen un poco mayor para legibilidad */
}