:root {
  --red: #a70d06;
  --red-dark: #7e0804;
  --navy: #1d2537;
  --ink: #161616;
  --muted: #686868;
  --line: #dedede;
  --soft: #f5f5f5;
  --white: #ffffff;
  --max: 1180px;
  --radius: 16px;
  --shadow: 0 16px 40px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Montserrat", Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.section { padding: 92px 0; }
.section--soft { background: var(--soft); }

.topbar {
  background: #eeeeee;
  font-size: 12px;
  font-weight: 600;
}
.topbar__inner {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar a:hover { color: var(--red); }

.header {
  background: rgba(255,255,255,.98);
  border-bottom: 3px solid var(--red);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
}
.header__inner {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; letter-spacing: .02em; }
.brand__logo { width: 178px; height: 62px; object-fit: contain; object-position: left center; }
.brand__logo--footer { width: 150px; filter: brightness(0) invert(1); opacity: .94; }
.brand__text { line-height: 1.05; display: grid; }
.brand__text strong { font-size: 19px; }
.brand__mark {
  width: 58px; height: 34px;
  position: relative; display: inline-block;
  border: 3px solid var(--red);
  border-radius: 18px 4px 4px 18px;
  transform: skewX(-14deg);
  overflow: hidden;
}
.brand__mark::after {
  content: ""; position: absolute; right: -10px; top: 50%; width: 45px; height: 3px;
  background: var(--red); box-shadow: 0 7px 0 var(--red), 0 -7px 0 var(--red);
  transform: translateY(-50%);
}
.brand__mark span { position: absolute; width: 6px; height: 6px; border: 1px solid var(--red); border-radius: 50%; left: 8px; }
.brand__mark span:nth-child(1) { top: 5px; }
.brand__mark span:nth-child(2) { top: 13px; left: 15px; }
.brand__mark span:nth-child(3) { bottom: 5px; }

.nav { display: flex; align-items: center; gap: 34px; font-size: 13px; font-weight: 600; }
.nav a:not(.btn) { position: relative; }
.nav a:not(.btn)::after {
  content: ""; position: absolute; height: 2px; left: 0; right: 100%; bottom: -10px; background: var(--red); transition: .25s ease;
}
.nav a:not(.btn):hover::after, .nav a.active::after { right: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  color: white; background: var(--red); border: 1px solid var(--red);
  font-weight: 700; font-size: 13px; border-radius: 5px;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--red-dark); border-color: var(--red-dark); transform: translateY(-2px); }
.btn--small { min-height: 38px; padding: 0 18px; }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.7); }
.btn--ghost:hover { background: #fff; border-color: #fff; color: var(--navy); }
.btn--dark { background: var(--navy); border-color: var(--navy); }
.btn--dark:hover { background: #111827; border-color: #111827; }

.hero {
  min-height: 620px;
  background:
    linear-gradient(90deg, rgba(23,31,49,.98) 0%, rgba(23,31,49,.93) 42%, rgba(23,31,49,.45) 67%, rgba(0,0,0,.25) 100%),
    radial-gradient(circle at 80% 40%, #555 0, #242424 24%, #101010 68%);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 20%; background: linear-gradient(145deg, rgba(167,13,6,.95), rgba(95,3,0,.92));
  clip-path: polygon(0 0, 74% 0, 100% 100%, 0 100%);
}
.hero__content { position: relative; z-index: 3; color: #fff; padding: 70px 0; }
.hero__content > * { max-width: 640px; }
.hero h1 { font-size: clamp(40px, 5vw, 72px); line-height: 1.03; margin: 14px 0 22px; letter-spacing: -.04em; }
.hero p { font-size: 16px; color: #e9edf4; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 12px !important; font-weight: 700; color: #ffb5b1 !important; }
.hero__actions { display: flex; gap: 14px; margin-top: 30px; }
.hero__visual { position: absolute; inset: 0 0 0 45%; overflow: hidden; opacity: .95; }
.hero__visual::before {
  content:""; position:absolute; inset:0; background: repeating-linear-gradient(115deg, transparent 0 140px, rgba(255,255,255,.05) 142px 145px);
}
.hero__reel { position: absolute; border-radius: 50%; border: 28px solid #c7a66a; box-shadow: inset 0 0 0 12px #806638, 0 15px 40px rgba(0,0,0,.45); }
.hero__reel::after { content:""; position:absolute; inset:22%; border-radius:50%; background:#303030; border:10px solid #866c43; }
.hero__reel--one { width: 330px; height: 330px; right: 5%; bottom: 60px; }
.hero__reel--two { width: 250px; height: 250px; right: 34%; top: 80px; }
.hero__cables { position:absolute; width:260px; height:360px; right:20%; top:170px; transform: rotate(-6deg); background: repeating-linear-gradient(90deg,#111 0 10px,#e9bf32 10px 20px,#a6120b 20px 30px,#214b9a 30px 40px); border-radius:22px; filter: drop-shadow(0 18px 18px rgba(0,0,0,.35)); }

.section-kicker { color: var(--red); text-transform: uppercase; font-size: 12px; letter-spacing: .13em; font-weight: 800; }
.section-kicker--light { color: #ff8e88; }
.section-heading { margin-bottom: 44px; }
.section-heading h2, .about__copy h2, .quality__copy h2, .cta h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.12; margin: 9px 0 14px; letter-spacing: -.035em; }
.section-heading p, .about__copy p, .cta p { color: var(--muted); }
.section-heading--center { text-align: center; max-width: 760px; margin-left:auto; margin-right:auto; }

.about__grid { display:grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items:center; }
.about__media { min-height: 470px; position: relative; }
.about__panel--main {
  position:absolute; inset:0 70px 45px 0;
  border-radius: 28px 8px 28px 8px;
  background:
    radial-gradient(circle at 62% 35%, rgba(255,174,0,.36), transparent 7%),
    linear-gradient(145deg,#0f1726,#172033 55%,#08111f);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.about__panel--main::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 38% 48%, rgba(167,13,6,.26), transparent 30%); }
.about__cable-core { position:absolute; width:80px; height:310px; background:linear-gradient(90deg,#090909,#2a2a2a,#111); border-radius:50px; transform:rotate(-32deg); left:42%; top:14%; box-shadow: 0 0 0 5px #0f1012, inset 0 0 0 13px #141414; }
.about__cable-core::before { content:""; position:absolute; width:60px; height:80px; top:-22px; left:10px; border-radius:35px 35px 8px 8px; background:repeating-linear-gradient(90deg,#d8801d 0 4px,#f4be54 4px 7px,#8a4d0a 7px 10px); }
.about__spark { position:absolute; width:5px; height:5px; border-radius:50%; background:#ffb54a; box-shadow:0 0 16px 4px #ffb54a; }
.about__spark--1{left:24%;top:26%}.about__spark--2{left:65%;top:20%}.about__spark--3{left:74%;top:57%}
.about__badge { position:absolute; right:0; bottom:0; width:210px; min-height:145px; background:var(--navy); color:#fff; padding:26px; display:flex; flex-direction:column; justify-content:center; box-shadow:var(--shadow); }
.about__badge strong { font-size:42px; line-height:1; color:#fff; }
.about__badge span { font-weight:700; text-transform:uppercase; font-size:12px; letter-spacing:.08em; margin-top:9px; }
.checks { display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; padding:0; margin:26px 0; list-style:none; }
.checks li { font-size:14px; font-weight:600; }
.checks li::before { content:"✓"; color:var(--red); margin-right:9px; }
.link-arrow { font-weight:800; font-size:13px; color:var(--navy); }
.link-arrow span { color:var(--red); font-size:18px; margin-left:5px; }

.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.product-card { background:#fff; border:1px solid #ddd; box-shadow:0 8px 22px rgba(0,0,0,.04); transition:.25s ease; }
.product-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.product-card__visual { height:230px; display:grid; place-items:center; border-bottom:4px solid var(--red); overflow:hidden; }
.product-card__body { padding:24px; text-align:center; }
.product-card h3 { margin:0 0 10px; font-size:18px; }
.product-card p { color:var(--muted); font-size:13px; min-height:84px; }
.product-card a { display:inline-flex; min-height:38px; align-items:center; padding:0 16px; background:var(--navy); color:#fff; border-radius:4px; font-size:12px; font-weight:700; }
.mini-cable { width:112px; height:160px; position:relative; background:linear-gradient(90deg,#111,#3d3d3d 45%,#151515); border-radius:10px 10px 3px 3px; margin-top:80px; }
.mini-cable::before { content:""; position:absolute; width:74px; height:70px; left:19px; top:-45px; border-radius:32px 32px 5px 5px; background:#ececec; }
.mini-cable i { position:absolute; width:14px; height:102px; top:-80px; border-radius:8px; transform-origin:bottom center; }
.mini-cable i:nth-child(1){left:28px;background:#d52b1e;transform:rotate(-10deg)}
.mini-cable i:nth-child(2){left:45px;background:#2b7a44;transform:rotate(-3deg)}
.mini-cable i:nth-child(3){left:61px;background:#f0c937;transform:rotate(6deg)}
.mini-cable i:nth-child(4){left:77px;background:#212121;transform:rotate(12deg)}
.mini-cable--b::before { background:repeating-linear-gradient(135deg,#d9d9d9 0 3px,#bdbdbd 3px 6px); }
.mini-cable--c { width:86px; }
.mini-cable--c::before { width:58px; left:14px; }

.process-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.process-card { position:relative; min-height:300px; padding:34px 28px 28px; background:#fff; border:1px solid var(--line); box-shadow:0 10px 25px rgba(0,0,0,.05); }
.process-card::before { content:""; position:absolute; left:0; top:28px; width:6px; height:62px; background:var(--navy); }
.process-card__number { position:absolute; right:20px; top:12px; font-weight:800; font-size:48px; color:#efefef; }
.process-card__icon { font-size:36px; color:var(--red); margin-bottom:24px; }
.process-card h3 { font-size:18px; margin-bottom:12px; }
.process-card p { font-size:13px; color:var(--muted); }

.quality { background:#0f0f10; color:#fff; overflow:hidden; }
.quality__grid { min-height:520px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:30px; }
.quality__copy { padding:70px 0; }
.quality__copy p { color:#d6d6d6; max-width:650px; }
.quality__copy ul { list-style:none; padding:0; margin:26px 0 0; }
.quality__copy li { margin:10px 0; color:#e9e9e9; }
.quality__copy li::before { content:"○"; color:#e03b34; margin-right:10px; }
.quality__art { height:100%; min-height:520px; position:relative; background:radial-gradient(circle at 50% 50%,#39211d 0,#151515 40%,#0f0f10 70%); }
.quality__art::after { content:""; position:absolute; inset:12% 5%; border:1px solid rgba(167,13,6,.55); transform:skewX(-18deg); }
.quality__wire { position:absolute; width:70px; height:430px; bottom:-110px; border-radius:40px; background:linear-gradient(90deg,#171717,#363636,#121212); box-shadow:0 0 0 5px #0f0f0f, inset 0 0 0 8px #242424; }
.quality__wire::before { content:""; position:absolute; left:8px; right:8px; top:-28px; height:70px; border-radius:35px 35px 8px 8px; background:repeating-linear-gradient(90deg,#7b3d12 0 4px,#e8a449 4px 7px,#ae6a23 7px 11px); }
.quality__wire--1{left:12%;transform:rotate(-22deg)}.quality__wire--2{left:34%;transform:rotate(-8deg)}.quality__wire--3{left:56%;transform:rotate(8deg)}.quality__wire--4{left:76%;transform:rotate(20deg)}

.cta { background:linear-gradient(135deg,#fff,#f3f3f3); }
.cta__inner { display:flex; justify-content:space-between; align-items:center; gap:40px; padding:42px 0; }
.cta__inner > div { max-width:750px; }

.footer { background:#151515; color:#d6d6d6; padding-top:64px; }
.footer__grid { display:grid; grid-template-columns:1.4fr .8fr 1.1fr; gap:70px; padding-bottom:50px; }
.brand--footer { color:#fff; margin-bottom:18px; }
.footer h4 { color:#fff; margin:0 0 18px; }
.footer p, .footer a { display:block; color:#b7b7b7; font-size:12px; margin:7px 0; }
.footer a:hover { color:#fff; }
.footer__bottom { border-top:1px solid #3a3a3a; padding:20px 0; font-size:11px; }

@media (max-width: 980px) {
  .nav { gap:18px; }
  .nav a:not(.btn) { display:none; }
  .hero__visual { inset-left:40%; opacity:.65; }
  .about__grid, .quality__grid { grid-template-columns:1fr; }
  .product-grid, .process-grid { grid-template-columns:1fr 1fr; }
  .quality__art { min-height:380px; }
  .cta__inner { align-items:flex-start; flex-direction:column; }
}

@media (max-width: 680px) {
  .container { width:min(100% - 28px, var(--max)); }
  .topbar__inner { justify-content:center; flex-wrap:wrap; padding:8px 0; gap:6px 10px; }
  .topbar__divider { display:none; }
  .header__inner { min-height:74px; }
  .brand__mark { width:46px; height:28px; }
  .brand__text { font-size:12px; }
  .brand__text strong { font-size:16px; }
  .nav .btn { padding:0 14px; min-height:36px; }
  .hero { min-height:570px; }
  .hero::before { width:35%; opacity:.7; }
  .hero__visual { left:20%; opacity:.34; }
  .hero h1 { font-size:44px; }
  .hero__actions { flex-direction:column; align-items:flex-start; }
  .section { padding:70px 0; }
  .about__grid { gap:40px; }
  .about__media { min-height:380px; }
  .about__panel--main { inset:0 35px 35px 0; }
  .about__badge { width:170px; min-height:125px; }
  .checks { grid-template-columns:1fr; }
  .product-grid, .process-grid { grid-template-columns:1fr; }
  .product-card p { min-height:auto; }
  .quality__grid { min-height:auto; }
  .quality__art { min-height:320px; }
  .footer__grid { grid-template-columns:1fr; gap:34px; }
}

/* ===== Catálogo interactivo incrustado en el Home ===== */
.catalog-section { overflow:hidden; }
.catalog-section__intro { display:grid; grid-template-columns:1.05fr .95fr; align-items:end; gap:40px; margin-bottom:28px; }
.catalog-section__intro h2 { margin:8px 0 0; font-size:clamp(30px,4vw,52px); line-height:1.04; letter-spacing:-.045em; max-width:760px; }
.catalog-section__intro > p { margin:0; color:var(--muted); line-height:1.75; max-width:590px; justify-self:end; }
.book-stage { position:relative; min-height:640px; display:grid; place-items:center; padding:28px clamp(8px,4vw,60px); border-radius:22px; overflow:hidden; background:radial-gradient(circle at 50% 35%,#373c49 0,#20242e 42%,#11141a 100%); box-shadow:0 24px 70px rgba(18,22,29,.22); }
.book-stage::before { content:""; position:absolute; inset:auto 10% 5% 10%; height:30px; border-radius:50%; background:rgba(0,0,0,.42); filter:blur(22px); }
.book { width:min(1080px,82vw); aspect-ratio:1.514 / 1; position:relative; perspective:2200px; filter:drop-shadow(0 26px 30px rgba(0,0,0,.33)); }
.book__page { position:absolute; top:0; height:100%; width:50%; margin:0; background:#fff; overflow:hidden; backface-visibility:hidden; }
.book__page img { width:100%; height:100%; display:block; object-fit:contain; background:#fff; }
.book__page--left { left:0; border-radius:7px 0 0 7px; transform-origin:right center; box-shadow:inset -18px 0 22px -22px rgba(0,0,0,.7); }
.book__page--right { right:0; border-radius:0 7px 7px 0; transform-origin:left center; box-shadow:inset 18px 0 22px -22px rgba(0,0,0,.7); }
.book__spine { position:absolute; z-index:8; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(255,255,255,.52),rgba(0,0,0,.25)); box-shadow:0 0 16px rgba(0,0,0,.32); pointer-events:none; }
.turn-layer { display:none; position:absolute; z-index:10; top:0; width:50%; height:100%; overflow:hidden; background:#fff; backface-visibility:hidden; }
.turn-layer img { width:100%; height:100%; object-fit:contain; background:#fff; display:block; }
.turn-layer.next { display:block; right:0; transform-origin:left center; animation:arsaTurnNext .54s cubic-bezier(.65,.05,.36,1) both; box-shadow:-18px 0 28px rgba(0,0,0,.28); }
.turn-layer.prev { display:block; left:0; transform-origin:right center; animation:arsaTurnPrev .54s cubic-bezier(.65,.05,.36,1) both; box-shadow:18px 0 28px rgba(0,0,0,.28); }
@keyframes arsaTurnNext { 0%{transform:rotateY(0)} 49%{filter:brightness(.72)} 100%{transform:rotateY(-180deg);filter:brightness(.94)} }
@keyframes arsaTurnPrev { 0%{transform:rotateY(0)} 49%{filter:brightness(.72)} 100%{transform:rotateY(180deg);filter:brightness(.94)} }
.page-hit { position:absolute; z-index:12; top:0; bottom:0; width:12%; border:0; background:transparent; opacity:0; cursor:pointer; }
.page-hit--left { left:0; }
.page-hit--right { right:0; }
.book-controls { display:grid; grid-template-columns:54px minmax(180px,430px) 54px; justify-content:center; align-items:center; gap:18px; margin:22px 0 18px; }
.control-btn { width:54px; height:54px; border-radius:50%; border:1px solid #c7c9cf; background:#fff; color:var(--navy); font-weight:800; font-size:22px; box-shadow:0 6px 18px rgba(0,0,0,.08); transition:.2s ease; cursor:pointer; }
.control-btn:hover:not(:disabled) { background:var(--red); color:#fff; border-color:var(--red); transform:translateY(-2px); }
.control-btn:disabled { opacity:.3; cursor:not-allowed; }
.page-status { display:grid; gap:8px; text-align:center; font-size:12px; font-weight:700; color:#535862; }
.progress-track { position:relative; height:6px; background:#cfd2d8; border-radius:999px; cursor:ew-resize; touch-action:none; user-select:none; }
.progress-track span { position:relative; display:block; height:100%; width:0; background:var(--red); border-radius:999px; transition:width .18s ease; pointer-events:none; }
.progress-track span::after { content:""; position:absolute; right:0; top:50%; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--red); box-shadow:0 2px 8px rgba(15,23,42,.18); transform:translate(50%,-50%); }
.progress-track.is-dragging span { transition:none; }
.progress-track:focus-visible { outline:3px solid rgba(178,10,10,.22); outline-offset:6px; }
.quick-nav { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.quick-nav button { border:1px solid #d4d5d9; background:#fff; color:#4d515a; border-radius:999px; min-height:38px; padding:0 14px; font-size:11px; font-weight:700; transition:.2s; cursor:pointer; }
.quick-nav button:hover { border-color:var(--red); color:var(--red); }

@media (max-width: 900px) {
  .catalog-section__intro { grid-template-columns:1fr; gap:14px; }
  .catalog-section__intro > p { justify-self:start; }
  .book-stage { min-height:520px; }
  .book { width:min(900px,92vw); }
}
@media (max-width: 640px) {
  .catalog-section__intro h2 { font-size:34px; }
  .catalog-section__intro > p { font-size:13px; }
  .book-stage { min-height:0; padding:18px 10px; border-radius:14px; }
  .book { width:min(94vw,520px); aspect-ratio:.757 / 1; }
  .book__page { width:100%; left:0 !important; right:auto !important; border-radius:6px; }
  .book__page--left { display:none; }
  .book__page--right { display:block; }
  .book__spine { display:none; }
  .turn-layer { width:100%; left:0 !important; right:auto !important; transform-origin:left center; }
  .turn-layer.prev { transform-origin:right center; }
  .book-controls { grid-template-columns:46px 1fr 46px; gap:10px; }
  .control-btn { width:46px; height:46px; }
  .quick-nav { justify-content:flex-start; overflow:auto; flex-wrap:nowrap; padding:3px 0 8px; scrollbar-width:thin; }
  .quick-nav button { flex:0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .turn-layer.next, .turn-layer.prev { animation-duration:.01ms !important; }
}


/* Lupa y vista ampliada del catálogo */
.zoom-trigger {
  position:absolute;
  z-index:14;
  top:18px;
  right:18px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.32);
  border-radius:50%;
  background:rgba(17,20,26,.78);
  color:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  backdrop-filter:blur(8px);
  cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.zoom-trigger:hover { transform:scale(1.06); background:var(--red); }
.zoom-trigger svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.book__page img { cursor:zoom-in; }
body.zoom-open { overflow:hidden; }
.zoom-modal {
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  padding:18px;
  background:rgba(8,10,14,.88);
  backdrop-filter:blur(10px);
}
.zoom-modal.is-open { display:grid; place-items:center; }
.zoom-modal__panel {
  width:min(1180px,100%);
  height:min(94vh,980px);
  display:grid;
  grid-template-rows:auto 1fr;
  overflow:hidden;
  border-radius:16px;
  background:#1b1f28;
  box-shadow:0 28px 90px rgba(0,0,0,.48);
}
.zoom-toolbar {
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 12px 8px 18px;
  color:#fff;
  background:#11141a;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.zoom-toolbar__page, .zoom-toolbar__actions { display:flex; align-items:center; gap:8px; }
.zoom-toolbar__page span { min-width:130px; text-align:center; font-size:12px; font-weight:700; }
.zoom-tool {
  min-width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:#252a35;
  color:#fff;
  font-weight:800;
  font-size:20px;
  cursor:pointer;
}
.zoom-tool:hover:not(:disabled) { background:var(--red); border-color:var(--red); }
.zoom-tool:disabled { opacity:.3; cursor:not-allowed; }
.zoom-tool--reset { min-width:72px; font-size:11px; }
.zoom-tool--close { margin-left:4px; font-size:27px; font-weight:400; }
.zoom-viewport {
  overflow:auto;
  display:block;
  padding:24px;
  text-align:center;
  background:radial-gradient(circle at 50% 25%,#3a404d 0,#20242d 52%,#11141a 100%);
  overscroll-behavior:contain;
}
.zoom-viewport img {
  width:100%;
  max-width:none;
  height:auto;
  display:block;
  margin:0 auto;
  background:#fff;
  box-shadow:0 18px 48px rgba(0,0,0,.4);
  transform-origin:top center;
}
@media (max-width: 640px) {
  .zoom-trigger { top:10px; right:10px; width:42px; height:42px; }
  .zoom-modal { padding:0; }
  .zoom-modal__panel { width:100%; height:100dvh; border-radius:0; }
  .zoom-toolbar { min-height:58px; padding:7px 8px; gap:8px; }
  .zoom-toolbar__page span { min-width:auto; font-size:10px; }
  .zoom-tool { min-width:38px; width:38px; height:38px; border-radius:9px; }
  .zoom-tool--reset { width:auto; min-width:58px; font-size:10px; }
  .zoom-tool--nav { display:none; }
  .zoom-viewport { padding:12px; }
}


/* Botón flotante de WhatsApp */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.whatsapp-float svg {
  width: 32px;
  height: 32px;
  fill: #fff;
}
@media (max-width: 640px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
  }
}