/* ===== VARIABLES CSS - SISTEMA DE DISEÑO ===== */
:root {
  /* COLORES PRIMARIOS - ESTRATEGIA FINTECH */
  --blue: #0046A8;           /* Confianza + Estabilidad */
  --blue-dark: #00358A;      /* Enfasis corporativo */
  --blue-light: #EAF2FF;     /* Fondos suaves */

  /* COLORES DE ACCIÓN + CONVERSIÓN */
  --accent: #FF7A00;         /* CTAs principales - Urgencia */
  --accent-dark: #E56900;    /* Hover estados */

  /* COLORES DE ÉXITO + CRECIMIENTO */
  --success: #00A86B;        /* Scores altos, confirmaciones */
  --success-light: #E8F8F2;  /* Fondos de éxito */

  /* SISTEMA DE NEUTRALES PROFESIONALES */
  --text: #1A1D29;           /* Texto principal */
  --text-light: #667085;     /* Texto secundario */
  --border: #E4E7EC;         /* Bordes y separadores */
  --panel: #F7F9FC;          /* Fondos de secciones */
  --hairline: #E9EEF6;       /* Líneas sutiles */

  /* COLORES FUNCIONALES */
  --warning: #FFC453;        /* Scores intermedios */
  --error: #E53E3E;          /* Errores y alertas */
  --footer: #001F3F;         /* Footer profesional */
}
/* ===== FIN VARIABLES CSS ===== */

/* ===== RESET Y CONFIGURACIÓN BASE ===== */
*{box-sizing:border-box;margin:0;padding:0}
body{margin:0;color:var(--text);font:400 18px/1.6 'Inter',system-ui,sans-serif;background:#fff}
/* ===== FIN RESET ===== */

/* ===== TIPOGRAFÍA Y HEADINGS ===== */
h1,h2,h3,h4{font-family:'Poppins',system-ui,sans-serif;color:var(--blue);margin:0 0 .5rem}
h1{font-size:56px;line-height:1.1;font-weight:700;letter-spacing:-.02em}
h2{font-size:36px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
h3{font-size:24px;line-height:1.25;font-weight:600}
h4{font-size:18px;line-height:1.3;font-weight:600}
.hero .sub{font-size:24px;line-height:1.4;font-weight:500}
/* ===== FIN TIPOGRAFÍA ===== */

/* ===== LAYOUT Y UTILIDADES ===== */
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:820px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.center{text-align:center}
/* ===== FIN LAYOUT ===== */

/* ===== NAVEGACIÓN MEJORADA ===== */
.nav{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:10}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav .brand {
    font-weight: 700;
    color: var(--blue);
    font-size: 20px;
    display: flex;
    align-items: center;
}

.nav .brand img {
    height: 40px; /* Ajusta según necesites */
    width: auto;
}

/* ENLACES DEL MENÚ - ESTILOS MEJORADOS */
.nav nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav nav a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.2px;
  transition: all 0.3s ease;
  position: relative;
  padding: 8px 0;
}

.nav nav a:hover {
  color: var(--accent);
}

.nav nav a:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(1);
}

.nav nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

/* CTA HEADER */
.nav .btn-small {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 10px;
  margin-left: 16px;
  font-weight: 600;
  background: var(--accent);
  color: white;
  transition: all 0.3s ease;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.nav .btn-small:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 122, 0, 0.3);
}
/* ===== FIN NAVEGACIÓN ===== */

/* CTA HEADER PARA DESKTOP */
.nav .btn-small {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 10px;
  margin-left: 20px;
  font-weight: 600;
  background: var(--accent);
  color: white;
  transition: all 0.3s ease;
}

.nav .btn-small:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 122, 0, 0.3);
}

/* OCULTAR CTA EN MOBILE */
@media (max-width: 900px) {
  .nav .btn-small {
    display: none;
  }

  .nav nav {
    display: none; /* Mantener menú oculto en mobile */
  }
}

/* ===== FIN NAVEGACIÓN ===== */

