/* Clínica Jardines · tokens y componentes base (Fase 0, borrador v0.1)
   Valores orientativos: se ajustan en la previsualización. */
:root {
  --t-body: clamp(.84rem, 1vw, .92rem); /* tamaño de texto de cuerpo: norma de toda la web */
  --marfil: #FAF7F2;
  --beige: #F3EEE7;
  --arena: #DED2C3;
  --salvia: #87927B;
  --oro: #D6C39B;         /* arena dorada: sólo cifras y grafismos decorativos grandes */
  --verde: #4D5847;
  --madera: #3A2C25;
  --tinta: #24211F;
  --terra: #B95F44;       /* gráfico / fondos grandes */
  --terra-txt: #A5503A;   /* texto y botones (AA sobre marfil) */
  --linea: rgba(58, 44, 37, .07);   /* contornos: casi invisibles */
  --campo: rgba(58, 44, 37, .30);    /* sólo campos de formulario (accesibilidad) */
  --glass-bg: rgba(250, 247, 242, .22);
  --glass-brd: rgba(255, 255, 255, .2);
  --ok: #4D6B45;
  --aviso: #8A5A12;
  --alerta: #9F3A2A;

  --sans: "Inria Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "Inria Serif", Georgia, "Times New Roman", serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; /* único uso de mono: cifras, precios, pasos, horas y códigos; nunca etiquetas ni texto */

  --r-btn: 12px;
  --r-card: 22px;
  --r-glass: 30px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--marfil); color: var(--tinta);
  font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; color: var(--madera); }
h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); letter-spacing: -.012em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p { margin: 0; }
em.serif, .it { font-family: var(--serif); font-style: italic; font-weight: 300; }
:focus-visible { outline: 2px solid var(--terra-txt); outline-offset: 3px; border-radius: 6px; }

