/* =========================
   RESET BÁSICO
   ========================= */
html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --dark: #071a33;
  --navy: #031d44;
  --accent: #f7b600;
  --white: #ffffff;
  --muted: rgba(255, 255, 255, 0.9);
  --max-width: 1200px;
  --font-sans: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* =========================
   BASE
   ========================= */
body {
  font-family: var(--font-sans);
  color: var(--muted);
  background: var(--navy);
  line-height: 1.4;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* HEADER PRINCIPAL (NAV) */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: rgba(7, 26, 51, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Contenedor del header */
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
}

/* Marca dentro del header (usa tu hero-brand existente, pero en modo "lineal") */
.header-brand {
  position: static;      /* quita absoluto */
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;

  display: flex;
  align-items: center;
  gap: 12px;
}

/* Asegura tamaño razonable para el logo dentro del header */
.header-brand .hero-logo-circle {
  width: 60px;
  height: 60px;
}

.header-brand .hero-logo-circle img {
  width: 50px;
  height: 50px;
}

/* Texto comprimido para header */
.header-brand .hero-brand-name {
  font-size: 44px;
  text-align: center;
}

.header-brand .hero-brand-consulting {
  font-size: 9px;
  letter-spacing: 0.22em;
}

.header-brand .hero-brand-tagline {
  font-size: 11px;
}

/* En móvil, puedes ocultar o simplificar la tagline para que no se coma el ancho */
@media (max-width: 900px) {
  .header-brand .hero-brand-name {
    font-size: 44px;
  }
}


.nav-logo img {
  height: 32px;
  width: auto;
}

/* Menú escritorio */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-menu a {
  font-size: 14px;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  padding: 10px 0;
  position: relative;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.2s ease;
}

.nav-menu a:hover::after {
  width: 100%;
}

/* Botón hamburguesa (móvil) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  height: 2px;
  width: 100%;
  background: #ffffff;
  border-radius: 999px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Estado abierto (se controla con clase .is-open en .nav-toggle) */
.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Ajuste para que el contenido no quede bajo el header fijo */
body {
  padding-top: 60px; /* ajusta a la altura de .main-header */
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: rgba(7, 26, 51, 0.98);
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 24px 14px;
    gap: 8px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .nav-menu.is-open {
    max-height: 400px; /* suficiente para mostrar todos los links */
  }

  .nav-menu a {
    width: 100%;
  }
}



/* Contenedor */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px 24px;
}

/* Enlaces básicos */
a {
  color: inherit;
  text-decoration: none;
}

/* =========================
   HERO / CABECERA
   ========================= */
.hero {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  margin-top: 75px;
  /* Imagen de fondo (más grande, ocupa todo el hero) */
  background-image: url("../assets/hero.png");
  background-size: cover;
  background-position: center right;
}

/* Capa de degradado azul encima de la imagen */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(7, 26, 51, 0.95) 0%,
      rgba(7, 26, 51, 0.9) 35%,
      rgba(7, 26, 51, 0.65) 60%,
      rgba(7, 26, 51, 0.25) 100%
    );
  z-index: 0;
}


/* Responsive */
@media (max-width: 1000px) {
  .hero-brand {
    left: 24px;  /* antes right: 24px; */
  }
}

@media (max-width: 560px) {
  .hero-brand {
    top: 16px;
    left: 16px;  /* antes right: 16px; */
    transform: scale(0.9);
    transform-origin: top left; /* antes top right */
  }
}

/* Logo circular */
.hero-logo-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-logo-circle img {
  width: 90px;
  height: 90px;
  object-fit: contain;
}

/* Texto de marca */
.hero-brand-text {
  color: #ffffff;
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
}

/* EvoQualitas más grande */
.hero-brand-name {
  font-size: 48px;      /* antes 24px */
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.brand-evo {
  color: #ffffff;
}
.brand-qualitas {
  color: var(--accent);
  font-size: 44px;
}

/* CONSULTING con líneas amarillas a los lados */
.hero-brand-consulting {
  position: relative;
  font-size: 20px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 2px;
  text-align: center;
  padding: 0 18px; /* espacio interior para las líneas */
}

/* Líneas amarillas */
.hero-brand-consulting::before,
.hero-brand-consulting::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 80px;
  height: 2px;
  background: linear-gradient(to right, #f7b600, #071a33);
  transform: translateY(-50%);
  flex: 0 0 50px;  /* largo de la línea (ajusta 40–80px) */
}

.hero-brand-consulting::before {
  left: 0;
}

.hero-brand-consulting::after {
  right: 0;
}

/* Tagline alineada con el título EvoQualitas */
.hero-brand-tagline {
  font-size: 11px;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;       /* asegura alineación a la izquierda */
}

.hero-brand-tagline span {
  color: var(--accent);
}

.specialist {
  position: relative;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  padding-left: 44px; /* deja espacio para el icono */
}

/* Ícono tipo medalla antes del texto */
.specialist::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 26, 51, 0.9); /* azul oscuro para que se vea el círculo */
}

/* Contenido de texto dentro del hero */
.hero-content {
  position: relative;
  z-index: 1; /* por encima del degradado */
}

/* Ajuste del container dentro del hero (alinear a la izquierda, centrado vertical) */
.hero-content .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 640px;
  padding-top: 72px;
  padding-bottom: 72px;
}

/* Logo flotando encima de la imagen, arriba a la derecha */
.hero-logo {
  position: absolute;
  top: 24px;
  right: 48px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-logo img {
  height: 56px;          /* ajusta según tu logo */
  width: auto;
}

/* Mantén tu tipografía existente */
.title {
  font-size: 48px;
  color: var(--white);
  font-weight: 800;
  line-height: 1.05;
  max-width: 540px;
}

.subtitle {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  max-width: 540px;
}

.specialist {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
}

/* Curva inferior sigue igual */
.bottom-curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 120px;
  pointer-events: none;
}




/* Logo */
.logo {
  width: 170px;
  max-width: 40%;
  height: auto;
  display: block;
}

/* Título principal */
.title {
  font-size: 48px;
  color: var(--white);
  font-weight: 800;
  line-height: 1.05;
  margin-top: 115px;
}

.title .accent {
  color: var(--accent);
  display: inline-block;
}

/* Subtítulo */
.subtitle {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  max-width: 560px;
}

/* Textos destacados */
.highlight {
  color: var(--accent);
  font-weight: 600;
}

/* Especialización */
.specialist {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
}




/* Curva inferior decorativa */
.bottom-curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 120px;
  pointer-events: none;
}

