/* =============================================================
   Dra. Gina Apráez Calderón — sitio web
   Design system / shared styles for indexed site pages.
   Brand tokens from the design-studio reference (supersede deck).
   Font substitution: TT Norms Pro -> Poppins (headings) + Inter (body).
   ============================================================= */

:root{
  /* brand palette (design-studio: #25c5ad teal, #680a99 purple) */
  --teal:#25c5ad;
  --teal-dark:#1a9c88;
  --teal-deep:#0e6759;
  --teal-tint:#e9f9f6;      /* teal @ ~10% on white */
  --teal-tint-2:#d3f2ec;
  --purple:#680a99;
  --purple-dark:#560880;
  --ink:#0d1b3e;            /* deep navy headings (from comp) */
  --ink-soft:#4a5568;       /* body text */
  --ink-mute:#6b7688;
  --pearl:#eef2f1;          /* page background */
  --white:#ffffff;
  --line:#e2ebe8;
  --whatsapp:#25d366;
  --whatsapp-dark:#1da851;

  --radius:18px;
  --radius-lg:26px;
  --radius-pill:999px;
  --shadow-sm:0 4px 14px rgba(14,103,89,.10);
  --shadow:0 12px 34px rgba(14,103,89,.14);
  --shadow-purple:0 10px 26px rgba(104,10,153,.28);
  --shadow-teal:0 10px 26px rgba(37,197,173,.32);

  --maxw:1160px;
  --gap:clamp(16px,3vw,28px);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Poppins',var(--sans);
}

