/* ============================================================
   Raven's Lab — hoja de estilos única para las dos artboards
   (Main.dc.html = hero, Producto.dc.html = catálogo de precios)

   Los valores son los del mockup original: se movieron desde los
   atributos style="…" en línea a clases, sin cambiar ningún número.

   Único enlace que queda entre el HTML y el CSS: la raíz de cada
   componente declara --accent (y --accent-tint en el catálogo) para
   que la prop de color del Design Component siga funcionando.
   ============================================================ */

/* ---------- Tokens ---------- */

:root {
  /* Fondos y superficies */
  --bg: #0C0D10;
  --surface: #14161B;
  --surface-raised: #1C1F27;
  --surface-deep: #2A2E38;

  /* Tinta */
  --ink: #F3F1EA;
  --ink-bright: #FFFFFF;
  --ink-soft: #C9C8C1;
  --ink-muted: #B4B5BC;
  --ink-dim: #9A9CA4;
  --ink-faint: #7C7E86;

  /* Líneas */
  --line: rgba(243, 241, 234, 0.08);
  --line-medium: rgba(243, 241, 234, 0.14);
  --line-strong: rgba(243, 241, 234, 0.16);

  /* Acento (lo sobrescribe la raíz del componente) */
  --accent: #9DB4FF;
  --accent-tint: rgba(157, 180, 255, 0.08);

  /* Tipografía */
  --font-sans: 'Geist', 'Helvetica Neue', Helvetica, system-ui, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', sans-serif;

  /* Medidas */
  --shell: 1296px;
  --gutter: clamp(20px, 5vw, 72px);
  --radius-pill: 999px;
  --brand-logo-width: 54px;

  /* Sombras */
  --shadow-panel: 0 30px 60px rgba(0, 0, 0, 0.35);
  --shadow-sticker: 0 24px 50px rgba(0, 0, 0, 0.5);
  --shadow-sticker-lg: 0 34px 70px rgba(0, 0, 0, 0.55);
  --shadow-sticker-md: 0 26px 56px rgba(0, 0, 0, 0.5);
}

/* ---------- Base ---------- */

body {
  margin: 0;
  background: var(--bg);
}

a {
  color: var(--ink);
}

a:hover {
  color: var(--ink-bright);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Primitivas compartidas ---------- */

/* Contenedor centrado de ancho máximo */
.shell {
  max-width: var(--shell);
  width: 100%;
  margin: 0 auto;
}

/* Píldora de etiqueta ("Stickers personalizados…", "Catálogo") */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.eyebrow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* Barra de marca, idéntica en el hero y en el catálogo */
.site-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* El logotipo + el nombre son un solo enlace de vuelta al hero */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}

/* El logotipo se usa como máscara, no como imagen, para poder pintarlo
   con el color de acento igual que el trazo anterior. El hueco del ojo
   del logo queda transparente y deja ver el fondo de la página, que es
   lo que antes hacía .mark__eye. La relación de aspecto es la del
   viewBox del archivo (1278 × 1230).
   El SVG va incrustado como data: URI (copia de img/logo.svg) porque al
   abrir la página con file:// el navegador trata cada archivo local como
   un origen distinto y bloquea por CORS la carga de la máscara externa. */
