/* ============================================================
   Clínica Rafael Atencia — Home editorial (inspirada en Sandstone)
   Blanco cálido · esquinas rectas · teal de marca
   ============================================================ */
.site{ --pad-sec: clamp(80px, 9vw, 150px); background:var(--paper); }
.ico{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bg-white{ background:var(--bg); }
.bg-sand{ background:var(--sand); }
.bg-ink{ background:var(--ink); color:#e9e3d6; }

/* Editorial helpers */
.kick{ display:inline-flex; align-items:center; gap:12px; font-size:12.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }
.kick::before{ content:""; width:26px; height:1.5px; background:var(--teal-500); }
.bg-ink .kick{ color:#cfc7b6; } .bg-ink .kick::before{ background:var(--teal-300); }
.serif{ font-family:var(--font-serif); font-weight:400; letter-spacing:-.015em; }
.disp{ font-family:var(--font-serif); font-weight:400; line-height:1.02; letter-spacing:-.02em; }

/* ---------- Header flotante (pill) ---------- */
.hd{ position:sticky; top:14px; z-index:70; margin-top:14px; padding-inline:var(--gutter); }
.hd__in{ width:fit-content; display:inline-flex; align-items:center; gap:clamp(38px,6vw,68px);
  height:58px; padding:0 10px 0 18px; background:var(--bg); border:1px solid var(--line); border-radius:14px !important;
  box-shadow:0 12px 30px -14px rgba(40,33,22,.24), 0 2px 8px rgba(40,33,22,.05); transition:box-shadow .3s; }
.hd.scrolled .hd__in{ box-shadow:0 16px 40px -16px rgba(40,33,22,.3), 0 2px 8px rgba(40,33,22,.06); }
.brand{ display:flex; align-items:center; }
.brand img{ height:40px; width:auto; }
.btn svg{ width:19px; height:19px; }
.menu-toggle{ width:42px; height:42px; display:grid; place-items:center; background:transparent; border:0; color:var(--ink); transition:color .2s, transform .4s cubic-bezier(.2,.7,.3,1); }
.menu-toggle:hover{ color:var(--teal-600); transform:rotate(45deg); }
.menu-toggle .dots{ width:26px; height:26px; fill:currentColor; stroke:none; }

/* ---------- Menú overlay ---------- */
.menu{ position:fixed; inset:0; z-index:90; background:var(--paper); display:flex; flex-direction:column;
  padding:14px 0 44px; opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s; overflow:auto; }
body.menu-open .menu{ opacity:1; visibility:visible; }
body.menu-open{ overflow:hidden; }
.menu__top{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.menu__top .brand img{ height:46px; }
.menu__body{ flex:1; display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(30px,5vw,80px); align-items:end; padding-top:clamp(30px,6vh,80px); }
.menu__nav{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.menu__nav a{ display:flex; align-items:baseline; gap:22px; padding:clamp(12px,1.6vw,20px) 0; border-bottom:1px solid var(--line);
  font-family:var(--font-serif); font-weight:400; font-size:clamp(32px,5.4vw,68px); line-height:1; letter-spacing:-.02em; color:var(--ink);
  transition:color .25s, padding-left .25s; opacity:0; transform:translateY(16px); }
.menu__nav a i{ font-style:normal; font-family:var(--font-sans); font-size:14px; font-weight:700; color:var(--teal-600); width:30px; flex:none; }
.menu__nav a:hover{ color:var(--teal-600); padding-left:18px; }
.menu__nav a em{ font-style:italic; color:var(--teal-600); }
body.menu-open .menu__nav a{ opacity:1; transform:none; transition:opacity .5s, transform .5s, color .25s, padding-left .25s; }
body.menu-open .menu__nav a:nth-child(1){ transition-delay:.06s; }
body.menu-open .menu__nav a:nth-child(2){ transition-delay:.12s; }
body.menu-open .menu__nav a:nth-child(3){ transition-delay:.18s; }
body.menu-open .menu__nav a:nth-child(4){ transition-delay:.24s; }
body.menu-open .menu__nav a:nth-child(5){ transition-delay:.30s; }
body.menu-open .menu__nav a:nth-child(6){ transition-delay:.36s; }
.menu__aside{ display:flex; flex-direction:column; gap:22px; padding-bottom:8px; }
.menu__aside h5{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 12px; }
.menu__aside .blk + .blk{ border-top:1px solid var(--line); padding-top:22px; }
.menu__aside p, .menu__aside a.ln{ display:flex; gap:10px; align-items:flex-start; font-size:15.5px; color:var(--ink-soft); margin:0 0 8px; }
.menu__aside a.ln:hover{ color:var(--teal-600); }
.menu__aside .ico{ width:18px; height:18px; color:var(--teal-500); flex:none; margin-top:2px; }
.menu__soc{ display:flex; gap:10px; }
.menu__soc a{ width:42px; height:42px; border:1px solid var(--line-2); display:grid; place-items:center; color:var(--ink); }
.menu__soc a:hover{ background:var(--ink); color:#fff; }

/* ---------- Marquee ---------- */
.marquee{ background:var(--ink); color:var(--sand); overflow:hidden; }
.marquee__track{ display:flex; width:max-content; animation:marq 38s linear infinite; }
.marquee__track > div{ display:flex; align-items:center; }
.marquee span{ display:inline-flex; align-items:center; gap:14px; padding:13px 0; margin-right:48px; font-size:13.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; white-space:nowrap; }
.marquee span::after{ content:"//"; color:var(--teal-300); margin-left:34px; }
@keyframes marq{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* ---------- Section base ---------- */
.sec{ padding-block:var(--pad-sec); }
.sec-line{ border-top:1px solid var(--line); }
.lead-head{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:end; }
.lead-head h2{ font-family:var(--font-serif); font-weight:400; font-size:clamp(34px,4.6vw,64px); line-height:1.0; letter-spacing:-.02em; color:var(--ink); }
.lead-head h2 em{ font-style:italic; color:var(--teal-600); }
.lead-head .aside p{ color:var(--muted); font-size:17px; line-height:1.6; max-width:42ch; }
.lead-head .aside{ padding-bottom:6px; }
.head-c{ max-width:760px; margin-inline:auto; text-align:center; }
.head-c h2{ font-family:var(--font-serif); font-weight:400; font-size:clamp(34px,4.6vw,64px); line-height:1.02; letter-spacing:-.02em; margin-top:18px; }
.head-c h2 em{ font-style:italic; color:var(--teal-600); }
.head-c > p{ color:var(--muted); font-size:18px; margin-top:18px; }

/* ---------- Hero ---------- */
.hero{ padding-top:clamp(40px,5vw,72px); padding-bottom:clamp(28px,4vw,52px); }
.hero__top{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(24px,4vw,60px); align-items:end; }
.hero__hl{ font-family:var(--font-serif); font-weight:400; font-size:clamp(46px,7vw,108px); line-height:.98; letter-spacing:-.025em; color:var(--ink); margin-top:20px; }
.hero__hl em{ font-style:italic; color:var(--teal-600); }
.hero h1.kick{ margin:0; }
.hero__aside p{ color:var(--ink-soft); font-size:clamp(17px,1.3vw,20px); line-height:1.55; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:26px; }
.hero__rating{ display:flex; align-items:center; gap:12px; margin-top:24px; }
.hero__rating .stars svg{ width:18px; height:18px; }
.hero__rating span{ font-size:14.5px; color:var(--muted); } .hero__rating b{ color:var(--ink); }
.hero__media{ margin-top:clamp(36px,5vw,64px); position:relative; overflow:hidden; }
.hero__media img{ width:100%; height:clamp(360px,52vw,620px); object-fit:cover; display:block; }
.hero__tag{ position:absolute; left:0; bottom:0; background:var(--bg); padding:18px 24px; display:flex; align-items:center; gap:13px; max-width:340px; }
.hero__tag .ic{ width:44px; height:44px; background:var(--sand); color:var(--teal-600); display:grid; place-items:center; flex:none; }
.hero__tag .ic .ico{ width:23px; height:23px; }
.hero__tag b{ display:block; font-size:15px; } .hero__tag small{ color:var(--muted); font-size:13px; white-space:nowrap; }
.cta h2{ max-width:14ch; }

/* ---------- Statement ---------- */
.statement{ }
.statement p{ font-family:var(--font-serif); font-weight:400; font-size:clamp(26px,3.4vw,46px); line-height:1.22; letter-spacing:-.015em; color:var(--ink); max-width:24ch; }
.statement p em{ font-style:italic; color:var(--teal-600); }
.statement .sub{ font-family:var(--font-sans); font-size:17px; color:var(--muted); line-height:1.6; max-width:46ch; margin-top:28px; }

/* ---------- Stats grandes ---------- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.stat{ padding:40px 40px 40px 0; border-bottom:1px solid var(--line); }
.stat:not(:nth-child(3n)){ border-right:1px solid var(--line); }
.stat{ padding-left:clamp(0px,2.4vw,40px); }
.stat:nth-child(3n+1){ padding-left:0; }
.stat b{ font-family:var(--font-serif); font-weight:400; font-size:clamp(48px,6vw,84px); line-height:1; color:var(--teal-600); letter-spacing:-.03em; display:flex; align-items:center; gap:12px; }
.stat b svg{ width:34px; height:34px; }
.stat span{ display:block; margin-top:16px; color:var(--muted); font-size:15.5px; line-height:1.55; max-width:34ch; }

/* ---------- Servicios ---------- */
.svcs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:54px; background:var(--line); border:1px solid var(--line); }
.svc{ background:var(--bg); padding:36px 32px; display:flex; flex-direction:column; transition:background .25s; }
.svc:hover{ background:var(--sand); }
.svc__n{ font-family:var(--font-serif); font-style:italic; font-size:17px; color:var(--teal-600); }
.svc__ic{ width:50px; height:50px; background:var(--sand); color:var(--teal-600); display:grid; place-items:center; margin-top:18px; }
.svc:hover .svc__ic{ background:var(--bg); }
.svc__ic .ico{ width:26px; height:26px; stroke-width:1.6; }
.svc h3{ font-size:21px; margin-top:22px; letter-spacing:-.01em; font-weight:700; }
.svc p{ color:var(--muted); font-size:15px; margin-top:10px; flex:1; line-height:1.5; }
.svc__link{ display:inline-flex; align-items:center; gap:7px; margin-top:20px; font-weight:700; font-size:14px; color:var(--teal-600); text-transform:uppercase; letter-spacing:.06em; }
.svc__link .ico{ width:15px; height:15px; transition:transform .2s; }
.svc:hover .svc__link .ico{ transform:translate(2px,-2px); }
.svc-more{ display:flex; flex-wrap:wrap; gap:11px; margin-top:30px; }
.svc--cta{ background:var(--teal-600); justify-content:center; text-align:center; align-items:center; }
.svc--cta:hover{ background:var(--teal-700); }
.svc--cta .svc__ic{ background:rgba(255,255,255,.16); color:#fff; }
.svc--cta h3{ color:#fff; } .svc--cta p{ color:var(--teal-100); flex:0; }
.svc--cta .svc__link{ color:#fff; }
.chip{ display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line-2); padding:11px 18px; font-weight:600; font-size:14.5px; color:var(--ink-soft); }
.chip .ico{ width:18px; height:18px; color:var(--teal-500); }

/* ---------- Proceso 01–04 ---------- */
.proc{ margin-top:56px; border-top:1px solid var(--line); }
.proc__row{ display:grid; grid-template-columns:120px 1fr 360px; gap:clamp(20px,3vw,48px); align-items:center; padding:34px 0; border-bottom:1px solid var(--line); transition:padding .25s; }
.proc__row:hover{ padding-inline:18px; background:var(--sand); }
.proc__n{ font-family:var(--font-serif); font-size:clamp(40px,4vw,60px); color:var(--teal-600); line-height:1; }
.proc__b h3{ font-size:clamp(22px,2.2vw,30px); letter-spacing:-.01em; }
.proc__b p{ color:var(--muted); font-size:16px; margin-top:10px; line-height:1.55; max-width:52ch; }
.proc__img{ height:200px; overflow:hidden; }
.proc__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.16,.8,.3,1); }
.proc__row:hover .proc__img img{ transform:scale(1.05); }

/* ---------- Qué tratamos (lista editorial por zonas) ---------- */
.areas{ margin-top:50px; border-top:1px solid var(--line); }
.area{ display:grid; grid-template-columns:300px 1fr; gap:clamp(24px,4vw,64px); padding:30px 0; border-bottom:1px solid var(--line); align-items:start; transition:background .25s, padding .25s; }
.area:hover{ background:var(--sand); padding-inline:18px; }
.area__h{ display:flex; align-items:center; gap:14px; }
.area__n{ width:48px; height:48px; background:var(--sand); color:var(--teal-600); display:grid; place-items:center; flex:none; }
.area:hover .area__n{ background:var(--bg); }
.area__n .ico{ width:24px; height:24px; }
.area__h h3{ font-size:20px; letter-spacing:-.01em; }
.area__tags{ display:flex; flex-wrap:wrap; gap:8px; padding-top:4px; }
.area__tags span{ font-size:13.5px; font-weight:500; color:var(--teal-700); background:var(--sand); padding:7px 14px; white-space:nowrap; }
.area:hover .area__tags span{ background:var(--bg); }
.areas-note{ margin-top:34px; color:var(--muted); font-size:15px; display:flex; align-items:center; gap:10px; }
.areas-note .ico{ width:18px; height:18px; color:var(--teal-500); flex:none; }

/* ---------- Galería instalaciones ---------- */
.gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:50px; }
.gal figure{ margin:0; overflow:hidden; background:var(--sand); aspect-ratio:1/1; position:relative; }
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16,.8,.3,1); }
.gal figure:hover img{ transform:scale(1.05); }
.gal figcaption{ position:absolute; left:0; bottom:0; background:var(--bg); padding:9px 15px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--ink-soft); }
.gal-feats{ display:flex; flex-wrap:wrap; gap:14px 30px; margin-top:32px; }
.gal-feats div{ display:flex; align-items:center; gap:11px; font-weight:600; color:var(--ink-soft); font-size:15.5px; }
.gal-feats .ic{ width:40px; height:40px; background:var(--sand); color:var(--teal-600); display:grid; place-items:center; flex:none; }
.gal-feats .ic .ico{ width:21px; height:21px; }

/* ---------- Equipo ---------- */
.team{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px 18px; margin-top:52px; }
.tm__ph{ position:relative; overflow:hidden; background:var(--sand); aspect-ratio:1/1; }
.tm__ph img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .6s cubic-bezier(.16,.8,.3,1); }
.tm:hover .tm__ph img{ transform:scale(1.04); }
.tm h4{ font-size:16.5px; margin-top:15px; letter-spacing:-.01em; }
.tm span{ display:block; color:var(--teal-600); font-size:12.5px; font-weight:600; margin-top:4px; text-transform:uppercase; letter-spacing:.06em; }

/* ---------- Testimonios (citas grandes) ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:54px; background:var(--line); border:1px solid var(--line); }
.quote{ background:var(--bg); padding:38px 34px; display:flex; flex-direction:column; }
.quote .stars{ margin-bottom:22px; } .quote .stars svg{ width:17px; height:17px; }
.quote blockquote{ margin:0; font-family:var(--font-serif); font-weight:400; font-size:clamp(20px,1.7vw,24px); line-height:1.4; color:var(--ink); flex:1; letter-spacing:-.01em; }
.quote__who{ display:flex; align-items:center; gap:12px; margin-top:28px; padding-top:22px; border-top:1px solid var(--line); }
.quote__av{ width:44px; height:44px; background:var(--teal-600); color:#fff; display:grid; place-items:center; font-weight:800; font-size:16px; flex:none; }
.quote__who b{ display:block; font-size:14.5px; } .quote__who small{ color:var(--muted); font-size:12.5px; }
.quote__who .g{ width:18px; height:18px; margin-left:auto; }

/* ---------- CTA ---------- */
.cta{ background:var(--ink); color:#efe9dc; padding:clamp(56px,7vw,110px) clamp(28px,5vw,80px); position:relative; overflow:hidden; }
.cta__in{ max-width:780px; }
.cta h2{ font-family:var(--font-serif); font-weight:400; font-size:clamp(34px,4.6vw,64px); line-height:1.02; letter-spacing:-.02em; color:#fff; margin-top:18px; }
.cta h2 em{ font-style:italic; color:var(--teal-300); }
.cta p{ color:#b9b1a0; margin-top:20px; font-size:18px; max-width:48ch; }
.cta__btns{ display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }

/* ---------- Footer ---------- */
.ft{ background:#1c1c1c; color:#b3aa99; padding-top:0; }
.ft a{ color:#b3aa99; } .ft a:hover{ color:#fff; }
.ft__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:40px; padding-block:64px 52px; border-top:1px solid rgba(255,255,255,.1); }
.ft__logo{ height:56px; width:auto; filter:brightness(0) invert(1); opacity:.9; }
.ft__about{ margin-top:20px; font-size:15px; color:#9b927f; max-width:34ch; line-height:1.6; }
.ft__soc{ display:flex; gap:10px; margin-top:22px; }
.ft__soc a{ width:42px; height:42px; border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; transition:background .2s; }
.ft__soc a:hover{ background:rgba(255,255,255,.08); }
.ft h4{ color:#fff; font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.ft ul{ list-style:none; padding:0; margin:20px 0 0; display:grid; gap:12px; font-size:15px; }
.ft__contact li{ display:flex; gap:12px; align-items:flex-start; }
.ft__contact .ico{ width:19px; height:19px; color:var(--teal-300); flex:none; margin-top:2px; }
.ft__bottom{ border-top:1px solid rgba(255,255,255,.1); padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:13.5px; color:#7e7567; flex-wrap:wrap; }
.ft__bottom a{ color:#9b927f; }
.ft__credit{ border-top:1px solid rgba(255,255,255,.1); padding:20px 0 4px; text-align:center; font-size:13px; color:#7e7567; letter-spacing:.02em; }
.ft__credit a{ color:#cfc7b6; font-weight:600; }
.ft__credit a:hover{ color:#fff; }

/* ---------- WhatsApp float ---------- */
.wa-float{ position:fixed; right:22px; bottom:22px; z-index:80; width:60px; height:60px; border-radius:50%; background:var(--whatsapp); color:#fff; display:grid; place-items:center; box-shadow:0 12px 30px -6px rgba(31,174,84,.6); transition:transform .2s; }
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:32px; height:32px; }

/* ---------- Esquinas rectas en todo excepto botones ---------- */
.site *:not(.btn):not(.wa-float):not(.hd__in):not(.menu-toggle), .ft *:not(.btn){ border-radius:0 !important; }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .svcs{ grid-template-columns:repeat(2,1fr); }
  .quotes{ grid-template-columns:1fr 1fr; }
  .team{ grid-template-columns:repeat(4,1fr); }
  .stats{ grid-template-columns:1fr 1fr; }
  .ft__grid{ grid-template-columns:1fr 1fr; }
  .proc__row{ grid-template-columns:90px 1fr; }
  .proc__img{ display:none; }
}
@media (max-width:860px){
  .menu__body{ grid-template-columns:1fr; gap:36px; align-items:start; }
  .area{ grid-template-columns:1fr; gap:14px; }
  .hero__top{ grid-template-columns:1fr; }
  .hero__media img{ height:clamp(280px,64vw,440px); }
  .lead-head{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .stat{ border-right:0 !important; padding-left:0 !important; }
  .gal{ grid-template-columns:repeat(2,1fr); }
  .team{ grid-template-columns:repeat(3,1fr); }
  .ft__grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .svcs{ grid-template-columns:1fr; }
  .quotes{ grid-template-columns:1fr; }
  .team{ grid-template-columns:repeat(2,1fr); }
  .proc__row{ grid-template-columns:64px 1fr; gap:16px; }
}