/* ---------- reset / base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink-soft);
  background:var(--pearl);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);line-height:1.18;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em;}
h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:800;}
h2{font-size:clamp(1.5rem,3.4vw,2.25rem);}
h3{font-size:clamp(1.15rem,2vw,1.4rem);}
p{margin:0 0 1rem;}
a{color:var(--teal-deep);text-decoration:none;}
a:hover{color:var(--teal-dark);}
img{max-width:100%;display:block;height:auto;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px;}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,32px);}
.section{padding:clamp(48px,7vw,92px) 0;}
.section--tint{background:var(--teal-tint);}
.section--ink{background:var(--ink);color:#d7deec;}
.section--ink h2,.section--ink h3{color:#fff;}
.eyebrow{display:inline-block;font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:.7rem;}
.section--ink .eyebrow{color:var(--teal);}
.center{text-align:center;}
.lead{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--ink-soft);}
.measure{max-width:620px;}
.center .measure{margin-inline:auto;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--display);font-weight:700;font-size:1rem;line-height:1;
  padding:.95em 1.5em;border:2px solid transparent;border-radius:var(--radius-pill);
  text-align:center;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.99);}
.btn svg{flex-shrink:0;}
.btn--purple{background:var(--purple);color:#fff;box-shadow:var(--shadow-purple);}
.btn--purple:hover{background:var(--purple-dark);color:#fff;}
.btn--teal{background:var(--teal);color:#fff;box-shadow:var(--shadow-teal);}
.btn--teal:hover{background:var(--teal-dark);color:#fff;}
.btn--whatsapp{background:var(--whatsapp);color:#fff;box-shadow:0 10px 24px rgba(37,211,102,.34);}
.btn--whatsapp:hover{background:var(--whatsapp-dark);color:#fff;}
.btn--ghost{background:transparent;color:var(--teal-deep);border-color:var(--teal);}
.btn--ghost:hover{background:var(--teal-tint);color:var(--teal-deep);}
.btn--white{background:#fff;color:var(--teal-deep);box-shadow:var(--shadow-sm);}
.btn--lg{font-size:1.06rem;padding:1.05em 1.8em;}
.btn--block{width:100%;}

/* ---------- header / nav ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px;}
.nav__logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;}
.nav__mark{height:44px;width:auto;flex-shrink:0;}
.nav__wordmark{display:flex;flex-direction:column;line-height:1.08;}
.nav__wordmark strong{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink);letter-spacing:-.015em;}
.nav__wordmark small{font-size:.7rem;color:var(--teal-dark);font-weight:600;letter-spacing:.01em;}
@media (max-width:520px){
  .nav__mark{height:38px;}
  .nav__wordmark strong{font-size:.86rem;max-width:8.5em;}
  .nav__wordmark small{font-size:.62rem;}
}
.nav__links{display:flex;align-items:center;gap:.35rem;}
.nav__links a{
  font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--ink);
  padding:.5rem .85rem;border-radius:var(--radius-pill);transition:background .15s ease,color .15s ease;
}
.nav__links a:hover{background:var(--teal-tint);color:var(--teal-deep);}
.nav__links a.is-active{color:var(--teal-deep);}
.nav__links a.nav__cta{border:2px solid var(--teal);color:var(--teal-deep);}
.nav__links a.nav__cta:hover{background:var(--teal);color:#fff;}
.nav__toggle{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;}
.nav__toggle span{display:block;width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .25s ease;}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

@media (max-width:860px){
  .nav__toggle{display:flex;}
  .nav__links{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:.1rem;
    background:#fff;padding:.5rem clamp(18px,4vw,32px) 1.1rem;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .25s ease,transform .25s ease,visibility .25s ease;
  }
  .nav__links.is-open{opacity:1;visibility:visible;transform:none;}
  .nav__links a{display:block;padding:.8rem .5rem;font-size:1.05rem;}
  .nav__links a.nav__cta{text-align:center;margin-top:.7rem;}
}

/* ---------- hero (home) ---------- */
.hero{position:relative;overflow:hidden;}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(36px,5vw,72px) 0;}
.hero__name{font-size:clamp(2.2rem,5.2vw,3.4rem);margin-bottom:.15em;}
.hero__role{font-family:var(--display);font-weight:600;color:var(--teal-dark);font-size:clamp(1.05rem,2.2vw,1.4rem);margin-bottom:1.1rem;}
.hero__contact{margin:0 0 1.6rem;color:var(--ink-soft);}
.hero__contact li{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.5rem;font-size:1rem;}
.hero__contact svg{flex-shrink:0;margin-top:3px;color:var(--teal);}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.8rem;}
.hero__media{position:relative;}
.hero__media .photo{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;object-fit:cover;aspect-ratio:1/1;}
.hero__panel{position:absolute;inset:0;border-radius:var(--radius-lg);background:linear-gradient(155deg,var(--teal) 0%,var(--teal-dark) 100%);opacity:.06;pointer-events:none;}
/* floating service pills over the hero image */
.hero__pills{position:absolute;right:-6px;top:12%;display:flex;flex-direction:column;gap:.7rem;align-items:flex-end;}
.pill-chip{display:inline-flex;align-items:center;gap:.5rem;background:#fff;color:var(--ink);font-family:var(--display);font-weight:600;font-size:.82rem;padding:.55rem .9rem;border-radius:var(--radius-pill);box-shadow:var(--shadow);}
.pill-chip svg{color:var(--teal);}

@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr;text-align:center;}
  .hero__contact{max-width:320px;margin-inline:auto;}
  .hero__contact li{justify-content:flex-start;text-align:left;}
  .hero__ctas{justify-content:center;}
  .hero__pills{display:none;}
  .hero__media{max-width:440px;margin-inline:auto;}
}

