/*
 * custom.css — Fundación Ciudad Futura / Landing Diagnóstico
 *
 * REGLA: Este archivo solo define variables de marca y overrides
 * mínimos. TODO el layout usa Bootstrap 5.3 como base.
 *
 * Paleta extraída del sitio de referencia:
 * https://fundacionciudadfutura.org/ventasautomatizadas/
 */

/* ============================================================
   1. VARIABLES CSS (fuente de verdad de la marca)
   ============================================================ */
:root {
  /* Colores principales */
  --color-primary:       #0075AA;   /* Azul principal — nav, títulos, links */
  --color-primary-dark:  #265A88;   /* Navy — gradientes, hover           */
  --color-primary-deep:  #002f4d;   /* Navy profundo — hero gradient       */
  --color-primary-rgb:   0, 117, 170;

  /* Color de acción / CTA */
  --color-accent:        #49A049;   /* Verde — botones de envío, CTA       */
  --color-accent-light:  #6ECC6E;   /* Verde claro — hover de botones      */
  --color-accent-rgb:    73, 160, 73;

  /* Fondos y bordes */
  --color-bg-soft:       #F8FAFC;   /* Fondo de cards y secciones alternas */
  --color-bg-page:       #EEF2F6;   /* Fondo general de página             */
  --color-border:        #DDE8EF;   /* Bordes de cards y separadores       */

  /* Texto */
  --color-text:          #5D5D5D;   /* Cuerpo de texto                     */
  --color-dark:          #343434;   /* Encabezados y texto oscuro          */
  --color-muted:         #8CA0B3;   /* Texto secundario / ayuda            */

  /* WhatsApp */
  --color-whatsapp:      #25D366;
  --color-whatsapp-dark: #1aab50;

  /* Sombras */
  --shadow-sm:  0 2px 10px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 6px 28px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 16px 52px rgba(0, 0, 0, 0.14);

  /* Bordes redondeados */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;

  /* Transición estándar */
  --transition: all 0.2s ease-in-out;
}


/* ============================================================
   2. RESET Y BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Mulish', Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-dark);
  font-weight: 700;
  line-height: 1.25;
}

a {
  color: var(--color-primary);
  transition: var(--transition);
}

a:hover {
  color: var(--color-primary-dark);
}

img {
  max-width: 100%;
  height: auto;
}


/* ============================================================
   3. BARRA DE NAVEGACIÓN
   ============================================================ */
.navbar-marca {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  padding: 12px 0;
}

.navbar-marca .navbar-brand img {
  height: 44px;
  width: auto;
}

/* Botón CTA en la nav */
.navbar-marca .btn-nav-cta {
  background-color: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-weight: 700;
  font-size: 0.875rem;
  transition: var(--transition);
  text-decoration: none;
}

.navbar-marca .btn-nav-cta:hover {
  background-color: var(--color-accent-light);
  color: #fff;
}


/* ============================================================
   4. SECCIÓN HERO
   ============================================================ */
.seccion-hero {
  background: linear-gradient(
    135deg,
    var(--color-primary-deep) 0%,
    var(--color-primary-dark) 50%,
    var(--color-primary) 100%
  );
  color: #fff;
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}

/* Patrón decorativo de puntos */
.seccion-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.seccion-hero .badge-superior {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
}

.seccion-hero h1 {
  color: #fff;
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 800;
  margin-bottom: 1.25rem;
  line-height: 1.2;
}

.seccion-hero h1 .destacado {
  color: var(--color-accent-light);
}

.seccion-hero .subtitulo {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  opacity: 0.9;
  max-width: 580px;
  margin-bottom: 2rem;
}

.btn-hero-cta {
  background-color: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 16px 32px;
  font-size: 1.0625rem;
  font-weight: 700;
  transition: var(--transition);
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 4px 20px rgba(73, 160, 73, 0.4);
}

.btn-hero-cta:hover {
  background-color: var(--color-accent-light);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(73, 160, 73, 0.5);
}

.btn-hero-cta:active {
  transform: translateY(0);
}

/* Scroll hint */
.seccion-hero .scroll-hint {
  font-size: 0.8125rem;
  opacity: 0.7;
  margin-top: 1rem;
}


/* ============================================================
   5. SECCIONES GENERALES
   ============================================================ */
.seccion {
  padding: 80px 0;
}

.seccion-alterna {
  background-color: var(--color-bg-soft);
}

