/* ═══════════════════════════════════════════════════════════════
   CLÍNICA DR. CORBELLA — Sistema visual "Ficha quirúrgica"
   Paleta tomada del manual de marca: azul institucional, cian
   instrumental, grafito. Luz de quirófano como fondo.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Marca */
  --blue-900:#062B49;
  --blue-800:#08355A;
  --blue-700:#0A4F86;
  --blue-600:#0F63A4;
  --blue-500:#1F79BE;
  --cyan-500:#35B0C4;
  --cyan-400:#5AC4D6;
  --cyan-200:#B9E4EC;

  --ink:#1E2226;
  --ink-2:#4A525A;
  --ink-3:#79838C;

  --paper:#FFFFFF;
  --light:#F4F7F9;
  --light-2:#E7EDF2;
  --line:#D8E2E9;
  --line-2:#C3D2DC;

  --wa:#25D366;
  --wa-d:#128C7E;

  /* Tipografía */
  --f: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Ritmo */
  --pad: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1240px;
  --sec-y: clamp(4.5rem, 10vw, 9rem);

  --arw: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M12.5 5.5 19 12l-6.5 6.5'/%3E%3C/svg%3E");

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-2: cubic-bezier(.22,.61,.36,1);
  --hdr-h: 84px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 12px)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  font-family:var(--f);
  font-variation-settings:"wdth" 100;
  font-size:clamp(1rem,.96rem + .18vw,1.0625rem);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; line-height:1.02; letter-spacing:-.03em; font-weight:700}
p{margin:0}
ul,ol,dl,dd{margin:0; padding:0; list-style:none}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}