/* ---------- service cards grid ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--gap);}
.card{
  background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.card__media{aspect-ratio:16/10;overflow:hidden;background:var(--teal-tint);}
.card__media img{width:100%;height:100%;object-fit:cover;}
.card__body{padding:1.3rem 1.35rem 1.5rem;display:flex;flex-direction:column;flex:1;}
.card__body h3{margin-bottom:.4rem;}
.card__body p{font-size:.95rem;color:var(--ink-soft);}
.card__link{margin-top:auto;font-family:var(--display);font-weight:600;color:var(--teal-deep);display:inline-flex;align-items:center;gap:.35rem;padding-top:.6rem;}
.card__link svg{transition:transform .15s ease;}
.card:hover .card__link svg{transform:translateX(3px);}

/* icon service card (no photo) */
.icard{background:#fff;border-radius:var(--radius);padding:1.7rem 1.5rem;box-shadow:var(--shadow-sm);height:100%;}
.icard__icon{width:56px;height:56px;border-radius:16px;background:var(--teal-tint);color:var(--teal-deep);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;}
.icard h3{margin-bottom:.4rem;}
.icard p{font-size:.95rem;margin:0;}

/* ---------- feature/split rows ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;}
.split--rev .split__media{order:-1;}
.split__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;object-fit:cover;}
@media (max-width:820px){.split{grid-template-columns:1fr;}.split--rev .split__media{order:0;}}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--gap);}
.stat{text-align:center;}
.stat__num{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4vw,2.8rem);color:var(--teal);line-height:1;}
.stat__label{font-size:.92rem;color:var(--ink-soft);margin-top:.35rem;}
.section--ink .stat__label{color:#aeb9cf;}

/* ---------- checklist ---------- */
.checklist li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.75rem;}
.checklist svg{flex-shrink:0;margin-top:3px;color:var(--teal);}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin-inline:auto;}
details.qa{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem 1.25rem;margin-bottom:.75rem;}
details.qa summary{font-family:var(--display);font-weight:600;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;}
details.qa summary::-webkit-details-marker{display:none;}
details.qa summary::after{content:"+";font-size:1.4rem;color:var(--teal);flex-shrink:0;transition:transform .2s ease;}
details.qa[open] summary::after{content:"−";}
details.qa p{margin:.8rem 0 0;font-size:.96rem;}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(150deg,var(--teal-deep),var(--teal-dark));color:#fff;border-radius:var(--radius-lg);padding:clamp(28px,5vw,52px);text-align:center;}
.cta-band h2{color:#fff;}
.cta-band p{color:#d7f5ef;}
.cta-band .btn--whatsapp{margin-top:.6rem;}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#aeb9cf;padding:clamp(40px,6vw,64px) 0 2rem;}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,48px);}
.site-footer img.foot-logo{height:64px;width:auto;margin-bottom:1.1rem;}
/* social + external profiles */
.footer__social{display:flex;gap:.6rem;margin:1rem 0 .4rem;flex-wrap:wrap;}
.footer__social a{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:600;font-size:.9rem;color:#fff;background:linear-gradient(120deg,#25c5ad,#680a99);padding:.55rem .95rem;border-radius:var(--radius-pill);transition:transform .15s ease,filter .15s ease;}
.footer__social a:hover{transform:translateY(-2px);filter:brightness(1.06);color:#fff;}
.footer__profiles{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.4rem;font-size:.82rem;}
.footer__profiles a{color:#8f9ab3;}
.footer__profiles a:hover{color:#fff;}
.site-footer h4{color:#fff;font-size:1rem;letter-spacing:.02em;margin-bottom:.9rem;}
.site-footer a{color:#aeb9cf;}
.site-footer a:hover{color:#fff;}
.footer__links li{margin-bottom:.5rem;}
.footer__contact li{display:flex;gap:.55rem;align-items:flex-start;margin-bottom:.6rem;font-size:.94rem;}
.footer__contact svg{flex-shrink:0;margin-top:3px;color:var(--teal);}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:2.4rem;padding-top:1.4rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-size:.85rem;color:#7f8aa3;}
@media (max-width:720px){.footer__grid{grid-template-columns:1fr;}}

/* ---------- floating WhatsApp button (all pages) ---------- */
.wa-fab{
  position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:90;
  width:60px;height:60px;border-radius:50%;background:var(--whatsapp);
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(37,211,102,.45);
  transition:transform .18s ease;
}
.wa-fab:hover{transform:scale(1.07);}
.wa-fab svg{width:32px;height:32px;}
.wa-fab__pulse{position:absolute;inset:0;border-radius:50%;background:var(--whatsapp);animation:wa-pulse 2.4s ease-out infinite;z-index:-1;}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.5;}100%{transform:scale(1.8);opacity:0;}}

/* ---------- reveal on scroll (only hide when JS is active) ---------- */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;}
.js .reveal.is-visible{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .wa-fab__pulse{animation:none;display:none;}
  *{transition:none!important;}
}

/* skip link */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1rem;border-radius:0 0 10px 0;z-index:200;}
.skip-link:focus{left:0;color:#fff;}