:root {
  --bg: #050716;
  --panel: rgba(18, 22, 54, .66);
  --panel-strong: rgba(15, 18, 46, .94);
  --line: rgba(156, 169, 255, .18);
  --text: #f8f9ff;
  --muted: #b4b9d5;
  --cyan: #38d8ff;
  --violet: #8c5cff;
  --magenta: #f04ed7;
  --green: #25d366;
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 17px;
  --shadow: 0 24px 80px rgba(0, 0, 0, .38);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  color: var(--text);
  background:
    radial-gradient(circle at 8% 5%, rgba(69, 57, 213, .24), transparent 28rem),
    radial-gradient(circle at 92% 24%, rgba(201, 52, 214, .17), transparent 32rem),
    #050716;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 100;
  padding: .75rem 1rem; border-radius: 12px; background: white; color: black;
}
.skip-link:focus { top: 1rem; }

.app-shell {
  position: relative;
  isolation: isolate;
  width: min(1180px, 100%);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) clamp(18px, 4vw, 44px) calc(108px + env(safe-area-inset-bottom));
}

.noise {
  pointer-events: none; position: fixed; inset: 0; z-index: -1; opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.ambient { position: fixed; z-index: -2; border-radius: 50%; filter: blur(80px); opacity: .28; pointer-events: none; }
.ambient-a { width: 270px; height: 270px; background: #5733ff; top: -80px; left: -80px; }
.ambient-b { width: 330px; height: 330px; background: #d52ecb; top: 34%; right: -180px; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: clamp(28px, 5vw, 62px);
}
.brand { display: inline-flex; min-width: 0; }
.brand-mark {
  display: flex; align-items: center; min-height: 48px; padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
  background: rgba(9, 12, 33, .58); backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.brand img { width: clamp(214px, 31vw, 310px); height: auto; display: block; }
.site-link {
  display: inline-flex; align-items: center; gap: .45rem; padding: .72rem .86rem;
  color: #d9ddf4; border: 1px solid rgba(255,255,255,.1); border-radius: 999px;
  background: rgba(8, 10, 29, .42); font-size: .8rem; white-space: nowrap;
}
.site-link svg { width: 16px; height: 16px; }

.hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(270px, .9fr);
  align-items: center; gap: clamp(24px, 6vw, 80px);
  min-height: 370px; padding: clamp(28px, 5vw, 58px);
  overflow: hidden; border: 1px solid rgba(139, 130, 255, .19); border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(18, 22, 63, .88), rgba(8, 10, 31, .72)),
    radial-gradient(circle at 80% 20%, rgba(133, 78, 255, .32), transparent 34%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.035) 48%, transparent 64%);
  transform: translateX(-55%); animation: shimmer 8s ease-in-out infinite;
}
@keyframes shimmer { 50%,100% { transform: translateX(65%); } }
.hero-copy { position: relative; z-index: 2; }
.eyebrow, .section-kicker {
  display: inline-flex; align-items: center; gap: .6rem; color: #b8c2ff;
  font-size: clamp(.72rem, 1.8vw, .82rem); font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(56,216,255,.55); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(56,216,255,0); } 100% { box-shadow: 0 0 0 0 rgba(56,216,255,0); } }