/* =========================
   FEATURES / PILARES
   ========================= */
/* Sección de features estilo línea con círculos */
.features {
  background-image: url('../assets/fondo-features.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;   /* o contain, según lo que quieras */
  color: #ffffff;
}



/* Contenedor de la línea con círculos */
.features-flow {
  display: flex;
  align-items: flex-start; /* antes: center */
  justify-content: center;
  gap: 50px;
  position: relative;
  overflow-x: auto;
  padding: 12px 0;
}

/* Círculo principal (más pequeño) */
.feature-circle {
  width: 90px;                  /* antes 110px */
  height: 90px;                 /* antes 110px */
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;           /* un poco menos espacio debajo */
  background: radial-gradient(circle at top, rgba(255,255,255,0.08), transparent 60%);
}

/* Icono dentro del círculo (ligeramente más pequeño) */
.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon img {
  width: 40px;   /* ajusta tamaño del icono */
  height: 40px;
  object-fit: contain;
}


/* Flechas / separadores punteados entre círculos */
.feature-arrow {
  flex: 0 0 40px;
  max-width: 60px;
  height: 2px;
  position: relative;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 0
  );
  background-size: 8px 2px;
  background-repeat: repeat-x;
  opacity: 0.8;

  /* clave para subirla a la mitad del círculo */
  align-self: center;     /* se centra respecto a la altura del flex */
  margin-top: -90px;      /* súbela; ajusta -24, -30 según veas */
}

/* Punta de flecha */
.feature-arrow::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(255, 255, 255, 0.8);
  border-top: 2px solid rgba(255, 255, 255, 0.8);
}


/* Título (naranja, mayúsculas) */
.feature h3 {
  margin-top: 4px;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent); /* naranja del diseño */
  text-align: center;
}

/* Texto (3 líneas, blanco) */
.feature p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

/* =========================
   SECCIÓN QUIÉNES SOMOS
   ========================= */

/* Columna izquierda */
.about-left {
  max-width: 680px;
}

/* Kicker: QUIÉNES SOMOS */
.about-kicker {
  font-size: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

/* Título principal */
.about-title {
  font-size: 32px;
  line-height: 1.15;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 24px;
}

.about-title span {
  color: var(--accent);
}

/* Lista de ítems */
/* Cada ítem: icono + línea + texto */
.about-item {
  display: grid;
  grid-template-columns: auto 1px minmax(0, 1fr); /* icono | línea | texto */
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12); /* línea horizontal entre ítems */
}

/* quitar línea en el último */
.about-item:last-child {
  border-bottom: none;
}

/* Icono circular más grande */
.about-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent 60%);
}

.about-icon img {
  width: 68px;   /* ajusta según tus PNG */
  height: 68px;
  object-fit: contain;
}

/* Línea vertical entre icono y texto */
.about-item-separator {
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.05)
  );
  margin-top: 4px;         /* baja un poco para alinearse con el texto */
}

/* Texto de cada ítem (se mantiene similar) */
.about-item-text h3 {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

.about-item-text p {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}


/* SECCIÓN QUIÉNES SOMOS CON FONDO EFREN */
.about {
  position: relative;
  color: #ffffff;
  padding: 64px 0 72px;
  background:
    linear-gradient(90deg, rgba(7, 26, 51, 0.96) 0%, rgba(7, 26, 51, 0.5) 55%, rgba(7, 26, 51, 0) 100%),
    url("../assets/efren.png");
  background-size: cover;
  background-position: center right;
}

.about-overlay {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 80%;  /* ajusta hasta que coincida visualmente con .about-left */
  background: linear-gradient(
    90deg,
    rgba(7, 26, 51, 0.95) 0%,
    rgba(7, 26, 51, 0.9) 70%,
    rgba(7, 26, 51, 0.0) 100%
  );
  z-index: 0;
}

/* Línea / cuña amarilla al final de .about */
.about::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;              /* que tape bien la unión */
  height: 5px;              /* alto de la franja, ajústalo */
  background: linear-gradient(
    5deg,
    #f7b600 0%,
    #f7b600 55%,
    rgba(247, 182, 0, 0.4) 100%
  );
  z-index: 1;
}

.about::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;              /* que tape bien la unión */
  height: 5px;              /* alto de la franja, ajústalo */
  background: linear-gradient(
    5deg,
    #f7b600 0%,
    #f7b600 55%,
    rgba(247, 182, 0, 0.4) 100%
  );
  z-index: 1;
}

/* Móvil: usar efren-movil.png */
@media (max-width: 768px) {
  .about {
    background:
      linear-gradient(90deg, rgba(7, 26, 51, 0.96) 0%, rgba(7, 26, 51, 0.5) 55%, rgba(7, 26, 51, 0) 100%),
      url("../assets/efren-movil.png");
    background-size: cover;
    background-position: center top; /* ajusta si hace falta */
  }
}


.challenges::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;              /* que tape bien la unión */
  height: 5px;              /* alto de la franja, ajústalo */
  background: linear-gradient(
    5deg,
    #f7b600 0%,
    #f7b600 55%,
    rgba(247, 182, 0, 0.4) 100%
  );
  z-index: 1;
}

.about-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: flex-end;   /* antes: center */

}

/* Columna izquierda ya la tienes: .about-left, .about-items, .about-item, etc. */

/* Columna derecha */
.about-right {
  display: flex;
  justify-content: flex-end;
}

/* Tarjeta tipo la imagen adjunta */
.about-founder-card {
  background: rgba(5, 19, 39, 0);
  border-radius: 16px;
  padding: 22px 20;
  max-width: 320px;
  

  /* centrar contenido */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Nombre y rol */
.founder-name {
  font-family: "Allura", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 56px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: -10px;
}

.founder-role {
  font-size: 13px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);

}

/* Branding EvoQualitas */
.founder-brand {
  margin-bottom: 12px;
}

.founder-brand-name {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.1;
}

.founder-brand-consulting {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 2px;
}

/* Línea amarilla bajo CONSULTING */
.founder-divider {
  height: 2px;
  width: 80px;
  background: var(--accent);
  margin: 10px 0 14px;
}

/* Parte inferior: icono + tagline */
/* que los bloques internos no “se salgan” del centrado */
.founder-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.founder-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.founder-icon img {
  width: 56px;
  height: 44px;
  object-fit: contain;
}

.founder-tagline {
  text-align: left;  /* o center si quieres la frase totalmente centrada */
  font-size: 15px;
}
.founder-tagline span {
  color: var(--accent);
}

