/* ============================================================
   ALTIVA FINANCE — styles.css  v3.0
   Índice:
   1.  Reset y base
   2.  Variables globales
   3.  Body y contenedor
   4.  Tipografía
   5.  Header / Navbar
   6.  Botón hamburguesa (mobile)
   7.  Menú dropdown móvil (desplegable desde arriba)
   8.  Botones CTA
   9.  Hero
   10. Tarjetas de productos con imagen real
   11. Propuesta de valor
   12. Simulador
   13. Formulario
   14. Seguridad
   15. CTA Final
   16. Footer
   17. Responsive ≤1024px
   18. Responsive ≤767px
   19. Responsive ≤599px
   20. Responsive ≤359px
   21. Animaciones globales
   ============================================================ */


/* ── 1. RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }


/* ── 2. VARIABLES ── */
:root {
    --primary-green:       #084734;
    --primary-dark:        #063b2e;
    --accent-orange:       #FF6A2C;
    --accent-orange-hover: #ff8c42;
    --text-dark:           #084734;
    --text-muted:          #5a6c7d;
    --success-green:       #10b981;
    --bg-white:            #FFFFFF;
    --shadow-premium:      0 20px 40px rgba(0,0,0,0.08);
    --shadow-button:       0 10px 25px rgba(255,106,44,0.2);
    --transition:          0.3s ease;
    --border-color:        rgba(0,0,0,0.06);
    --card-radius:         24px;
}


/* ── 3. BODY Y CONTENEDOR ── */
body {
    font-family:'Montserrat', sans-serif;
    color:var(--text-dark);
    line-height:1.6;
    padding-top:85px;
    background-color:#fdfbf7;
    background-image:url('img/fondo.webp');
    background-attachment:fixed;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    overflow-x:hidden;
}
body::before {
    content:""; position:fixed; inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.02) 50%,rgba(0,0,0,0.05) 100%);
    z-index:-5; pointer-events:none;
}
.container { width:92%; max-width:1200px; margin:0 auto; }


/* ── 4. TIPOGRAFÍA ── */
h2 { font-weight:700; font-size:48px; color:var(--primary-green); line-height:1.2; }
h3 { font-weight:700; font-size:32px; text-align:center; color:var(--primary-green); }
h4 { font-weight:700; font-size:20px; color:var(--primary-green); }
.section-subtitle { text-align:center; color:var(--text-muted); margin-top:10px; margin-bottom:50px; font-size:16px; }
.box-subtitle { color:var(--text-muted); font-size:15px; margin-bottom:25px; }


/* ── 5. HEADER ── */
/* Position relative necesario para que el dropdown se posicione respecto al header */
.header-premium {
    position:fixed; top:0; left:0; width:100%; z-index:1000;
    background:rgba(255,255,255,0.5);
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid rgba(255,255,255,0.5);
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
}
.navbar {
    display:flex; justify-content:space-between; align-items:center;
    height:85px; padding:0 20px;
}
.logo {
    font-family:'Sora',sans-serif; font-weight:800; font-size:28px;
    color:var(--primary-green); margin:0;
}
.punto-acento { color:var(--accent-orange); }
.logo-link { text-decoration:none; }
.menu { display:flex; gap:40px; list-style:none; margin:0; padding:0; }
.menu li a {
    text-decoration:none; color:var(--text-dark); font-weight:600;
    font-size:15px; transition:color 0.3s; position:relative; padding-bottom:5px;
}
.menu li a:hover, .menu li a.active { color:var(--accent-orange); }
.menu li a::after {
    content:''; position:absolute; bottom:0; left:0; width:0;
    height:2px; background:var(--accent-orange); transition:width 0.3s;
}
.menu li a:hover::after, .menu li a.active::after { width:100%; }
.nav-actions { display:flex; align-items:center; gap:10px; }


/* ── 6. BOTÓN HAMBURGUESA ── */
/* Visible solo en móvil (display:none en desktop, display:flex en ≤767px) */
.hamburger-btn {
    display:none; flex-direction:column; justify-content:center;
    align-items:center; gap:5px; width:42px; height:42px;
    background:transparent; border:none; cursor:pointer;
    padding:6px; border-radius:8px;
    transition:background 0.2s;
}
.hamburger-btn:hover { background:rgba(8,71,52,0.08); }

