/* ============================================================
   Operadora Marta — Landing Page
   Design tokens + global layout + nav + hero.
   Section-specific styles (cobertura, historia, valores, socios,
   cta, footer) are scoped inside their own included fragments.
   ============================================================ */

:root{
  --navy:      #0f2a5c;
  --navy-2:    #0a1f45;
  --blue:      #0066cc;
  --accent:    #ff6b35;
  --accent-2:  #e85a2a;
  --tint:      #eaf3fb;
  --ink:       #16213a;
  --ink-dim:   #5b6579;
  --line:      #e3e9f2;
  --good:      #1c9d67;
  --surface:   #ffffff;
  --bg:        #ffffff;

  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --gutter: 20px;
  --content-w: 1180px;
  --radius: 16px;
  --shadow-soft: 0 20px 48px -28px rgba(15,42,92,0.35);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

.wrap{
  max-width: var(--content-w);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

h1, h2, h3{
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

a{ color: inherit; }

.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-accent{ background: var(--accent); color: #fff; box-shadow: 0 12px 24px -12px rgba(255,107,53,0.6); }
.btn-accent:hover{ background: var(--accent-2); }
.btn-ghost{ background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover{ border-color: var(--navy); }
.btn-white{ background: #fff; color: var(--navy); }

.eyebrow{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------------- nav ---------------- */
.nav{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap{
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: 76px;
}
.nav-brand{ display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.nav-brand img{ height: 40px; width: auto; }
.nav-brand span{
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  color: var(--navy); letter-spacing: 0.01em; white-space: nowrap;
}
.nav-links{ display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav-links a{
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14.5px;
  padding: 6px 2px; border-bottom: 2px solid transparent; transition: border-color 0.15s ease, color 0.15s ease;
}
.nav-links a:hover{ color: var(--navy); border-color: var(--accent); }
.nav-cta{ flex: none; }
.nav-cta .short{ display: none; }
.nav-toggle{ display: none; }

/* Each drops in as the header runner passes its position — see intro-boot.js,
   which adds .revealed per item. Only the homepage (body.page-home) runs that
   intro at all, so this hidden-until-revealed state is scoped to it — on every
   other page the nav is just visible immediately, no JS dependency. Falls back
   to visible immediately on the homepage too if JS never runs (no-JS, or an
   error) so the nav is never permanently stuck hidden. */
.page-home .nav-brand, .page-home .nav-links li, .page-home .nav-cta{
  opacity: 0; transform: translateY(-14px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.22,.9,.25,1);
}
.page-home .nav-brand.revealed, .page-home .nav-links li.revealed, .page-home .nav-cta.revealed{ opacity: 1; transform: none; }
html.no-js .page-home .nav-brand, html.no-js .page-home .nav-links li, html.no-js .page-home .nav-cta{ opacity: 1; transform: none; }

@media (max-width: 900px){
  .nav-links{
    display: none; position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    padding: 8px var(--gutter) 16px;
  }
  .nav-links.is-open{ display: flex; }
  .nav-links a{ padding: 12px 4px; border-bottom: 1px solid var(--line); }
  .nav-toggle{
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line);
    background: #fff; flex: none; cursor: pointer;
  }
  .nav-cta .long{ display: none; }
  .nav-cta .short{ display: inline; }
}

/* ---------------- hero ---------------- */
/* Full-bleed facility photo behind the whole hero (the owner's request:
   "un fondo... hospital algo" atrás de todo, not just a small panel behind
   the mascot). The image itself (assets/img/hero-backdrop.png) is already
   lightly tinted and feathered top/bottom — the gradient layered above it
   here is the actual legibility "filter": near-opaque white over the copy
   column on the left, easing off toward the mascot side on the right, so
   the photo reads as atmosphere and never fights the text on top of it. */
.hero{
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(100deg,
      rgba(255,255,255,0.97) 0%,
      rgba(255,255,255,0.95) 32%,
      rgba(255,255,255,0.82) 50%,
      rgba(234,243,251,0.55) 68%,
      rgba(234,243,251,0.4) 100%),
    url("../../assets/img/hero-backdrop.png") center 60% / cover no-repeat,
    #ffffff;
  padding-block: 56px 0;
}
.hero .wrap{
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(280px, 0.95fr);
  gap: 20px;
  align-items: center;
}
.hero-copy{ padding-block: 20px 40px; position: relative; z-index: 2; }
.hero-copy h1{ font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; margin-top: 10px; }
.hero-copy .lede{
  margin-top: 18px; max-width: 46ch; color: var(--ink-dim); font-size: 17px; line-height: 1.6;
}
.hero-ctas{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn-whatsapp{ background: #25D366; color: #fff; }
.btn-whatsapp:hover{ background: #1ebe5b; }

.hero-stats{
  display: flex; gap: 34px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.hero-stats .stat b{
  display: block; font-family: var(--font-display); font-size: 30px; color: var(--navy); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hero-stats .stat span{ font-size: 13px; color: var(--ink-dim); }

.hero-chips{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero-chips .chip{
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--navy);
  box-shadow: 0 6px 16px -10px rgba(15,42,92,0.25);
}
.hero-chips .chip::before{
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none;
}

/* mascot stage */
.hero-stage{
  position: relative; height: clamp(360px, 46vw, 560px);
  z-index: 1;
}
/* "Watch" mascot — ported from a pre-built character-rig study (MascotRig,
   mode="watch"): the body leans/turns toward whichever side of the hero the
   cursor is on, arms/legs react, eyes track on top of that. Logic in
   src/js/mascot-watch.js, mounted explicitly by intro-boot.js at hand-off time
   (once the header-crossing runner finishes) rather than autoplaying — the
   anchor's opacity is the only thing CSS controls; everything else is the one
   continuous transform mascot-watch.js writes every frame. */
.mascot-watch-anchor{
  position: absolute; left: 60%; bottom: 6%; width: 0; height: 0;
  opacity: 0; transition: opacity 0.5s ease;
}
.hero-stage.reveal .mascot-watch-anchor{ opacity: 1; }
@media (prefers-reduced-motion: reduce){ .mascot-watch-anchor{ transition: none; } }

.mw-root{
  position: absolute; left: -265px; bottom: 0; width: 530px; height: 500px;
  transform-origin: 50% 100%; will-change: transform;
}
.mw-root img{ position: absolute; display: block; will-change: transform; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.mw-leg-l{ left: 160px; top: 305px; width: 175px; height: 195px; transform-origin: 90px 25px; }
/* left/top nudged -14/-10px from the leg_r.png sheet's "natural" position —
   at its original placement, the leg's hip-connection edge left a visible
   gap/notch against body.png's bottom-right taper (most visible as a white
   sliver cutting through the red base). Verified against the actual pixel
   alpha of both PNGs, not eyeballed. */
.mw-leg-r{ left: 324px; top: 257px; width: 192px; height: 116px; transform-origin: 32px 30px; }
.mw-arm-l{ left: 0;     top: 177px; width: 174px; height: 85px;  transform-origin: 169px 53px; }
.mw-arm-r{ left: 357px; top: 0;     width: 134px; height: 180px; transform-origin: 3px 166px; }
.mw-body { left: 114px; top: 29px;  width: 275px; height: 319px; }

.mw-pupil{ position: absolute; width: 18px; height: 27px; border-radius: 50%; background: #17120c; will-change: transform; }
.mw-pupil-l{ left: 225px; top: 145px; }
.mw-pupil-r{ left: 297px; top: 135px; }
.mw-glint{ position: absolute; left: 3px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0.9; }
.mw-lidwrap{ position: absolute; border-radius: 48%; overflow: hidden; }
.mw-lidwrap-l{ left: 214px; top: 124px; width: 45px; height: 65px; }
.mw-lidwrap-r{ left: 289px; top: 113px; width: 44px; height: 65px; }
.mw-lid{ position: absolute; left: -4px; right: -4px; top: 0; height: 0; background: #fff; border-bottom: 5px solid #17120c; box-sizing: border-box; }

.hero-decor-capsule{
  position: absolute; width: 62px; pointer-events: none; opacity: 0;
  transition: opacity 0.4s ease;
}
.hero-stage.reveal .hero-decor-capsule{
  opacity: 0.85;
  animation: capsuleFloat 4.4s ease-in-out infinite;
}
@keyframes capsuleFloat{ 0%,100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-16px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce){
  .hero-decor-capsule{ opacity: 0.85; transition: none; }
  .hero-stage.reveal .hero-decor-capsule{ animation: none; }
}
.hero-decor-capsule.c1{ top: 6%; left: 4%; width: 46px; animation-delay: 0s; }
.hero-decor-capsule.c2{ top: 58%; left: -2%; width: 40px; animation-delay: 1.1s; }
.hero-decor-capsule.c3{ top: 14%; right: 30%; width: 34px; animation-delay: 2.1s; }
.hero-stage.reveal .hero-decor-capsule.c3{ opacity: 0.6; }

@media (max-width: 900px){
  .hero .wrap{ grid-template-columns: 1fr; }
  .hero-stage{ order: -1; height: clamp(280px, 76vw, 420px); }
  .mascot-rig{ right: -4%; width: 74%; }
  .hero-copy{ padding-block: 0 32px; }
}

/* ---------------- shared section helpers used by included fragments ---------------- */
.section-head{ max-width: 640px; margin-bottom: 40px; }
.section-head h2{ font-size: clamp(26px, 3.4vw, 36px); margin-top: 8px; }
.section-head p{ color: var(--ink-dim); margin-top: 12px; font-size: 16px; }

/* whatsapp floating button */
.fab-whatsapp{
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 28px -10px rgba(37,211,102,0.6);
  text-decoration: none;
  transition: transform 0.15s ease;
}
.fab-whatsapp:hover{ transform: scale(1.06); }
.fab-whatsapp svg{ width: 28px; height: 28px; }

@media (prefers-reduced-motion: reduce){ .fab-whatsapp{ transition: none; } }

.skip-link:focus{ left: 12px !important; top: 12px !important; border-radius: 8px; box-shadow: var(--shadow-soft); }