.seccion-titulo {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 0.75rem;
}

.seccion-subtitulo {
  color: var(--color-text);
  font-size: 1.0625rem;
  max-width: 600px;
  margin: 0 auto;
}

.label-superior {
  display: inline-block;
  background: rgba(0, 117, 170, 0.1);
  color: var(--color-primary);
  border-radius: 50px;
  padding: 4px 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}


/* ============================================================
   6. TARJETAS DE DOLOR
   ============================================================ */
.card-dolor {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.card-dolor:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.card-dolor .icono-dolor {
  width: 52px;
  height: 52px;
  background: rgba(0, 117, 170, 0.1);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.card-dolor h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.5rem;
}

.card-dolor p {
  font-size: 0.9375rem;
  color: var(--color-text);
  margin: 0;
}


/* ============================================================
   7. METODOLOGÍA (3 PASOS)
   ============================================================ */
.paso-metodologia {
  text-align: center;
  padding: 1.5rem 1rem;
}

.paso-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 auto 1rem;
}

.paso-titulo {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.5rem;
}

.paso-descripcion {
  font-size: 0.9375rem;
  color: var(--color-text);
}

/* Conector entre pasos (oculto en móvil) */
.paso-conector {
  display: none;
  align-items: center;
  color: var(--color-border);
  font-size: 1.5rem;
}

@media (min-width: 768px) {
  .paso-conector {
    display: flex;
  }
}


/* ============================================================
   8. SECCIÓN DE CONFIANZA / CREDENCIALES
   ============================================================ */
.credencial-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.credencial-icono {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: rgba(0, 117, 170, 0.1);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.credencial-texto {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-dark);
  line-height: 1.3;
}


/* ============================================================
   9. SECCIÓN DEL FORMULARIO
   ============================================================ */
.seccion-formulario {
  background: linear-gradient(
    160deg,
    var(--color-primary-deep) 0%,
    var(--color-primary-dark) 100%
  );
  padding: 80px 0;
}

.card-formulario {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-lg);
  max-width: 600px;
  margin: 0 auto;
}

@media (min-width: 576px) {
  .card-formulario {
    padding: 2.5rem 2.25rem;
  }
}

.card-formulario .form-titulo {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 0.25rem;
}

.card-formulario .form-subtitulo {
  font-size: 0.9375rem;
  color: var(--color-text);
  margin-bottom: 1.75rem;
}

/* Labels del formulario */
.form-label-marca {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-dark);
  margin-bottom: 0.625rem;
  display: block;
}

/* Inputs de texto */
.form-control-marca {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 1rem;
  color: var(--color-dark);
  transition: var(--transition);
  width: 100%;
}

.form-control-marca:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}

.form-control-marca::placeholder {
  color: var(--color-muted);
}

/* Selector de país + teléfono */
.input-telefono {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: var(--transition);
}

.input-telefono:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}

.select-pais {
  background: var(--color-bg-soft);
  border: none;
  border-right: 1.5px solid var(--color-border);
  padding: 12px 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-dark);
  cursor: pointer;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235D5D5D' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

.select-pais:focus {
  outline: none;
}

.input-tel {
  border: none;
  padding: 12px 16px;
  font-size: 1rem;
  color: var(--color-dark);
  flex: 1;
  min-width: 0;
}

.input-tel:focus {
  outline: none;
}


/* ============================================================
   10. CHIP-SELECTS (Radio Buttons estilizados como pills)
   ============================================================ */

/* Ocultar el input radio nativo */
.chip-grupo input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Contenedor de los chips */
.chip-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

/* Cada chip */
.chip-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;          /* Mínimo tocable en móvil (recomendación WCAG) */
  padding: 10px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 50px;       /* Pill / pastilla */
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  background: #fff;
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
  line-height: 1.3;
  text-align: center;
}

.chip-label:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.05);
}

/* Estado seleccionado */
.chip-grupo input[type="radio"]:checked + .chip-label {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3);
}

/* Estado de error */
.chip-grupo.is-invalid .chip-label {
  border-color: #dc3545;
}

/* Mensaje de error para chip-grupos */
.chip-feedback {
  display: none;
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 6px;
}

.chip-grupo.is-invalid ~ .chip-feedback {
  display: block;
}


/* ============================================================
   11. CHECKBOX HABEAS DATA
   ============================================================ */
.habeas-data {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.habeas-data input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  margin-top: 2px;
  cursor: pointer;
}

