:root {
  --royal: #1647b8;
  --royal-dark: #103c9f;
  --navy: #0c1f44;
  --sky: #27b7f5;
  --surface: #f3f6fb;
  --line: #dce5f2;
  --muted: #62708a;
  --white: #ffffff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--navy); font-family: Arial, Helvetica, sans-serif; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.admin-loading { min-height: 100vh; display: grid; place-items: center; background: #f3f6fb; color: var(--navy); font-size: 1.05rem; font-weight: 800; }
.admin-gate { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at top left, #eff7ff, #f7f9fc 55%, #e8effb); }
.admin-gate > section { width: min(520px, 100%); padding: 40px; background: white; border: 1px solid #dce5f2; border-radius: 22px; box-shadow: 0 24px 70px rgba(12,31,68,.14); }
.admin-gate img { width: 225px; max-width: 80%; display: block; margin-bottom: 30px; }
.admin-gate h1 { margin: 5px 0 14px; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.02; letter-spacing: -.045em; }
.admin-gate p { color: #61708a; line-height: 1.65; }
.admin-gate form { display: grid; gap: 14px; margin-top: 24px; }
.admin-gate label, .admin-form-fields label, .admin-tools label { display: grid; gap: 8px; color: #243654; font-size: .8rem; font-weight: 900; }
.admin-gate input, .admin-form-fields input, .admin-form-fields select, .admin-form-fields textarea, .admin-tools input { width: 100%; padding: 13px 14px; color: var(--navy); background: white; border: 1px solid #cbd7e7; border-radius: 10px; outline: none; }
.admin-gate input:focus, .admin-form-fields input:focus, .admin-form-fields select:focus, .admin-form-fields textarea:focus, .admin-tools input:focus { border-color: var(--royal); box-shadow: 0 0 0 3px rgba(22,71,184,.1); }
.admin-gate button, .admin-gate > section > a { display: inline-flex; justify-content: center; padding: 14px 18px; color: white; background: var(--royal); border: 0; border-radius: 10px; font-weight: 900; cursor: pointer; }
.admin-gate > section > a { margin-top: 12px; color: var(--royal); background: transparent; }
.admin-gate-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.admin-gate-actions a { padding: 12px 15px; color: var(--royal); background: #edf3ff; border-radius: 9px; font-weight: 800; }
.admin-error { margin: 0; color: #b42318 !important; font-weight: 800; }

.admin-shell { min-height: 100vh; padding-bottom: 70px; background: #f3f6fb; }
.admin-header { min-height: 82px; display: grid; grid-template-columns: 240px 1fr auto; align-items: center; gap: 28px; padding: 9px clamp(22px, 4vw, 62px); background: white; border-bottom: 1px solid #dfe7f2; }
.admin-brand { width: 210px; height: 62px; overflow: hidden; }
.admin-brand img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.admin-header > div { display: grid; gap: 3px; }
.admin-header > div span { color: #75839a; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.admin-header > div strong { font-size: .9rem; }
.admin-header nav { display: flex; gap: 9px; }
.admin-header nav a, .admin-header nav button { padding: 10px 13px; color: var(--royal); background: #edf3ff; border: 0; border-radius: 9px; font-size: .82rem; font-weight: 900; cursor: pointer; }
.admin-hero { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding: 52px clamp(22px, 4vw, 62px) 34px; color: white; background: linear-gradient(125deg, #0d3b9d, #1766d4 62%, #1cbcf1); }
.admin-hero h1 { margin: 0; font-size: clamp(2.2rem, 4vw, 4.4rem); letter-spacing: -.05em; line-height: 1; }
.admin-hero p:not(.admin-kicker) { max-width: 650px; margin: 14px 0 0; color: rgba(255,255,255,.78); line-height: 1.55; }
.admin-kicker { margin: 0 0 10px; color: #2cbff4; font-size: .72rem; font-weight: 900; letter-spacing: .17em; }
.admin-hero .admin-kicker { color: #c8efff; }
.admin-hero > button { flex: 0 0 auto; padding: 15px 20px; color: var(--royal); background: white; border: 0; border-radius: 10px; font-weight: 900; box-shadow: 0 14px 34px rgba(3,27,72,.2); cursor: pointer; }
.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 24px clamp(22px, 4vw, 62px); }
.admin-stats article { display: grid; gap: 3px; padding: 22px; background: white; border: 1px solid #dfe7f2; border-radius: 14px; box-shadow: 0 8px 24px rgba(30,59,105,.05); }
.admin-stats strong { font-size: 1.85rem; color: var(--royal); }
.admin-stats span { color: #6e7d95; font-size: .78rem; font-weight: 800; }
.admin-alert { margin: 0 clamp(22px, 4vw, 62px) 20px; padding: 13px 16px; color: #166534; background: #dcfce7; border: 1px solid #a7f3d0; border-radius: 10px; font-weight: 800; }
.admin-alert.error { color: #9f1c14; background: #fee4e2; border-color: #fecdca; }
.admin-editor, .admin-tools, .admin-category-manager, .admin-products { margin: 0 clamp(22px, 4vw, 62px) 24px; background: white; border: 1px solid #dfe7f2; border-radius: 16px; box-shadow: 0 10px 30px rgba(30,59,105,.06); }
.admin-editor { padding: 26px; }
.admin-section-title { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 20px; }
.admin-section-title h2 { margin: 0; font-size: 1.8rem; letter-spacing: -.035em; }
.admin-section-title > button { padding: 8px 11px; color: #52627d; background: #f2f5f9; border: 0; border-radius: 8px; cursor: pointer; }
.admin-editor form { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 25px; }
.admin-form-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.admin-form-fields .wide { grid-column: 1 / -1; }
.admin-form-fields textarea { resize: vertical; min-height: 70px; font: inherit; }
.admin-form-fields small { color: #7c899c; font-weight: 500; }
.admin-form-fields .admin-check { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.admin-check input { width: 18px; height: 18px; margin: 0; }
.admin-image-preview { min-height: 370px; display: grid; place-items: center; overflow: hidden; padding: 10px; background: #f4f7fb; border: 1px dashed #b9c8dc; border-radius: 12px; color: #7b899d; text-align: center; }
.admin-image-preview img { width: 100%; height: 100%; max-height: 440px; object-fit: contain; background: white; border-radius: 8px; }
.admin-editor footer { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; padding-top: 20px; border-top: 1px solid #e4eaf2; }
.admin-editor footer button, .admin-tools button { padding: 12px 16px; color: #43526b; background: #edf1f6; border: 0; border-radius: 9px; font-weight: 900; cursor: pointer; }
.admin-editor footer button:last-child, .admin-tools button { color: white; background: var(--royal); }
.admin-editor button:disabled, .admin-tools button:disabled, .admin-actions button:disabled { opacity: .55; cursor: wait; }
.admin-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 20px; }
.admin-tools form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; }
.admin-category-manager { padding: 24px; }
.admin-category-manager .admin-section-title { align-items: end; }
.admin-category-manager .admin-section-title > p { max-width: 370px; margin: 0; color: #6e7d95; line-height: 1.5; }
.admin-category-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.admin-category-list article { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px; border: 1px solid #e1e8f1; border-radius: 12px; }
.admin-category-list article > div:first-child { min-width: 0; display: grid; gap: 5px; }
.admin-category-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-category-list span { color: #748198; font-size: .74rem; font-weight: 800; }
.admin-category-empty { grid-column: 1 / -1; margin: 0; padding: 25px; color: #687791; text-align: center; }
.admin-products { padding: 24px; }
.admin-table-head, .admin-product-list article { display: grid; grid-template-columns: minmax(260px, 2fr) minmax(130px, .8fr) minmax(130px, .8fr) 100px minmax(220px, 1fr); align-items: center; gap: 18px; }
.admin-table-head { padding: 0 14px 11px; color: #8490a2; font-size: .66rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.admin-product-list { display: grid; gap: 8px; }
.admin-product-list article { padding: 12px 14px; border: 1px solid #e1e8f1; border-radius: 12px; }
.admin-product-list article.is-hidden { opacity: .68; background: #f8f9fb; }
.admin-product-main { min-width: 0; display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 13px; }
.admin-product-main img { width: 58px; height: 66px; object-fit: contain; background: white; border: 1px solid #e2e8f1; border-radius: 7px; }
.admin-product-main div, .admin-product-list article > div:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.admin-product-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-product-list small { overflow: hidden; color: #748198; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-category-pill { display: inline-flex; padding: 7px 9px; color: #244d9e; background: #edf3ff; border-radius: 999px; font-size: .72rem; font-weight: 900; }
.admin-status { display: inline-flex; padding: 7px 9px; color: #667085; background: #eef1f5; border-radius: 999px; font-size: .7rem; font-weight: 900; }
.admin-status.live { color: #08783d; background: #dcfce7; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-actions button { padding: 8px 9px; color: #31589e; background: #edf3ff; border: 0; border-radius: 7px; font-size: .72rem; font-weight: 900; cursor: pointer; }
.admin-actions button.danger { color: #b42318; background: #fee4e2; }
.admin-product-list .admin-empty-row { display: block; padding: 42px 20px; color: #687791; text-align: center; }
.admin-body { background: #f3f6fb; }
.admin-gate form button:disabled, .admin-header button:disabled { opacity: .6; cursor: wait; }
.admin-gate form + p { margin-top: 15px; }
.admin-image-preview > div { max-width: 180px; line-height: 1.5; }
.admin-actions button:focus-visible, .admin-header nav button:focus-visible { outline: 3px solid rgba(22,71,184,.25); outline-offset: 2px; }
.admin-dialog { width: min(540px, calc(100% - 32px)); padding: 0; color: var(--navy); background: white; border: 0; border-radius: 18px; box-shadow: 0 28px 80px rgba(7,24,56,.3); }
.admin-dialog::backdrop { background: rgba(7,24,56,.55); backdrop-filter: blur(3px); }
.admin-dialog form { display: grid; gap: 18px; padding: 26px; }
.admin-dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.admin-dialog-heading h2 { margin: 0; font-size: 1.7rem; letter-spacing: -.035em; }
.admin-dialog-heading > button { width: 38px; height: 38px; flex: 0 0 auto; color: #52627d; background: #f2f5f9; border: 0; border-radius: 9px; font-size: 1.35rem; cursor: pointer; }
.admin-dialog form > p { margin: 0; color: #62708a; line-height: 1.55; }
.admin-dialog label { display: grid; gap: 8px; color: #243654; font-size: .8rem; font-weight: 900; }
.admin-dialog input, .admin-dialog select { width: 100%; padding: 13px 14px; color: var(--navy); background: white; border: 1px solid #cbd7e7; border-radius: 10px; outline: none; }
.admin-dialog input:focus, .admin-dialog select:focus { border-color: var(--royal); box-shadow: 0 0 0 3px rgba(22,71,184,.1); }
.admin-dialog footer { display: flex; justify-content: flex-end; gap: 10px; padding-top: 5px; }
.admin-dialog footer button { padding: 12px 16px; color: #43526b; background: #edf1f6; border: 0; border-radius: 9px; font-weight: 900; cursor: pointer; }
.admin-dialog footer button:last-child { color: white; background: var(--royal); }
.admin-dialog footer button.danger { color: white; background: #b42318; }
.admin-dialog button:disabled, .admin-dialog input:disabled, .admin-dialog select:disabled { opacity: .55; cursor: wait; }

@media (max-width: 1050px) {
  .admin-table-head { display: none; }
  .admin-product-list article { grid-template-columns: 1fr 1fr; }
  .admin-product-main { grid-column: 1 / -1; }
  .admin-actions { justify-content: flex-end; }
  .admin-category-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .admin-header { grid-template-columns: 1fr auto; padding: 8px 18px; }
  .admin-header > div { display: none; }
  .admin-brand { width: 165px; }
  .admin-header nav a { display: none; }
  .admin-hero { align-items: start; flex-direction: column; padding: 38px 22px 30px; }
  .admin-stats { grid-template-columns: 1fr; }
  .admin-editor form, .admin-tools { grid-template-columns: 1fr; }
  .admin-form-fields { grid-template-columns: 1fr; }
  .admin-form-fields .wide { grid-column: auto; }
  .admin-image-preview { min-height: 250px; }
  .admin-product-list article { grid-template-columns: 1fr; }
  .admin-product-main { grid-column: auto; }
  .admin-actions { justify-content: flex-start; }
  .admin-category-manager .admin-section-title { align-items: start; flex-direction: column; }
  .admin-category-list { grid-template-columns: 1fr; }
  .admin-category-list article { align-items: flex-start; }
  .admin-dialog form { padding: 22px; }
}

.site-header { position: sticky; z-index: 30; top: 0; min-height: 84px; display: grid; grid-template-columns: 250px 1fr auto; align-items: center; gap: 32px; padding: 10px clamp(24px, 5vw, 72px); background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(12,31,68,.09); backdrop-filter: blur(16px); }
.brand { width: 215px; height: 63px; display: block; overflow: hidden; }
.brand img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.site-header nav { display: flex; justify-content: center; gap: clamp(22px, 3.2vw, 52px); font-weight: 700; }
.site-header nav a { position: relative; padding: 18px 2px; }
.site-header nav a::after { position: absolute; right: 50%; bottom: 7px; left: 50%; height: 2px; content: ""; background: var(--royal); transition: .2s ease; }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after { right: 0; left: 0; }
.header-cta { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 10px; background: var(--royal); color: white; font-weight: 800; box-shadow: 0 12px 28px rgba(22,71,184,.2); }

.hero { min-height: 715px; display: grid; grid-template-columns: minmax(0, 47%) minmax(0, 53%); overflow: hidden; background: radial-gradient(circle at 14% 20%, #fff 0, #fff 25%, #f5f9ff 75%); }
.hero-copy { z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 76px 30px 70px clamp(28px, 5vw, 76px); }
.eyebrow { margin: 0 0 15px; color: var(--royal); font-size: .78rem; font-weight: 900; letter-spacing: .18em; }
.hero h1 { max-width: 690px; margin: 0; font-size: clamp(3.25rem, 5.15vw, 5.8rem); line-height: .98; letter-spacing: -.055em; }
.hero h1 span { display: block; color: var(--royal); }
.hero-lead { max-width: 610px; margin: 25px 0 0; color: #52627d; font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.65; }
.hero-search { width: min(650px, 100%); height: 66px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-top: 30px; padding: 6px 7px 6px 20px; background: white; border: 1px solid #b9c8df; border-radius: 13px; box-shadow: 0 16px 38px rgba(27,58,112,.12); transition: .2s ease; }
.hero-search:focus-within { border-color: var(--royal); box-shadow: 0 0 0 4px rgba(22,71,184,.12), 0 18px 42px rgba(27,58,112,.13); }
.hero-search svg { width: 24px; height: 24px; color: #596985; }
.hero-search input, .inline-search input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--navy); }
.hero-search button { height: 52px; padding: 0 30px; border: 0; border-radius: 9px; background: var(--royal); color: white; font-weight: 800; cursor: pointer; }
.search-types { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.search-types span { padding: 8px 14px; color: var(--royal); background: #eef4ff; border: 1px solid #ccdaf4; border-radius: 999px; font-size: .8rem; font-weight: 800; }
.hero-stats { display: flex; gap: 30px; margin-top: 34px; }
.hero-stats div { display: grid; gap: 2px; padding-left: 14px; border-left: 3px solid var(--sky); }
.hero-stats strong { font-size: 1.12rem; }
.hero-stats span { color: var(--muted); font-size: .76rem; }

.hero-visual { position: relative; min-height: 715px; overflow: hidden; background: linear-gradient(135deg, #0f46bd 0%, #138be8 58%, #2bc4f5 100%); }
.hero-visual::before { position: absolute; inset: 0; content: ""; opacity: .28; background-image: radial-gradient(#fff 1.4px, transparent 1.4px); background-size: 18px 18px; clip-path: polygon(62% 4%,100% 4%,100% 35%,71% 35%); }
.blue-shape { position: absolute; inset: 0; background: linear-gradient(132deg, transparent 0 20%, rgba(255,255,255,.14) 20.2% 21%, transparent 21.2% 100%), linear-gradient(42deg, transparent 0 62%, rgba(255,255,255,.18) 62.2% 63%, transparent 63.2% 100%); }
.hero-sheet { position: absolute; overflow: hidden; padding: 0; background: white; border: 6px solid white; border-radius: 13px; box-shadow: 0 26px 60px rgba(3,23,67,.35); cursor: zoom-in; transition: transform .25s ease; }
.hero-sheet:hover, .hero-sheet:focus-visible { z-index: 6; transform: translateY(-8px) rotate(0); outline: 4px solid rgba(255,255,255,.5); }
.hero-sheet img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; background: white; }
.sheet-one { width: 29%; height: 60%; top: 17%; left: 8%; transform: rotate(-7deg); }
.sheet-two { z-index: 3; width: 35%; height: 70%; top: 10%; left: 33%; transform: rotate(2deg); }
.sheet-three { z-index: 2; width: 30%; height: 62%; top: 18%; right: 4%; transform: rotate(7deg); }
.hero-note { position: absolute; z-index: 7; right: 7%; bottom: 7%; display: grid; gap: 2px; padding: 13px 17px; background: rgba(255,255,255,.94); border-radius: 10px; box-shadow: 0 12px 28px rgba(3,23,67,.2); }
.hero-note span { color: var(--royal); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .11em; }
.hero-note strong { font-size: .9rem; }

.category-section, .catalog-section { padding: 86px clamp(24px, 5vw, 76px); }
.category-section { background: white; }
.section-heading, .catalog-top { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 34px; }
.section-heading h2, .catalog-top h2, .contact-strip h2 { margin: 0; font-size: clamp(2rem, 3.5vw, 3.5rem); line-height: 1.03; letter-spacing: -.035em; }
.section-heading > p { max-width: 480px; margin: 0; color: var(--muted); line-height: 1.65; }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.category-card { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 18px; min-height: 106px; padding: 12px 18px 12px 12px; text-align: left; background: white; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 8px 24px rgba(30,59,105,.06); cursor: pointer; transition: .2s ease; }
.category-card:hover, .category-card:focus-visible { transform: translateY(-4px); border-color: #a9c2f1; box-shadow: 0 15px 34px rgba(22,71,184,.13); }
.category-thumb { width: 76px; height: 80px; display: block; overflow: hidden; padding: 4px; background: white; border: 1px solid #e4eaf3; border-radius: 10px; }
.category-thumb img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; }
.category-card > span:nth-child(2) { display: grid; gap: 5px; }
.category-card small { color: var(--royal); font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.category-card strong { font-size: 1.03rem; }
.category-card svg { color: var(--royal); transition: transform .2s ease; }
.category-card:hover svg { transform: translateX(5px); }

.catalog-section { background: var(--surface); }
.inline-search { width: min(420px, 100%); height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 17px; background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(30,59,105,.05); }
.inline-search:focus-within { border-color: var(--royal); box-shadow: 0 0 0 3px rgba(22,71,184,.1); }
.inline-search input { width: 100%; }
.filter-row { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.filter-row button { padding: 10px 16px; color: #41516c; background: white; border: 1px solid #d5dfed; border-radius: 999px; font-size: .82rem; font-weight: 800; cursor: pointer; transition: .16s ease; }
.filter-row button:hover, .filter-row button.active { color: white; background: var(--royal); border-color: var(--royal); }
.result-line { min-height: 42px; display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 16px; color: var(--muted); font-size: .9rem; }
.result-line p { margin: 0; }
.result-line strong { color: var(--navy); }
.result-line span { color: #8a96aa; }
.result-line button { padding: 5px; color: var(--royal); background: none; border: 0; font-weight: 800; cursor: pointer; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.product-card { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 30px rgba(30,59,105,.07); transition: .2s ease; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 20px 42px rgba(22,71,184,.13); }
.product-image { position: relative; width: 100%; aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden; padding: 10px; background: white; border: 0; border-bottom: 1px solid #e7edf5; cursor: zoom-in; }
.product-image img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; }
.product-image > span { position: absolute; right: 12px; bottom: 12px; padding: 8px 11px; color: white; background: rgba(12,31,68,.88); border-radius: 8px; font-size: .72rem; font-weight: 800; opacity: 0; transform: translateY(5px); transition: .2s ease; }
.product-image:hover > span, .product-image:focus-visible > span { opacity: 1; transform: none; }
.product-info { padding: 18px; }
.product-info > p { margin: 0 0 8px; color: var(--royal); font-size: .66rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.product-info h3 { min-height: 48px; margin: 0; font-size: 1.08rem; line-height: 1.35; }
.product-info > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 15px; padding-top: 14px; border-top: 1px solid #e7edf5; }
.product-info > div > span { color: var(--muted); font-size: .78rem; font-weight: 700; }
.product-info button { display: flex; align-items: center; gap: 5px; padding: 0; color: var(--royal); background: none; border: 0; font-size: .78rem; font-weight: 900; cursor: pointer; }
.product-info button svg { width: 16px; transition: transform .18s ease; }
.product-info button:hover svg { transform: translateX(4px); }
.empty-state { display: grid; justify-items: center; padding: 70px 20px; text-align: center; background: white; border: 1px dashed #b7c6dc; border-radius: 18px; }
.empty-state > svg { width: 42px; height: 42px; color: var(--royal); }
.empty-state h3 { margin: 18px 0 7px; font-size: 1.4rem; }
.empty-state p { margin: 0 0 20px; color: var(--muted); }
.empty-state button { padding: 12px 18px; color: white; background: var(--royal); border: 0; border-radius: 9px; font-weight: 800; cursor: pointer; }
.load-more { display: flex; justify-content: center; margin-top: 34px; }
.load-more button { display: grid; gap: 3px; min-width: 260px; padding: 13px 22px; color: white; background: var(--royal); border: 0; border-radius: 10px; box-shadow: 0 12px 28px rgba(22,71,184,.2); font-weight: 900; cursor: pointer; transition: .18s ease; }
.load-more button:hover { transform: translateY(-2px); background: var(--royal-dark); }
.load-more span { color: #cfe2ff; font-size: .7rem; font-weight: 600; }

.contact-strip { display: flex; align-items: center; justify-content: space-between; gap: 50px; padding: 75px clamp(24px, 6vw, 90px); color: white; background: linear-gradient(120deg, #0b2c77, var(--royal) 55%, #178fdf); }
.contact-strip .eyebrow { color: #8edcff; }
.contact-strip > div > p:last-child { max-width: 680px; margin: 18px 0 0; color: #d8e6ff; line-height: 1.65; }
.contact-strip > a { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 15px 20px; color: var(--royal); background: white; border-radius: 10px; font-weight: 900; }
footer { min-height: 130px; display: grid; grid-template-columns: 210px 1fr auto; align-items: center; gap: 30px; padding: 25px clamp(24px, 5vw, 76px); background: #fff; border-top: 1px solid var(--line); }
footer img { width: 190px; height: 78px; object-fit: contain; }
footer p { color: var(--muted); font-size: .84rem; }
footer a { color: var(--royal); font-size: .85rem; font-weight: 900; }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 25px; background: rgba(4,15,38,.76); backdrop-filter: blur(8px); animation: fade-in .18s ease; }
.product-modal { position: relative; width: min(1080px, 96vw); max-height: 92vh; display: grid; grid-template-columns: minmax(360px, 58%) minmax(280px, 42%); overflow: hidden; background: white; border-radius: 18px; box-shadow: 0 35px 90px rgba(0,0,0,.35); }
.modal-image { height: min(80vh, 840px); display: grid; place-items: center; overflow: hidden; padding: 18px; background: #eef2f7; }
.modal-image img { width: auto; height: auto; max-width: 100%; max-height: 100%; display: block; object-fit: contain; object-position: center; box-shadow: 0 12px 30px rgba(12,31,68,.12); }
.modal-copy { align-self: center; padding: clamp(28px, 4vw, 54px); }
.modal-copy h2 { margin: 0; font-size: clamp(2rem, 3.5vw, 3.4rem); line-height: 1; letter-spacing: -.04em; }
.modal-copy h3 { margin: 14px 0 22px; color: var(--royal); }
.modal-copy > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }
.modal-copy a { display: inline-flex; align-items: center; gap: 8px; margin-top: 15px; padding: 13px 17px; color: white; background: var(--royal); border-radius: 9px; font-weight: 900; }
.modal-close { position: absolute; z-index: 3; top: 14px; right: 14px; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; color: var(--navy); background: white; border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 8px 20px rgba(0,0,0,.15); cursor: pointer; }

@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

@media (max-width: 1100px) {
  .site-header { grid-template-columns: 210px 1fr auto; padding-inline: 26px; }
  .site-header nav { gap: 20px; }
  .site-header nav a:last-child { display: none; }
  .brand { width: 190px; }
  .hero { grid-template-columns: 1fr 46%; }
  .hero-copy { padding-left: 35px; }
  .hero h1 { font-size: clamp(3rem, 5.4vw, 4.4rem); }
  .hero-stats { gap: 16px; }
  .hero-stats div:last-child { display: none; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  .site-header { min-height: 70px; grid-template-columns: 1fr auto; padding: 7px 18px; }
  .brand { width: 170px; height: 56px; }
  .site-header nav { display: none; }
  .header-cta { padding: 11px 13px; font-size: .78rem; }
  .hero { display: block; }
  .hero-copy { padding: 62px 22px 52px; }
  .hero h1 { font-size: clamp(3rem, 13vw, 5rem); }
  .hero-visual { min-height: 560px; }
  .category-section, .catalog-section { padding: 68px 20px; }
  .section-heading, .catalog-top { align-items: start; flex-direction: column; gap: 18px; }
  .inline-search { width: 100%; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-strip { align-items: start; flex-direction: column; }
  footer { grid-template-columns: 1fr auto; }
  footer p { display: none; }
  .product-modal { grid-template-columns: 1fr; max-height: 94vh; overflow-y: auto; }
  .modal-image { height: 58vh; min-height: 0; }
  .modal-copy { padding: 28px; }
}

@media (max-width: 560px) {
  .header-cta { width: 43px; height: 43px; justify-content: center; overflow: hidden; color: transparent; }
  .header-cta svg { flex: 0 0 auto; color: white; }
  .hero-copy { padding-top: 46px; }
  .eyebrow { font-size: .68rem; }
  .hero h1 { font-size: 3.35rem; }
  .hero-lead { font-size: .98rem; }
  .hero-search { height: 60px; grid-template-columns: auto 1fr; padding-right: 16px; }
  .hero-search button { grid-column: 1 / -1; width: 100%; margin-top: 8px; }
  .search-types { margin-top: 74px; }
  .hero-stats { display: none; }
  .hero-visual { min-height: 450px; }
  .sheet-one { width: 38%; height: 64%; left: 3%; }
  .sheet-two { width: 44%; height: 72%; left: 28%; }
  .sheet-three { width: 38%; height: 64%; right: 1%; }
  .hero-note { right: 4%; bottom: 4%; }
  .category-grid { grid-template-columns: 1fr; }
  .category-card { min-height: 92px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-image { aspect-ratio: 4 / 5; padding: 8px; }
  .contact-strip { padding: 60px 22px; }
  footer { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  footer img { width: 180px; }
  .product-modal { width: 100%; border-radius: 14px; }
  .modal-backdrop { padding: 8px; }
}

/* Equipo comercial y mapas */
.agents-section {
  position: relative;
  overflow: hidden;
  padding: 92px clamp(24px, 5vw, 76px);
  background: linear-gradient(145deg, #071936 0%, #0b2c68 52%, #104bae 100%);
}
.agents-section::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .18;
  background-image: radial-gradient(#7dd9ff 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  mask-image: linear-gradient(90deg, transparent, #000 65%);
}
.agents-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 50px;
  margin-bottom: 38px;
  color: white;
}
.agents-heading .eyebrow { color: #76d8ff; }
.agents-heading h2 { max-width: 780px; margin: 0; font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.02; letter-spacing: -.045em; }
.agents-heading > p { max-width: 500px; margin: 0; color: #c9dafa; line-height: 1.7; }
.agents-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.agents-loading, .agents-empty { grid-column: 1 / -1; min-height: 170px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 28px; color: #dce9ff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 18px; font-weight: 800; }
.agents-loading span { width: 24px; height: 24px; border: 3px solid rgba(255,255,255,.25); border-top-color: white; border-radius: 50%; animation: agent-spin .8s linear infinite; }
.agents-empty.error { flex-direction: column; color: white; }
.agents-empty button { padding: 10px 14px; color: var(--royal); background: white; border: 0; border-radius: 9px; font-weight: 900; cursor: pointer; }
.agent-card { min-width: 0; display: flex; flex-direction: column; padding: 22px; color: var(--navy); background: white; border: 1px solid rgba(255,255,255,.35); border-radius: 18px; box-shadow: 0 18px 44px rgba(0,12,43,.24); transition: transform .2s ease, box-shadow .2s ease; }
.agent-card:hover { transform: translateY(-5px); box-shadow: 0 24px 55px rgba(0,12,43,.34); }
.agent-card.is-management { background: linear-gradient(145deg, #fff, #eef7ff); }
.agent-card-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.agent-photo { width: 76px; height: 76px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; color: white; background: linear-gradient(145deg, #1647b8, #22b6ed); border: 4px solid #e8f2ff; border-radius: 50%; box-shadow: 0 9px 24px rgba(22,71,184,.2); }
.agent-photo.large { width: 118px; height: 118px; margin-bottom: 23px; border-width: 5px; }
.agent-photo img { width: 100%; height: 100%; object-fit: cover; }
.agent-photo span { font-size: 1.15rem; font-weight: 900; letter-spacing: .04em; }
.agent-photo.large span { font-size: 1.8rem; }
.agent-zone { display: inline-flex; padding: 7px 10px; color: #1553b7; background: #eaf3ff; border: 1px solid #cee0fb; border-radius: 999px; font-size: .7rem; font-weight: 900; letter-spacing: .08em; }
.agent-card h3 { margin: 0; font-size: 1.35rem; letter-spacing: -.025em; }
.agent-type { margin: 6px 0 0; color: var(--royal); font-size: .78rem; font-weight: 900; }
.agent-coverage { flex: 1; margin: 18px 0 0; color: #596a84; line-height: 1.6; }
.agent-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 21px; padding-top: 17px; border-top: 1px solid #e5ebf3; }
.agent-card-actions button, .agent-card-actions a { flex: 1; display: inline-flex; justify-content: center; align-items: center; min-height: 42px; padding: 10px 13px; border-radius: 9px; font-size: .78rem; font-weight: 900; cursor: pointer; }
.agent-card-actions button { color: white; background: var(--royal); border: 0; }
.agent-card-actions a { color: #08783d; background: #dcfce7; }

.agent-modal { position: relative; width: min(1180px, 96vw); max-height: 92vh; display: grid; grid-template-columns: minmax(300px, 36%) minmax(0, 64%); overflow: hidden; background: white; border-radius: 20px; box-shadow: 0 35px 90px rgba(0,0,0,.38); }
.agent-profile { overflow-y: auto; padding: 40px; background: linear-gradient(150deg, #f5f9ff, #fff); border-right: 1px solid #dce5f2; }
.agent-profile h2 { margin: 13px 0 0; font-size: clamp(2rem, 3vw, 3rem); line-height: 1; letter-spacing: -.045em; }
.agent-profile > .agent-type { margin-bottom: 28px; }
.agent-detail { display: grid; gap: 6px; margin-top: 17px; padding-top: 17px; border-top: 1px solid #dfe7f1; }
.agent-detail span { color: #728099; font-size: .7rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.agent-detail strong { font-size: .9rem; line-height: 1.55; }
.agent-whatsapp { display: flex; justify-content: center; margin-top: 25px; padding: 13px 16px; color: white; background: #128c4a; border-radius: 10px; font-weight: 900; }
.agent-map-panel { position: relative; min-width: 0; display: grid; grid-template-rows: auto 1fr auto; padding: 32px; background: #eef3f9; }
.agent-map-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.agent-map-heading .eyebrow { margin-bottom: 7px; }
.agent-map-heading h3 { margin: 0; font-size: 1.8rem; letter-spacing: -.035em; }
.agent-map-heading > span { padding: 8px 10px; color: #28538f; background: white; border: 1px solid #d4dfed; border-radius: 999px; font-size: .7rem; font-weight: 900; }
.agent-map { z-index: 1; min-height: 520px; overflow: hidden; background: #dfe8f3; border: 1px solid #c9d6e6; border-radius: 14px; box-shadow: 0 12px 32px rgba(18,43,82,.1); }
.agent-map-status { position: absolute; z-index: 2; align-self: center; justify-self: center; max-width: 430px; margin: 20px; padding: 15px 18px; color: #37516f; background: rgba(255,255,255,.96); border: 1px solid #d5e0ed; border-radius: 11px; box-shadow: 0 10px 30px rgba(16,45,88,.15); text-align: center; font-weight: 800; }
.agent-map-status.error { color: #9f1c14; background: #fff2f0; border-color: #fecdc8; }
.agent-map-note { margin: 13px 0 0; color: #687791; font-size: .72rem; line-height: 1.5; }
.leaflet-container { font-family: Arial, Helvetica, sans-serif; }
@keyframes agent-spin { to { transform: rotate(360deg); } }

/* Gestión de asesores */
.admin-hero-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.admin-hero-actions button { padding: 15px 20px; color: var(--royal); background: white; border: 0; border-radius: 10px; font-weight: 900; box-shadow: 0 14px 34px rgba(3,27,72,.2); cursor: pointer; }
.admin-hero-actions button:first-child { color: white; background: #0a2f78; }
.admin-stats { grid-template-columns: repeat(4, 1fr); }
.admin-agent-manager { margin: 0 clamp(22px, 4vw, 62px) 24px; padding: 24px; background: white; border: 1px solid #dfe7f2; border-radius: 16px; box-shadow: 0 10px 30px rgba(30,59,105,.06); }
.admin-agent-manager .admin-section-title { align-items: end; }
.admin-agent-manager .admin-section-title > p { max-width: 430px; margin: 0; color: #6e7d95; line-height: 1.5; }
.admin-agent-list { display: grid; gap: 9px; }
.admin-agent-list > article { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(230px, 1.2fr) minmax(220px, 1fr) 110px minmax(240px, 1.1fr); align-items: center; gap: 18px; padding: 13px 14px; border: 1px solid #e1e8f1; border-radius: 12px; }
.admin-agent-list > article.is-hidden { opacity: .66; background: #f7f9fb; }
.admin-agent-list article > div:not(.admin-actions):not(.admin-agent-identity) { min-width: 0; display: grid; align-content: center; justify-items: start; gap: 6px; }
.admin-agent-list small { max-width: 100%; overflow: hidden; color: #748198; font-size: .72rem; line-height: 1.35; text-overflow: ellipsis; }
.admin-agent-identity { min-width: 0; display: flex; align-items: center; gap: 12px; }
.admin-agent-identity > div:last-child { min-width: 0; display: grid; gap: 4px; }
.admin-agent-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-agent-avatar { width: 54px; height: 54px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; color: white; background: linear-gradient(145deg, #1647b8, #23bbed); border-radius: 50%; font-size: .8rem; font-weight: 900; }
.admin-agent-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-whatsapp { display: grid; gap: 14px; margin: 0; padding: 17px; border: 1px solid #dce5f0; border-radius: 12px; }
.admin-whatsapp legend { padding: 0 7px; color: #243654; font-size: .8rem; font-weight: 900; }
.admin-whatsapp > div { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.agent-preview { min-height: 320px; }
.agent-preview img { object-fit: cover; }
.admin-map-dialog { width: min(940px, calc(100% - 32px)); padding: 25px; }
.admin-map-dialog > p { margin: 0 0 13px; color: #58708d; font-weight: 800; }
.admin-map-dialog > p.error { color: #b42318; }
.admin-agent-map { min-height: 560px; overflow: hidden; background: #e8eef6; border: 1px solid #cbd8e7; border-radius: 13px; }
.admin-map-dialog > footer { display: flex; justify-content: flex-end; margin-top: 15px; }
.admin-map-dialog > footer button { padding: 11px 15px; color: white; background: var(--royal); border: 0; border-radius: 9px; font-weight: 900; cursor: pointer; }

@media (max-width: 1180px) {
  .agents-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-agent-list > article { grid-template-columns: 1fr 1fr; }
  .admin-agent-identity, .admin-agent-list .admin-actions { grid-column: 1 / -1; }
  .admin-agent-list .admin-actions { justify-content: flex-end; }
}

@media (max-width: 820px) {
  .agents-section { padding: 70px 20px; }
  .agents-heading { align-items: start; flex-direction: column; gap: 18px; }
  .agent-modal { grid-template-columns: 1fr; max-height: 95vh; overflow-y: auto; }
  .agent-profile { overflow: visible; padding: 29px; border-right: 0; border-bottom: 1px solid #dce5f2; }
  .agent-photo.large { width: 92px; height: 92px; }
  .agent-map-panel { min-height: 570px; padding: 22px; }
  .agent-map { min-height: 450px; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
  .admin-hero-actions { justify-content: flex-start; }
  .admin-whatsapp > div { grid-template-columns: 1fr; }
  .admin-agent-manager .admin-section-title { align-items: start; flex-direction: column; }
  .admin-agent-map { min-height: 450px; }
}

@media (max-width: 560px) {
  .agents-grid { grid-template-columns: 1fr; }
  .agent-card { padding: 19px; }
  .agent-map-heading { flex-direction: column; }
  .agent-map-panel { min-height: 510px; padding: 17px; }
  .agent-map { min-height: 390px; }
  .admin-stats { grid-template-columns: 1fr; }
  .admin-hero-actions { width: 100%; display: grid; }
  .admin-agent-list > article { grid-template-columns: 1fr; }
  .admin-agent-identity, .admin-agent-list .admin-actions { grid-column: auto; }
  .admin-agent-list .admin-actions { justify-content: flex-start; }
  .admin-map-dialog { width: calc(100% - 16px); padding: 18px; }
  .admin-agent-map { min-height: 390px; }
}