/* ============================================================
   Exitosamente — sistema de diseño
   Paleta base: #014B43 (teal) + #000000 (negro), con tintes y
   sombras derivados de esos dos colores para mantener contraste
   WCAG 2.1 AA/AAA en todo el sitio.
   ============================================================ */
:root {
  --ex-teal: #014B43;        /* marca primaria: títulos, botones, acentos */
  --ex-teal-dark: #012F2A;   /* hover / secciones oscuras */
  --ex-teal-mid: #0C6B5F;    /* enlaces, hover secundario */
  --ex-teal-tint: #E7EFEE;   /* fondo de secciones alternas */
  --ex-teal-tint-2: #D3E4E1; /* bordes, chips, detalles */
  --ex-mint-on-dark: #7FD9C4; /* SOLO sobre fondos oscuros (negro/teal oscuro) */
  --ex-cream: #F9ECE5;       /* acento cálido: fondos alternos, detalles */
  --ex-teal-rgb: 1, 75, 67;
  --ex-black: #000000;
  --ex-ink: #0A0A0A;         /* texto de cuerpo */
  --ex-muted: #4B5956;       /* texto secundario, 7.3:1 sobre blanco */
  --ex-light: #FFFFFF;
  --ex-whatsapp: #25D366;      /* verde oficial de WhatsApp — SOLO con texto/ícono oscuro encima */
  --ex-whatsapp-dark: #1CAE57; /* mismo verde, más oscuro para hover — texto negro sigue nítido (7.2:1) */
  --ex-radius-lg: 1.25rem;
  --ex-radius-md: 0.9rem;
  --ex-shadow: 0 12px 32px rgba(1, 75, 67, 0.1);
}

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: 'Nunito Sans', system-ui, -apple-system, sans-serif;
  color: var(--ex-ink);
  background-color: var(--ex-light);
  padding-top: 72px;
}

h1, h2, h3, h4, .navbar-brand {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 700;
}

a { text-decoration: none; color: var(--ex-teal-mid); }
a:hover { color: var(--ex-teal-dark); }

/* ---------- Accesibilidad ---------- */
.skip-link {
  position: absolute;
  left: 0;
  top: -60px;
  background: var(--ex-teal);
  color: #fff;
  padding: 0.85rem 1.5rem;
  font-weight: 600;
  border-radius: 0 0 0.6rem 0;
  z-index: 2000;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
  color: #fff;
}

:focus-visible {
  outline: 3px solid var(--ex-teal);
  outline-offset: 3px;
  border-radius: 4px;
}
.whatsapp-float:focus-visible,
.back-to-top:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 3px var(--ex-teal);
}

/* ---------- Utilidades ---------- */
.bg-light-ex { background-color: var(--ex-teal-tint); }
.bg-primary-ex { background-color: var(--ex-teal); }
.bg-cream-ex { background-color: var(--ex-cream); }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ex-teal-dark);
  background: var(--ex-teal-tint);
  padding: 0.35rem 0.9rem;
  border-radius: 50px;
}
.eyebrow-light {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

.section-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.section-eyebrow-row.justify-content-center { justify-content: center; }
.section-number {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--ex-teal-mid);
  border: 1px solid var(--ex-teal-tint-2);
  border-radius: 50px;
  padding: 0.3rem 0.75rem;
}

.section-py { padding-block: clamp(3.5rem, 6vw, 6rem); }

.section-title {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.section-subtitle {
  color: var(--ex-muted);
  font-size: 1.05rem;
}

/* Resalte tipográfico editorial (reemplaza color plano por subrayado
   de marca: mantiene el texto en negro = contraste máximo) */
.highlight {
  text-decoration-line: underline;
  text-decoration-color: var(--ex-teal-mid);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.16em;
}

/* ---------- Navbar ---------- */
.navbar { padding-block: 0.6rem; }
.navbar-brand { font-size: 1.3rem; color: var(--ex-ink) !important; }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.6rem;
  background: linear-gradient(135deg, var(--ex-teal), var(--ex-black));
  color: #fff;
  font-weight: 800;
}
.brand-mark-light { background: linear-gradient(135deg, var(--ex-teal-mid), var(--ex-teal)); }
.nav-link { font-weight: 500; color: var(--ex-ink); }
.nav-link:hover { color: var(--ex-teal); }

