/* =============================================================
   ContaRex — estilos del sitio
   Paleta extraída directamente del logo oficial:
   Verde ContaRex #174731 · Gris ContaRex #AFB1B0 · Negro #111111
   ============================================================= */

:root{
  --verde-oscuro:#174731;
  --verde-medio:#2E6B49;
  --verde-claro:#EAF1EC;
  --gris:#AFB1B0;
  --gris-oscuro:#5B5D5C;
  --gris-claro:#F4F4F3;
  --negro:#111111;
  --blanco:#FFFFFF;
  --linea: rgba(255,255,255,0.16);
  --linea-oscura: rgba(17,17,17,0.12);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'IBM Plex Sans', sans-serif;
  background:var(--blanco);
  color:var(--negro);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Space Grotesk', sans-serif; font-weight:700; letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono', monospace;}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
a{color:inherit; text-decoration:none;}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--verde-medio);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--verde-medio);}

/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--linea-oscura);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:80px;}
.logo-img{height:50px; width:auto; display:block; object-fit:contain;}
.navlinks{display:flex; gap:36px; font-size:14.5px; font-weight:500;}
.navlinks a{opacity:0.75; transition:opacity .15s;}
.navlinks a:hover{opacity:1;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; font-size:14.5px; font-weight:600;
  border-radius:2px; cursor:pointer; border:1px solid transparent;
  font-family:'IBM Plex Sans',sans-serif;
}
.btn-primary{background:var(--verde-oscuro); color:var(--blanco);}
.btn-primary:hover{background:var(--verde-medio);}
.btn-outline{border-color:var(--verde-oscuro); color:var(--verde-oscuro);}
.btn-outline-light{border-color:rgba(255,255,255,0.4); color:var(--blanco);}

/* ---------- HERO ---------- */
.hero{background:var(--verde-oscuro); color:var(--blanco); padding:100px 0 80px; position:relative; overflow:hidden;}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.15fr 0.85fr; gap:60px; align-items:center;}
.hero .eyebrow{color:var(--gris);}
.hero .eyebrow::before{background:var(--gris);}
.hero h1{font-size:46px; line-height:1.12; margin:20px 0 22px;}
.hero p.lead{font-size:17px; color:rgba(255,255,255,0.82); max-width:480px; margin-bottom:34px;}
.hero .ctas{display:flex; gap:14px; margin-bottom:38px;}
.trust-line{
  display:flex; align-items:center; gap:12px;
  font-family:'IBM Plex Mono',monospace; font-size:13px; color:rgba(255,255,255,0.7);
  border-top:1px solid var(--linea); padding-top:20px; max-width:480px;
}
.trust-line b{color:var(--blanco); font-size:15px;}

.blueprint-card{
  background:rgba(255,255,255,0.06); border:1px solid var(--linea); border-radius:4px; padding:28px;
}
.blueprint-card .stamp{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px;}
.blueprint-card .stamp .label{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; color:rgba(255,255,255,0.55); text-transform:uppercase;}
.blueprint-card .doc-title{font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700; margin-top:4px;}
.stat-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; padding-bottom:20px; border-bottom:1px dashed var(--linea);}
.stat-num{font-family:'Space Grotesk',sans-serif; font-size:30px; font-weight:700; color:var(--blanco);}
.stat-label{font-size:12px; color:rgba(255,255,255,0.6); margin-top:4px;}
.status-pill{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; padding:4px 10px; border-radius:2px;
  background:rgba(234,241,236,0.16); color:#CFE8DA; border:1px solid rgba(234,241,236,0.35);
}
.row-line{display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-top:1px dashed var(--linea); font-size:13.5px;}
.row-line .k{color:rgba(255,255,255,0.55); font-family:'IBM Plex Mono',monospace; font-size:12px;}
.row-line .v{font-weight:500;}

/* ---------- SECTION SHELL ---------- */
section{padding:88px 0;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head h2{font-size:32px; margin-top:16px; color:var(--verde-oscuro);}
.section-head p{color:var(--gris-oscuro); font-size:16px; margin-top:14px;}

/* ---------- ESPECIALIZACION ---------- */
.niches{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.niche-card{background:var(--blanco); border:1px solid var(--linea-oscura); border-radius:4px; padding:32px;}
.niche-card .tag{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--verde-medio); letter-spacing:0.08em; text-transform:uppercase;}
.niche-card h3{font-size:22px; margin:12px 0 14px; color:var(--verde-oscuro);}
.niche-card p{color:var(--gris-oscuro); font-size:15px; margin-bottom:18px;}
.niche-card ul{list-style:none; font-size:14px; color:var(--negro);}
.niche-card li{padding:7px 0; border-top:1px solid var(--linea-oscura); display:flex; gap:10px;}
.niche-card li::before{content:'—'; color:var(--verde-medio); flex-shrink:0;}
.niche-note{margin-top:26px; font-size:14px; color:var(--gris-oscuro); font-style:italic;}

/* ---------- PROCESO ---------- */
.proceso{background:var(--gris-claro);}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--linea-oscura); border-bottom:1px solid var(--linea-oscura);}
.step{padding:28px 24px; border-right:1px solid var(--linea-oscura);}
.step:last-child{border-right:none;}
.step .num{font-family:'IBM Plex Mono',monospace; color:var(--verde-medio); font-size:13px;}
.step h4{font-family:'Space Grotesk',sans-serif; font-size:16px; margin:14px 0 8px; font-weight:700; color:var(--verde-oscuro);}
.step p{font-size:13.5px; color:var(--gris-oscuro);}