.brand__logo {
  flex: 0 0 auto;
  width: var(--brand-logo-width);
  aspect-ratio: 1278 / 1230;
  background-color: var(--accent);
  --brand-logo-src: url("data:image/svg+xml,%3Csvg%20version=%221.0%22%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221278.000000pt%22%20height=%221230.000000pt%22%20viewBox=%220%200%201278.000000%201230.000000%22%20preserveAspectRatio=%22xMidYMid%20meet%22%3E%3Cg%20transform=%22translate(0.000000,1230.000000)%20scale(0.100000,-0.100000)%22%20fill=%22%23000000%22%20stroke=%22none%22%3E%3Cpath%20d=%22M6135%2011610%20l-580%20-5%20-43%20-23%20c-64%20-34%20-117%20-86%20-146%20-145%20-15%20-30%20-41%20-122%20-62%20-217%20-20%20-91%20-55%20-246%20-79%20-345%20-24%20-99%20-55%20-229%20-70%20-290%20l-26%20-110%20-107%20-38%20c-216%20-78%20-539%20-224%20-718%20-325%20l-70%20-40%20-131%20101%20c-73%2056%20-216%20167%20-319%20247%20-103%2080%20-208%20162%20-233%20182%20-61%2051%20-126%2071%20-209%2066%20-94%20-5%20-137%20-31%20-277%20-166%20-66%20-65%20-303%20-294%20-526%20-510%20-292%20-283%20-412%20-406%20-429%20-438%20-28%20-58%20-36%20-145%20-17%20-204%208%20-26%20119%20-203%20257%20-409%20134%20-201%20243%20-370%20243%20-376%200%20-6%20-25%20-54%20-55%20-106%20-111%20-188%20-236%20-456%20-313%20-672%20-15%20-43%20-31%20-79%20-35%20-82%20-7%20-4%20-278%20-64%20-385%20-85%20-187%20-37%20-563%20-124%20-587%20-136%20-53%20-27%20-101%20-79%20-130%20-139%20l-28%20-60%200%20-671%20c0%20-763%20-2%20-741%2077%20-825%2025%20-26%2064%20-57%2086%20-68%2023%20-11%20238%20-68%20477%20-126%20239%20-59%20438%20-110%20441%20-113%204%20-4%2017%20-47%2029%20-97%2035%20-141%2096%20-330%20144%20-448%2061%20-151%20203%20-395%20219%20-377%209%2010%20654%20813%20689%20859%20l38%2047%20-50%20149%20c-103%20309%20-141%20547%20-141%20899%200%20332%2040%20583%20142%20901%20101%20317%20259%20621%20462%20890%20272%20360%20683%20724%201067%20945%20405%20233%20769%20358%201240%20426%20146%2021%20582%2024%20750%206%20477%20-54%20946%20-218%201306%20-458%20120%20-80%20123%20-81%20201%20-88%20161%20-14%20424%20-66%20590%20-117%2037%20-12%20122%20-43%20188%20-69%20395%20-157%20681%20-345%201059%20-693%2088%20-82%20132%20-115%20139%20-108%2013%2013%20-16%2092%20-106%20289%20-69%20150%20-70%20154%20-54%20180%2016%2027%20236%20343%20380%20546%2043%2060%2088%20128%2099%20150%2031%2061%2035%20149%209%20216%20-19%2050%20-68%20102%20-543%20582%20-498%20502%20-526%20527%20-577%20544%20-71%2022%20-159%2020%20-214%20-4%20-40%20-18%20-351%20-246%20-646%20-474%20-62%20-48%20-117%20-88%20-121%20-88%20-4%200%20-74%2036%20-156%2080%20-197%20106%20-364%20181%20-559%20251%20-122%2043%20-161%2061%20-163%2075%20-2%2011%20-23%20102%20-47%20204%20-24%20102%20-70%20300%20-100%20440%20-31%20140%20-66%20274%20-78%20298%20-30%2060%20-103%20125%20-168%20149%20-69%2026%20-242%2030%20-1034%2023z%22/%3E%3Cpath%20d=%22M7790%208834%20c-439%20-51%20-765%20-159%20-1139%20-378%20-590%20-345%20-1031%20-877%20-1227%20-1480%20l-29%20-89%20-94%20-44%20c-497%20-230%20-994%20-626%20-1447%20-1153%20-355%20-411%20-1193%20-1544%20-1840%20-2485%20-150%20-217%20-190%20-283%20-177%20-296%2011%20-11%2083%2015%20483%20174%20329%20130%20886%20349%201000%20392%2047%2018%20204%2080%20350%20138%20146%2057%20319%20126%20385%20152%20194%2077%20319%20125%20325%20125%2021%20-2%20-427%20-336%20-910%20-679%20-118%20-85%20-235%20-172%20-259%20-195%20-95%20-90%20-687%20-1022%20-1063%20-1676%20-121%20-210%20-131%20-229%20-124%20-246%208%20-20%2035%20-8%20320%20148%20741%20403%201317%20747%202364%201411%2023%2015%2042%2025%2042%2022%200%20-10%20-80%20-358%20-147%20-635%20-36%20-151%20-92%20-387%20-124%20-525%20-51%20-214%20-148%20-606%20-205%20-823%20-9%20-34%20-14%20-66%20-10%20-69%2011%20-11%2044%2013%20282%20206%20515%20420%201382%201181%201789%201572%2054%2052%2086%2073%20140%2094%20868%20338%201593%20853%202136%201517%20160%20196%20343%20493%20449%20727%20212%20469%20268%20919%20175%201394%20-21%20105%20-57%20238%20-82%20303%20-6%2017%20-129%20-18%201377%20393%20600%20164%201087%20299%201159%20320%2043%2013%2081%2038%2081%2054%200%206%20-11%2020%20-24%2029%20-77%2056%20-1375%20568%20-1741%20686%20-72%2024%20-85%2032%20-134%2087%20-82%2090%20-192%20187%20-326%20287%20-366%20274%20-784%20448%20-1255%20524%20-91%2014%20-426%2027%20-500%2018z%20m365%20-674%20c71%20-27%20159%20-110%20193%20-181%2049%20-102%2049%20-236%200%20-332%20-31%20-62%20-111%20-140%20-175%20-173%20-53%20-26%20-67%20-29%20-163%20-29%20-99%200%20-109%202%20-172%2033%20-78%2038%20-138%20100%20-177%20182%20-23%2048%20-26%2068%20-26%20155%200%2089%203%20106%2027%20156%2048%2096%20134%20169%20243%20206%2058%2019%20177%2011%20250%20-17z%22/%3E%3Cpath%20d=%22M10455%206498%20c-38%20-10%20-144%20-41%20-235%20-68%20-91%20-26%20-232%20-67%20-315%20-89%20-132%20-37%20-276%20-80%20-282%20-85%20-2%20-1%204%20-56%2013%20-122%2018%20-144%2021%20-490%205%20-624%20-64%20-536%20-244%20-1007%20-571%20-1495%20-265%20-396%20-667%20-801%20-1090%20-1100%20-296%20-210%20-627%20-390%20-1015%20-555%20-93%20-40%20-190%20-81%20-214%20-91%20l-45%20-20%20305%20-306%20c167%20-168%20315%20-316%20329%20-328%2054%20-48%2091%20-60%20180%20-59%2082%200%2090%202%20215%2058%2072%2032%20175%2077%20230%20101%2055%2023%20249%20107%20430%20185%20508%20219%20488%20208%20540%20302%2026%2047%2029%2062%2029%20138%200%2047%20-15%20211%20-32%20365%20-18%20154%20-34%20303%20-37%20330%20l-5%2050%20132%20105%20c158%20126%20290%20244%20457%20411%20l124%20123%20191%20-32%20c105%20-18%20281%20-48%20391%20-68%20236%20-41%20296%20-41%20375%202%2069%2038%2085%2058%20183%20241%2047%2087%20147%20273%20222%20413%2076%20140%20179%20332%20229%20425%20l91%20170%200%2092%20c0%2085%20-2%2094%20-30%20135%20-19%2027%20-160%20147%20-380%20324%20l-350%20280%202%2065%20c1%2035%209%20175%2018%20311%208%20136%2015%20290%2015%20342%200%20110%207%20105%20-105%2074z%22/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask: var(--brand-logo-src) no-repeat center / contain;
  mask: var(--brand-logo-src) no-repeat center / contain;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}

/* Texto en color de acento dentro de un titular */
.accent {
  color: var(--accent);
}

/* Piezas del logotipo del cuervo (en SVG, pintadas desde CSS) */
.mark__body {
  fill: var(--accent);
}

.mark__eye {
  fill: var(--bg);
}

/* Formas de acento dentro de las ilustraciones de producto */
.art__accent {
  fill: var(--accent);
}

/* ============================================================
   Main.dc.html — Hero
   ============================================================ */

.hero {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  min-height: 900px;
  box-sizing: border-box;
  padding: 28px var(--gutter) 80px;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 72px);
  overflow: hidden;
}

