/* =========================================================
   CALCAPRINT — Propuesta de rediseño 2026 (prototipo local)
   Sistema visual: "Pega tu marca en todas partes"
   ========================================================= */

:root {
  --naranja: #F39200;
  --naranja-600: #D97F00;
  --naranja-100: #FFF0D9;
  --azul: #82D0F5;
  --azul-600: #2F9FD6;
  --azul-100: #E7F6FD;
  --tinta: #121214;
  --tinta-2: #1D1D22;
  --tinta-3: #2A2A31;
  --gris: #5F5F69;
  --gris-2: #9A9AA3;
  --linea: #E6E0D6;
  --papel: #F7F4EE;
  --papel-2: #EFE9DE;
  --blanco: #FFFFFF;
  --wa: #25D366;
  --holo: linear-gradient(115deg, #ffb3de 0%, #ffe29a 18%, #a8f5d0 36%, #8fd8ff 54%, #c9b2ff 72%, #ffb3de 90%, #ffe29a 100%);
  --oro: linear-gradient(135deg, #8a6212 0%, #f5d27a 30%, #b8872b 52%, #ffe7a6 70%, #9c7021 100%);
  --plata: linear-gradient(135deg, #7b8089 0%, #eef1f5 30%, #a3a8b1 52%, #ffffff 68%, #8a8f98 100%);
  --r-xl: 36px;
  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;
  --sh-1: 0 1px 2px rgba(18, 18, 20, .06), 0 10px 26px -14px rgba(18, 18, 20, .22);
  --sh-2: 0 2px 6px rgba(18, 18, 20, .06), 0 28px 56px -26px rgba(18, 18, 20, .34);
  --sh-sticker: drop-shadow(0 1px 0 rgba(18, 18, 20, .08)) drop-shadow(0 12px 14px rgba(18, 18, 20, .22));
  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --f-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-label: "Montserrat", system-ui, sans-serif;
  --wrap: 1240px;
  --header-h: 72px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--f-text);
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--azul-600); outline-offset: 3px; border-radius: 6px; }
.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 { position: absolute; left: 12px; top: -60px; background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 200; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 { font-family: var(--f-display); letter-spacing: -.02em; line-height: 1.02; margin: 0; font-weight: 800; }
h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); letter-spacing: -.035em; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.12; }
p { margin: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-label); font-weight: 800; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--naranja-600);
}
.eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: currentColor; }
.lead { font-size: clamp(1.05rem, 1.35vw, 1.22rem); color: var(--gris); max-width: 58ch; }
.sec { padding: clamp(72px, 9vw, 128px) 0; position: relative; }
.sec-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 56px); max-width: 780px; }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.hl { position: relative; white-space: nowrap; z-index: 0; }
.hl::after {
  content: ""; position: absolute; left: -.08em; right: -.08em; bottom: .06em; height: .36em; z-index: -1;
  background: var(--naranja); border-radius: .12em; transform: rotate(-1.2deg);
}
.hl-azul::after { background: var(--azul); }
.muted { color: var(--gris); }
.small { font-size: .88rem; }

