/* =================================================================
   PSICOMAHUE · Consultora de Psicología Laboral
   Hoja de estilos personalizada (se carga DESPUÉS de Bootstrap)
   ================================================================= */

:root{
  --crema:        #f6f1e7;
  --crema-2:      #efe7d8;
  --salvia:       #7c8a6d;
  --salvia-osc:   #5d6a4f;
  --terracota:    #c47a55;
  --terracota-os: #a85f3c;
  --tinta:        #2f3329;
  --tinta-suave:  #5a5d51;
  --linea:        #d9d0bf;
  --blanco-calido:#fffdf8;
  --chip-oscuro:  #080a06;
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth}
body{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  background:var(--crema);
  color:var(--tinta);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:500;line-height:1.1;letter-spacing:-.01em}
a{text-decoration:none}
.wrap{width:min(1120px,92vw);margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--terracota-os);margin-bottom:18px}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--terracota)}

/* ---------- Logo (placa oscura, fiel al diseño original) ---------- */
.brand-logo{display:inline-block;width:250px;height:70px;border-radius:12px;
  background:transparent url('../assets/logo.png') center/210px auto no-repeat}
.foot-logo{display:inline-block;width:200px;height:60px;border-radius:13px;
  background: transparent url('../assets/logo.png') center/164px auto no-repeat}
@media(max-width:991px){.brand-logo{width:150px;height:42px;background-size:122px auto}}

