:root{
  --bg:#F8F5F1;
  --green-900:#0b3a2f;
  /* brighter, slightly more metallic gold tone */
  --gold:#d4a52a;
  --muted:#6b6b66;
  --card:#ffffff;
}
*{box-sizing:border-box}
html{
  scrollbar-gutter:stable;
  overflow-x:clip;
}
html,body,#root{height:100%}
body{
  margin:0;
  overflow-x:clip;
  max-width:100%;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--green-900);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.nav{
  position:fixed;
  top:24px;
  left:24px;
  right:24px;
  z-index:9990;
  backdrop-filter: blur(6px);
  box-sizing:border-box;
}
.nav-inner{
  height:72px;
  /* increase vertical size by ~1cm while preserving layout */
  min-height: calc(72px + 1cm);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding: calc(12px + 0.5cm) 28px;
  border-radius:20px;
  background: rgba(255,255,255,0.35);
  box-shadow: 0 6px 18px rgba(11,58,47,0.06);
  border: 1px solid rgba(11,58,47,0.04);
}
.logo{
  text-decoration:none;
  display:block;
  flex-shrink:0;
}
.logo img{
  width:168px; /* 20% larger */
  height:auto;
  max-width:100%;
  display:block;
  transition:filter 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
/* small tagline next to logo on desktop */
.nav-inner{ position:relative; }
.nav-tagline{
  /* hidden on small screens */
  display:none;
}
@media (min-width:881px){
  .nav-tagline{
    /* ensure tagline is NOT visible in header to avoid yellow letters near menu */
    display:none !important;
    position:static;
    margin-left:12px;
    padding:8px 12px;
    font-weight:800;
    color:#072a1f; /* dark text on gold background for contrast */
    background: linear-gradient(90deg,#ffd66b 0%, #d4a52a 45%, #b88322 100%);
    border-radius:10px;
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
    font-size:14px;
    line-height:1;
    white-space:nowrap;
  }
}

/* Quiénes Somos styles removed (reverted) */

/* Desktop-only: hide burger, ensure desktop nav visible and add logo highlight */
@media (min-width:881px){
  .nav-burger{display:none !important}
  .nav-menu{display:flex !important}
  .logo img{
    /* remove shadow as requested */
    box-shadow: none;
    border-radius:8px;
    transform: translateZ(0);
  }
  .logo:hover img{
    filter:brightness(1.02) saturate(1.05);
    transform: translateY(-2px);
  }
  /* Desktop: show simulator CTA, hide mobile solicitar button */
  .hero-cta-mobile{ display:none !important; }
  .hero-cta-desktop{ display:inline-flex; text-decoration:none; }
  /* Desktop: enlarge hero buttons by ~20% without breaking layout */
  .hero-ctas .btn.primary{
    transform: scale(1.2);
    transform-origin: center;
    padding: 17px 30px;
    font-size: 1.08rem;
  }
  /* Preserve hover translate while keeping scale */
  .hero-ctas .btn.primary:hover{
    transform: scale(1.2) translateY(-4px);
  }
  /* Desktop: shift hero background image down 1cm for better visual crop */
  .hero {
    background-position: right calc(50% + 1cm) !important;
  }
}
.nav-menu{display:flex;gap:30px;align-items:center;justify-content:center;flex:1}
.nav-menu a{color:var(--green-900);text-decoration:none;font-weight:600;opacity:0.95}
.nav-cta .btn{white-space:nowrap}

.hero{
  /* Desktop: full viewport height (mobile will be shorter) */
  min-height: 100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding: clamp(20px, 6vw, 140px) clamp(16px, 4vw, 48px) clamp(16px, 6vw, 120px);
  position:relative;
  /* Desktop/background image (default) */
  background: url('../assets/images/hero.png') right center / cover no-repeat;
  background-color: var(--bg);
}
.hero-inner{
  width:100%;
  max-width:1200px;
  display:grid;
  grid-template-columns: 1fr minmax(300px, 520px);
  gap:clamp(16px, 3vw, 40px);
  align-items:start;
  position:relative;
  /* Ensure inner container is transparent and does not display as a card */
  background: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  padding: clamp(16px, 4vw, 64px);
  overflow:visible;
}
.hero-left{padding-right:24px}
.hero-title{
  font-size:66px;
  line-height:0.98;
  font-weight:800;
  margin:8px 0 18px;
  color:var(--green-900);
  letter-spacing:-0.6px;
}
.hero-title .gold{color:var(--gold);font-weight:800}
.title-underline{
  width:56px;height:6px;background:var(--gold);border-radius:4px;margin-bottom:18px;
}
/* Metallic / brighter gold treatments */
.gold,
.wb-decor,
.title-underline,
.pc-qchev,
.pc-qa-aside strong {
  /* use gradient + subtle shine for metallic feel */
  background: linear-gradient(90deg, #ffe38a 0%, #f0bf4a 40%, #b88322 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 1px 0 rgba(255,240,200,0.6),
    0 6px 18px rgba(168,120,32,0.12);
}
.btn.gold{
  background: linear-gradient(90deg,#ffd66b 0%, #d4a52a 45%, #b88322 100%);
  color:#072a1f;
  border:none;
  padding:12px 20px;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
  box-shadow:
    0 8px 30px rgba(216,160,60,0.22),
    inset 0 -3px 8px rgba(255,255,255,0.12);
}
.btn.gold:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 60px rgba(216,160,60,0.22), inset 0 -3px 8px rgba(255,255,255,0.12);
}
.hero-desc{
  max-width:470px;
  color:var(--muted);
  line-height:1.6;
  margin-bottom:30px;
  font-weight:500;
  /* Golden reflection/glow to make the description stand out (applies to all viewports) */
  text-shadow:
    0 1px 0 rgba(150,95,30,0.95),
    0 2px 8px rgba(168,120,32,0.85),
    0 6px 18px rgba(168,120,32,0.25);
}
/* Descending staircase lines for the hero description */
.hero-desc .desc-line{display:block}
.hero-desc{ text-align:left }
.hero-desc{ text-align:left }
.hero-desc .desc-line{display:block; margin-left:0; font-size:1.02rem}

/* Desktop: show the two-line variant, hide the mobile three-line variant */
.hero-desc--desktop{display:block}
.hero-desc--mobile{display:none}

/* Mobile: show three-line variant and hide desktop two-line variant */
@media (max-width:880px){
  .hero-desc--desktop{display:none}
  .hero-desc--mobile{display:block}
}
.stats{
  display:flex;
  gap:18px;
  align-items:center;
  margin-bottom:28px;
}
.stat{
  display:flex;
  gap:12px;
  align-items:center;
  background:rgba(255,255,255,0.85);
  padding:14px 18px;
  border-radius:14px;
  box-shadow: 0 8px 22px rgba(11,58,47,0.04);
  /* Highlight stats with a gold border for better contrast */
  border:2px solid var(--gold);
  transition:transform 180ms ease, box-shadow 180ms ease;
}
.stat.divider{border-left:none;border-right:none}
.stat-icon{
  width:44px;height:44px;border-radius:8px;background:rgba(11,58,47,0.04);
  display:grid;place-items:center;font-size:20px;
}
.stat-text{font-size:13px;color:var(--muted)}
.stat-value{font-weight:700;color:var(--green-900)}
.hero-ctas{display:flex;gap:16px;margin-top:6px;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;border:none;
  background:transparent;color:var(--green-900);cursor:pointer;font-weight:700;
  transition:all 220ms ease-out;
}
.btn.primary{
  background: linear-gradient(180deg,var(--green-900), #0a3629 80%);
  color:#fff;border-radius:16px;padding:14px 24px;box-shadow:0 18px 40px rgba(11,58,47,0.14);
}
.btn.primary:hover{transform:translateY(-4px)}
.btn.primary .arrow{display:inline-block;transition:transform 220ms ease-out}
.btn.primary:hover .arrow{transform:translateX(6px)}
.btn.outline{
  background:#fff;border:1px solid rgba(11,58,47,0.07);padding:10px 16px;border-radius:999px;
  box-shadow:0 6px 16px rgba(11,58,47,0.04)
}
.btn.play .play-circle{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(11,58,47,0.08);background:#fff}
.hero-right{position:relative;display:flex;align-items:flex-start;justify-content:center}
.image-wrap{width:100%;height:100%;display:block;position:relative;overflow:visible}
.hero-image{
  display:none; /* background now supplies the hero image to avoid duplication */
}
/* Navigation: mobile burger and premium dropdown */
.nav-burger{
  display:none;
  background:transparent;
  border:none;
  width:44px;
  height:40px;
  padding:6px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:6px;
  cursor:pointer;
}
.nav-burger .burger-line{
  height:3px;
  background:var(--green-900);
  border-radius:2px;
  display:block;
}

.mobile-menu{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  width:100%;
  max-width:none;
  margin-top:8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.92));
  border-radius:12px;
  box-shadow: 0 18px 50px rgba(11,58,47,0.12);
  border-left:4px solid var(--gold);
  overflow:hidden;
  transform-origin: top center;
  transform: translateY(-6px) scaleY(0.98);
  opacity:0;
  max-height:0;
  pointer-events:none;
  transition: opacity 280ms cubic-bezier(.2,.9,.2,1), transform 280ms cubic-bezier(.2,.9,.2,1), max-height 280ms cubic-bezier(.2,.9,.2,1);
  z-index:2000;
}
.mobile-menu .mobile-inner{padding:14px}
.mobile-menu nav{display:flex;flex-direction:column;gap:8px}
.mobile-menu a{padding:8px 6px;border-radius:8px;text-decoration:none;color:var(--green-900);font-weight:700}
.mobile-menu .mobile-cta{margin-top:10px;display:flex;justify-content:center}

.nav.open .mobile-menu,
.mobile-menu[aria-hidden="false"]{
  opacity:1;
  transform: translateY(0) scaleY(1);
  max-height:420px;
  pointer-events:auto;
}

/* improve floating card glass effect for a more premium look */
.floating-card{
  position:absolute;
  left:64px;
  right:64px;
  bottom:-48px;
  margin:0 auto;
  background: rgba(255,255,255,0.78);
  padding:22px;
  border-radius:28px;
  box-shadow:0 30px 80px rgba(11,58,47,0.08);
  border:1px solid rgba(11,58,47,0.04);
  backdrop-filter: blur(6px) saturate(120%);
  max-width:1100px;
}

.card-inner{display:flex;gap:28px;align-items:center;justify-content:space-between;padding:12px 18px}
.card-item{display:flex;gap:14px;align-items:center;flex:1;padding:12px}
.card-icon{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;background:rgba(11,58,47,0.03);font-size:20px}
.card-icon.gold{color:var(--gold)}
.card-title{font-weight:700;color:var(--green-900)}
.card-sub{color:var(--muted);font-size:14px;margin-top:6px}

.hero-footer{margin-top:80px;text-align:center;padding-top:28px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted)}
.hero-footer em{font-style:italic;color:var(--green-900);font-weight:600}

/* Responsive */
@media (max-width:1100px){
  .hero-inner{grid-template-columns:1fr 420px;padding:48px;gap:18px}
  .hero-title{font-size:54px}
}
@media (max-width:880px){
  .nav-inner{padding:10px 16px}
  .hero-inner{grid-template-columns:1fr; padding:28px}
  .hero-right{order:2;margin-top:18px}
  .hero-left{order:1}
  .hero-title{font-size:36px}
  .hero-desc{max-width:100%}
  /* Show burger and hide desktop nav links on mobile */
  .nav-burger{display:flex}
  .nav-menu{display:none}
  /* Hide the nav call-to-action button next to the menu on mobile */
  .nav-cta{display:none}
  .stats{flex-direction:column;align-items:stretch}
  .floating-card{position:static;margin-top:20px}
}

/* Mobile-only adjustments: use heroc.png as the hero background and ensure perfect responsiveness */
@media (max-width:880px){
  .hero{
    /* Keep the mobile hero image unchanged (use same sizing as desktop) */
    background-image: url('../assets/images/heroc.png');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* Mobile: reduce hero height so the stat cards remain visible below */
    min-height: 55vh !important;
    height: auto !important;
    overflow: visible !important;
    padding-top: clamp(8px, 4vw, 20px) !important;
    padding-bottom: 0 !important;
  }

  .hero-inner{
    grid-template-columns: 1fr;
    padding: clamp(10px, 3.5vw, 20px);
    /* ensure inner container does not add extra bottom space */
    padding-bottom: 0 !important;
  }

  /* Hide the hero decorative image on mobile so it doesn't reserve height */
  .hero-image,
  .image-wrap{
    display:none !important;
    height:auto !important;
  }
 
  /* Place CTAs and stats compactly on mobile */
  .hero-left{
    display:flex;
    flex-direction:column;
  }
  /* CTAs centered and spaced so they don't overlap the stats */
  .hero-ctas{
    order:1;
    margin-top: 0.6cm !important;
    margin-bottom: 0.4cm;
    display:flex;
    justify-content:center;
    width:100%;
    gap:16px;
    z-index:1;
  }
  .stats{
    order:2;
    margin-top: 8px !important;
  }
  /* Lower the title by 3cm on mobile as requested (kept modest)
     NOTE: margin-top here conflicted with later translateY rules and prevented expected movement.
     Set margin-top to 0 and rely on transform for vertical shift so translateY works reliably. */
  .hero-title{
    margin-top: 0 !important;
    transform: translateZ(0);
  }

  /* Bounce keyframes (mobile-only) */
  @keyframes bounce {
    0%{transform:translateY(0)}
    30%{transform:translateY(-10px)}
    50%{transform:translateY(0)}
    70%{transform:translateY(-5px)}
    100%{transform:translateY(0)}
  }

  .hero-ctas .btn{
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
  }
  /* Trigger bounce when button is pressed or focused on mobile */
  .hero-ctas .btn:active,
  .hero-ctas .btn:focus{
    animation: bounce 600ms cubic-bezier(.22,.61,.36,1);
  }

  /* Mobile: show only the primary "Solicitar crédito" button, keep its text on one line and move it slightly up */
  .hero-cta-desktop{ display:none !important; }
  .hero-cta-mobile{ display:inline-flex; }
  .hero-ctas .btn.play{
    display:none !important;
  }
  .hero-ctas .btn.primary{
    white-space:nowrap;
    /* Reset vertical transform on mobile so button doesn't overlap stats */
    transform: scale(1.05) !important;
    transform-origin: center;
    display:inline-block;
    padding: 14px 26px;
    font-size: 1rem;
    box-shadow: 0 10px 24px rgba(11,58,47,0.08);
  }
  /* Slight lift for the hero description on mobile */
  .hero-desc{
    transform: translateY(-0.3cm);
  }
  /* Mobile: nudge hero title down 1.4cm as requested */
  .hero-title{
    /* moved further down on mobile as requested (1.4cm + 1.7cm = 3.1cm) */
    margin-top: 3.1cm !important;
    transform: none !important;
  }
}
/* Opinions slider + simulator styles */
.container{
  width:1200px;
  max-width:calc(100% - 96px);
  margin:0 auto;
  padding:0 16px;
}

.section-title{
  font-size:26px;
  margin:18px 0 12px;
  color:var(--green-900);
  font-weight:700;
}
/* Ensure each block title has breathing room (>= 1.8cm) */
.section-title,
.wb-title,
.title,
.pc-title {
  margin-bottom: 1.8cm !important;
}

.opinions{
  position:relative;
  padding:28px 0;
  /* subtle animated background */
  background: linear-gradient(120deg, rgba(200,150,60,0.03), rgba(11,58,47,0.03));
  overflow:hidden;
}
.opinions:before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(270deg, rgba(200,150,60,0.06), rgba(11,58,47,0.02) 50%, rgba(200,150,60,0.04));
  mix-blend-mode: overlay;
  animation: bg-pan 12s linear infinite;
  pointer-events:none;
}
@keyframes bg-pan{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.opinions-slider{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
}
.slides{
  position:relative;
  width:100%;
  overflow:hidden;
  min-height:180px;
}
.slide{
  position:absolute;
  left:0;top:0;width:100%;
  transition:opacity 560ms cubic-bezier(.2,.9,.3,1), transform 560ms cubic-bezier(.2,.9,.3,1);
  opacity:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  pointer-events:none;
}
.slide.active{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
.slide .slide-card{ /* ensure content visible on small screens */
  overflow: visible;
}

/* Mobile: make slides flow vertically so text wraps and is fully visible */
@media (max-width:880px){
  /* make slides a horizontal slider on mobile */
  .slides{
    min-height: auto;
    overflow-x: hidden !important;
    display:flex;
    gap:12px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scroll-behavior: smooth;
  }
  .opinions{ overflow: hidden !important }
  .slide{
    position:relative;
    pointer-events:auto;
    opacity:1;
    transform:none;
    display:block;
    padding:10px 6px;
    flex:0 0 100%;
    scroll-snap-align:center;
  }
  /* Stack card vertically on narrow screens so text is always visible */
  .slide-card{ flex-direction:column; align-items:flex-start; gap:12px; background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.92)); padding:12px; width:calc(100% - 24px); margin:0 auto; }
  .avatar{ width:84px; height:84px; border-radius:10px; align-self:center; }
  .slide-content{ gap:8px }
  .quote{ font-size:15px; line-height:1.5; color:var(--green-900) }
  .slides .slide{ position:relative; margin-bottom:12px; }
  .dots{ margin-top:10px; }
}

/* Improve simulator visuals */
.sim-form input[type="number"], .sim-form select, .sim-form input[type="text"]{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(11,58,47,0.06);
  background:#fff;
  font-weight:600;
}
.field.range input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  height:8px;
  background:linear-gradient(90deg,var(--gold), rgba(11,58,47,0.12));
  border-radius:999px;
  outline:none;
}
.field.range input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px;height:22px;border-radius:50%;
  background:var(--gold);box-shadow:0 6px 18px rgba(11,58,47,0.12);
  border:4px solid #fff;
}
.sim-result{ min-width:220px; padding:14px 16px; border-radius:12px; background: linear-gradient(180deg,#ffffff,#fbfbfb); color:var(--green-900); font-weight:800; box-shadow:0 20px 60px rgba(11,58,47,0.06); display:flex; flex-direction:column; gap:6px; align-items:flex-start }
.result-amount{ font-size:20px; color:var(--green-900); font-weight:900; background:linear-gradient(90deg,var(--green-900),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent }
.result-breakdown{ font-size:12px; color:var(--muted); font-weight:600 }
.sim-info .btn.outline{ align-self:flex-start }
.slide-card{
  display:flex;
  gap:18px;
  align-items:flex-start;
  width:100%;
  max-width:980px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.85));
  padding:18px;
  border-radius:14px;
  box-shadow: 0 20px 60px rgba(11,58,47,0.08);
  border:1px solid rgba(11,58,47,0.04);
  backdrop-filter: blur(6px) saturate(120%);
}
.avatar{ width:92px; height:92px; border-radius:12px; object-fit:cover; box-shadow: 0 8px 30px rgba(11,58,47,0.06); flex:0 0 92px; }
.slide-content{ display:flex; flex-direction:column; gap:8px; color:var(--green-900) }
.slide-content .stars{ color:var(--gold); font-weight:800; letter-spacing:1px; font-size:14px }
.quote{ font-style:italic; color:var(--green-900); font-size:16px; line-height:1.4; margin:6px 0; }
.author{ font-size:14px; color:var(--muted); margin-top:4px }
.author .role{ color:var(--muted); font-weight:600; margin-left:6px }
.slide[style*="opacity: 1"]{ position:relative; }
.slider-btn{
  background:rgba(255,255,255,0.95);
  border:1px solid rgba(11,58,47,0.06);
  width:44px;height:44px;border-radius:8px;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 6px 18px rgba(11,58,47,0.06);
}
.dots{ display:flex; gap:8px; justify-content:center; margin-top:12px; }
.dot{ width:10px;height:10px;border-radius:50%;background:#e6e6e6;border:none; cursor:pointer }
.dot.active{ background:var(--green-900) }

.simulator{
  padding:28px 0;
  /* Darker hero-like background for simulator area */
  background: linear-gradient(180deg, rgba(11,58,47,0.98), rgba(6,40,33,0.98));
  color:#fff;
  position:relative;
}
.simulator-inner{
  display:grid;
  grid-template-columns: 1fr 480px;
  gap:28px;
  align-items:center;
  max-width:1100px;
  margin:0 auto;
}
.sim-form{
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
  color:var(--green-900);
}
.sim-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.sim-example{
  background: rgba(255,255,255,0.95);
  padding:12px;
  border-radius:10px;
  box-shadow:0 12px 30px rgba(11,58,47,0.04);
  color:var(--green-900);
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:320px;
}
.sim-example .example-title{ font-weight:800; color:var(--green-900) }
.sim-example .example-row{ font-size:14px; color:var(--muted) }
.sim-example .example-result{ font-weight:900; color:var(--gold); margin-top:6px; }
.sim-form, .sim-panel{ position: relative; z-index: 2; }
.sim-form .icon{ display:none !important; } /* hide small icon box as requested */
.sim-example-right{
  align-self:flex-end;
  background: rgba(255,255,255,0.95);
  padding:10px;
  border-radius:10px;
  box-shadow:0 10px 28px rgba(11,58,47,0.04);
  color:var(--green-900);
  max-width:320px;
  margin-top:8px;
  text-align:left;
  /* allow expanding to full column width when requested */
  width:100%;
  box-sizing:border-box;
}
.sim-example-right .example-text-small{ font-size:13px; color:var(--muted); margin-bottom:6px }
.sim-example-right .example-row{ font-size:14px; font-weight:600 }
.sim-example-right .example-result-small{ font-weight:900; color:var(--gold); margin-top:6px }
.btn.gold{
  background: linear-gradient(90deg,var(--gold), #d6a84b);
  color:#072a1f;
  border:none;
  padding:12px 20px;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
}
.btn.gold:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(11,58,47,0.12) }
.btn.gold:active{ transform:translateY(0) }
.result-box{ background: linear-gradient(180deg, var(--green-900), #0a3629); color:#fff; padding:18px; border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,0.35); }
.result-amount{ font-size:28px; font-weight:900; color:var(--gold); }

/* subtle animated diagonal lines background inside simulator */
.simulator:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* stronger diagonal lines (gold tint) */
  background-image: repeating-linear-gradient(135deg, rgba(220,170,70,0.12) 0 2px, transparent 2px 10px);
  mix-blend-mode: screen;
  animation: move-lines 30s linear infinite;
  z-index:0;
  opacity:1;
}
/* warm golden shimmer layers */
.simulator:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 20%, rgba(230,175,80,0.28), transparent 12%),
    radial-gradient(circle at 80% 60%, rgba(220,160,70,0.20), transparent 14%),
    radial-gradient(circle at 50% 85%, rgba(200,140,60,0.14), transparent 18%);
  mix-blend-mode: screen;
  opacity:1;
  z-index:1;
  transform: translateZ(0);
  filter: blur(10px);
  animation: shimmer 18s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ transform: translateX(-10%) translateY(0) }
  50%{ transform: translateX(10%) translateY(-4%) }
  100%{ transform: translateX(-10%) translateY(0) }
}
@keyframes move-lines{
  from{ background-position:0 0 }
  to{ background-position:1000px 1000px }
}
.result-box{
  background: linear-gradient(180deg, var(--green-900), #0a3629);
  color:#fff;
  padding:22px;
  border-radius:12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.result-label{ font-size:14px; opacity:0.9 }
.result-amount{ font-size:34px; font-weight:900; color:var(--gold); }
.result-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.grid-item{
  background: rgba(255,255,255,0.95);
  color:var(--green-900);
  padding:12px;
  border-radius:10px;
  box-shadow:0 12px 30px rgba(11,58,47,0.06);
}
.grid-label{ font-size:12px; color:var(--muted); margin-bottom:6px }
.sim-panel .btn.primary{ margin-left:auto }
.sim-form{
  background: rgba(255,255,255,0.9);
  padding:18px;
  border-radius:14px;
  box-shadow:0 14px 40px rgba(11,58,47,0.04);
  border:1px solid rgba(11,58,47,0.03);
}
.sim-form .heading{
  display:flex;align-items:center;gap:12px;margin-bottom:12px;
}
.sim-form .heading .icon{
  width:44px;height:44px;border-radius:10px;background:linear-gradient(180deg,var(--gold),rgba(200,150,60,0.85));display:grid;place-items:center;color:#fff;font-weight:800;
}
.sim-form .muted-small{ color:var(--muted); font-size:13px; margin-bottom:8px }
.sim-form label{ display:block; font-weight:700; margin:8px 0 6px; color:var(--green-900) }
.field.range{ display:flex; gap:12px; align-items:center }
.field.range input[type="range"]{ flex:1 }
.field.range input[type="number"]{ width:120px; padding:8px;border-radius:8px;border:1px solid rgba(11,58,47,0.06) }
.sim-actions{ display:flex; gap:16px; align-items:center; margin-top:12px; flex-wrap:wrap }
.sim-info{ padding:12px 18px; border-radius:12px; display:flex; flex-direction:column; gap:12px; justify-content:center }
.sim-info .muted{ color:var(--muted); font-size:14px }
.sim-info{ padding:12px 18px; border-radius:12px; display:flex; flex-direction:column; gap:12px; justify-content:center }
.sim-info .muted{ color:var(--muted); font-size:14px }

/* Responsive tweaks */
@media (max-width:880px){
  .container{ max-width:calc(100% - 48px) }
  /* container sizing restored to original for mobile */
  .opinions-slider{ flex-direction:column; align-items:stretch }
  .slider-btn{ position:relative; margin:0 auto }
  .slides{ min-height:160px }
  .slide img{ max-height:220px }
  .simulator-inner{ grid-template-columns: 1fr; }
  .sim-info{ order:2 }
  .sim-form{ order:1 }
  /* make representative example occupy full width of its column */
  .sim-example-right{
    max-width:100% !important;
    width:100% !important;
    align-self:stretch !important;
  }
  /* representative example spacing restored to default on mobile */
  /* Pull opinions closer to the hero (stronger) */
  /* Pull opinions further up on mobile (additional ~8cm as requested) */
  /* Reset opinions spacing to sit directly after the hero (no large overlap) */
  .opinions{ margin-top: 8px !important; padding-top: 4px !important; z-index:100; }
  /* Move the three stat cards 2cm down on mobile as previously requested */
  .stats{ margin-top: calc(12px + 2cm) !important; }
  /* Lower the section heading slightly on mobile */
  .section-title{ margin-top: 4cm !important; }
}

/* Mobile - tighter layout for small screens (up to 768px) */
@media (max-width:768px){
  .hero{
    /* reduce overall hero block by ~6cm while keeping background cover */
    /* reduce base hero then subtract extra 6cm to shorten further */
    min-height: calc(min(65vh, 520px) - 6cm) !important;
    height: auto !important;
    overflow: hidden !important;
    /* keep the focal/top area visible */
    background-position: center top !important;
    background-size: cover !important;
    padding-top: 12px !important;
    padding-bottom: 8px !important;
  }

  /* Ensure inner container doesn't add extra vertical space */
  .hero-inner{
    padding-top: 10px !important;
    padding-bottom: 6px !important;
  }

  /* Scale the SVG mask/shape proportionally so diagonal remains correct */
  .mask-svg{ max-height: 46vh; width:100%; display:block; }

  /* Make sure the small hero decorative img doesn't reserve space */
  .hero-image, .image-wrap{ display:none !important; height:auto !important; }

  /* Keep the CTA visible but prevent overlap with stats */
  .hero-ctas{ margin-top: 8px !important; z-index:30; position:relative; }

  /* Ensure stat cards are visible and not cut */
  .stats{ margin-top: 10px !important; z-index:20; position:relative; }
  .stat{ margin-bottom:8px }

  /* Reduce section gaps so blocks sit within 2cm */
  section, .opinions, .simulator { margin-top: 0.6cm !important; margin-bottom: 1.2cm !important; }

  /* Make opinions sit just under hero */
  .opinions{ margin-top: 6px !important; padding-top: 6px !important; z-index:10 }
}

/* Global mobile spacing cap: ensure no more than 2cm between vertical blocks */
@media (max-width:880px){
  /* Reset excessive margins and enforce a max gap between sections */
  section, .opinions, .simulator, .hero, .footer, .container {
    margin-top: 0 !important;
    margin-bottom: clamp(0.4cm, 3vw, 2cm) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* If a specific block needs slight breathing room, keep it small */
  .section-title { margin-top: 0.6cm !important; margin-bottom: 0.3cm !important; }
}

/* Ensure simulator stacks form above panel on small screens */
@media (max-width:880px){
  .simulator-inner{ display:flex; flex-direction:column; gap:14px; align-items:stretch; }
  .sim-form{ order:1; width:100% !important; }
  .sim-panel{ order:2; width:100% !important; }
  .result-box{ margin-bottom:6px; }
}

/* FINAL MOBILE FIXES: force compact, remove big gaps (applies only on mobile) */
@media (max-width:880px){
  .hero{
    min-height: 50vh !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 0.4cm !important;
  }
  .hero-inner{ padding-bottom: 0 !important; }
  .hero-ctas{ margin-top: 0.6cm !important; }
  .stats{ margin-top: 8px !important; }
  .opinions{ margin-top: 0.5cm !important; padding-top: 0 !important; z-index: 5; }
  .simulator{ margin-top: 0.6cm !important; }
}

/* Strict mobile cleanup for gap issues (applies only up to 768px) */
@media (max-width:768px){
  /* Set concrete hero height (viewport minus ~220px) and hide overflow */
  .hero{
    /* Increase the current mobile hero block height by 30% (2 * 1.3 = 2.6x baseline) */
    min-height: calc((100vh - 220px) * 2.6 - 3.5cm) !important;
    height: calc((100vh - 220px) * 2.6 - 3.5cm) !important;
    overflow: hidden !important;
    padding-top: 8px !important;
    padding-bottom: 0 !important;
    /* Lower the background image by 3cm on mobile */
    background-position: center calc(50% + 3cm) !important;
    background-size: cover !important;
  }
  /* Ensure inner container doesn't add extra space */
  .hero-inner{ padding-bottom: 0 !important; margin-bottom: 0 !important; }
  /* Prevent CTAs shifting content */
  .hero-ctas{ margin-top: 6px !important; transform:none !important; position:relative !important; }
  /* Keep stats just below CTAs and visible */
  .stats{ margin-top: 8px !important; position:relative !important; z-index:10 !important; }
  /* Pull opinions close but not overlapping */
  .opinions{ margin-top: 6px !important; padding-top: 4px !important; z-index:8 !important; }
  /* Remove any negative margins left over */
  [style*="margin-top: -"]{ margin-top: 0 !important; }
  /* Disable transforms that may push content */
  .hero *{ transform:none !important; }
  /* Lower hero CTA and the three stat cards by 1cm on mobile (raised 1cm from previous) */
  .hero-ctas{ margin-top: calc(6px + 1cm) !important; }
  .hero-ctas .btn.primary{ transform: translateY(1cm) scale(1.05) !important; }
  .stats{ margin-top: calc(8px + 1cm) !important; position:relative !important; z-index:12 !important; }
}

/* (Removed global mobile-side-margin enforcement as requested) */

/* Hide the floating card and hero footer as requested */
.floating-card,
.hero-footer {
  display: none !important;
}

/* ===== Requisitos, Beneficios, Pasos ===== */
.requisitos{ padding:28px 0; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(11,58,47,0.01)); }
.req-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; align-items:start; max-width:1100px;margin:0 auto; }
.req-card{ background:rgba(255,255,255,0.95); padding:0; border-radius:12px; box-shadow:0 12px 40px rgba(11,58,47,0.04); border:1px solid rgba(11,58,47,0.03); display:flex; flex-direction:column; gap:0; align-items:stretch; overflow:hidden; }
.req-illus{ width:100%; height:calc(160px + 2cm); object-fit:cover; display:block; }
.req-card .content{ padding:16px; display:flex; flex-direction:column; gap:8px; align-items:flex-start }
.req-card h3{ margin:0; color:var(--green-900) }
.req-card ul{ margin:6px 0 0 18px; color:var(--muted) }

.beneficios{ padding:36px 0; background:linear-gradient(180deg, rgba(250,249,247,0.02), rgba(11,58,47,0.01)); }
.benefits-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; max-width:1100px;margin:0 auto; }
.benefit-card{ background:linear-gradient(180deg, rgba(255,255,255,0.95), #fff); padding:18px;border-radius:12px;text-align:center; box-shadow:0 10px 30px rgba(11,58,47,0.04); transition:transform 260ms, box-shadow 260ms; }
.benefit-card .icon{ font-size:28px; display:block; margin-bottom:10px; }
.benefit-card h4{ margin:6px 0; color:var(--green-900) }
.benefit-card p{ color:var(--muted); font-size:14px }
.benefit-card:hover{ transform: translateY(-8px); box-shadow:0 20px 60px rgba(11,58,47,0.08) }

.steps{ padding:36px 0; }
.steps-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; max-width:1100px;margin:0 auto; align-items:start }
.step{ background:linear-gradient(180deg, rgba(255,255,255,0.95), #fff); padding:18px;border-radius:12px; box-shadow:0 10px 30px rgba(11,58,47,0.04); text-align:center; transition:transform 260ms }
.step-num{ width:48px;height:48px;border-radius:10px;background:var(--gold); color:#072a1f; display:inline-grid; place-items:center; font-weight:800; margin:0 auto 10px; }
.step h4{ margin:6px 0; color:var(--green-900) }
.step p{ color:var(--muted); font-size:14px }
.step:hover{ transform:translateY(-6px) }

/* Responsive */
@media (max-width:900px){
  .req-grid{ grid-template-columns:1fr; }
  .benefits-grid{ grid-template-columns: repeat(2,1fr); }
  .steps-row{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width:480px){
  .benefits-grid{ grid-template-columns:1fr; }
  .steps-row{ grid-template-columns:1fr; }
}

/* Bottom tab (small strip under footer) */
.bottom-tab{
  width:100%;
  background: rgba(255,255,255,0.98);
  color:var(--green-900);
  text-align:center;
  padding:8px 12px;
  font-size:13px;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.06);
  border-top: 1px solid rgba(11,58,47,0.04);
}

/* Floating WhatsApp button */
.wa-float{
  position:fixed !important;
  right:16px !important;
  bottom:18px !important;
  width:108px !important; /* ~67% larger than 64px */
  height:108px !important;
  border-radius:50%;
  background: linear-gradient(180deg,#25D366,#128C7E);
  display:grid;
  place-items:center;
  z-index:9999 !important;
  box-shadow:0 12px 36px rgba(18,140,126,0.18);
  cursor:pointer;
  animation:wa-vibrate 1.6s infinite;
  /* use provided boton.png as background for the floating button (keeps layout stable) */
  background-image: url('../assets/images/boton.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 78% !important;
}
.wa-float img{ display:none !important; } /* hide inline img; use background image instead */
@keyframes wa-vibrate{
  0%{ transform:translateY(0) rotate(0) }
  25%{ transform:translateY(-4px) rotate(-6deg) }
  50%{ transform:translateY(0) rotate(0) }
  75%{ transform:translateY(-2px) rotate(4deg) }
  100%{ transform:translateY(0) rotate(0) }
}

/* Chatbot modal (hidden by default) */
.wa-modal{
  position:fixed !important;
  right:12px !important;
  bottom:86px !important;
  width:360px;
  max-width:92vw;
  background:#fff;
  border-radius:12px;
  box-shadow:0 30px 80px rgba(0,0,0,0.2);
  z-index:9999 !important;
  overflow:hidden;
  display:none;
  flex-direction:column;
}
.wa-modal.open{ display:flex; }
.wa-modal .wa-header{ background:linear-gradient(90deg,var(--green-900),#0a5a43); color:#fff; padding:12px 14px; display:flex;align-items:center;gap:10px; }
.wa-modal .wa-body{ padding:12px 14px; color:var(--green-900); font-size:14px; line-height:1.4; }
.wa-modal .wa-actions{ padding:12px; display:flex; gap:8px; justify-content:flex-end; }
.wa-modal .btn{ margin:0 }

/* Desktop / Mobile stability rules */
@media (max-width:880px){
  html, body{
    overflow-x:hidden !important;
    max-width:100% !important;
    width:100% !important;
    touch-action:pan-y;
  }
  /* Nav + dropdown share one fixed box so nothing shifts on open */
  .nav{
    top:12px !important;
    left:12px !important;
    right:12px !important;
    width:auto !important;
    margin:0 !important;
    transform:none !important;
  }
  .nav-inner{
    width:100%;
    box-sizing:border-box;
  }
  .mobile-menu{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:none !important;
    transform-origin: top center !important;
  }
  /* Keep floating button visible and inside viewport */
  .wa-float{
    right:12px !important;
    left:auto !important;
    bottom:18px !important;
    animation:wa-vibrate-mobile 1.6s infinite !important;
  }
  /* Ensure modal fits within viewport on mobile */
  .wa-modal{
    left:12px !important;
    right:12px !important;
    width:auto !important;
    max-width:none !important;
    bottom:86px !important;
    box-sizing:border-box;
  }
}
@keyframes wa-vibrate-mobile{
  0%, 100%{ transform:translateY(0) }
  25%{ transform:translateY(-4px) }
  75%{ transform:translateY(-2px) }
}

/* Mobile: add 1cm space under the representative example only */
@media (max-width:880px){
  .sim-example-right{
    margin-bottom: 1cm !important;
  }
}

/* Desktop: shift representative example rightwards by 3cm (reduce horizontal width to the right) */
@media (min-width:881px){
  .sim-example-right{
    /* align left with the button above on desktop */
    margin-left: 0 !important;
    width: auto !important;
    max-width: 480px !important; /* match simulator panel width */
    align-self: flex-start !important;
    box-sizing: border-box;
  }
}

/* Continuous subtle bounce on buttons (always active, no hover needed) */
@keyframes btn-bounce-soft {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

.btn:not(.wa-close) {
  animation: btn-bounce-soft 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .btn:not(.wa-close) {
    animation: none;
  }
}

/* Hero primary CTA: faster bounce + golden glow pulse (desktop & mobile) */
@keyframes btn-bounce-hero {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

@keyframes btn-glow-hero {
  0%, 100% {
    box-shadow:
      0 20px 44px rgba(11,58,47,0.22),
      0 0 0 0 rgba(212,165,42,0.2),
      0 0 18px 2px rgba(212,165,42,0.28);
  }
  50% {
    box-shadow:
      0 26px 56px rgba(11,58,47,0.3),
      0 0 0 10px rgba(212,165,42,0.1),
      0 0 36px 10px rgba(212,165,42,0.5);
  }
}

.hero-ctas .btn.primary {
  animation:
    btn-bounce-hero 1.5s ease-in-out infinite,
    btn-glow-hero 2s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .hero-ctas .btn.primary {
    animation: none;
    box-shadow: 0 20px 44px rgba(11,58,47,0.22);
  }
}