/* =====================================================================
   Italmed 2.2 · Firma visual SebaCTM (Sebastián Espinoza)
   Efectos, barra inferior tipo app y selector de modo.
   El modo oscuro está en sfx-dark.css.
   ===================================================================== */
:root{
  --sfx-accent:#0AA2D1;
  --sfx-accent-2:#22C5B4;
  --sfx-deep:#0a6f91;
  --sfx-ink:#24245c;
  --sfx-glow:0 0 0 1px rgba(10,162,209,.32),0 16px 36px rgba(10,162,209,.20);
  --sfx-bar-glow:0 0 10px rgba(10,162,209,.55);
  --sfx-ease:cubic-bezier(.2,.8,.2,1);
  --sfx-spring:cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="dark"]{
  --sfx-glow:0 0 0 1px rgba(34,197,180,.42),0 0 26px rgba(10,162,209,.30);
  --sfx-bar-glow:0 0 14px rgba(34,197,180,.7);
}

/* ---------- Pantalla de carga con escáner (primera página de la visita) ---------- */
.sfx-loader{display:none}
html.sfx-intro .sfx-loader{display:grid;position:fixed;inset:0;z-index:100000;place-items:center;background:#f3f9fc;pointer-events:none;animation:sfx-out .4s ease 1.8s forwards}
html.sfx-intro[data-theme="dark"] .sfx-loader{background:#07121b}
html.sfx-intro.sfx-ready .sfx-loader{animation:sfx-out .35s ease forwards}
@keyframes sfx-out{to{opacity:0;visibility:hidden}}
.sfx-scanner{position:relative;display:grid;place-items:center;width:108px;height:108px}
.sfx-scanner::before,.sfx-scanner::after{content:"";position:absolute;inset:0;border-radius:50%}
.sfx-scanner::before{border:2px solid rgba(10,162,209,.18)}
.sfx-scanner::after{border:4px solid var(--sfx-accent);border-top-color:transparent;border-left-color:var(--sfx-accent-2);box-shadow:var(--sfx-bar-glow);animation:sfx-spin 1s linear infinite}
.sfx-scanner img{width:48px;height:auto;animation:sfx-breathe 1.1s ease-in-out infinite alternate}
@keyframes sfx-spin{to{transform:rotate(360deg)}}
@keyframes sfx-breathe{from{transform:scale(.93);opacity:.8}to{transform:scale(1.04);opacity:1}}

/* ---------- Aparición (subir y aparecer) ---------- */
@keyframes sfx-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
html.sfx-js .sfx-rise{animation:sfx-rise .8s var(--sfx-ease) var(--sfx-d,0s) both}
html.sfx-js .sfx-hide{opacity:0;transform:translateY(22px)}
html.sfx-js .sfx-hide.sfx-in{opacity:1;transform:none;transition:opacity .75s var(--sfx-ease) var(--sfx-d,0s),transform .75s var(--sfx-ease) var(--sfx-d,0s)}

/* ---------- Barra luminosa bajo títulos de sección ---------- */
.sfx-bar::after{content:"";display:block;width:76px;height:3px;margin:14px 0 0;border-radius:3px;background:linear-gradient(90deg,var(--sfx-accent),var(--sfx-accent-2));box-shadow:var(--sfx-bar-glow);transform-origin:left center;transition:transform .9s var(--sfx-ease) .25s}
.sfx-bar--center::after{margin:14px auto 0;transform-origin:center}
html.sfx-js .sfx-bar.sfx-hide::after{transform:scaleX(0)}

/* ---------- Barra con brillo bajo la marca (firma SebaCTM) ---------- */
html.sfx-on .header-brand-copy strong::after{content:"";display:block;height:2px;margin:4px 0 3px;border-radius:2px;background:linear-gradient(90deg,var(--sfx-accent),var(--sfx-accent-2));box-shadow:var(--sfx-bar-glow)}

/* ---------- Texto con degradado (Puente Alto.) ---------- */
html.sfx-on .sfx-grad{color:var(--sfx-deep);background:linear-gradient(100deg,#0a6f91 0%,#0b8fb4 40%,#0d9aa1 70%,#0a6f91 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sfx-grad 7s ease-in-out infinite alternate}
@keyframes sfx-grad{from{background-position:0% 50%}to{background-position:100% 50%}}

/* ---------- Tarjetas que se elevan con brillo azul ---------- */
html.sfx-on :is(.v5-mini-card,.spal-card,.service-step-card,.service-faq-card,.plat-card,.itm-care-strip-card,.v5-quick-card,.itm-home-blog-card,.service-prep-item,.cot-stat-card,.spal-info-item,.itm-lab-steps li,.sr-sidebar-card,.v5-widget-card,.italmed-seo-context-card,.hero-stat,.itm-promo){transition:transform .28s var(--sfx-ease),box-shadow .28s ease,border-color .28s ease}
@media (hover:hover){
  html.sfx-on :is(.v5-mini-card,.spal-card,.service-step-card,.service-faq-card,.plat-card,.itm-care-strip-card,.v5-quick-card,.itm-home-blog-card,.service-prep-item,.cot-stat-card,.spal-info-item,.itm-lab-steps li,.sr-sidebar-card,.v5-widget-card,.italmed-seo-context-card,.hero-stat,.itm-promo):hover{transform:translateY(-6px);border-color:rgba(10,162,209,.55);box-shadow:var(--sfx-glow)}
}
html.sfx-on :is(.v5-mini-card,.spal-card,.service-step-card,.plat-card,.v5-quick-card,.itm-home-blog-card):active{transform:translateY(-2px) scale(.99)}

/* ---------- Destello en botones principales ---------- */
html.sfx-on :is(.btn-new-solid,.service-cta-btn,.itm-lab-book__btn,.btn-agendar,.spal-btn-primary,.v5-mini-btn-primary,.spal-card-btn-primary,.reservas-whatsapp-btn,.sr-btn-enviar,.btn-plataforma){position:relative;overflow:hidden;isolation:isolate}
html.sfx-on :is(.btn-new-solid,.service-cta-btn,.itm-lab-book__btn,.btn-agendar,.spal-btn-primary,.v5-mini-btn-primary,.spal-card-btn-primary,.reservas-whatsapp-btn,.sr-btn-enviar,.btn-plataforma)::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-80%;width:45%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);transform:skewX(-20deg);pointer-events:none;z-index:1}
@media (hover:hover){
  html.sfx-on :is(.btn-new-solid,.service-cta-btn,.itm-lab-book__btn,.btn-agendar,.spal-btn-primary,.v5-mini-btn-primary,.spal-card-btn-primary,.reservas-whatsapp-btn,.sr-btn-enviar,.btn-plataforma):hover::after{animation:sfx-shine .85s ease}
}
html.sfx-on .v5-hero-btn-primary::after,html.sfx-on .itm-lab-book__btn::after{animation:sfx-shine-loop 7s ease-in-out 2.4s infinite}
@keyframes sfx-shine{from{left:-80%}to{left:135%}}
@keyframes sfx-shine-loop{0%{left:-80%}14%,100%{left:135%}}

/* ---------- Pulso de brillo ---------- */
@keyframes sfx-pulse{from{box-shadow:0 20px 44px rgba(12,43,64,.16),0 0 0 0 rgba(10,162,209,0)}to{box-shadow:0 20px 44px rgba(12,43,64,.16),0 0 0 7px rgba(10,162,209,.14)}}
html.sfx-on .itm-hero-status-card{animation:sfx-pulse 3.6s ease-in-out infinite alternate}
@keyframes sfx-pulse-wa{from{box-shadow:0 18px 44px rgba(32,199,104,.34),0 0 0 0 rgba(32,199,104,.35)}to{box-shadow:0 18px 44px rgba(32,199,104,.34),0 0 0 12px rgba(32,199,104,0)}}
html.sfx-on .whatsapp-float{animation:sfx-pulse-wa 2.4s ease-out infinite}

/* ---------- Selector de modo ---------- */
.sfx-ico{display:block;width:20px;height:20px}
.sfx-mode{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(10,162,209,.08);border:1px solid rgba(10,162,209,.2)}
.sfx-mode button{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:999px;background:transparent;color:#4f6478;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.sfx-mode button .sfx-ico{width:17px;height:17px}
.sfx-mode button:hover{color:var(--sfx-deep)}
.sfx-mode button[aria-pressed="true"]{background:#fff;color:var(--sfx-deep);box-shadow:0 2px 8px rgba(6,63,88,.16)}
.sfx-mode button:focus-visible,.sfx-mode-icon:focus-visible,.sfx-dock__item:focus-visible{outline:3px solid var(--sfx-accent);outline-offset:2px}
/* En la barra azul superior, junto al teléfono */
.sfx-mode--topbar{gap:1px;padding:2px;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);margin-left:4px}
.sfx-mode--topbar button{width:28px;height:28px;color:rgba(255,255,255,.88)}
.sfx-mode--topbar button .sfx-ico{width:15px;height:15px}
.sfx-mode--topbar button:hover{color:#fff;background:rgba(255,255,255,.14)}
.sfx-mode--topbar button[aria-pressed="true"]{background:#fff;color:#0a6f91;box-shadow:0 2px 8px rgba(6,40,70,.25)}
.sfx-mode--topbar button:focus-visible{outline-color:#fff}
.sfx-mode--menu{display:flex;flex-wrap:wrap;width:100%;padding:4px;border-radius:16px;margin-bottom:12px}
.sfx-mode__label{flex:1 1 100%;padding:6px 10px 4px;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#4f6478}
.sfx-mode--menu button{flex:1 1 0;min-width:0;display:inline-flex;gap:6px;width:auto;height:44px;border-radius:12px;font:700 .82rem/1 var(--font-body,'Manrope'),sans-serif}
.sfx-head-tools{display:flex;align-items:center;gap:8px;justify-self:end;margin-left:auto}
/* 2.5.4 · En escritorio el menú hamburguesa no se usa: su contenedor vacío empujaba todo a la izquierda. Logo, menú y botones quedan centrados como un solo grupo. */
@media (min-width:1181px){.sfx-head-tools{display:none}.header-new-container{justify-content:center;column-gap:40px}}
.sfx-mode-icon{display:none;place-items:center;width:44px;height:44px;padding:0;border-radius:14px;border:1px solid rgba(10,162,209,.25);background:rgba(10,162,209,.06);color:var(--sfx-ink);cursor:pointer}
.sfx-mode-icon .sfx-ico{width:21px;height:21px}
.sfx-when-dark{display:none}
html[data-theme="dark"] .sfx-when-dark{display:block}
html[data-theme="dark"] .sfx-when-light{display:none}
@media (max-width:1180px){.sfx-mode-icon{display:grid}}
.sfx-mode-icon--desk{display:none!important;width:40px;height:40px;border-radius:12px}
@media (min-width:1181px) and (max-width:1366px){.sfx-mode--header{display:none}.sfx-mode-icon--desk{display:grid!important}}

/* Transición suave al cambiar de modo */
html.sfx-theming,html.sfx-theming *,html.sfx-theming *::before,html.sfx-theming *::after{transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease!important}

/* ---------- Aviso breve ---------- */
.sfx-toast{position:fixed;left:50%;bottom:32px;z-index:100001;max-width:calc(100% - 32px);padding:11px 20px;border-radius:999px;background:var(--sfx-ink);color:#fff;font:600 14px/1.35 var(--font-body,'Manrope'),sans-serif;text-align:center;box-shadow:0 14px 30px rgba(0,0,0,.25),var(--sfx-bar-glow);opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.sfx-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- Barra inferior tipo app (celular) ---------- */
.sfx-dock{display:none}
@media (max-width:820px){
  .sfx-dock{display:flex;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:1000;justify-content:space-between;align-items:flex-end;gap:2px;padding:6px;border-radius:24px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(10,162,209,.2);box-shadow:0 18px 40px -12px rgba(16,40,70,.38)}
  .sfx-dock__item{position:relative;flex:1;min-width:0;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;border-radius:18px;color:#4f6478;font:800 10.5px/1.1 var(--font-body,'Manrope'),sans-serif;letter-spacing:.02em;text-decoration:none!important;-webkit-tap-highlight-color:transparent}
  .sfx-dock__icon .sfx-ico{width:24px;height:24px;transition:transform .3s var(--sfx-spring)}
  .sfx-dock__item:active .sfx-ico{transform:translateY(-3px) scale(1.12)}
  .sfx-dock__item[aria-current]{background:rgba(10,162,209,.11);color:var(--sfx-deep)}
  .sfx-dock__item[aria-current]::after{content:"";position:absolute;bottom:3px;left:50%;width:18px;height:3px;margin-left:-9px;border-radius:3px;background:linear-gradient(90deg,var(--sfx-accent),var(--sfx-accent-2));box-shadow:var(--sfx-bar-glow)}
  .sfx-dock__item--main{color:var(--sfx-ink)}
  .sfx-dock__item--main[aria-current]{background:transparent}
  .sfx-dock__item--main[aria-current]::after{display:none}
  .sfx-dock__item--main .sfx-dock__icon{display:grid;place-items:center;width:54px;height:54px;margin-top:-28px;border-radius:18px;background:linear-gradient(135deg,var(--sfx-accent) 0%,var(--sfx-deep) 100%);color:#fff;border:4px solid #fff;box-shadow:0 10px 22px -6px rgba(10,111,145,.6),0 0 16px rgba(10,162,209,.35)}
  .sfx-dock__item--wa{color:#0b7a3e}
  body.sfx-has-dock{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  body.sfx-has-dock .whatsapp-float{display:none!important}
  .sfx-toast{bottom:calc(104px + env(safe-area-inset-bottom,0px))}
}

/* ---------- Movimiento reducido: sin animaciones ---------- */
@media (prefers-reduced-motion:reduce){
  html.sfx-on *,html.sfx-on *::before,html.sfx-on *::after{animation:none!important;transition:none!important}
  .sfx-loader{display:none!important}
}
@media print{.sfx-dock,.sfx-loader,.sfx-toast,.sfx-mode,.sfx-mode-icon{display:none!important}}