/* =========================================================
   Fisioterapia 3 Olivos — Sistema base compartido
   Paleta exacta de marca + tipografía serif/sans
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* Paleta de marca (exacta) */
  --teal-deep:#0F6E56;
  --teal:#1D9E75;
  --teal-light:#9FE1CB;
  --coral:#D85A30;
  --cream:#F1EFE8;
  --ink:#2C2C2A;
  --white:#FFFFFF;

  /* Tonos armónicos derivados (oklch, misma familia) */
  --teal-darkest:oklch(0.34 0.072 168);   /* footer / fondos profundos */
  --teal-tint:oklch(0.96 0.018 165);      /* lavado verde muy claro */
  --cream-2:oklch(0.95 0.012 95);         /* crema un punto más cálida */
  --line:oklch(0.86 0.012 110);           /* hairlines */
  --coral-soft:oklch(0.93 0.04 45);       /* fondo coral muy suave */
  --coral-text:#B8431F;                   /* coral oscurecido solo para texto pequeño (contraste AA) */
  --ink-soft:oklch(0.46 0.012 110);       /* texto secundario */

  --shadow-sm:0 1px 2px rgba(15,110,86,.06), 0 6px 18px rgba(15,110,86,.06);
  --shadow-md:0 4px 12px rgba(15,110,86,.08), 0 18px 50px rgba(15,110,86,.10);
  --shadow-lg:0 20px 70px rgba(15,110,86,.16);

  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-xl:40px;
  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  color:var(--ink);
  background:var(--cream);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;line-height:1.04;letter-spacing:-.01em;color:var(--teal-deep);}
p{margin:0;text-wrap:pretty;}

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.section{padding:96px 0;}
.center{text-align:center;}
.stack{display:flex;flex-direction:column;}

/* ---------- Eyebrow (eco del arco "FISIOTERAPIA") ---------- */
.eyebrow{
  font-family:'Hanken Grotesk',sans-serif;
  font-weight:600;font-size:13px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--teal);display:inline-flex;align-items:center;gap:12px;margin:0 0 18px;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--coral);display:inline-block;border-radius:2px;}
.eyebrow.no-rule::before{display:none;}

/* ---------- Type scale ---------- */
.display{font-size:clamp(44px,7vw,84px);line-height:.98;}
.h2{font-size:clamp(32px,4.4vw,52px);}
.h3{font-size:clamp(23px,2.6vw,30px);}
.lead{font-size:clamp(18px,2vw,21px);color:var(--ink-soft);line-height:1.65;}
.muted{color:var(--ink-soft);}
.serif-em{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  font-weight:600;font-size:15.5px;letter-spacing:.01em;
  padding:15px 26px;border-radius:999px;border:1.5px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;line-height:1;
}
.btn svg{width:18px;height:18px;}
.btn-primary{background:var(--teal-deep);color:var(--cream);box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:oklch(0.40 0.08 168);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-coral{background:var(--coral);color:#fff;box-shadow:var(--shadow-sm);}
.btn-coral:hover{background:oklch(0.58 0.15 38);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-ghost{background:transparent;color:var(--teal-deep);border-color:color-mix(in srgb,var(--teal-deep) 30%,transparent);}
.btn-ghost:hover{border-color:var(--teal-deep);background:color-mix(in srgb,var(--teal-deep) 6%,transparent);}
.btn-light{background:var(--cream);color:var(--teal-deep);}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}

/* ---------- Service icon tile (estilo elegido: teal con icono claro) ---------- */
.ico{
  width:58px;height:58px;border-radius:16px;display:grid;place-items:center;flex:none;
  background:var(--teal-deep);color:var(--teal-light);
}
.ico svg{width:28px;height:28px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.ico.round{border-radius:50%;}

/* ---------- Placeholder de imagen (marcado para el usuario) ---------- */
.ph{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb,var(--teal-light) 55%, var(--cream)) 0 11px,
      color-mix(in srgb,var(--teal-light) 32%, var(--cream)) 11px 22px);
  border:1px solid color-mix(in srgb,var(--teal) 22%, transparent);
  display:grid;place-items:center;min-height:220px;color:var(--teal-deep);
}
.ph .ph-tag{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:12.5px;letter-spacing:.03em;line-height:1.5;text-align:center;
  background:rgba(255,255,255,.82);backdrop-filter:blur(2px);
  padding:9px 14px;border-radius:8px;max-width:80%;
  box-shadow:0 2px 10px rgba(15,110,86,.10);color:var(--teal-deep);
}
.ph .ph-tag b{display:block;font-family:'Hanken Grotesk',sans-serif;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:10.5px;color:var(--coral);margin-bottom:3px;}
.ph.dark{background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb,var(--teal-deep) 88%, #000) 0 11px,
      color-mix(in srgb,var(--teal-deep) 74%, #000) 11px 22px);
  border-color:rgba(159,225,203,.25);}

/* ---------- Pills / chips ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  padding:7px 14px;border-radius:999px;background:var(--teal-tint);color:var(--teal-deep);
  border:1px solid color-mix(in srgb,var(--teal) 18%,transparent);}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--coral);}

/* ---------- FAQ accordion ---------- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;background:none;border:0;padding:24px 4px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  text-align:left;font-family:'Cormorant Garamond',serif;font-size:clamp(20px,2.4vw,25px);font-weight:600;color:var(--teal-deep);}
.faq-q .pm{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--teal-deep) 30%,transparent);
  display:grid;place-items:center;position:relative;transition:.3s var(--ease);}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--teal-deep);border-radius:2px;}
.faq-q .pm::before{width:12px;height:1.8px;}
.faq-q .pm::after{width:1.8px;height:12px;transition:.3s var(--ease);}
.faq-item.open .pm{background:var(--teal-deep);border-color:var(--teal-deep);}
.faq-item.open .pm::before,.faq-item.open .pm::after{background:var(--cream);}
.faq-item.open .pm::after{transform:scaleY(0);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.faq-a p{padding:0 4px 26px;color:var(--ink-soft);max-width:62ch;}

/* ---------- Footer base ---------- */
.foot{background:var(--teal-darkest);color:color-mix(in srgb,var(--cream) 86%,transparent);}
.foot a:hover{color:var(--teal-light);}

/* ---------- Reveal on scroll (suave, con guardia de accesibilidad) ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ---------- Mobile nav shared ---------- */
.nav-toggle{display:none;width:44px;height:44px;border:0;background:none;align-items:center;justify-content:center;}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:22px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:.3s var(--ease);}
.nav-toggle span::before{position:absolute;top:-7px;}
.nav-toggle span::after{position:absolute;top:7px;}
.nav-open .nav-toggle span{background:transparent;}
.nav-open .nav-toggle span::before{top:0;transform:rotate(45deg);}
.nav-open .nav-toggle span::after{top:0;transform:rotate(-45deg);}

@media(max-width:860px){
  .section{padding:64px 0;}
  .nav-toggle{display:flex;}
}