/* Responsive */
@media (max-width: 1000px) {
  .about-layout {
    grid-template-columns: minmax(0, 1.2fr);
  }
  .about-right {
    justify-content: flex-start;
  }
  .about-founder-card {
    margin-top: 20px;
  }
}

@media (max-width: 600px) {
  .about {
    padding: 44px 0 52px;
    background-image: url("../assets/efren-movil.png");
    background-size: cover;
    background-position: center right;
  }
  .about-founder-card {
    max-width: 100%;
  }
}

/* Franja de impacto debajo de about-layout */
.about-impact {
  padding: 16px 0 0;
}

.about-impact-inner {
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 10px 22px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  background: rgba(5, 19, 39, 0.85);
  width: 100%;
}

.about-impact-wrapper {
  width: 60%;
  margin: 0 auto;   /* centrado horizontal */
}

.about-impact-wrapper .about-impact-inner{
    border: 2px solid rgba(247, 182, 0, 0.5);
}

/* Iconos a la izquierda */
.about-impact-icon {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.about-impact-icon img {
  width: 35px;   /* ajusta al tamaño de tus PNG */
  height: 35px;
  object-fit: contain;
}

/* Texto */
.about-impact-text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}

.about-impact-text span {
  color: var(--accent);
  font-weight: 600;
}

/* Responsive */
@media (max-width: 700px) {
  .about-impact-inner {
    border-radius: 12px;
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }

  .about-impact-icon {
    flex-direction: row;
  }
}


/* Columna izquierda */
.about-left {
  max-width: 680px;
}

/* (mantén el resto de estilos que ya tenías para
   .about-kicker, .about-title, .about-items,
   .about-item, .about-icon, .about-item-separator, etc.) */


.about-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;
}

.about-role {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 10px;
}

/* Mini branding en la tarjeta */
.about-brand-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.about-brand-logo img {
  height: 40px;
  width: auto;
}

.about-brand-mini-text {
  display: flex;
  flex-direction: column;
}

.about-brand-mini-name {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
}

.about-brand-mini-name .brand-evo {
  color: #ffffff;
}
.about-brand-mini-name .brand-qualitas {
  color: var(--accent);
}

.about-brand-mini-sub {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

/* Frase final en la tarjeta */
.about-card-tagline {
  font-size: 13px;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.9);
}

/* =========================
   RESPONSIVE QUIÉNES SOMOS
   ========================= */
@media (max-width: 1000px) {
  .about {
    padding: 52px 0 60px;
  }

  .about-layout {
    grid-template-columns: minmax(0, 1.2fr);
  }

  .about-right {
    justify-content: flex-start;
  }

  .about-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-photo {
    max-width: 220px;
    margin: 0 auto;
  }

  .about-card-text {
    text-align: center;
    align-items: center;
  }

  .about-items {
    gap: 14px;
  }
}

@media (max-width: 600px) {
  .about-title {
    font-size: 24px;
  }

  .about {
    padding: 44px 0 52px;
  }

  .about-card {
    padding: 20px 18px;
  }

  .about-item-text p {
    font-size: 13px;
  }
}





/* Responsive */
@media (max-width: 900px) {
  .features-flow {
    gap: 10px;
  }

  .feature-circle {
    width: 80px;
    height: 80px;
  }

  .feature-icon {
    font-size: 22px;
  }

  .feature h3 {
    font-size: 12px;
  }

  .feature p {
    font-size: 11px;
  }
}


@media (max-width: 600px) {
  .features {
    padding: 32px 0 40px;
  }

  .features-flow {
    justify-content: flex-start; /* permite scroll horizontal si se necesita */
  }
}


/* =========================
   SECCIÓN DESAFÍOS
   ========================= */
.challenges {
  position: relative;
  color: #ffffff;
  padding: 60px 0 40px;
  background-image: url("../assets/fondo-challenges.png");
  background-size: cover;
  background-position: center;
  
}

/* Degradado encima, con ::before */
.challenges::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, #12305a 0, transparent 50%),
    linear-gradient(135deg, #071a33 0%, #05152a 50%, #020714 100%);
  opacity: 0.9;   /* ajusta para ver más/menos la imagen */
  pointer-events: none;
  z-index: 0;
}

.challenges-layout,
.challenges-bottom {
  position: relative;
  z-index: 1;
}




/* Asegúrate de que el contenido va por encima */
.challenges-layout,
.challenges-bottom {
  position: relative;
  z-index: 1;
}



/* Layout 2 columnas */
.challenges-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: 40px;
  align-items: flex-start;
}

/* Columna izquierda */
.challenges-left {
  max-width: 420px;
}

.challenges-title {
  font-size: 44px;
  line-height: 1.15;
  font-weight: 800;
  margin-bottom: 14px;
}

.challenges-title span {
  color: var(--accent);
}

.challenges-intro {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
}

/* Columna derecha: grid de tarjetas */
.challenges-right { }

.challenges-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* Tarjeta */
.challenge-card {
  background: rgba(6, 28, 55, 0.95);
  border-radius: 14px;
  padding: 18px 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 25px rgba(3, 10, 24, 0.7);
  /* NUEVO: fila para icono + título */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr); /* icono | texto */
  column-gap: 10px;
  row-gap: 6px;
  align-items: center;
}

/* Icono: que no ocupe toda la fila */
.challenge-icon {
  width: 45px;
  height: 45px;
  border-radius: 33px;
  background: rgba(10, 42, 80, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;              /* quita margin-bottom si lo tenías */
  border: 1px solid #f7b600; 
}

/* Título al lado del icono */
.challenge-card h3 {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;              /* sin margen arriba/abajo */
}

/* Lista debajo, ocupando todo el ancho */
.challenge-card ul {
  grid-column: 1 / -1;    /* que la UL vaya debajo de icono+título */
  margin-left: 15px;
  padding-left: 0;
  margin-top: 6px;
}


.challenge-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.challenge-card li {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 4px;
}

.challenge-card li::marker {
  color: #f7b600; 
}

/* Franja inferior */
.challenges-bottom {
  margin-top: 24px;
}

.challenges-bottom-inner {
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(6, 28, 55, 0.96);
  padding: 10px 22px;
  display: grid;
  grid-template-columns: 6fr auto 4fr; /* 70% | separador | 30% */
  align-items: center;
  gap: 16px;
}

/* Columnas */
.ch-bottom-col {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr); /* icono | texto */
  align-items: center;
  column-gap: 10px;
}

.ch-bottom-left p,
.ch-bottom-right p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.ch-bottom-left span,
.ch-bottom-right span {
  color: var(--accent);
  font-weight: 600;
}