.skip{position:fixed; left:-9999px; top:0; z-index:200; background:var(--blue-700); color:#fff; padding:.75rem 1.25rem}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--cyan-500); outline-offset:3px; border-radius:2px}

.ico{width:1.15em; height:1.15em; fill:currentColor; flex:none}
.ico--arw,.ico--arw2{fill:none}

/* ─────────────── Botones ─────────────── */
.btn{
  --bg:transparent; --fg:currentColor; --bd:currentColor;
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.78rem 1.35rem; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  font-weight:600; font-size:.9375rem; letter-spacing:-.01em; text-decoration:none; cursor:pointer;
  border-radius:2px; overflow:hidden; isolation:isolate; white-space:nowrap;
  transition:color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--fill,var(--cyan-500));
  transform:translateY(101%); transition:transform .45s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:active{transform:translateY(1px)}
.btn--lg{padding:1rem 1.7rem; font-size:1rem}

.btn--wa{--bg:var(--wa); --fg:#04361F; --bd:var(--wa); --fill:#1ebe5b; box-shadow:0 6px 24px -12px rgba(18,140,126,.9)}
.btn--wa:hover{color:#fff; box-shadow:0 14px 34px -14px rgba(18,140,126,.85); transform:translateY(-2px)}

.btn--ghost{--bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.5); --fill:#fff}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--blue-800); border-color:#fff}
.btn--ghost .ico--arw{transition:transform .4s var(--ease)}
.btn--ghost:hover .ico--arw{transform:translateY(3px)}

.btn--solid{--bg:var(--blue-700); --fg:#fff; --bd:var(--blue-700); --fill:var(--cyan-500)}
.btn--solid:hover{color:var(--blue-900); border-color:var(--cyan-500)}
.btn--solid .ico--arw2{transition:transform .4s var(--ease)}
.btn--solid:hover .ico--arw2{transform:translateX(4px)}

/* ─────────────── Header ─────────────── */
.hdr{
  position:fixed; inset:0 0 auto; z-index:90;
  background:rgba(255,255,255,0); border-bottom:1px solid transparent;
  transition:background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.hdr.is-stuck{background:rgba(255,255,255,.94); backdrop-filter:blur(14px) saturate(1.4); border-bottom-color:var(--line); box-shadow:0 10px 30px -24px rgba(6,43,73,.6)}
.hdr__in{
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--pad);
  height:var(--hdr-h); display:flex; align-items:center; gap:2rem;
}
/* Isologo sobre fondo transparente: el isotipo conserva sus colores de marca y el
   logotipo se cambia entre versión oscura (header sólido) y blanca (sobre foto). */
.brand{flex:none; display:flex; align-items:center; gap:.7rem; line-height:0; text-decoration:none}
.brand__mark{
  width:auto; height:clamp(40px,3.6vw,50px); filter:drop-shadow(0 2px 10px rgba(4,32,58,.35));
  transition:height .4s var(--ease), filter .4s var(--ease);
}
.hdr.is-stuck .brand__mark{height:clamp(36px,3.2vw,44px); filter:none}
.brand__word{position:relative; display:block; height:clamp(30px,2.7vw,38px); aspect-ratio:900/575; transition:height .4s var(--ease)}
.hdr.is-stuck .brand__word{height:clamp(27px,2.4vw,34px)}
.brand__word img{
  height:100%; width:auto; position:absolute; left:0; top:0;
  transition:opacity .4s var(--ease);
}
.brand__word-dark{opacity:0}
.brand__word-light{opacity:1; filter:drop-shadow(0 2px 10px rgba(4,32,58,.45))}
.hdr.is-stuck .brand__word-dark{opacity:1}
.hdr.is-stuck .brand__word-light{opacity:0}
.hdr.is-stuck .hdr__logo img{width:clamp(120px,10vw,150px)}
.hdr__in{gap:1.25rem}
@media (min-width:1280px){ .hdr__in{gap:2rem} }

.nav{margin-left:auto; display:flex; align-items:center; gap:2rem}
.nav__list{display:flex; align-items:center; gap:.25rem}
.nav__a{
  position:relative; display:block; padding:.5rem .7rem; text-decoration:none;
  font-size:.8125rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.88); transition:color .3s var(--ease); white-space:nowrap;
}
.hdr.is-stuck .nav__a{color:var(--ink-2)}
.nav__a::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.28rem; height:1.5px;
  background:var(--cyan-500); transform:scaleX(0); transform-origin:left; transition:transform .38s var(--ease);
}
.nav__a:hover::after,.nav__a.is-active::after{transform:scaleX(1)}
.nav__a.is-active{color:#fff}
.hdr.is-stuck .nav__a.is-active,.hdr.is-stuck .nav__a:hover{color:var(--blue-700)}

.nav__foot{display:flex; align-items:center; gap:1.15rem}
.nav__foot .btn--wa{padding:.6rem 1rem; font-size:.8125rem}

.social{display:flex; align-items:center; gap:.5rem}
.social a{
  display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.28); color:rgba(255,255,255,.9); text-decoration:none;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.hdr.is-stuck .social a{border-color:var(--line); color:var(--ink-2)}
.social a:hover{background:var(--blue-700); border-color:var(--blue-700); color:#fff; transform:translateY(-2px)}
.social .ico{width:17px; height:17px}

.hdr__progress{height:2px; background:var(--cyan-500); width:0; transition:width .1s linear}

.burger{display:none; margin-left:auto; width:44px; height:44px; background:none; border:0; padding:10px; cursor:pointer}
.burger span{display:block; height:2px; background:#fff; border-radius:2px; transition:transform .4s var(--ease), opacity .3s, background .4s}
.burger span+span{margin-top:6px}
.hdr.is-stuck .burger span{background:var(--ink)}
.burger[aria-expanded="true"] span{background:var(--ink)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ─────────────── Hero ─────────────── */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--blue-900)}
.hero__stage{position:absolute; inset:0}
.slide{position:absolute; inset:0; margin:0; opacity:0; transition:opacity 1.2s var(--ease-2)}
.slide img{width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.06); transition:transform 8s linear}
.slide.is-on{opacity:1}
.slide.is-on img{transform:scale(1)}

.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(6,43,73,.96) 0%, rgba(6,43,73,.7) 38%, rgba(6,43,73,.25) 70%, rgba(6,43,73,.6) 100%),
    linear-gradient(to right, rgba(6,43,73,.85) 0%, rgba(6,43,73,.25) 55%, transparent 100%);
}

.hero__in{
  position:relative; width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:calc(var(--hdr-h) + 4rem) var(--pad) clamp(3.5rem,8vh,6rem);
  color:#fff;
}
.hero__kicker{
  display:flex; align-items:center; gap:.85rem;
  font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan-200); margin-bottom:1.6rem;
}
.rule{display:block; width:clamp(28px,5vw,64px); height:1px; background:var(--cyan-500); transform-origin:left; animation:ruleIn 1s var(--ease) .2s both}
@keyframes ruleIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.hero__h1{
  font-size:clamp(2.9rem, 8.4vw, 6rem);
  line-height:.96; letter-spacing:-.045em; font-weight:500;
  max-width:16ch; text-wrap:balance;
}
.hero__h1 .ln{display:block; overflow:hidden}
.hero__h1 .ln > *{display:inline-block}
.hero__h1 em{font-style:normal; font-weight:800; font-variation-settings:"wdth" 88}
.hero__h1 strong{font-weight:800; color:var(--cyan-400)}
.hero__h1 .ln{animation:lnUp 1s var(--ease) both}
.hero__h1 .ln:nth-child(1){animation-delay:.15s}
.hero__h1 .ln:nth-child(2){animation-delay:.27s}
.hero__h1 .ln:nth-child(3){animation-delay:.39s}
@keyframes lnUp{from{clip-path:inset(0 0 105% 0); transform:translateY(.35em)} to{clip-path:inset(0 0 -10% 0); transform:none}}

