body[data-presencia-motion] :is(a,button,input,select,summary):focus-visible{outline:3px solid currentColor;outline-offset:4px}
body[data-presencia-motion] :is(.btn,.button,.doctor-card,.service,.credential,.search-submit,.search-clear){transition:box-shadow .22s ease,border-color .22s ease,background-color .22s ease}
body[data-presencia-motion] img{max-width:100%}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .template-profesional_cristal :is(.service,.credential,.about-card){transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
 .template-profesional_cristal :is(.service,.credential,.about-card):hover{transform:translateY(-5px);box-shadow:0 26px 48px -30px rgb(19 32 51 / 32%)}
 body[data-presencia-motion] .button{transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
 body[data-presencia-motion] .button:hover{transform:translateY(-2px)}
 body[data-presencia-motion] .button:active{transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
 html:has(body[data-presencia-motion]){scroll-behavior:auto!important}
 body[data-presencia-motion] *,body[data-presencia-motion] *::before,body[data-presencia-motion] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Medical motion direction. Existing layout, theme tokens, photo-fit choices
   and botanical selectors remain owned by presencia_medica.css / Mi Centro. */
.presencia-medica[data-presencia-motion] {
  --motion-ease:cubic-bezier(.22,.68,0,1);
  --motion-fast:240ms;
  --motion-surface:600ms;
  --motion-lift:-2px;
  --motion-shadow:0 18px 40px -28px rgb(19 32 51 / 22%);
}
.presencia-medica.template-especialista_editorial {
  --motion-ease:cubic-bezier(.19,1,.22,1);
  --motion-fast:360ms;
  --motion-surface:850ms;
  --motion-lift:0px;
}
.presencia-medica.template-consulta_moderna {
  --motion-ease:cubic-bezier(.22,1,.36,1);
  --motion-fast:200ms;
  --motion-surface:460ms;
  --motion-lift:-3px;
}
.presencia-medica.template-profesional_cristal {
  --motion-ease:cubic-bezier(.16,1,.3,1);
  --motion-fast:300ms;
  --motion-surface:800ms;
  --motion-lift:-5px;
  --motion-shadow:0 28px 50px -30px rgb(19 32 51 / 30%);
}

@media (prefers-reduced-motion:no-preference) {
  html:has(body.presencia-medica[data-presencia-motion]) { scroll-behavior:smooth; }
  .presencia-medica[data-presencia-motion] .top {
    transition:box-shadow var(--motion-surface) var(--motion-ease), border-color var(--motion-fast) ease;
  }
  .presencia-medica.motion-scrolled .top { box-shadow:0 12px 30px -24px rgb(19 32 51 / 30%); }
  .presencia-medica[data-presencia-motion] :is(.button,.socials a) {
    transition:translate var(--motion-fast) var(--motion-ease), scale var(--motion-fast) var(--motion-ease),
      box-shadow var(--motion-surface) var(--motion-ease), border-color var(--motion-fast) ease,
      background-color var(--motion-fast) ease, color var(--motion-fast) ease;
  }
  .presencia-medica[data-presencia-motion] :is(.button,.socials a):active {
    translate:0 0;
    scale:.975;
    transition-duration:100ms;
  }
  .presencia-medica[data-presencia-motion] .section-nav a {
    position:relative;
    transition:background-color var(--motion-fast) ease, border-color var(--motion-fast) ease;
  }
  .presencia-medica[data-presencia-motion] .section-nav a::after {
    content:'';
    position:absolute;
    inset:auto 9px 3px;
    height:2px;
    background:var(--main);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform var(--motion-surface) var(--motion-ease);
    pointer-events:none;
  }
  .presencia-medica[data-presencia-motion] .section-nav a:is(:hover,:focus-visible,[aria-current="location"]) {
    border-bottom-color:transparent;
  }
  .presencia-medica[data-presencia-motion] .section-nav a:is(:hover,:focus-visible,[aria-current="location"])::after {
    transform:scaleX(1);
  }
  .presencia-medica.motion-enabled .eyebrow::before {
    transform:scaleX(.25);
    transform-origin:left center;
    transition:transform var(--motion-surface) var(--motion-ease);
  }
  .presencia-medica.motion-enabled .eyebrow.motion-entered::before { transform:scaleX(1); }
  .presencia-medica[data-presencia-motion] :is(.service,.credential,.about-card,.step-card,.gallery-card,.contact-item,.faq-item) {
    transition:translate var(--motion-surface) var(--motion-ease),
      box-shadow var(--motion-surface) var(--motion-ease), border-color var(--motion-fast) ease;
  }
  .presencia-medica[data-presencia-motion] :is(.service h3,.service .price,.step-number,.gallery-card figcaption) {
    transition:translate var(--motion-surface) var(--motion-ease), transform var(--motion-surface) var(--motion-ease);
  }
  .presencia-medica[data-presencia-motion] .hero-photo {
    transition:box-shadow var(--motion-surface) var(--motion-ease);
  }

  /* Clara: light breathing room, short travel, no floating planes. */
  .presencia-medica.template-clinica_clara .hero-visual::before {
    transition:translate 950ms var(--motion-ease);
  }

  /* Editorial: fine rules draw across the page; the framed photograph is
     unveiled by the JS profile. Type and archive rows keep a stable baseline. */
  .presencia-medica.template-especialista_editorial.motion-enabled :is(.services,.journey,.contact)::before,
  .presencia-medica.template-consulta_moderna.motion-enabled :is(.services,.journey,.contact)::before {
    content:'';
    position:absolute;
    top:0;
    left:max(32px,calc((100% - 1200px)/2));
    right:max(32px,calc((100% - 1200px)/2));
    height:1px;
    background:var(--line);
    transform:scaleX(.08);
    transform-origin:left center;
    transition:transform 1100ms var(--motion-ease);
    pointer-events:none;
  }
  .presencia-medica.template-consulta_moderna.motion-enabled :is(.services,.journey,.contact)::before {
    transform-origin:center;
    transition-duration:700ms;
  }
  .presencia-medica.motion-enabled :is(.services,.journey,.contact).motion-section-seen::before { transform:scaleX(1); }
  .presencia-medica.template-especialista_editorial .gallery-card figcaption { transform-origin:left center; }

  /* Cristal: two quiet, neutral planes behind the existing photograph.
     These are structural frames, never a substituted botanical decoration. */
  .presencia-medica.template-profesional_cristal .hero-visual:not(:has(.is-emblem))::before {
    content:'';
    display:block;
    position:absolute;
    inset:14px -10px -14px 10px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--photo-radius);
    transform:rotate(-3deg);
    box-shadow:0 24px 50px -34px rgb(19 32 51 / 25%);
    z-index:-1;
    pointer-events:none;
    transition:transform 1100ms var(--motion-ease);
  }
  .presencia-medica.template-profesional_cristal .hero-photo:not(.is-emblem)::after {
    content:'';
    position:absolute;
    inset:0;
    border:1px solid rgb(255 255 255 / 65%);
    border-radius:inherit;
    background:linear-gradient(115deg,transparent 25%,rgb(255 255 255 / 16%) 48%,transparent 70%);
    opacity:0;
    transform:translateX(-18%);
    transition:opacity 500ms ease, transform 1100ms var(--motion-ease);
    pointer-events:none;
  }
}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .presencia-medica[data-presencia-motion] .button:hover { transform:none; translate:0 var(--motion-lift); }
  .presencia-medica[data-presencia-motion] .button:active { translate:0 0; }
  .presencia-medica.template-clinica_clara :is(.service,.credential,.gallery-card):hover {
    translate:0 -2px;
    box-shadow:var(--motion-shadow);
  }
  .presencia-medica.template-clinica_clara .hero-visual:hover::before { translate:2px 2px; }
  .presencia-medica.template-especialista_editorial :is(.service,.credential):hover { box-shadow:none; }
  .presencia-medica.template-especialista_editorial :is(.service,.gallery-card):hover :is(h3,figcaption) { translate:4px 0; }
  .presencia-medica.template-consulta_moderna .service:hover :is(h3,.price) { translate:5px 0; }
  .presencia-medica.template-consulta_moderna .step-card:hover .step-number { transform:translateY(-3px) rotate(-3deg); }
  .presencia-medica.template-profesional_cristal :is(.service,.credential,.about-card,.step-card):hover {
    transform:none;
    translate:0 var(--motion-lift);
    box-shadow:var(--motion-shadow);
  }
  .presencia-medica.template-profesional_cristal .hero-visual:hover::before { transform:rotate(-4deg) translate(-2px,3px); }
  .presencia-medica.template-profesional_cristal .hero-visual:hover .hero-photo::after { opacity:1; transform:translateX(0); }
  .presencia-medica[data-presencia-motion] .socials a:hover { translate:0 -2px; }
}

@media (min-width:901px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .presencia-medica.motion-enabled .hero-visual:not(:has(.is-emblem)) { translate:0 var(--motion-depth,0px); }
  .presencia-medica.motion-enabled:not(.template-clinica_clara) .hero-photo.style-foto_completa > img {
    scale:1.035;
    translate:0 var(--motion-photo-y,0px);
  }
  .presencia-medica.template-profesional_cristal.motion-enabled .hero-photo:not(.is-emblem) {
    transform:perspective(1000px) rotateX(var(--motion-tilt-x,0deg)) rotateY(var(--motion-tilt-y,0deg));
  }
  .presencia-medica.template-profesional_cristal.motion-enabled .hero::before { translate:0 var(--motion-plane-y,0px); }
}

@media (max-width:760px) {
  .presencia-medica.template-profesional_cristal .hero-visual:not(:has(.is-emblem))::before {
    inset:8px -4px -8px 6px;
    transform:rotate(-1.5deg);
  }
}
@media print {
  .presencia-medica[data-presencia-motion] :is(.hero-visual,.hero-photo,.hero-photo > img) { transform:none!important; translate:none!important; scale:none!important; clip-path:none!important; }
  .presencia-medica[data-presencia-motion] *, .presencia-medica[data-presencia-motion] *::before, .presencia-medica[data-presencia-motion] *::after { transition:none!important; }
}