/* ===== BOTONES ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  color:#fff;
  padding:16px 20px;
  border-radius:14px;
  text-decoration:none;
  font:600 18px/1 'Poppins',sans-serif;
  border:0;
  cursor:pointer;
  transition:all 0.3s ease
}
.btn:hover{
  background:var(--accent-dark);
  transform:translateY(-2px)
}
.btn.small{
  padding:10px 14px;
  font-size:16px
}
.btn.ghost{
  background:transparent;
  color:var(--blue);
  border:2px solid var(--blue)
}
.btn.ghost:hover{
  background:var(--blue);
  color:#fff;
  transform:translateY(-2px)
}

/* Botones mejorados para formulario */
.btn-large{
  padding:18px 32px !important;
  font-size:18px !important;
  border-radius:16px !important;
  font-weight:700 !important;
  min-width:160px
}

.btn-ghost{
  background:transparent !important;
  color:var(--blue) !important;
  border:2px solid var(--blue) !important;
  padding:16px 28px !important
}

.btn-ghost:hover{
  background:var(--blue) !important;
  color:#fff !important;
  transform:translateY(-2px)
}
/* ===== FIN BOTONES ===== */

/* ===== SECCIONES GENERALES ===== */
.section{padding:72px 0}
/* ===== FIN SECCIONES GENERALES ===== */

/* ===== HERO SECTION ===== */
.hero {
  background: linear-gradient(
    90deg,
    rgba(0, 70, 168, 0.75) 0%,
    rgba(0, 70, 168, 0.55) 50%,
    rgba(0, 70, 168, 0.4) 100%
  ), url('../img/hero-bg.jpg') center/cover;
  padding: 140px 0 100px;
  color: white;
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
}

.hero h1 {
  color: white;
  font-size: 52px;
  line-height: 1.1;
  margin-bottom: 24px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.hero .sub {
  color: rgba(255, 255, 255, 0.95);
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 40px;
  font-weight: 400;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Eliminar completamente el card art */
.hero-art,
.hero-art .card-art {
  display: none;
}

/* Asegurar que el contenido ocupe todo el ancho */
.hero .grid2 {
  align-items: center;
  grid-template-columns: 1fr; /* Solo una columna ahora */
}

/* Botón más prominente */
.hero .btn {
  background: var(--accent);
  color: white;
  padding: 18px 32px;
  font-size: 18px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(255, 122, 0, 0.3);
}

.hero .btn:hover {
  background: var(--accent-dark);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(255, 122, 0, 0.4);
}

/* Overlay más sutil */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 70, 168, 0.8) 0%,
    rgba(0, 70, 168, 0.5) 60%,
    rgba(0, 70, 168, 0.3) 100%
  );
  z-index: 1;
}

.hero .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Hero CTA - Patrón Referencia */
.hero-cta-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* ===== FIN HERO SECTION ===== */

/* ESTRUCTURA REFERENCIA EXACTA */

.cta-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
}

.cta-decoration-reference {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.arrow-reference {
  width: 36px;
  height: 34px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-reference svg {
  display: block; /* AÑADIR ESTO */
  width: 100%;
  height: 100%;
}

.cta-text-reference p {
  font-family: "Reenie Beanie", cursive;
  font-size: 24px;
  color: white;
  margin: 0;
  line-height: 1;
}

/* ===== SECCIÓN BENEFICIOS ===== */
#beneficios {
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;transition:transform 0.3s ease, box-shadow 0.3s ease}
.card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,0.1)}
.sub-center{text-align:center;max-width:760px;margin:8px auto 0;color:var(--text-light)}
.card .icon{width:48px;height:48px;color:var(--blue);margin-bottom:12px}
.card .icon svg{width:48px;height:48px;display:block}
.cards3 .card{display:flex;flex-direction:column}
.cards3 .card h3{margin-top:4px}

/* CARDS DE BENEFICIOS - Asignación estratégica */
.cards3 .card:nth-child(1){border-top:3px solid var(--accent)}  /* Naranja para acción */
.cards3 .card:nth-child(2){border-top:3px solid var(--blue)}    /* Azul para confianza */
.cards3 .card:nth-child(3){border-top:3px solid var(--success)} /* Verde para eficiencia */
/* ===== FIN SECCIÓN BENEFICIOS ===== */

