/* ==========================================
   ¿QUÉ HACEMOS? — EFECTO DE ENTRADA NUEVO (LIMPIO)
   ✅ Título/subtítulo entran DESDE ARRIBA
   ✅ Cards entran DESDE ABAJO (stagger por contenedor)
   ✅ No repite patrones anteriores (sin clip-path, sin sheen, sin blur heavy)
   ✅ Preparado para trabajar con .is-visible (reveal script)
   Colores: #011077 / #000000 / #FFFFFF
========================================== */

.services{
  width:100%;
  background:#FFFFFF;
  position:relative;
  margin:0;
  padding:0;
  overflow:hidden;
  box-sizing:border-box;

  /* timing */
  --sv-ease:cubic-bezier(.22,.61,.36,1);
}

/* contenedor 1440 */
.services__container{
  max-width:1440px;
  margin:0 auto;
  padding:86px clamp(18px, 4vw, 64px) 160px;
  box-sizing:border-box;
}

/* header centrado */
.services__header{
  text-align:center;
  margin:0 auto 46px;
  max-width:980px;
}

/* =========================
   TIPOGRAFÍA
========================= */
.services__title{
  margin:0 0 18px;
  font-weight:900;
  line-height:1.05;
  letter-spacing:-0.02em;
  color:#011077;
  font-size:clamp(44px, 4.8vw, 72px);
}

.services__subtitle{
  margin:0;
  color:#000000;
  opacity:.78;
  font-weight:500;
  line-height:1.55;
  font-size:clamp(16px, 1.35vw, 22px);
}

.services__subtitle strong{
  color:#011077;
  font-weight:800;
  opacity:1;
}

/* =========================
   GRID 5 cards
========================= */
.services__grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:22px;
  align-items:stretch;
}

/* card */
.services__card{
  background:#FFFFFF;
  border:1px solid rgba(1,16,119,.16);
  border-radius:22px;
  padding:22px 18px 20px;
  box-sizing:border-box;
  text-align:center;

  box-shadow:0 16px 34px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* icon bubble */
.services__icon{
  width:92px;
  height:92px;
  border-radius:999px;
  margin:2px auto 18px;

  display:grid;
  place-items:center;

  background:rgba(1,16,119,.06);
  border:1px solid rgba(1,16,119,.14);
}

/* títulos y texto */
.services__cardTitle{
  margin:0 0 10px;
  font-size:24px;
  font-weight:900;
  color:#011077;
  letter-spacing:-0.01em;
}

.services__cardDesc{
  margin:0;
  font-size:16px;
  line-height:1.55;
  color:#000000;
  opacity:.78;
  font-weight:500;
}

/* hover suave */
@media (hover:hover) and (pointer:fine){
  .services__card:hover{
    transform:translateY(-4px);
    border-color:rgba(1,16,119,.28);
    box-shadow:0 22px 46px rgba(0,0,0,.12);
  }
}

/* =========================================================
   ENTRADAS (NUEVAS) — CONTROLADAS POR .is-visible
   - Al cargar con JS: oculto
   - Cuando el script añade .is-visible: anima
========================================================= */

/* ✅ Solo ocultar si JS está activo (evita que se “desaparezca” sin script) */
html.js-enabled .services .services__title,
html.js-enabled .services .services__subtitle,
html.js-enabled .services .services__card{
  opacity:0;
}

/* 1) LETRAS “¿Qué hacemos?” entran DESDE ARRIBA */
html.js-enabled .services .services__title{
  transform:translateY(-22px);
}

html.js-enabled .services .services__subtitle{
  transform:translateY(-16px);
}

/* 2) CARDS entran DESDE ABAJO, una por una */
html.js-enabled .services .services__card{
  transform:translateY(26px);
}

/* =========================
   Estado visible => animaciones
========================= */

/* title -> arriba hacia posición */
html.js-enabled .services.is-visible .services__title{
  animation:svFromTop .85s var(--sv-ease) both;
  animation-delay:.05s;
  will-change:transform, opacity;
}

html.js-enabled .services.is-visible .services__subtitle{
  animation:svFromTop .85s var(--sv-ease) both;
  animation-delay:.18s;
  will-change:transform, opacity;
}

/* cards -> desde abajo con stagger (usa --i por card) */
html.js-enabled .services.is-visible .services__card{
  animation:svFromBottom .95s var(--sv-ease) both;
  animation-delay:calc(.28s + (var(--i, 0) * 110ms));
  will-change:transform, opacity;
}

/* micro “pop” del icono (sin afectar layout) */
html.js-enabled .services.is-visible .services__icon{
  animation:svIconRise .95s var(--sv-ease) both;
  animation-delay:calc(.34s + (var(--i, 0) * 110ms));
  will-change:transform, opacity;
}

/* textos internos de la card (suave y limpio) */
html.js-enabled .services.is-visible .services__cardTitle{
  animation:svFadeIn .7s ease-out both;
  animation-delay:calc(.40s + (var(--i, 0) * 110ms));
}

html.js-enabled .services.is-visible .services__cardDesc{
  animation:svFadeIn .8s ease-out both;
  animation-delay:calc(.48s + (var(--i, 0) * 110ms));
}

/* =========================
   KEYFRAMES (NUEVOS)
========================= */
@keyframes svFromTop{
  from{ opacity:0; transform:translateY(-22px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes svFromBottom{
  0%{ opacity:0; transform:translateY(26px); }
  70%{ opacity:1; transform:translateY(-2px); }
  100%{ opacity:1; transform:translateY(0); }
}

@keyframes svIconRise{
  0%{ opacity:0; transform:translateY(10px) scale(.96); }
  70%{ opacity:1; transform:translateY(-2px) scale(1.02); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

@keyframes svFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* ✅ Accesibilidad */
@media (prefers-reduced-motion: reduce){
  html.js-enabled .services .services__title,
  html.js-enabled .services .services__subtitle,
  html.js-enabled .services .services__card{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }

  html.js-enabled .services .services__icon,
  html.js-enabled .services .services__cardTitle,
  html.js-enabled .services .services__cardDesc{
    animation:none !important;
  }
}

/* ===== Responsive ===== */
@media (max-width:1200px){
  .services__grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width:820px){
  .services__container{ padding-top:64px; padding-bottom:60px; }
  .services__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:520px){
  .services__grid{ grid-template-columns:1fr; }
  .services__card{ padding:20px 16px 18px; border-radius:20px; }
  .services__icon{ width:86px; height:86px; }
}