.hero__sub{
  margin-top:1.6rem; max-width:52ch; font-size:clamp(1rem,.95rem+.3vw,1.15rem);
  color:rgba(255,255,255,.82); animation:fadeUp .9s var(--ease) .55s both;
}
.hero__cta{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.3rem; animation:fadeUp .9s var(--ease) .68s both}
@keyframes fadeUp{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}

.hero__idx{
  position:absolute; right:var(--pad); bottom:clamp(3.5rem,8vh,6rem); z-index:2;
  display:flex; flex-direction:column; gap:.85rem; align-items:flex-end;
}
.hero__idx button{
  display:flex; align-items:center; gap:.7rem; background:none; border:0; padding:.2rem 0; cursor:pointer;
  color:rgba(255,255,255,.5); font-size:.6875rem; font-weight:700; letter-spacing:.1em;
  transition:color .35s var(--ease);
}
.hero__idx button:hover,.hero__idx button.is-on{color:#fff}
.hero__idx .bar{display:block; width:46px; height:2px; background:rgba(255,255,255,.25); overflow:hidden}
.hero__idx .bar i{display:block; height:100%; width:100%; background:var(--cyan-400); transform:scaleX(0); transform-origin:left}
.hero__idx button.is-on .bar i{animation:barGo 6s linear forwards}
@keyframes barGo{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ─────────────── Franja credenciales ─────────────── */
.strip{background:var(--blue-800); color:#fff}
.strip__in{display:grid; grid-template-columns:repeat(4,1fr)}
.strip__i{padding:clamp(1.75rem,3.5vw,2.75rem) clamp(1rem,2vw,1.75rem); border-left:1px solid rgba(255,255,255,.14)}
.strip__i:first-child{border-left:0; padding-left:0}
.strip__n{
  display:block; font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:800; letter-spacing:-.04em;
  color:var(--cyan-400); font-variation-settings:"wdth" 90;
}
.strip__l{display:block; margin-top:.5rem; font-size:.8125rem; line-height:1.45; color:rgba(255,255,255,.66)}

/* ─────────────── Encabezados de sección ─────────────── */
.shead{margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.shead__k{display:flex; align-items:center; gap:.85rem; font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-600)}
.shead__k .rule{background:var(--cyan-500); animation:none}
.shead__k--lt{color:var(--cyan-200)}
.shead__h{margin-top:1rem; font-size:clamp(2.2rem,5.6vw,4rem); font-weight:700; letter-spacing:-.045em; font-variation-settings:"wdth" 92}
.shead__d{margin-top:1rem; color:var(--ink-2); max-width:60ch}

.sec{padding-block:var(--sec-y); position:relative}
.sec--surg{background:var(--paper)}

/* ─────────────── Bloques de procedimiento ─────────────── */
.proc{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(1.75rem,4vw,4.5rem); align-items:center;
  padding-block:clamp(2rem,4vw,3.25rem); border-top:1px solid var(--line);
}
.proc:first-of-type{border-top:0; padding-top:0}
.proc--flip .proc__media{order:2}

.proc__media{position:relative; overflow:hidden; background:var(--light-2)}
.proc__media img{width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform 1s var(--ease), filter .7s var(--ease); filter:saturate(.85)}
.proc:hover .proc__media img{transform:scale(1.045); filter:saturate(1)}
.proc__num{
  position:absolute; left:0; top:0; z-index:2; padding:.55rem .95rem;
  background:var(--blue-700); color:#fff; font-size:.75rem; font-weight:700; letter-spacing:.1em;
}

.proc__h{font-size:clamp(1.45rem,2.8vw,2.15rem); font-weight:500; letter-spacing:-.035em; line-height:1.12; text-wrap:balance}
.proc__h span{font-weight:800; color:var(--blue-700); display:block}

.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem}
.chips a{
  display:block; padding:.42rem .85rem; border:1px solid var(--line-2); border-radius:100px;
  font-size:.8125rem; font-weight:500; color:var(--ink-2); text-decoration:none;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.chips a:hover{background:var(--blue-700); border-color:var(--blue-700); color:#fff; transform:translateY(-2px)}

.lnk{
  display:inline-flex; align-items:center; gap:.55rem; margin-top:1.75rem;
  font-size:.9375rem; font-weight:700; color:var(--blue-700); text-decoration:none;
  padding-bottom:.3rem; border-bottom:1.5px solid var(--line-2);
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.lnk .ico{transition:transform .4s var(--ease)}
.lnk:hover{border-color:var(--cyan-500); color:var(--blue-900)}
.lnk:hover .ico{transform:translateX(5px)}

/* ─────────────── Índice por categoría (tabs) ─────────────── */
.cat{margin-top:clamp(3rem,6vw,5rem); border:1px solid var(--line); background:var(--light)}
#indice-cirugias{scroll-margin-top:calc(var(--hdr-h) + 16px)}
.cat__tabs{position:relative; display:flex; flex-wrap:wrap; border-bottom:1px solid var(--line); background:var(--paper)}
.cat__tabs button{
  position:relative; flex:1 1 auto; background:none; border:0; cursor:pointer;
  padding:1.15rem 1.25rem; font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); transition:color .3s var(--ease), background .3s var(--ease);
}
.cat__tabs button:hover{color:var(--blue-700); background:var(--light)}
.cat__tabs button[aria-selected="true"]{color:var(--blue-800)}
.cat__ink{
  position:absolute; bottom:-1px; left:0; height:2px; width:0; background:var(--blue-700);
  transition:transform .5s var(--ease), width .5s var(--ease);
}

.cat__panels{padding:clamp(1.75rem,4vw,3rem)}
.pane{display:none}
.pane.is-on{display:block; animation:paneIn .55s var(--ease) both}
@keyframes paneIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.pane__h{font-size:clamp(1.4rem,2.6vw,2rem); font-weight:700; letter-spacing:-.04em; color:var(--blue-800)}
.pane__cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); margin-top:1.75rem}
.pane__sub{font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-600); padding-bottom:.75rem; border-bottom:1px solid var(--line)}

.idx{counter-reset:i; margin-top:.25rem}
.idx.idx--b{counter-reset:i 0}
.idx--wide{margin-top:1.75rem; border-top:1px solid var(--line)}
.idx li{counter-increment:i; border-bottom:1px solid var(--line); position:relative; overflow:hidden}
.idx li::before{
  content:counter(i,decimal-leading-zero);
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  font-size:.75rem; font-weight:700; color:var(--ink-3); transition:color .35s var(--ease);
}
.idx li::after{
  content:""; position:absolute; inset:0; background:var(--blue-700);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); z-index:0;
}
.idx li span,.idx li a{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.95rem 1rem .95rem 2.6rem; font-size:clamp(.98rem,1.3vw,1.1rem); font-weight:500;
  color:inherit; text-decoration:none;
  transition:color .35s var(--ease), padding .45s var(--ease);
}
.idx li a::after{
  content:""; width:15px; height:15px; flex:none; opacity:0; transform:translateX(-8px);
  background:currentColor; transition:opacity .35s var(--ease), transform .4s var(--ease);
  -webkit-mask:var(--arw) center/contain no-repeat; mask:var(--arw) center/contain no-repeat;
}
.idx li:hover::after,.idx li:focus-within::after{transform:scaleX(1)}
.idx li:hover span,.idx li:hover a,.idx li:focus-within a{color:#fff; padding-left:3.1rem}
.idx li:hover a::after,.idx li:focus-within a::after{opacity:1; transform:none}
.idx li:hover::before,.idx li:focus-within::before{color:rgba(255,255,255,.7); z-index:1}

/* ─────────────── Doctor ─────────────── */
.sec--dr{background:var(--blue-800); color:#fff; overflow:hidden}
.sec--dr::before{
  content:""; position:absolute; right:-8%; top:-10%; width:52vw; height:120%;
  background:radial-gradient(ellipse at 60% 40%, rgba(53,176,196,.18), transparent 62%);
  pointer-events:none;
}
.dr{position:relative; display:grid; grid-template-columns:.85fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.dr__media{position:relative}
.dr__media img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top center; border-radius:2px}
.dr__media::after{
  content:""; position:absolute; inset:0; border:1px solid rgba(90,196,214,.45);
  transform:translate(18px,18px); pointer-events:none; transition:transform .6s var(--ease);
}
.dr__media:hover::after{transform:translate(10px,10px)}
.dr__media img.dr__sacper{
  position:absolute; right:-16px; bottom:-16px; width:clamp(84px,8.5vw,116px); height:auto;
  aspect-ratio:1/1; object-fit:contain; background:#fff; padding:.55rem; border-radius:2px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.75);
  transition:transform .5s var(--ease);
}
.dr__media:hover img.dr__sacper{transform:translateY(-4px)}

.dr__h{margin-top:1rem; font-size:clamp(2rem,4.6vw,3.4rem); font-weight:400; letter-spacing:-.045em; line-height:1}
.dr__h strong{font-weight:800; font-variation-settings:"wdth" 88}

.prose{margin-top:1.9rem; display:grid; gap:1rem; max-width:62ch; color:rgba(255,255,255,.8); font-size:1.02rem}
.prose a{color:var(--cyan-400); text-underline-offset:3px}
.prose a:hover{color:#fff}

.creds{margin-top:2.25rem; display:grid; gap:0; border-top:1px solid rgba(255,255,255,.16)}
.creds li{
  position:relative; padding:.9rem 0 .9rem 2rem; border-bottom:1px solid rgba(255,255,255,.16);
  font-size:.95rem; color:rgba(255,255,255,.9); transition:padding-left .4s var(--ease), color .3s var(--ease);
}
.creds li::before{
  content:""; position:absolute; left:2px; top:1.4rem; width:8px; height:8px;
  border-top:1.5px solid var(--cyan-400); border-right:1.5px solid var(--cyan-400);
  transform:rotate(45deg); transition:border-color .3s var(--ease);
}
.creds li:hover{padding-left:2.5rem; color:#fff}

/* ─────────────── Clínica ─────────────── */
.sec--cli{background:var(--light)}
.fac{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line)}
.fac li{
  position:relative; background:var(--paper); padding:clamp(1.75rem,3.2vw,2.5rem);
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.fac li::before{
  content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--cyan-500);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.fac li:hover{background:#fff; transform:translateY(-3px)}
.fac li:hover::before{transform:scaleX(1)}
.fac__i{width:34px; height:34px; fill:none; stroke:var(--blue-600); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition:stroke .35s var(--ease), transform .5s var(--ease)}
.fac li:hover .fac__i{stroke:var(--cyan-500); transform:translateY(-2px)}
.fac h3{margin-top:1.25rem; font-size:1.12rem; font-weight:700; letter-spacing:-.025em}
.fac p{margin-top:.55rem; font-size:.9rem; color:var(--ink-2); line-height:1.55}

/* ─────────────── Contacto ─────────────── */
.sec--ct{background:var(--blue-900); color:#fff}
.ct{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2.5rem,6vw,5.5rem)}
.ct__h{margin-top:1rem; font-size:clamp(2.2rem,5.2vw,3.6rem); font-weight:700; letter-spacing:-.045em; font-variation-settings:"wdth" 92}
.ct__lead{margin-top:1.4rem; max-width:48ch; color:rgba(255,255,255,.78)}
.ct__lead a{color:var(--cyan-400); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(90,196,214,.4)}
.ct__lead a:hover{color:#fff; border-color:#fff}

.ct__data{margin-top:2.5rem; display:grid; gap:0; border-top:1px solid rgba(255,255,255,.16)}
.ct__data > div{display:grid; grid-template-columns:104px 1fr; gap:1rem; padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.16)}
.ct__data dt{font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan-200); padding-top:.28rem}
.ct__data dd a{text-decoration:none; color:#fff; transition:color .3s var(--ease)}
.ct__data dd a:hover{color:var(--cyan-400)}

.social--lg{margin-top:2rem; flex-wrap:wrap; gap:.7rem}
.social--lg a{width:auto; height:auto; border-radius:100px; padding:.6rem 1.1rem; gap:.6rem; display:inline-flex; align-items:center; font-size:.875rem; font-weight:600; border-color:rgba(255,255,255,.24)}
.social--lg a:hover{background:var(--cyan-500); border-color:var(--cyan-500); color:var(--blue-900)}

/* Formulario */
.form{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem 1.25rem; align-content:start}
.field{position:relative}
.field--full{grid-column:1/-1}
.field input,.field textarea,.field select{
  width:100%; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.28);
  padding:1.35rem 0 .65rem; color:#fff; border-radius:0; outline:none; resize:vertical;
  transition:border-color .35s var(--ease);
}
.field select{padding-top:1.35rem; -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.6) 50%),linear-gradient(135deg,rgba(255,255,255,.6) 50%,transparent 50%);
  background-position:calc(100% - 12px) 1.75rem, calc(100% - 7px) 1.75rem; background-size:5px 5px; background-repeat:no-repeat;
}
.field select option{color:var(--ink); background:#fff}
.field label{
  position:absolute; left:0; top:1.35rem; pointer-events:none; color:rgba(255,255,255,.6); font-size:1rem;
  transition:transform .35s var(--ease), color .35s var(--ease), font-size .35s var(--ease);
  transform-origin:left top;
}
.field .opt{color:rgba(255,255,255,.4)}
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label,
.lbl-static{transform:translateY(-1.35rem) scale(.75); color:var(--cyan-400)}
.field input:focus,.field textarea:focus,.field select:focus{border-bottom-color:var(--cyan-500)}
.field.is-bad input,.field.is-bad textarea{border-bottom-color:#FF8A80}
.err{min-height:0; font-size:.78rem; color:#FF8A80; margin-top:.4rem; opacity:0; transform:translateY(-4px); transition:opacity .3s, transform .3s}
.field.is-bad .err{opacity:1; transform:none}

.form__foot{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; margin-top:.5rem}
.form__note{font-size:.85rem; color:rgba(255,255,255,.6)}
.form__note a{color:var(--wa); font-weight:600; text-decoration:none}
.form__note a:hover{text-decoration:underline}
.form__ok{grid-column:1/-1; padding:.9rem 1.1rem; border:1px solid rgba(90,196,214,.5); background:rgba(53,176,196,.12); font-size:.9rem; color:var(--cyan-200)}
.form__err{grid-column:1/-1; padding:.9rem 1.1rem; border:1px solid rgba(255,138,128,.5); background:rgba(255,138,128,.12); font-size:.9rem; color:#FFB4AB}
.form__err a{color:var(--wa); font-weight:600; text-decoration:none}
.form__err a:hover{text-decoration:underline}

/* ─────────────── Footer ─────────────── */
.ft{background:#04203A; color:rgba(255,255,255,.6); border-top:1px solid rgba(255,255,255,.12); padding-block:clamp(2.5rem,5vw,3.5rem)}
/* Todo el pie centrado en una columna. El logo de la clínica es el principal y el
   sello SACPER va a su lado, más chico y separado por una línea sutil. */
.ft__in{display:grid; justify-items:center; text-align:center; gap:1.35rem}
.ft__brand{display:flex; align-items:center; justify-content:center; gap:clamp(1rem,3vw,1.75rem); flex-wrap:wrap}
.brand--ft{gap:.9rem}
.brand--ft .brand__mark{height:clamp(56px,7vw,68px); filter:none}
.brand--ft .brand__word-light{height:clamp(42px,5.2vw,52px); width:auto; position:static; filter:none}
.ft__sep{width:1px; align-self:stretch; min-height:48px; background:rgba(255,255,255,.16)}
/* El sello SACPER es dorado sobre transparente: se lee sobre el azul sin placa. */
.ft__sacper{
  height:clamp(48px,5.5vw,58px); width:auto; opacity:.9;
  transition:transform .45s var(--ease), opacity .35s var(--ease);
}
.ft__sacper:hover{transform:translateY(-3px); opacity:1}

@media (max-width:520px){
  .ft__sep{display:none}
  .ft__brand{gap:1rem}
}
.ft__nav{display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem 1.5rem}
.ft__nav a{font-size:.8125rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color:rgba(255,255,255,.7); transition:color .3s var(--ease)}
.ft__nav a:hover{color:var(--cyan-400)}
.ft__addr{font-size:.9rem; color:rgba(255,255,255,.75)}
.ft__c{font-size:.78rem; color:rgba(255,255,255,.45)}

/* ─────────────── WhatsApp flotante ─────────────── */
.wafab{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:95;
  display:inline-flex; align-items:center; gap:0; height:60px; padding:0 14px;
  background:var(--wa); color:#04361F; border-radius:100px; text-decoration:none;
  box-shadow:0 14px 34px -12px rgba(18,140,126,.75), 0 2px 8px rgba(0,0,0,.14);
  transform:translateY(120px) scale(.9); opacity:0;
  transition:transform .6s var(--ease), opacity .5s var(--ease), box-shadow .4s var(--ease), background .3s;
}
.wafab.is-in{transform:none; opacity:1}
.wafab:hover{background:#1ebe5b; box-shadow:0 20px 44px -14px rgba(18,140,126,.9)}
.wafab__ico{width:32px; height:32px; fill:currentColor; flex:none}
.wafab__txt{
  max-width:0; overflow:hidden; white-space:nowrap; font-weight:700; font-size:.95rem;
  transition:max-width .5s var(--ease), margin .5s var(--ease), opacity .35s var(--ease); opacity:0;
}
.wafab:hover .wafab__txt,.wafab:focus-visible .wafab__txt{max-width:140px; margin-left:.6rem; margin-right:.4rem; opacity:1}
.wafab__pulse{
  position:absolute; inset:0; border-radius:100px; border:2px solid var(--wa);
  animation:pulse 2.6s var(--ease) infinite; pointer-events:none;
}
@keyframes pulse{0%{transform:scale(1); opacity:.7} 70%{transform:scale(1.28); opacity:0} 100%{opacity:0}}

/* ═══════════ Páginas de procedimiento ═══════════ */
.is-doc{background:var(--paper)}

/* Cabecera de la página */
.phero{position:relative; overflow:hidden; background:var(--blue-900); isolation:isolate}
.phero__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%;
  filter:grayscale(.35) saturate(.8); animation:pheroIn 1.4s var(--ease) both;
}
@keyframes pheroIn{from{transform:scale(1.08)}to{transform:scale(1)}}
.phero__veil{
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(6,43,73,.97) 0%, rgba(6,43,73,.86) 46%, rgba(6,43,73,.45) 100%);
}
.phero__in{position:relative; padding-top:calc(var(--hdr-h) + clamp(2.5rem,6vw,4.5rem)); padding-bottom:clamp(2.5rem,6vw,4.5rem); color:#fff}

.crumb{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.78rem; font-weight:600; letter-spacing:.05em; color:rgba(255,255,255,.55)}
.crumb a{text-decoration:none; color:inherit; transition:color .3s var(--ease)}
.crumb a:hover{color:var(--cyan-400)}
.crumb span{opacity:.5}

.phero__h{
  margin-top:1.1rem; font-size:clamp(2.1rem,5.2vw,3.8rem); font-weight:700;
  letter-spacing:-.045em; font-variation-settings:"wdth" 92; max-width:18ch; text-wrap:balance;
  animation:lnUp .95s var(--ease) .15s both;
}
.phero__cat{
  margin-top:.9rem; display:inline-flex; align-items:center; gap:.6rem;
  font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-200);
}
.phero__cat::before{content:""; width:clamp(24px,4vw,48px); height:1px; background:var(--cyan-500)}

/* Ficha técnica: datos clave del procedimiento en fila de íconos */
.ficha{background:var(--light); border-bottom:1px solid var(--line)}
.ficha__in{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(1.5rem,3vw,2.5rem) 1rem; padding-block:clamp(2rem,4vw,2.75rem);
}
.ficha__i{display:grid; justify-items:center; text-align:center; gap:.7rem}
.ficha__ic{
  width:64px; height:64px; border-radius:50%; background:var(--blue-800);
  display:grid; place-items:center; color:var(--cyan-400);
  box-shadow:0 12px 28px -16px rgba(6,43,73,.7);
  transition:transform .4s var(--ease), background .4s var(--ease);
}
.ficha__i:hover .ficha__ic{transform:translateY(-3px); background:var(--blue-700)}
.ficha__ic svg{width:30px; height:30px}
.ficha__lb{font-size:.8125rem; font-weight:700; letter-spacing:.02em; color:var(--blue-800); line-height:1.25}
.ficha__v{font-size:.85rem; color:var(--ink-2); line-height:1.4; max-width:20ch}

/* Cuerpo con índice lateral */
.doc{display:grid; grid-template-columns:280px 1fr; gap:clamp(2rem,5vw,4.5rem); padding-block:clamp(3rem,7vw,5.5rem)}
.doc__aside{position:sticky; top:calc(var(--hdr-h) + 1.5rem); align-self:start}
.toc__k{font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-600); padding-bottom:.75rem; border-bottom:1px solid var(--line)}
.toc ul{display:grid}
.toc li{border-bottom:1px solid var(--line)}
.toc a{
  display:block; padding:.7rem 0 .7rem .9rem; font-size:.875rem; font-weight:500; line-height:1.35;
  color:var(--ink-2); text-decoration:none; border-left:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease), padding-left .35s var(--ease);
}
.toc a:hover,.toc a.is-here{color:var(--blue-700); border-left-color:var(--cyan-500); padding-left:1.15rem}

.doc__cta{margin-top:1.75rem; width:100%; justify-content:center; --bg:var(--blue-900); --fg:#fff; --bd:var(--blue-900); --fill:var(--blue-700); box-shadow:0 6px 24px -12px rgba(6,43,73,.9)}
.doc__cta:hover{color:#fff; box-shadow:0 14px 34px -14px rgba(6,43,73,.85)}
.doc__note{margin-top:.8rem; font-size:.8rem; color:var(--ink-3); line-height:1.5}
.doc__note a{color:var(--blue-700); font-weight:600; text-decoration:none; border-bottom:1px solid var(--line-2)}
.doc__note a:hover{border-color:var(--cyan-500)}

.doc__body{max-width:70ch}
.doc__body > p{margin-top:1.05rem; color:var(--ink-2); line-height:1.72}
.doc__h{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.5rem; border-top:1px solid var(--line);
  font-size:clamp(1.3rem,2.4vw,1.75rem); font-weight:700; letter-spacing:-.035em; color:var(--blue-800);
  scroll-margin-top:calc(var(--hdr-h) + 1.5rem); text-wrap:balance;
}
.doc__body > .doc__h:first-child{margin-top:0; padding-top:0; border-top:0}
.doc__ul{margin-top:1.05rem; display:grid; gap:.55rem}
.doc__ul li{position:relative; padding-left:1.6rem; color:var(--ink-2); line-height:1.65}
.doc__ul li::before{content:""; position:absolute; left:0; top:.68em; width:7px; height:7px; border:1.5px solid var(--cyan-500); border-radius:50%}

.doc__foot{margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.75rem; border-top:1px solid var(--line)}
.doc__foot .lnk{margin-top:0}
.doc__foot .lnk:hover .ico{transform:translateX(-5px)}

/* Anterior / siguiente */
.pnav{display:grid; grid-template-columns:1fr 1fr; background:var(--paper); border-block:1px solid var(--line)}
.pnav__i--next{border-left:1px solid var(--line)}
.pnav__i{
  display:grid; gap:.35rem; padding:clamp(1.35rem,3vw,2rem); background:var(--paper); text-decoration:none;
  transition:background .35s var(--ease);
}
.pnav__i:only-child{grid-column:2}
.pnav__i--prev{text-align:left}
.pnav__i--next{text-align:right}
.pnav__i:hover{background:var(--light)}
.pnav__k{font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-600)}
.pnav__t{font-size:clamp(1rem,1.6vw,1.2rem); font-weight:600; letter-spacing:-.025em; color:var(--ink); transition:color .3s var(--ease)}
.pnav__i:hover .pnav__t{color:var(--blue-700)}

/* Cierre */
.pcta{background:var(--blue-800); color:#fff; padding-block:clamp(3rem,7vw,5rem)}
.pcta__in{display:grid; justify-items:center; text-align:center; gap:1rem}
.pcta__h{font-size:clamp(1.6rem,3.6vw,2.6rem); font-weight:700; letter-spacing:-.04em; text-wrap:balance}
.pcta__d{max-width:56ch; color:rgba(255,255,255,.78)}
.pcta__btns{display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem; margin-top:.75rem}

@media (max-width:900px){
  .doc{grid-template-columns:1fr; gap:2rem}
  .doc__aside{position:static}
  .toc{display:none}
  .doc__cta{margin-top:0}
  .doc__body{max-width:none}
}
@media (max-width:640px){
  .pnav{grid-template-columns:1fr}
  .pnav__i--next,.pnav__i:only-child{text-align:left; grid-column:auto}
  .pcta__btns .btn{flex:1 1 100%; justify-content:center}
}

/* ─────────────── Revelado al scroll ─────────────── */
[data-rise]{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
[data-rise].is-in{opacity:1; transform:none}

/* ─────────────── Responsive ─────────────── */
@media (max-width:1080px){
  .nav__foot .btn--wa span{display:none}
  .nav__foot .btn--wa{padding:.6rem .7rem}
  .nav__list{gap:0}
  .nav__a{padding:.5rem .5rem; font-size:.75rem}
}
@media (max-width:900px){
  :root{--hdr-h:72px}
  .burger{display:block}
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(88vw,380px); margin:0;
    background:var(--paper); flex-direction:column; align-items:stretch; justify-content:center;
    gap:2.5rem; padding:5rem 2rem; transform:translateX(101%); transition:transform .55s var(--ease);
    box-shadow:-20px 0 60px -30px rgba(6,43,73,.5);
  }
  .nav.is-open{transform:none}
  .nav__list{flex-direction:column; align-items:stretch; gap:0}
  .nav__a,.hdr.is-stuck .nav__a{color:var(--ink); font-size:1rem; letter-spacing:.02em; text-transform:none; font-weight:600; padding:1rem 0; border-bottom:1px solid var(--line)}
  .nav__a.is-active,.hdr.is-stuck .nav__a.is-active{color:var(--blue-700)}
  .nav__a::after{display:none}
  .nav{overflow-y:auto; justify-content:flex-start; padding-top:6rem; gap:1.75rem}
  .nav__foot{flex-direction:column; align-items:stretch; gap:1.25rem}
  .nav__foot .btn--wa{justify-content:center; padding:.9rem 1.2rem; font-size:.95rem}
  .nav__foot .btn--wa span{display:inline}
  .social{justify-content:center}
  .social a,.hdr.is-stuck .social a{border-color:var(--line); color:var(--ink-2)}
  body.is-locked{overflow:hidden}

  .strip__in{grid-template-columns:1fr 1fr}
  .proc,.dr,.ct{grid-template-columns:1fr}
  .proc--flip .proc__media{order:0}
  .proc__media img{aspect-ratio:16/9}
  .dr__media{max-width:420px}
  .fac{grid-template-columns:1fr 1fr}
  .form{margin-top:.5rem}
}
@media (max-width:640px){
  .hero__idx{display:none}
  .hero__in{padding-bottom:2.75rem}
  .hero__kicker{align-items:flex-start; letter-spacing:.1em; font-size:.68rem; line-height:1.5}
  .hero__kicker .rule{margin-top:.55rem}
  .strip__in{grid-template-columns:1fr}
  .fac{grid-template-columns:1fr}
  .pane__cols{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .cat__tabs button{flex:1 1 45%; font-size:.72rem; padding:.95rem .6rem}
  .ct__data > div{grid-template-columns:1fr; gap:.15rem}
  .hero__cta .btn{flex:1 1 100%; justify-content:center}
  .wafab{height:56px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  [data-rise]{opacity:1; transform:none}
  .wafab{opacity:1; transform:none}
  .slide img{transform:none}
}

@media print{
  .hdr,.wafab,.hero__idx,.form{display:none}
  body{color:#000; background:#fff}
}