/* ---------- Botones ---------- */
.btn {
  --bg: var(--tinta); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border-radius: 999px; border: 0;
  background: var(--bg); color: var(--fg); text-decoration: none;
  font-weight: 700; font-size: 1rem; letter-spacing: -.005em;
  transition: transform .25s var(--spring), box-shadow .25s var(--ease), background .2s;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 10px 22px -12px rgba(18, 18, 20, .55);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { --bg: var(--naranja); --fg: var(--tinta); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 12px 24px -12px rgba(217, 127, 0, .9); }
.btn-primary:hover { --bg: #ffa31f; }
.btn-ghost { --bg: transparent; --fg: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
.btn-ghost:hover { --bg: var(--tinta); --fg: #fff; }
.btn-light { --bg: #fff; --fg: var(--tinta); }
.btn-wa { --bg: var(--wa); --fg: #062b13; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: .92rem; }
.btn svg { width: 20px; height: 20px; flex: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; }
.link-arrow::after { content: "→"; transition: transform .25s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Barra de prototipo + anuncio ---------- */
.proto-bar {
  background: repeating-linear-gradient(-45deg, #1a1a1e 0 14px, #202026 14px 28px);
  color: #cfcfd6; font-size: .8rem; text-align: center; padding: 8px 16px;
}
.proto-bar b { color: var(--naranja); font-family: var(--f-label); letter-spacing: .08em; }
.proto-bar a { color: #fff; font-weight: 600; margin-left: 12px; }
.announce { background: var(--tinta); color: #fff; font-size: .9rem; overflow: hidden; }
.announce .wrap { display: flex; align-items: center; justify-content: center; min-height: 42px; }
.announce-track { position: relative; height: 24px; width: 100%; max-width: 640px; text-align: center; }
.announce-track > span { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); transition: all .5s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.announce-track em { font-style: normal; }
.announce-track > span.on { opacity: 1; transform: none; }
.announce b { color: var(--naranja); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 90; height: var(--header-h);
  background: rgba(247, 244, 238, .78); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s;
}
.header.scrolled { border-color: var(--linea); box-shadow: 0 10px 30px -24px rgba(18, 18, 20, .5); }
.header .wrap { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand img { height: 44px; width: auto; transition: transform .35s var(--spring); }
.brand:hover img { transform: rotate(-4deg) scale(1.04); }
.nav { display: flex; gap: 6px; margin-left: 8px; }
.nav > a {
  text-decoration: none; font-weight: 600; font-size: .95rem; padding: 10px 14px; border-radius: 999px;
  color: var(--tinta-3); transition: background .2s, color .2s;
}
.nav > a:hover, .nav > a.active { background: rgba(18, 18, 20, .07); color: var(--tinta); }
.header-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 0;
  background: #fff; box-shadow: var(--sh-1); text-decoration: none;
}
.icon-btn svg { width: 22px; height: 22px; }
.burger { display: none; }
.mnav {
  position: fixed; inset: 0; z-index: 120; background: var(--tinta); color: #fff;
  display: flex; flex-direction: column; padding: 28px 24px 40px;
  transform: translateY(-100%); transition: transform .5s var(--ease); visibility: hidden;
}
.mnav.open { transform: none; visibility: visible; }
.mnav-top { display: flex; justify-content: space-between; align-items: center; }
.mnav-top img { height: 40px; }
.mnav nav { display: grid; gap: 4px; margin: 40px 0 auto; }
.mnav nav a { font-family: var(--f-display); font-size: 2.2rem; font-weight: 800; text-decoration: none; padding: 6px 0; letter-spacing: -.03em; }
.mnav nav a:hover { color: var(--naranja); }
.mnav .btn { width: 100%; }

/* ---------- HERO ---------- */
.hero { position: relative; padding: clamp(40px, 6vw, 84px) 0 clamp(64px, 8vw, 110px); overflow: hidden; }
.hero::before {
  /* tapete de corte: cuadrícula sutil */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(rgba(18, 18, 20, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 20, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 65% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 65% 40%, #000 30%, transparent 75%);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero-copy { display: grid; gap: 26px; }
.pill {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px;
  background: #fff; border-radius: 999px; box-shadow: var(--sh-1); font-size: .88rem; font-weight: 600;
}
.pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 4px rgba(37, 211, 102, .18); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); } }
.hero h1 .line { display: block; }
.rot-wrap { display: inline-block; }
.rot {
  display: inline-block; padding: 0 .14em .04em; border-radius: .18em;
  background: var(--naranja); color: var(--tinta); transform: rotate(-2deg); transform-origin: 30% 80%;
  box-shadow: 0 .06em 0 rgba(18, 18, 20, .15), 0 .18em .36em -.14em rgba(18, 18, 20, .35);
  transition: opacity .3s var(--ease), transform .5s var(--spring), background-color .3s;
}
.rot.alt { background: var(--azul); }
.rot.out { opacity: 0; transform: rotate(5deg) translateY(-.3em) scale(.96); transition-duration: .22s; }
.rot.in { opacity: 0; transform: rotate(-9deg) translateY(.35em) scale(.96); transition: none; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.trust { padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--gris); font-size: .93rem; font-weight: 500; }
.trust li { display: flex; align-items: center; gap: 8px; list-style: none; }
.trust ul { display: contents; }
.trust svg { width: 20px; height: 20px; color: var(--naranja-600); flex: none; }

/* Pliego interactivo */
.pliego-stage { position: relative; aspect-ratio: 1 / 1.02; perspective: 1400px; }
.pliego {
  position: absolute; inset: 4% 2% 6% 4%; border-radius: 22px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, #ffffff 0%, #f3efe7 100%);
  box-shadow: var(--sh-2), inset 0 0 0 1px rgba(18, 18, 20, .05);
  transform: rotate(3deg) rotateX(8deg) rotateY(-10deg);
  transform-style: preserve-3d;
}
.pliego::before {
  /* líneas de semicorte */
  content: ""; position: absolute; inset: 16px; border-radius: 14px;
  background-image:
    repeating-linear-gradient(90deg, rgba(18, 18, 20, .08) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(0deg, rgba(18, 18, 20, .08) 0 6px, transparent 6px 12px);
  background-size: 100% 1px, 1px 100%;
  background-repeat: repeat-y, repeat-x;
  opacity: .2;
}
.pliego-label {
  position: absolute; left: 22px; bottom: 16px; font-family: var(--f-label); font-weight: 800; font-size: .66rem;
  letter-spacing: .18em; color: var(--gris-2); text-transform: uppercase;
}
.stk {
  position: absolute; will-change: transform; filter: var(--sh-sticker);
  transform: translate3d(calc(var(--mx, 0) * var(--d, 10px)), calc(var(--my, 0) * var(--d, 10px)), 0) rotate(var(--r, 0deg));
  transition: transform .35s var(--ease);
}
.stk > * { animation: floaty var(--t, 7s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(1.4deg); } }
.stk:hover { z-index: 5; }
.stk:hover > * { animation-play-state: paused; }
.stk-logo { width: 56%; left: 4%; top: 8%; --r: -7deg; --d: 16px; --t: 8s; }
.stk-logo img { width: 100%; }
.stk-burst { width: 40%; right: 0; top: 0; --r: 9deg; --d: 26px; --t: 6.5s; --dl: -1s; }
.stk-holo { width: 32%; left: 6%; top: 44%; --r: -4deg; --d: 22px; --t: 7.5s; --dl: -2s; }
.stk-azul { width: 24%; left: 40%; top: 56%; --r: 7deg; --d: 12px; --t: 8.5s; --dl: -3s; }
.stk-texto { left: 10%; bottom: 12%; --r: -3deg; --d: 30px; --t: 6s; --dl: -.5s; }
.stk-estrella { width: 15%; left: 50%; top: 38%; --r: 14deg; --d: 34px; --t: 5.5s; --dl: -1.5s; }
.stk-peel { width: 24%; right: 6%; top: 42%; --r: -10deg; --d: 18px; --t: 9s; --dl: -4s; }

.burst svg { width: 100%; height: auto; overflow: visible; }
.burst .txt { font-family: var(--f-display); font-weight: 800; fill: var(--tinta); }
.holo-disc {
  aspect-ratio: 1; border-radius: 50%; border: 7px solid #fff; background: var(--holo); background-size: 300% 300%;
  animation: holo 6s linear infinite; display: grid; place-items: center; position: relative; overflow: hidden;
}
.holo-disc::after {
  content: ""; position: absolute; inset: -40%; background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%);
  transform: translateX(-60%); animation: sweep 3.6s var(--ease) infinite;
}
.holo-disc span { font-family: var(--f-display); font-weight: 800; font-size: clamp(1rem, 2.1vw, 1.6rem); letter-spacing: .04em; color: rgba(18, 18, 20, .78); mix-blend-mode: multiply; }
@keyframes holo { to { background-position: 300% 0; } }
@keyframes sweep { 0%, 35% { transform: translateX(-60%); } 70%, 100% { transform: translateX(60%); } }
.azul-card { aspect-ratio: 1; border-radius: 26%; border: 7px solid #fff; background: var(--azul); display: grid; place-items: center; }
.azul-card svg { width: 58%; }
.texto-stk {
  display: inline-block; background: var(--tinta); color: #fff; font-family: var(--f-display); font-weight: 800;
  font-size: clamp(.95rem, 1.5vw, 1.25rem); padding: .55em 1.1em; border-radius: 999px; border: 5px solid #fff; white-space: nowrap;
}
.estrella svg { width: 100%; overflow: visible; }
.peel-card {
  position: relative; aspect-ratio: 1; border-radius: 22%; border: 6px solid #fff; background: var(--naranja);
  display: grid; place-items: center; overflow: hidden;
}
.peel-card svg { width: 56%; }
.peel-card::after {
  /* esquina despegada */
  content: ""; position: absolute; right: -2px; bottom: -2px; width: 38%; height: 38%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 49%, rgba(0, 0, 0, .18) 50%, #f4f1ea 52%, #e3ddd1 100%);
  border-top-left-radius: 14px; transition: width .35s var(--spring), height .35s var(--spring);
}
.stk-peel:hover .peel-card::after { width: 62%; height: 62%; }
.price-float {
  position: absolute; right: -2%; bottom: 3%; z-index: 6; background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 18px; padding: 14px 18px; box-shadow: var(--sh-2); display: grid; gap: 2px; min-width: 250px;
}
.price-float small { font-family: var(--f-label); font-weight: 800; font-size: .66rem; letter-spacing: .14em; color: var(--gris); text-transform: uppercase; }
.price-float strong { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.1; }
.price-float a { font-size: .9rem; font-weight: 700; color: var(--naranja-600); text-decoration: none; }

/* ---------- Cinta marquee ---------- */
.ribbon { background: var(--naranja); color: var(--tinta); transform: rotate(-1.6deg); margin: -18px -20px 0; position: relative; z-index: 3; box-shadow: 0 16px 30px -20px rgba(217, 127, 0, .8); }
.marquee { overflow: hidden; display: flex; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; flex: none; gap: 0; animation: marquee var(--dur, 38s) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.ribbon .marquee-track span { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.1rem, 2vw, 1.5rem); padding: 16px 0; white-space: nowrap; display: inline-flex; align-items: center; }
.ribbon .marquee-track span::after { content: "✦"; margin: 0 26px; font-size: .8em; }

/* Logos de clientes */
.clientes { padding: 72px 0 24px; }
.clientes p { text-align: center; font-weight: 600; color: var(--gris); margin-bottom: 26px; }
.logos .marquee-track { --dur: 46s; align-items: center; }
.logos img {
  height: 46px; width: 150px; object-fit: contain; margin: 0 26px; filter: grayscale(1) contrast(.9); opacity: .62;
  transition: filter .3s, opacity .3s, transform .3s var(--spring);
}
.logos img:hover { filter: none; opacity: 1; transform: scale(1.08); }

/* ---------- Cotizador ---------- */
.cotizador { background: linear-gradient(180deg, var(--papel) 0%, var(--papel-2) 100%); }
.cz {
  display: grid; grid-template-columns: 1.22fr .78fr; gap: 0; background: #fff; border-radius: var(--r-xl);
  box-shadow: var(--sh-2); overflow: hidden;
}
.cz > * { min-width: 0; }
.cz-form { padding: clamp(22px, 3.4vw, 42px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-content: start; }
.cz-step { display: grid; gap: 14px; }
.cz-step > header { display: flex; align-items: baseline; gap: 12px; }
.cz-step .n {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--tinta); color: #fff; font-weight: 800; font-size: .85rem;
}
.cz-step h3 { font-size: 1.2rem; }
.cz-step .hint { font-size: .86rem; color: var(--gris); margin-left: auto; }
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.chip span { display: grid; line-height: 1.15; text-align: left; }
.chip small { font-size: .72rem; font-weight: 700; color: var(--naranja-600); }
.chip {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; border-radius: 14px; text-align: left;
  background: var(--papel); border: 2px solid transparent; font-weight: 600; font-size: .92rem;
  transition: border-color .2s, background .2s, transform .2s var(--spring);
}
.chip:hover { transform: translateY(-2px); }
.chip[aria-pressed="true"] { border-color: var(--tinta); background: #fff; box-shadow: var(--sh-1); }
.chip .sw { width: 24px; height: 24px; border-radius: 7px; flex: none; box-shadow: inset 0 0 0 1px rgba(18, 18, 20, .15); }
.chip .tag { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--naranja-600); }
.chip-group-label { grid-column: 1 / -1; font-family: var(--f-label); font-weight: 800; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-2); margin-top: 4px; }
.sw-blanco { background: #fff; }
.sw-mate { background: #f0efec; }
.sw-trans { background: repeating-conic-gradient(#e9e9ee 0 25%, #fff 0 50%) 0 0 / 10px 10px; }
.sw-holo { background: var(--holo); background-size: 200% 200%; }
.sw-oro { background: var(--oro); }
.sw-plata { background: var(--plata); }
.sw-reflect { background: linear-gradient(135deg, #cfd3d8, #ffffff 45%, #b9bec5); }
.sw-glow { background: radial-gradient(circle, #d8ffb0 0%, #9eff6e 45%, #6fd35a 100%); }
.sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.size-btn {
  padding: 10px 14px; border-radius: 12px; border: 2px solid var(--linea); background: #fff; font-weight: 700; font-size: .92rem;
  transition: border-color .2s, background .2s;
}
.size-btn[aria-pressed="true"] { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.dims { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stepper { display: inline-flex; align-items: center; background: var(--papel); border-radius: 14px; padding: 4px; }
.stepper button { width: 42px; height: 42px; border-radius: 10px; border: 0; background: #fff; font-size: 1.3rem; font-weight: 700; box-shadow: var(--sh-1); }
.stepper input {
  width: 64px; text-align: center; border: 0; background: transparent; font-family: var(--f-display); font-weight: 800; font-size: 1.4rem;
  -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dims .x { font-weight: 800; color: var(--gris-2); }
.dims label { font-size: .78rem; font-weight: 700; color: var(--gris); display: grid; gap: 6px; }
.qty-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.qty-row input[type="number"] {
  width: 160px; height: 52px; border-radius: 14px; border: 2px solid var(--linea); padding: 0 16px; font-size: 1.1rem; font-weight: 700;
  font-family: var(--f-text);
}
.qty-row input:focus { border-color: var(--tinta); outline: none; }
.seg { display: inline-flex; background: var(--papel); border-radius: 14px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 10px 14px; border-radius: 10px; font-weight: 700; font-size: .9rem; color: var(--gris); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--tinta); box-shadow: var(--sh-1); }
.cz-out { background: var(--tinta); color: #fff; padding: clamp(22px, 3vw, 36px); position: relative; }
.cz-out > .cz-sticky { position: sticky; top: 96px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.cz-out::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(600px 300px at 90% -10%, rgba(243, 146, 0, .35), transparent 60%), radial-gradient(500px 280px at -10% 110%, rgba(130, 208, 245, .25), transparent 60%);
}
.cz-out > * { position: relative; }
.seg-grid { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); }
.seg-grid button { display: grid; gap: 2px; padding: 10px 8px; text-align: center; line-height: 1.2; }
.seg-grid button b { font-size: .88rem; }
.seg-grid button small { font-size: .74rem; font-weight: 600; color: var(--gris-2); }
.seg-grid button[aria-pressed="true"] small { color: var(--naranja-600); }
.cz-canvas-wrap { background: rgba(255, 255, 255, .06); border-radius: 18px; padding: 14px; display: grid; gap: 8px; }
.cz-canvas-wrap canvas { max-width: 100%; width: 100%; height: auto; aspect-ratio: 95 / 100; border-radius: 10px; display: block; }
.cz-canvas-wrap .cap { font-size: .78rem; color: rgba(255, 255, 255, .6); display: flex; justify-content: space-between; }
.cz-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kpi { background: rgba(255, 255, 255, .06); border-radius: 16px; padding: 14px 16px; }
.kpi small { display: block; font-size: .74rem; color: rgba(255, 255, 255, .6); font-weight: 600; }
.kpi b { font-family: var(--f-display); font-size: 1.7rem; line-height: 1.15; }
.cz-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 18px; }
.cz-total small { color: rgba(255, 255, 255, .7); font-weight: 600; }
.cz-total strong { font-family: var(--f-display); font-size: clamp(2.2rem, 4vw, 3rem); letter-spacing: -.03em; color: var(--naranja); }
.cz-note { font-size: .84rem; color: rgba(255, 255, 255, .7); min-height: 1.2em; }
.cz-note.warn { color: #ffd08a; }
.cz-out .btn { width: 100%; }
.cz-fine { font-size: .78rem; color: rgba(255, 255, 255, .5); }

/* ---------- Materiales (bento) ---------- */
.bento {
  display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "blanco blanco holo holo"
    "blanco blanco foto refl"
    "trans  metal  dtf  dtf";
}
.mat {
  position: relative; border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: var(--sh-1);
  display: flex; flex-direction: column; isolation: isolate;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.mat:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.mat .ph { position: relative; flex: 1; min-height: 190px; overflow: hidden; isolation: isolate; }
.mat .ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease), filter .6s var(--ease); }
.mat:hover .ph > img { transform: scale(1.05); }
.mat .body { padding: 18px 20px 20px; display: grid; gap: 6px; }
.mat .tag { justify-self: start; font-family: var(--f-label); font-weight: 800; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; padding: 5px 9px; border-radius: 8px; background: var(--naranja); color: var(--tinta); }
.mat .tag.esp { background: var(--azul); }
.mat h3 { font-size: clamp(1.25rem, 1.7vw, 1.55rem); }
.mat p { font-size: .93rem; color: var(--gris); max-width: 44ch; }
.mat .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.mat .price { font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; }
.mat .price small { font-family: var(--f-text); font-weight: 500; font-size: .78rem; color: var(--gris); }
.mat .btn { min-height: 40px; padding: 0 16px; font-size: .88rem; }
/* Tarjeta grande: texto sobre la foto */
.mat.over { justify-content: flex-end; min-height: 520px; background: var(--tinta); }
.mat.over .ph { position: absolute; inset: 0; }
.mat.over .ph::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 18, 20, 0) 34%, rgba(18, 18, 20, .5) 60%, rgba(18, 18, 20, .9) 100%); }
.mat.over .body { position: relative; color: #fff; padding: 26px; }
.mat.over p, .mat.over .price small { color: rgba(255, 255, 255, .85); }
.mat.over h3 { font-size: clamp(1.9rem, 3vw, 2.7rem); }
/* Tarjeta ancha: texto al lado de la foto */
.mat.split { flex-direction: row-reverse; background: var(--tinta); color: #fff; }
.mat.split .ph { flex: 1 1 50%; min-height: 250px; }
.mat.split .body { flex: 1 1 50%; align-content: center; padding: 26px; }
.mat.split p, .mat.split .price small { color: rgba(255, 255, 255, .75); }
.mat-blanco { grid-area: blanco; }
.mat-holo { grid-area: holo; }
.mat-foto { grid-area: foto; }
.mat-refl { grid-area: refl; }
.mat-trans { grid-area: trans; }
.mat-metal { grid-area: metal; }
.mat-dtf { grid-area: dtf; background: var(--tinta); color: #fff; justify-content: space-between; }
.mat-dtf p, .mat-dtf .price small { color: rgba(255, 255, 255, .75); }
.toggle {
  position: absolute; top: 16px; left: 16px; display: inline-flex; background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 999px; padding: 4px; gap: 2px; z-index: 2;
}
.toggle button { border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: .82rem; color: var(--gris); }
.toggle button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.mat-holo .ph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--holo); background-size: 250% 250%;
  mix-blend-mode: color; opacity: 0; transition: opacity .5s; animation: holo 5s linear infinite;
}
.mat-holo:hover .ph::after { opacity: .6; }
.mat .shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%); transform: translateX(-120%); }
.mat:hover .shine { transition: transform 1.1s var(--ease); transform: translateX(120%); }
.glow-btn {
  position: absolute; top: 14px; left: 14px; z-index: 2; border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: .82rem;
  background: rgba(255, 255, 255, .92); display: inline-flex; gap: 8px; align-items: center; box-shadow: var(--sh-1);
}
.glow-btn svg { width: 16px; height: 16px; }
.mat-foto .glow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease);
  background: radial-gradient(circle at 55% 45%, rgba(172, 255, 120, .95) 0%, rgba(124, 255, 90, .5) 16%, rgba(80, 220, 120, 0) 36%); mix-blend-mode: screen;
}
.mat-foto.dark .ph > img { filter: brightness(.14) saturate(.3); }
.mat-foto.dark .glow { opacity: 1; animation: glowpulse 2.4s ease-in-out infinite; }
.mat-foto.dark .glow-btn { background: #1d1d22; color: #d8ffb0; }
@keyframes glowpulse { 50% { filter: brightness(1.3); } }
.mat-refl .torch { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 110px at var(--x, 50%) var(--y, 45%), rgba(255, 255, 255, 0) 0%, rgba(18, 18, 20, .6) 75%); opacity: 0; transition: opacity .3s; }
.mat-refl:hover .torch { opacity: 1; }
.mat-refl:hover .ph > img { filter: brightness(1.3) contrast(1.1); }
.relieve {
  padding: 26px 26px 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(2.8rem, 5.2vw, 4.6rem); line-height: .92; letter-spacing: -.04em; color: var(--naranja);
  text-shadow: 0 1px 0 #d98200, 0 2px 0 #c77700, 0 3px 0 #b56c00, 0 4px 0 #a36100, 0 5px 0 #8f5500, 0 12px 20px rgba(0, 0, 0, .55);
}
.relieve span { color: var(--azul); text-shadow: 0 1px 0 #5fb8e2, 0 2px 0 #4aa8d6, 0 3px 0 #3998c7, 0 4px 0 #2d88b6, 0 5px 0 #25779f, 0 12px 20px rgba(0, 0, 0, .55); }
.mat-note { margin-top: 18px; font-size: .92rem; color: var(--gris); }

/* ---------- Usos ---------- */
.usos-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-padding-inline: 24px; padding: 6px 24px 24px; margin: 0 -24px; scrollbar-width: thin;
}
.uso {
  scroll-snap-align: start; background: #fff; border-radius: var(--r-lg); padding: 26px; display: grid; gap: 14px; align-content: start;
  box-shadow: var(--sh-1); min-height: 260px; position: relative; overflow: hidden;
}
.uso .ico { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--naranja-100); color: var(--naranja-600); }
.uso:nth-child(2n) .ico { background: var(--azul-100); color: var(--azul-600); }
.uso .ico svg { width: 30px; height: 30px; }
.uso h3 { font-size: 1.3rem; }
.uso p { color: var(--gris); font-size: .95rem; }
.uso .rec { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.uso .rec span { font-size: .76rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--papel); }

/* ---------- Pasos ---------- */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; counter-reset: paso; }
.pasos::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 36px; height: 4px; border-radius: 4px; background: var(--linea);
}
.pasos::after {
  content: ""; position: absolute; left: 6%; top: 36px; height: 4px; border-radius: 4px; background: var(--naranja);
  width: 0; transition: width 1.6s var(--ease) .2s;
}
.pasos.in::after { width: 88%; }
.paso { position: relative; display: grid; gap: 12px; justify-items: start; }
.paso .num {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 6px solid var(--papel);
  box-shadow: var(--sh-1); font-family: var(--f-display); font-weight: 800; font-size: 1.8rem; position: relative; z-index: 1;
}
.paso:nth-child(1) .num { background: var(--naranja); }
.paso:nth-child(2) .num { background: var(--azul); }
.paso:nth-child(3) .num { background: var(--tinta); color: #fff; }
.paso:nth-child(4) .num { background: #fff; }
.paso h3 { font-size: 1.25rem; }
.paso p { color: var(--gris); font-size: .95rem; }

/* ---------- Otros productos ---------- */
.prods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.prod {
  background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.prod:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.prod .media { aspect-ratio: 4 / 3.2; background: var(--papel-2); position: relative; overflow: hidden; display: grid; place-items: center; }
.prod .media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transition: transform .8s var(--ease); }
.prod:hover .media img { transform: scale(1.26); }
.prod .body { padding: 20px 22px 24px; display: grid; gap: 8px; flex: 1; }
.prod .body p { color: var(--gris); font-size: .93rem; }
.prod .from { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.prod .from b { font-family: var(--f-display); font-size: 1.25rem; }
.prod .badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--tinta); color: #fff; font-weight: 800; font-size: .72rem; letter-spacing: .06em; padding: 6px 10px; border-radius: 8px; text-transform: uppercase; }
.imanes { width: 100%; height: 100%; background: linear-gradient(160deg, #eef3f6, #dfe7ec); position: relative; }
.imanes .nevera { position: absolute; inset: 12% 22% -5% 22%; background: linear-gradient(90deg, #f8fafb, #e6ecef); border-radius: 18px 18px 0 0; box-shadow: inset -8px 0 18px rgba(0, 0, 0, .06); }
.imanes .nevera::before { content: ""; position: absolute; right: 14px; top: 26%; width: 6px; height: 34%; border-radius: 6px; background: #c5cfd5; }
.imanes .iman { position: absolute; width: 36%; aspect-ratio: 9 / 5.5; border-radius: 8px; box-shadow: 0 8px 14px -6px rgba(0, 0, 0, .35); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: .8rem; }
.imanes .i1 { left: 30%; top: 22%; background: var(--naranja); transform: rotate(-6deg); }
.imanes .i2 { left: 40%; top: 50%; background: var(--tinta); color: #fff; transform: rotate(4deg); border-radius: 50% 50% 50% 8px; aspect-ratio: 1; width: 24%; }
.rollo { width: 100%; height: 100%; background: linear-gradient(160deg, #fff4e3, #ffe2b8); position: relative; }
.rollo .tubo { position: absolute; left: 12%; top: 26%; width: 32%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #6d6d74 0 16%, #f6f3ee 17% 60%, #e2ddd3 61% 100%); box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .35); z-index: 2; }
.rollo .lamina { position: absolute; left: 30%; top: 26%; right: 6%; height: 52%; background: linear-gradient(180deg, #ffffff, #f1ede6); border-radius: 0 10px 10px 0; box-shadow: 0 12px 20px -10px rgba(0, 0, 0, .3);
  background-image: radial-gradient(circle at 40% 50%, var(--naranja) 0 11%, transparent 12%), radial-gradient(circle at 64% 50%, var(--azul) 0 11%, transparent 12%), radial-gradient(circle at 87% 50%, var(--tinta) 0 11%, transparent 12%); }
.mas-productos { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: #fff; border-radius: var(--r-lg); padding: 22px 26px; box-shadow: var(--sh-1); }
.mas-productos p { color: var(--gris); }
.mas-productos b { color: var(--tinta); }

/* ---------- Por qué (oscuro) ---------- */
.dark { background: var(--tinta); color: #fff; }
.dark .lead, .dark .muted { color: rgba(255, 255, 255, .7); }
.dark .eyebrow { color: var(--naranja); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 56px; }
.stat { border-radius: var(--r-lg); padding: 26px; background: var(--tinta-2); border: 1px solid rgba(255, 255, 255, .06); }
.stat b { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 5vw, 4rem); letter-spacing: -.04em; line-height: 1; }
.stat:nth-child(1) b { color: var(--naranja); }
.stat:nth-child(2) b { color: var(--azul); }
.stat span { color: rgba(255, 255, 255, .7); font-size: .95rem; }
.promesas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.promesa { padding: 24px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .08); display: grid; gap: 10px; align-content: start; }
.promesa svg { width: 32px; height: 32px; color: var(--naranja); }
.promesa h3 { font-size: 1.15rem; }
.promesa p { color: rgba(255, 255, 255, .7); font-size: .93rem; }

/* ---------- Reseñas ---------- */
.resenas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.resena { margin: 0; background: #fff; border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-1); display: grid; gap: 14px; position: relative; }
.resena .stars { color: var(--naranja); letter-spacing: 2px; font-size: 1.1rem; }
.resena blockquote { margin: 0; font-size: 1.02rem; }
.resena .who { display: flex; align-items: center; gap: 12px; }
.resena .av { width: 44px; height: 44px; border-radius: 50%; background: var(--papel-2); display: grid; place-items: center; font-weight: 800; }
.resena .who small { display: block; color: var(--gris); }
.plantilla { position: absolute; top: 14px; right: 14px; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-2); border: 1px dashed var(--gris-2); padding: 3px 7px; border-radius: 6px; }
.resenas-cta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; color: var(--gris); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-aside { position: sticky; top: 110px; display: grid; gap: 18px; }
.faq-list { display: grid; gap: 12px; }
.faq-list details { background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; }
.faq-list summary {
  list-style: none; cursor: pointer; padding: 20px 24px; font-weight: 700; font-size: 1.04rem; display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; width: 32px; height: 32px; border-radius: 50%; background: var(--papel); display: grid; place-items: center; flex: none;
  font-size: 1.3rem; transition: transform .3s var(--ease), background .3s;
}
.faq-list details[open] summary::after { transform: rotate(45deg); background: var(--naranja); }
.faq-list details p { padding: 0 24px 22px; color: var(--gris); }

/* ---------- CTA final ---------- */
.cta-final { padding: 0 0 clamp(72px, 9vw, 120px); }
.cta-box {
  position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--naranja); color: var(--tinta);
  padding: clamp(40px, 7vw, 88px) clamp(24px, 6vw, 80px); display: grid; gap: 22px; justify-items: start;
}
.cta-box h2 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); max-width: 14ch; }
.cta-box p { font-size: 1.12rem; max-width: 48ch; }
.cta-box .hero-cta .btn-ghost { box-shadow: inset 0 0 0 2px var(--tinta); }

/* ---------- Footer ---------- */
.footer { background: var(--tinta); color: rgba(255, 255, 255, .78); padding: 72px 0 110px; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer img.flogo { height: 56px; width: auto; margin-bottom: 18px; }
.footer h4 { color: #fff; font-family: var(--f-label); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--naranja); }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); }
.socials svg { width: 20px; height: 20px; }
.footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .84rem; color: rgba(255, 255, 255, .5); }

/* ---------- Flotantes ---------- */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 80; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: var(--wa); color: #fff; box-shadow: 0 16px 30px -10px rgba(37, 211, 102, .7); transition: transform .3s var(--spring);
}
.wa-float:hover { transform: scale(1.08) rotate(-6deg); }
.wa-float svg { width: 32px; height: 32px; }
.wa-float .bubble {
  position: absolute; right: 74px; bottom: 12px; background: #fff; color: var(--tinta); padding: 10px 14px; border-radius: 14px 14px 4px 14px;
  font-weight: 600; font-size: .88rem; white-space: nowrap; box-shadow: var(--sh-2); opacity: 0; transform: translateY(8px); transition: all .4s var(--ease); pointer-events: none;
}
.wa-float.hint .bubble { opacity: 1; transform: none; }
.mbar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 85; display: none; gap: 10px; padding: 10px; border-radius: 22px;
  background: rgba(18, 18, 20, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6);
  transform: translateY(140%); transition: transform .45s var(--ease);
}
.mbar.show { transform: none; }
.mbar .btn { flex: 1; min-height: 50px; padding: 0 14px; font-size: .95rem; }
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--naranja), var(--azul)); z-index: 100; }

/* ---------- Entrada del hero (sin depender de JS; el texto nunca arranca invisible) ---------- */
.anim { animation: rise .9s var(--ease) both; animation-delay: var(--delay, 0s); }
@keyframes rise { from { transform: translateY(18px); } }
.anim-pop { animation: pop 1s var(--ease) both; animation-delay: var(--delay, .1s); }
@keyframes pop { from { opacity: 0; transform: translateY(20px) scale(.96); } }

/* ---------- Reveal ---------- */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--delay, 0s); }
.js .rv.in { opacity: 1; transform: none; }

/* =========================================================
   Página de producto
   ========================================================= */
.crumbs { padding: 22px 0 0; font-size: .88rem; color: var(--gris); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--tinta); }
.pdp { padding: 28px 0 80px; }
.pdp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.gallery { position: sticky; top: 100px; display: grid; gap: 12px; }
.gallery-main { position: relative; border-radius: var(--r-xl); overflow: hidden; background: #fff; aspect-ratio: 1; box-shadow: var(--sh-1); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; }
.gallery-main .burst-badge { position: absolute; top: 18px; right: 18px; width: 30%; filter: var(--sh-sticker); animation: floaty 6s ease-in-out infinite; }
.thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.thumbs button { border: 3px solid transparent; border-radius: 14px; overflow: hidden; padding: 0; background: #fff; aspect-ratio: 1; transition: border-color .2s, transform .2s var(--spring); }
.thumbs button:hover { transform: translateY(-2px); }
.thumbs button[aria-pressed="true"] { border-color: var(--tinta); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pdp-info { display: grid; gap: 22px; }
.pdp-info h1 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); }
.pdp-price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pdp-price strong { font-family: var(--f-display); font-size: 2.6rem; letter-spacing: -.03em; }
.pdp-price span { color: var(--gris); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks svg { width: 22px; height: 22px; color: var(--naranja-600); flex: none; margin-top: 2px; }
.pdp .cz { grid-template-columns: 1fr; border-radius: var(--r-lg); }
.pdp .cz-form { padding: 26px; gap: 24px; }
.pdp .cz-out { padding: 26px; }
.pdp .cz-out > .cz-sticky { position: relative; top: auto; }
.pdp .cz-canvas-wrap { display: none; }
.secure-row { display: flex; flex-wrap: wrap; gap: 10px; }
.secure-row span { display: inline-flex; gap: 8px; align-items: center; font-size: .85rem; font-weight: 600; background: #fff; padding: 8px 12px; border-radius: 12px; box-shadow: var(--sh-1); }
.secure-row svg { width: 18px; height: 18px; color: var(--naranja-600); }
.specs { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); }
.specs th, .specs td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--linea); font-size: .95rem; vertical-align: top; }
.specs th { width: 38%; color: var(--gris); font-weight: 600; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
.tabla-cant { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.tabla-cant div { background: #fff; border-radius: 16px; padding: 16px; box-shadow: var(--sh-1); display: grid; gap: 2px; text-align: center; }
.tabla-cant b { font-family: var(--f-display); font-size: 1.6rem; }
.tabla-cant span { font-size: .82rem; color: var(--gris); }
.pdp-sec { padding: 56px 0 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }

/* =========================================================
   Página de análisis
   ========================================================= */
.doc-hero { padding: clamp(48px, 7vw, 96px) 0 40px; }
.doc-hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); max-width: 16ch; }
.doc-nav { position: sticky; top: var(--header-h); z-index: 50; background: rgba(247, 244, 238, .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.doc-nav .wrap { display: flex; gap: 6px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; }
.doc-nav a { flex: none; text-decoration: none; font-weight: 600; font-size: .88rem; padding: 8px 12px; border-radius: 999px; color: var(--gris); }
.doc-nav a:hover { background: rgba(18, 18, 20, .07); color: var(--tinta); }
.doc-sec { padding: 64px 0; border-bottom: 1px solid var(--linea); }
.doc-sec h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: 14px; }
.doc-sec > .wrap > .lead { margin-bottom: 30px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.card { background: #fff; border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh-1); display: grid; gap: 10px; align-content: start; }
.card h3 { font-size: 1.2rem; }
.card p, .card li { color: var(--gris); font-size: .95rem; }
.card ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.sev { justify-self: start; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; }
.sev.alta { background: #ffe1dc; color: #b3261e; }
.sev.media { background: var(--naranja-100); color: #9a5a00; }
.sev.baja { background: var(--azul-100); color: #1c6d96; }
.sev.ok { background: #dcf7e5; color: #16693a; }
.score { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 26px; }
.score > div { background: #fff; border-radius: 18px; padding: 18px; box-shadow: var(--sh-1); display: grid; gap: 8px; }
.score b { font-family: var(--f-display); font-size: 2rem; }
.score .bar { height: 8px; border-radius: 8px; background: var(--papel-2); overflow: hidden; }
.score .bar i { display: block; height: 100%; border-radius: 8px; background: var(--naranja); }
.score small { color: var(--gris); font-weight: 600; }
.funnel { display: grid; gap: 10px; }
.funnel .f { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: center; background: #fff; border-radius: 18px; padding: 16px 20px; box-shadow: var(--sh-1); }
.funnel .f b { font-family: var(--f-display); font-size: 1.1rem; }
.funnel .f:nth-child(1) { margin: 0 0; }
.funnel .f:nth-child(2) { margin: 0 2%; }
.funnel .f:nth-child(3) { margin: 0 4%; }
.funnel .f:nth-child(4) { margin: 0 6%; }
.funnel .f:nth-child(5) { margin: 0 8%; }
.funnel .f:nth-child(6) { margin: 0 10%; }
.funnel .f p { color: var(--gris); font-size: .94rem; }
.palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.palette div { border-radius: 18px; overflow: hidden; box-shadow: var(--sh-1); background: #fff; }
.palette i { display: block; height: 96px; }
.palette span { display: block; padding: 10px 14px; font-size: .85rem; font-weight: 600; }
.palette small { display: block; color: var(--gris); font-weight: 500; }
.type-spec { display: grid; gap: 14px; }
.type-spec div { background: #fff; border-radius: 18px; padding: 20px 24px; box-shadow: var(--sh-1); display: flex; justify-content: space-between; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.roadmap .card .fase { font-family: var(--f-label); font-weight: 800; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--naranja-600); }
.comp-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); font-size: .92rem; }
.comp-table th, .comp-table td { padding: 12px 16px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.comp-table thead th { background: var(--tinta); color: #fff; font-weight: 700; font-size: .85rem; }
.comp-table td:first-child { font-weight: 700; }
.table-scroll { overflow-x: auto; border-radius: var(--r-md); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .nav { display: none; }
  .burger { display: grid; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-template-areas: "blanco blanco" "holo holo" "foto refl" "trans metal" "dtf dtf"; }
  .prods { grid-template-columns: repeat(2, 1fr); }
  .stats, .promesas { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cards-3, .roadmap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  body { font-size: 16px; }
  .hero .wrap { grid-template-columns: 1fr; }
  .pliego-stage { max-width: 560px; margin: 8px auto 0; width: 100%; }
  .cz { grid-template-columns: minmax(0, 1fr); }
  .cz-out > .cz-sticky { position: relative; top: auto; }
  .cz-canvas-wrap { max-width: 440px; width: 100%; margin: 0 auto; }
  .pasos { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .pasos::before, .pasos::after { display: none; }
  .resenas { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .faq-aside { position: static; }
  .pdp-grid, .two { grid-template-columns: 1fr; }
  .gallery { position: static; }
  .cards-2 { grid-template-columns: 1fr; }
  .funnel .f { grid-template-columns: 1fr; margin: 0 !important; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .header-cta .btn { display: none; }
  .brand img { height: 38px; }
  .hero-cta .btn { width: 100%; }
  .price-float { min-width: 0; right: 0; bottom: 0; padding: 10px 14px; } .price-float strong { font-size: 1.15rem; }
  /* En celular, materiales y productos pasan a carrusel deslizable: la página queda mucho más corta */
  .bento, .prods { grid-template-columns: none; grid-template-areas: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding: 4px 16px 18px; margin: 0 -16px; scrollbar-width: none; }
  .bento::-webkit-scrollbar, .prods::-webkit-scrollbar { display: none; }
  .bento > .mat, .prods > .prod { grid-area: auto; scroll-snap-align: start; }
  .mat:hover, .prod:hover { transform: none; }
  .mat.split { flex-direction: column; }
  .mat.over { min-height: 0; justify-content: flex-start; }
  .mat.over .ph { position: relative; inset: auto; flex: none; aspect-ratio: 4 / 3; }
  .mat.over .ph::after { display: none; }
  .mat.over .body { padding: 20px; }
  .mat.over h3 { font-size: 1.9rem; }
  .seg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; }
  .chip span { font-size: .86rem; overflow-wrap: anywhere; }
  .stats, .promesas, .cards-3, .roadmap { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .pasos { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .mbar { display: flex; }
  .wa-float { display: none; }
  .cz-kpis { grid-template-columns: 1fr 1fr; }
  .usos-track { padding: 6px 16px 24px; margin: 0 -16px; grid-auto-columns: 82%; scroll-padding-inline: 16px; }
  .thumbs { grid-template-columns: repeat(3, 1fr); }
  .proto-bar a { display: inline-block; margin: 4px 6px 0; }
  .announce { font-size: .84rem; }
  .announce-track em { display: none; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
}

/* ---------- Añadidos ---------- */
.cz-check { display: flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 600; color: rgba(255, 255, 255, .85); cursor: pointer; }
.cz-check input { width: 20px; height: 20px; accent-color: var(--naranja); }
.cz-step.is-off .seg { opacity: .38; pointer-events: none; filter: grayscale(1); }
.cz-total strong.is-text { font-size: 1.25rem; color: #ffd08a; letter-spacing: 0; }
.kpi b.is-text { font-size: 1.2rem; color: #ffd08a; }
a.prod { text-decoration: none; color: inherit; }
.prod .go { font-weight: 700; font-size: .9rem; color: var(--naranja-600); }
.pagos { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pagos span { padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); font-weight: 700; font-size: .9rem; }
.pagos .lbl { background: none; border: 0; padding: 0 6px 0 0; color: rgba(255, 255, 255, .65); font-weight: 600; }
.score .bar + .bar { margin-top: -2px; }
.score .bar i.p { background: var(--azul-600); }
.score .leg { display: flex; gap: 14px; font-size: .78rem; color: var(--gris); margin: -12px 0 22px; }
.score .leg i, .leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.precio-bars { display: grid; gap: 12px; }
.precio-bars .pb { display: grid; grid-template-columns: 96px 1fr 180px; gap: 14px; align-items: center; }
.precio-bars .val { font-weight: 700; font-size: .88rem; text-align: right; white-space: nowrap; }
.precio-bars .pb b { font-size: .95rem; }
.precio-bars .track { background: var(--papel-2); border-radius: 10px; overflow: hidden; }
.precio-bars .fill { height: 14px; border-radius: 8px; background: var(--gris-2); }
.precio-bars .pb.cp .fill { background: var(--naranja); color: var(--tinta); }
.beforeafter td:nth-child(2) { color: var(--gris); }
.beforeafter td:nth-child(3) { font-weight: 600; }
.shot { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); background: #fff; }
.shot img { width: 100%; }
.nota-proto { background: var(--naranja-100); border: 1px dashed var(--naranja-600); border-radius: var(--r-md); padding: 16px 20px; font-size: .95rem; }
@media (min-width: 1101px) {
  .usos-track { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; }
}
@media (max-width: 640px) {
  .precio-bars .pb { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .precio-bars .track { grid-column: 1 / -1; grid-row: 2; }
}

/* =========================================================
   V2 · Ideas tomadas de los referentes (Nerd Stickers, Original Sticker,
   CaliSticker, Sticker Shuttle, Sticker Mule, Calx, Plotear) + fotos IA
   ========================================================= */

/* ---------- Hero: prueba social junto a los botones ---------- */
.proof { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .9rem; color: var(--gris); }
.proof .mini { display: flex; }
.proof .mini span { width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: var(--sh-1); display: grid; place-items: center; margin-left: -9px; border: 2px solid var(--papel); overflow: hidden; }
.proof .mini span:first-child { margin-left: 0; }
.proof .mini img { width: 78%; height: 78%; object-fit: contain; }
.proof b { color: var(--tinta); }

/* ---------- Conmutador de hero A/B (solo prototipo) ---------- */
.proto-toggle { margin-left: 12px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: .78rem; font-weight: 700; }
.proto-toggle:hover { background: var(--naranja); color: var(--tinta); border-color: var(--naranja); }

/* ---------- Hero B: foto real de producto + fondo limpio ---------- */
.hero-b { display: block; position: relative; overflow: hidden; background: #efe9df; }
.hero-a, .band-life { display: none; }
html.show-hero-a .hero-a, html.show-hero-a .band-life { display: block; }
html.show-hero-a .hero-b { display: none; }
.hero-b-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.hero-b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(247, 244, 238, .97) 0%, rgba(247, 244, 238, .9) 30%, rgba(247, 244, 238, 0) 58%); }
.hero-b .wrap { position: relative; z-index: 2; min-height: clamp(560px, 72vh, 720px); display: grid; align-content: center; }
.hero-b .hero-copy { max-width: 560px; padding: 48px 0; }
.h1 { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em; margin: 0; }

/* ---------- ¿Qué vas a pegar hoy? (círculos tipo historias) ---------- */
.cats { padding: 56px 0 4px; }
.cats h2 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); margin-bottom: 20px; letter-spacing: -.02em; }
.cats-row { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; padding: 6px 24px 14px; margin: 0 -24px; scrollbar-width: none; }
.cats-row::-webkit-scrollbar { display: none; }
.cat { flex: none; width: 104px; display: grid; justify-items: center; gap: 10px; text-align: center; text-decoration: none; scroll-snap-align: start; border: 0; background: none; padding: 0; color: inherit; }
.cat .ring { width: 100px; height: 100px; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, var(--naranja), var(--azul), var(--naranja)); transition: transform .35s var(--spring); }
.cat .ring > * { width: 100%; height: 100%; border-radius: 50%; border: 4px solid var(--papel); object-fit: cover; display: grid; place-items: center; background: #fff; overflow: hidden; }
.cat:hover .ring { transform: translateY(-4px) rotate(-5deg); }
.cat span { font-weight: 700; font-size: .84rem; line-height: 1.2; }
.cat small { display: block; font-weight: 700; font-size: .72rem; color: var(--naranja-600); margin-top: 2px; }
.cat .ring .dtf { background: var(--tinta); color: var(--naranja); font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; }
.cat .ring .dtf em { font-style: normal; color: var(--azul); }
@media (min-width: 1101px) { .cats-row { justify-content: space-between; overflow: visible; margin: 0; padding: 6px 0 14px; } }

/* ---------- Compara materiales ---------- */
.compara { margin-top: 24px; }
details.compara { background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
details.compara > summary { list-style: none; cursor: pointer; padding: 18px 22px; font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
details.compara > summary::-webkit-details-marker { display: none; }
details.compara > summary::after { content: "+"; width: 34px; height: 34px; border-radius: 50%; background: var(--naranja); display: grid; place-items: center; font-size: 1.3rem; flex: none; transition: transform .3s var(--ease); }
details.compara[open] > summary::after { transform: rotate(45deg); }
details.compara .table-scroll { margin: 0 22px 22px; }
.compara .comp-table { min-width: 900px; }
.compara .comp-table td { color: var(--tinta-3); }
.compara .sw { width: 18px; height: 18px; border-radius: 6px; display: inline-block; vertical-align: -3px; margin-right: 8px; box-shadow: inset 0 0 0 1px rgba(18, 18, 20, .15); }
.compara .yes { color: #16693a; font-weight: 700; }
.compara .ask { color: var(--gris); }

/* ---------- Anatomía del sticker (vista explotada) ---------- */
.anatomia { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.stack { position: relative; height: 460px; perspective: 1600px; }
.stack .layer {
  --gap: 10px; position: absolute; left: 50%; top: 50%; width: 290px; height: 290px; margin: -145px 0 0 -145px; border-radius: 38px;
  transform: rotateX(58deg) rotateZ(-38deg) translateZ(calc(var(--i) * var(--gap) - 80px));
  transition: transform .9s var(--spring), opacity .3s, outline-color .3s;
  outline: 3px solid transparent; outline-offset: 4px;
}
.stack.in .layer { --gap: 56px; }
.stack:hover .layer { --gap: 66px; }
.stack .l-liner { background: repeating-linear-gradient(45deg, #efe9dd 0 10px, #f6f2ea 10px 20px); box-shadow: 0 40px 60px -24px rgba(18, 18, 20, .45); }
.stack .l-adh { background: rgba(255, 255, 255, .45); border: 2px dashed rgba(18, 18, 20, .22); }
.stack .l-vinyl { background: #fff; box-shadow: 0 1px 0 rgba(18, 18, 20, .06), 0 14px 24px -14px rgba(18, 18, 20, .3); }
.stack .l-print { background: url(../img/logo-calcaprint.png) center / 82% auto no-repeat; }
.stack .l-lam { background: linear-gradient(135deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .08) 45%, rgba(130, 208, 245, .3)); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(18, 18, 20, .05); }
.stack[data-hl] .layer { opacity: .3; }
.stack[data-hl="liner"] .l-liner, .stack[data-hl="adh"] .l-adh, .stack[data-hl="vinyl"] .l-vinyl, .stack[data-hl="print"] .l-print, .stack[data-hl="lam"] .l-lam { opacity: 1; outline-color: var(--naranja); }
.anat-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; counter-reset: capa; }
.anat-list li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: var(--sh-1); transition: transform .25s var(--spring), box-shadow .25s; }
.anat-list li:hover, .anat-list li:focus-within { transform: translateX(6px); box-shadow: var(--sh-2); }
.anat-list li::before { counter-increment: capa; content: counter(capa); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--papel); }
.anat-list li:nth-child(1)::before { background: var(--azul-100); }
.anat-list li:nth-child(2)::before { background: var(--naranja); }
.anat-list b { display: block; }
.anat-list span { color: var(--gris); font-size: .92rem; }
.chips-res { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips-res li { padding: 9px 14px; border-radius: 999px; background: var(--tinta); color: #fff; font-weight: 700; font-size: .86rem; }
.chips-res li::before { content: "\2713  "; color: var(--naranja); }

/* ---------- Banda: tu marca pegada ---------- */
.band-life { position: relative; overflow: hidden; background: #efe9df; }
.band-life > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.band-life::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(247, 244, 238, .96) 0%, rgba(247, 244, 238, .86) 30%, rgba(247, 244, 238, 0) 58%); }
.band-life .wrap { position: relative; z-index: 1; min-height: 460px; display: grid; align-content: center; gap: 18px; justify-items: start; }
.band-life h2 { max-width: 12ch; }
.band-life .lead { max-width: 40ch; }
.ia-tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .02em; color: var(--gris); background: rgba(255, 255, 255, .8); border-radius: 8px; padding: 4px 8px; }
.ia-note { font-size: .78rem; color: var(--gris-2); margin-top: 12px; }

/* ---------- Usos con foto ---------- */
.uso { padding: 0; gap: 0; }
.uso .pic { aspect-ratio: 4 / 3; overflow: hidden; background: var(--papel-2); }
.uso .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.uso:hover .pic img { transform: scale(1.05); }
.uso .txt { padding: 18px 22px 22px; display: grid; gap: 10px; }

/* ---------- Empresas (línea corporativa) ---------- */
.empresas { display: grid; grid-template-columns: 1.05fr .95fr; background: #fff; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-2); }
.empresas .pic { position: relative; min-height: 460px; }
.empresas .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.empresas .pic .ia-tag { position: absolute; left: 14px; bottom: 14px; }
.empresas .txt { padding: clamp(26px, 4vw, 52px); display: grid; gap: 18px; align-content: center; justify-items: start; }
.empresas ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.empresas li { display: flex; gap: 10px; align-items: flex-start; }
.empresas li svg { width: 22px; height: 22px; color: var(--naranja-600); flex: none; margin-top: 2px; }

/* ---------- Taller (dentro de la sección oscura) ---------- */
.taller { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 4vw, 48px); align-items: center; }
.taller .pic { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; }
.taller .pic img { width: 100%; height: 100%; object-fit: cover; }
.taller .play { position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; background: rgba(255, 255, 255, .94); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.taller .play::before { content: ""; border-left: 22px solid var(--tinta); border-top: 14px solid transparent; border-bottom: 14px solid transparent; margin-left: 6px; }
.taller .ia-tag { position: absolute; left: 14px; bottom: 14px; background: rgba(18, 18, 20, .72); color: #fff; }
.taller .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.taller .facts div { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 12px; }
.taller .facts b { display: block; color: #fff; }
.taller .facts span { color: rgba(255, 255, 255, .7); font-size: .9rem; }

/* ---------- Pagos en el pie ---------- */
.pay-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pay-row span { padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .08); font-size: .8rem; font-weight: 700; color: #fff; }

@media (max-width: 1100px) {
  .anatomia { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero-b-img { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 10; }
  .hero-b::after { display: none; }
  .hero-b .wrap { min-height: 0; }
  .hero-b .hero-copy { padding: 32px 0 20px; }
  .band-life > img { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 10; }
  .band-life::after { display: none; }
  .band-life .wrap { min-height: 0; padding-top: 32px; padding-bottom: 40px; }
  .empresas { grid-template-columns: 1fr; }
  .empresas .pic { min-height: 0; aspect-ratio: 4 / 3; }
  .taller { grid-template-columns: 1fr; }
  .stack { height: 380px; }
  .stack .layer { width: 230px; height: 230px; margin: -115px 0 0 -115px; border-radius: 30px; }
  .stack.in .layer { --gap: 44px; }
}
@media (max-width: 640px) {
  .cats-row { scroll-padding-inline: 16px; padding: 6px 16px 14px; margin: 0 -16px; gap: 14px; }
  .cat { width: 88px; }
  .cat .ring { width: 84px; height: 84px; }
  .stack { height: 330px; }
  .stack .layer { width: 190px; height: 190px; margin: -95px 0 0 -95px; }
  .stack.in .layer { --gap: 38px; }
  .taller .facts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .stack .layer { --gap: 56px; }
}

/* ---------- V2 · ajustes tras revisión visual ---------- */
/* La foto ocupa la derecha y se funde con el fondo: el texto nunca queda encima de los objetos */
.hero-b-img, .band-life > img { left: auto; right: 0; width: 70%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%); mask-image: linear-gradient(90deg, transparent 0%, #000 28%); }
.hero-b::after, .band-life::after { background: linear-gradient(90deg, rgba(239, 233, 223, .9) 0%, rgba(239, 233, 223, 0) 45%); }
.hero-b .hero-copy { max-width: 560px; }
.hero .h1 .line, .hero-b .h1 .line { display: block; }
.hero-b .h1 { font-size: clamp(2.5rem, 4.6vw, 4.1rem); }
.band-life h2 { max-width: 11ch; }
.band-life .lead { max-width: 34ch; }
.cat .ring .dtf { display: flex; align-items: center; justify-content: center; }
/* Anatomía más grande y con número en cada capa (mira siempre al frente) */
.stack { height: 520px; }
.stack .layer { width: 320px; height: 320px; margin: -160px 0 0 -160px; transform-style: preserve-3d; }
.stack .layer::after {
  content: attr(data-n); position: absolute; left: -16px; bottom: -16px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--tinta); color: #fff; font-weight: 800; font-size: .85rem; display: grid; place-items: center;
  transform: rotateZ(38deg) rotateX(-58deg); box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
}
.stack .l-lam::after, .stack .l-print::after { background: var(--naranja); color: var(--tinta); }
@media (max-width: 900px) {
  .hero-b-img, .band-life > img { width: 100%; -webkit-mask-image: none; mask-image: none; }
  .stack { height: 400px; }
  .stack .layer { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
}
@media (max-width: 640px) {
  .stack { height: 340px; }
  .stack .layer { width: 196px; height: 196px; margin: -98px 0 0 -98px; }
}

/* =========================================================
   V3 · Sitio con subpáginas: menú desplegable, migas de pan, portadas internas,
   tablas de precios, blog y mapa del sitio
   ========================================================= */

/* ---------- Menú principal con desplegables ---------- */
.header .nav { align-self: stretch; align-items: stretch; gap: 2px; }
.nav > a { align-self: center; }
.nav > a.is-active { background: rgba(18, 18, 20, .07); color: var(--tinta); }
.has-dd { display: flex; align-items: center; }
.has-dd.rel { position: relative; }
.dd-toggle { border: 0; background: transparent; font-weight: 600; font-size: .95rem; padding: 10px 14px; border-radius: 999px; color: var(--tinta-3); display: inline-flex; align-items: center; gap: 6px; }
.dd-toggle:hover, .has-dd.open > .dd-toggle, .has-dd:focus-within > .dd-toggle, .has-dd.is-active > .dd-toggle { background: rgba(18, 18, 20, .07); color: var(--tinta); }
.dd-toggle .chev { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.has-dd.open .chev, .has-dd:hover .chev { transform: rotate(180deg); }
.dd-panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 95; background: #fff; border-top: 1px solid var(--linea);
  box-shadow: 0 30px 60px -30px rgba(18, 18, 20, .35); opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s, transform .25s var(--ease), visibility .2s;
}
.has-dd:hover > .dd-panel, .has-dd.open > .dd-panel, .has-dd:focus-within > .dd-panel { opacity: 1; visibility: visible; transform: none; }
.has-dd.rel > .dd-panel { top: calc(100% - 10px); left: 0; right: auto; width: 300px; border: 1px solid var(--linea); border-radius: 18px; padding: 10px; }
.mega-grid { display: grid; grid-template-columns: 1.75fr 1fr .9fr; gap: 36px; padding-top: 28px; padding-bottom: 32px; }
.dd-title { font-family: var(--f-label); font-weight: 800; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-2); margin-bottom: 14px; }
.mega-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 8px; }
.mega-cats .cat { width: auto; }
.mega-cats .cat .ring { width: 74px; height: 74px; }
.dd-list { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 2px; }
.dd-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: .95rem; }
.dd-list a small { color: var(--gris); font-weight: 600; font-size: .8rem; white-space: nowrap; }
.dd-list a:hover { background: var(--papel); }
.mega-promo { border-radius: 22px; background: var(--naranja); padding: 22px; display: grid; align-content: end; gap: 6px; text-decoration: none; color: var(--tinta); min-height: 210px; position: relative; overflow: hidden; transition: transform .3s var(--spring); }
.mega-promo:hover { transform: rotate(-1.5deg) scale(1.02); }
.mega-promo img { position: absolute; right: -18px; top: 14px; width: 62%; transform: rotate(8deg); filter: var(--sh-sticker); }
.mega-promo small { font-family: var(--f-label); font-weight: 800; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; position: relative; }
.mega-promo strong { font-family: var(--f-display); font-size: 1.55rem; line-height: 1.05; letter-spacing: -.02em; position: relative; }
.mega-promo span { font-weight: 700; position: relative; }

/* ---------- Menú móvil con acordeones ---------- */
.mnav { overflow-y: auto; }
.mnav .mnav-links { display: grid; gap: 0; margin: 24px 0 24px; }
.mnav .mnav-links > a, .mnav .mnav-links summary {
  font-family: var(--f-display); font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; padding: 10px 0; text-decoration: none; color: #fff;
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.mnav .mnav-links summary::-webkit-details-marker { display: none; }
.mnav .mnav-links summary::after { content: "+"; color: var(--naranja); font-size: 1.6rem; }
.mnav .mnav-links details[open] > summary::after { content: "–"; }
.mnav .mnav-links .sub { display: grid; padding: 6px 0 14px 4px; }
.mnav .mnav-links .sub a { font-family: var(--f-text); font-size: 1.02rem; font-weight: 600; letter-spacing: 0; padding: 8px 0; color: rgba(255, 255, 255, .86); text-decoration: none; }
.mnav .mnav-links .sub a:hover { color: var(--naranja); }
.mnav .mnav-links .sub-t { font-family: var(--f-label); font-weight: 800; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); margin: 12px 0 2px; }

/* ---------- Portada de las páginas internas ---------- */
.phero { padding: 18px 0 64px; }
.phero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.phero-copy { display: grid; gap: 20px; justify-items: start; }
.phero h1 { font-size: clamp(2.3rem, 4.8vw, 4rem); }
.phero-media { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-2); aspect-ratio: 4 / 3; background: var(--papel-2); }
.phero-media > img { width: 100%; height: 100%; object-fit: cover; }
.phero-media .burst-badge { position: absolute; top: 14px; right: 14px; width: 30%; filter: var(--sh-sticker); }
.phero-media.relieve-card { background: var(--tinta); display: grid; place-items: center; }
.price-chip { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; background: #fff; border-radius: 16px; padding: 12px 16px; box-shadow: var(--sh-1); }
.price-chip strong { font-family: var(--f-display); font-size: 1.8rem; letter-spacing: -.02em; }
.price-chip span { color: var(--gris); font-size: .92rem; }
.sec.tight { padding: clamp(48px, 6vw, 80px) 0; }
.sec.alt { background: var(--papel-2); }
.ideal { display: flex; flex-wrap: wrap; gap: 10px; }
.ideal a, .ideal span { padding: 11px 16px; border-radius: 999px; background: #fff; box-shadow: var(--sh-1); font-weight: 700; text-decoration: none; font-size: .95rem; }
.ideal a::after { content: " →"; color: var(--naranja-600); }
.ideal a:hover { box-shadow: var(--sh-2); }
.ptable td:last-child, .ptable th:last-child { text-align: right; }
.ptable td:last-child { font-family: var(--f-display); font-weight: 800; font-size: 1.08rem; white-space: nowrap; }
.ptable .muted { font-weight: 400; }
.tables-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tables-2 h3 { margin-bottom: 10px; font-size: 1.1rem; }
.icon-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.icon-card { background: #fff; border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh-1); display: grid; gap: 10px; align-content: start; }
.icon-card svg { width: 30px; height: 30px; color: var(--naranja-600); }
.icon-card h3 { font-size: 1.12rem; }
.icon-card p { color: var(--gris); font-size: .93rem; }
.icon-card a { font-weight: 700; color: var(--naranja-600); text-decoration: none; }
.steps-v { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: pv; }
.steps-v li { background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 20px 22px 20px 74px; position: relative; }
.steps-v li::before { counter-increment: pv; content: counter(pv); position: absolute; left: 20px; top: 18px; width: 38px; height: 38px; border-radius: 50%; background: var(--naranja); display: grid; place-items: center; font-weight: 800; font-family: var(--f-display); }
.steps-v li:nth-child(2)::before { background: var(--azul); }
.steps-v li:nth-child(3)::before { background: var(--tinta); color: #fff; }
.steps-v li:nth-child(4)::before { background: #fff; box-shadow: inset 0 0 0 2px var(--tinta); }
.steps-v b { display: block; font-size: 1.08rem; margin-bottom: 4px; }
.steps-v span { color: var(--gris); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 4vw, 48px); align-items: start; }
.more-link { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.post-card { position: relative; background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
a.post-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.post-card .media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--papel-2); }
.post-card .media img { width: 100%; height: 100%; object-fit: cover; }
.post-card .body { padding: 18px 20px 22px; display: grid; gap: 8px; }
.post-card .body p { color: var(--gris); font-size: .93rem; }
.post-card .soon { position: absolute; top: 12px; left: 12px; background: var(--tinta); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 8px; }
.prose { max-width: 740px; font-size: 1.06rem; line-height: 1.7; }
.prose h2 { font-size: clamp(1.45rem, 2.6vw, 1.95rem); margin: 38px 0 12px; }
.prose h3 { font-size: 1.2rem; margin: 26px 0 8px; }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; color: var(--tinta-3); }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 6px; }
.prose .callout { background: var(--naranja-100); border-radius: 16px; padding: 16px 20px; margin: 22px 0; }
.prose a { color: var(--naranja-600); font-weight: 700; }
.post-meta { color: var(--gris); font-size: .9rem; }
.post-hero { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 8; margin: 22px 0 8px; box-shadow: var(--sh-1); }
.post-hero img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Mapa del sitio y contacto ---------- */
.sitemap { columns: 3 280px; column-gap: 28px; }
.sitemap section { break-inside: avoid; margin-bottom: 26px; background: #fff; border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--sh-1); }
.sitemap h2 { font-size: 1.15rem; margin-bottom: 8px; }
.sitemap ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sitemap a { text-decoration: none; font-weight: 700; }
.sitemap a:hover { color: var(--naranja-600); }
.sitemap small { display: block; color: var(--gris); font-size: .78rem; font-family: ui-monospace, Consolas, monospace; }
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ---------- Pie de página con más enlaces ---------- */
.footer-grid.f5 { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.15fr; }
.footer h4.mt { margin-top: 24px; }

@media (max-width: 1100px) {
  .footer-grid.f5 { grid-template-columns: repeat(3, 1fr); }
  .footer-grid.f5 > :first-child { grid-column: 1 / -1; }
  .icon-cards, .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .phero-grid, .two-col, .tables-2 { grid-template-columns: 1fr; }
  .phero { padding-bottom: 44px; }
}
@media (max-width: 640px) {
  .footer-grid.f5 { grid-template-columns: 1fr 1fr; }
  .icon-cards, .contact-grid, .blog-grid { grid-template-columns: 1fr; }
  .steps-v li { padding-left: 66px; }
}

/* ---------- Tarjetas completas como enlace ---------- */
.link-card { position: relative; }
.link-card h3 a { color: inherit; text-decoration: none; }
.link-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.uso .go { font-weight: 700; color: var(--naranja-600); font-size: .92rem; }
.mat h3 a { color: inherit; text-decoration: none; }
.mat h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.comp-table td a { color: inherit; font-weight: 700; }
.comp-table td a:hover { color: var(--naranja-600); }
.proto-bar code { background: rgba(255, 255, 255, .1); padding: 1px 6px; border-radius: 6px; color: #fff; font-size: .78rem; }

/* ---------- V3b · ajustes de subpáginas ---------- */
.sec.tight .sec-head, .two-col .sec-head { margin-bottom: 22px; gap: 12px; }
.sec.tight .sec-head h2, .two-col .sec-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.ideal-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ideal-inline .lbl { font-family: var(--f-label); font-weight: 800; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-2); margin-right: 4px; }
.ideal-inline a, .ideal-inline span.chip-s { padding: 7px 12px; border-radius: 999px; background: #fff; box-shadow: var(--sh-1); font-weight: 700; font-size: .84rem; text-decoration: none; }
.ideal-inline a:hover { color: var(--naranja-600); }
.ptable th.num, .ptable td.num { text-align: right; }
.ptable td.num { font-family: var(--f-display); font-weight: 800; font-size: 1.08rem; white-space: nowrap; }
.ptable td:last-child { font-family: inherit; font-weight: inherit; font-size: inherit; }
.ptable td.num:last-child { font-family: var(--f-display); font-weight: 800; font-size: 1.08rem; }
.ptable td:last-child, .ptable th:last-child { text-align: left; }
.ptable td.num:last-child, .ptable th.num:last-child { text-align: right; }
/* El panel del menú vive dentro del encabezado: que no herede el flex del .wrap del header */
.header .dd-panel .wrap.mega-grid { display: grid; height: auto; align-items: start; gap: 36px; }

/* ---------- Cotizador por pliegos (cantidad exacta opcional) ---------- */
.pl-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pl-row .pl-label { font-weight: 600; color: var(--gris); font-size: .92rem; }
.stepper input.is-derived { color: var(--naranja-600); }
.qty-exact > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; color: var(--naranja-600); }
.qty-exact > summary::-webkit-details-marker { display: none; }
.qty-exact > summary::before { content: "+"; width: 22px; height: 22px; border-radius: 50%; background: var(--naranja-100); display: grid; place-items: center; font-weight: 800; }
.qty-exact[open] > summary::before { content: "–"; }
.qty-exact .qty-row { margin-top: 12px; }
.cz-sug { background: rgba(243, 146, 0, .12); border: 1px solid rgba(243, 146, 0, .35); color: #ffe2b3; border-radius: 14px; padding: 12px 14px; font-size: .9rem; line-height: 1.45; }
.cz-sug:empty { display: none; }

/* ---------- Nota de forma libre en el cotizador ---------- */
.cz-forma { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; line-height: 1.45; color: rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .07); border-radius: 12px; padding: 10px 12px; margin: 2px 0 0; }
.cz-forma svg { width: 18px; height: 18px; flex: none; color: var(--naranja); margin-top: 1px; }
.cz-forma b { color: #fff; }
.cz-help { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; color: var(--gris); margin: 2px 0 0; }
.cz-help svg { width: 18px; height: 18px; flex: none; color: var(--naranja-600); margin-top: 1px; }
/* Orden de la portada: menos aire entre la cinta y "Cómo funciona", y entre las reseñas y los logos */
.ribbon + .sec { padding-top: clamp(64px, 7vw, 96px); }
#resenas + .clientes { padding-top: 8px; }

/* ---------- Líneas de negocio del grupo (logos monocolor + enlaces cruzados) ---------- */
.grupo { margin-top: 56px; background: var(--tinta-2); color: #fff; border-radius: var(--r-xl); padding: clamp(24px, 4vw, 44px); border: 1px solid rgba(255, 255, 255, .06); }
.grupo .eyebrow { color: var(--naranja); }
.grupo .muted { color: rgba(255, 255, 255, .7); }
.grupo h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin: 10px 0 0; }
.grupo-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 48px; margin-bottom: 28px; }
.grupo-head p { max-width: 44ch; margin: 0; }
.lineas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.linea {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 22px; border-radius: 24px;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .35s var(--spring), border-color .3s, background .3s;
}
.linea::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--c); transform: scaleX(.16); transform-origin: left; transition: transform .45s var(--ease);
}
.linea:hover, .linea:focus-within { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 55%, transparent); background: rgba(255, 255, 255, .06); }
.linea:hover::before, .linea:focus-within::before, .linea.is-here::before { transform: scaleX(1); }
.linea.is-here { border-color: color-mix(in srgb, var(--c) 40%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, transparent), rgba(255, 255, 255, .02) 70%); }
.linea-logo { height: 58px; display: flex; align-items: center; margin-bottom: 8px; }
.linea-logo img { width: auto; max-width: 190px; object-fit: contain; }
.linea-tag { font-family: var(--f-label); font-weight: 800; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.linea p { margin: 0; color: rgba(255, 255, 255, .72); font-size: .96rem; line-height: 1.5; flex: 1; }
.linea-logo img { height: var(--alto, 48px); }
.linea-go, .linea-aqui { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 700; white-space: nowrap; }
.linea-go { color: #fff; text-decoration: none; }
.linea-go::after { content: ""; position: absolute; inset: 0; border-radius: 24px; } /* toda la tarjeta es clicable */
.linea-go span[aria-hidden] { color: var(--c); display: inline-block; transition: transform .25s var(--ease); }
.linea:hover .linea-go span[aria-hidden] { transform: translateX(4px); }
.linea:hover .linea-go[target] span[aria-hidden] { transform: translate(3px, -3px); }
.linea-aqui { color: var(--c); font-size: .92rem; }
.linea-aqui i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 28%, transparent); }
/* Aviso "Muy pronto" en enlaces que aún no tienen destino */
a[data-soon]::before {
  content: attr(data-soon); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 3; background: #fff; color: var(--tinta);
  font-size: .8rem; font-weight: 700; padding: 6px 10px; border-radius: 10px; white-space: nowrap; box-shadow: var(--sh-2);
  opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .2s, transform .2s;
}
a[data-soon].tip::before { opacity: 1; transform: none; }
.linea-go[data-soon]::before { left: 24px; bottom: 58px; }
.f-marcas a { position: relative; color: rgba(255, 255, 255, .78); }
/* Versión corta (página de empresas) */
.grupo-mini { margin-top: 0; display: grid; gap: 12px; align-content: start; }
.grupo-mini h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 0; }
.grupo-mini p.muted { margin: 0 0 8px; }
.lineas-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lineas-2 .linea { padding: 22px 20px 18px; }
.lineas-2 .linea-logo { height: 50px; margin-bottom: 4px; }
@media (max-width: 1100px) { .lineas-2 { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .lineas { grid-template-columns: 1fr; gap: 12px; }
  .linea { gap: 8px; padding: 20px 20px 18px; }
  .linea-logo, .lineas-2 .linea-logo { height: 44px; margin-bottom: 2px; }
  .linea-logo img { height: calc(var(--alto, 48px) * .78); }
  .linea-go, .linea-aqui { margin-top: 2px; }
  .linea-go[data-soon]::before { left: 20px; bottom: 50px; }
}

/* ---------- Cierre: pila de stickers en stop motion ---------- */
.cta-box { padding-right: calc(min(40%, 460px) + clamp(24px, 4vw, 56px)); }
.cta-stack { position: absolute; right: 3%; top: 50%; width: min(40%, 460px); aspect-ratio: 1 / .96; transform: translateY(-50%); pointer-events: none; }
.cta-stack .s { position: absolute; filter: var(--sh-sticker); transform: rotate(var(--r, 0deg)); }
.cta-stack .s-holo { left: 0; top: 9%; width: 32%; --r: -9deg; }
.cta-stack .s-azul { right: 2%; top: 2%; width: 26%; --r: 11deg; }
.cta-stack .s-estrella { left: 38%; top: 0; width: 19%; --r: 16deg; }
.cta-stack .s-burst { right: -1%; bottom: 2%; width: 36%; --r: 9deg; }
.cta-stack .s-peel { left: 3%; bottom: 10%; width: 25%; --r: -12deg; }
.cta-stack .s-texto { left: 24%; bottom: 0; --r: -4deg; }
.cta-stack .s-logo { left: 6%; top: 31%; width: 86%; --r: -6deg; z-index: 2; transform-origin: 60% 50%; }
.cta-stack .s-logo img { width: 100%; height: auto; }
.cta-stack .burst polygon { fill: var(--tinta); }
.cta-stack .burst text { fill: #fff; }
.cta-stack .peel-card { background: #fff; }
.cta-stack .texto-stk { font-size: clamp(.8rem, 1.25vw, 1.05rem); }
.cta-stack .holo-disc span { font-size: clamp(.9rem, 1.7vw, 1.35rem); }
/* Stop motion: cada cuadro se sostiene (steps) en vez de interpolarse, como animación cuadro a cuadro a 12 fps */
.js .cta-box.in .cta-stack .s { animation: slap .34s steps(1, end) calc(.35s + var(--i) * .24s) both; }
.js .cta-box.in .cta-stack .s-logo { animation: slap-logo .5s steps(1, end) 1.95s both, boil 5s steps(1, end) 4s infinite; }
@keyframes slap {
  0% { opacity: 0; transform: rotate(calc(var(--r) + 16deg)) scale(1.4); }
  25% { opacity: 1; transform: rotate(calc(var(--r) + 9deg)) scale(1.18); }
  50% { opacity: 1; transform: rotate(calc(var(--r) - 5deg)) scale(.93); }
  75% { opacity: 1; transform: rotate(calc(var(--r) + 2deg)) scale(1.03); }
  100% { opacity: 1; transform: rotate(var(--r)) scale(1); }
}
@keyframes slap-logo {
  0% { opacity: 0; transform: translateY(-14%) rotate(calc(var(--r) - 14deg)) scale(1.5); }
  17% { opacity: 1; transform: translateY(-8%) rotate(calc(var(--r) - 9deg)) scale(1.3); }
  33% { opacity: 1; transform: translateY(-2%) rotate(calc(var(--r) - 3deg)) scale(1.1); }
  50% { opacity: 1; transform: translateY(1%) rotate(calc(var(--r) + 3deg)) scale(.94); }
  67% { opacity: 1; transform: rotate(calc(var(--r) - 1.5deg)) scale(1.03); }
  83% { opacity: 1; transform: rotate(calc(var(--r) + .5deg)) scale(.99); }
  100% { opacity: 1; transform: rotate(var(--r)) scale(1); }
}
/* Pequeño "hervor" cuadro a cuadro del logo cada pocos segundos: mantiene viva la pila sin distraer */
@keyframes boil {
  0%, 90% { transform: rotate(var(--r)); }
  92% { transform: rotate(calc(var(--r) + 2deg)) scale(1.02); }
  94% { transform: rotate(calc(var(--r) - 1.5deg)); }
  96% { transform: rotate(calc(var(--r) + .6deg)); }
  98%, 100% { transform: rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) {
  .js .cta-box.in .cta-stack .s, .js .cta-box.in .cta-stack .s-logo { animation: none; }
}
@media (max-width: 900px) {
  .cta-box { padding-right: clamp(24px, 6vw, 80px); }
  .cta-stack { position: relative; right: auto; top: auto; transform: none; width: min(100%, 340px); aspect-ratio: 1 / .8; justify-self: center; margin: -10px 0 4px; }
  .cta-stack .s-logo { left: 11%; top: 29%; width: 76%; }
  .cta-stack .texto-stk { font-size: .82rem; border-width: 4px; }
  .cta-stack .holo-disc, .cta-stack .azul-card { border-width: 5px; }
}
.cta-final:has(+ .clientes) { padding-bottom: clamp(40px, 5vw, 64px); }
.cta-final + .clientes { padding: 0 0 clamp(56px, 7vw, 88px); }

/* ---------- Cotizador: cómo llega el sticker (manos despegando el logo del pliego) ---------- */
.cotizador .cz { position: relative; z-index: 2; }
.cz-head { position: relative; margin-bottom: clamp(36px, 5vw, 56px); }
.cz-head .sec-head { margin-bottom: 0; }
/* La figura termina justo donde empieza el panel y se recorta SOLO por abajo: las manos parecen salir de detrás del cotizador */
.cz-peel { position: relative; z-index: 1; margin: 0; pointer-events: none; clip-path: inset(-120px -120px 0 -120px); }
/* El 7,8 % de abajo de la foto/video queda detrás del panel; se desvanece por si asoma a los lados (pantallas anchas) */
.cz-peel img, .cz-peel .peel-video { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 22px rgba(18, 18, 20, .16)); -webkit-mask-image: linear-gradient(to left, transparent 0, #000 6%), linear-gradient(to top, transparent 0, #000 7.8%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, transparent 0, #000 6%), linear-gradient(to top, transparent 0, #000 7.8%); mask-composite: intersect; }
.cz-peel .peel-video { object-fit: cover; aspect-ratio: 960 / 568; }
.cz-peel.vid-on img { display: none; }
.cz-peel figcaption {
  position: absolute; left: 0; top: -12px; z-index: 2; --r: -4deg; transform: rotate(var(--r));
  background: var(--tinta); color: #fff; font-family: var(--f-display); font-weight: 800; font-size: clamp(.8rem, 1.1vw, .95rem);
  padding: .5em 1.05em; border-radius: 999px; border: 4px solid #fff; white-space: nowrap; filter: var(--sh-sticker);
}
/* Entrada: la foto sube desde detrás del panel y la etiqueta se pega en stop motion */
.js .cz-peel.rv { opacity: 1; transform: none; }
.js .cz-peel img, .js .cz-peel .peel-video { transform: translateY(48%); transition: transform 1s var(--spring) .3s; }
.js .cz-peel.in img, .js .cz-peel.in .peel-video { transform: none; }
.js .cz-peel figcaption { opacity: 0; }
.js .cz-peel.in figcaption { animation: slap .34s steps(1, end) 1.15s both; }
@media (prefers-reduced-motion: reduce) {
  .js .cz-peel img, .js .cz-peel .peel-video { transform: none; }
  .js .cz-peel figcaption { opacity: 1; }
}
@media (min-width: 1281px) {
  .cz-head { --w: clamp(480px, 40vw, 720px); }
  .cz-head .sec-head { max-width: 640px; }
  /* A la derecha del título, pegada al borde de la pantalla (sin pasarse de medio ancho de foto en pantallas muy anchas) */
  .cz-peel { position: absolute; right: max(calc((100% - 100vw) / 2 - 12px), calc(var(--w) * -.5)); bottom: calc(-1 * (clamp(36px, 5vw, 56px) + var(--w) * .0463)); width: var(--w); }
}
@media (max-width: 1280px) {
  .cz-head { margin-bottom: 0; }
  .cz-head .sec-head { margin-bottom: 10px; }
  .cz-peel { width: min(94vw, 560px); margin: 0 calc((100% - 100vw) / 2 - 8px) calc(min(94vw, 560px) * -.0463) auto; display: flex; flex-direction: column; align-items: flex-start; }
  /* En pantallas angostas la etiqueta va encima de la foto para no tapar el sticker que se despega */
  .cz-peel figcaption { position: relative; left: auto; top: auto; order: -1; margin: 0 0 4px 6px; font-size: .8rem; }
}

/* ---------- "Cómo funciona" y cotizador más juntos (son el mismo paso del embudo) ---------- */
#proceso { padding-bottom: clamp(36px, 4vw, 56px); }
#proceso + .cotizador { padding-top: clamp(28px, 3.5vw, 48px); }

/* ---------- Cómo se entregan los stickers (banner y cotizador) ---------- */
.entrega {
  display: flex; gap: 10px; align-items: flex-start; max-width: 52ch; margin: 2px 0 0; padding: 10px 14px;
  font-size: .95rem; line-height: 1.45; color: var(--tinta-3); background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(18, 18, 20, .08); border-radius: 14px; box-shadow: 0 8px 20px -16px rgba(18, 18, 20, .5);
}
.entrega svg { width: 20px; height: 20px; flex: none; color: var(--naranja-600); margin-top: 1px; }
.entrega b { color: var(--tinta); }
.cz-notas { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; max-width: 640px; }
.cz-notas li { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; line-height: 1.45; color: var(--gris); }
.cz-notas svg { width: 19px; height: 19px; flex: none; color: var(--naranja-600); margin-top: 1px; }
.cz-notas b { color: var(--tinta); }
@media (max-width: 1280px) { .cz-notas { margin-bottom: 14px; } }