/* ---------- Botones ---------- */
.btn-whatsapp,
.btn-whatsapp:visited {
  background-color: var(--ex-whatsapp);
  border-color: var(--ex-whatsapp);
  color: var(--ex-black);
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
.btn-whatsapp:hover,
.btn-whatsapp:focus,
.btn-whatsapp:active,
.btn-whatsapp:visited:hover {
  /* !important: Bootstrap define `:not(.btn-check) + .btn:active` con más
     especificidad que cualquier selector de clase simple, y ese estado activo
     hereda el color del contenedor (texto oscuro sobre fondos oscuros). */
  background-color: var(--ex-whatsapp-dark) !important;
  border-color: var(--ex-whatsapp-dark) !important;
  color: var(--ex-black) !important;
}
.btn-outline-primary-ex,
.btn-outline-primary-ex:visited {
  border: 2px solid var(--ex-teal);
  color: var(--ex-teal);
  font-weight: 600;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
.btn-outline-primary-ex:hover,
.btn-outline-primary-ex:focus,
.btn-outline-primary-ex:active {
  background-color: var(--ex-teal) !important;
  border-color: var(--ex-teal) !important;
  color: #fff !important;
}

/* ---------- Marquee decorativo ---------- */
.marquee {
  overflow: hidden;
  background: var(--ex-black);
  padding-block: 0.85rem;
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: marquee-scroll 30s linear infinite;
  white-space: nowrap;
}
.marquee__item {
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}
.marquee__item i { color: var(--ex-mint-on-dark); font-size: 0.6rem; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---------- Hero ---------- */
.hero {
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 6vw, 4rem);
  background: radial-gradient(circle at 100% 0%, rgba(var(--ex-teal-rgb), 0.07), transparent 55%), #ffffff;
}
.hero-title {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 1.25rem;
}
.hero-lead {
  font-size: 1.1rem;
  color: var(--ex-muted);
  max-width: 42rem;
}
.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--ex-muted);
}
.hero-trust i { color: var(--ex-teal); }

.hero-visual {
  position: relative;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}
.hero-blob {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, rgba(var(--ex-teal-rgb), 0.16), rgba(0, 0, 0, 0.06));
  border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%;
  transform: scale(1.05);
}

.hero-photo {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  aspect-ratio: 5 / 6;
  border-radius: 28px 120px 28px 28px;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 24px 48px rgba(1, 75, 67, 0.22);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-card-float {
  position: absolute;
  z-index: 2;
  bottom: -1.25rem;
  left: -1rem;
  max-width: 260px;
}
.hero-card {
  background: #fff;
  border: 1px solid var(--ex-teal-tint-2);
  border-radius: var(--ex-radius-md);
  box-shadow: var(--ex-shadow);
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 340px;
}
.hero-card i { font-size: 1.6rem; color: var(--ex-teal); }
.hero-card div { display: flex; flex-direction: column; }
.hero-card strong { font-size: 0.95rem; }
.hero-card span { font-size: 0.82rem; color: var(--ex-muted); }
.hero-card-1 { align-self: flex-start; }
.hero-card-2 { align-self: center; margin-left: 2rem; }
.hero-card-3 { align-self: flex-end; }

/* ---------- Barra de confianza ---------- */
.trust-bar {
  padding-block: 2.5rem;
  background-color: var(--ex-teal-tint);
  border-top: 1px solid var(--ex-teal-tint-2);
  border-bottom: 1px solid var(--ex-teal-tint-2);
}
.trust-number {
  font-family: 'Poppins', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--ex-teal);
}
.trust-label {
  font-size: 0.85rem;
  color: var(--ex-muted);
  max-width: 200px;
  margin-inline: auto;
}

/* ---------- Sobre la mentora ---------- */
.mentor-photo-wrap {
  position: relative;
  max-width: 320px;
  margin-inline: auto;
}
.mentor-photo {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ex-teal), var(--ex-black));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ex-shadow);
}
.mentor-photo span {
  font-family: 'Poppins', sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  color: #fff;
}
.mentor-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.mentor-badge {
  position: absolute;
  bottom: 0.5rem;
  right: -0.5rem;
  background: var(--ex-cream);
  box-shadow: var(--ex-shadow);
  border-radius: 50px;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ex-teal);
}
.mentor-badge i { color: var(--ex-teal-mid); margin-right: 0.25rem; }

.check-list { list-style: none; padding-left: 0; margin: 1.25rem 0; }
.check-list li { margin-bottom: 0.55rem; color: var(--ex-ink); }
.check-list i { color: var(--ex-teal); margin-right: 0.5rem; }

/* ---------- Tarjetas de servicio ---------- */
.service-card {
  background: #fff;
  border: 1px solid transparent;
  border-radius: var(--ex-radius-lg);
  box-shadow: var(--ex-shadow);
  padding: 2rem 1.6rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(1, 75, 67, 0.16);
  border-color: var(--ex-teal-tint-2);
}
.service-icon {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 0.9rem;
  background: rgba(var(--ex-teal-rgb), 0.1);
  color: var(--ex-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
}
.service-card h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.service-card p { color: var(--ex-muted); font-size: 0.95rem; flex-grow: 1; }
.service-link { font-weight: 600; color: var(--ex-teal); margin-top: 1rem; }
.service-link:hover { color: var(--ex-teal-dark); }

/* ---------- Info productos ---------- */
.product-card {
  background: #fff;
  border: 1px solid var(--ex-teal-tint-2);
  border-radius: var(--ex-radius-lg);
  box-shadow: var(--ex-shadow);
  padding: 2.2rem;
  height: 100%;
  text-align: center;
}
.product-icon {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ex-teal), var(--ex-teal-mid));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-inline: auto;
  margin-bottom: 1.2rem;
}
.product-card h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.product-card p { color: var(--ex-muted); margin-bottom: 1.4rem; }