.hero__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
}

.hero__copy {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 6.4vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  max-width: 12ch;
}

.hero__lede {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 34em;
}

/* Botón principal */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 30px;
  margin-top: 8px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--bg);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: transform .2s ease, box-shadow .2s ease;
}

.cta:hover {
  color: var(--bg);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

/* --- Escenario con los stickers flotando --- */

.stage {
  flex: 1 1 440px;
  min-width: 0;
  position: relative;
  height: 560px;
  border-radius: 32px;
  background-color: var(--surface);
  background-image: radial-gradient(rgba(243, 241, 234, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  border: 1px solid var(--line);
}

@media (max-width: 640px) {
  .stage {
    height: 430px;
  }
}

/* Sticker circular grande */
.stage__disc {
  position: absolute;
  left: 7%;
  top: 9%;
  width: 56%;
  max-width: 340px;
  aspect-ratio: 1;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--bg);
  border: 10px solid var(--ink);
  box-shadow: var(--shadow-sticker-lg);
  transform: rotate(-8deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage__disc-art {
  width: 100%;
  height: 100%;
  display: block;
}

.stage__disc-ring {
  fill: none;
  stroke: rgba(243, 241, 234, 0.14);
  stroke-width: 1;
}

.stage__disc-text {
  fill: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 3px;
}

/* Tarjeta de acento "TU LOGO AQUÍ" */
.stage__card {
  position: absolute;
  right: 6%;
  top: 13%;
  width: 40%;
  max-width: 236px;
  aspect-ratio: 5 / 4;
  box-sizing: border-box;
  padding: 18px 20px;
  border-radius: 24px;
  background: var(--accent);
  border: 8px solid var(--ink);
  box-shadow: var(--shadow-sticker-md);
  transform: rotate(9deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--bg);
}

.stage__card-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.stage__card-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

/* Píldora "Hecho a tu medida" */
.stage__chip {
  position: absolute;
  left: 12%;
  bottom: 11%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--bg);
  box-shadow:
    0 0 0 6px var(--bg),
    0 0 0 8px rgba(243, 241, 234, 0.9),
    var(--shadow-sticker);
  transform: rotate(4deg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(16px, 1.5vw, 21px);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Cuadro "RW" */
.stage__tile {
  position: absolute;
  right: 10%;
  bottom: 13%;
  width: 26%;
  max-width: 152px;
  aspect-ratio: 1;
  box-sizing: border-box;
  border-radius: 22px;
  background: var(--surface-raised);
  border: 8px solid var(--ink);
  box-shadow: var(--shadow-sticker);
  transform: rotate(-12deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage__tile-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 3.6vw, 52px);
  letter-spacing: -0.05em;
  color: var(--accent);
}

/* ============================================================
   Producto.dc.html — Catálogo de precios
   ============================================================ */

/* Mismo encuadre que .hero: la barra de marca arranca a 28px del borde
   superior y el gap del contenedor separa el header del contenido, en
   lugar de empujarlo con el padding de la sección. */
.catalog {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  box-sizing: border-box;
  padding: 28px var(--gutter) clamp(64px, 8vw, 112px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--line);
}

.catalog__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 48px);
}

.catalog__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.catalog__intro {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.catalog__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, 5.6vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  max-width: 13ch;
}

.catalog__kicker {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Tarjeta "Precios de mayoreo" */
.wholesale {
  flex: 0 1 380px;
  min-width: 0;
  box-sizing: border-box;
  padding: 24px 28px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 20px;
}

.wholesale__icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.wholesale__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wholesale__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.wholesale__desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* --- Panel de la tabla de precios --- */

.pricing {
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-panel);
}

.pricing__banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
  padding: 16px 28px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pricing__banner-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bg);
}

.pricing__scroll {
  overflow-x: auto;
}

.pricing__table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
}

