/* ═══════════════════════════════════════════════════════════
   FONI — Mejoras de diseño · Mayo 2026
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Roboto como fuente principal ───────────────────────── */
body,
.home-hero__title,
.home-section__title,
.l-cta__title {
  font-family: 'Roboto', sans-serif;
}

/* ── 2. Animaciones de entrada del hero (escalonadas) ────────── */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-hero__eyebrow {
  animation: heroFadeUp 0.6s ease both;
  animation-delay: 0.05s;
}

.home-hero__title {
  animation: heroFadeUp 0.7s ease both;
  animation-delay: 0.2s;
}

.home-hero__lead {
  animation: heroFadeUp 0.7s ease both;
  animation-delay: 0.35s;
}

.home-hero__ctas {
  animation: heroFadeUp 0.7s ease both;
  animation-delay: 0.5s;
}

.home-hero__trust {
  animation: heroFadeUp 0.7s ease both;
  animation-delay: 0.65s;
}


/* ── 4. Decorador visual del hero en mobile ────────────────── */
@media (max-width: 767.98px) {
  .home-hero::after {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(43, 163, 179, 0.13) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }

  .home-hero .container {
    text-align: center;
    position: relative;
    z-index: 1;
  }

  .home-hero__lead {
    margin-left: auto;
    margin-right: auto;
  }

  .home-hero__trust {
    justify-content: center;
  }
}

/* ── 6. Proceso — sección sobre fondo oscuro ───────────────── */
#proceso.home-section--alt {
  background: #0f172a;
}

#proceso .home-section__eyebrow {
  color: var(--foni-teal);
  background: rgba(43, 163, 179, 0.15);
}

#proceso .home-section__title {
  color: #f8fafc;
}

#proceso .home-section__subtitle {
  color: #94a3b8;
}

#proceso .process__step {
  background: #1e293b;
  border-color: #334155;
}

#proceso .process__title {
  color: #f8fafc;
}

#proceso .process__desc {
  color: #94a3b8;
}

#proceso .process::before {
  opacity: 0.55;
}

/* ── 7. Footer logo — asegurar que no se corte ─────────────── */
.footer-logo-wrap .custom-logo-link img {
  width: 150px;
  height: auto;
  max-width: none;
  display: block;
}

/* ── 8. Testimonios — estrellas + controles custom ─────────── */
.testimonial__stars {
  display: block;
  color: #f59e0b;
  font-size: 0.95rem;
  letter-spacing: 3px;
  margin-bottom: 0.5rem;
}

.testimonials .carousel-control-prev,
.testimonials .carousel-control-next {
  width: 44px;
  height: 44px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  background: #fff;
  border: 1.5px solid #e6eef0;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
  opacity: 1;
  filter: none;
  transition: box-shadow 0.2s, transform 0.2s;
}

.testimonials .carousel-control-prev:hover,
.testimonials .carousel-control-next:hover {
  box-shadow: 0 6px 20px rgba(43, 163, 179, 0.22);
  transform: translateY(calc(-50% - 1px));
}

/* Íconos teal en lugar de los Bootstrap blancos por defecto */
.testimonials .carousel-control-prev-icon {
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232BA3B3'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.testimonials .carousel-control-next-icon {
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232BA3B3'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* ── 9. Section eyebrow — variante borde izquierdo (Sobre mí) ── */
#sobre-mi .home-section__eyebrow {
  background: transparent;
  border-left: 3px solid var(--foni-teal);
  border-radius: 0;
  padding: 0.2rem 0.75rem;
  letter-spacing: 0.1em;
}

/* ═══════════════════════════════════════════════════════════
   Dark mode — overrides para los elementos nuevos
   ═══════════════════════════════════════════════════════════ */
body.dark #proceso.home-section--alt {
  background: #050c14;
}

body.dark #proceso .process__step {
  background: #0c1824;
  border-color: #1c2e3a;
}

body.dark #proceso .process__title {
  color: #f0f6f8;
}

body.dark #proceso .process__desc {
  color: #6b8a96;
}

body.dark .testimonials .carousel-control-prev,
body.dark .testimonials .carousel-control-next {
  background: #0f2530;
  border-color: #1a3540;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

body.dark #sobre-mi .home-section__eyebrow {
  border-color: var(--foni-teal);
}