:root {
  color-scheme: light;
  --navy: #213b78;
  --royal: #3f5ba3;
  --blue: #4f8de3;
  --sky: #bfe2f7;
  --sky-soft: #eef8fe;
  --ice: #f6fbff;
  --ink: #192434;
  --muted: #647286;
  --line: #dce7f0;
  --white: #fff;
  --green: #168a5b;
  --shadow: 0 18px 50px rgba(35, 65, 105, 0.11);
  --shadow-soft: 0 9px 28px rgba(35, 65, 105, 0.08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #eef5fa; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #eef5fa; }
button, input { font: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; border-radius: 10px; color: white; background: var(--navy); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.site-shell { width: min(100%, 1180px); min-height: 100vh; margin: 0 auto; background: var(--white); box-shadow: 0 0 55px rgba(31, 57, 91, 0.12); }
.site-header { position: sticky; z-index: 40; top: 0; display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px; border-bottom: 1px solid rgba(220, 231, 240, 0.86); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(15px); }
.brand img { width: 174px; height: auto; }
.header-order { padding: 10px 13px; border-radius: 12px; color: var(--navy); background: var(--sky-soft); font-size: 0.77rem; font-weight: 800; text-decoration: none; white-space: nowrap; }

main { min-height: 68vh; }
.catalog-hero { position: relative; overflow: hidden; padding: 34px 20px 28px; color: white; background: linear-gradient(145deg, #213b78 0%, #3f66ad 58%, #5e9ed9 100%); }
.catalog-hero::after { content: ""; position: absolute; right: -68px; bottom: -90px; width: 260px; height: 260px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.055), 0 0 0 78px rgba(255,255,255,.04); }
.home-back { position: relative; z-index: 2; display: inline-flex; min-height: 38px; align-items: center; gap: 7px; margin: -5px 0 17px; padding: 7px 10px 7px 8px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; color: white; background: rgba(18,43,86,.2); font-size: .78rem; font-weight: 800; text-decoration: none; transition: background .18s ease, transform .18s ease; }
.home-back:hover { background: rgba(18,43,86,.38); transform: translateX(-2px); }
.home-back:focus-visible { outline: 3px solid rgba(255,255,255,.54); outline-offset: 3px; }
.home-back svg { width: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.eyebrow { margin: 0 0 8px; font-size: 0.72rem; font-weight: 850; letter-spacing: 0.13em; text-transform: uppercase; }
.catalog-hero h1 { position: relative; z-index: 1; max-width: 430px; margin: 0; font-size: clamp(2rem, 9vw, 3.6rem); line-height: 1.02; letter-spacing: -0.045em; }
.catalog-hero > p:not(.eyebrow) { position: relative; z-index: 1; max-width: 520px; margin: 15px 0 0; color: rgba(255,255,255,.86); font-size: 1rem; line-height: 1.55; }
.search-wrap { position: relative; z-index: 2; margin-top: 24px; }
.search-wrap svg { position: absolute; top: 16px; left: 16px; width: 20px; fill: none; stroke: var(--muted); stroke-linecap: round; stroke-width: 2; }
.search-wrap input { width: 100%; min-height: 52px; padding: 0 16px 0 47px; border: 0; border-radius: 15px; outline: none; color: var(--ink); background: white; box-shadow: 0 12px 30px rgba(22, 40, 71, 0.17); font-size: 1rem; }
.search-wrap input:focus { box-shadow: 0 0 0 4px rgba(191,226,247,.55), 0 12px 30px rgba(22,40,71,.17); }

.catalog-body { padding: 25px 18px 46px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.section-head h2 { margin: 0; font-size: 1.4rem; letter-spacing: -0.025em; }
.section-head p { margin: 4px 0 0; color: var(--muted); font-size: 0.86rem; line-height: 1.45; }
.section-count { flex: 0 0 auto; color: var(--royal); font-size: 0.74rem; font-weight: 800; }

.category-rail { display: grid; grid-auto-columns: minmax(196px, 73%); grid-auto-flow: column; gap: 11px; margin: 0 -18px 29px; padding: 0 18px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.category-rail::-webkit-scrollbar { display: none; }
.category-card { position: relative; display: grid; min-height: 139px; align-content: space-between; padding: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 21px; color: var(--ink); background: linear-gradient(150deg, #fff, var(--ice)); box-shadow: var(--shadow-soft); scroll-snap-align: start; font: inherit; text-align: left; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }
.category-card:hover { border-color: #b8cee1; transform: translateY(-2px); }
.category-card:focus-visible { outline: 3px solid rgba(79,141,227,.36); outline-offset: 3px; }
.category-card.is-active { color: white; border-color: transparent; background: linear-gradient(145deg, var(--navy), #365c9d); box-shadow: 0 16px 34px rgba(33,59,120,.22); }
.category-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--royal); background: var(--sky-soft); }
.category-card.is-active .category-icon { color: white; background: rgba(255,255,255,.16); }
.category-icon svg { width: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.category-card strong { display: block; margin-top: 15px; font-size: 1rem; line-height: 1.25; }
.category-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 0.76rem; }
.category-card.is-active small { color: rgba(255,255,255,.78); }

.category-results { min-height: 72px; }
.category-panel { animation: category-reveal .24s ease both; }
.category-panel:not([hidden]) ~ .category-panel:not([hidden]) { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); }
.category-panel[hidden] { display: none; }
.placeholder-message { padding: 19px 20px; border: 1px solid #cfe2f0; border-radius: 17px; color: #3d5874; background: var(--sky-soft); }
.placeholder-message strong { display: block; color: var(--navy); font-size: .96rem; }
.placeholder-message p { margin: 6px 0 0; font-size: .84rem; line-height: 1.5; }
.planned-study-list { display: grid; gap: 0; margin: 14px 0 0; padding: 0 18px; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: var(--shadow-soft); list-style: none; }
.planned-study-list li { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #edf2f6; color: #34455d; font-size: .87rem; }
.planned-study-list li:last-child { border-bottom: 0; }
.planned-study-list li[hidden] { display: none; }
.planned-study-list span { color: var(--muted); font-size: .7rem; font-weight: 750; white-space: nowrap; }
@keyframes category-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.radiography-head { margin-top: 3px; padding-top: 3px; }
.filter-tabs { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-button { min-height: 40px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; color: #536176; background: white; font-size: 0.81rem; font-weight: 800; white-space: nowrap; }
.filter-button.is-active { color: white; border-color: var(--royal); background: var(--royal); }

.study-grid { display: grid; gap: 15px; }
.study-card { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: var(--shadow-soft); }
.study-card[hidden] { display: none; }
.study-image { position: relative; height: 178px; overflow: hidden; background: #111; }
.study-image img { width: 100%; height: 100%; object-fit: cover; }
.study-image-contain { background: #f7f9fc; }
.study-image-contain img { object-fit: contain; }
.study-preview-collage { display: grid; height: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: white; }
.study-preview-collage img { min-width: 0; min-height: 0; object-fit: cover; }
.study-image::after { content: ""; position: absolute; inset: auto 0 0; height: 35%; background: linear-gradient(transparent, rgba(8,20,38,.32)); }
.study-type { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 6px 9px; border-radius: 999px; color: var(--navy); background: rgba(255,255,255,.92); font-size: 0.67rem; font-weight: 850; }
.study-copy { padding: 17px; }
.study-copy h3 { margin: 0; font-size: 1.17rem; line-height: 1.25; letter-spacing: -0.02em; }
.study-copy > p { display: -webkit-box; margin: 8px 0 14px; overflow: hidden; color: var(--muted); font-size: 0.9rem; line-height: 1.48; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.meta-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.meta-pill { padding: 6px 9px; border-radius: 9px; color: #35507c; background: var(--sky-soft); font-size: 0.7rem; font-weight: 760; }
.study-link { display: flex; min-height: 46px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: var(--royal); font-size: 0.85rem; font-weight: 850; text-decoration: none; }
.study-link svg { width: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.empty-search { padding: 26px 20px; border: 1px dashed #b9cedf; border-radius: 18px; color: var(--muted); background: var(--ice); text-align: center; }

.catalog-section { margin-top: 40px; padding-top: 6px; }
.more-categories { margin-top: 34px; }
.service-groups { display: grid; gap: 11px; }
.service-group { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 7px 22px rgba(35,65,105,.06); }
.service-group summary { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; min-height: 70px; padding: 15px; cursor: pointer; list-style: none; }
.service-group summary::-webkit-details-marker { display: none; }
.service-group summary strong { display: block; font-size: 0.94rem; }
.service-group summary small { display: block; margin-top: 4px; color: var(--muted); font-size: 0.75rem; }
.summary-arrow { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: var(--royal); background: var(--sky-soft); transition: transform .18s ease; }
.service-group[open] .summary-arrow { transform: rotate(180deg); }
.summary-arrow svg { width: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.service-list { display: grid; gap: 0; margin: 0; padding: 0 15px 10px; border-top: 1px solid var(--line); list-style: none; }
.service-list li { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #edf2f6; font-size: 0.85rem; }
.service-list li:last-child { border-bottom: 0; }
.service-list span { color: var(--muted); font-size: 0.69rem; font-weight: 750; }
.catalog-note { margin-top: 14px; padding: 14px 16px; border-radius: 15px; color: #3f5973; background: var(--sky-soft); font-size: 0.81rem; line-height: 1.5; }

.detail-top { position: relative; }
.detail-nav { position: absolute; z-index: 5; top: 14px; left: 14px; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; color: white; background: rgba(17,31,53,.62); backdrop-filter: blur(10px); }
.detail-nav svg { width: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.detail-visual { height: 265px; background: #0c1420; }
.detail-visual img { width: 100%; height: 100%; object-fit: cover; }
.detail-visual-contain { background: #f7f9fc; }
.detail-visual-contain img { object-fit: contain; }
.detail-gallery { display: grid; background: #0c1420; }
.detail-gallery figure { margin: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.detail-gallery figure:last-child { border-bottom: 0; }
.detail-gallery .detail-visual { height: 205px; }
.detail-gallery .detail-visual img { object-fit: cover; object-position: center; }
.detail-gallery-4 .detail-visual { background: #f7f9fc; }
.detail-gallery-4 .detail-visual img { object-fit: contain; }
.detail-gallery-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-gallery-6 .detail-visual { height: 135px; background: #f7f9fc; }
.detail-gallery-6 .detail-visual img { object-fit: contain; }
.detail-gallery-6 figure { border-right: 1px solid rgba(255,255,255,.18); }
.detail-gallery-6 figure:nth-child(even) { border-right: 0; }
.detail-gallery-7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-gallery-7 .detail-visual { height: 135px; background: #f7f9fc; }
.detail-gallery-7 .detail-visual img { object-fit: contain; }
.detail-gallery-7 figure { border-right: 1px solid rgba(255,255,255,.18); }
.detail-gallery-7 figure:nth-child(even) { border-right: 0; }
.detail-gallery-7 figure:last-child { grid-column: 1 / -1; border-right: 0; }
.detail-gallery figcaption { padding: 9px 14px 10px; color: rgba(255,255,255,.78); background: #111d2d; font-size: .72rem; font-weight: 750; text-align: center; }
.detail-intro { position: relative; margin-top: -25px; padding: 25px 20px 22px; border-radius: 27px 27px 0 0; background: white; }
.detail-kicker { margin: 0 0 8px; color: var(--blue); font-size: 0.72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.detail-intro h1 { margin: 0; font-size: clamp(1.8rem, 8vw, 2.7rem); line-height: 1.07; letter-spacing: -0.04em; }
.detail-intro > p { margin: 13px 0 0; color: var(--muted); font-size: 0.98rem; line-height: 1.58; }
.fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 19px; }
.fact { min-height: 84px; padding: 13px; border: 1px solid #d6e7f4; border-radius: 16px; background: var(--ice); }
.fact span { display: block; color: var(--muted); font-size: 0.68rem; }
.fact strong { display: block; margin-top: 5px; color: var(--navy); font-size: 0.87rem; line-height: 1.3; }
.detail-body { padding: 2px 20px 145px; }
.content-block { padding: 22px 0; border-top: 1px solid var(--line); }
.content-block h2 { margin: 0 0 14px; font-size: 1.3rem; letter-spacing: -0.025em; }
.use-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.use-list li { display: grid; grid-template-columns: 31px 1fr; gap: 10px; align-items: start; color: #425269; font-size: 0.9rem; line-height: 1.46; }
.use-list b { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; color: white; background: var(--blue); font-size: 0.74rem; }
.prep-card { padding: 17px; border: 1px solid #cfe4f3; border-radius: 18px; background: var(--sky-soft); }
.prep-card p { margin: 0; color: #3e5874; font-size: 0.9rem; line-height: 1.55; }
.prep-card p + p { margin-top: 9px; }
.steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; min-height: 45px; padding-left: 47px; color: #425269; font-size: 0.9rem; line-height: 1.48; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; top: 0; left: 0; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #a9cce5; border-radius: 50%; color: var(--royal); background: white; font-size: 0.77rem; font-weight: 850; }
.cta-dock { position: fixed; z-index: 35; right: 0; bottom: 0; left: 0; display: grid; width: min(100%, 1180px); grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 auto; padding: 11px 14px max(11px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255,255,255,.96); box-shadow: 0 -12px 36px rgba(27,54,88,.12); backdrop-filter: blur(16px); }
.cta { display: grid; min-height: 53px; place-items: center; padding: 8px 10px; border-radius: 14px; font-size: 0.76rem; font-weight: 850; line-height: 1.25; text-align: center; text-decoration: none; }
.cta-primary { color: white; background: linear-gradient(120deg, var(--navy), var(--royal)); box-shadow: 0 9px 20px rgba(33,59,120,.22); }
.cta-whatsapp { color: var(--green); border: 1px solid #abd9c5; background: #effaf5; }

.site-footer { padding: 38px 20px 44px; color: var(--ink); background: #1e3159; text-align: center; }
.footer-card { width: min(100%, 430px); margin: 0 auto; padding: 25px 24px 22px; border-radius: 18px; background: white; box-shadow: 0 14px 38px rgba(8,20,43,.2); }
.site-footer .footer-card img { width: min(100%, 285px); height: auto; margin: 0 auto 18px; filter: none; opacity: 1; }
.site-footer .footer-card p { margin: 0; color: #536176; font-size: .82rem; font-weight: 500; line-height: 1.6; }
.site-footer .footer-card strong { color: var(--navy); font-size: .9rem; font-weight: 800; }

@media (min-width: 620px) {
  .site-header { padding-right: 28px; padding-left: 28px; }
  .catalog-hero { padding: 48px 34px 36px; }
  .catalog-body { padding-right: 30px; padding-left: 30px; }
  .category-rail { grid-auto-columns: minmax(220px, 43%); margin-right: -30px; margin-left: -30px; padding-right: 30px; padding-left: 30px; }
  .study-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-visual { height: 355px; }
  .detail-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-gallery figure { border-right: 1px solid rgba(255,255,255,.18); border-bottom: 0; }
  .detail-gallery figure:last-child { border-right: 0; }
  .detail-gallery .detail-visual { height: 270px; }
  .detail-intro, .detail-body { padding-right: 34px; padding-left: 34px; }
  .fact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .site-header { min-height: 78px; padding-right: 44px; padding-left: 44px; }
  .brand img { width: 205px; }
  .header-order { padding: 12px 18px; font-size: .84rem; }
  .catalog-hero { padding: 58px 52px 46px; }
  .catalog-hero h1 { max-width: 680px; font-size: clamp(3rem, 5vw, 4.55rem); }
  .catalog-hero > p:not(.eyebrow) { max-width: none; font-size: 1.08rem; white-space: nowrap; }
  .search-wrap { display: block; max-width: 780px; margin-top: 30px; }
  .catalog-body { padding: 38px 44px 64px; }
  .section-head { margin-bottom: 20px; }
  .section-head h2 { font-size: 1.65rem; }
  .category-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; grid-auto-flow: row; gap: 15px; margin: 0 0 40px; padding: 0; overflow: visible; }
  .category-card { min-height: 158px; }
  .filter-tabs { margin-bottom: 22px; }
  .study-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .study-image { height: 190px; }
  .study-copy { padding: 20px; }
  .more-categories { margin-top: 48px; }
  .service-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .site-footer { padding: 40px 44px 48px; }
  .study-detail { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: start; }
  .detail-top { grid-column: 1; }
  .detail-visual { height: 470px; }
  .detail-gallery { grid-template-columns: 1fr; }
  .detail-gallery figure { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .detail-gallery figure:last-child { border-bottom: 0; }
  .detail-gallery .detail-visual { height: 205px; }
  .detail-gallery-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-gallery-4 figure { border-right: 1px solid rgba(255,255,255,.18); border-bottom: 0; }
  .detail-gallery-4 figure:nth-child(even) { border-right: 0; }
  .detail-gallery-4 figure:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.18); }
  .detail-gallery-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-gallery-6 figure { border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
  .detail-gallery-6 figure:nth-child(even) { border-right: 0; }
  .detail-gallery-6 figure:nth-last-child(-n+2) { border-bottom: 0; }
  .detail-gallery-6 .detail-visual { height: 125px; }
  .detail-gallery-7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-gallery-7 figure { border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
  .detail-gallery-7 figure:nth-child(even) { border-right: 0; }
  .detail-gallery-7 figure:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
  .detail-gallery-7 .detail-visual { height: 110px; }
  .detail-intro { grid-column: 2; min-height: 470px; margin-top: 0; padding: 58px 46px 36px; border-radius: 0; }
  .detail-intro h1 { font-size: clamp(2.4rem, 4vw, 3.45rem); }
  .detail-body { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding: 18px 44px 130px; }
  .content-block { padding-top: 30px; }
  .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-dock { padding-right: 44px; padding-left: 44px; }
  .cta { min-height: 56px; font-size: .84rem; }
}

@media (min-width: 1180px) {
  body { padding-right: 22px; padding-left: 22px; }
  .site-shell { margin-top: 22px; margin-bottom: 22px; border-radius: 22px; overflow: hidden; }
  .site-header { border-radius: 22px 22px 0 0; }
  .cta-dock { width: min(calc(100% - 44px), 1180px); }
}

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