/* Encabezados */
.pricing__type-head {
  width: 340px;
  padding: 20px 24px 16px 28px;
  border-bottom: 1px solid var(--line-medium);
  text-align: left;
  vertical-align: bottom;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.pricing__group-head {
  padding: 20px 8px 4px;
  border-left: 1px solid var(--line);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.pricing__qty {
  padding: 16px 8px;
  border-bottom: 1px solid var(--line-medium);
  border-left: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Columna destacada (5,000+) */
.pricing__qty--best {
  background: var(--accent-tint);
  color: var(--accent);
}

/* Celda de producto */
.pricing__product {
  padding: 24px 24px 24px 28px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-weight: 400;
  vertical-align: middle;
}

/* Celda de precio */
.pricing__cell {
  padding: 28px 8px;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.pricing__cell--best {
  background: var(--accent-tint);
}

/* La última fila no lleva línea inferior */
.pricing__table tbody tr:last-child .pricing__product,
.pricing__table tbody tr:last-child .pricing__cell {
  border-bottom: none;
}

/* Producto dentro de la fila */
.product {
  display: flex;
  align-items: center;
  gap: 20px;
}

.product__art {
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5));
}

.product__art--photo {
  width: clamp(72px, 9vw, 112px);
  height: auto;
  aspect-ratio: 1 / 1;
}

.product__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

/* La foto es un botón que abre el visor ampliado (lightbox.js) */
.product__zoom {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 16px;
  cursor: zoom-in;
  transition: transform 0.2s ease;
}

.product__zoom:hover {
  transform: scale(1.04);
}

.product__zoom:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Visor ampliado ---------- */

.has-lightbox {
  overflow: hidden;
}

.lightbox {
  width: min(880px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(6, 7, 9, 0.82);
  backdrop-filter: blur(6px);
}

.lightbox[open] {
  animation: lightbox-in 0.22s ease-out;
}

.lightbox__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  max-height: calc(100dvh - 32px);
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: 24px;
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

.lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: clamp(16px, 4vw, 40px);
  background: radial-gradient(circle at 50% 40%, var(--surface-raised), var(--bg));
}

.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 200px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  filter: drop-shadow(var(--shadow-sticker-lg));
}

.lightbox__caption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px clamp(16px, 4vw, 28px) 22px;
  border-top: 1px solid var(--line);
}

