/* ═══════════════════════════════════════════════════════════════
   Soluciones en Aperturas Aimán — main.css
   ═══════════════════════════════════════════════════════════════ */

:root {
  --navy:   #0A1628;
  --navy2:  #0f1f3d;
  --gold:   #FFD700;
  --gold2:  #FFA500;
  --white:  #FFFFFF;
  --light:  #F4F6FB;
  --gray:   #6B7280;
  --red:    #E53E3E;
}

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--white);
  color: var(--navy);
  overflow-x: hidden;
}

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

a { text-decoration:none; }

/* ── Utilities ────────────────────────────────────────────────── */
.container      { max-width:1100px; margin:0 auto; padding:0 20px; }
.section-pad    { padding:80px 20px; }
.gold-text      { color: var(--gold2); }
.gold           { color: var(--gold); }
.section-title  { font-family:'Bebas Neue',sans-serif; font-size:clamp(2.2rem,5vw,3.2rem); color:var(--navy); text-align:center; margin-bottom:12px; }
.section-sub    { text-align:center; color:var(--gray); font-size:1.05rem; margin-bottom:52px; max-width:560px; margin-left:auto; margin-right:auto; line-height:1.6; }
.section-cta    { text-align:center; margin-top:44px; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn-primary {
  background: var(--gold);
  color: var(--navy);
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  padding: 16px 34px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .2s, background .2s;
  animation: pulse 2.4s infinite;
  cursor: pointer;
  border: none;
}
.btn-primary:hover { background:var(--gold2); transform:scale(1.05); color:var(--navy); }

.btn-primary.btn-xl { font-size:1.4rem; padding:20px 44px; }

.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,.4);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 30px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color .2s, background .2s;
}
.btn-secondary:hover { border-color:var(--gold); background:rgba(255,215,0,.08); color:var(--white); }

.btn-dark {
  background: var(--navy);
  color: var(--gold);
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  padding: 16px 34px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .2s, background .2s;
}
.btn-dark:hover { background:var(--navy2); transform:scale(1.04); color:var(--gold); }

/* ── Pulse animation ──────────────────────────────────────────── */
@keyframes pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(255,215,0,.5); }
  50%      { box-shadow:0 0 0 12px rgba(255,215,0,0); }
}