/* ===== CARDS VISUALES - BENEFICIOS ===== */
.cards-visual {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 60px;
}

.visual-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: all 0.4s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.visual-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.card-image {
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 70, 168, 0.1) 0%, rgba(0, 70, 168, 0.05) 100%);
}

.card-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.visual-card:hover .card-badge {
  background: var(--accent);
  transform: scale(1.1);
}

.badge-icon {
  width: 24px;
  height: 24px;
  color: var(--blue);
  transition: all 0.3s ease;
}

.visual-card:hover .badge-icon {
  color: white;
}

.card-content {
  padding: 32px 24px;
}

.card-content h3 {
  margin-bottom: 12px;
  color: var(--blue);
  font-size: 20px;
}

.card-content p {
  color: var(--text-light);
  line-height: 1.6;
  margin: 0;
}
/* ===== FIN CARDS VISUALES ===== */

/* ===== SECCIÓN CÓMO FUNCIONA ===== */
#como-funciona {
  background: var(--panel);
  border-bottom: 1px solid var(--hairline);
}

.pasos{background:var(--panel);text-align:center}
.pasos-grid{display:flex;justify-content:center;gap:60px;margin-top:40px;flex-wrap:wrap}
.paso{width:220px;display:flex;flex-direction:column;align-items:center}
.paso-num{width:60px;height:60px;background:var(--blue);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;margin-bottom:14px}
.paso h4{font-family:'Inter',sans-serif;font-size:16px;line-height:1.3;color:var(--text);font-weight:500}
/* ===== FIN SECCIÓN CÓMO FUNCIONA ===== */

/* ===== SECCIÓN CONFIANZA - DISEÑO MODERNO ===== */
#confianza {
  background: #fff;
}

.confianza {
  background: #fff;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.confianza .grid2 {
  align-items: center;
  gap: 80px;
}

.confianza-content h2 {
  margin-bottom: 24px;
  color: var(--blue);
}

.confianza-content p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-light);
  margin-bottom: 40px;
}

.confianza-features {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0;
}

.feature-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.feature-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--success);
  stroke-width: 2;
  fill: none;
}

.feature-text {
  flex: 1;
}

.feature-text strong {
  display: block;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 4px;
}

.feature-text span {
  color: var(--text-light);
  font-size: 16px;
  line-height: 1.5;
}

.logo-display {
  background: linear-gradient(135deg, #fff 0%, var(--panel) 100%);
  /*padding: 60px 40px;*/
  border-radius: 24px;
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.logo-display::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--success));
}

.logo-display:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.bank-logo {
  max-width: 540px;
  height: auto;
  margin-bottom: 20px;
  display: block;
}

.logo-subtitle {
  color: var(--text-light);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.5px;
}
/* ===== FIN SECCIÓN CONFIANZA ===== */

/* ===== SECCIÓN CONFIANZA - LAYOUT 2/3 Y 1/3 ===== */
.confianza-special {
  grid-template-columns: 2fr 1fr !important;
  gap: 60px;
  align-items: center;
}

.confianza-content {
  padding-right: 20px;
}

.confianza-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Ajustes para el logo display */
.logo-display {
  background: linear-gradient(135deg, #fff 0%, var(--panel) 100%);
  /*padding: 50px 30px;*/
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 280px;
  position: relative;
  overflow: hidden;
}

.logo-display::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--success));
}

.logo-display:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.bank-logo {
  max-width: 100%;
  height: auto;
  margin-bottom: 16px;
  display: block;
}