/* Las 3 líneas del ícono hamburguesa */
.hamburger-btn span {
    display:block; width:22px; height:2px;
    background:var(--primary-green); border-radius:2px;
    transition:all 0.3s cubic-bezier(.23,1,.32,1);
    transform-origin:center;
}

/* Animación a X cuando aria-expanded="true" */
.hamburger-btn[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger-btn[aria-expanded="true"] span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger-btn[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }


/* ── 7. MENÚ DROPDOWN MÓVIL ── */
/* Se despliega desde abajo del header (top:100% del header).
   La transición es de max-height + opacity para el efecto de deslizamiento. */
.mobile-dropdown {
    position:absolute;          /* Relativo al .header-premium */
    top:100%;                   /* Justo debajo del navbar */
    left:0;
    width:100%;
    background:rgba(255,255,255,0.97);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:2px solid var(--accent-orange);
    box-shadow:0 16px 40px rgba(0,0,0,0.12);
    max-height:0;               /* Colapsado por defecto */
    overflow:hidden;
    transition:max-height 0.35s cubic-bezier(.23,1,.32,1),
               opacity 0.3s ease;
    opacity:0;
    pointer-events:none;
}

/* Estado abierto: se expande hacia abajo */
.mobile-dropdown.open {
    max-height:500px;
    opacity:1;
    pointer-events:all;
}

/* Lista de enlaces del dropdown */
.mobile-dropdown-list {
    list-style:none; padding:0; margin:0;
}

/* Cada enlace del dropdown */
.mdd-link {
    display:block; padding:16px 28px;
    font-family:'Sora',sans-serif; font-size:1.05rem; font-weight:700;
    color:var(--text-dark); text-decoration:none;
    border-bottom:1px solid rgba(8,71,52,0.06);
    transition:background 0.2s, color 0.2s, padding-left 0.2s;
}
.mdd-link:hover {
    background:rgba(8,71,52,0.04);
    color:var(--accent-orange);
    padding-left:36px;
}

/* Botón de WhatsApp al pie del dropdown */
.mdd-whatsapp {
    display:block; margin:16px 28px 20px;
    background:linear-gradient(135deg,#25D366,#20BA5D);
    color:#fff; text-decoration:none;
    font-family:'Sora',sans-serif; font-weight:700; font-size:0.95rem;
    padding:14px 24px; border-radius:12px;
    text-align:center;
    box-shadow:0 8px 24px rgba(37,211,102,0.25);
    transition:transform 0.2s, box-shadow 0.2s;
}
.mdd-whatsapp:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 32px rgba(37,211,102,0.35);
}

/* Bloquear scroll del body cuando el menú está abierto */
body.dropdown-open { overflow:hidden; }


/* ── 8. BOTONES CTA ── */
.cta {
    border:none; padding:14px 28px; border-radius:12px;
    font-family:'Montserrat',sans-serif; font-weight:700; cursor:pointer;
    transition:var(--transition); font-size:15px;
    display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.cta:hover { transform:translateY(-2px); }

/* Verde primario */
.cta-primary { background:linear-gradient(135deg,var(--primary-green),var(--primary-dark)); color:white; box-shadow:0 10px 25px rgba(8,71,52,0.2); }
.cta-primary:hover { background:linear-gradient(135deg,var(--primary-dark),#052f25); box-shadow:0 15px 35px rgba(8,71,52,0.3); }

/* Borde verde, fondo blanco */
.cta-secondary { background:white; color:var(--primary-green); border:2px solid var(--primary-green); box-shadow:0 10px 25px rgba(0,0,0,0.05); }
.cta-secondary:hover { background:var(--primary-green); color:white; }

/* WhatsApp verde */
.cta-whatsapp { background:linear-gradient(135deg,#25D366,#20BA5D); color:white; box-shadow:0 10px 25px rgba(37,211,102,0.2); }
.cta-whatsapp:hover { background:linear-gradient(135deg,#20BA5D,#1BAD52); }
.cta-whatsapp svg { width:18px; height:18px; }

/* WhatsApp de ancho completo (simulador y formulario) */
.cta-whatsapp-primary, .cta-whatsapp-secondary { background:linear-gradient(135deg,#25D366,#20BA5D); color:white; box-shadow:0 10px 25px rgba(37,211,102,0.2); width:100%; margin-top:20px; }
.cta-whatsapp-primary:hover, .cta-whatsapp-secondary:hover { background:linear-gradient(135deg,#20BA5D,#1BAD52); }

/* Correo rojo */
.cta-correo-secondary { background:linear-gradient(135deg,#EA4335,#D33425); color:white; box-shadow:0 10px 25px rgba(234,67,53,0.2); width:100%; margin-top:20px; }
.cta-correo-secondary:hover { background:linear-gradient(135deg,#D33425,#C5221F); }

.cta.full { width:100%; }

/* Llamada — azul */
.cta-llamada {
    background: linear-gradient(135deg, #1d6fe8, #1558c0);
    color: white;
    box-shadow: 0 10px 25px rgba(29, 111, 232, 0.25);
}
.cta-llamada:hover {
    background: linear-gradient(135deg, #1558c0, #0f43a0);
    box-shadow: 0 15px 35px rgba(29, 111, 232, 0.35);
}
.cta-llamada svg { width: 18px; height: 18px; }


/* ── 9. HERO ── */
.hero-wrapper { padding:80px 0 120px; background:transparent; }
.hero-fluido { display:flex; align-items:center; justify-content:space-between; gap:60px; flex-direction:row-reverse; }
.hero-text { max-width:550px; }
.hero-subtitle { color:var(--text-muted); font-weight:500; font-size:18px; margin-bottom:25px !important; line-height:1.8; }
.trust-badges { display:flex; flex-direction:column; gap:12px; margin-bottom:35px; padding-bottom:25px; border-bottom:1px solid rgba(8,71,52,0.1); }
.badge-item { display:flex; align-items:center; gap:12px; color:var(--primary-green); font-weight:600; font-size:14px; }
.badge-item svg { color:var(--accent-orange); }
.hero-cta-buttons { display:flex; gap:15px; margin-top:30px; align-items:center; }
.hero-fluido h2 { font-family:'Sora',sans-serif; font-size:52px; margin-bottom:15px; line-height:1.1; }
.hero-image img {
  width: 450px;
  border-radius: 24px;
  object-fit: cover;

  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.12),
    0 40px 80px rgba(0, 0, 0, 0.20),
    -8px 20px 40px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);

  transform: perspective(1000px) rotateY(-2deg) rotateX(1deg);
  transform-origin: center center;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.hero-image img:hover {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 16px 36px rgba(0, 0, 0, 0.16),
    0 55px 100px rgba(0, 0, 0, 0.26),
    -10px 28px 50px rgba(0, 0, 0, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: perspective(1000px) rotateY(-2deg) rotateX(1deg) translateY(-4px);
}


/* ── 10. TARJETAS DE PRODUCTOS ── */
.creditos { padding:100px 0 50px; }
.premium-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:50px; }

.premium-card {
    border-radius:var(--card-radius); overflow:hidden;
    display:flex; flex-direction:column;
    box-shadow:0 20px 60px rgba(0,0,0,0.12);
    transition:transform 0.35s cubic-bezier(.22,.68,0,1.2), box-shadow 0.35s;
    cursor:pointer;
}
.premium-card:hover { transform:translateY(-10px) scale(1.015); box-shadow:0 40px 80px rgba(0,0,0,0.18); }

/* Wrapper de la imagen: overflow:hidden para el zoom en hover */
.card-image-wrap { overflow:hidden; position:relative; flex-shrink:0; }
.card-image-wrap::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:70px;
    background:linear-gradient(to bottom,transparent,var(--card-bg-bottom,#111)); z-index:1;
}
.card-image { width:100%; height:200px; object-fit:cover; display:block; transition:transform 0.55s; }
.premium-card:hover .card-image { transform:scale(1.07); }

/* Cuerpo de la tarjeta */
.card-body { flex:1; padding:26px 26px 28px; display:flex; flex-direction:column; justify-content:space-between; }
.card-label { display:inline-block; font-family:'Sora',sans-serif; font-size:0.65rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:4px 12px; border-radius:40px; margin-bottom:12px; background:rgba(255,255,255,0.18); color:rgba(255,255,255,0.9); }
.card-title { font-family:'Sora',sans-serif; font-size:1.65rem; font-weight:800; color:#fff; line-height:1.15; margin-bottom:5px; }
.card-desc { font-size:0.88rem; color:rgba(255,255,255,0.7); margin-bottom:18px; line-height:1.5; }
.card-divider { height:1px; background:rgba(255,255,255,0.15); margin-bottom:18px; }
.card-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:22px; }
.card-stat { display:flex; flex-direction:column; gap:3px; }
.card-stat-label { font-size:0.62rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.55); }
.card-stat-value { font-family:'Sora',sans-serif; font-size:1.2rem; font-weight:700; color:#fff; line-height:1.1; }
.card-stat-value small { font-size:0.7rem; font-weight:400; opacity:0.7; }
.card-btn { width:100%; padding:13px; border:none; border-radius:14px; font-family:'Sora',sans-serif; font-size:0.9rem; font-weight:700; cursor:pointer; transition:all 0.2s; background:rgba(255,255,255,0.2); color:#fff; border:1.5px solid rgba(255,255,255,0.35); text-align:center; text-decoration:none; display:block; }
.card-btn:hover { background:rgba(255,255,255,0.32); border-color:rgba(255,255,255,0.55); transform:scale(0.98); }

/* Colores individuales por tipo */
.card-personal    { --card-bg-bottom:#2a1060; }
.card-personal    .card-body { background:linear-gradient(160deg,#4f2fca,#2a1060); }
.card-hipotecario { --card-bg-bottom:#0c2d55; }
.card-hipotecario .card-body { background:linear-gradient(160deg,#1a5ca8,#0c2d55); }
.card-automotriz  { --card-bg-bottom:#0a2920; }
.card-automotriz  .card-body { background:linear-gradient(160deg,#084734,#0a2920); }
.card-empresarial { --card-bg-bottom:#3b1305; }
.card-empresarial .card-body { background:linear-gradient(160deg,#c2410c,#3b1305); }
.card-agrario     { --card-bg-bottom:#052e16; }
.card-agrario     .card-body { background:linear-gradient(160deg,#15803d,#052e16); }
.card-construccion{ --card-bg-bottom:#1c1917; }
.card-construccion .card-body { background:linear-gradient(160deg,#44403c,#1c1917); }


/* ── 11. PROPUESTA DE VALOR ── */
.valor-proposition { background:rgba(8,71,52,0.05); backdrop-filter:blur(10px); padding:80px 0; margin:50px 0; border-radius:20px; border:1px solid rgba(8,71,52,0.1); }
.valor-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.valor-item { text-align:center; }
.valor-icon { width:64px; height:64px; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--accent-orange),#ff9058); border-radius:16px; box-shadow:0 8px 24px rgba(255,106,44,0.25); }
.valor-icon svg { width:30px; height:30px; stroke:white; }
.valor-item h3 { font-size:22px; margin-bottom:12px; }
.valor-item p { color:var(--text-muted); font-size:15px; line-height:1.6; }


/* ── 12. SIMULADOR ── */
.conversion-wrapper { padding:100px 0; background:transparent; }
.conversion { display:grid; grid-template-columns:1.2fr 0.8fr; gap:50px; align-items:start; }
.simulador-box { padding:40px; border-radius:24px; background:rgba(255,255,255,0.9); backdrop-filter:blur(10px); box-shadow:var(--shadow-premium); border:1px solid var(--border-color); }
.simulador-box h3 { color:var(--primary-green); }

/* Selector de tipo de crédito — 6 opciones en grid 3×2 */
.credit-type-selector { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0 25px; }
.credit-type-option { padding:16px; border-radius:12px; border:2px solid rgba(8,71,52,0.15); background:rgba(255,255,255,0.5); cursor:pointer; transition:all 0.3s; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.credit-type-option:hover { border-color:var(--accent-orange); background:rgba(255,106,44,0.05); transform:translateY(-3px); }
.credit-type-option.active { border-color:var(--primary-green); background:linear-gradient(135deg,rgba(8,71,52,0.08),rgba(8,71,52,0.04)); box-shadow:0 0 0 3px rgba(8,71,52,0.1); }

/* Emoji dentro de la opción */
.credit-icon { font-size:28px; line-height:1; }

.credit-type-option span { font-weight:600; color:var(--text-dark); font-size:13px; }

/* Caja informativa del crédito activo */
.credit-info-box { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; padding:20px; background:rgba(8,71,52,0.05); border-radius:12px; margin-bottom:25px; border:1px solid rgba(8,71,52,0.1); }
.info-detail { display:flex; justify-content:space-between; align-items:center; }
.info-detail span:first-child { font-size:13px; color:var(--text-muted); font-weight:500; }
.info-detail span:last-child { font-weight:700; color:var(--accent-orange); font-size:16px; }

/* Sliders */
.range-group { margin-bottom:25px; }
.range-group label { display:block; font-weight:600; color:var(--text-dark); margin-bottom:10px; font-size:14px; }
.value-display { display:block; text-align:right; font-weight:700; font-size:18px; color:var(--accent-orange); margin-top:8px; }
input[type="range"] { width:100%; height:8px; accent-color:var(--accent-orange); cursor:pointer; border-radius:4px; appearance:none; -webkit-appearance:slider-horizontal; margin:0; padding:0; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--accent-orange); cursor:pointer; box-shadow:0 2px 8px rgba(255,106,44,0.3); border:none; }
input[type="range"]::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--accent-orange); cursor:pointer; box-shadow:0 2px 8px rgba(255,106,44,0.3); border:none; }
input[type="range"]::-moz-range-track { background:transparent; border:none; }

/* Resultado calculado */
.resultado { margin-top:35px; padding:30px; border-radius:16px; background:rgba(8,71,52,0.05); display:grid; grid-template-columns:1fr 1fr; gap:20px; overflow:hidden; }
.res-item { text-align:center; overflow:hidden; }
.resultado p { font-size:14px; color:var(--text-muted); margin:0; }
.resultado h4 { font-size:32px; color:var(--accent-orange); margin:8px 0 0; line-height:1.2; word-break:break-word; min-height:38px; max-height:38px; display:flex; align-items:center; justify-content:center; }
.tasa { grid-column:1/-1; text-align:center; font-style:italic; margin-top:15px; font-size:12px; color:var(--text-muted); }


/* ── 13. FORMULARIO ── */
.form-box { background:rgba(255,255,255,0.95); backdrop-filter:blur(10px); padding:40px; border-radius:24px; box-shadow:var(--shadow-premium); border:1px solid var(--border-color); }
.form-header h3 { text-align:left; color:var(--primary-green); }
.form-header { margin-bottom:30px; }
.credit-form { display:flex; flex-direction:column; gap:20px; }
.form-field { display:flex; flex-direction:column; }
.form-field label { font-weight:600; color:var(--text-dark); margin-bottom:8px; font-size:14px; }
.form-field input, .form-field select { padding:14px 16px; border-radius:12px; border:1.5px solid rgba(8,71,52,0.1); background:#F8FAFC; font-family:inherit; font-size:15px; transition:var(--transition); color:var(--text-dark); -webkit-appearance:none; appearance:none; }
.form-field input::placeholder { color:rgba(8,71,52,0.4); }
.form-field input:focus, .form-field select:focus { outline:none; border-color:var(--primary-green); background:white; box-shadow:0 0 0 4px rgba(8,71,52,0.1); }
.input-prefix { position:relative; display:flex; align-items:center; }
.input-prefix span { position:absolute; left:16px; color:var(--text-muted); font-weight:600; pointer-events:none; }
.input-prefix input { padding-left:40px !important; }
.field-error { color:#ef4444; font-size:12px; margin-top:4px; min-height:16px; display:block; }
.processing-info { display:flex; align-items:center; gap:10px; padding:12px 16px; background:rgba(16,185,129,0.08); border:1px solid rgba(16,185,129,0.2); border-radius:10px; color:var(--primary-green); font-size:13px; font-weight:600; margin-bottom:10px; }
.processing-info svg { color:var(--success-green); }
.form-buttons { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:10px; }
.success-message { display:none; background:rgba(16,185,129,0.1); border:1px solid #10b981; color:#047857; padding:16px; border-radius:12px; text-align:center; font-weight:600; }
.success-message.show { display:block; animation:slideIn 0.3s ease; }
@keyframes slideIn { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }


/* ── 14. SEGURIDAD ── */
.seguridad-wrapper { background:rgba(8,71,52,0.03); padding:80px 0; border-top:1px solid rgba(8,71,52,0.1); border-bottom:1px solid rgba(8,71,52,0.1); }
.seguridad-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.seg-item { text-align:center; }
.seg-icon { width:60px; height:60px; margin:0 auto 15px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--primary-green),#0f6a4e); border-radius:50%; box-shadow:0 8px 20px rgba(8,71,52,0.2); }
.seg-icon svg { width:26px; height:26px; stroke:white; }
.seg-item h4 { margin-bottom:10px; font-size:18px; }
.seg-item p { color:var(--text-muted); font-size:14px; }


/* ── 15. CTA FINAL ── */
.cta-final { padding:100px 0; }
.cta-final-content { text-align:center; padding:80px; background:linear-gradient(135deg,rgba(8,71,52,0.9),rgba(15,106,78,0.9)); backdrop-filter:blur(10px); color:white; border-radius:24px; border:1px solid rgba(255,255,255,0.1); }
.cta-final-content h2 { margin-bottom:15px; color:white; }
.cta-final-content p  { margin-bottom:35px; opacity:0.9; color:white; }


/* ── 16. FOOTER ── */
.footer { background:linear-gradient(135deg,#084734,#0f6a4e); color:white; padding:80px 0 30px; }
.footer-grid { display:grid; grid-template-columns:1.2fr repeat(3,1fr); gap:40px; }
.logo-footer { font-family:'Sora',sans-serif; font-size:28px; font-weight:800; color:white; margin-bottom:10px; margin-top:0; }
.footer h4 { margin-bottom:20px; color:white; font-size:15px; }
.footer-links ul { list-style:none; padding:0; margin:0; }
.footer-links li { margin-bottom:12px; }
.footer-links a { color:rgba(255,255,255,0.7); text-decoration:none; font-size:14px; transition:color var(--transition); }
.footer-links a:hover { color:var(--accent-orange); }
.footer-links li:not(:has(a)) { color:rgba(255,255,255,0.7); font-size:14px; cursor:pointer; }
.footer-links li:not(:has(a)):hover { color:var(--accent-orange); }
.footer-bottom { text-align:center; margin-top:60px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.1); opacity:0.7; font-size:14px; }


/* ── 17. RESPONSIVE ≤1024px ── */
@media (max-width:1024px) {
    .premium-cards-grid { grid-template-columns:repeat(2,1fr); gap:28px; }
    .conversion { grid-template-columns:1fr; }
    .credit-type-selector { grid-template-columns:repeat(2,1fr); }
    .valor-grid { grid-template-columns:repeat(2,1fr); }
    .seguridad-grid { grid-template-columns:repeat(2,1fr); }
    .hero-fluido { flex-direction:column; gap:30px; }
    .hero-image img { width:100%; max-width:400px; }
    h2 { font-size:40px; }
    h3 { font-size:28px; }
}


/* ── 18. RESPONSIVE ≤767px ── */
@media (max-width:767px) {
    /* Ocultar menú desktop, mostrar hamburguesa */
    .menu { display:none; }
    .hamburger-btn { display:flex; }

    body { padding-top:85px; }
    .navbar { height:85px; padding:0 15px; }
    .logo { font-size:22px; }
    .cta-whatsapp { padding:10px 16px; font-size:13px; }
    .cta-whatsapp svg { width:16px; height:16px; }

    /* Hero — colores blancos para contraste en móvil */
    .hero-wrapper { padding:40px 0 60px; }
    .hero-text { max-width:100%; }
    .hero-subtitle { font-size:16px; color:#FFFFFF; }
    .trust-badges { gap:10px; margin-bottom:25px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.2); }
    .badge-item { font-size:13px; color:#FFFFFF; }
    .badge-item svg { color:var(--accent-orange); }
    .hero-cta-buttons { flex-direction:column; gap:12px; }
    .hero-cta-buttons .cta { width:100%; }
    .hero-fluido h2 { font-size:36px; color:#FFFFFF; }
    .hero-image img { width:100%; }

    /* Sección "Nuestros productos" — colores blancos en móvil */
    .creditos h3 { color:#FFFFFF; }
    .creditos .section-subtitle { color:rgba(255,255,255,0.85); }

    /* Tarjetas */
    .premium-cards-grid { grid-template-columns:1fr; gap:24px; }
    .creditos { padding:60px 0 30px; }

    /* Secciones */
    .valor-proposition { padding:60px 0; margin:30px 0; }
    .valor-grid { grid-template-columns:1fr; }
    .conversion-wrapper { padding:60px 0; }
    .conversion { gap:25px; }
    .simulador-box, .form-box { padding:25px; }
    .credit-type-selector { gap:10px; }
    .credit-type-option { padding:12px; }
    .credit-info-box { grid-template-columns:1fr; gap:12px; }
    .form-field label { font-size:13px; }
    .form-field input, .form-field select { padding:12px 14px; font-size:14px; }
    .form-buttons { grid-template-columns:1fr; gap:12px; }
    .resultado { padding:20px; gap:15px; margin-top:25px; }
    .resultado p { font-size:13px; }
    .resultado h4 { font-size:24px; min-height:32px; max-height:32px; }
    .cta { padding:12px 20px; font-size:14px; }
    h2 { font-size:32px; }
    h3 { font-size:24px; }
    .cta-final-content { padding:50px 25px; }
    .seguridad-grid { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr; gap:30px; }
}


/* ── 19. RESPONSIVE ≤599px ── */
@media (max-width:599px) {
    .container { width:95%; }
    body { font-size:14px; }
    .navbar { height:70px; padding:0 10px; }
    .logo { font-size:20px; }
    .cta-whatsapp { padding:8px 12px; font-size:12px; gap:5px; }
    .cta-whatsapp svg { width:14px; height:14px; }
    .hero-wrapper { padding:30px 0 50px; }
    .hero-fluido h2 { font-size:28px; color:#FFFFFF; }
    .hero-subtitle { color:#FFFFFF; }
    .badge-item { color:#FFFFFF; }
    .badge-item svg { color:var(--accent-orange); }
    .creditos h3 { color:#FFFFFF; }
    .creditos .section-subtitle { color:rgba(255,255,255,0.85); }
    .card-image { height:160px; }
    .card-body { padding:20px 18px 22px; }
    .card-title { font-size:1.4rem; }
    .card-stat-value { font-size:1rem; }
    .credit-type-selector { grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:15px; }
    .credit-type-option { padding:10px; gap:5px; }
    .credit-icon { font-size:22px; }
    .credit-type-option span { font-size:10px; }
    .credit-info-box { padding:12px; gap:10px; }
    .info-detail { flex-direction:column; align-items:flex-start; gap:2px; }
    .resultado { padding:15px; gap:12px; }
    .resultado h4 { font-size:18px; min-height:26px; max-height:26px; }
    .simulador-box, .form-box { padding:20px; }
    .cta-final { padding:50px 0; }
    .cta-final-content { padding:40px 20px; border-radius:16px; }
    .cta-final-content h2 { font-size:26px; }
    .footer { padding:60px 0 20px; }
    .footer-bottom { margin-top:40px; font-size:12px; }
}


/* ── 20. RESPONSIVE ≤359px ── */
@media (max-width:359px) {
    .container { width:96%; }
    .logo { font-size:18px; }
    .hero-fluido h2 { font-size:24px; color:#FFFFFF; }
    .hero-subtitle { color:#FFFFFF; }
    .badge-item { color:#FFFFFF; }
    .badge-item svg { color:var(--accent-orange); }
    .creditos h3 { color:#FFFFFF; }
    .creditos .section-subtitle { color:rgba(255,255,255,0.85); }
    h3 { font-size:20px; }
    .credit-type-selector { grid-template-columns:1fr; }
    .form-buttons { grid-template-columns:1fr; }
    .cta { padding:9px 14px; font-size:12px; }
}


/* ── 21. ANIMACIONES GLOBALES ── */
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(30px); }
    to   { opacity:1; transform:translateY(0); }
}
.mdd-llamada {
    display: block;
    margin: 16px 28px 0;
    background: linear-gradient(135deg, #1d6fe8, #1558c0);
    color: #fff;
    text-decoration: none;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 14px 24px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(29, 111, 232, 0.25);
    transition: transform 0.2s, box-shadow 0.2s;
}
.mdd-llamada:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(29, 111, 232, 0.35);
}