/* ── Fade animations ──────────────────────────────────────────── */
@keyframes fadeDown { from{opacity:0;transform:translateY(-22px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp   { from{opacity:0;transform:translateY(22px)}  to{opacity:1;transform:translateY(0)} }

/* ── STICKY HEADER ────────────────────────────────────────────── */
.site-header {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  background: var(--navy);
  display: flex; align-items:center; justify-content:space-between;
  padding: 10px 28px;
  box-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.site-logo { display:flex; align-items:center; }

.header-cta {
  background: var(--gold);
  color: var(--navy);
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 1rem;
  padding: 10px 22px;
  border-radius: 50px;
  display: flex; align-items:center; gap:8px;
  transition: transform .2s, background .2s;
  animation: pulse 2.4s infinite;
}
.header-cta:hover { background:var(--gold2); transform:scale(1.05); color:var(--navy); }

/* ── HERO ─────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--navy) 0%, #1a2f5e 60%, #0d2244 100%);
  display: flex; flex-direction:column; align-items:center; justify-content:center;
  text-align: center;
  padding: 120px 20px 60px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content:'';
  position:absolute; inset:0;
  background: url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1600&q=80') center/cover no-repeat;
  opacity:.12;
}
.hero-inner { position:relative; z-index:1; max-width:800px; margin:0 auto; }

.hero-badge {
  background: var(--red);
  color: var(--white);
  font-weight: 900;
  font-size: .82rem;
  padding: 6px 18px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
  display: inline-flex; align-items:center; gap:6px;
  animation: fadeDown .6s ease;
}
.hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 8vw, 6rem);
  color: var(--white);
  line-height: 1;
  margin-bottom: 16px;
  animation: fadeDown .7s ease;
}
.hero-sub {
  font-size: clamp(1rem,2.5vw,1.3rem);
  color: #CBD5E0;
  max-width:620px;
  margin:0 auto 36px;
  line-height:1.7;
  animation: fadeDown .8s ease;
}
.cta-group {
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  animation: fadeDown .9s ease;
}
.hero-stats {
  margin-top:56px;
  display:flex; flex-wrap:wrap; gap:36px; justify-content:center;
  animation: fadeUp 1s ease;
}
.stat { text-align:center; }
.stat-num   { font-family:'Bebas Neue',sans-serif; font-size:2.8rem; color:var(--gold); line-height:1; }
.stat-label { font-size:.82rem; color:#A0AEC0; text-transform:uppercase; letter-spacing:1px; margin-top:4px; }

/* ── URGENCY BAR ──────────────────────────────────────────────── */
.urgency-bar {
  background: var(--red);
  color: var(--white);
  text-align: center;
  padding: 14px 20px;
  font-weight: 800;
  font-size: .98rem;
  letter-spacing: .5px;
  display: flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
}
.urgency-bar a { color:var(--gold); text-decoration:none; font-weight:900; }
.urgency-bar a:hover { text-decoration:underline; }

/* ── SERVICES ─────────────────────────────────────────────────── */
.services { background:var(--light); }
.grid-3   { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }

.card {
  background: var(--white);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 4px 24px rgba(10,22,40,.08);
  transition: transform .25s, box-shadow .25s, border-top-color .25s;
  border-top: 4px solid transparent;
}
.card:hover { transform:translateY(-6px); box-shadow:0 12px 40px rgba(10,22,40,.14); border-top-color:var(--gold); }
.card-icon  { margin-bottom:16px; }
.card h3    { font-size:1.15rem; font-weight:900; margin-bottom:8px; color:var(--navy); }
.card p     { color:var(--gray); line-height:1.6; font-size:.94rem; }

/* ── IMAGE ROW ────────────────────────────────────────────────── */
.img-row-wrap { padding:0 20px 64px; }
.img-row      { display:flex; gap:14px; overflow:hidden; }
.img-row img  { flex:1; height:260px; object-fit:cover; border-radius:14px; min-width:0; }

/* ── WHY US ───────────────────────────────────────────────────── */
.why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }

.why-card {
  background: var(--navy);
  color: var(--white);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
  transition: transform .2s;
}
.why-card:hover { transform:translateY(-4px); }
.why-icon  { margin-bottom:8px; display:flex; justify-content:center; }
.why-num   { font-family:'Bebas Neue',sans-serif; font-size:3rem; color:var(--gold); line-height:1; }
.why-label { font-weight:800; font-size:1rem; margin-top:8px; }
.why-desc  { color:#A0AEC0; font-size:.87rem; margin-top:6px; line-height:1.6; }

/* ── CTA BANNER ───────────────────────────────────────────────── */
.cta-banner {
  background: linear-gradient(135deg, var(--navy) 0%, #1a3a6e 100%);
  padding: 80px 20px;
}
.cta-banner h2 { font-family:'Bebas Neue',sans-serif; font-size:clamp(2rem,5vw,3.4rem); color:var(--white); margin-bottom:12px; }
.cta-banner p  { color:#A0AEC0; font-size:1.05rem; margin-bottom:32px; }

/* ── PROCESS ──────────────────────────────────────────────────── */
.process  { background:var(--light); }
.steps    { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0; }
.step     { flex:1; min-width:180px; max-width:240px; text-align:center; padding:16px; }
.step-arrow { flex:0 0 auto; }
.step-circle {
  width:68px; height:68px;
  background:var(--navy); color:var(--gold);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',sans-serif; font-size:2rem;
  margin:0 auto 14px;
  box-shadow:0 4px 16px rgba(10,22,40,.22);
}
.step h4 { font-weight:900; margin-bottom:6px; font-size:1rem; }
.step p  { color:var(--gray); font-size:.88rem; line-height:1.5; }

/* ── TESTIMONIALS ─────────────────────────────────────────────── */
.reviews-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }

.review-card {
  background: var(--white);
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 4px 20px rgba(10,22,40,.08);
}
.stars       { display:flex; gap:2px; margin-bottom:12px; }
.review-text { color:#374151; font-size:.94rem; line-height:1.7; margin-bottom:18px; font-style:italic; }
.reviewer    { display:flex; align-items:center; gap:12px; }
.avatar      { width:44px; height:44px; border-radius:50%; background:var(--navy); color:var(--gold); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1rem; flex-shrink:0; }
.reviewer-name { font-weight:800; font-size:.94rem; }
.reviewer-loc  { font-size:.8rem; color:var(--gray); }

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq      { background:var(--light); }
.faq-list { max-width:740px; margin:0 auto; }
.faq-item { border-bottom:1px solid #E5E7EB; }

.faq-q {
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:20px 0;
  font-family:'Nunito',sans-serif;
  font-size:1.04rem; font-weight:800; color:var(--navy);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.faq-icon  { flex-shrink:0; transition:transform .3s; }
.faq-a {
  max-height:0; overflow:hidden;
  transition:max-height .35s ease, padding .35s;
  color:var(--gray); line-height:1.7; font-size:.96rem;
}
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-item.open .faq-a   { max-height:200px; padding-bottom:18px; }

/* ── FOOTER ───────────────────────────────────────────────────── */
.site-footer {
  background: var(--navy);
  color: #A0AEC0;
  text-align: center;
  padding: 52px 20px 36px;
}
.footer-logo  { margin-bottom:12px; display:flex; justify-content:center; }
.footer-phone {
  font-family:'Bebas Neue',sans-serif; font-size:2.4rem;
  color:var(--gold); display:inline-flex; align-items:center; gap:10px;
  margin:12px 0 16px; line-height:1;
}
.footer-phone:hover { color:var(--gold2); }
.site-footer p    { font-size:.9rem; line-height:1.9; }
.footer-keywords  { margin-top:8px; }
.footer-copy      { margin-top:24px; font-size:.78rem; opacity:.45; }

/* ── FLOATING CTA ─────────────────────────────────────────────── */
.float-cta {
  position: fixed; bottom:22px; right:22px; z-index:999;
  background: var(--gold);
  color: var(--navy);
  font-family:'Nunito',sans-serif;
  font-weight: 900;
  font-size: 1rem;
  padding: 14px 24px;
  border-radius: 50px;
  box-shadow: 0 6px 28px rgba(255,165,0,.5);
  animation: pulse 2.4s infinite;
  display: flex; align-items:center; gap:8px;
  transition: background .2s, transform .2s;
}
.float-cta:hover { background:var(--gold2); transform:scale(1.05); color:var(--navy); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width:768px) {
  .site-header { padding:10px 16px; }
  .hero h1     { font-size:clamp(2.6rem,9vw,4rem); }
  .step-arrow  { display:none; }
  .img-row     { flex-direction:column; }
  .img-row img { height:200px; width:100%; }
  .hero-stats  { gap:24px; }
}

@media (max-width:480px) {
  .header-cta span { display:none; }
  .btn-primary.btn-xl { font-size:1.1rem; padding:16px 28px; }
}