.logo-subtitle {
  color: var(--text-light);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* Responsive */
@media (max-width: 900px) {
  .confianza-special {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }

  .confianza-content {
    padding-right: 0;
    text-align: center;
  }

  .logo-display {
    max-width: 240px;
    margin: 0 auto;
  }
}

/* ===== SECCIÓN TESTIMONIOS ===== */
.testimonios .carousel{
  position:relative;
  margin-top:20px;
  padding:0 56px
}
.testimonios .track{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:8px 4px 16px 4px;
  scrollbar-width:none
}
.testimonios .track::-webkit-scrollbar{display:none}
.t-card{
  flex:0 0 340px;
  min-width:340px;
  max-width:340px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  scroll-snap-align:start;
  box-shadow:0 2px 6px rgba(0,0,0,.05)
}
.t-card p{margin:0 0 10px;color:#1a1a1a;font-style:italic}
.t-card .t-meta{font-size:14px;color:var(--text-light);font-weight:500}

.car-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  border:1px solid var(--border);
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  cursor:pointer;
  z-index:3;
  transition:all 0.3s ease
}
.car-btn:hover{background:var(--blue);color:#fff}
.car-btn.prev{left:8px}
.car-btn.next{right:8px}

.dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.dots button{width:8px;height:8px;border-radius:50%;border:0;background:var(--border);cursor:pointer;transition:all 0.3s ease}
.dots button:hover{background:var(--blue)}
.dots button[aria-current="true"]{background:var(--blue);transform:scale(1.2)}
/* ===== FIN SECCIÓN TESTIMONIOS ===== */

/* ===== FORMULARIO Y CTA ===== */
.cta-band{background:var(--panel);padding:56px 0;text-align:center}

.form-final {
  background: var(--blue-light);
  border-top: 1px solid var(--border);
}

/* Header del formulario */
.form-header{margin-bottom:48px}
.form-header h2{font-size:36px;line-height:1.2;margin-bottom:16px;color:var(--blue)}
.form-header .sub-center{font-size:18px;color:var(--text-light);max-width:600px;margin:0 auto}

/* Contenedor del formulario mejorado */
.form-wrap{
  background:#fff;
  border-radius:24px;
  padding:48px;
  box-shadow:0 10px 40px rgba(0,70,168,0.1);
  border:1px solid var(--border);
  margin-top:24px
}

/* Grid del formulario mejorado - 2 columnas iguales */
.form-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:32px
}

/* Form group con ancho completo */
.form-group{display:flex;flex-direction:column;width:100%}

/* Labels mejorados */
.form-wrap label{font-weight:600;color:var(--text);margin-bottom:8px;display:block}
.form-wrap input,.form-wrap select{
  width:100%;
  height:56px;
  border:2px solid var(--border);
  border-radius:12px;
  padding:0 16px;
  font-size:16px;
  font-family:'Inter',sans-serif;
  transition:all 0.3s ease;
  background:#fff;
  color:var(--text)
}
.form-wrap input:focus,.form-wrap select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(0,70,168,0.1);
  outline:none
}
.form-wrap input::placeholder{color:var(--text-light)}

/* Checkset mejorado */
.checkset{
  border:2px dashed var(--border);
  border-radius:16px;
  padding:24px;
  margin:32px 0;
  background:var(--panel)
}
.checkset-title{
  font-weight:700;
  color:var(--blue);
  margin:0 0 16px 0;
  font-size:16px;
  text-align:center
}

/* Check options centrados */
.check-options-centered{
  display:flex;
  gap:32px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap
}
.check-option{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0;
  margin:0;
  cursor:pointer
}
.check-option input[type="checkbox"]{
  width:20px;
  height:20px;
  margin:0;
  accent-color:var(--blue)
}
.check-label{
  font-weight:500;
  color:var(--text);
  cursor:pointer;
  font-size:16px;
  white-space:nowrap
}

/* Consent box horizontal */
.consent-box-horizontal{
  background:var(--panel);
  border-radius:16px;
  padding:20px;
  margin:24px 0;
  border:1px solid var(--border)
}
.consent-option-horizontal{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  cursor:pointer;
  width:100%
}
.consent-option-horizontal input[type="checkbox"]{
  width:20px;
  height:20px;
  margin:0;
  accent-color:var(--blue);
  flex-shrink:0
}
.consent-label{
  font-weight:500;
  color:var(--text);
  line-height:1.4;
  font-size:16px
}

/* Navegación del formulario mejorada */
.form-nav{
  display:flex;
  gap:16px;
  justify-content:center;
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--border)
}