/* ---------- Proceso ---------- */
.step-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--ex-radius-lg);
  padding: 2rem;
  height: 100%;
  text-align: center;
}
.step-number {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: #fff;
  color: var(--ex-teal-dark);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  margin-bottom: 1rem;
}
.step-card h3 { color: #fff; font-size: 1.1rem; margin-bottom: 0.5rem; }
.step-card p { color: rgba(255,255,255,0.85); font-size: 0.95rem; margin-bottom: 0; }

/* ---------- Testimonios ---------- */
.testimonial-card {
  max-width: 640px;
  background: #fff;
  border: 1px solid var(--ex-teal-tint-2);
  border-radius: var(--ex-radius-lg);
  box-shadow: var(--ex-shadow);
  padding: 2.5rem;
  text-align: center;
}
.testimonial-card i.bi-quote { font-size: 2rem; color: var(--ex-teal-mid); }
.testimonial-card p { font-size: 1.05rem; margin: 1rem 0; }
.testimonial-card strong { color: var(--ex-teal); font-size: 0.9rem; }
.carousel-control-prev, .carousel-control-next { width: 5%; }
.carousel-control-prev-icon, .carousel-control-next-icon { filter: invert(1) grayscale(100); }

/* ---------- Redes sociales ---------- */
.social-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  background: rgba(255,255,255,0.1);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-weight: 600;
}
.social-pill:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* ---------- CTA final ---------- */
.cta-final {
  padding-block: clamp(3.5rem, 6vw, 5rem);
  background: linear-gradient(135deg, var(--ex-teal), var(--ex-teal-dark));
  color: #fff;
  text-align: center;
}
.cta-final h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 0.75rem; }
.cta-final p { color: rgba(255,255,255,0.9); margin-bottom: 1.75rem; font-size: 1.05rem; }

/* ---------- Footer ---------- */
.footer-site {
  background: var(--ex-black);
  color: rgba(255,255,255,0.85);
}
.footer-heading { color: #fff; font-weight: 700; font-size: 0.95rem; margin-bottom: 1rem; }
.footer-links { list-style: none; padding-left: 0; }
.footer-links li { margin-bottom: 0.55rem; }
.footer-links a { color: rgba(255,255,255,0.7); }
.footer-links a:hover { color: var(--ex-mint-on-dark); }
.text-light-50 { color: rgba(255,255,255,0.6) !important; }
.border-light-50 { border-color: rgba(255,255,255,0.15) !important; }

/* ---------- WhatsApp flotante + back to top ---------- */
.whatsapp-float,
.whatsapp-float:visited {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--ex-whatsapp);
  color: var(--ex-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.45);
  z-index: 1040;
  transition: transform 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.whatsapp-float:hover,
.whatsapp-float:focus,
.whatsapp-float:active {
  background: var(--ex-whatsapp-dark);
  color: var(--ex-black);
  transform: scale(1.08);
}

.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 5.25rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: none;
  background: var(--ex-black);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1040;
  box-shadow: var(--ex-shadow);
}
.back-to-top.show { display: flex; }

/* ---------- Scroll reveal (motion moderado) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .whatsapp-float, .service-card { transition: none; }
}

/* ---------- Banner de cookies ---------- */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background: var(--ex-black);
  border-top: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.25);
}
.cookie-banner__inner {
  padding-block: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.cookie-banner__text {
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  margin: 0;
  max-width: 56rem;
}
.cookie-banner__text a {
  color: var(--ex-mint-on-dark);
  text-decoration: underline;
}
.cookie-banner__actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}
.btn-outline-light-ex {
  border: 2px solid rgba(255,255,255,0.4);
  color: #fff;
  font-weight: 600;
  background: transparent;
}
.btn-outline-light-ex:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
@media (max-width: 575.98px) {
  .cookie-banner__inner { flex-direction: column; align-items: stretch; text-align: center; }
  .cookie-banner__actions { justify-content: center; }
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .hero-visual { min-height: auto; margin-top: 2rem; }
  .hero-card-2 { margin-left: 0; }
}

@media (max-width: 575.98px) {
  .hero-card-float {
    position: static;
    max-width: 100%;
    margin-top: -2rem;
  }
}

@media (max-width: 575.98px) {
  .whatsapp-float { width: 3.1rem; height: 3.1rem; font-size: 1.5rem; }
  body { padding-top: 64px; }
}