/* Sección: hero — lienzo claro con el logo oficial como ancla visual */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--grad-light);
  padding: clamp(150px, 15vw, 190px) 0 clamp(72px, 9vw, 110px);
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .55; }
.hero-glow {
  position: absolute; z-index: -1; width: 620px; height: 620px; right: -140px; top: 40px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--blue-rgb), .14), transparent 65%);
}
.hero h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.08; font-weight: 800; }
.hero .lead { color: var(--brand-slate); }
.hero .lead strong { color: var(--brand-navy); }
.hero-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid var(--line-strong); color: var(--brand-navy);
  font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .55rem 1rem; border-radius: 99px; box-shadow: var(--shadow-sm);
}
.hero-pill i { color: var(--brand-blue); }
.hero-trust { font-size: .92rem; color: var(--brand-slate); font-weight: 500; }
.hero-trust i { color: var(--brand-blue); margin-right: .35rem; }

/* Tarjeta del logo oficial (fondo blanco y espacio libre generoso) */
.hero-brand { position: relative; max-width: 460px; margin-inline: auto; }
.hero-logo-card {
  background: #fff; border-radius: 2rem; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: clamp(2rem, 5vw, 3.25rem);
}
.hero-logo-card img { display: block; width: 100%; max-width: 340px; height: auto; margin-inline: auto; }
.hero-logo-wrap { position: relative; isolation: isolate; }
.hero-ring {
  position: absolute; inset: -22px; z-index: -1; border-radius: 2.6rem;
  border: 1px dashed rgba(var(--blue-rgb), .35);
}
/* Etiquetas de servicio: debajo de la tarjeta, sin invadir el espacio libre del logo */
.hero-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2.25rem; }
.floating-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .95rem; border-radius: 99px; font-size: .85rem; font-weight: 700; color: var(--brand-navy);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  animation: float 6s ease-in-out infinite; white-space: nowrap;
}
.floating-badge:nth-child(2) { animation-delay: -2s; }
.floating-badge:nth-child(3) { animation-delay: -4s; }
.floating-badge i { color: var(--brand-blue); font-size: 1rem; }
@keyframes float { 50% { transform: translateY(-5px); } }

@media (max-width: 575.98px) {
  .hero-brand { max-width: 320px; }
  .floating-badge { font-size: .78rem; padding: .45rem .8rem; }
  .hero-logo-wrap { position: relative; isolation: isolate; }
.hero-ring { inset: -12px; }
}

/* Franja de tecnologías */
.tech-strip { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tech {
  font-size: .82rem; font-weight: 600; color: var(--brand-navy); padding: .4rem .85rem;
  border-radius: 99px; background: var(--brand-cloud); border: 1px solid var(--line);
}