.hero h1 {
  max-width: 690px; margin: 1rem 0 .9rem; font-size: clamp(2.2rem, 6.2vw, 5rem);
  line-height: .99; letter-spacing: -.055em; text-wrap: balance;
  background: linear-gradient(105deg, #fff 22%, #d9d8ff 58%, #81e9ff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { max-width: 630px; margin: 0; color: var(--muted); font-size: clamp(1rem, 2.2vw, 1.18rem); line-height: 1.65; text-wrap: pretty; }
.trust-row { display: flex; align-items: center; gap: .9rem; margin-top: 1.5rem; color: #c9cde4; font-size: .82rem; }
.rating { display: inline-flex; align-items: center; gap: .5rem; }
.rating strong { color: white; font-size: 1rem; }
.rating span { color: #ffd86a; letter-spacing: .06em; font-size: .7rem; }
.divider { width: 1px; height: 20px; background: rgba(255,255,255,.15); }

.hero-art { position: relative; height: 290px; min-width: 260px; }
.woman-line { position: absolute; inset: -60px -15px auto auto; width: 305px; height: 355px; color: url(#lineGlow); stroke: url(#lineGlow); stroke-width: 1.2; opacity: .85; filter: url(#glow); }
.orbit { position: absolute; border: 1px solid rgba(129, 111, 255, .25); border-radius: 50%; }
.orbit-one { width: 250px; height: 250px; top: 10px; right: 4px; animation: orbit 12s linear infinite; }
.orbit-two { width: 170px; height: 170px; top: 50px; right: 45px; border-style: dashed; animation: orbit 18s linear infinite reverse; }
@keyframes orbit { to { transform: rotate(360deg); } }
.art-caption {
  position: absolute; right: 0; bottom: 8px; display: grid; gap: .15rem; width: 190px; padding: 1rem 1.15rem;
  border: 1px solid rgba(255,255,255,.11); border-radius: 18px; background: rgba(8, 10, 30, .6); backdrop-filter: blur(16px);
}
.art-caption span { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.art-caption strong { font-size: 1rem; }

.services { margin-top: clamp(36px, 6vw, 66px); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 0 2px 18px; }
.section-heading h2 { margin: .35rem 0 0; font-size: clamp(1.75rem, 4vw, 2.65rem); letter-spacing: -.04em; }
.swipe-hint { color: #8f96b9; font-size: .82rem; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.service-card {
  --accent: 141, 94, 255;
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  min-height: 144px; padding: 1.35rem; color: var(--text); text-align: left; cursor: pointer;
  border: 1px solid rgba(var(--accent), .31); border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 8% 4%, rgba(var(--accent), .23), transparent 56%),
    linear-gradient(145deg, rgba(19, 23, 56, .92), rgba(8, 11, 31, .82));
  box-shadow: 0 18px 48px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.service-card::after {
  content: ""; position: absolute; width: 110px; height: 110px; right: -55px; bottom: -60px;
  border-radius: 50%; border: 1px solid rgba(var(--accent), .18); box-shadow: 0 0 45px rgba(var(--accent), .12);
}
.service-card:hover, .service-card:focus-visible { transform: translateY(-4px); border-color: rgba(var(--accent), .62); box-shadow: 0 24px 65px rgba(0,0,0,.3), 0 0 0 1px rgba(var(--accent), .1); outline: none; }
.service-card:active { transform: scale(.98); }
.card-consulta { --accent: 240, 78, 215; }
.card-embarazo { --accent: 148, 93, 255; }
.card-eco { --accent: 55, 213, 255; }
.card-laser { --accent: 121, 92, 255; }
.card-cirugia { --accent: 255, 116, 72; }
.card-precios { --accent: 35, 213, 175; }
.card-mapa { --accent: 63, 142, 255; }
.card-icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  color: rgb(var(--accent)); background: rgba(var(--accent), .11); border: 1px solid rgba(var(--accent), .3); box-shadow: 0 0 28px rgba(var(--accent), .16);
}
.card-icon svg { width: 28px; height: 28px; }
.card-icon { animation: cardIconGlow 4.6s ease-in-out infinite; }
.service-card:nth-child(2) .card-icon { animation-delay: .45s; }
.service-card:nth-child(3) .card-icon { animation-delay: .9s; }
.service-card:nth-child(4) .card-icon { animation-delay: 1.35s; }
.service-card:nth-child(5) .card-icon { animation-delay: 1.8s; }
.service-card:nth-child(6) .card-icon { animation-delay: 2.25s; }
@keyframes cardIconGlow { 0%,100% { transform: translateY(0); box-shadow: 0 0 22px rgba(var(--accent), .12); } 50% { transform: translateY(-2px); box-shadow: 0 0 34px rgba(var(--accent), .28); } }

.card-copy { display: grid; gap: .38rem; }
.card-copy strong { font-size: clamp(.96rem, 2vw, 1.12rem); line-height: 1.2; }
.card-copy small { max-width: 220px; color: #aab0d0; font-size: .78rem; line-height: 1.35; }
.card-arrow { align-self: end; color: rgb(var(--accent)); font-size: 1.25rem; }

.quick-contact {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 18px; padding: 1.2rem 1.3rem;
  border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius-lg); background: rgba(11, 14, 36, .62); backdrop-filter: blur(18px);
}
.quick-contact div { display: grid; gap: .25rem; }
.quick-label { color: #9298ba; font-size: .76rem; }
.quick-contact strong { font-size: clamp(.98rem, 2vw, 1.12rem); }
.whatsapp-button {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .8rem 1rem;
  border-radius: 15px; background: linear-gradient(135deg, #2ce678, #13aa4d); color: white; font-weight: 800;
  box-shadow: 0 12px 28px rgba(37,211,102,.24), 0 0 24px rgba(37,211,102,.12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-button::after {
  content: ""; position: absolute; inset: -80% -30%; z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  transform: translateX(-72%) rotate(8deg); animation: waShine 3.6s ease-in-out infinite;
}
.whatsapp-button:hover, .whatsapp-button:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(37,211,102,.34), 0 0 34px rgba(37,211,102,.2); outline: none; }
.whatsapp-button:active { transform: scale(.98); }
.whatsapp-button svg { width: 21px; height: 21px; }
@keyframes waShine { 0%, 52% { transform: translateX(-72%) rotate(8deg); } 76%, 100% { transform: translateX(72%) rotate(8deg); } }

.bottom-nav {
  position: fixed; z-index: 20; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: grid; grid-template-columns: 1fr 1fr 62px 1fr 1fr; align-items: end;
  width: min(580px, calc(100% - 24px)); min-height: 72px; padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 25px; background: rgba(8, 10, 29, .88); backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: 0 20px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-item { display: grid; place-items: center; align-content: center; gap: .25rem; min-height: 54px; padding: .25rem; border: 0; background: transparent; color: #8d94b8; cursor: pointer; }
.nav-item svg { width: 20px; height: 20px; }
.nav-item span { font-size: .62rem; }
.nav-item.active { color: var(--cyan); }
.nav-main {
  position: relative; isolation: isolate; overflow: visible;
  display: grid; place-items: center; width: 62px; height: 62px; align-self: center; justify-self: center; margin-top: -31px;
  border-radius: 21px; background: linear-gradient(145deg, #38ef7d, #12b957); color: white;
  box-shadow: 0 16px 38px rgba(37,211,102,.42), 0 0 28px rgba(38,239,125,.25), inset 0 1px 0 rgba(255,255,255,.42);
  animation: waFloat 3.1s ease-in-out infinite;
}
.nav-main::before {
  content: ""; position: absolute; z-index: -2; inset: -5px; border-radius: 25px;
  background: conic-gradient(from 0deg, rgba(52,255,132,.12), rgba(129,255,177,.95), rgba(52,255,132,.12), rgba(255,255,255,.78), rgba(52,255,132,.12));
  filter: blur(3px); animation: waHaloSpin 5.5s linear infinite;
}
.nav-main::after {
  content: ""; position: absolute; z-index: 1; inset: 7px; border-radius: 16px; pointer-events: none;
  background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.46), transparent 37%);
}
.wa-core { position: relative; z-index: 3; display: grid; place-items: center; }
.wa-core svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 7px rgba(0,0,0,.24)); }
.wa-ring { position: absolute; z-index: -1; inset: -7px; border-radius: 27px; border: 1px solid rgba(76,255,143,.52); pointer-events: none; animation: waRing 2.8s ease-out infinite; }
.wa-ring-two { inset: -14px; animation-delay: 1.2s; opacity: .72; }
.wa-orbit { position: absolute; z-index: 4; inset: -11px; border-radius: 50%; pointer-events: none; animation: waOrbitSpark 3.7s linear infinite; }
.wa-orbit::before { content: ""; position: absolute; top: 1px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #eafff1; box-shadow: 0 0 8px #fff, 0 0 18px #57ff98; }
.nav-main:hover, .nav-main:focus-visible { animation-play-state: paused; transform: translateY(-4px) scale(1.07); outline: none; box-shadow: 0 20px 46px rgba(37,211,102,.52), 0 0 42px rgba(38,239,125,.34), inset 0 1px 0 rgba(255,255,255,.48); }
.nav-main:active { transform: scale(.95); }
@keyframes waFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes waHaloSpin { to { transform: rotate(360deg); } }
@keyframes waRing { 0% { transform: scale(.9); opacity: .62; } 72%,100% { transform: scale(1.25); opacity: 0; } }
@keyframes waOrbitSpark { to { transform: rotate(360deg); } }

.sheet {
  width: min(650px, calc(100% - 20px)); max-height: min(86dvh, 760px); margin: auto auto 10px;
  padding: 30px clamp(22px, 5vw, 38px) max(28px, env(safe-area-inset-bottom)); color: var(--text);
  border: 1px solid rgba(170,170,255,.2); border-radius: 30px 30px 24px 24px; background: rgba(10, 12, 35, .97);
  box-shadow: 0 -25px 100px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.07);
  opacity: 0; transform: translateY(30px) scale(.985); transition: opacity .22s ease, transform .22s ease; overflow: auto;
}
.sheet[open] { opacity: 1; transform: translateY(0) scale(1); }
.sheet::backdrop { background: rgba(1, 2, 12, .73); backdrop-filter: blur(8px); }
.sheet-handle { width: 42px; height: 5px; margin: -14px auto 22px; border-radius: 999px; background: rgba(255,255,255,.22); }
.sheet-close { position: absolute; top: 17px; right: 20px; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: rgba(255,255,255,.05); color: white; font-size: 1.45rem; cursor: pointer; }
.sheet-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 1.2rem; border-radius: 18px; background: linear-gradient(135deg, rgba(57,214,255,.18), rgba(240,78,215,.18)); border: 1px solid rgba(137,127,255,.28); color: #a9a4ff; }
.sheet-icon svg { width: 30px; height: 30px; }
.sheet-kicker { color: #959cbe; font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; }
.sheet h2 { margin: .45rem 2.5rem .8rem 0; font-size: clamp(1.8rem, 6vw, 2.75rem); line-height: 1.05; letter-spacing: -.045em; }
.sheet > p { color: #b3b8d4; line-height: 1.6; }
.sheet ul { display: grid; gap: .7rem; margin: 1.35rem 0; padding: 0; list-style: none; }
.sheet li { position: relative; padding-left: 1.45rem; color: #d8daf0; line-height: 1.4; }
.sheet li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--magenta)); box-shadow: 0 0 14px rgba(57,214,255,.38); }
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.4rem; }
.button[hidden] { display: none !important; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: .75rem 1rem; border-radius: 15px; font-weight: 800; text-align: center; }
.button-primary { background: linear-gradient(135deg, #6f55ff, #bb46d9); color: white; box-shadow: 0 14px 35px rgba(116,77,255,.25); }
.button-secondary { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.055); }
.sheet-note { margin-bottom: 0; color: #858cac !important; font-size: .76rem; }

@media (max-width: 880px) {
  .app-shell { width: 100%; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-art { position: absolute; z-index: 0; inset: 20px -80px auto auto; width: 330px; opacity: .52; }
  .hero-copy { max-width: 650px; }
  .hero h1, .hero p { max-width: 78%; }
  .trust-row { position: relative; z-index: 2; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
  .app-shell { padding-inline: 14px; }
  .topbar { margin-bottom: 14px; }
  .brand-mark { padding: 7px 8px; }
  .brand img { width: min(60vw, 225px); }
  .site-link { width: 42px; height: 42px; padding: 0; justify-content: center; }
  .site-link { font-size: 0; }
  .site-link svg { width: 18px; height: 18px; }
  .hero { min-height: 330px; padding: 21px 18px 22px; border-radius: 25px; }
  .hero h1 { max-width: 92%; font-size: clamp(2rem, 10.5vw, 3.08rem); margin: .7rem 0 .7rem; line-height: .98; }
  .hero p { max-width: 91%; font-size: .89rem; line-height: 1.48; }
  .hero-art { top: 36px; right: -150px; opacity: .42; transform: scale(.82); }
  .art-caption { display: none; }
  .trust-row { max-width: 96%; flex-wrap: wrap; gap: .45rem .65rem; margin-top: 1.05rem; font-size: .68rem; }
  .divider { height: 16px; }
  .services { margin-top: 27px; }
  .section-heading { align-items: start; }
  .swipe-hint { display: none; }
  .service-grid { gap: 11px; }
  .service-card { grid-template-columns: 1fr auto; align-content: space-between; gap: .7rem; min-height: 162px; padding: 1rem; }
  .card-icon { grid-column: 1; width: 46px; height: 46px; border-radius: 14px; }
  .card-icon svg { width: 25px; height: 25px; }
  .card-copy { grid-column: 1 / -1; align-self: end; }
  .card-copy strong { font-size: .94rem; }
  .card-copy small { font-size: .68rem; }
  .card-arrow { grid-column: 2; grid-row: 1; align-self: center; }
  .quick-contact { align-items: stretch; flex-direction: column; margin-bottom: 28px; }
  .whatsapp-button { width: 100%; }
  .bottom-nav { width: calc(100% - 18px); bottom: max(6px, env(safe-area-inset-bottom)); border-radius: 22px; }
  .nav-item span { font-size: .57rem; }
  .sheet { width: calc(100% - 10px); margin-bottom: 5px; border-radius: 28px 28px 22px 22px; }
  .sheet-actions { grid-template-columns: 1fr; }
}

@media (max-width: 370px) {
  .service-card { min-height: 176px; padding: .85rem; }
  .card-copy strong { font-size: .88rem; }
  .card-copy small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Instalación PWA */
.install-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid rgba(146, 132, 255, .22);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(31, 24, 75, .86), rgba(10, 15, 45, .92));
  box-shadow: 0 20px 60px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
}
.install-card[hidden] { display: none !important; }
.install-card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -70px;
  top: -70px;
  border-radius: 50%;
  background: rgba(255, 70, 214, .18);
  filter: blur(30px);
  pointer-events: none;
}
.install-icon { position: relative; z-index: 1; width: 56px; height: 56px; }
.install-icon img { width: 56px; height: 56px; border-radius: 17px; box-shadow: 0 0 22px rgba(243, 65, 207, .24); }
.install-copy { position: relative; z-index: 1; display: grid; gap: 3px; min-width: 0; }
.install-copy strong { font-size: .98rem; line-height: 1.2; }
.install-copy small { color: #9ea5c9; font-size: .72rem; line-height: 1.35; }
.install-button {
  position: relative;
  z-index: 1;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: linear-gradient(135deg, #7458ff, #c349d8);
  color: white;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(120, 76, 255, .22);
}
.install-button:active { transform: scale(.97); }

.install-sheet {
  width: min(520px, calc(100% - 20px));
  margin: auto auto 10px;
  padding: 30px clamp(22px, 5vw, 36px) max(30px, env(safe-area-inset-bottom));
  border: 1px solid rgba(170,170,255,.2);
  border-radius: 30px 30px 24px 24px;
  background: rgba(10, 12, 35, .98);
  color: var(--text);
  box-shadow: 0 -25px 100px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.07);
}
.install-sheet::backdrop { background: rgba(1, 2, 12, .73); backdrop-filter: blur(8px); }
.install-sheet-icon { width: 72px; height: 72px; margin-bottom: 18px; border-radius: 21px; box-shadow: 0 0 30px rgba(243, 65, 207, .25); }
.install-sheet h2 { margin: .45rem 2.5rem 1rem 0; font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.05; letter-spacing: -.04em; }
.install-sheet ol { display: grid; gap: .8rem; padding-left: 1.35rem; color: #d9dbed; line-height: 1.5; }
.install-sheet p { color: #9ca3c5; line-height: 1.55; }
.is-standalone .site-link { display: none; }
.is-standalone .topbar { justify-content: center; }

@media (max-width: 580px) {
  .install-card { grid-template-columns: auto 1fr; margin-bottom: 12px; }
  .install-button { grid-column: 1 / -1; width: 100%; }
  .install-sheet { width: calc(100% - 10px); margin-bottom: 5px; }
}


/* Cirugía: tarjeta y panel con tratamiento visual especial */
.card-cirugia {
  isolation: isolate;
  background:
    radial-gradient(circle at 15% 12%, rgba(255, 137, 91, .32), transparent 42%),
    radial-gradient(circle at 92% 86%, rgba(142, 78, 255, .22), transparent 50%),
    linear-gradient(145deg, rgba(39, 20, 45, .96), rgba(10, 11, 31, .9));
  box-shadow: 0 18px 54px rgba(0,0,0,.25), 0 0 34px rgba(255, 104, 65, .09), inset 0 1px 0 rgba(255,255,255,.07);
}
.card-cirugia::before {
  content: "";
  position: absolute;
  inset: -55% -30%;
  z-index: -1;
  background: linear-gradient(105deg, transparent 41%, rgba(255,255,255,.15) 50%, transparent 59%);
  transform: translateX(-72%) rotate(8deg);
  animation: surgerySweep 5.2s ease-in-out infinite;
}
.card-cirugia .card-icon {
  color: #ff9a73;
  background: linear-gradient(145deg, rgba(255,118,72,.18), rgba(150,82,255,.14));
  box-shadow: 0 0 24px rgba(255,118,72,.18), 0 0 40px rgba(146,83,255,.1);
}
.surgery-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,190,165,.85), transparent);
  box-shadow: 0 0 12px rgba(255,126,80,.65);
  animation: surgeryScan 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes surgerySweep {
  0%, 55% { transform: translateX(-72%) rotate(8deg); opacity: .15; }
  78%, 100% { transform: translateX(72%) rotate(8deg); opacity: .75; }
}
@keyframes surgeryScan {
  0%, 100% { transform: translateY(8px); opacity: 0; }
  18% { opacity: .9; }
  72% { opacity: .45; }
  82% { transform: translateY(136px); opacity: 0; }
}
.sheet[data-service="cirugia"] {
  border-color: rgba(255, 130, 88, .38);
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 116, 72, .2), transparent 38%),
    radial-gradient(circle at 92% 100%, rgba(136, 82, 255, .18), transparent 44%),
    rgba(10, 12, 35, .985);
  box-shadow: 0 -25px 100px rgba(0,0,0,.68), 0 0 42px rgba(255,116,72,.12), inset 0 1px 0 rgba(255,255,255,.08);
}
.sheet[data-service="cirugia"] .sheet-icon {
  color: #ff9a73;
  border-color: rgba(255, 136, 94, .42);
  background: linear-gradient(145deg, rgba(255,118,72,.2), rgba(137,81,255,.18));
  box-shadow: 0 0 34px rgba(255,118,72,.18);
  animation: surgeryIconPulse 3s ease-in-out infinite;
}
.sheet[data-service="cirugia"] h2 {
  background: linear-gradient(110deg, #ffffff 10%, #ffc0a8 48%, #b9a7ff 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sheet[data-service="cirugia"] .button-primary {
  background: linear-gradient(135deg, #ff724c, #8d58ff);
  box-shadow: 0 14px 38px rgba(255,102,68,.2), 0 0 28px rgba(141,88,255,.14);
}
@keyframes surgeryIconPulse {
  0%,100% { transform: translateY(0) scale(1); box-shadow: 0 0 26px rgba(255,118,72,.15); }
  50% { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 42px rgba(255,118,72,.28); }
}