/* Sección pública de Home: blanco y acentos existentes de NAVOA. */
.home-services { position:relative; background:#fff; color:#132638; padding:100px 0 110px; scroll-margin-top:80px; }
.home-services__inner { width:min(1160px,calc(100% - 80px)); margin:0 auto; }
.home-services__heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:56px; }
.home-services__heading h2 { margin:0; font:400 clamp(2.625rem,5vw,68px)/1.05 var(--font-heading); letter-spacing:-.045em; }
.home-services__statement { max-width:360px; margin:0; color:#526071; font:400 1.0625rem/1.55 var(--font-body); letter-spacing:-.005em; text-align:left; }

/* ===== Grid de cards ===== */
.home-services__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; align-items:stretch; }

.home-services__service {
  --service-accent:#206EF3;
  --service-tint-rest:rgba(32,110,243,.045); --service-tint-hover:rgba(32,110,243,.09);
  --service-border-rest:rgba(32,110,243,.16); --service-border-hover:rgba(32,110,243,.32);
  position:relative; display:flex; flex-direction:column; align-items:flex-start; min-width:0; height:100%;
  padding:36px 32px 30px; box-sizing:border-box;
  background:var(--service-tint-rest); border:1px solid var(--service-border-rest); border-radius:20px;
  color:inherit; text-decoration:none;
  transition:background-color .28s ease, border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}
.home-services__service:nth-child(2) {
  --service-accent:#7567E8;
  --service-tint-rest:rgba(117,103,232,.05); --service-tint-hover:rgba(117,103,232,.1);
  --service-border-rest:rgba(117,103,232,.18); --service-border-hover:rgba(117,103,232,.34);
}
.home-services__service:nth-child(3) {
  /* Verde NAVOA: mismo par usado en el dropdown — número/borde en verde oscuro, tinte de fondo en el lima claro del sistema. */
  --service-accent:#2F6B3A;
  --service-tint-rest:rgba(201,242,124,.1); --service-tint-hover:rgba(201,242,124,.2);
  --service-border-rest:rgba(47,107,58,.16); --service-border-hover:rgba(47,107,58,.34);
}

.home-services__service:is(:hover,:focus-visible) {
  background:var(--service-tint-hover);
  border-color:var(--service-border-hover);
  box-shadow:0 20px 40px rgba(19,38,56,.1);
  transform:translateY(-4px);
}
.home-services__service:focus-visible { outline:2px solid var(--service-accent); outline-offset:4px; }

.home-services__top { display:flex; align-items:baseline; gap:14px; margin-bottom:26px; }
.home-services__number {
  color:var(--service-accent); font:400 clamp(2.5rem,3.6vw,54px)/1 var(--font-heading); letter-spacing:-.03em;
  transition:color .28s ease;
}
.home-services__category {
  color:var(--service-accent); font:500 .75rem/1.5 var(--font-mono); letter-spacing:.08em;
  transition:color .28s ease;
}
.home-services__service h3 { margin:0; font:400 clamp(1.75rem,2.4vw,34px)/1.15 var(--font-heading); letter-spacing:-.03em; }
.home-services__lead { margin:16px 0 0; color:#3B4A58; font:400 .9688rem/1.6 var(--font-body); }
.home-services__meta {
  display:block; margin-top:22px; padding-top:18px; border-top:1px solid rgba(19,38,56,.1);
  color:#7A8794; font:500 .75rem/1.6 var(--font-mono); letter-spacing:.08em;
  transition:border-color .28s ease;
}
.home-services__service:is(:hover,:focus-visible) .home-services__meta { border-top-color:var(--service-border-hover); }

.home-services__arrow { margin-top:24px; align-self:flex-end; color:var(--service-accent); font-size:1.5rem; line-height:1; transition:transform .2s ease, color .28s ease; }
.home-services__service:is(:hover,:focus-visible) .home-services__arrow { transform:translateX(5px); }

/* Cápsula flotante — mismo tamaño/tipografía/color que antes; ahora sigue al cursor (ver home-services.js).
   top/left son actualizados en línea por JS en px relativos a la card; los valores de abajo son solo
   el punto de partida antes del primer pointermove (p.ej. al llegar por foco de teclado). */
.home-services__callout {
  position:absolute; top:14px; left:32px;
  padding:7px 14px; border-radius:999px; background:var(--service-accent); color:#fff;
  font:500 .75rem/1.2 var(--font-body); font-style:normal; letter-spacing:-.005em; white-space:nowrap;
  opacity:0; pointer-events:none; z-index:2;
  transition:opacity .18s ease, left .12s ease-out, top .12s ease-out;
  box-shadow:0 10px 22px rgba(10,20,35,.16);
}
.home-services__service:is(:hover,:focus-visible) .home-services__callout { opacity:1; }

@media(max-width:767px) {
  .home-services { padding:64px 0 72px; }
  .home-services__inner { width:calc(100% - 40px); }
  .home-services__heading { flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:40px; }
  .home-services__statement { max-width:100%; }
  .home-services__grid { grid-template-columns:1fr; gap:20px; }
  .home-services__service { padding:32px 26px 26px; }
  .home-services__number { font-size:2.75rem; }
  .home-services__service h3 { font-size:1.8125rem; }
  /* Sin hover en touch: la cápsula no debe depender de :hover para transmitir el servicio */
  .home-services__callout { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .home-services__service, .home-services__arrow, .home-services__number, .home-services__category, .home-services__meta, .home-services__callout { transition:none; }
}

/* Fase 3: el mensaje flotante de cada servicio es solo para mouse; en tablet y celular no se muestra
   (además, aun invisible, generaba scroll horizontal a 768 px). */
@media (max-width:1023px){.home-services__callout{display:none}}