.habeas-data label {
  font-size: 0.875rem;
  color: var(--color-text);
  cursor: pointer;
  line-height: 1.5;
}

.habeas-data label a {
  color: var(--color-primary);
  text-decoration: underline;
}


/* ============================================================
   12. BOTÓN DE ENVÍO
   ============================================================ */
.btn-enviar {
  display: block;
  width: 100%;
  padding: 16px 24px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(var(--color-accent-rgb), 0.35);
}

.btn-enviar:hover:not(:disabled) {
  background: var(--color-accent-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(var(--color-accent-rgb), 0.45);
}

.btn-enviar:active:not(:disabled) {
  transform: translateY(0);
}

.btn-enviar:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.btn-enviar .spinner-borde {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
  margin-right: 8px;
}

.btn-enviar.cargando .spinner-borde {
  display: inline-block;
}

.btn-enviar.cargando .texto-btn {
  opacity: 0.8;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

.nota-bajo-boton {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin-top: 12px;
}


/* ============================================================
   13. MENSAJES DE ESTADO DEL FORMULARIO
   ============================================================ */
.alerta-formulario {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  display: none;
  margin-top: 16px;
}

.alerta-formulario.mostrar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.alerta-exito {
  background: rgba(73, 160, 73, 0.1);
  border: 1px solid rgba(73, 160, 73, 0.4);
  color: #2d7a2d;
}

.alerta-error {
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #b02a37;
}

/* Mensajes de error por campo */
.campo-error {
  display: none;
  color: #dc3545;
  font-size: 0.8125rem;
  margin-top: 5px;
}

.campo-error.visible {
  display: block;
}

.form-control-marca.invalido,
.input-telefono.invalido {
  border-color: #dc3545;
}


/* ============================================================
   14. PÁGINA DE GRACIAS
   ============================================================ */
.seccion-gracias {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(
    135deg,
    var(--color-primary-deep) 0%,
    var(--color-primary-dark) 60%,
    var(--color-primary) 100%
  );
  padding: 60px 0;
}

.card-gracias {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
  max-width: 520px;
  margin: 0 auto;
}

.icono-check-gracias {
  width: 72px;
  height: 72px;
  background: rgba(73, 160, 73, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1.25rem;
}

.card-gracias h1 {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 0.75rem;
}

.card-gracias .descripcion {
  color: var(--color-text);
  font-size: 1rem;
  margin-bottom: 1.75rem;
  line-height: 1.65;
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-whatsapp);
  color: #fff;
  padding: 16px 28px;
  border-radius: var(--radius-sm);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
  width: 100%;
  justify-content: center;
}

.btn-whatsapp:hover {
  background: var(--color-whatsapp-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
}

.btn-whatsapp svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}


/* ============================================================
   15. FOOTER
   ============================================================ */
.footer-marca {
  background: var(--color-primary-deep);
  color: rgba(255,255,255,0.75);
  padding: 28px 0;
  font-size: 0.875rem;
  text-align: center;
}

.footer-marca a {
  color: rgba(255,255,255,0.75);
  text-decoration: underline;
}

.footer-marca a:hover {
  color: #fff;
}


/* ============================================================
   16. UTILIDADES
   ============================================================ */
.divider-marca {
  border-color: var(--color-border);
  margin: 2rem 0;
}

/* Contador de caracteres o nota de campo */
.nota-campo {
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin-top: 4px;
}

/* Separador de sección con degradado */
.separador-seccion {
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border: none;
  border-radius: 2px;
  width: 60px;
  margin: 1rem auto 2rem;
}


/* ============================================================
   17. RESPONSIVE — AJUSTES MÓVIL
   ============================================================ */
@media (max-width: 575.98px) {
  .seccion-hero {
    padding: 80px 0 60px;
  }

  .seccion {
    padding: 56px 0;
  }

  .seccion-formulario {
    padding: 56px 0;
  }

  .card-formulario {
    border-radius: var(--radius-md);
    margin: 0 4px;
    padding: 1.75rem 1.25rem;
  }

  /* En móvil los chips ocupan el ancho disponible */
  .chip-label {
    flex: 1 1 calc(50% - 5px);
    min-width: 130px;
  }

  .btn-hero-cta {
    width: 100%;
    text-align: center;
    padding: 16px 20px;
  }
}

@media (max-width: 390px) {
  .chip-label {
    flex: 1 1 100%;
  }
}