/* Iconos */
.ch-bottom-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(9, 36, 70, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ch-bottom-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* Separador vertical amarillo */
.ch-bottom-separator {
  width: 1px;
  height: 42px;
  background: var(--accent);
  justify-self: center;
}

/* Responsive */
@media (max-width: 900px) {
  .challenges-bottom-inner {
    border-radius: 16px;
    grid-template-columns: minmax(0, 1fr); /* pasa a una columna */
    row-gap: 12px;
  }

  .ch-bottom-separator {
    width: 70%;
    height: 1px;
  }

  .challenges-title{
    font-size: 36px;
  }
}


.challenges-note {
  font-size: 13px;
  opacity: 0.9;
}

/* Responsive */
@media (max-width: 1000px) {
  .challenges-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .challenges-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* =========================
   SECCIÓN POR QUÉ TRABAJAR CON EVOQUALITAS
   ========================= */
.why {
  position: relative;
  color: #ffffff;
  padding: 60px 0 40px;
  background:
    radial-gradient(circle at top left, #12305a 0, transparent 55%),
    linear-gradient(135deg, #071a33 0%, #05152a 50%, #020714 100%);
}

/* Cabecera */
.why-layout {
  position: relative;
  z-index: 1;
}

.why-header {
  max-width: 640px;
  margin-bottom: 26px;
}

.why-title {
  font-size: 44px;
  line-height: 1.15;
  font-weight: 800;
  margin-bottom: 10px;
}

.why-title span {
  color: var(--accent);
}

.why-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}

/* Grid de 4 tarjetas */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* Tarjeta */
.why-card {
  background: rgba(6, 28, 55, 0.96);
  border-radius: 14px;
  padding: 16px 14px 16px;
  border: 1px solid rgba(100, 100, 100, 1);
  box-shadow: 0 10px 25px rgba(3, 10, 24, 0.7);
  display: flex;
  flex-direction: column;
}

/* Icono + número arriba */
.why-card-top {
  display: flex;
  
  margin-bottom: 8px;
}

.why-card-icon {
  width: 65px;
  height: 50px;
  border-radius: 10px;
  background: rgba(10, 42, 80, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  padding: 7px;
}

.why-card-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.why-card-label {

  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}

.why-card-label span{
  color: var(--accent);
}

.why-subtitle span{
  color: var(--accent);
}

/* Título de tarjeta */
.why-card h3 {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

/* Texto de tarjeta */
.why-card p {
  font-size: 16px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.why-card p span {
  color: var(--accent);
  font-weight: 600;
}

/* Franja inferior */
.why-bottom {
  margin-top: 26px;
}

.why-bottom-inner {
  border-radius: 14px;
  
  padding: 12px 18px;
  display: grid;
  grid-template-columns: 6fr 4fr;  /* ~70% | ~30% */
  gap: 16px;
  align-items: center;
}

/* Columnas con icono + texto */
.why-bottom-left,
.why-bottom-right {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}

.why-bottom-right {
  border-left: 1px solid var(--accent);  /* línea vertical amarilla */
  padding-left: 18px;                    /* separa el texto de la línea */
  margin-left: 8px;                      /* separa la línea de la columna izquierda */
}


.why-bottom-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(9, 36, 70, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-bottom-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.why-bottom-left p,
.why-bottom-right p {
  font-size: 16px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.why-bottom-left span,
.why-bottom-right span {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 700px) {
  .why-bottom-right {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
  }
}

@media (max-width: 700px) {
  .why-card-label {
    display: flex;
    align-items: center;   /* centra verticalmente */
  }
}





/* Responsive */
@media (max-width: 1100px) {
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .why {
    padding: 48px 0 32px;
  }

  .why-title {
    font-size: 36px;
  }

  .why-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .why-bottom-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* =========================
   SECCIÓN CÓMO TE AYUDAMOS
   ========================= */
.how {
  position: relative;
  color: #ffffff;
  padding: 60px 0 40px;
  background:
    radial-gradient(circle at top left, #12305a 0, transparent 55%),
    linear-gradient(135deg, #071a33 0%, #05152a 50%, #020714 100%);
}

/* Layout general */
.how-layout {
  display: grid;
  gap: 32px;
  align-items: flex-start;
}

/* Columna izquierda (logo vertical) */
.how-left {
  display: flex;
  justify-content: flex-start;
}

.how-brand-vertical {
  border-radius: 18px;
  padding: 18px 16px;
  background: rgba(6, 28, 55, 0.95);
  box-shadow: 0 14px 30px rgba(3, 10, 24, 0.75);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.how-brand-logo img {
  height: 40px;
  width: auto;
}

.how-brand-tagline {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
}

/* Columna derecha */
.how-right {}

/* Header */
.how-header {
  margin-bottom: 20px;
}

.how-title {
  font-size: 44px;
  line-height: 1.15;
  font-weight: 800;
  margin-bottom: 8px;
}

.how-title span {
  color: var(--accent);
}

.how-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}

.how-subtitle span {
  color: var(--accent);
  font-weight: 600;
}

/* Grid de tarjetas */
.how-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* Tarjeta */
.how-card {
  background: rgba(50, 78, 113, 0.96);
  border-radius: 14px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 25px rgba(3, 10, 24, 0.7);
}

/* Header de tarjeta: icono + número */
.how-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.how-card-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: rgba(10, 42, 80, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-card-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.how-card-number {
  width: 50px;
  height: 50px;
  background: var(--dark);
  border-radius: 33px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
}

/* Título */
.how-card h3 {
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
  
}

.how-card-description {
  border-bottom: 1px solid #F7B600;
  margin-bottom: 24px;
  padding-bottom: 15px;
  font-size: 14px;

}


/* Lista dentro de how-card */
.how-card ul {
  list-style: none;      /* quitamos bullets por defecto */
  padding-left: 0;
  margin: 0;
}

.how-card li {
  position: relative;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 4px 0;
  padding-left: 22px;    /* espacio para el icono */
}

/* Icono check como bullet */
.how-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;                 /* ajusta verticalmente */
  width: 14px;                 /* tamaño del icono */
  height: 14px;
  background-image: url("../assets/check.png");
  background-size: contain;
  background-repeat: no-repeat;
}


/* Franja inferior */
.how-bottom {
  margin-top: 24px;
}

.how-bottom-inner {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(6, 28, 55, 0.97);
  padding: 10px 20px;
  display: grid;
  grid-template-columns: 6fr auto 5fr;  /* izq | línea | der */
  align-items: center;
  gap: 18px;
}

/* Columna izquierda */
.how-bottom-left {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr); /* icono | texto */
  column-gap: 10px;
  align-items: center;
}

.how-main-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(9, 36, 70, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-main-icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.how-bottom-left p {
  font-size: 14px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.how-bottom-left span {
  color: var(--accent);
  font-weight: 600;
}

/* Separador vertical amarillo */
.how-bottom-separator {
  width: 1px;
  height: 42px;
  background: var(--accent);
  justify-self: center;
}

/* Columna derecha: 4 beneficios */
.how-bottom-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.how-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.how-benefit-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(9, 36, 70, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.how-benefit-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.how-benefit p {
  font-size: 12px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

/* Responsive */
@media (max-width: 900px) {
  .how-bottom-inner {
    border-radius: 16px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }

  .how-bottom-separator {
    width: 70%;
    height: 1px;
  }

  .how-bottom-right {
    justify-content: space-around;
    flex-wrap: wrap;
  }
}


/* Responsive */
@media (max-width: 1100px) {
  .how-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .how-left {
    order: -1;
  }
}

@media (max-width: 800px) {
  .how-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .how-bottom-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .how {
    padding: 48px 0 32px;
  }

  .how-title {
    font-size: 36px;
  }

  .how-brand-vertical {
    align-items: center;
    text-align: center;
  }
}


/* =========================
   SECCIÓN SOLUCIONES CONCRETAS
   ========================= */
.solutions {
  position: relative;
  color: #ffffff;
  padding: 60px 0 40px;
  background:
    radial-gradient(circle at top left, #12305a 0, transparent 55%),
    linear-gradient(135deg, #071a33 0%, #05152a 50%, #020714 100%);
}

/* Cabecera */
.solutions-header {
  max-width: 640px;
  margin-bottom: 24px;
}

.solutions-title {
  font-size: 44px;
  line-height: 1.15;
  font-weight: 800;
  margin-bottom: 10px;
}

.solutions-title span {
  color: var(--accent);
}

.solutions-subtitle {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
}

/* Grid de tarjetas */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}



/* Tarjeta base */
.solution-card {
  background: var(--white);
  border-radius: 14px;
  padding: 14px 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 25px rgba(3, 10, 24, 0.7);
  display: flex;
  flex-direction: column;
}

/* Fila superior: número a la izquierda, título a la derecha */
.solution-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.solution-number {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  border: 1px solid var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  background-color: var(--dark);
}

.solution-card h3 {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark);
  margin: 0;
}

/* Fila media: icono abajo del título, a la izquierda, y descripción a la derecha */
.solution-mid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: flex-start;
  margin-bottom: 6px;
}

.solution-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(10, 42, 80, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.solution-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.solution-desc {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* Línea amarilla entre descripción y lista */
.solution-divider {
  height: 2px;
  background: var(--accent);
  margin: 8px 0 6px;
}

/* Lista y duración se mantienen similares */
.solution-card ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 8px 0;
}

.solution-card li {
  position: relative;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 3px;
  padding-left: 18px;
}


.solution-duration {
  font-size: 12px;
  color: #000;
  margin-top: 10px;
}




/* Header de tarjeta: icono + número */
.solution-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.solution-icon {
  width: 55px;
  height: 75px;
  border-radius: 12px;
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.solution-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}





/* Descripción corta */
.solution-desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--dark);
  margin-bottom: 6px;
}

/* Lista */
.solution-card ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 8px 0;
}

.solution-card li {
  position: relative;
  font-size: 13px;
  line-height: 1.4;
  color: var(--dark);
  margin-bottom: 3px;
  padding-left: 18px;
}

/* Bullet simple (puedes cambiar a icono si quieres) */
.solution-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;                 /* ajusta verticalmente */
  width: 14px;                 /* tamaño del icono */
  height: 14px;
  background-image: url("../assets/check.png");
  background-size: contain;
  background-repeat: no-repeat;
}


/* Franja inferior */
.solutions-bottom {
  margin-top: 24px;
}

.solutions-bottom-inner {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(6, 28, 55, 0.97);
  padding: 10px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr);
  gap: 14px;
  align-items: center;
}

/* Bloque izquierdo */
.solutions-bottom-left {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}

.sol-bottom-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(9, 36, 70, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sol-bottom-icon img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.solutions-bottom-left p {
  font-size: 16px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.solutions-bottom-left span {
  color: var(--accent);
  font-weight: 600;
}

/* Bloque derecho (CTA en amarillo) */
.solutions-bottom-right {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  background: #f7b600;
  border-radius: 999px;
  padding: 8px 14px;
  color: #0b2240;
}

.sol-bottom-icon-yellow {
  background: var(--dark);
}

.sol-bottom-icon-yellow img {
  width: 50px;
  height: 35px;
}

.solutions-bottom-right-text {
  display: flex;
  flex-direction: column;
}

.solutions-cta-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.solutions-cta-sub {
  font-size: 16px;
  margin: 0;
}

/* Responsive */
@media (max-width: 1100px) {
  .solutions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .solutions-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .solutions-bottom-inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }
}

@media (max-width: 600px) {
  .solutions {
    padding: 48px 0 32px;
  }

  .solutions-title {
    font-size: 36px;
  }
}



/* =========================
   SECCIÓN ¿CÓMO TRABAJAMOS?
   ========================= */
.how-we-work {
  position: relative;
  color: #ffffff;
  padding: 60px 0 40px;
  background:
    radial-gradient(circle at top left, #12305a 0, transparent 55%),
    linear-gradient(135deg, #071a33 0%, #05152a 50%, #020714 100%);
}

/* Cabecera */
.hww-header {
  margin-bottom: 22px;
}

.hww-title {
  font-size: 44px;
  line-height: 1.15;
  font-weight: 800;
  margin-bottom: 8px;
}

.hww-title span {
  color: var(--accent);
}

.hww-subtitle {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
}

.hww-subtitle span {
  color: var(--accent);
  font-weight: 600;
}

/* Pasos */
.hww-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}

.hww-step {
  background: rgba(6, 28, 55, 0.96);
  border-radius: 14px;
  padding: 16px 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 25px rgba(3, 10, 24, 0.7);
  text-align: left;
}

/* Círculo de icono */
.hww-step-circle {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;  /* <- centrado horizontal */
}


.hww-step-circle img {
  width: 60px;
  height: 50px;
  object-fit: contain;
  text-align: center;
}

/* Número */
.hww-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #0b2240;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 6px;
}

/* Título de paso */
.hww-step h3 {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  text-align: center;
}

hr{
  margin-bottom: 16px;
  border: none;                /* Quita el borde por defecto */
  height: 2px;                 /* Define el grosor */
  background-color: var(--accent);
     background: linear-gradient(to right, #f7b600, #071a33);

}

/* Texto de paso */
.hww-step p {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  text-align: center;
}

/* Cinta de metodologías */
.hww-methods {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(6, 28, 55, 0.96);
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 50% texto, 50% iconos */
  gap: 16px;
  align-items: center;
}

/* Bloque texto + icono principal */
.hww-methods-text {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr); /* icono | texto */
  column-gap: 10px;
  align-items: center;
}

.hww-methods-main-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(9, 36, 70, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hww-methods-main-icon img {
  width: 45px;
  height: 40px;
  object-fit: contain;
}

.hww-methods-text p {
  font-size: 14px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.hww-methods-text p span {
  color: var(--accent);
  font-weight: 600;
}

/* Iconos derecha (sin cambios mayores) */
/* Iconos derecha: más hacia la izquierda */
.hww-methods-icons {
  display: flex;
  align-items: center;
  justify-content: center;   /* antes: flex-end */
  gap: 0;                        /* quitamos gap y usamos bordes */
}

/* Cada método, con línea vertical amarilla entre ellos */
.hww-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  padding: 0 10px;               /* espacio lateral */
  border-left: 1px solid var(--accent);
}

/* quitar la línea en el primero */
.hww-method:first-child {
  border-left: none;
}

.hww-method img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  margin-bottom: 4px;
}


/* Responsive opcional */
@media (max-width: 800px) {
  .hww-methods {
    grid-template-columns: 1fr;
  }
  .hww-methods-icons {
    justify-content: center;
  }
}


.hww-methods p {
  font-size: 16px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.hww-methods p span {
  color: var(--accent);
  font-weight: 600;
}

.hww-methods-icons {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hww-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}

.hww-method img {
  width: 55px;
  height: 45px;
  object-fit: contain;
  margin-bottom: 4px;
}

/* Franja inferior */
.hww-bottom {
  margin-top: 24px;
}

.hww-bottom-inner {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(6, 28, 55, 0.97);
  padding: 10px 20px;
  display: grid;
  grid-template-columns: 7fr 5fr; /* izquierda | derecha */
  gap: 18px;
  align-items: center;
}

/* Izquierda */
.hww-bottom-left {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}

.hww-bottom-icon-main {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(9, 36, 70, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hww-bottom-icon-main img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.hww-bottom-left p {
  font-size: 16px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.hww-bottom-left span {
  color: var(--accent);
  font-weight: 600;
}

/* Derecha: beneficios */
.hww-bottom-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
}

.hww-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-left: 1px solid var(--accent);
}

.hww-benefit-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(9, 36, 70, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.hww-benefit-icon img {
  width: 55px;
  height: 35px;
  object-fit: contain;
}

.hww-benefit p {
  font-size: 15px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

/* Responsive */
@media (max-width: 1100px) {
  .hww-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .hww-bottom-inner {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 16px;
    row-gap: 12px;
  }

  .hww-bottom-right {
    flex-direction: column;      /* uno debajo de otro */
    align-items: center;         /* centrar todo */
    justify-content: center;
  }

  .hww-benefit {
    align-items: center;         /* icono + texto centrados */
    text-align: center;
    margin: 12px 0;               /* separa verticalmente cada uno */
  }

  /* si les habías puesto border-left o similar, elimínalo aquí */
  .hww-benefit {
    border-left: none;
  }

  .hww-benefit-icon img {
    width: 50px;
    height: 50px;
}
  .hww-benefit-icon{
    width: 60px;
    height: 60px;
}
}


@media (max-width: 600px) {
  .how-we-work {
    padding: 48px 0 32px;
  }

  .hww-title {
    font-size: 36px;
  }
}



/* Responsive: columnas una debajo de otra */
@media (max-width: 800px) {
  .exp-bottom-inner {
    grid-template-columns: 1fr;
  }
}



/* =========================
   SECCIÓN EXPERIENCIA QUE RESPALDA RESULTADOS
   ========================= */
.experience {
  position: relative;
  color: #ffffff;
  padding: 60px 0 40px;
  background:
    radial-gradient(circle at top left, #12305a 0, transparent 55%),
    linear-gradient(135deg, #071a33 0%, #05152a 50%, #020714 100%);
}

/* Cabecera */
.exp-header {
  max-width: 680px;
  margin-bottom: 24px;
}

.exp-title {
  font-size: 44px;
  line-height: 1.15;
  font-weight: 800;
  margin-bottom: 8px;
}

.exp-title span {
  color: var(--accent);
}

.exp-subtitle {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
}

.exp-subtitle span {
  color: var(--accent);
  font-weight: 600;
}

/* Bloques genéricos */
.exp-block {
  margin-bottom: 20px;
}

.exp-block-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* espacio entre texto y líneas */
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  text-align: center;
}

/* Líneas amarillas a los lados, pegadas al texto */
.exp-block-title::before,
.exp-block-title::after {
  content: "";
  height: 2px;
  background: linear-gradient(to right, #f7b600, #071a33);
  flex: 0 0 50px;  /* largo de la línea (ajusta 40–80px) */
}

.exp-block-title::before {
  left: 0;
}

.exp-block-title::after {
  right: 0;
}


/* Sectores clave */
.exp-sectors {
  background: rgba(6, 28, 55, 0.96);
  border-radius: 14px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.exp-sector {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: bold;
}

.exp-sector-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(9, 36, 70, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.exp-sector-icon img {
  width: 50px;
  height: 45px;
  object-fit: contain;
}

/* Logos clientes */
.exp-clients {
  background: rgba(6, 28, 55, 0.96);
  border-radius: 14px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.exp-clients img {
  max-height: 90px;
  width: auto;
  object-fit: contain;
}

.exp-clients .border {
  border-radius: 44px;
}

/* Resultados que generamos */
.exp-results {
  background: rgba(6, 28, 55, 0.96);
  border-radius: 14px;
  padding: 30px 60px 30px 60px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.exp-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
}

.exp-result-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(9, 36, 70, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.exp-result-icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-right: 20px;
}

/* Testimonios */
.exp-testimonials {
  margin-top: 10px;
}

/* Grid de testimonios (ya lo tienes) */
.exp-testimonials-grid {
  background: rgba(6, 28, 55, 0.96);
  border-radius: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* Cada testimonio: foto + contenido */
.exp-testimonial {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: flex-start;
}

/* Foto a la izquierda */
.exp-testimonial-photo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--accent);
  flex-shrink: 0;
}

.exp-testimonial-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Contenido con barra amarilla a la izquierda */
.exp-testimonial-body {
  border-left: 2px solid var(--accent);
  padding-left: 10px;
}

/* Texto (puedes mantener lo que ya tenías) */
.exp-quote {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 6px 0;
}

.exp-person {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}


.exp-quote {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 6px 0;
}

.exp-person {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* Franja inferior */
.exp-bottom {
  margin-top: 24px;
}

/* Contenedor general (dos columnas) */
.exp-bottom-inner {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(6, 28, 55, 0.97);
  padding: 10px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: center;
}

/* Cada lado: icono arriba, texto abajo, centrado */
.exp-bottom-left,
.exp-bottom-right {
  display: flex;
  flex-direction: column;
  align-items: center;   /* centra horizontalmente */
  text-align: center;    /* centra texto */
  gap: 8px;              /* espacio entre icono y texto */
}

.exp-bottom-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(9, 36, 70, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.exp-bottom-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.exp-bottom-left p,
.exp-bottom-right p {
  font-size: 14px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.exp-bottom-left span,
.exp-bottom-right span {
  color: var(--accent);
  font-weight: 600;
}

/* línea vertical amarilla separando */
.exp-bottom-right {
  border-left: 1px solid var(--accent);
  padding-left: 18px;  /* separa texto de la línea */
}

/* responsive: en móvil, una debajo de la otra y sin línea vertical */
@media (max-width: 800px) {
  .exp-bottom-inner {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  .exp-bottom-right {
    border-left: none;
    padding-left: 0;
  }
}


/* Izquierda */
.exp-bottom-left {
  display: flex;
  flex-direction: column; /* invierte: icono queda arriba */
  align-items: center;
  text-align: center;
  gap: 8px;
}




.exp-bottom-icon img {
  width: 65px;
  height: 65px;
  object-fit: contain;
}

.exp-bottom-left p {
  font-size: 14px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.exp-bottom-left span {
  color: var(--accent);
  font-weight: 600;
}

/* Derecha: métricas */
.exp-bottom-right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}

.exp-bottom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  padding: 15px;
}

.exp-bottom-item-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(9, 36, 70, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.exp-bottom-item-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* Responsive */
@media (max-width: 1100px) {
  .exp-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exp-testimonials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .exp-testimonial {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
  }

  .exp-testimonial-photo {
    margin-bottom: 2px;
  }

  .exp-testimonial-body {
    border-left: none;
    padding-left: 0;
    border-top: 2px solid var(--accent);
    padding-top: 8px;
  }
}


@media (max-width: 800px) {
  .exp-sectors,
  .exp-clients {
    flex-wrap: wrap;
    justify-content: center;
  }

  .exp-results {
    grid-template-columns: minmax(0, 1fr);
  }

  .exp-testimonials-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .exp-bottom-inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }

  .exp-bottom-right {
    justify-content: space-around;
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .experience {
    padding: 48px 0 32px;
  }

  .exp-title {
    font-size: 36px;
  }
}



/* =========================
   SECCIÓN CONTACTO / CTA FINAL
   ========================= */
.contact-cta {
  position: relative;
  color: #ffffff;
  padding: 60px 0 40px;
  background:
    radial-gradient(circle at top left, #12305a 0, transparent 55%),
    linear-gradient(135deg, #071a33 0%, #05152a 50%, #020714 100%);
}

/* Layout principal */
/* Layout desktop (puede quedar como lo tienes) */
.contact-cta-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
  gap: 32px;
  align-items: flex-start;
}

/* Responsive: primero texto, luego tarjetas */
@media (max-width: 900px) {
  .contact-cta-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-cta-left {
    order: 1;
    max-width: 100%;
    margin-bottom: 16px;
  }

  .contact-cta-right {
    order: 2;
  }
  .contact-bottom-title{
    text-align: center;
  }
  .contact-bottom-main-icon img{
    display: none;
  }
  .contact-bottom-main-icon{
    display: none !important;
  }
  .contact-bottom-sub{
    text-align: center;
    margin: 10px 0 10px 0 !important;
  }
  .contact-bottom-end-icon{
    justify-self: center !important;
  }
  .contact-bottom-separator{
    display: none;
  }
  .contact-cta-title{
    font-size: 36px;
  }
  .how-bottom-left p{
    text-align: center;
  }
  .how-main-icon{
    display: none !important;
  }
  .ch-bottom-icon{
    display: none !important;
  }
  .ch-bottom-left p, .ch-bottom-right p{
    text-align: center;
  }
  .hww-methods-main-icon{
    display: none;
  }
  .hww-methods p{
    text-align: center;
  }
  .hww-bottom-icon-main{
    display: none !important;
  }
  .hww-bottom-left p{
    text-align: center;
  }
}


/* Columna izquierda */
.contact-cta-left {
  max-width: 480px;
}

.contact-cta-title {
  font-size: 44px;
  line-height: 1.15;
  font-weight: 800;
  margin-bottom: 12px;
}

.contact-cta-title span {
  color: var(--accent);
}

.contact-cta-text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
}

.contact-cta-text span {
  color: var(--accent);
  font-weight: 600;
}

/* Columna derecha */
.contact-cta-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Tarjeta base */
.contact-card {
  border-radius: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(6, 28, 55, 0.96);
  box-shadow: 0 10px 25px rgba(3, 10, 24, 0.7);
}

/* Tarjeta principal (naranja) */
.contact-card-primary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto; /* icono | texto | botón */
  column-gap: 12px;
  align-items: center;
  background: #f7b600;
  color: #0b2240;
}

.contact-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-card-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.contact-card-content h3 {
  font-size: 15px;
  margin: 0 0 4px 0;
  font-weight: 700;
}

.contact-card-content p {
  font-size: 13px;
  margin: 0;
}

/* Botón WhatsApp */
.contact-card-whatsapp {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.contact-card-whatsapp img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* Tarjeta persona */
.contact-card-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
}

.contact-person-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--accent);
}

.contact-person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-person-info {
  font-size: 13px;
}

.contact-person-name {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 2px 0;
}

.contact-person-role {
  font-size: 12px;
  margin: 0 0 6px 0;
  color: rgba(255, 255, 255, 0.9);
}

.contact-person-data p {
  font-size: 12px;
  margin: 0 0 2px 0;
  color: rgba(255, 255, 255, 0.9);
}

/* Tarjeta inferior (una fila: icono | texto | línea | icono) */
.contact-card-bottom {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
}

/* Icono / imagen izquierda */
.contact-bottom-main-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(9, 36, 70, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-bottom-main-icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* Texto central */
.contact-bottom-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

.contact-bottom-title {
  font-size: 18px;
  margin: 0 0 2px 0;
}

.contact-bottom-sub {
  margin: -10px 0 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}

.contact-bottom-text span {
  color: var(--accent);
  font-weight: 600;
}

/* Separador vertical */
.contact-bottom-separator {
  width: 1px;
  height: 36px;
  background: var(--accent);
}

/* Icono final derecha */
.contact-bottom-end-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(9, 36, 70, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 20px 0 20px;
}

.contact-bottom-end-icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* Responsive: en móviles, apila icono / texto / icono */
@media (max-width: 700px) {
  .contact-card-bottom {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
  }

  .contact-bottom-separator {
    width: 60%;
    height: 1px;
    justify-self: center;
  }

  .contact-bottom-end-icon {
    justify-self: flex-start;
  }
}


/* =========================
   FOOTER
   ========================= */
.site-footer {
  background: #040b19;
  color: rgba(255, 255, 255, 0.85);
  border-top: 3px solid var(--accent);
  font-size: 14px;
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 26px;
  padding: 28px 24px 18px;
}

.footer-col h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 8px;
}

.footer-col p {
  margin: 0 0 4px 0;
  color: rgba(255, 255, 255, 0.8);
}

.footer-col a {
  color: inherit;
  text-decoration: none;
}

.footer-col a:hover {
  text-decoration: underline;
}

/* Marca */
.footer-logo img {
  height: 34px;
  width: auto;
  margin-bottom: 6px;
}

.footer-tagline {
  font-size: 13px;
  max-width: 260px;
}

.footer-tagline span {
  color: var(--accent);
  font-weight: 600;
}

/* Redes */
.footer-social {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.footer-social a {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #07172e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-social img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* Franja inferior */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: #020713;
}

.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 10px 24px 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

/* Responsive */
@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px 18px 14px;
  }

  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 18px 14px;
  }
}



/* =========================
   FOOTER
   ========================= */
.footer {
  background: #062034;
  color: rgba(255, 255, 255, 0.75);
  padding: 18px 0;
  text-align: center;
  font-size: 14px;
}

/* =========================
   RESPONSIVE
   ========================= */

/* Tablets / pantallas medianas */
@media (max-width: 1000px) {
  .hero {
    flex-direction: column;
    min-height: auto;
  }

    .hero-content .container {
    min-height: 520px;
    padding-top: 56px;
    padding-bottom: 48px;
    text-align: center;
  }

  .hero-logo {
    right: 24px;
  }

  .title {
    font-size: 36px;
    margin-left: auto;
    margin-right: auto;
  }

  .subtitle,
  .specialist {
    margin-left: auto;
    margin-right: auto;
  }

  .overlay-left {
    flex: 0 0 auto;
    padding: 48px 32px 32px;
    text-align: center;
  }

  .overlay-right {
    order: -1;
    padding: 16px;
  }

  .hero-image {
    max-height: 420px;
  }

  .title {
    font-size: 36px;
  }

  .subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .container {
    padding: 36px 18px;
    margin: 0 15px 0 15px;
  }
}

/* Móviles */
@media (max-width: 560px) {
  .overlay-left {
    padding: 32px 20px 28px;
  }

  .logo {
    width: 150px;
  }

  .title {
    font-size: 28px;
  }

  .subtitle {
    font-size: 16px;
  }

  .hero-image {
    max-height: 280px;
    border-radius: 4px;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .feature {
    padding: 18px 16px;
  }

  .hero {
    background-position: center;
  }

  .hero-logo {
    top: 16px;
    right: 16px;
  }

  .hero-logo img {
    height: 44px;
  }

  .hero-content .container {
    min-height: 460px;
    padding-top: 80px; /* deja espacio para el logo flotante */
  }

  .title {
    font-size: 28px;
  }
}



/* Responsive */
@media (max-width: 1000px) {
  .hero-brand {
    right: 24px;
  }
}

@media (max-width: 560px) {
  .hero-brand {
    top: 16px;
    right: 16px;
    transform: scale(0.9);
    transform-origin: top right;
  }

  .hero-logo-circle {
    width: 52px;
    height: 52px;
  }

  .hero-logo-circle img {
    width: 42px;
    height: 42px;
  }

  .hero-brand-name {
    font-size: 24px;
  }

  .hero-brand-tagline {
    font-size: 11px;
  }
}

.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.whatsapp-float img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* opcional: más pequeño en móvil */
@media (max-width: 600px) {
  .whatsapp-float {
    width: 48px;
    height: 48px;
    right: 16px;
    bottom: 16px;
  }

  .whatsapp-float img {
    width: 26px;
    height: 26px;
  }
}



/* Responsive ajustes del bloque de marca */
@media (max-width: 1000px) {
  .hero-brand {
    right: 24px;
  }
}

@media (max-width: 560px) {
  .hero-brand {
    top: 16px;
    right: 16px;
    transform: scale(0.9);
    transform-origin: top right;
  }

  .hero-brand-consulting{
    font-size: 17px;
  }

  .hero-logo-circle {
    width: 65px;
    height: 65px;
  }

  .hero-logo-circle img {
    width: 42px;
    height: 42px;
  }

  .hero-brand-name {
    font-size: 30px;
    text-align: center;
  }

  .hero-brand-tagline {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .header-brand .hero-logo-circle {
    display: none;
  }

  .hero-brand {
      margin: 0 auto;
  }

  .challenge-icon {
      display: none;
  }
}

@media (max-width: 480px) {
  .nav-container {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
  }

  .header-brand {
    width: 100%;
  }

  .nav-toggle {
    display: flex;
    align-self: flex-end;
    margin-top: 4px;
    position: relative;
    z-index: 1001; /* por encima del menú */
  }

  .nav-menu {
    position: static;          /* ya lo tienes así o parecido */
    width: 100%;
    max-height: 0;
    overflow: hidden;
    background: rgba(7, 26, 51, 0.98);
    display: flex;
    flex-direction: column;
    align-items: center;       /* centra horizontalmente */
    text-align: center;
    padding: 0;
  }

  .nav-menu.is-open {
    max-height: 400px;       /* se abre */
    margin-top: 4px;
    padding: 4px 0 8px;
  }

  .nav-menu a {
    width: 100%;
    padding: 6px 0;
  }
}

@media (max-width: 480px) {
  body {
    margin-top: -45px;  /* dejas que el JS maneje el offset */
  }
}