html{scroll-behavior:smooth}
body{margin:0;background:#F5F7FA}
a{color:#004C91}a:hover{color:#003A70}
*{-webkit-font-smoothing:antialiased}

/* Barra de progreso de lectura */
#fx-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#2F9D94,#004C91);z-index:60}

/* Header fijo con vidrio esmerilado que se compacta al bajar */
header{position:sticky;top:0;z-index:50;transition:background .35s ease,box-shadow .35s ease,backdrop-filter .35s ease}
header>div{transition:padding .35s ease}
header.fx-scrolled{background:rgba(245,247,250,.82)!important;backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 10px 30px -18px rgba(15,30,38,.35)}
header.fx-scrolled>div{padding-top:10px!important;padding-bottom:10px!important}
header nav a{position:relative}
header nav a:not([style*="background"])::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:#2F9D94;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
header nav a:not([style*="background"]):hover::after{transform:scaleX(1)}

/* Botones: elevación suave */
a[style*="min-height"],button{transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease,filter .25s ease}
a[style*="min-height"]:hover,button:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(0,76,145,.55)}

/* Entrada del hero */
.fx-hero>*{opacity:0;transform:translateY(22px);animation:fxUp .9s cubic-bezier(.2,.7,.2,1) forwards}
.fx-hero>*:nth-child(1){animation-delay:.1s}.fx-hero>*:nth-child(2){animation-delay:.22s}.fx-hero>*:nth-child(3){animation-delay:.36s}.fx-hero>*:nth-child(4){animation-delay:.5s}
.fx-photo{opacity:0;transform:translateY(36px) scale(.97);transform-origin:50% 100%}
.fx-photo.fx-go{animation:fxPhoto 1.2s cubic-bezier(.2,.7,.2,1) .2s forwards}
@keyframes fxPhoto{to{opacity:1;transform:none}}
.fx-badge{opacity:0;animation:fxUp .9s cubic-bezier(.2,.7,.2,1) 1s forwards, fxFloat 6s ease-in-out 2s infinite}
@keyframes fxUp{to{opacity:1;transform:none}}
@keyframes fxPop{to{opacity:1;transform:scale(1)}}
@keyframes fxRise{from{opacity:0;transform:translate(-50%,40px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Aparición al hacer scroll */
.fx-rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.fx-rv.fx-in{opacity:1;transform:none}

/* Tarjetas de especialidades */
#especialidades article{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
#especialidades article img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
#especialidades article:hover{transform:translateY(-6px);box-shadow:0 26px 50px -24px rgba(0,76,145,.45);border-color:#BFD3E8!important}
#especialidades article:hover img{transform:scale(1.07)}

/* Tarjetas en general */
#trayectoria article,#investigacion li,[aria-label="Distinciones"] [style*="border-radius: 14px"],#formacion ol>li,#turnos article{transition:transform .35s ease,box-shadow .35s ease}
#trayectoria article:hover,#investigacion li:hover,[aria-label="Distinciones"] [style*="border-radius: 14px"]:hover,#formacion ol>li:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(15,30,38,.35)}
#turnos article:hover{transform:translateY(-4px);background:rgba(255,255,255,.06)}

/* Franja de quirófano: zoom lento */
.fx-zoom{overflow:hidden}
.fx-zoom img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1),filter .6s ease}
.fx-zoom:hover img{transform:scale(1.06)}

/* Botón flotante de turnos */
#fx-fab{position:fixed;right:22px;bottom:22px;z-index:55;display:inline-flex;align-items:center;gap:10px;background:#0E7A6E;color:#fff!important;text-decoration:none;font:700 15px/1 'Manrope',system-ui,sans-serif;padding:14px 20px 14px 16px;border-radius:999px;box-shadow:0 16px 32px -14px rgba(14,122,110,.9);transform:translateY(120px);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
#fx-fab.fx-show{transform:none}
#fx-fab::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(47,157,148,.55);animation:fxPulse 2.4s ease-out infinite}
@keyframes fxPulse{0%{box-shadow:0 0 0 0 rgba(47,157,148,.55)}80%,100%{box-shadow:0 0 0 18px rgba(47,157,148,0)}}

@media (max-width:720px){#fx-fab span{display:none}#fx-fab{padding:15px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .fx-hero>*,.fx-photo,.fx-badge,.fx-rv{opacity:1!important;transform:none!important}
}

/* Ajustes para celular */
html,body{overflow-x:clip}
@media (max-width:720px){
  header>div{padding:12px 16px!important;flex-wrap:nowrap!important}
  header a[aria-label] > span:nth-child(2), header a[aria-label] > span:nth-child(3){display:none!important}
  header a[aria-label] > span:first-child{font-size:20px!important}
  header nav a:not([style*="background"]){display:none!important}
  header nav a[style*="background"]{padding:10px 16px!important}
  section{padding-left:16px!important;padding-right:16px!important}
  .fx-badge{position:relative!important;right:auto!important;bottom:auto!important;width:auto!important;margin:-40px 8px 24px;animation:fxUp .9s cubic-bezier(.2,.7,.2,1) 1s forwards!important}
  #inicio > div > div:first-child{padding-bottom:24px!important}
  #formacion h2 br,#formacion p br{display:none}
}