/* =========================================================
   ERICK BADA · Sistema visual compartido del sitio
   Ordenar · Proteger · Crecer
   Layout: franjas de ancho completo alternando navy / crema,
   contenido en una columna de 1120px; nav fijo con las 3 áreas
   siempre visibles (también en móvil).
   ========================================================= */
:root{
  color-scheme: light;
  --navy:#1F2839;
  --navy-2:#263144;
  --navy-3:#171E2B;
  --navy-4:#111620;
  --gold:#B69D74;
  --gold-lt:#D1B58C;
  --gold-dk:#897657;
  --cream:#F4F5EF;
  --cream-2:#F8F9F5;
  --white:#FFFFFF;
  --ink:#1F2839;
  --text:#4A5164;
  --muted:#5A6072;
  --soft:#6B7182;
  --on-dark:#C7CCD6;
  --on-dark-2:#9BA3B2;
  --line: rgba(31,40,57,0.12);
  --line-dark: rgba(244,245,239,0.14);
  --font-display:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --wa-h: 0px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;} *{transition:none !important; animation:none !important;}}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream-2);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--wa-h);
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--navy); line-height:1.18; text-wrap:balance;}
a{color:inherit;}
img{display:block; max-width:100%; height:auto;}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.wrap{max-width:1120px; margin:0 auto; padding-inline:28px;}
@media(max-width:460px){.wrap{padding-inline:18px;}}
.label{
  font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gold-dk); font-weight:700;
}
.label.on-dark{color:var(--gold-lt);}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* ---------- NAV DEL SITIO ---------- */
header.site{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:50;
  background:rgba(31,40,57,0.97);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-dark);
}
.nav-main{display:flex; align-items:center; justify-content:space-between; height:74px; gap:18px;}
.brand{display:flex; align-items:center; text-decoration:none; flex:none;}
.brand img{height:30px; width:auto;}
.site-links{display:flex; align-items:center; gap:4px;}
.site-links a{
  color:#EDEEE9; font-size:14.5px; text-decoration:none; opacity:.82;
  padding:8px 14px; position:relative; transition:opacity .15s;
  font-family:var(--font-display); font-weight:600; letter-spacing:.02em;
}
.site-links a:hover{opacity:1;}
.site-links a[aria-current="page"]{opacity:1; color:var(--gold-lt);}
.site-links a[aria-current="page"]::after{
  content:""; position:absolute; left:14px; right:14px; bottom:0; height:2px; background:var(--gold);
}
.nav-desktop{display:none;}
@media(min-width:900px){.nav-desktop{display:flex;}}
.nav-mobile{display:flex; justify-content:space-between; border-top:1px solid var(--line-dark); height:44px;}
.nav-mobile a{flex:1; text-align:center; padding:11px 2px; font-size:13.5px;}
.nav-mobile a[aria-current="page"]::after{left:22%; right:22%;}
@media(min-width:900px){.nav-mobile{display:none;}}
@media(max-width:460px){
  .nav-main{height:60px;}
  .brand img{height:22px;}
}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:3px; font-size:14.5px; font-weight:500;
  text-decoration:none; white-space:nowrap; cursor:pointer; border:1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  font-family:var(--font-body);
}
.btn:hover{transform:translateY(-1px);}
.btn-gold{background:var(--gold); color:var(--navy-4); font-weight:700;}
.btn-gold:hover{background:var(--gold-lt);}
.btn-outline-dark{border-color:rgba(255,255,255,0.35); color:#fff;}
.btn-outline-dark:hover{border-color:#fff;}
.btn-outline-navy{border-color:var(--navy); color:var(--navy);}
.btn-outline-navy:hover{background:var(--navy); color:#fff;}
.btn-sm{padding:10px 18px; font-size:13.5px;}
.nav-cta{padding:10px 18px; font-size:13.5px;}
@media(max-width:460px){.nav-cta{padding:9px 13px; font-size:12.5px;}}
.btn svg{width:17px; height:17px; flex:none;}
.cta-row{display:flex; flex-wrap:wrap; gap:14px;}
@media(max-width:460px){.cta-row .btn{flex:1 1 100%;}}

/* ---------- HERO BASE ---------- */
.hero{
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-3) 100%);
  color:#fff; padding:96px 0 88px; position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; right:-120px; top:-160px; width:520px; height:520px;
  border:1px solid rgba(182,157,116,0.16); border-radius:50%; pointer-events:none;
}
.hero::before{
  content:""; position:absolute; right:-40px; top:60px; width:340px; height:340px;
  border:1px solid rgba(182,157,116,0.14); border-radius:50%; pointer-events:none;
}
.hero-inner{max-width:740px; position:relative; z-index:2;}
.hero h1{font-size:44px; font-weight:800; letter-spacing:-0.01em; margin-bottom:24px; color:#fff;}
.hero h1 em{font-style:normal; color:var(--gold-lt);}
.hero p{font-size:17.5px; color:var(--on-dark); max-width:600px; margin-bottom:16px;}
.hero p.strong{color:#EDEEE9; font-weight:500; margin-top:14px; margin-bottom:34px;}
@media(max-width:640px){.hero h1{font-size:30px;} .hero{padding:52px 0 52px;} .hero p{font-size:16.5px;}}

/* Marcador de área (01 · Ordenar, etc.) */
.area-mark{
  display:inline-flex; align-items:center; gap:12px; margin-bottom:22px;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-lt); font-weight:700;
}
.area-mark .n{
  font-family:var(--font-display); font-size:13px; letter-spacing:.04em;
  border:1px solid var(--gold); color:var(--gold-lt); padding:3px 8px; border-radius:2px;
}
.area-mark .sep{width:28px; height:1px; background:var(--gold);}

/* ---------- SECCIONES ---------- */
section{padding:92px 0;}
@media(max-width:640px){section{padding:60px 0;}}
.section-head{max-width:660px; margin-bottom:44px;}
.section-head h2{font-size:32px; font-weight:700; margin-top:10px;}
@media(max-width:640px){.section-head h2{font-size:25px;} .section-head{margin-bottom:32px;}}
.section-head p{color:var(--muted); font-size:16px; margin-top:14px;}
.dark{background:var(--navy); color:#fff;}
.dark h2, .dark h3, .dark h4{color:#fff;}
.dark .section-head p{color:var(--on-dark);}

/* Preguntas (patrón compartido con Ordenar) */
.q-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); margin-bottom:36px;}
@media(max-width:760px){.q-grid{grid-template-columns:1fr;}}
.q-card{background:var(--navy); padding:32px 34px;}
@media(max-width:460px){.q-card{padding:26px 22px;}}
.q-card h4{color:#fff; font-family:var(--font-body); font-weight:700; font-size:17px; margin-bottom:10px;}
.q-card p{color:var(--on-dark-2); font-size:14.5px;}
.q-note{background:var(--navy-2); border:1px solid rgba(182,157,116,0.35); padding:28px 32px; border-radius:2px;}
@media(max-width:460px){.q-note{padding:22px;}}
.q-note p{color:#D9DCE3; font-size:16px;}
.q-note strong{color:var(--gold-lt);}

/* Pasos del proceso */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; counter-reset:step;}
.steps.three{grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.steps, .steps.three{grid-template-columns:1fr; gap:22px;}}
.step .fnum{
  width:34px; height:34px; border:1px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--gold-dk); font-size:14px; font-weight:700; margin-bottom:14px;
}
.dark .step .fnum{color:var(--gold-lt);}
.step h4{font-family:var(--font-body); font-size:16px; font-weight:700; margin-bottom:8px;}
.step p{color:var(--muted); font-size:14.5px;}
.dark .step p{color:var(--on-dark-2);}

/* Selector de situación → WhatsApp */
.situations{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
@media(max-width:640px){.situations{grid-template-columns:1fr;}}
.situation{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--white); border:1px solid var(--line); padding:18px 20px;
  text-decoration:none; color:var(--navy); font-weight:500; font-size:15.5px;
  transition:border-color .15s, transform .15s;
}
.situation:hover{border-color:var(--gold); transform:translateY(-1px);}
.situation .arr{color:var(--gold-dk); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; display:flex; align-items:center; gap:6px;}
.situation .arr svg{width:16px; height:16px;}
.dark .situation{background:var(--navy-2); border-color:var(--line-dark); color:#fff;}
.dark .situation:hover{border-color:var(--gold);}
.dark .situation .arr{color:var(--gold-lt);}

/* ---------- PUENTE ENTRE ÁREAS ---------- */
.bridge{background:var(--cream);}
.bridge-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); background:var(--white);}
@media(max-width:820px){.bridge-grid{grid-template-columns:1fr;}}
.bridge-item{padding:30px 28px; border-left:1px solid var(--line); text-decoration:none; display:flex; flex-direction:column; gap:10px; transition:background .15s; min-width:0;}
.bridge-item:first-child{border-left:none;}
@media(max-width:820px){.bridge-item{border-left:none; border-top:1px solid var(--line);} .bridge-item:first-child{border-top:none;}}
a.bridge-item:hover{background:var(--cream-2);}
.bridge-item .bn{font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--gold-dk); letter-spacing:.1em;}
.bridge-item h3{font-size:22px;}
.bridge-item .bs{font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); font-weight:700;}
.bridge-item p{font-size:14.5px; color:var(--text);}
.bridge-item .go{margin-top:auto; padding-top:8px; font-size:13.5px; font-weight:700; color:var(--navy); display:flex; align-items:center; gap:6px;}
.bridge-item.current{background:var(--navy); }
.bridge-item.current h3{color:#fff;}
.bridge-item.current p{color:var(--on-dark);}
.bridge-item.current .bs{color:var(--on-dark-2);}
.bridge-item.current .bn{color:var(--gold-lt);}
.bridge-item.current .go{color:var(--gold-lt); font-weight:500;}
.bridge-foot{margin-top:24px; font-size:15px; color:var(--muted); max-width:640px;}

/* ---------- CTA FINAL ---------- */
.final-cta{background:var(--cream); text-align:center; padding:96px 0;}
@media(max-width:640px){.final-cta{padding:64px 0;}}
.final-cta h2{font-size:32px; max-width:660px; margin:0 auto 16px;}
@media(max-width:640px){.final-cta h2{font-size:25px;}}
.final-cta p{color:var(--muted); max-width:540px; margin:0 auto 34px; font-size:16.5px;}
.final-cta p.small{font-style:italic; color:var(--gold-dk); font-size:15px; margin-bottom:10px;}
.final-cta .cta-row{justify-content:center;}
.wa-number{display:block; margin-top:18px; font-size:14px; color:var(--soft); user-select:all;}

/* ---------- FOOTER ---------- */
footer.site{background:var(--navy-4); color:#8790A0; padding:64px 0 36px; font-size:14px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr; gap:30px;}}
.foot-brand img{height:26px; width:auto; margin-bottom:16px;}
.foot-brand p{max-width:300px; font-size:14px; line-height:1.7;}
.foot-col h5{font-family:var(--font-display); color:var(--gold-lt); font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px; font-weight:700;}
.foot-col ul{list-style:none; display:grid; gap:8px;}
.foot-col a{color:#B7BDC9; text-decoration:none;}
.foot-col a:hover{color:#fff;}
.foot-col .sub{display:block; font-size:12.5px; color:#6F7787;}
.foot-legal{border-top:1px solid var(--line-dark); margin-top:44px; padding-top:24px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:12.5px; color:#6F7787;}

/* ---------- BARRA WHATSAPP MÓVIL ---------- */
.wa-bar{display:none;}
@media(max-width:760px){
  body{--wa-h:68px;}
  .wa-bar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background:rgba(17,22,32,0.96); backdrop-filter:blur(6px);
    border-top:1px solid var(--line-dark); gap:10px; align-items:center;
  }
  .wa-bar .btn{flex:1; padding:12px 16px;}
  .wa-bar .wa-text{color:var(--on-dark); font-size:12.5px; line-height:1.3; flex:0 1 auto; max-width:120px;}
}
.cta-short{display:none;}
@media(max-width:460px){.cta-long{display:none;} .cta-short{display:inline;}}
@media(max-width:430px){.wa-bar .wa-text{display:none;}}