.lightbox__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.lightbox__spec {
  font-size: 15px;
  color: var(--ink-muted);
}

.lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: rgba(12, 13, 16, 0.7);
  color: var(--ink);
  cursor: pointer;
}

.lightbox__close:hover {
  background: var(--surface-deep);
}

.lightbox__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@keyframes lightbox-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product__zoom,
  .lightbox[open] {
    transition: none;
    animation: none;
  }

  .product__zoom:hover {
    transform: none;
  }
}

.product__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.product__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.product__features {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-muted);
}

.product__spec {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-dim);
}

/* Precios */
.price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.price--best {
  color: var(--accent);
}

.price__unit {
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-dim);
}

.price__unit-label {
  color: var(--ink-faint);
}

/* --- Rejilla de beneficios --- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.feature {
  box-sizing: border-box;
  padding: 28px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.feature__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--line-medium);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.feature__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feature__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.feature__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* --- Bloque de cotización personalizada --- */

.quote {
  box-sizing: border-box;
  padding: 28px 32px;
  border-radius: 24px;
  border: 1px solid var(--line-strong);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
}

.quote__lead {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.quote__icon {
  flex: 0 0 auto;
  color: var(--accent);
}

.quote__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.quote__text {
  flex: 1 1 380px;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.quote__link {
  color: var(--ink);
  font-weight: 600;
}

.quote__note {
  flex: 0 1 280px;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
}