.eyebrow { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--verde); font-weight: 400; }
@media (max-width: 899px) { .eyebrow { font-size: .64rem; letter-spacing: .15em; } }
.mono { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.lab { font-family: var(--sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
body { font-variant-numeric: lining-nums; }
.muted { color: var(--verde); }
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

/* Botones: 44-48 px, radio 12, sin sombra dura */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 46px; padding: 0 22px; border-radius: var(--r-btn);
  font: 400 .98rem/1 var(--sans); letter-spacing: .01em; cursor: pointer; text-decoration: none;
  border: 1px solid transparent; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn .arr { display: inline-block; width: 1.1em; height: 1px; background: currentColor; position: relative; transition: width .25s var(--ease); }
.btn .arr::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.btn:hover .arr { width: 1.5em; }
.btn-primary { background: var(--terra-txt); color: #fff; }
.btn-primary:hover { background: #8F432F; }
.btn-dark { background: var(--madera); color: var(--marfil); }
.btn-dark:hover { background: #2A1F1A; }
.btn-secondary { background: rgba(58, 44, 37, .09); color: var(--madera); border-color: transparent; }
.btn-secondary:hover { background: var(--madera); color: var(--marfil); }
.btn-ghost-light { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.2); backdrop-filter: blur(10px); }
.btn-ghost-light:hover { background: #fff; color: var(--madera); }
.btn-text { background: none; padding: 0 2px; min-height: 44px; color: var(--terra-txt); border-bottom: 1px solid currentColor; border-radius: 0; }
.btn-text:hover { color: var(--madera); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: .88rem; }

/* Chips */
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid transparent; background: var(--beige); color: var(--madera); font: 400 .95rem var(--sans); cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover { background: var(--arena); }
.chip[aria-pressed="true"] { background: var(--madera); color: var(--marfil); }
.chip.glass { background: var(--glass-bg); border-color: var(--glass-brd); color: #fff; backdrop-filter: blur(14px); }
.chip.glass[aria-pressed="true"] { background: #fff; color: var(--madera); }

/* Glass: transparencia + blur + borde fino + velo mínimo para contraste */
.glass-panel {
  position: relative; border-radius: var(--r-glass); padding: clamp(20px, 3vw, 34px);
  background: linear-gradient(180deg, rgba(58,44,37,.34), rgba(58,44,37,.22));
  border: 1px solid var(--glass-brd); color: #fff;
  -webkit-backdrop-filter: blur(20px) saturate(1.1); backdrop-filter: blur(20px) saturate(1.1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass-panel { background: rgba(58,44,37,.86); } }

/* Placeholder fotográfico (sustituible por imagen final sin tocar composición) */
.ph { position: relative; overflow: hidden; background: var(--arena); }
.ph::after { content: attr(data-ph); position: absolute; left: 12px; bottom: 10px; font: 400 .66rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); }

/* Reveal blur → foco */
.reveal { opacity: 0; filter: blur(8px); transform: translateY(12px); transition: opacity .7s var(--ease), filter .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; filter: none; transform: none; transition: none; }
  .btn, .chip { transition: none; }
}

.badge { display: inline-flex; align-items: center; gap: 6px; font: 400 .72rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; background: var(--beige); color: var(--verde); border: 0; }
.badge.warn { background: #F6E9D3; color: var(--aviso); }
.badge.bad { background: #F4DCD6; color: var(--alerta); }
.badge.good { background: #E3EADD; color: var(--ok); }
.badge.dark { background: var(--madera); color: var(--marfil); }

/* ===== Atmósfera inmersiva (referencias: campo terracota luminoso, grano, cristal, píldoras) ===== */
:root {
  --glow-deep: #4A1A0C; --glow-mid: #8C3A1E; --glow-hot: #D9703A; --glow-amber: #F0A25A;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
.immersive { position: relative; overflow: hidden; color: #fff; isolation: isolate;
  background:
    radial-gradient(45% 55% at 72% 18%, var(--glow-amber), transparent 62%),
    radial-gradient(70% 80% at 85% 40%, var(--glow-hot), transparent 66%),
    radial-gradient(90% 90% at 10% 100%, var(--glow-deep), transparent 70%),
    linear-gradient(170deg, var(--glow-mid), var(--glow-deep)); }
.immersive::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .16; mix-blend-mode: overlay; z-index: -1; pointer-events: none; }
.silhouette { position: absolute; width: 42%; aspect-ratio: 3/4; right: 12%; bottom: -8%; z-index: -1; filter: blur(10px); opacity: .9; pointer-events: none;
  background: radial-gradient(circle at 50% 22%, #1b0a05 0 17%, transparent 18%), radial-gradient(ellipse 60% 55% at 50% 92%, #1b0a05 0 62%, transparent 63%); }
.silhouette::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 56% 20%, rgba(255,214,150,.55), transparent 22%); }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; font: 400 .92rem var(--sans); color: #fff; cursor: pointer;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background .25s var(--ease), color .25s var(--ease); }
.pill:hover { background: rgba(255,255,255,.24); }
.pill[aria-pressed="true"], .pill.solid { background: #fff; color: var(--madera); border-color: #fff; }
.pill-row { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding-block: 4px; scrollbar-width: none; }
.pill-row::-webkit-scrollbar { display: none; }
.pill-row > * { flex: none; scroll-snap-align: start; }
.iconbtn { width: 48px; height: 48px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; cursor: pointer; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.iconbtn:hover, .iconbtn[aria-current="true"] { background: #fff; color: var(--madera); }
.iconbtn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dock { display: inline-flex; gap: 8px; padding: 8px; border-radius: 999px; background: rgba(36,20,12,.38); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.glass-tile { border-radius: 34px; padding: 26px 26px 22px; color: #fff; text-align: center; display: grid; gap: 14px; justify-items: center;
  background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(74,26,12,.38)); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15); }
.ruler { position: relative; width: 100%; height: 56px; touch-action: pan-y; }
.ruler input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ruler svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.dots { display: inline-flex; gap: 10px; }
.dots svg { height: 64px; width: auto; fill: #fff; }
@media (prefers-reduced-motion: reduce) { .pill, .iconbtn { transition: none; } }

/* ===== Uso de fuentes (referencia: web de pruebas) ===== */
.eyebrow.dash::before { content: "– "; }
.prose { font-family: var(--sans); font-weight: 300; font-size: var(--t-body); line-height: 1.5; letter-spacing: .01em; color: var(--tinta); max-width: 62ch; }
.prose strong { font-weight: 700; }
.manifest { position: relative; isolation: isolate; }
.manifest .num { position: absolute; z-index: -1; left: -.04em; top: -.18em; font-family: var(--serif); font-weight: 400; font-size: clamp(9rem, 26vw, 19rem); line-height: 1; color: var(--oro); opacity: .9; user-select: none; pointer-events: none; }
.manifest .stm { font-family: var(--serif); font-weight: 400; text-transform: uppercase; line-height: 1.12; letter-spacing: .005em; color: var(--tinta); font-size: clamp(1.6rem, 3.6vw, 2.9rem); text-wrap: balance; }
.manifest .stm.long { font-size: clamp(1.35rem, 2.6vw, 2rem); }
.fab { display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.fab > * { pointer-events: auto; }
.fab .cta { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 999px; background: var(--terra-txt); color: #fff; font: 700 .98rem var(--sans); text-decoration: none; }
.fab .cta svg, .fab .chat svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fab .chat { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #17110E; color: #fff; }
.cardx { position: relative; border-radius: 26px; overflow: hidden; min-height: 460px; display: grid; align-content: end; padding: 26px; color: #fff; isolation: isolate; text-decoration: none; }
.cardx .bg { position: absolute; inset: 0; z-index: -2; }
.cardx::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(36,20,12,0) 35%, rgba(36,20,12,.72)); }
.cardx .tag { position: absolute; top: 22px; left: 26px; font: 300 .95rem var(--sans); letter-spacing: .06em; }
.cardx h3 { color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.12; margin-bottom: 10px; }
.cardx p { font-weight: 300; letter-spacing: .02em; line-height: 1.6; font-size: var(--t-body); color: rgba(255,255,255,.92); max-width: 36ch; }

/* ===== Carrusel horizontal reutilizable (scroll-snap nativo + controles) ===== */
:root { --gut: clamp(16px, 4vw, 40px); }
.car-wrap { position: relative; min-width: 0; max-width: 100%; }
.car-ctl { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 14px; }
.car-ctl .iconbtn { color: var(--madera); background: rgba(58,44,37,.08); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.car-ctl .iconbtn:hover:not(:disabled) { background: var(--madera); color: #fff; }
.car-ctl .iconbtn:disabled { opacity: .3; cursor: default; }
.car-track { --cw: min(78vw, 330px); display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 4px var(--gut) 6px; margin-inline: calc(-1 * var(--gut)); scroll-padding-inline: var(--gut); scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; -webkit-overflow-scrolling: touch; }
.car-track::-webkit-scrollbar { display: none; }
.car-track > * { flex: none; width: var(--cw); scroll-snap-align: start; }
.car-track.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.car-track.dragging a { pointer-events: none; }
.car-bar { height: 3px; background: rgba(58,44,37,.09); border-radius: 3px; margin-top: 16px; overflow: hidden; }
.car-bar i { display: block; height: 100%; width: 30%; margin-left: 0; background: var(--terra-txt); border-radius: 3px; transition: margin-left .15s linear, width .15s linear; }
.car-wrap.static .car-ctl, .car-wrap.static .car-bar { display: none; }
@media (max-width: 899px) { .car-ctl { display: none; } }
@media (prefers-reduced-motion: reduce) { .car-bar i { transition: none; } }

/* ===== Fondo vivo (aura): manchas de color muy difuminadas que derivan despacio =====
   Inspirado en el desenfoque suave de la referencia del cliente. Sólo transform/opacity (barato). */
.aura-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.aura-par { position: absolute; inset: -20vmax; will-change: transform; }
.aura-set { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.aura-set.on { opacity: .65; }
.aura-set i { position: absolute; width: 78vmax; height: 78vmax; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle at 50% 50%, var(--c) 0%, transparent 64%); }
.aura-set i:nth-child(1) { top: 0; right: -4vmax; animation: auraY 42s ease-in-out infinite alternate; animation-delay: var(--d1, 0s); }
.aura-set i:nth-child(2) { top: 22vmax; left: -6vmax; width: 66vmax; height: 66vmax; animation: auraX 36s ease-in-out infinite alternate; animation-delay: var(--d2, 0s); }
.aura-set i:nth-child(3) { bottom: 0; right: 12vmax; width: 60vmax; height: 60vmax; animation: auraD 50s ease-in-out infinite alternate; animation-delay: var(--d3, 0s); }
@keyframes auraY { from { transform: translate3d(0, -14vh, 0) scale(1); } to { transform: translate3d(-10vw, 34vh, 0) scale(1.18); } }
@keyframes auraX { from { transform: translate3d(-18vw, 0, 0) scale(1); } to { transform: translate3d(34vw, 8vh, 0) scale(1.12); } }
@keyframes auraD { from { transform: translate3d(14vw, 10vh, 0) scale(1.05); } to { transform: translate3d(-30vw, -24vh, 0) scale(.92); } }
.aura-set.peach { --c1: rgba(244, 160, 92, .48); --c2: rgba(196, 100, 70, .24); --c3: rgba(255, 210, 175, .62); }
.aura-set.sage  { --c1: rgba(168, 178, 128, .40); --c2: rgba(214, 222, 186, .58); --c3: rgba(244, 190, 140, .22); }
.aura-set.sand  { --c1: rgba(214, 195, 155, .46); --c2: rgba(222, 210, 195, .70); --c3: rgba(240, 162, 90, .22); }
.aura-set i:nth-child(1) { --c: var(--c1); } .aura-set i:nth-child(2) { --c: var(--c2); } .aura-set i:nth-child(3) { --c: var(--c3); }
.aura-off .aura-set i, .aura-off .aura-par { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .aura-set i { animation: none; } .aura-set { transition: none; } }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }

/* ===== Tarjetas translúcidas «escarchadas» (referencia del cliente): dejan ver el fondo vivo =====
   Interruptor: [data-frost-toggle] añade html.solid-cards (tarjetas opacas de siempre). */
:root { --frost-bg: rgba(255, 255, 255, .56); --frost-bg-hover: rgba(255, 255, 255, .78); }
html:not(.solid-cards) body .cat,
html:not(.solid-cards) body .prof,
html:not(.solid-cards) body .art,
html:not(.solid-cards) body .steps3 > div,
html:not(.solid-cards) body .pricebox,
html:not(.solid-cards) body .quiz,
html:not(.solid-cards) body .plan,
html:not(.solid-cards) body .ms:not(.now),
html:not(.solid-cards) body .emptyx,
html:not(.solid-cards) body .promo:not(.empty),
html:not(.solid-cards) body .quote,
html:not(.solid-cards) body .card30,
html:not(.solid-cards) body .tpanel,
html:not(.solid-cards) body .cmpwrap,
html:not(.solid-cards) body .pm,
html:not(.solid-cards) body .buttons .cell:not(.on-photo),
html:not(.solid-cards) body .lockrow,
html:not(.solid-cards) body .fact,
html:not(.solid-cards) body .mapbox,
html:not(.solid-cards) body .zl label,
html:not(.solid-cards) body .int {
  background: var(--frost-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 12px 34px rgba(58, 44, 37, .05);
}
html:not(.solid-cards) body .cat:hover { background: var(--frost-bg-hover); }
html:not(.solid-cards) body .promo:not(.empty) .btn-secondary, html:not(.solid-cards) body .pm .btn-secondary { background: rgba(58, 44, 37, .09); }
/* hoja de búsqueda y precios */
html:not(.solid-cards) body .sheet { background: rgba(250, 247, 242, .84); -webkit-backdrop-filter: blur(26px) saturate(1.2); backdrop-filter: blur(26px) saturate(1.2); }
/* Rendimiento y accesibilidad: en móvil o con transparencia reducida, relleno casi opaco y sin blur */
@media (max-width: 899px) {
  html:not(.solid-cards) body .cat, html:not(.solid-cards) body .prof, html:not(.solid-cards) body .art, html:not(.solid-cards) body .quote, html:not(.solid-cards) body .promo:not(.empty), html:not(.solid-cards) body .steps3 > div, html:not(.solid-cards) body .ms:not(.now) { background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --frost-bg: rgba(243, 238, 231, .96); --frost-bg-hover: rgba(243, 238, 231, 1); }
  html:not(.solid-cards) body * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --frost-bg: rgba(255, 255, 255, .82); } }

/* ===== Norma de diseño del fondo ===== */
/* Ruido sutil en todo el fondo de la página */
.fx-grano { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .07; background-size: 220px 220px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .17 0 0 0 0 .13 0 0 0 1.4 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Logotipo grande de fondo que va apareciendo por algunas secciones (detrás del contenido) */
.fx-mk { position: relative; isolation: isolate; overflow-x: clip; }
.fx-mk-m { position: absolute; z-index: -1; top: 8%; width: min(66vw, 940px); color: rgba(150, 118, 76, .13); pointer-events: none; filter: url(#fx-grano-f); -webkit-filter: url(#fx-grano-f); }
.fx-mk-d > .fx-mk-m { right: -14%; left: auto; }
.fx-mk-i > .fx-mk-m { left: -14%; right: auto; top: auto; bottom: 4%; }
.fx-mk-m svg { display: block; width: 100%; height: auto; }
.js .fx-mk-m { opacity: 0; transform: translateY(46px) scale(.93); transition: opacity 1.8s var(--ease, cubic-bezier(.2,.7,.2,1)), transform 2.2s var(--ease, cubic-bezier(.2,.7,.2,1)); }
.js .fx-mk-m.in { opacity: 1; transform: none; }
@media (max-width: 899px) { .fx-mk-m { width: 108vw; } .fx-mk-d > .fx-mk-m { right: -40%; } .fx-mk-i > .fx-mk-m { left: -40%; } }
@media (prefers-reduced-motion: reduce) { .js .fx-mk-m { opacity: 1; transform: none; transition: none; } }

/* ===== Norma de rendimiento en móvil =====
   Safari en iPhone cierra la página («ha generado problemas repetidamente») cuando se acumulan filtros SVG grandes.
   En pantallas pequeñas y táctiles el desenfoque + grano de los logotipos y del número grande NO se calcula en el móvil:
   se usa la misma imagen ya preparada (img/fondo/*.webp) como máscara, con el mismo aspecto y sin coste de filtro. */
@media (max-width: 899px), (hover: none) {
  .fx-mk-m, .clinica-mark, .concepto-num { filter: none !important; -webkit-filter: none !important; }
  .fx-mk-m svg, .clinica-mark svg { visibility: hidden; }
  .fx-mk-m::after, .clinica-mark::after { content: ""; position: absolute; inset: -10%; pointer-events: none; background: currentColor;
    -webkit-mask: url("/img/fondo/marca-grano.webp") center / 100% 100% no-repeat; mask: url("/img/fondo/marca-grano.webp") center / 100% 100% no-repeat; }
  .concepto-num { -webkit-mask-image: url("/img/fondo/grano-num.webp"); mask-image: url("/img/fondo/grano-num.webp"); -webkit-mask-size: 200px 200px; mask-size: 200px 200px; }
  .ed-hero-video .ed-mark { mix-blend-mode: normal !important; }
  .reveal { filter: none !important; }
}

/* Esquinas de las fotografías y cajas: la misma curvatura que las tarjetas de especialidades (4 px) */
:root { --r-foto: 4px; }