:root{
  /* Paleta suave y terapéutica */
  --bg:#F7F5F2;          /* marfil cálido */
  --paper:#FFFFFF;       /* blanco puro para tarjetas */
  --ink:#24323D;         /* azul petróleo (texto) */
  --muted:#6B7280;       /* gris suave */
  --brand:#6CA8A1;       /* verde salvia */
  --brand-strong:#4F8E86;/* salvia profundo */
  --accent:#CF8C62;      /* terracota suave */
  --shadow: 0 10px 30px rgba(36,50,61,.08);
  --radius:20px;
}

html{scroll-behavior:smooth}
body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial, sans-serif; background: var(--bg); color: var(--ink)}

/* Navbar */
.navbar.bg-soft{background: rgba(255,255,255,.75)!important; backdrop-filter: blur(10px); border-bottom:1px solid rgba(36,50,61,.08)}
.navbar.scrolled{background: rgba(255,255,255,.95)!important; box-shadow: var(--shadow)}
.nav-link{color:var(--ink)!important}
.nav-link:hover{color:var(--brand-strong)!important}
.brand-logo{height:36px; width:auto; border-radius:10%}
.text-brand-ink{color:var(--ink)!important}

/* Hero */
.hero{position:relative; min-height: 88dvh; display:grid; place-items:center; overflow:hidden}
.hero-soft .hero-bg {
  position: absolute;
  inset: 0;
  background: url('imagenes/background.jpg') center/cover no-repeat;
  filter: saturate(85%) brightness(50%);
}
.hero-soft .hero-overlay{position:absolute; inset:0; background:linear-gradient(to top, rgba(247,245,242,.9), rgba(247,245,242,.6))}
.hero .container{position:relative; z-index:2}
.kicker{letter-spacing:.12em; text-transform:uppercase; color:var(--brand-strong); font-size:.85rem}
.cta-btn{border-radius:999px; padding:.85rem 1.25rem; background:linear-gradient(135deg,var(--brand),var(--brand-strong)); border:0; color:#fff}
.cta-btn:hover{filter:brightness(1.05)}
.btn-outline-secondary{border-color: rgba(36,50,61,.25); color:var(--ink)}
.btn-outline-secondary:hover{background: rgba(36,50,61,.06); border-color: rgba(36,50,61,.35)}

/* Sections */
section{padding: 80px 0}
.section-title{font-weight:800; letter-spacing:.3px}
.section-sub{color:var(--muted)}

/* Cards */
.card-soft{background: var(--paper); border: 1px solid rgba(36,50,61,.08); border-radius: var(--radius); box-shadow: var(--shadow)}
.paper{background: var(--paper); border: 1px solid rgba(36,50,61,.08); border-radius: var(--radius); box-shadow: var(--shadow)}

/* Servicios */
.service .service-icon{width:56px; height:56px; border-radius:16px; display:grid; place-items:center; margin-bottom:.5rem; font-size:1.25rem; color:var(--brand-strong); background:linear-gradient(135deg, rgba(108,168,161,.12), rgba(207,140,98,.12))}
.service{transition: transform .25s ease, box-shadow .25s ease}
.service:hover{transform: translateY(-4px); box-shadow: 0 16px 36px rgba(36,50,61,.12)}

/* Valores */
.value-icon{width:56px; height:56px; border-radius:14px; display:grid; place-items:center; background: linear-gradient(135deg, rgba(108,168,161,.15), rgba(207,140,98,.15)); font-size:24px; color:var(--brand-strong)}

/* Timeline */
.timeline{position:relative}
.timeline:before{content:""; position:absolute; left:18px; top:0; bottom:0; width:2px; background:linear-gradient(var(--brand), transparent)}
.timeline-item{position:relative; padding-left:56px; margin-bottom:26px}
.timeline-bullet{position:absolute; left:8px; top:2px; width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-strong)); box-shadow:0 0 0 4px rgba(108,168,161,.18)}

/* Portfolio */
.portfolio-card{cursor:pointer; overflow:hidden}
.portfolio-card img{transition: transform .6s ease}
.portfolio-card:hover img{transform: scale(1.05)}

/* Testimonios */
.testimonial{max-width:720px; padding:2rem; text-align:center}
.testimonial .quote{font-size:2rem; color:var(--brand-strong)}
.testimonial p{font-size:1.05rem; margin:.75rem 0}
.testimonial .author{font-weight:600; color:var(--ink)}

/* CTA Final */
.cta-final{padding:48px 0; background: linear-gradient(180deg, rgba(108,168,161,.08), transparent)}

/* Contacto */
.contact-card input, .contact-card textarea{background:#fff; border:1px solid rgba(36,50,61,.15); color:var(--ink)}
.contact-card input:focus, .contact-card textarea:focus{border-color: var(--brand-strong); box-shadow: 0 0 0 .25rem rgba(108,168,161,.15)}

/* Footer */
footer{border-top:1px solid rgba(36,50,61,.08)}

/* Reveal animations */
.reveal{opacity:0; transform: translateY(24px); transition: all .8s cubic-bezier(.2,.65,.2,1)}
.reveal.in{opacity:1; transform: none}

/* Utility */
.divider{height:1px; background: linear-gradient(90deg, transparent, rgba(36,50,61,.12), transparent)}

@media (max-width: 991.98px){
  .hero{min-height: 78dvh}
  .navbar .socials{display:none}
}


/* --- Navbar limpio y en una línea --- */
@media (min-width: 992px) {
  .navbar .navbar-brand { font-size: 1.05rem; }
  .navbar .nav-link{
    padding: .35rem .6rem;
    font-size: .95rem;
    font-weight: 500;
    white-space: nowrap;   /* evita cortes tipo "Misión &" y "Visión" */
    line-height: 1.2;
  }
  .navbar-nav{ gap: .15rem; } /* junta un poco los ítems */
  .navbar .socials .btn{
    padding: .35rem .5rem;
    line-height: 1;
  }
}

/* Opcional: reducir un pelín en pantallas medianas si usas navbar-expand-lg */
@media (min-width: 992px) and (max-width: 1199.98px){
  .navbar .nav-link{ font-size: .9rem; padding: .3rem .5rem; }
}





/* ---------- SECCIÓN SERVICIOS ---------- */

.section-title {
  font-size: 2.2rem;
  color: #3c3c3d;
}

.custom-accordion .accordion-item {
  border: none;
  border-radius: 12px;
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.07);
  background: #ffffff;
}

.custom-accordion .accordion-button {
  background: #f7f7f7;
  font-size: 1.15rem;
  font-weight: 600;
  color: #333;
  padding: 1.2rem;
  transition: 0.3s;
}

.custom-accordion .accordion-button:not(.collapsed) {
  background: #e4ebff;
  color: #0a2e8b;
}

.custom-accordion .icon-service {
  font-size: 1.4rem;
  color: #4f64b8;
}

.accordion-body {
  font-size: 1rem;
  color: #444;
  padding: 1.3rem 1.5rem;
}