/* ---------- Navbar (sobre Bootstrap) ---------- */
.navbar.psico-nav{
  background:rgba(246,241,231,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.psico-nav .nav-link{font-weight:500;color:var(--tinta-suave)!important;transition:color .2s}
.psico-nav .nav-link:hover,.psico-nav .nav-link:focus{color:var(--terracota-os)!important}
.psico-nav .navbar-toggler{border:0;padding:6px}
.psico-nav .navbar-toggler:focus{box-shadow:none}
.btn-psico{background:var(--salvia-osc);color:var(--blanco-calido);border-radius:40px;padding:9px 22px;font-weight:600;border:0;transition:background .25s,transform .2s}
.btn-psico:hover{background:var(--salvia);color:var(--blanco-calido);transform:translateY(-1px)}

/* ---------- Botones ---------- */
.btn-cta{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:44px;font-weight:600;font-size:1rem;transition:transform .2s,box-shadow .25s,background .25s;border:0}
.btn-cta.primary{background:var(--terracota);color:var(--blanco-calido);box-shadow:0 8px 24px -8px rgba(196,122,85,.6)}
.btn-cta.primary:hover{background:var(--terracota-os);transform:translateY(-2px);color:var(--blanco-calido)}
.btn-cta.ghost{border:1.5px solid var(--salvia);color:var(--salvia-osc);background:transparent}
.btn-cta.ghost:hover{background:var(--salvia);color:var(--blanco-calido);transform:translateY(-2px)}

/* ---------- Hero ---------- */
.hero{position:relative;padding:clamp(70px,11vw,140px) 0 clamp(60px,9vw,110px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(60% 55% at 78% 18%,rgba(124,138,109,.22),transparent 60%),
            radial-gradient(50% 50% at 12% 85%,rgba(196,122,85,.16),transparent 60%)}
.hero .wrap{position:relative;z-index:1;max-width:800px}
.hero h1{font-size:clamp(2.6rem,6.5vw,4.6rem);color:var(--tinta);margin-bottom:24px}
.hero h1 em{font-style:italic;color:var(--salvia-osc)}
.hero .lead{font-size:clamp(1.05rem,2.2vw,1.3rem);color:var(--tinta-suave);max-width:620px;margin-bottom:36px}

/* ---------- Secciones ---------- */
.section{padding:clamp(56px,8vw,96px) 0}
.section--light{background:var(--blanco-calido)}
.section--crema2{background:var(--crema-2)}
.section-head{max-width:660px;margin-bottom:52px}
.section-head h2{font-size:clamp(2rem,4.5vw,3rem);color:var(--tinta);margin-bottom:14px}
.section-head p{color:var(--tinta-suave);font-size:1.08rem}

/* ---------- Tarjetas de servicio ---------- */
.card-serv{height:100%;background:var(--crema);border:1px solid var(--linea);border-radius:20px;
  padding:34px 30px;position:relative;overflow:hidden;
  transition:transform .3s,box-shadow .3s,border-color .3s}
.card-serv::after{content:"";position:absolute;left:0;top:0;height:100%;width:4px;background:var(--salvia);
  transform:scaleY(0);transform-origin:top;transition:transform .35s}
.card-serv:hover{transform:translateY(-6px);box-shadow:0 22px 40px -22px rgba(47,51,41,.35);border-color:transparent}
.card-serv:hover::after{transform:scaleY(1)}
.card-serv .ico{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  background:var(--crema-2);margin-bottom:20px;font-size:1.6rem}
.card-serv .num{position:absolute;top:24px;right:28px;font-family:'Fraunces',serif;font-size:1.1rem;color:var(--linea)}
.card-serv h3{font-size:1.35rem;margin-bottom:12px;color:var(--salvia-osc)}
.card-serv p{color:var(--tinta-suave);font-size:.99rem;margin:0}

/* ---------- Zona de cobertura ---------- */
.zona-box{background:var(--blanco-calido);border:1px solid var(--linea);border-radius:24px;padding:clamp(30px,5vw,52px)}
.zona-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.zona-tags span{background:var(--crema);border:1px solid var(--linea);border-radius:30px;
  padding:8px 18px;font-size:.92rem;font-weight:500;color:var(--salvia-osc)}

/* ---------- Enfoque ---------- */
.enfoque-text h2{font-size:clamp(1.9rem,4vw,2.7rem);margin-bottom:20px}
.enfoque-text p{color:var(--tinta-suave);margin-bottom:16px;font-size:1.05rem}
.quote-box{background:var(--salvia-osc);color:var(--crema);border-radius:24px;
  padding:46px 40px;position:relative;overflow:hidden;font-family:'Fraunces',serif}

/* comilla gigante decorativa, de fondo (no ocupa lugar) */
.quote-box::before{content:"\201C";position:absolute;top:-18px;right:14px;
  font-size:9rem;line-height:1;color:var(--crema);opacity:.12;font-family:'Fraunces',serif}

/* detallecito de color arriba a la izquierda */
.quote-box::after{content:"";position:absolute;top:34px;left:40px;
  width:38px;height:3px;border-radius:3px;background:var(--terracota)}

.quote-box .mark{display:none}
.quote-box p{font-size:1.32rem;font-style:italic;font-weight:400;margin:26px 0 0;position:relative}
/* ---------- Contacto ---------- */
.contact-info h2{font-size:clamp(1.9rem,4vw,2.7rem);margin:14px 0 8px}
.contact-info > p{color:var(--tinta-suave);margin-bottom:26px;font-size:1.08rem}
.info-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:16px;margin:0}
.info-list li{display:flex;gap:14px;align-items:center;font-size:1.02rem}
.info-list a{color:var(--tinta)}
.info-list .ico{width:42px;height:42px;border-radius:12px;background:var(--blanco-calido);
  display:grid;place-items:center;flex-shrink:0;color:var(--terracota-os)}

.redes-card{background:var(--blanco-calido);border:1px solid var(--linea);border-radius:24px;padding:36px 32px}
.redes-card h3{font-size:1.4rem;margin-bottom:8px;color:var(--salvia-osc)}
.redes-card .sub{color:var(--tinta-suave);margin-bottom:26px;font-size:.98rem}
.red{display:flex;align-items:center;gap:16px;padding:15px 20px;border-radius:16px;
  border:1px solid var(--linea);background:var(--crema);margin-bottom:14px;
  transition:transform .2s,box-shadow .25s,border-color .2s}
.red:last-child{margin-bottom:0}
.red:hover{transform:translateX(5px);box-shadow:0 14px 28px -18px rgba(47,51,41,.5);border-color:var(--salvia)}
.red .badge{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex-shrink:0}
.red .badge svg{width:24px;height:24px;fill:#fff}
.red .txt{flex:1}
.red .txt strong{display:block;font-size:1.05rem;color:var(--tinta)}
.red .txt span{font-size:.88rem;color:var(--tinta-suave)}
.red .arrow{color:var(--tinta-suave);font-size:1.2rem;transition:transform .2s}
.red:hover .arrow{transform:translateX(4px);color:var(--terracota-os)}
.b-ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.b-wa{background:#25d366}
.b-in{background:#0a66c2}
.b-mail{background:var(--terracota)}

/* ---------- Footer ---------- */
.footer{background:#f6f1e7;color:#2f3329;padding:54px 0 30px;border-top:1px solid #d9d0bf}
.footer .top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:28px;align-items:flex-start;
  padding-bottom:32px;border-bottom:1px solid #d9d0bf}
.footer .cols{display:flex;gap:54px;flex-wrap:wrap}
.footer h4{font-family:'Hanken Grotesk',sans-serif;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:#5d6a4f;margin-bottom:14px}
.footer .cols a{display:block;color:#5a5d51;font-size:.95rem;margin-bottom:9px;transition:color .2s}
.footer .cols a:hover{color:#a85f3c}
.footer .bottom{padding-top:24px;font-size:.85rem;color:#8a8577;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}


/* ---------- Animación de aparición ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .wa-float{animation:none}
  html{scroll-behavior:auto}
}