/* Legal text mejorado */
.legal{font-size:13px;color:var(--text-light);margin-top:20px;line-height:1.5;text-align:center}

/* Form steps */
.form-step{display:none}
.form-step.active{display:block}

/* Mensajes de error */
.error-message{color:var(--error);font-size:14px;margin-top:5px;display:none;text-align:center}
.form-wrap input.invalid,.form-wrap select.invalid{border-color:var(--error);background:#fdf2f2}

/* Indicadores de progreso */
.progress-indicator{display:flex;justify-content:center;gap:12px;margin-bottom:40px}
.progress-dot{width:12px;height:12px;border-radius:50%;background:var(--border);transition:all 0.3s ease}
.progress-dot.active{background:var(--blue);transform:scale(1.2)}
/* ===== FIN FORMULARIO ===== */

/* ===== FOOTER ===== */
.footer{background:var(--footer);color:#fff;padding:24px 0}
.footer a{color:#9CC3FF;text-decoration:none}
/* ===== FIN FOOTER ===== */

/* ===== RESULTADOS SCORING ===== */
.result-banner{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:white;
  padding:60px 0;
  text-align:center;
  margin:40px 0;
  border-radius:20px
}
.result-content{max-width:600px;margin:0 auto;padding:0 20px}
.score-circle{
  width:140px;
  height:140px;
  border-radius:50%;
  background:rgba(255,255,255,0.2);
  color:white;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:0 auto 30px;
  font-weight:bold;
  backdrop-filter:blur(10px);
  border:3px solid rgba(255,255,255,0.3)
}
.score-number{font-size:42px;line-height:1;font-weight:700;margin-bottom:5px}
.score-label{font-size:14px;opacity:0.9;font-weight:500}
.result-title{font-size:28px;margin-bottom:15px;font-weight:700}
.result-message{font-size:18px;opacity:0.95;line-height:1.6;margin-bottom:25px}
.result-details{
  background:rgba(255,255,255,0.1);
  border-radius:16px;
  padding:25px;
  margin-top:30px;
  text-align:left;
  backdrop-filter:blur(10px)
}
.detail-row{
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.2)
}
.detail-row:last-child{border-bottom:none}
.detail-label{font-weight:600;opacity:0.9}
.detail-value{font-weight:500;opacity:0.95}
.btn-back{
  display:inline-block;
  background:white;
  color:#667eea;
  padding:16px 32px;
  border-radius:12px;
  text-decoration:none;
  font-weight:600;
  margin-top:25px;
  transition:all 0.3s ease;
  border:2px solid transparent
}
.btn-back:hover{background:transparent;color:white;border-color:white;transform:translateY(-2px)}

/* Estados de calificación */
.result-calificado{background:linear-gradient(135deg,#27ae60 0%,#2ecc71 100%)}
.result-intermedio{background:linear-gradient(135deg,#f39c12 0%,#f1c40f 100%)}
.result-no-calificado{background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%)}
/* ===== FIN RESULTADOS SCORING ===== */

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width:900px){

  .nav nav {
      display: none; /* Ocultar menú en mobile */
    }

  /* TIPOGRAFÍA RESPONSIVE */
  h1 {
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.2;
  }

  /* HERO MOBILE - JERARQUÍA OPTIMIZADA */
  .hero h1 {
    font-size: 28px; /* Prominente pero no gigante */
    line-height: 1.2;
    margin-bottom: 16px;
    text-align: left; /* Mantener alineación original */
  }

  h2{font-size:26px}
  h3{font-size:20px}
  body{font-size:16px}

  /* HERO SECTION MOBILE */
  .hero{
    padding:80px 0 60px;
    text-align:center;
    min-height:auto;
  }

  .hero .sub {
  font-size: 16px; /* Claramente secundario */
  line-height: 1.4;
  margin-bottom: 32px;
  text-align: left;
  color: rgba(255, 255, 255, 0.9); /* Sutilmente menos contrastante */
}

  .hero .wrap{
    padding:0 20px;
  }

  /* BOTONES MOBILE */
  .btn{
    font-size:16px;
    padding:14px 16px;
    border-radius:12px
  }

  .btn-large {
    padding: 16px 32px !important;
    font-size: 18px !important;
    min-width: auto; /* Eliminar min-width fijo */
    width: auto; /* Ancho según contenido */
    max-width: none; /* Eliminar max-width restrictivo */
    display: inline-flex; /* Volver al comportamiento original */
  }

  .btn-ghost{
    padding:14px 20px !important
  }

  /* LAYOUT GRID MOBILE */
  .grid2{
    grid-template-columns:1fr;
    gap:40px;
  }

  /* RESTAURAR ALINEACIÓN ORIGINAL */
  .hero-cta-wrapper {
    align-items: flex-start; /* Volver a izquierda */
    text-align: left;
  }

  .cta-content-wrapper {
    align-items: flex-start;
  }

  .cta-decoration-reference {
    justify-content: flex-start;
  }

  /* BENEFICIOS - CARDS VISUALES - 1 COLUMNA */
  .cards-visual {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 40px;
  }

  .visual-card {
    margin: 0 auto;
    max-width: 400px;
  }

  .cards3{
    grid-template-columns:1fr;
    gap:20px;
  }

  /* SECCIÓN CÓMO FUNCIONA MOBILE */
  .pasos-grid{
    gap:30px;
    flex-direction:column;
    align-items:center;
  }

  .paso{
    width:100%;
    max-width:280px;
  }

  .paso-num{
    width:50px;
    height:50px;
    font-size:18px
  }

  .paso h4{
    font-size:14px;
    text-align:center;
  }

  /* CONFIANZA MOBILE */
  .confianza .logos{
    gap:24px;
    flex-wrap:wrap;
    justify-content:center;
  }

  .logo-box img{
    max-width:120px;
  }

  /* TESTIMONIOS MOBILE */
  .flecha svg{
    width:30px;
    height:30px;
  }

  .t-card{
    flex:0 0 80%;
    min-width:80%;
    max-width:80%;
  }

  .car-btn.prev{
    left:10px;
  }

  .car-btn.next{
    right:10px;
  }

  /* FORMULARIO MOBILE */
  .form-wrap{
    padding:32px 24px;
    border-radius:20px;
    margin:20px auto;
  }

  .form-grid-2{
    grid-template-columns:1fr;
    gap:20px;
  }

  .form-header h2{
    font-size:28px;
  }

  .checkset{
    padding:20px;
  }

  .check-options-centered{
    flex-direction:column;
    gap:12px;
    align-items:center;
  }

  .check-options-horizontal{
    flex-direction:column;
    gap:12px;
    align-items:flex-start;
  }

  .form-nav{
    flex-direction:column;
    gap:12px;
  }

  /* RESULTADOS MOBILE */
  .result-banner{
    padding:40px 0;
    margin:20px 0;
    border-radius:16px;
  }

  .score-circle{
    width:120px;
    height:120px;
  }

  .score-number{
    font-size:36px;
  }

  .result-title{
    font-size:24px;
  }

  .result-message{
    font-size:16px;
  }

  .result-details{
    padding:20px;
  }

  .detail-row{
    flex-direction:column;
    gap:5px;
    padding:10px 0;
  }
}

@media (max-width:480px){
  .hero {
    padding: 60px 0 40px;
  }

  .hero h1 {
    font-size: 24px;
    line-height: 1.15;
  }

  .hero .sub {
    font-size: 16px;
    line-height: 1.4;
  }

  .btn-large {
    max-width: 100%;
    padding: 16px 20px !important;
  }

  .cta-text-reference p {
    font-size: 20px;
  }
  .form-wrap{padding:24px 16px;border-radius:16px}
  .checkset{padding:16px}
  .check-options-centered{gap:8px}
  .check-option{gap:6px}
  .check-label{font-size:14px}
  /* CTA decoration responsive */
    .hero-cta-wrapper {
      align-items: center;
      text-align: center;
    }

    .cta-decoration {
      justify-content: center;
    }

    .cta-caption {
      font-size: 16px;
    }
}
/* ===== FIN RESPONSIVE DESIGN ===== */