/* ---------- CALENDARIO (signature) ---------- */
.calendario{background:var(--verde-oscuro); color:var(--blanco);}
.calendario .section-head h2{color:var(--blanco);}
.calendario .eyebrow{color:var(--gris);}
.calendario .eyebrow::before{background:var(--gris);}
.calendario .section-head p{color:rgba(255,255,255,0.68);}
.cal-strip{position:relative; padding-top:112px; padding-bottom:4px; margin-top:10px;}
.cal-line{position:absolute; left:0; right:0; top:112px; height:1px; background:rgba(255,255,255,0.3);}
.cal-line::before, .cal-line::after{content:''; position:absolute; top:-4px; width:1px; height:9px; background:rgba(255,255,255,0.5);}
.cal-line::before{left:0;} .cal-line::after{right:0;}
.tick{position:absolute; top:0; left:0; transform:translateX(-50%); width:140px; height:112px; display:flex; flex-direction:column; align-items:center; text-align:center;}
.tick-label{min-height:38px;}
.tick-connector{width:1px; flex:1; background:rgba(255,255,255,0.35); margin-top:4px;}
.tick .dot{width:9px; height:9px; border-radius:50%; background:var(--gris); margin-top:-4.5px; flex-shrink:0;}
.tick .day{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gris);}
.tick .what{font-size:13.5px; font-weight:500; margin-top:4px;}
.cal-caption{text-align:center; margin-top:22px; font-size:14px; color:rgba(255,255,255,0.6); font-style:italic;}

/* ---------- PLANES ---------- */
.planes-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.plan{background:var(--blanco); border:1px solid var(--linea-oscura); border-radius:4px; padding:30px; display:flex; flex-direction:column;}
.plan.feat{border:2px solid var(--verde-oscuro);}
.plan .badge{font-family:'IBM Plex Mono',monospace; font-size:11px; background:var(--verde-oscuro); color:var(--blanco); padding:4px 10px; border-radius:2px; display:inline-block; margin-bottom:14px; width:fit-content;}
.plan h3{font-size:19px; margin-bottom:6px; color:var(--verde-oscuro);}
.plan .price{font-family:'IBM Plex Mono',monospace; font-size:28px; margin:14px 0 4px; color:var(--negro);}
.plan .price .from{font-family:'IBM Plex Sans',sans-serif; font-size:13px; font-weight:500; color:var(--gris-oscuro); margin-right:6px; vertical-align:2px;}
.plan .per{font-size:12.5px; color:var(--gris-oscuro); margin-bottom:10px;}
.plan .plan-note{font-size:12.5px; color:var(--gris-oscuro); font-style:italic; margin-bottom:18px; line-height:1.5;}
.plan ul{list-style:none; font-size:14px; flex:1;}
.plan li{padding:8px 0; border-top:1px solid var(--linea-oscura); display:flex; gap:10px; color:var(--negro);}
.plan li::before{content:'✓'; color:var(--verde-medio); font-weight:700; flex-shrink:0;}
.plan .btn{margin-top:22px; justify-content:center;}
.planes-note{margin-top:24px; font-size:13.5px; color:var(--gris-oscuro); background:var(--gris-claro); border-left:3px solid var(--verde-oscuro); padding:14px 18px;}

/* ---------- TESTIMONIOS ---------- */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.testi{background:var(--gris-claro); border:1px dashed var(--linea-oscura); border-radius:4px; padding:26px; font-size:14px; color:var(--gris-oscuro);}
.testi .who{margin-top:16px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--verde-oscuro);}

/* ---------- CONTACTO ---------- */
.contacto{background:var(--verde-oscuro); color:var(--blanco);}
.contacto .grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
.contacto h2{color:var(--blanco); font-size:30px; margin-bottom:14px;}
.contacto p.lead{color:rgba(255,255,255,0.72); font-size:15.5px; margin-bottom:28px; max-width:420px;}
.contact-info{display:flex; flex-direction:column; gap:16px; margin-top:8px;}
.contact-info .item{font-size:14.5px; display:flex; gap:12px; color:rgba(255,255,255,0.9);}
.contact-info .k{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:rgba(255,255,255,0.5); text-transform:uppercase; width:90px; flex-shrink:0; padding-top:2px;}
form{display:flex; flex-direction:column; gap:14px;}
form input, form textarea{
  background:rgba(255,255,255,0.08); border:1px solid var(--linea); color:var(--blanco);
  padding:13px 14px; font-size:14px; font-family:'IBM Plex Sans',sans-serif; border-radius:2px;
}
form input::placeholder, form textarea::placeholder{color:rgba(255,255,255,0.45);}
form textarea{resize:vertical; min-height:90px;}
form .btn-primary{margin-top:6px;}
.form-msg{padding:12px 14px; border-radius:2px; font-size:13.5px; margin-bottom:6px;}
.form-msg.ok{background:rgba(234,241,236,0.16); border:1px solid rgba(234,241,236,0.4); color:#CFE8DA;}
.form-msg.error{background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.3); color:#F3D9D9;}

footer{background:#0F3324; padding:26px 0; border-top:1px solid var(--linea);}
footer .wrap{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:rgba(255,255,255,0.55);}

@media(max-width:860px){
  .hero .wrap{grid-template-columns:1fr;}
  .hero h1{font-size:34px;}
  .niches, .planes-grid, .testi-grid, .contacto .grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .step{border-bottom:1px solid var(--linea-oscura);}
  .navlinks{display:none;}
  .cal-strip{padding-top:10px;}
  .tick{position:static; transform:none; width:auto; height:auto; flex-direction:row; align-items:center; gap:12px; margin-bottom:16px; text-align:left;}
  .tick-label{min-height:0;}
  .tick-connector{display:none;}
  .tick .dot{margin-top:0;}
  .cal-line{display:none;}
  footer .wrap{flex-direction:column; gap:6px; text-align:center;}
}