/* ==========================================================================
   AXKAN — sistema visual del sitio
   Tipografía: Inter Tight (titulares y UI) + Instrument Serif itálica (emoción)
   ========================================================================== */

@font-face { font-family: "Inter Tight"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../assets/fonts/inter-tight-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../assets/fonts/inter-tight-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: italic; font-display: swap; font-weight: 100 900;
  src: url(../assets/fonts/inter-tight-latin-italic.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-display: swap; font-weight: 400;
  src: url(../assets/fonts/instrument-serif-latin-normal.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-display: swap; font-weight: 400;
  src: url(../assets/fonts/instrument-serif-latin-italic.woff2) format("woff2"); }

:root {
  --rosa: #e72a88; --rosa-osc: #b8186a; --rosa-claro: #fde8f2;
  --verde: #8ab73b; --verde-osc: #4f7a17; --naranja: #f39223; --naranja-osc: #b8620a;
  --turquesa: #09adc2; --turquesa-osc: #067a89; --rojo: #e52421; --mdf: #d4a574;
  --tinta: #16120e; --tinta-2: #4b433a; --tinta-3: #8b8177;
  --papel: #fbf8f3; --papel-2: #f4eee5; --papel-3: #e9e1d5; --blanco: #ffffff;
  --noche: #0e0b09; --noche-2: #1c1713; --noche-3: #2a231d;
  --linea: rgba(22, 18, 14, .1); --linea-2: rgba(22, 18, 14, .18);
  --r-s: 12px; --r-m: 20px; --r-l: 28px; --r-xl: 40px;
  --sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --expo: cubic-bezier(.16, 1, .3, 1); --suave: cubic-bezier(.65, 0, .35, 1);
  --g: clamp(16px, 4.2vw, 56px); --max: 1360px; --nav-h: 64px;
  --sombra: 0 1px 2px rgba(22, 18, 14, .06), 0 8px 24px rgba(22, 18, 14, .08);
  --sombra-l: 0 2px 6px rgba(22, 18, 14, .06), 0 30px 70px rgba(22, 18, 14, .16);
  --arcoiris: linear-gradient(90deg, var(--rosa) 0 20%, var(--verde) 20% 40%, var(--naranja) 40% 60%, var(--turquesa) 60% 80%, var(--rojo) 80% 100%);
  --laser: linear-gradient(90deg, rgba(243, 146, 35, 0), var(--naranja) 30%, #ffd9a0 50%, var(--rosa) 70%, rgba(231, 42, 136, 0));
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--sans);
  font-size: 17px; line-height: 1.5; font-weight: 420; letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--rosa); color: #fff; }
:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contenedor { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--g); }
.solo-movil { display: none; }
@media (max-width: 820px) { .solo-movil { display: revert; } .oculto-movil { display: none !important; } }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-salida .35s var(--suave) both; }
::view-transition-new(root) { animation: vt-entrada .55s var(--expo) both; }
@keyframes vt-salida { to { opacity: 0; transform: translateY(-12px) scale(.99); } }
@keyframes vt-entrada { from { opacity: 0; transform: translateY(18px); } }

/* ---------- tipografía ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em; font-size: 12.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .16em; color: var(--tinta-2);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--laser); background-size: 200% 100%; }
.display {
  font-size: clamp(3.1rem, 10.5vw, 9.6rem); line-height: .9; letter-spacing: -.055em; font-weight: 720; margin: 0;
  text-wrap: balance;
}
.titulo {
  font-size: clamp(2.35rem, 6.6vw, 5.6rem); line-height: .95; letter-spacing: -.048em; font-weight: 700; margin: 0;
  text-wrap: balance;
}
.titulo-m { font-size: clamp(1.8rem, 4.2vw, 3.3rem); line-height: 1; letter-spacing: -.04em; font-weight: 680; margin: 0; text-wrap: balance; }
.lead { font-size: clamp(1.1rem, 1.9vw, 1.45rem); line-height: 1.38; color: var(--tinta-2); font-weight: 430; letter-spacing: -.012em; margin: 0; text-wrap: pretty; }
.chico { font-size: 14px; color: var(--tinta-3); }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.1em; line-height: .8; }
.rosa { color: var(--rosa); } .verde { color: var(--verde-osc); } .naranja { color: var(--naranja); } .turquesa { color: var(--turquesa); }
.split-linea { overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }

/* ---------- botones ---------- */
.btn {
  --bg: var(--tinta); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 50px; padding: 0 24px; border-radius: 999px; background: var(--bg); color: var(--fg);
  font-weight: 620; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; isolation: isolate; overflow: hidden;
  transition: transform .5s var(--expo), box-shadow .5s var(--expo), background-color .3s;
}
.btn::after { /* barrido de luz láser */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--laser); opacity: 0; transform: translateX(-60%);
  transition: transform .8s var(--expo), opacity .3s; mix-blend-mode: soft-light;
}
.btn:hover::after { opacity: .9; transform: translateX(60%); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--bg) 70%, transparent); }
.btn:active { transform: scale(.98); }
.btn--rosa { --bg: var(--rosa); }
.btn--blanco { --bg: #fff; --fg: var(--tinta); }
.btn--claro { --bg: transparent; --fg: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--linea-2); }
.btn--claro:hover { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.btn--oscuro-claro { --bg: rgba(255, 255, 255, .08); --fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); backdrop-filter: blur(10px); }
.btn--grande { min-height: 58px; padding: 0 30px; font-size: 17px; }
.btn--chico { min-height: 40px; padding: 0 18px; font-size: 14.5px; }
.btn .flecha { width: 18px; height: 18px; transition: transform .5s var(--expo); }
.btn:hover .flecha { transform: translateX(3px); }
.enlace { display: inline-flex; align-items: center; gap: .4em; font-weight: 620; color: var(--rosa); }
.enlace .flecha { width: 16px; height: 16px; transition: transform .5s var(--expo); }
.enlace:hover .flecha { transform: translateX(4px); }
.botones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- navegación ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; transition: transform .6s var(--expo); }
.nav--oculta { transform: translateY(-110%); }
.nav__barra {
  position: relative; height: var(--nav-h); display: flex; align-items: center; gap: 24px;
  padding-inline: var(--g); max-width: none; transition: background-color .4s, box-shadow .4s, color .4s;
}
.nav--solida .nav__barra, .nav--abierta .nav__barra {
  background: color-mix(in srgb, var(--papel) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 1px 0 var(--linea);
}
.nav__logo { display: flex; align-items: center; gap: 10px; flex: none; }
.nav__logo img.jag { width: 34px; height: 34px; }
.nav__logo img.wm { height: 19px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px;
  font-size: 15px; font-weight: 560; color: var(--tinta-2); transition: color .25s, background-color .25s;
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--tinta); background: rgba(22, 18, 14, .05); }
.nav__link .chev { width: 12px; height: 12px; transition: transform .4s var(--expo); }
.nav__link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav__acciones { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav__links + .nav__acciones { margin-left: 0; }
.hamburguesa { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; }
.hamburguesa span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .5s var(--expo), opacity .3s; }
.hamburguesa span + span { margin-top: 5px; }
.hamburguesa .hb { display: grid; }
.nav--abierta .hamburguesa span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav--abierta .hamburguesa span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
@media (max-width: 980px) { .nav__links { display: none; } }
@media (min-width: 981px) { .hamburguesa { display: none; } }

/* botón de sonido (ecualizador) */
.sonido { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; transition: background-color .25s; }
.sonido:hover { background: rgba(22, 18, 14, .05); }
.sonido .eq { display: flex; align-items: flex-end; gap: 2.5px; height: 16px; }
.sonido .eq i { display: block; width: 2.5px; height: 5px; border-radius: 2px; background: currentColor; transition: height .3s; }
.sonido[aria-pressed="true"] .eq i { animation: eq 1s var(--suave) infinite alternate; }
.sonido[aria-pressed="true"] .eq i:nth-child(2) { animation-delay: -.3s; } .sonido[aria-pressed="true"] .eq i:nth-child(3) { animation-delay: -.6s; }
.sonido[aria-pressed="true"] .eq i:nth-child(4) { animation-delay: -.15s; }
.sonido .eq i:nth-child(2) { height: 10px; } .sonido .eq i:nth-child(3) { height: 7px; } .sonido .eq i:nth-child(4) { height: 12px; }
.sonido[aria-pressed="false"] .eq { opacity: .55; }
@keyframes eq { 0% { height: 3px; } 100% { height: 16px; } }

/* mega menú (escritorio) */
.mega {
  position: absolute; left: 0; right: 0; top: var(--nav-h); z-index: -1;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(24px); backdrop-filter: saturate(1.6) blur(24px);
  clip-path: inset(0 0 100% 0); visibility: hidden; box-shadow: 0 30px 60px -30px rgba(22, 18, 14, .25);
}
.mega::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--arcoiris); }
.mega__dentro { display: grid; grid-template-columns: 1fr 280px; gap: 48px; padding: 28px var(--g) 40px; max-width: var(--max); margin: 0 auto; }
.mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mega__item { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 14px; padding: 10px; border-radius: var(--r-m); transition: background-color .25s; }
.mega__item:hover { background: #fff; box-shadow: var(--sombra); }
.mega__item .mini { width: 64px; height: 64px; border-radius: 14px; background: #fff; display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 1px var(--linea); }
.mega__item .mini img { width: 86%; height: 86%; object-fit: contain; transition: transform .6s var(--expo); }
.mega__item:hover .mini img { transform: scale(1.1) rotate(-3deg); }
.mega__item b { display: block; font-size: 15.5px; font-weight: 640; letter-spacing: -.015em; }
.mega__item small { display: block; font-size: 13px; color: var(--tinta-3); line-height: 1.3; margin-top: 2px; }
.mega__lado { border-left: 1px solid var(--linea); padding-left: 32px; display: flex; flex-direction: column; gap: 6px; }
.mega__lado h4 { margin: 8px 0 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); font-weight: 650; }
.mega__lado a { font-size: 17px; font-weight: 600; padding: 6px 0; display: flex; align-items: center; justify-content: space-between; letter-spacing: -.015em; }
.mega__lado a:hover { color: var(--rosa); }
.velo { position: fixed; inset: 0; z-index: 55; background: rgba(22, 18, 14, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.velo.activo { opacity: 1; visibility: visible; }

/* menú móvil */
.menu-movil {
  position: fixed; inset: 0; z-index: 58; background: var(--papel); padding: calc(var(--nav-h) + 12px) var(--g) calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; overflow-y: auto; clip-path: circle(0 at calc(100% - 38px) 32px); visibility: hidden;
}
.menu-movil__lista { list-style: none; margin: 0; padding: 0; }
.menu-movil__lista > li { border-bottom: 1px solid var(--linea); }
.menu-movil__lista > li > a, .menu-movil__lista > li > button {
  display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 16px 0;
  font-size: 34px; font-weight: 680; letter-spacing: -.045em; text-align: left;
}
.menu-movil__lista .chev { width: 20px; height: 20px; transition: transform .5s var(--expo); }
.menu-movil__lista button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.menu-movil__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; height: 0; overflow: hidden; }
.menu-movil__sub > :last-child { margin-bottom: 18px; }
.menu-movil__sub a { background: #fff; border-radius: var(--r-m); padding: 12px; box-shadow: inset 0 0 0 1px var(--linea); display: flex; flex-direction: column; gap: 8px; }
.menu-movil__sub a img { height: 74px; width: 100%; object-fit: contain; }
.menu-movil__sub a b { font-size: 15px; font-weight: 640; letter-spacing: -.015em; }
.menu-movil__sub a.todos { background: var(--tinta); color: #fff; justify-content: center; align-items: center; text-align: center; font-weight: 640; }
.menu-movil__sub a.todos:nth-child(odd) { grid-column: 1 / -1; }   /* con un número par de productos queda solo: toma el renglón entero */
.menu-movil__pie { margin-top: auto; padding-top: 28px; display: grid; gap: 10px; }
.menu-movil__pie .btn { width: 100%; }

/* barra inferior móvil (dos puertas) */
.barra-movil {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50; display: none; gap: 8px; padding: 6px;
  border-radius: 999px; background: color-mix(in srgb, var(--papel) 80%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 10px 40px -10px rgba(22, 18, 14, .35), inset 0 0 0 1px rgba(255, 255, 255, .6);
  transform: translateY(160%); transition: transform .7s var(--expo);
}
.barra-movil.visible { transform: none; }
.barra-movil .btn { flex: 1; min-height: 48px; }
@media (max-width: 820px) { .barra-movil { display: flex; } }

/* hoja inferior (comprar en línea) */
.hoja { position: fixed; inset: 0; z-index: 70; display: grid; align-items: end; visibility: hidden; }
.hoja__fondo { position: absolute; inset: 0; background: rgba(22, 18, 14, .4); opacity: 0; transition: opacity .4s; }
.hoja__panel {
  position: relative; background: var(--papel); border-radius: 28px 28px 0 0; padding: 12px var(--g) calc(28px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .6s var(--expo); max-width: 560px; width: 100%; margin: 0 auto;
}
.hoja.abierta { visibility: visible; } .hoja.abierta .hoja__fondo { opacity: 1; } .hoja.abierta .hoja__panel { transform: none; }
.hoja__asa { width: 40px; height: 5px; border-radius: 5px; background: var(--papel-3); margin: 0 auto 18px; }
.hoja h3 { margin: 0 0 4px; font-size: 26px; letter-spacing: -.035em; }
.hoja p { margin: 0 0 18px; color: var(--tinta-2); }
.tienda { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-m); background: #fff; box-shadow: inset 0 0 0 1px var(--linea); margin-bottom: 10px; transition: transform .4s var(--expo), box-shadow .3s; }
.tienda:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.tienda .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: -.02em; flex: none; }
.tienda b { display: block; font-size: 17px; letter-spacing: -.02em; } .tienda small { color: var(--tinta-3); }
.tienda .flecha { margin-left: auto; width: 18px; }

/* ---------- cortina de entrada ---------- */
.cortina { position: fixed; inset: 0; z-index: 90; background: var(--papel); display: grid; place-items: center; pointer-events: none; }
.cortina img { width: 88px; height: 88px; opacity: 0; transform: scale(.85); }
.cortina .raya { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--laser); transform: scaleX(0); transform-origin: left; filter: drop-shadow(0 0 6px var(--naranja)); }
.cortina .chispa { position: absolute; top: 50%; left: -10%; width: 10%; min-width: 70px; height: 8px; margin-top: -3px; border-radius: 8px; opacity: 0;
  background: radial-gradient(closest-side, #fff, rgba(255, 217, 160, .95) 45%, rgba(243, 146, 35, 0)); filter: drop-shadow(0 0 6px var(--naranja)); }   /* el láser recorre la línea mientras carga */
.sin-cortina .cortina { display: none; }
/* la del HTML del inicio entra sola con CSS (antes de que cargue el JS) y, si el JS nunca llega, se va a los 9 s */
.cortina--html { animation: cortina-salvavidas .6s ease 9s forwards; }
.cortina--html img { animation: cortina-in .5s var(--expo) .1s forwards; }
.cortina--html .raya { animation: cortina-raya .55s var(--expo) .25s forwards; }
.cortina--html .chispa { animation: cortina-chispa 1.3s var(--suave) .8s infinite; }
@keyframes cortina-in { to { opacity: 1; transform: none; } }
@keyframes cortina-raya { to { transform: scaleX(1); } }
@keyframes cortina-chispa { 0% { left: -10%; opacity: 1; } 100% { left: 100%; opacity: 1; } }
@keyframes cortina-salvavidas { to { opacity: 0; visibility: hidden; } }

/* ---------- escena 3D fija por secciones ---------- */
.escena { position: relative; }
.escena__pegajosa { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.escena__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; touch-action: pan-y; }
.escena__capa { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.escena__capa > * { pointer-events: auto; }
.escena__respaldo { position: absolute; inset: 0; z-index: 1; display: none; }
.sin-webgl .escena__respaldo { display: block; }
.sin-webgl .escena__canvas { display: none; }

/* HERO de inicio */
.inicio-escena { height: 560vh; background: var(--papel); }
.hero {
  position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto 1fr; align-items: center; justify-items: center;
  text-align: center; padding: calc(var(--nav-h) + 12px) var(--g) 32px;
}
.hero__arriba { align-self: end; display: grid; gap: 18px; justify-items: center; max-width: 1100px; }
.hero__abajo { align-self: start; display: grid; gap: 26px; justify-items: center; max-width: 660px; padding-top: 22px; }
.hero__hueco { height: 2vh; }
.hero .display { font-size: clamp(3.3rem, 9.4vw, 9.2rem); }
.hero__pista { display: none; position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); font-weight: 600; }
.hero__pista i { width: 1.5px; height: 34px; background: linear-gradient(var(--tinta-3), transparent); animation: pista 2s var(--suave) infinite; transform-origin: top; }
@keyframes pista { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 820px) {
  .hero { grid-template-rows: auto 1fr auto; padding-top: calc(var(--nav-h) + 18px); padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .hero__arriba { align-self: start; gap: 14px; }
  .hero__hueco { height: auto; }
  .hero__abajo { align-self: end; gap: 18px; padding-top: 0; }
  .hero .display { font-size: clamp(3rem, 15vw, 5.2rem); }
  .hero .lead { font-size: 16.5px; }
  .hero__pista { display: none; }
}

/* pasos (qué hacemos) sobre la escena */
.pasos { position: absolute; inset: 0; pointer-events: none; }
.paso {
  position: absolute; left: var(--g); top: 50%; width: min(440px, 38vw); transform: translateY(-50%);
  opacity: 0; visibility: hidden; will-change: opacity, transform;
}
.paso__num { font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--rosa); display: block; margin-bottom: 10px; }
.paso__titulo { font-size: clamp(2.2rem, 4.4vw, 4.2rem); line-height: .95; letter-spacing: -.05em; font-weight: 700; margin: 0 0 18px; text-wrap: balance; }
.paso__texto { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--tinta-2); margin: 0; line-height: 1.45; text-wrap: pretty; }
.paso--noche .paso__texto { color: rgba(255, 255, 255, .72); } .paso--noche .paso__titulo { color: #fff; }
.paso--noche .paso__num { color: var(--naranja); }
.paso--final { left: 50%; top: auto; bottom: 9vh; transform: translateX(-50%); width: min(760px, 92vw); text-align: center; }
@media (max-width: 820px) {
  .paso { left: var(--g); right: var(--g); width: auto; top: auto; bottom: calc(92px + env(safe-area-inset-bottom)); transform: none; }
  .paso__titulo { font-size: clamp(2rem, 9.4vw, 2.8rem); margin-bottom: 10px; }
  .paso__num { font-size: 20px; margin-bottom: 4px; }
  .paso__texto { font-size: 15.5px; }
  .paso--final { left: var(--g); right: var(--g); width: auto; transform: none; bottom: calc(110px + env(safe-area-inset-bottom)); }
}
.fotos-flotantes { position: absolute; inset: 0; pointer-events: none; }
.foto-flotante {
  position: absolute; width: clamp(120px, 15vw, 230px); aspect-ratio: 4/5; border-radius: 18px; overflow: hidden; background: var(--papel-3);
  box-shadow: var(--sombra-l); opacity: 0; will-change: transform, opacity;
}
.foto-flotante img { width: 100%; height: 100%; object-fit: cover; }
.foto-flotante figcaption { position: absolute; left: 10px; bottom: 10px; right: 10px; color: #fff; font-size: 12px; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.etiquetas-3d { position: absolute; inset: 0; pointer-events: none; }
.etiquetas-3d svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.etiquetas-3d svg line { stroke: var(--tinta); stroke-width: 1; }
.etiquetas-3d svg circle { fill: var(--rosa); }
.etiqueta-3d {
  position: absolute; left: 0; top: 0; transform: translate(-9999px, 0); white-space: nowrap; font-size: 14px; font-weight: 640;
  letter-spacing: -.01em; padding: 7px 12px; border-radius: 999px; background: #fff; box-shadow: var(--sombra); opacity: 0;
}
.etiqueta-3d small { display: block; font-weight: 450; color: var(--tinta-3); font-size: 12px; }
@media (max-width: 820px) { .etiqueta-3d { font-size: 12.5px; padding: 6px 10px; } .etiqueta-3d small { display: none; } }

/* ---------- secciones generales ---------- */
.seccion { position: relative; padding: clamp(88px, 13vw, 180px) 0; z-index: 3; background: var(--papel); }
.seccion--blanca { background: var(--blanco); }
.seccion--noche { background: var(--noche); color: #fff; }
.seccion--noche .lead { color: rgba(255, 255, 255, .7); }
.seccion--noche .eyebrow { color: rgba(255, 255, 255, .7); }
.cabeza { display: grid; gap: 18px; max-width: 900px; margin-bottom: clamp(40px, 6vw, 80px); }
.cabeza--centro { margin-inline: auto; text-align: center; justify-items: center; }
.cabeza--fila { max-width: none; grid-template-columns: 1fr auto; align-items: end; }
@media (max-width: 820px) { .cabeza--fila { grid-template-columns: 1fr; } }
[data-revela] { opacity: 0; transform: translateY(28px); }
.sin-js [data-revela], .movimiento-reducido [data-revela] { opacity: 1; transform: none; }
.raya-laser { height: 2px; background: var(--laser); transform-origin: left; filter: drop-shadow(0 0 5px rgba(243, 146, 35, .7)); }

/* ---------- México: mosaico que se abre ---------- */
.mexico { position: relative; z-index: 3; background: var(--papel); }
.mosaico-escena { height: 300vh; position: relative; }
.mosaico-pegajoso { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.mosaico {
  display: grid; grid-template-columns: repeat(5, 30vw); grid-template-rows: repeat(3, 34vh); gap: 1.6vw; will-change: transform;
}
.mosaico figure { margin: 0; position: relative; border-radius: 22px; overflow: hidden; background: var(--papel-3); }
.mosaico figure img { width: 100%; height: 100%; object-fit: cover; }
.mosaico figure figcaption { position: absolute; left: 14px; bottom: 12px; color: #fff; font-size: 13px; font-weight: 600; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.mosaico .centro figcaption { opacity: 0; }
.mosaico__titulo {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #fff; padding: var(--g); pointer-events: none; gap: 20px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .38), rgba(0, 0, 0, .05) 70%); opacity: 0;
}
.mosaico__titulo .titulo { color: #fff; text-shadow: 0 4px 40px rgba(0, 0, 0, .35); }
.mosaico__titulo .lead { color: rgba(255, 255, 255, .88); max-width: 620px; margin-inline: auto; }
.mosaico__credito { position: absolute; right: 12px; bottom: 10px; font-size: 11px; color: rgba(255, 255, 255, .7); opacity: 0; }
@media (max-width: 820px) {
  .mosaico { grid-template-columns: repeat(3, 44vw); grid-template-rows: repeat(3, 30svh); gap: 3vw; }
}

/* regiones */
.regiones { padding: clamp(80px, 10vw, 140px) 0 clamp(88px, 12vw, 160px); position: relative; z-index: 3; background: var(--papel); overflow: hidden; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  height: 40px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 580; white-space: nowrap; flex: none;
  background: #fff; box-shadow: inset 0 0 0 1px var(--linea); transition: background-color .3s, color .3s, box-shadow .3s;
}
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--rosa)); }
.chip:hover { box-shadow: inset 0 0 0 1px var(--linea-2); }
.chip[aria-pressed="true"] { background: var(--tinta); color: #fff; box-shadow: none; }
.carril {
  display: flex; gap: clamp(12px, 1.6vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 8px var(--g) 28px; scroll-padding-inline: var(--g); scrollbar-width: none; cursor: grab;
}
.carril::-webkit-scrollbar { display: none; }
.carril.arrastrando { cursor: grabbing; scroll-snap-type: none; }
.carril.arrastrando * { pointer-events: none; }
.region {
  flex: none; width: min(78vw, 420px); aspect-ratio: 3/4; border-radius: var(--r-l); overflow: hidden; position: relative; scroll-snap-align: start;
  background: var(--noche-2); color: #fff; isolation: isolate; transition: transform .6s var(--expo);
}
.region img.fondo { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--expo); }
.region:hover img.fondo { transform: scale(1.05); }
.region::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .0) 35%, rgba(0, 0, 0, .72)); }
.region__txt { position: absolute; left: 22px; right: 22px; bottom: 22px; display: grid; gap: 6px; }
.region__txt h3 { margin: 0; font-size: 34px; letter-spacing: -.045em; line-height: 1; font-weight: 700; }
.region__txt p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .8); line-height: 1.4; }
.region__txt .temas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.region__txt .temas span { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.region__pieza { position: absolute; top: 18px; right: 14px; width: 42%; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .45)); transform: rotate(6deg); transition: transform .8s var(--expo); }
.region:hover .region__pieza { transform: rotate(0deg) scale(1.06) translateY(-4px); }
.region__credito { position: absolute; top: 14px; left: 16px; font-size: 10.5px; color: rgba(255, 255, 255, .6); max-width: 50%; line-height: 1.2; }
.region__num { position: absolute; top: 16px; left: 18px; font-family: var(--serif); font-style: italic; font-size: 20px; }
.controles-carril { display: flex; align-items: center; gap: 14px; }
.progreso-carril { flex: 1; height: 2px; background: var(--linea); border-radius: 2px; overflow: hidden; max-width: 260px; }
.progreso-carril i { display: block; height: 100%; width: 100%; background: var(--tinta); transform-origin: left; transform: scaleX(.1); }
.flecha-btn { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--linea-2); transition: background-color .3s, transform .4s var(--expo); }
.flecha-btn:hover { background: var(--tinta); color: #fff; }
.flecha-btn:disabled { opacity: .35; pointer-events: none; }
.flecha-btn svg { width: 18px; height: 18px; }

/* ---------- diferenciadores (carrusel) ---------- */
.difs { background: var(--noche); color: #fff; position: relative; z-index: 3; padding: clamp(88px, 12vw, 170px) 0; overflow: hidden; }
.difs .lead { color: rgba(255, 255, 255, .68); }
.difs .eyebrow { color: rgba(255, 255, 255, .7); }
.difs .flecha-btn { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.difs .flecha-btn:hover { background: #fff; color: var(--tinta); }
.difs .progreso-carril { background: rgba(255, 255, 255, .15); } .difs .progreso-carril i { background: #fff; }
.dif {
  flex: none; width: min(84vw, 880px); aspect-ratio: 16/10; border-radius: var(--r-xl); overflow: hidden; position: relative; scroll-snap-align: center;
  isolation: isolate; background: var(--noche-2); transform-origin: center; transition: transform .8s var(--expo), opacity .8s var(--expo);
}
.carril--difs { scroll-snap-type: x mandatory; padding-inline: max(var(--g), calc((100vw - min(84vw, 880px)) / 2)); scroll-padding-inline: 0; }
.dif img { position: absolute; inset: 0; width: 118%; height: 100%; max-width: none; object-fit: cover; z-index: -2; will-change: transform; }
.dif::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 6, 5, .82) 0%, rgba(8, 6, 5, .45) 42%, rgba(8, 6, 5, 0) 70%); }
.dif__txt { position: absolute; left: clamp(22px, 4vw, 56px); bottom: clamp(22px, 4vw, 56px); max-width: 420px; display: grid; gap: 14px; }
.dif__num { font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--c, var(--rosa)); }
.dif__txt h3 { margin: 0; font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: .98; letter-spacing: -.045em; font-weight: 700; text-wrap: balance; }
.dif__txt p { margin: 0; color: rgba(255, 255, 255, .78); font-size: clamp(15px, 1.3vw, 17.5px); line-height: 1.45; text-wrap: pretty; }
.dif.inactivo { transform: scale(.92); opacity: .45; }
@media (max-width: 820px) {
  .dif { width: 86vw; aspect-ratio: 4/5.4; border-radius: var(--r-l); }
  .carril--difs { padding-inline: 7vw; }
  .dif::after { background: linear-gradient(180deg, rgba(8, 6, 5, 0) 30%, rgba(8, 6, 5, .85) 78%); }
  .dif img { width: 100%; height: 118%; }
}
.puntos { display: flex; gap: 8px; }
.puntos button { width: 8px; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .3); transition: width .5s var(--expo), background-color .3s; }
.puntos button[aria-current="true"] { width: 28px; background: #fff; }

/* ---------- productos ---------- */
.productos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 20px); }
@media (max-width: 1100px) { .productos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .productos-grid { grid-template-columns: repeat(2, 1fr); } }
.tarjeta {
  position: relative; display: flex; flex-direction: column; border-radius: var(--r-l); background: #fff; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--linea); transition: transform .7s var(--expo), box-shadow .5s; isolation: isolate; transform-style: preserve-3d;
}
.tarjeta:hover { box-shadow: var(--sombra-l); }
.tarjeta__img { aspect-ratio: 1/1; display: grid; place-items: center; position: relative; overflow: hidden; }
.tarjeta__img::before { content: ""; position: absolute; inset: 18% 18%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c, var(--rosa)) 26%, transparent), transparent 70%); filter: blur(20px); opacity: .0; transition: opacity .6s; }
.tarjeta:hover .tarjeta__img::before { opacity: 1; }
.tarjeta__img img { width: 78%; height: 78%; object-fit: contain; transition: transform .9s var(--expo); filter: drop-shadow(0 18px 22px rgba(22, 18, 14, .18)); position: relative; }
.tarjeta__img img.foto { width: 100%; height: 100%; object-fit: cover; filter: none; }
.tarjeta:hover .tarjeta__img img { transform: translateY(-6px) scale(1.05) rotate(-2deg); }
.tarjeta__txt { padding: 4px 22px 22px; display: grid; gap: 4px; }
.tarjeta__txt .fam { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--c, var(--rosa)); font-weight: 700; }
.tarjeta__txt h3 { margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.6rem); letter-spacing: -.035em; line-height: 1.05; font-weight: 680; }
.tarjeta__txt p { margin: 2px 0 10px; font-size: 14.5px; color: var(--tinta-2); line-height: 1.4; }
.tarjeta__txt .enlace { font-size: 14.5px; }
.tarjeta__brillo { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .45), transparent 40%); opacity: 0; transition: opacity .4s; mix-blend-mode: soft-light; }
.tarjeta:hover .tarjeta__brillo { opacity: 1; }
@media (max-width: 820px) { .tarjeta__txt { padding: 0 14px 16px; } .tarjeta__txt p { display: none; } .tarjeta { border-radius: var(--r-m); } }
.ver-todos { margin-top: clamp(28px, 4vw, 48px); display: flex; justify-content: center; }

/* ---------- dos puertas ---------- */
.puertas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 22px); }
@media (max-width: 820px) { .puertas { grid-template-columns: 1fr; } .puerta::after { background: linear-gradient(180deg, rgba(10, 8, 6, .18) 0%, rgba(10, 8, 6, .62) 38%, rgba(10, 8, 6, .9) 100%); } }
.puerta {
  position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: clamp(460px, 48vw, 640px); padding: clamp(26px, 3.4vw, 48px);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; color: #fff; isolation: isolate;
}
.puerta img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--expo); }
.puerta:hover img.fondo { transform: scale(1.04); }
.puerta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 8, 6, 0) 25%, rgba(10, 8, 6, .82)); }
.puerta .eyebrow { color: rgba(255, 255, 255, .8); }
.puerta h3 { margin: 0; font-size: clamp(2.2rem, 4.4vw, 4rem); letter-spacing: -.05em; line-height: .95; font-weight: 700; text-wrap: balance; }
.puerta p { margin: 0; color: rgba(255, 255, 255, .82); max-width: 460px; font-size: 16.5px; }
.puerta ul { list-style: none; padding: 0; margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.puerta li { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ---------- reseñas (pendiente) ---------- */
.pendiente-marca { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 650; padding: 6px 12px; border-radius: 999px; background: #fff6d6; color: #7a5a00; box-shadow: inset 0 0 0 1px #f1dc93; }
.resenas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px) { .resenas { grid-template-columns: 1fr; } }
.resena { border-radius: var(--r-l); background: #fff; padding: 26px; box-shadow: inset 0 0 0 1px var(--linea); display: grid; gap: 14px; }
.estrellas { display: flex; gap: 4px; color: var(--naranja); }
.estrellas svg { width: 18px; height: 18px; }
.hueso { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--papel-2), var(--papel-3), var(--papel-2)); background-size: 200% 100%; animation: hueso 2.2s linear infinite; }
@keyframes hueso { to { background-position: -200% 0; } }
.resena .quien { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.resena .quien i { width: 36px; height: 36px; border-radius: 50%; background: var(--papel-2); }

/* ---------- pie ---------- */
.pie { position: relative; z-index: 3; background: var(--noche); color: rgba(255, 255, 255, .78); padding: clamp(72px, 9vw, 120px) 0 calc(40px + env(safe-area-inset-bottom)); overflow: hidden; }
.pie::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--arcoiris); }
.pie__frase { font-size: clamp(2.8rem, 9vw, 8.4rem); line-height: .9; letter-spacing: -.055em; font-weight: 700; color: #fff; margin: 0 0 clamp(40px, 6vw, 80px); text-wrap: balance; }
.pie__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, .12); }
@media (max-width: 820px) { .pie__grid { grid-template-columns: 1fr 1fr; } .pie__grid > :first-child { grid-column: 1 / -1; } }
.pie h4 { color: #fff; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; font-weight: 650; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pie a:hover { color: #fff; }
.pie__marca { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pie__marca img.jag { width: 46px; height: 46px; }
.pie__marca img.wm { height: 24px; width: auto; }
.pie__legal { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 13px; color: rgba(255, 255, 255, .45); }
@media (max-width: 820px) { .pie { padding-bottom: calc(110px + env(safe-area-inset-bottom)); } }

/* ==========================================================================
   Página de producto
   ========================================================================== */
.subnav {
  position: sticky; top: 0; z-index: 40; height: 56px; display: flex; align-items: center; gap: 16px; padding-inline: var(--g);
  background: color-mix(in srgb, var(--papel) 80%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 1px 0 var(--linea); transition: top .6s var(--expo);
  margin-top: var(--nav-h); margin-bottom: calc(-56px - var(--nav-h));
}
body:not(.nav-oculta) .subnav { top: var(--nav-h); }
.subnav b { font-size: 20px; letter-spacing: -.035em; font-weight: 700; margin-right: auto; }
.subnav nav { display: flex; gap: 20px; font-size: 14px; color: var(--tinta-2); font-weight: 560; }
.subnav nav a:hover { color: var(--tinta); }
@media (max-width: 820px) { .subnav nav { display: none; } .subnav .btn--claro { display: none; } }
.prod-escena { height: 420vh; }
.prod-escena .escena__pegajosa { background: radial-gradient(120% 90% at 50% 58%, #fff 0%, var(--papel) 48%, color-mix(in srgb, var(--c) 16%, var(--papel)) 100%); }
.prod-fantasma {
  position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); font-size: clamp(8rem, 30vw, 30rem); font-weight: 800; letter-spacing: -.07em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c) 30%, transparent); white-space: nowrap; z-index: 0; line-height: .8; pointer-events: none; user-select: none;
}
.prod-hero { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; text-align: center; padding: calc(var(--nav-h) + 56px + 3vh) var(--g) 4vh; z-index: 3; pointer-events: none; }
.prod-hero > * { pointer-events: auto; }
.prod-hero__top { display: grid; gap: 10px; justify-items: center; }
.prod-hero__top .fam { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--c); }
.prod-hero__top .display { font-size: clamp(3.4rem, 11vw, 9rem); }
.prod-hero__top .lead { max-width: 640px; }
.prod-hero__bottom { display: grid; gap: 14px; justify-items: center; }
.prod-hero__bottom .chico b { color: var(--tinta); }
@media (max-width: 820px) { .prod-hero { padding-top: calc(var(--nav-h) + 56px + 16px); padding-bottom: calc(100px + env(safe-area-inset-bottom)); } }
.callouts { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.callout {
  position: absolute; left: var(--g); bottom: 12vh; max-width: 420px; opacity: 0; visibility: hidden;
}
.callout .grados { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--c); display: block; margin-bottom: 6px; }
.callout h3 { margin: 0 0 8px; font-size: clamp(1.9rem, 3.4vw, 3.2rem); letter-spacing: -.05em; line-height: .98; font-weight: 700; }
.callout p { margin: 0; color: var(--tinta-2); font-size: 16.5px; }
@media (max-width: 820px) { .callout { left: var(--g); right: var(--g); bottom: calc(96px + env(safe-area-inset-bottom)); max-width: none; } .callout h3 { font-size: 1.9rem; } .callout p { font-size: 15px; } }
.anillo-360 { position: absolute; right: var(--g); bottom: 12vh; z-index: 3; width: 74px; height: 74px; opacity: 0; }
.anillo-360 svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo-360 circle { fill: none; stroke-width: 3; }
.anillo-360 .fondo { stroke: var(--linea); } .anillo-360 .frente { stroke: var(--c); stroke-linecap: round; }
.anillo-360 span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
@media (max-width: 820px) { .anillo-360 { top: calc(var(--nav-h) + 72px); bottom: auto; width: 56px; height: 56px; } .anillo-360 span { font-size: 12px; } }
.pista-arrastre { position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); z-index: 3; font-size: 13px; font-weight: 600; color: var(--tinta-3); display: flex; gap: 8px; align-items: center; opacity: 0; }
.pista-arrastre svg { width: 20px; height: 20px; }

.zoom-foto { position: relative; z-index: 3; height: 220vh; background: var(--papel); }
.zoom-foto__pegajoso { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.zoom-foto__marco { position: relative; width: 100%; height: 100%; overflow: hidden; will-change: clip-path; clip-path: inset(18% 22% round 32px); }
.zoom-foto__marco img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); will-change: transform; }
.zoom-foto__txt { position: absolute; left: var(--g); bottom: 8vh; right: var(--g); color: #fff; z-index: 2; max-width: 760px; opacity: 0; }
.zoom-foto__txt .titulo { color: #fff; text-shadow: 0 6px 40px rgba(0, 0, 0, .35); }
.zoom-foto__marco::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55)); }
@media (max-width: 820px) { .zoom-foto__marco { clip-path: inset(24% 10% round 24px); } .zoom-foto__txt { bottom: calc(100px + env(safe-area-inset-bottom)); } }

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.2vw, 18px); }
.bento__c { border-radius: var(--r-l); background: #fff; box-shadow: inset 0 0 0 1px var(--linea); padding: clamp(22px, 2.6vw, 36px); min-height: 260px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; isolation: isolate; }
.bento__c.a2 { grid-column: span 2; } .bento__c.a3 { grid-column: span 3; } .bento__c.a4 { grid-column: span 4; }
.bento__c h3 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -.04em; line-height: 1; font-weight: 700; text-wrap: balance; }
.bento__c p { margin: 0; color: var(--tinta-2); font-size: 15.5px; line-height: 1.4; }
.bento__c .grande { font-size: clamp(3.4rem, 7vw, 6rem); font-weight: 760; letter-spacing: -.06em; line-height: .85; color: var(--c); }
.bento__c.foto { color: #fff; min-height: 380px; }
.bento__c.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.bento__c.foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .7)); }
.bento__c.foto p { color: rgba(255, 255, 255, .85); }
.bento__c.tinta { background: var(--tinta); color: #fff; } .bento__c.tinta p { color: rgba(255, 255, 255, .7); }
.bento__c.color { background: var(--c); color: #fff; } .bento__c.color p { color: rgba(255, 255, 255, .85); } .bento__c.color .grande { color: #fff; }
.bento__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); margin-bottom: auto; }
.bento__ico svg { width: 24px; height: 24px; }
@media (max-width: 820px) { .bento { grid-template-columns: 1fr 1fr; } .bento__c.a2, .bento__c.a3, .bento__c.a4 { grid-column: span 2; } .bento__c.m1 { grid-column: span 1; min-height: 200px; } .bento__c { min-height: 220px; } }

.disenos-fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.diseno { border-radius: var(--r-l); background: #fff; box-shadow: inset 0 0 0 1px var(--linea); padding: 22px; display: grid; gap: 12px; }
.diseno img { aspect-ratio: 1/1; width: 100%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(22, 18, 14, .16)); transition: transform .8s var(--expo); }
.diseno:hover img { transform: translateY(-6px) rotate(-2deg); }
.diseno b { font-size: 17px; letter-spacing: -.02em; } .diseno small { color: var(--tinta-3); }
.diseno--tuyo { background: var(--tinta); color: #fff; place-content: center; text-align: center; min-height: 280px; }
.diseno--tuyo small { color: rgba(255, 255, 255, .7); }

.specs { border-top: 1px solid var(--linea-2); }
.specs__fila { display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--linea); }
.specs__fila dt { font-weight: 650; letter-spacing: -.015em; }
.specs__fila dd { margin: 0; color: var(--tinta-2); }
@media (max-width: 820px) { .specs__fila { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; } }

.comprar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .comprar-grid { grid-template-columns: 1fr; } }
.comprar-c { border-radius: var(--r-xl); padding: clamp(26px, 3.4vw, 48px); background: #fff; box-shadow: inset 0 0 0 1px var(--linea); display: grid; gap: 16px; align-content: start; }
.comprar-c.oscura { background: var(--tinta); color: #fff; box-shadow: none; }
.comprar-c h3 { margin: 0; font-size: clamp(1.9rem, 3.2vw, 2.8rem); letter-spacing: -.045em; line-height: 1; font-weight: 700; }
.comprar-c p { margin: 0; color: var(--tinta-2); } .comprar-c.oscura p { color: rgba(255, 255, 255, .72); }
.comprar-c ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.comprar-c li { display: flex; gap: 10px; align-items: baseline; }
.comprar-c li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--rosa)); flex: none; transform: translateY(-2px); }

.prod-foto-hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 58%, #fff 0%, var(--papel) 50%, color-mix(in srgb, var(--c) 16%, var(--papel)) 100%); }
.prod-foto-hero__img { position: absolute; left: 50%; top: 61%; width: min(440px, 70vw, 40svh); transform: translate(-50%, -50%); z-index: 1; }
@media (max-width: 820px) { .prod-foto-hero__img { top: 55%; width: min(70vw, 34svh); } }
.prod-foto-hero__img img { width: 100%; border-radius: 28px; box-shadow: var(--sombra-l); }
.prod-foto-hero__img img.recorte { box-shadow: none; border-radius: 0; filter: drop-shadow(0 30px 40px rgba(22, 18, 14, .22)); }

/* ==========================================================================
   Todos los productos
   ========================================================================== */
.cabecera-pagina { padding: calc(var(--nav-h) + clamp(56px, 9vw, 120px)) 0 clamp(40px, 5vw, 64px); }
.filtros { position: sticky; top: calc(var(--nav-h) + 8px); z-index: 20; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 8px 0; margin-bottom: 20px; }
body.nav-oculta .filtros { top: 8px; }
.filtros::-webkit-scrollbar { display: none; }
.tabla-compara { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla-compara th, .tabla-compara td { text-align: left; padding: 16px 14px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla-compara th { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); font-weight: 650; }
.tabla-compara td:first-child { font-weight: 650; }
.tabla-scroll { overflow-x: auto; border-radius: var(--r-l); background: #fff; box-shadow: inset 0 0 0 1px var(--linea); }
.tabla-scroll table { min-width: 760px; }

/* ==========================================================================
   Mayoreo
   ========================================================================== */
.may-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; isolation: isolate; padding: calc(var(--nav-h) + 40px) 0 clamp(48px, 7vw, 96px); }
.may-hero img.fondo { position: absolute; inset: -8% 0 0; width: 100%; height: 116%; object-fit: cover; z-index: -2; will-change: transform; }
.may-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 8, 6, .35) 0%, rgba(10, 8, 6, .3) 35%, rgba(10, 8, 6, .9) 100%), linear-gradient(90deg, rgba(10, 8, 6, .55), rgba(10, 8, 6, 0) 65%); }
.may-hero .display { color: #fff; font-size: clamp(3rem, 8.4vw, 8rem); }
.may-hero .lead { color: rgba(255, 255, 255, .85); max-width: 620px; }
.may-hero .eyebrow { color: rgba(255, 255, 255, .8); }
.linea-tiempo { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 40px; }
.linea-tiempo::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--linea); }
.linea-tiempo .avance { position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--laser); transform-origin: left; transform: scaleX(0); filter: drop-shadow(0 0 6px rgba(243, 146, 35, .8)); }
.etapa { position: relative; display: grid; gap: 10px; }
.etapa::before { content: ""; position: absolute; top: -40px; left: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 2px var(--linea-2); transition: box-shadow .4s, background-color .4s; }
.etapa.activa::before { background: var(--rosa); box-shadow: 0 0 0 6px var(--rosa-claro); }
.etapa .n { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--rosa); }
.etapa h3 { margin: 0; font-size: 24px; letter-spacing: -.035em; line-height: 1.05; }
.etapa p { margin: 0; color: var(--tinta-2); font-size: 15.5px; }
@media (max-width: 820px) {
  .linea-tiempo { grid-template-columns: 1fr; padding-top: 0; padding-left: 44px; gap: 34px; }
  .linea-tiempo::before, .linea-tiempo .avance { left: 11px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .linea-tiempo .avance { transform-origin: top; transform: scaleY(0); }
  .etapa::before { top: 2px; left: -44px; }
}
.minimos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 980px) { .minimos { grid-template-columns: repeat(2, 1fr); } }
.minimo { border-radius: var(--r-l); background: #fff; box-shadow: inset 0 0 0 1px var(--linea); padding: 22px; display: grid; gap: 4px; }
.minimo .num { font-size: clamp(2.6rem, 4.4vw, 3.8rem); font-weight: 760; letter-spacing: -.06em; line-height: .9; color: var(--c, var(--rosa)); }
.minimo b { font-size: 17px; letter-spacing: -.02em; } .minimo small { color: var(--tinta-3); }
.barras { display: grid; gap: 14px; }
.barra { display: grid; grid-template-columns: 150px 1fr 110px; gap: 16px; align-items: center; }
.barra .riel { height: 14px; border-radius: 14px; background: var(--papel-2); overflow: hidden; }
.barra .riel i { display: block; height: 100%; border-radius: 14px; background: var(--tinta); transform-origin: left; transform: scaleX(0); }
.barra b { font-weight: 650; } .barra span { text-align: right; font-weight: 650; }
@media (max-width: 820px) { .barra { grid-template-columns: 1fr 90px; } .barra .riel { grid-column: 1 / -1; grid-row: 2; } }
.form-cotiza { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 820px) { .form-cotiza { grid-template-columns: 1fr; } }
.campo { display: grid; gap: 6px; }
.campo.ancho { grid-column: 1 / -1; }
.campo label, .campo legend { font-size: 13.5px; font-weight: 620; color: var(--tinta-2); }
.campo input, .campo select, .campo textarea {
  height: 54px; border-radius: 16px; border: 0; background: #fff; box-shadow: inset 0 0 0 1.5px var(--linea-2); padding: 0 16px; font-size: 16px; transition: box-shadow .25s;
}
.campo textarea { height: 110px; padding: 14px 16px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--turquesa); }
.campo fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones label { cursor: pointer; }
.opciones input { position: absolute; opacity: 0; pointer-events: none; }
.opciones span { display: inline-flex; height: 42px; align-items: center; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--linea-2); font-size: 14.5px; font-weight: 560; transition: background-color .25s, color .25s; }
.opciones input:checked + span { background: var(--tinta); color: #fff; box-shadow: none; }
.opciones input:focus-visible + span { outline: 2px solid var(--turquesa); outline-offset: 2px; }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 640; letter-spacing: -.025em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--linea-2); position: relative; flex: none; transition: transform .5s var(--expo), background-color .3s; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .5s var(--expo); }
.faq details[open] summary i { background: var(--tinta); color: #fff; }
.faq details[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq details p { margin: 0 0 22px; color: var(--tinta-2); max-width: 760px; }

/* créditos */
.creditos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.credito { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; font-size: 13.5px; background: #fff; border-radius: 18px; padding: 10px; box-shadow: inset 0 0 0 1px var(--linea); }
.credito img { width: 76px; height: 76px; object-fit: cover; border-radius: 12px; }
.credito b { display: block; font-size: 14.5px; }
.credito a { color: var(--turquesa-osc); text-decoration: underline; text-underline-offset: 2px; }

/* movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* tarjetas dentro de un carril (otros productos) */
.carril .tarjeta { flex: none; width: min(66vw, 300px); scroll-snap-align: start; }
.banda-cta { border-radius: var(--r-xl); background: var(--tinta); color: #fff; padding: clamp(32px, 5vw, 72px); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; position: relative; overflow: hidden; isolation: isolate; }
.banda-cta::before { content: ""; position: absolute; inset: auto -10% -60% 40%; height: 120%; background: radial-gradient(closest-side, rgba(231, 42, 136, .45), transparent); z-index: -1; filter: blur(20px); }
.banda-cta .lead { color: rgba(255, 255, 255, .72); }
@media (max-width: 820px) { .banda-cta { grid-template-columns: 1fr; } }

/* celulares bajitos (iPhone SE y similares): más aire para las piezas */
@media (max-width: 820px) and (max-height: 720px) {
  .hero .display { font-size: 12.6vw; }
  .hero .lead { font-size: 15px; line-height: 1.35; }
  .hero__abajo { gap: 14px; }
  .hero__abajo .btn--grande, .prod-hero__bottom .btn--grande { min-height: 48px; font-size: 15.5px; }
  .prod-hero__top .display { font-size: 15vw; }
  .prod-hero__top .lead { font-size: 15px; }
}

/* ==========================================================================
   v2 · galería con scroll (transición en shader) y comparador 2D/3D/4D
   ========================================================================== */
.galeria { position: relative; z-index: 3; height: calc(var(--n) * 85vh + 70vh); background: var(--papel); }
.galeria__pegajosa { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(16px, 2.4vw, 28px); overflow: hidden; }
.galeria__cabeza { display: grid; gap: 10px; }
.galeria__marco { position: relative; width: min(1240px, 92vw); aspect-ratio: 16 / 9; max-height: 72vh; border-radius: clamp(22px, 2.6vw, 36px); overflow: hidden; background: var(--noche-2); box-shadow: var(--sombra-l); isolation: isolate; }
.galeria__marco canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.galeria__marco::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .62)); }
.galeria__cap { position: absolute; left: clamp(20px, 3vw, 44px); right: clamp(20px, 3vw, 44px); bottom: clamp(46px, 5vw, 72px); z-index: 2; color: #fff; max-width: 560px; opacity: 0; transform: translateY(18px); transition: opacity .6s var(--suave), transform .9s var(--expo); pointer-events: none; }
.galeria__cap.activo { opacity: 1; transform: none; }
.galeria__cap .n { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--naranja); }
.galeria__cap h3 { margin: 4px 0 8px; font-size: clamp(1.7rem, 3.4vw, 3rem); letter-spacing: -.045em; line-height: 1; font-weight: 700; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.galeria__cap p { margin: 0; font-size: clamp(15px, 1.3vw, 17px); color: rgba(255, 255, 255, .86); text-wrap: pretty; }
.galeria__seg { position: absolute; left: clamp(20px, 3vw, 44px); right: clamp(20px, 3vw, 44px); bottom: clamp(20px, 2vw, 28px); z-index: 2; display: flex; gap: 6px; }
.galeria__seg span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.galeria__seg i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
@media (max-width: 820px) { .galeria__marco { width: 92vw; aspect-ratio: 4 / 5; max-height: 68svh; } .galeria { height: calc(var(--n) * 75vh + 60vh); } }
.difs-v2 { background: var(--noche); }
.difs-v2 .galeria { background: var(--noche); }
.difs-v2 .galeria__cabeza .titulo-m { color: #fff; } .difs-v2 .galeria__cabeza .eyebrow { color: rgba(255, 255, 255, .7); }

/* comparador 2D · 3D · 4D */
.compara { position: relative; z-index: 3; height: 320vh; background: var(--blanco); }
.compara__pegajosa { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.compara canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.compara__cabeza { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + 3vh); text-align: center; display: grid; gap: 10px; justify-items: center; padding: 0 var(--g); z-index: 2; pointer-events: none; }
.compara__rotulo { position: absolute; z-index: 2; transform: translate(-50%, 0); text-align: center; display: grid; gap: 4px; pointer-events: none; opacity: 0; }
.compara__rotulo b { font-size: clamp(1.4rem, 2.4vw, 2.2rem); letter-spacing: -.04em; line-height: 1; }
.compara__rotulo span { font-size: 13.5px; color: var(--tinta-2); white-space: nowrap; }
.compara__rotulo i { font-style: normal; font-weight: 700; color: var(--c, var(--rosa)); }
@media (max-width: 820px) { .compara__rotulo b { font-size: 1.25rem; } .compara__rotulo span { font-size: 12px; } }

/* mapa de México (capítulo del mundo 3D) */
.mundo-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; display: block; }
.cap { position: relative; z-index: 1; }
.cap__pegajosa { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; pointer-events: none; }
.cap__pegajosa > * { pointer-events: auto; }
.cap-mapa { height: 1150vh; }
.cap-muro { height: 380vh; }
.mapa-intro { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + 6vh); text-align: center; display: grid; gap: 14px; justify-items: center; padding: 0 var(--g); opacity: 0; }
.region-panel { position: absolute; left: var(--g); top: 50%; transform: translateY(-50%); width: min(420px, 36vw); display: grid; gap: 14px; opacity: 0; }
.region-panel .num { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--c, var(--rosa)); }
.region-panel h2 { margin: 0; font-size: clamp(2.4rem, 4.6vw, 4.4rem); letter-spacing: -.05em; line-height: .92; font-weight: 720; }
.region-panel .estados { font-size: 14px; color: var(--tinta-2); margin: 0; }
.elementos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.elemento { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--papel-3); box-shadow: var(--sombra); }
.elemento img { width: 100%; height: 100%; object-fit: cover; }
.elemento::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .7)); }
.elemento span { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 1; color: #fff; font-size: 12.5px; line-height: 1.2; }
.elemento span b { display: block; font-size: 14.5px; letter-spacing: -.02em; }
.pines { position: absolute; inset: 0; pointer-events: none; }
.pin { position: absolute; left: 0; top: 0; transform: translate(-9999px, 0); display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; padding: 5px 10px 5px 7px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: var(--sombra); white-space: nowrap; opacity: 0; transition: opacity .4s; }
.pin i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--rosa)); }
.pin.on { opacity: 1; }
.ruta { position: absolute; right: var(--g); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; opacity: 0; }
.ruta span { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--tinta-3); transition: color .3s; }
.ruta span i { width: 8px; height: 8px; border-radius: 50%; background: var(--papel-3); transition: background-color .3s, transform .3s; }
.ruta span.on { color: var(--tinta); } .ruta span.on i { background: var(--c); transform: scale(1.5); }
.muro-txt { position: absolute; left: 0; right: 0; bottom: 8vh; text-align: center; display: grid; gap: 12px; justify-items: center; padding: 0 var(--g); opacity: 0; color: #fff; }
.muro-txt .titulo { color: #fff; } .muro-txt .lead { color: rgba(255, 255, 255, .78); max-width: 640px; }
.muro-txt .cuenta { font-variant-numeric: tabular-nums; }
@media (max-width: 820px) {
  .cap-mapa { height: 1050vh; }
  .region-panel { left: var(--g); right: var(--g); width: auto; top: auto; bottom: calc(84px + env(safe-area-inset-bottom)); transform: none; gap: 8px; background: rgba(251, 248, 243, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 14px; border-radius: 22px; box-shadow: var(--sombra-l); }
  .region-panel h2 { font-size: 2rem; }
  .region-panel .num { font-size: 18px; }
  .region-panel .estados { font-size: 12.5px; }
  .elementos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scrollbar-width: none; }
  .elementos::-webkit-scrollbar { display: none; }
  .ruta { display: none; }
  .mapa-intro { top: calc(var(--nav-h) + 3vh); }
}
body.v2 .barra-movil { z-index: 50; }

.prod-escena .etiquetas-3d { z-index: 4; }

/* atlas de los 32 orgullos */
.atlas { background: var(--papel); }
.atlas__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.atlas__c { position: relative; aspect-ratio: 1 / 1.1; border-radius: 16px; overflow: hidden; background: var(--papel-3); isolation: isolate; }
.atlas__c img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--expo); }
.atlas__c::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .74)); z-index: 0; }
.atlas__c span { position: absolute; left: 9px; right: 9px; bottom: 8px; z-index: 1; color: #fff; font-size: 11.5px; line-height: 1.2; }
.atlas__c span b { display: block; font-size: 13.5px; letter-spacing: -.02em; }
.atlas__c:hover img { transform: scale(1.08); }
.atlas__c i { position: absolute; top: 8px; left: 8px; z-index: 1; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); }
@media (max-width: 1100px) { .atlas__grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 820px) { .atlas__grid { grid-template-columns: repeat(3, 1fr); gap: 6px; } .atlas__c span { font-size: 10.5px; } .atlas__c span b { font-size: 12px; } }

/* las figuras no llevan margen del navegador */
.atlas__c, .elemento, .foto-flotante { margin: 0; }

.muro-txt .titulo, .muro-txt .lead { text-shadow: 0 4px 30px rgba(0, 0, 0, .8); }

/* ==========================================================================
   Galería de diseños
   ========================================================================== */
.disenos-filtros { position: sticky; top: var(--nav-h); z-index: 20; background: color-mix(in srgb, var(--papel) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: 12px 0; box-shadow: 0 1px 0 var(--linea); transition: top .6s var(--expo); }
body.nav-oculta .disenos-filtros { top: 0; }
.buscador { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--linea-2); }
.buscador:focus-within { box-shadow: inset 0 0 0 2px var(--turquesa); }
.buscador svg { width: 20px; height: 20px; color: var(--tinta-3); flex: none; }
.buscador input { flex: 1; border: 0; outline: 0; background: none; font-size: 17px; height: 100%; }
.disenos-meta { display: flex; align-items: center; gap: 14px; }
.disenos-meta select { height: 40px; border-radius: 999px; border: 0; box-shadow: inset 0 0 0 1.5px var(--linea-2); background: #fff; padding: 0 14px; font-size: 14.5px; }
.disenos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.dcard { display: grid; gap: 8px; padding: 12px 12px 14px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea); text-align: left; transition: transform .6s var(--expo), box-shadow .4s; }
.dcard:hover { transform: translateY(-4px); box-shadow: var(--sombra-l); }
.dcard img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(22, 18, 14, .16)); transition: transform .8s var(--expo); }
.dcard:hover img { transform: scale(1.06) rotate(-2deg); }
.dcard b { font-size: 15px; letter-spacing: -.02em; line-height: 1.2; }
.dcard small { color: var(--tinta-3); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.dcard small i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
@media (max-width: 820px) { .disenos-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .dcard { padding: 10px; border-radius: 16px; } .dcard b { font-size: 13.5px; } }
.dmodal { border: 0; padding: 0; border-radius: 28px; width: min(920px, 94vw); max-height: 90vh; background: var(--papel); box-shadow: var(--sombra-l); display: none; grid-template-columns: 1fr 1fr; overflow: hidden; }
.dmodal[open] { display: grid; }
.dmodal::backdrop { background: rgba(22, 18, 14, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dmodal__img { background: #fff; display: grid; place-items: center; padding: 28px; }
.dmodal__img img { width: 100%; max-height: 60vh; object-fit: contain; filter: drop-shadow(0 20px 28px rgba(22, 18, 14, .2)); }
.dmodal__txt { padding: clamp(24px, 3vw, 40px); display: grid; gap: 14px; align-content: center; }
.dmodal__cerrar { position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: var(--sombra); font-size: 22px; z-index: 2; }
@media (max-width: 820px) { .dmodal { grid-template-columns: 1fr; } .dmodal__img { padding: 18px; } .dmodal__img img { max-height: 38vh; } }

/* precios (estilo Apple: arriba en la barra, abajo el detalle) */
.subnav__precio { font-size: 13.5px; color: var(--tinta-2); font-weight: 560; margin-right: 6px; }
@media (max-width: 820px) { .subnav b { margin-right: 8px; } .subnav__precio { margin-right: auto; font-size: 12.5px; } }
.precios-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.precio-c { border-radius: var(--r-l); background: #fff; box-shadow: inset 0 0 0 1px var(--linea); padding: 26px; display: grid; gap: 10px; align-content: start; }
.precio-c__nombre { font-size: 22px; letter-spacing: -.035em; }
.precio-c__tramos { display: grid; gap: 10px; margin: 6px 0; }
.precio-c__tramos > div { display: flex; align-items: baseline; gap: 10px; }
.precio-c__num { font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 760; letter-spacing: -.05em; color: var(--c); line-height: 1; }
.precio-c__tramos small { color: var(--tinta-3); }
.modelos { margin-top: 18px; border-radius: var(--r-l); background: #fff; box-shadow: inset 0 0 0 1px var(--linea); padding: 26px; display: grid; gap: 4px; }
.modelos h3 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.03em; }
.modelos__fila { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--linea); font-size: 16px; }
.modelos__fila b { color: var(--c); }
.compara__cabeza { top: max(76px, 9vh); }
.compara__rotulo.lado { transform: translate(0, -50%); text-align: left; justify-items: start; }
@media (max-width: 820px) { .compara__cabeza .titulo-m { font-size: 1.55rem; } .compara__rotulo.lado span { white-space: normal; max-width: 40vw; } }

/* paso 04: contador de mayoreo */
.contador-mayoreo { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; }
.contador-mayoreo span { font-size: clamp(3rem, 7vw, 5.6rem); font-weight: 780; letter-spacing: -.06em; line-height: .9; color: var(--rosa); font-variant-numeric: tabular-nums; }
.contador-mayoreo small { font-size: 18px; color: var(--tinta-2); font-weight: 600; }
@media (max-width: 820px) { .contador-mayoreo { margin-top: 8px; } .contador-mayoreo span { font-size: 2.8rem; } }

/* fotos del paso 1: alrededor del diseño, sin taparlo */
.foto-flotante.chica { width: clamp(84px, 9vw, 138px); border-radius: 14px; }
.foto-flotante.chica figcaption { font-size: 10.5px; left: 8px; bottom: 7px; }

/* productos en Polaroid */
.polaroids { gap: clamp(22px, 3vw, 40px) clamp(18px, 2.4vw, 32px); padding-top: 14px; }
.polaroid { position: relative; display: block; background: #fff; padding: 14px 14px 18px; box-shadow: 0 2px 4px rgba(22, 18, 14, .08), 0 22px 44px -14px rgba(22, 18, 14, .3); transform: rotate(var(--r, -2deg)); transition: transform .7s var(--expo), box-shadow .5s; }
.polaroid:hover { transform: rotate(0deg) translateY(-8px) scale(1.02); box-shadow: 0 2px 6px rgba(22, 18, 14, .08), 0 34px 60px -16px rgba(22, 18, 14, .36); }
.polaroid::before { content: ""; position: absolute; top: -12px; left: 50%; width: 42%; height: 26px; transform: translateX(-50%) rotate(var(--rt, -3deg)); background: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); z-index: 2; }
.polaroid__foto { aspect-ratio: 1; background: radial-gradient(circle at 50% 45%, #fff, var(--papel-2) 78%); display: grid; place-items: center; overflow: hidden; }
.polaroid__foto img { width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(22, 18, 14, .22)); transition: transform .9s var(--expo); }
.polaroid__foto img.foto { width: 100%; height: 100%; object-fit: cover; filter: none; }
.polaroid:hover .polaroid__foto img { transform: scale(1.06) rotate(-2deg); }
.polaroid__pie { padding: 12px 4px 0; display: grid; gap: 2px; }
.polaroid__pie small { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c); font-weight: 700; }
.polaroid__pie b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.01em; line-height: 1; }
.polaroid__pie span { font-size: 13.5px; color: var(--tinta-2); }
@media (max-width: 820px) { .polaroid { padding: 9px 9px 12px; } .polaroid__pie b { font-size: 21px; } .polaroid__pie span { font-size: 12px; } }

/* diferenciadores: tarjetas que se apilan */
.difs-pila { position: relative; z-index: 3; background: var(--papel); padding: clamp(88px, 12vw, 160px) 0 clamp(40px, 6vw, 80px); }
.pila { display: grid; gap: 0; }
.pila__c { position: sticky; top: calc(var(--nav-h) + 20px + var(--i) * 14px); height: min(76vh, 620px); margin-bottom: 9vh; border-radius: clamp(26px, 3vw, 40px); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; background: var(--c); color: #fff; box-shadow: 0 30px 70px -30px rgba(22, 18, 14, .45); transform-origin: 50% 0; will-change: transform; }
.pila__txt { padding: clamp(28px, 4vw, 60px); display: grid; align-content: space-between; gap: 18px; }
.pila__num { font-family: var(--serif); font-style: italic; font-size: 28px; opacity: .85; }
.pila__dato { font-size: clamp(3rem, 7vw, 6.4rem); font-weight: 780; letter-spacing: -.06em; line-height: .88; }
.pila__dato small { display: block; font-size: clamp(1rem, 1.4vw, 1.2rem); letter-spacing: -.01em; font-weight: 600; opacity: .9; margin-top: 8px; }
.pila__txt h3 { margin: 0; font-size: clamp(1.8rem, 3.2vw, 2.8rem); letter-spacing: -.045em; line-height: 1; font-weight: 720; text-wrap: balance; }
.pila__txt p { margin: 10px 0 0; font-size: clamp(15.5px, 1.3vw, 18px); line-height: 1.45; opacity: .9; max-width: 460px; }
.pila__img { position: relative; }
.pila__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) {
  .pila__c { grid-template-columns: 1fr; grid-template-rows: 42% 58%; height: min(78svh, 640px); top: calc(var(--nav-h) + 12px + var(--i) * 10px); }
  .pila__img { order: -1; }
  .pila__txt { padding: 22px; }
  .pila__dato { font-size: 2.8rem; }
  .pila__txt h3 { font-size: 1.6rem; }
}

/* entre más piezas, más diseños: barra + escalera con diseños reales */
.disena2 { position: relative; z-index: 3; background: var(--papel); padding: clamp(96px, 12vw, 170px) 0 clamp(80px, 10vw, 140px); }
.calc { max-width: 780px; margin: clamp(36px, 5vw, 56px) auto 0; background: #fff; border-radius: 30px; padding: 30px clamp(20px, 4vw, 40px) 24px; box-shadow: 0 1px 2px rgba(22, 18, 14, .05), 0 30px 70px -34px rgba(22, 18, 14, .35); }
.calc__fila { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 40px); }
.calc__dato { display: grid; justify-items: center; gap: 2px; min-width: 9ch; }
.calc__dato small { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); font-weight: 680; }
.calc__dato b { font-size: clamp(3rem, 7.4vw, 5.4rem); font-weight: 780; letter-spacing: -.06em; line-height: .95; font-variant-numeric: tabular-nums; display: inline-block; }
.calc__dato span { font-size: 15px; color: var(--tinta-2); font-weight: 560; }
.calc__dato--rosa b { color: var(--rosa); }
.calc__igual { font-size: clamp(28px, 4vw, 44px); color: var(--tinta-3); font-weight: 300; }
.calc__barra { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 40px; margin: 22px 0 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.calc__barra:focus-visible { outline: 2px solid var(--rosa); outline-offset: 4px; border-radius: 12px; }
.calc__barra::-webkit-slider-runnable-track { height: 12px; border-radius: 12px; background: linear-gradient(90deg, var(--rosa) var(--p, 0%), var(--papel-2) var(--p, 0%)); }
.calc__barra::-moz-range-track { height: 12px; border-radius: 12px; background: linear-gradient(90deg, var(--rosa) var(--p, 0%), var(--papel-2) var(--p, 0%)); }
.calc__barra::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -11px; border-radius: 50%; background: #fff; border: 3px solid var(--rosa); box-shadow: 0 6px 16px rgba(22, 18, 14, .22); }
.calc__barra::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid var(--rosa); box-shadow: 0 6px 16px rgba(22, 18, 14, .22); }
.calc__marcas { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; font-size: 12.5px; color: var(--tinta-3); font-weight: 600; text-align: center; }
.calc__marcas span + span { border-left: 1px solid var(--linea); }
.calc__precio { text-align: center; font-size: 14px; color: var(--tinta-2); margin: 16px 0 0; min-height: 1.4em; }
.calc__precio b { color: var(--tinta); }
.escalera { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 24px); align-items: end; max-width: 1040px; margin: clamp(40px, 5vw, 60px) auto 0; }
.escalon { appearance: none; border: 0; font: inherit; color: inherit; cursor: pointer; display: grid; gap: 14px; padding: 18px 14px 16px; border-radius: 24px; background: #fff; text-align: center; opacity: .55;
  box-shadow: 0 1px 2px rgba(22, 18, 14, .05), 0 18px 40px -24px rgba(22, 18, 14, .35); transition: transform .6s var(--expo), box-shadow .5s, opacity .5s; }
.escalon:hover { opacity: .85; }
.escalon.antes { opacity: .8; }
.escalon.on { opacity: 1; transform: translateY(-10px); box-shadow: 0 0 0 2.5px var(--rosa), 0 30px 60px -26px rgba(231, 42, 136, .5); }
.escalon__n { font-size: 15px; color: var(--tinta-2); font-weight: 560; }
.escalon__n b { display: block; font-size: clamp(2.2rem, 4vw, 3.3rem); font-weight: 780; letter-spacing: -.05em; line-height: 1; color: var(--tinta); }
.escalon.on .escalon__n b { color: var(--rosa); }
.escalon__disenos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.escalon__disenos img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(22, 18, 14, .2)); }
.escalon.on .escalon__disenos img.nuevo { animation: aparece-d .7s var(--expo) both; animation-delay: calc(var(--j) * 70ms); }
@keyframes aparece-d { from { opacity: 0; transform: scale(.6) rotate(-8deg); } }
.escalon__rango { font-size: 15px; font-weight: 720; letter-spacing: -.01em; border-top: 1px solid var(--linea); padding-top: 12px; display: grid; }
.escalon__rango small { font-size: 12px; font-weight: 560; color: var(--tinta-3); }
.disena2__nota { text-align: center; font-size: 13.5px; color: var(--tinta-2); margin: 30px auto 0; max-width: 640px; }
.chip-ej { display: inline-block; margin-right: 6px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--rosa) 12%, #fff); color: var(--rosa); font-weight: 700; font-size: 12px; }
@media (min-width: 821px) {
  .disena2__cuerpo { display: grid; grid-template-columns: minmax(360px, 430px) 1fr; gap: clamp(28px, 4vw, 56px); align-items: end; max-width: 1180px; margin: clamp(36px, 4vw, 56px) auto 0; }
  .disena2__cuerpo .calc, .disena2__cuerpo .escalera { margin: 0; }
  .disena2__cuerpo .calc__dato b { font-size: clamp(2.8rem, 4.4vw, 4.2rem); }
  .disena2__cuerpo .calc__marcas { font-size: 11.5px; }
}
@media (max-width: 820px) {
  .calc { border-radius: 24px; padding: 22px 16px 18px; }
  .calc__dato b { font-size: 2.9rem; } .calc__dato span { font-size: 13px; }
  .calc__marcas { font-size: 10.5px; }
  .escalera { grid-template-columns: 1fr; gap: 10px; align-items: stretch; }
  .escalon { grid-template-columns: 88px 1fr; grid-template-areas: "n d" "r d"; align-items: center; text-align: left; padding: 12px 14px; gap: 4px 14px; border-radius: 20px; }
  .escalon.on { transform: none; }
  .escalon__n { grid-area: n; font-size: 13px; } .escalon__n b { font-size: 2rem; }
  .escalon__rango { grid-area: r; border: 0; padding: 0; font-size: 12.5px; }
  .escalon__disenos { grid-area: d; grid-template-columns: repeat(4, 1fr); gap: 6px; }
}
/* pines del mapa: se pueden tocar */
.pin.on { pointer-events: auto; cursor: pointer; }
.elemento { display: block; }
.region-panel .ver-disenos { font-size: 14.5px; }

/* orbe: cantidades en fila abajo (no tapan los diseños) */
.disena__tiers { right: auto; left: 50%; top: auto; bottom: 6.5vh; transform: translateX(-50%); display: flex; gap: 8px; }
.disena__tiers li { padding: 8px 12px; font-size: 12.5px; gap: 8px; }
.disena__pedido { bottom: 14vh; }
.disena__canvas { width: min(56vmin, 520px); height: min(56vmin, 520px); top: 55%; }
.buscador-demo { top: 24%; }
@media (max-width: 820px) {
  .disena__tiers { display: flex; bottom: calc(76px + env(safe-area-inset-bottom)); gap: 5px; }
  .disena__tiers li { padding: 6px 8px; font-size: 10px; flex-direction: column; gap: 0; text-align: center; }
  .disena__pedido { bottom: calc(150px + env(safe-area-inset-bottom)); }
  .disena__nota { display: none; }
  .disena__canvas { width: 58vw; height: 58vw; top: 50%; }
  .buscador-demo { top: 22%; }
}

@media (max-width: 820px) { .disena__canvas { width: 50vw; height: 50vw; top: 51%; } .carta-d { width: 21vw; } }

@media (max-width: 820px) { .carta-d { width: 19vw; } }

/* ===================== Ronda 3 (2026-09-26) ===================== */
/* muro: el botón nunca queda debajo de la barra Comprar / Mayoreo del celular */
@media (max-width: 820px) { .muro-txt { bottom: calc(96px + env(safe-area-inset-bottom)); gap: 10px; } .muro-txt .lead { font-size: 15px; } }
/* tarjetas de producto: la pieza completa y centrada, mismo aire en todas, fondo teñido con su color */
.polaroid__foto { background: radial-gradient(circle at 50% 42%, #fff 0%, color-mix(in srgb, var(--c) 16%, #fff) 80%); }
.polaroid__foto img, .polaroid__foto img.foto { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(22, 18, 14, .2)); }
.tarjeta__img { background: radial-gradient(circle at 50% 42%, #fff 0%, color-mix(in srgb, var(--c) 12%, #fff) 82%); }
.tarjeta__img img, .tarjeta__img img.foto { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(22, 18, 14, .18)); }
.mega__item .mini { background: color-mix(in srgb, var(--c) 12%, #fff); }

/* hojas: botón cerrar, nota de mayoreo */
.hoja__x { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--papel-2); font-size: 22px; line-height: 1; color: var(--tinta-2); display: grid; place-items: center; }
.hoja__x:hover { background: var(--papel-3); color: var(--tinta); }
.hoja .eyebrow { margin-bottom: 8px; }
.hoja__nota { margin: 16px 0 0 !important; font-size: 14.5px; text-align: center; }
.hoja__nota .enlace { font-size: 14.5px; display: inline-flex; }
@media (min-width: 821px) { .hoja { align-items: center; } .hoja__panel { border-radius: 28px; transform: translateY(40px) scale(.98); opacity: 0; transition: transform .6s var(--expo), opacity .35s; padding-bottom: 28px; } .hoja.abierta .hoja__panel { opacity: 1; } .hoja__asa { display: none; } }
.hoja--cotiza .hoja__panel { max-width: 620px; max-height: 92svh; overflow: auto; }

/* cuestionario de mayoreo */
.cuest { display: grid; gap: 18px; margin-top: 14px; }
.cuest__prog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cuest__prog i { height: 4px; border-radius: 4px; background: var(--papel-2); transition: background-color .4s; }
.cuest__prog i.on { background: var(--rosa); }
.cuest__paso { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; min-width: 0; }
.cuest__paso legend { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 720; letter-spacing: -.035em; line-height: 1.1; padding: 0; margin-bottom: 14px; }
.cuest__paso legend small { display: block; font-size: 12.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--rosa); margin-bottom: 6px; }
.cuest__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cchip { position: relative; cursor: pointer; }
.cchip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.cchip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--linea); font-weight: 600; font-size: 15px; transition: background-color .25s, box-shadow .25s, color .25s; }
.cchip input:checked + span { background: var(--rosa); color: #fff; box-shadow: none; }
.cchip input:focus-visible + span { outline: 2px solid var(--rosa); outline-offset: 2px; }
.cuest__txt { width: 100%; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 0; background: #fff; box-shadow: inset 0 0 0 1.5px var(--linea); font: inherit; font-size: 16px; color: var(--tinta); }
.cuest__txt:focus { outline: none; box-shadow: inset 0 0 0 2px var(--rosa); }
.cuest__ayuda { margin: 0 !important; font-size: 13.5px; color: var(--tinta-3) !important; }
.cuest__nombre { display: grid; gap: 6px; font-size: 14px; font-weight: 600; margin-top: 4px; } .cuest__nombre small { color: var(--tinta-3); font-weight: 500; }
.cuest__nav { display: flex; justify-content: space-between; gap: 10px; }
.cuest__nav .btn { min-height: 50px; } .cuest__nav [data-sig] { flex: 1; max-width: 300px; margin-left: auto; }
.cuest__nav [data-sig]:disabled { opacity: .4; cursor: not-allowed; }
.cuest__listo { text-align: center; padding: 20px 0 6px; display: grid; gap: 6px; justify-items: center; }
.cuest__listo b { font-size: 1.8rem; letter-spacing: -.04em; color: var(--rosa); }

/* menú "Una pieza" */
.pieza-ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pieza-op { display: grid; gap: 4px; padding: 10px; border-radius: var(--r-m); transition: background-color .25s, box-shadow .25s; }
.pieza-op:hover { background: #fff; box-shadow: var(--sombra); }
.pieza-op__img { aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; margin-bottom: 8px; }
.pieza-op__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--expo); }
.pieza-op:hover .pieza-op__img img { transform: scale(1.05); }
.pieza-op b { font-size: 16.5px; letter-spacing: -.02em; } .pieza-op small { color: var(--tinta-3); font-size: 13.5px; }
.mega__lado button { display: flex; align-items: center; justify-content: space-between; width: 100%; font: inherit; }
.menu-movil__sub--pieza { grid-template-columns: 1fr; }
.menu-movil__sub--pieza a { gap: 2px; } .menu-movil__sub--pieza a small { color: var(--tinta-3); font-size: 13px; }
.menu-movil__sub--pieza .tienda-mini { display: inline-flex; }
.mega__lado button { font-size: 17px; font-weight: 600; padding: 6px 0; letter-spacing: -.015em; color: var(--rosa); cursor: pointer; }
.cuest [hidden] { display: none !important; }

/* reseñas reales: sellos con el promedio y dos filas que corren */
.resenas-sec { overflow: hidden; }
.res-resumen { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0 auto clamp(30px, 4vw, 48px); }
.res-sello { display: flex; align-items: center; gap: 14px; padding: 14px 20px 14px 16px; border-radius: 20px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); }
a.res-sello:hover { box-shadow: inset 0 0 0 1.5px var(--rosa); }
.res-sello__n { font-size: 2.6rem; font-weight: 780; letter-spacing: -.05em; line-height: 1; }
.res-sello b { display: block; font-size: 15px; letter-spacing: -.01em; margin-top: 2px; } .res-sello small { color: var(--tinta-3); font-size: 13px; }
.res-estrellas { display: inline-flex; gap: 1px; color: #f5a623; } .res-estrellas svg { width: 15px; height: 15px; }
.marquesina { overflow: hidden; padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquesina__pista { display: flex; gap: 16px; width: max-content; animation: marquesina var(--dur, 120s) linear infinite; }
.marquesina--rev .marquesina__pista { animation-direction: reverse; }
.marquesina:hover .marquesina__pista { animation-play-state: paused; }
.marquesina__copia { display: contents; }
@keyframes marquesina { to { transform: translateX(calc(-50% - 8px)); } }
.res-c { margin: 0; width: clamp(270px, 28vw, 360px); flex: none; background: #fff; border-radius: 22px; padding: 20px 22px; box-shadow: 0 1px 2px rgba(22, 18, 14, .05), 0 16px 34px -22px rgba(22, 18, 14, .3); display: grid; gap: 12px; align-content: start; }
.res-c__top { display: flex; justify-content: space-between; align-items: center; }
.res-c__src { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; }
.res-c__src.g { background: #e8f0fe; color: #1a56c4; } .res-c__src.ml { background: #fff6b3; color: #2d3277; }
.res-c blockquote { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--tinta); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.res-c figcaption { display: grid; gap: 1px; } .res-c figcaption b { font-size: 14.5px; } .res-c figcaption small { color: var(--tinta-3); font-size: 12.5px; }
.res-c figcaption a:hover b { color: var(--rosa); }
.res-nota { text-align: center; margin-top: 18px; }
.movimiento-reducido .marquesina { overflow-x: auto; }
@media (max-width: 820px) { .res-sello { padding: 12px 16px 12px 14px; } .res-sello__n { font-size: 2.1rem; } .res-c { width: 78vw; } }
.res-estrellas svg { fill: currentColor; stroke: none; }

/* página "Una pieza" */
.pieza-hero { padding-bottom: 10px; }
.pieza-buscar { display: flex; align-items: center; gap: 10px; width: min(640px, 100%); padding: 8px 8px 8px 20px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(22, 18, 14, .06), 0 20px 44px -24px rgba(22, 18, 14, .35), inset 0 0 0 1.5px var(--linea); margin-top: 8px; }
.pieza-buscar svg { width: 22px; height: 22px; color: var(--tinta-3); flex: none; }
.pieza-buscar input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 17px; height: 48px; color: var(--tinta); }
.pieza-buscar input:focus { outline: none; }
.pieza-buscar:focus-within { box-shadow: 0 20px 44px -24px rgba(22, 18, 14, .35), inset 0 0 0 2px var(--rosa); }
.pieza-atajos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 720px; }
.pieza-casos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.pieza-caso { background: #fff; border-radius: var(--r-xl); overflow: hidden; box-shadow: inset 0 0 0 1px var(--linea); display: grid; grid-template-rows: auto 1fr; scroll-margin-top: 90px; }
.pieza-caso img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pieza-caso > div { padding: 22px 22px 24px; display: grid; gap: 10px; align-content: start; }
.pieza-caso h2 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.04em; line-height: 1.02; }
.pieza-caso p { margin: 0; color: var(--tinta-2); }
.pieza-cita { font-style: italic; } .pieza-cita small { display: block; font-style: normal; color: var(--tinta-3); margin-top: 6px; font-size: 13px; }
.pieza-pasos { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 980px; }
.pieza-pasos li { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 26px 18px; border-radius: 24px; background: var(--papel); }
.pieza-pasos span { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--rosa); color: #fff; font-weight: 780; font-size: 20px; margin-bottom: 6px; }
.pieza-pasos b { font-size: 19px; letter-spacing: -.02em; } .pieza-pasos small { color: var(--tinta-3); font-size: 14px; }
.pieza-mayoreo { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-xl); background: var(--tinta); color: #fff; }
.pieza-mayoreo .titulo-m { color: #fff; margin: 8px 0; } .pieza-mayoreo p { margin: 0; color: rgba(255, 255, 255, .7); }
.pieza-mayoreo .eyebrow { color: rgba(255, 255, 255, .7); }
@media (max-width: 820px) {
  .pieza-casos, .pieza-pasos { grid-template-columns: 1fr; }
  .pieza-buscar { padding-left: 16px; } .pieza-buscar input { font-size: 16px; } .pieza-buscar .btn { padding-inline: 16px; }
  .pieza-mayoreo { flex-direction: column; align-items: flex-start; }
}

/* página de producto: menos texto, barra flotante abajo, dos caminos para comprar */
.barra-prod { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 45; width: min(900px, calc(100% - 24px)); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; border-radius: 999px;
  background: color-mix(in srgb, #fff 82%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px);
  box-shadow: 0 1px 2px rgba(22, 18, 14, .08), 0 20px 50px -18px rgba(22, 18, 14, .4), inset 0 0 0 1px rgba(22, 18, 14, .06);
  transform: translate(-50%, 140%); transition: transform .7s var(--expo); }
.barra-prod.visible { transform: translate(-50%, 0); }
.barra-prod__mini { width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, #fff); display: grid; place-items: center; flex: none; }
.barra-prod__mini img { width: 78%; height: 78%; object-fit: contain; }
.barra-prod__txt { display: grid; line-height: 1.1; margin-right: auto; min-width: 0; }
.barra-prod__txt b { font-size: 16px; letter-spacing: -.02em; white-space: nowrap; } .barra-prod__txt small { font-size: 12.5px; color: var(--tinta-2); white-space: nowrap; }
.barra-prod nav { display: flex; gap: 18px; font-size: 13.5px; font-weight: 580; color: var(--tinta-2); margin-right: 8px; }
.barra-prod nav a:hover { color: var(--tinta); }
.barra-prod .btn { min-height: 44px; }
@media (max-width: 980px) { .barra-prod nav { display: none; } }
@media (max-width: 420px) { .barra-prod .btn { padding-inline: 14px; } .barra-prod__txt b { font-size: 15px; } }
.caminos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 20px); max-width: 980px; margin: 0 auto; }
.camino { border-radius: var(--r-xl); padding: clamp(22px, 3vw, 40px); background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); display: grid; gap: 10px; align-content: start; }
.camino h3 { margin: 0; font-size: clamp(1.6rem, 2.8vw, 2.4rem); letter-spacing: -.045em; line-height: 1; }
.camino p { margin: 0 0 6px; color: var(--tinta-2); }
.camino--oscuro { background: var(--tinta); color: #fff; box-shadow: none; } .camino--oscuro p { color: rgba(255, 255, 255, .72); } .camino--oscuro .eyebrow { color: rgba(255, 255, 255, .7); }
.hoja__panel--ancha { max-width: 760px; }
.hoja .caminos { gap: 10px; } .hoja .camino { padding: 18px; } .hoja .camino h3 { font-size: 1.35rem; } .hoja .camino p { margin: 0 0 4px !important; font-size: 14.5px; }
@media (max-width: 820px) { .caminos { grid-template-columns: 1fr; } }

/* comparador en celular: un imán a la vez + selector */
.compara__segs { display: none; }
@media (max-width: 820px) {
  .compara { height: 460vh; }
  .compara__segs { display: flex; position: absolute; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 3; gap: 4px; padding: 4px; border-radius: 999px; background: var(--papel-2); }
  .compara__segs button { min-height: 40px; padding: 0 18px; border-radius: 999px; font-weight: 650; font-size: 15px; color: var(--tinta-2); transition: background-color .3s, color .3s; }
  .compara__segs button[aria-selected="true"] { background: #fff; color: var(--c); box-shadow: 0 2px 8px rgba(22, 18, 14, .12); }
  .compara__rotulo b { font-size: 2rem; } .compara__rotulo span { font-size: 13.5px; }
}

/* mayoreo: pilas 3D y cuestionario en línea */
.may-pilas { position: relative; height: 300vh; background: var(--papel); }
.may-pilas__pegajosa { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.may-pilas__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.may-pilas__txt { position: absolute; left: var(--g); top: 50%; transform: translateY(-50%); max-width: 460px; display: grid; gap: 14px; }
@media (max-width: 820px) { .may-pilas__txt { top: auto; transform: none; right: var(--g); bottom: calc(92px + env(safe-area-inset-bottom)); gap: 8px; } }
.cuest-inline { max-width: 680px; background: #fff; border-radius: var(--r-xl); padding: clamp(20px, 3vw, 36px); box-shadow: inset 0 0 0 1px var(--linea); }
.cuest-inline .cuest { margin-top: 0; }

/* mapa: el título siempre legible (halo de papel detrás del texto) */
.mapa-intro { isolation: isolate; }
.mapa-intro::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(1100px, 150vw); height: 175%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(251, 248, 243, .94), rgba(251, 248, 243, .82) 55%, rgba(251, 248, 243, 0)); pointer-events: none; }
.mapa-intro .lead { color: var(--tinta); }

/* diseños por cantidad (ronda 4): sección fija, el scroll mueve la cantidad, una sola tarjeta cambia */
.disena3 { position: relative; z-index: 3; height: 420vh; background: var(--papel); }
.disena3__pegajosa { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(340px, 450px) minmax(0, 560px);
  grid-template-areas: "cab nivel" "calc nivel"; gap: 26px clamp(28px, 4vw, 64px); align-content: center; justify-content: center; padding: calc(var(--nav-h) + 12px) var(--g) 28px; overflow: hidden; }
.disena3__cab { grid-area: cab; display: grid; gap: 12px; align-self: end; }
.disena3__cab .lead { margin: 0; }
.disena3 .calc { grid-area: calc; margin: 0; max-width: none; align-self: start; }
.disena3 .calc__dato b { font-size: clamp(2.8rem, 4.6vw, 4.4rem); }
.disena3 .calc__marcas { font-size: 11.5px; }
.nivel { grid-area: nivel; align-self: center; background: #fff; border-radius: 30px; padding: clamp(18px, 2.4vw, 30px); box-shadow: 0 1px 2px rgba(22, 18, 14, .05), 0 30px 70px -34px rgba(22, 18, 14, .35); transform-origin: 50% 60%; }
.nivel__cab { display: flex; align-items: center; gap: 14px; }
.nivel__cab b { font-size: clamp(3rem, 6vw, 5rem); color: var(--rosa); font-weight: 780; letter-spacing: -.06em; line-height: .9; display: inline-block; min-width: 1ch; }
.nivel__cab span { display: grid; font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.nivel__cab small { font-size: 14px; color: var(--tinta-3); font-weight: 560; letter-spacing: 0; }
.nivel__disenos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0 14px; }
.nivel__d { margin: 0; aspect-ratio: 1; border-radius: 16px; border: 1.5px dashed var(--linea); display: grid; place-items: center; transition: background-color .5s, border-color .5s; }
.nivel__d img { width: 100%; height: 100%; object-fit: contain; padding: 6%; opacity: 0; transform: scale(.55) rotate(-8deg); transition: opacity .45s, transform .7s var(--expo); transition-delay: calc(var(--j) * 45ms); }
.nivel__d.on { border-color: transparent; background: color-mix(in srgb, var(--rosa) 7%, #fff); }
.nivel__d.on img { opacity: 1; transform: none; filter: drop-shadow(0 8px 10px rgba(22, 18, 14, .2)); }
.nivel__nota { font-size: 13px; color: var(--tinta-2); margin: 0; }
.disena3__pista { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-size: 13px; color: var(--tinta-3); letter-spacing: .02em; pointer-events: none; }
@media (max-width: 820px) {
  .disena3__pegajosa { grid-template-columns: 1fr; grid-template-areas: "cab" "calc" "nivel"; align-content: start; gap: 12px; padding: calc(var(--nav-h) + 10px) var(--g) calc(96px + env(safe-area-inset-bottom)); }
  .disena3__cab { gap: 6px; } .disena3__cab .titulo { font-size: 2.05rem; } .disena3__cab .lead { display: none; }
  .disena3 .calc { padding: 16px 14px 12px; border-radius: 22px; } .disena3 .calc__dato b { font-size: 2.5rem; } .disena3 .calc__barra { margin-top: 10px; }
  .disena3 .calc__precio { margin-top: 8px; font-size: 13px; }
  .nivel { padding: 14px; border-radius: 22px; } .nivel__cab b { font-size: 2.6rem; } .nivel__disenos { gap: 6px; margin: 10px 0 8px; }
  .nivel__nota { font-size: 12px; } .disena3__pista { display: none; }
}

/* logos de tienda: cada marca con su color */
.logo-tienda { flex: none; width: 104px; height: 48px; border-radius: 12px; display: grid; place-items: center; padding: 8px 10px; }
.logo-tienda img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-tienda.ml { background: #ffe600; } .logo-tienda.amz { background: #fff; box-shadow: inset 0 0 0 1px var(--linea); } .logo-tienda.amz img { margin-top: 4px; }
.logo-tienda.axk { background: var(--rosa); padding: 12px 14px; }

button.diseno { font: inherit; text-align: left; cursor: pointer; border: 0; }

/* productos: tendedero de papel picado (3D) */
.tendedero { position: relative; z-index: 3; height: 480vh; background: radial-gradient(120% 70% at 50% 35%, #fffdf9 0%, var(--papel) 60%, #f3ece2 100%); }
.tendedero__pegajosa { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.tendedero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.tendedero__cab { position: absolute; left: var(--g); top: calc(var(--nav-h) + 2.5vh); display: grid; gap: 8px; z-index: 2; pointer-events: none; }
.tendedero__cab .titulo { font-size: clamp(2.2rem, 4.6vw, 4.2rem); }
.tendedero__rotulos { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.rotulo-pp { position: absolute; left: 0; top: 0; display: grid; justify-items: center; text-align: center; gap: 1px; padding: 8px 16px 10px; border-radius: 18px; pointer-events: auto; opacity: 0; transition: background-color .35s, box-shadow .35s; will-change: transform, opacity; }
.rotulo-pp small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #1f5fd6; font-weight: 700; }
.rotulo-pp b { font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.035em; line-height: 1.05; }
.rotulo-pp span { font-size: 13.5px; color: var(--tinta-2); font-weight: 560; }
.rotulo-pp.on, .rotulo-pp:hover { background: #fff; box-shadow: 0 12px 30px -14px rgba(22, 18, 14, .35); }
.tendedero__pie { position: absolute; left: var(--g); right: var(--g); bottom: 4vh; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.tendedero__cuenta { font-family: var(--serif); font-style: italic; font-size: 22px; color: #1f5fd6; }
@media (max-width: 820px) {
  .tendedero { height: 560vh; }
  .tendedero__cab .titulo { font-size: 2.1rem; }
  .tendedero__pie { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .rotulo-pp b { font-size: 22px; }
}

/* Una pieza: datos rápidos y resultado con animación */
.pieza-datos { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 14.5px; color: var(--tinta-2); }
.pieza-datos li::before { content: "●"; color: var(--rosa); font-size: 9px; margin-right: 8px; vertical-align: 2px; }
.encontrado { position: fixed; inset: 0; z-index: 80; visibility: hidden; opacity: 0; transition: opacity .5s, visibility 0s .5s; overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(90% 60% at 50% 22%, #2a1f2e 0%, #120e10 55%, #0b0909 100%); color: #fff; display: grid; justify-items: center; align-content: start;
  padding: calc(46vh) var(--g) calc(40px + env(safe-area-inset-bottom)); }
.encontrado.abierta { visibility: visible; opacity: 1; transition: opacity .5s; }
.encontrado__canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.encontrado__x { position: fixed; top: 18px; right: 18px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 26px; line-height: 1; display: grid; place-items: center; }
.encontrado__x:hover { background: rgba(255, 255, 255, .22); }
.encontrado__txt { position: relative; z-index: 2; text-align: center; display: grid; gap: 8px; justify-items: center; }
.encontrado__txt .eyebrow { color: rgba(255, 255, 255, .7); } .encontrado__txt .titulo-m { color: #fff; margin: 0; } .encontrado__txt p { margin: 0; color: rgba(255, 255, 255, .72); }
.encontrado__ops { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(1060px, 100%); margin-top: 22px; }
.op-compra { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, .96); color: var(--tinta); transition: transform .4s var(--expo), box-shadow .3s; }
.op-compra:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); }
.op-compra__txt { display: grid; gap: 2px; flex: 1; min-width: 0; } .op-compra__txt b { font-size: 16px; letter-spacing: -.02em; } .op-compra__txt small { font-size: 12.5px; color: var(--tinta-2); line-height: 1.3; }
.op-compra__ir { flex: none; font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 999px; background: var(--tinta); color: #fff; }
.op-compra--axkan { background: #fff; box-shadow: inset 0 0 0 2px var(--rosa); } .op-compra--axkan .op-compra__ir { background: var(--rosa); }
.encontrado__nota { position: relative; z-index: 2; font-size: 13px; color: rgba(255, 255, 255, .6); text-align: center; max-width: 620px; margin: 18px 0 0; }
.con-encontrado .barra-movil, .con-encontrado .nav { visibility: hidden; }
@media (max-width: 980px) { .encontrado__ops { grid-template-columns: 1fr; max-width: 520px; } }
@media (max-width: 820px) { .encontrado { padding-top: 40vh; } .op-compra { padding: 12px; gap: 12px; } .op-compra .logo-tienda { width: 88px; height: 42px; } }

/* diseños por cantidad: solo los incluidos, centrados; se reacomodan con animación */
.nivel__disenos { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; }
.nivel__d, .nivel__d.on { width: calc(25% - 8px); border: 0; background: color-mix(in srgb, var(--rosa) 7%, #fff); border-radius: 16px; }
.nivel__d img { opacity: 1; transform: none; filter: drop-shadow(0 8px 10px rgba(22, 18, 14, .2)); transition: none; }
@media (max-width: 820px) { .nivel__d, .nivel__d.on { width: calc(25% - 5px); } }

/* tendedero: rótulo simple (el nombre va recortado en el papel) y sin encimados en celular */
.rotulo-pp span { font-size: 15px; color: var(--tinta); font-weight: 650; }
.rotulo-pp b { font-size: 14px; letter-spacing: 0; color: var(--rosa); font-weight: 700; }
@media (max-width: 820px) {
  .tendedero__pie { top: calc(var(--nav-h) + 2.5vh + 96px); bottom: auto; }
  .tendedero__pie .enlace { font-size: 14px; }
  .tendedero__cuenta { font-size: 18px; }
}

/* reseñas compactas (Una pieza): una fila, tarjetas bajas */
.resenas-sec--compacta { padding-block: clamp(56px, 7vw, 96px); }
.resenas-sec--compacta .res-c { width: clamp(230px, 22vw, 290px); padding: 14px 16px; gap: 8px; border-radius: 18px; }
.resenas-sec--compacta .res-c blockquote { font-size: 14px; -webkit-line-clamp: 3; }
.resenas-sec--compacta .res-c figcaption b { font-size: 13px; } .resenas-sec--compacta .res-c figcaption small { font-size: 11.5px; }
.resenas-sec--compacta .titulo { font-size: clamp(2rem, 4vw, 3.2rem); }

/* preguntas frecuentes premium: número, línea que se dibuja, respuesta que se despliega */
.faq { counter-reset: faq; }
.faq details { border-bottom: 0; position: relative; }
.faq details::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linea-2, var(--linea)); transform-origin: left; transform: scaleX(var(--l, 1)); }
.faq summary { padding: 26px 0; }
.faq summary::before { counter-increment: faq; content: counter(faq, decimal-leading-zero); font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--rosa); font-size: .8em; margin-right: 20px; flex: none; min-width: 1.6em; }
.faq summary { justify-content: flex-start; } .faq summary i { margin-left: auto; }
.faq summary:hover { color: var(--rosa); }
.faq__r { overflow: hidden; } .faq__r p { margin: 0 0 26px calc(1.6em + 20px); font-size: clamp(1rem, 1.4vw, 1.12rem); }
.faq details.abierta summary i { background: var(--rosa); color: #fff; box-shadow: none; transform: rotate(180deg); }

/* Una pieza: aviso discreto y resultado en la misma página */
.pieza-aviso { margin: 0; font-size: 14.5px; color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.pieza-aviso .enlace { font-size: 14.5px; display: inline-flex; }
.resultado { padding: clamp(32px, 5vw, 70px) 0 clamp(60px, 8vw, 110px); }
.resultado__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.resultado__mapa { position: relative; aspect-ratio: 1.5; }
.resultado__mapa svg { width: 100%; height: 100%; overflow: visible; }
.edo path { fill: #efe5d7; stroke: #2a211a; stroke-width: 0.018; stroke-linejoin: round; transition: fill .7s var(--expo); }
.edo.on path { fill: var(--c); }
.resultado__pin { position: absolute; width: 30px; height: 30px; margin: -34px 0 0 -15px; pointer-events: none; }
.resultado__pin i { position: absolute; inset: 0; background: var(--rosa); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 8px 18px rgba(231, 42, 136, .45); }
.resultado__pin i::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.resultado__pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 34px; height: 12px; margin: 2px 0 0 -17px; border-radius: 50%; border: 2px solid var(--rosa); animation: onda-pin 1.8s ease-out infinite; }
@keyframes onda-pin { from { transform: scale(.3); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
.resultado__estado { position: absolute; transform: translate(-50%, 14px); background: #fff; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; box-shadow: 0 8px 20px -10px rgba(22, 18, 14, .4); white-space: nowrap; pointer-events: none; }
.resultado__info { display: grid; gap: 14px; }
.resultado__titulo { margin: 0; line-height: .95; letter-spacing: -.045em; font-size: clamp(2.8rem, 6vw, 5.4rem); font-weight: 750; }
.resultado__nombre { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--rosa); letter-spacing: -.02em; }
.resultado__titulo small { display: block; font-family: inherit; font-size: .3em; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; margin-top: 10px; }
.resultado__cuenta { margin: 0; font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--tinta-2); }
.resultado__cuenta b { color: var(--tinta); } .resultado__cuenta b[data-n] { font-size: 1.5em; font-weight: 780; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.resultado__specs { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 12px; }
.resultado__specs li { display: flex; align-items: center; gap: 14px; }
.resultado__specs svg { width: 40px; height: 40px; flex: none; fill: none; stroke: var(--rosa); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.resultado__specs b { font-weight: 700; } .resultado__specs small { display: block; color: var(--tinta-3); font-size: 13px; }
.resultado__ops { display: grid; gap: 10px; margin-top: 6px; }
.resultado .op-compra { box-shadow: inset 0 0 0 1px var(--linea), 0 14px 30px -24px rgba(22, 18, 14, .5); }
.resultado .op-compra--axkan { box-shadow: inset 0 0 0 2px var(--rosa); }
@media (max-width: 900px) { .resultado__grid { grid-template-columns: 1fr; } .resultado__mapa { max-width: 560px; width: 100%; justify-self: center; } }

/* paso 03 (cama del láser): el texto siempre legible sobre la placa */
.paso--noche .paso__titulo, .paso--noche .paso__texto { text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.nivel { overflow: hidden; } /* su alto se anima al cambiar de nivel */

/* tendedero: contador y "ver todos" siempre legibles (pastilla) y lejos de las banderas */
.tendedero__pie { top: auto; bottom: 4vh; }
.tendedero__cuenta, .tendedero__pie .enlace { background: rgba(255, 255, 255, .94); padding: 8px 16px; border-radius: 999px; box-shadow: 0 10px 26px -14px rgba(22, 18, 14, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tendedero__cuenta { color: var(--tinta); font-size: 18px; }
@media (max-width: 820px) {
  .tendedero__pie { top: auto; bottom: calc(92px + env(safe-area-inset-bottom)); }
  .tendedero__pie .enlace { font-size: 13.5px; padding: 7px 14px; } .tendedero__cuenta { font-size: 16px; padding: 6px 12px; }
}

/* Una pieza · entrada a pantalla completa: lo que manda es la barra de búsqueda */
@property --giro { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.pieza-hero { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; position: relative; padding-bottom: 120px; }
.pieza-titulo { margin: 0; font-size: clamp(1.9rem, 4.2vw, 3.4rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 750; }
.pieza-lead { margin: 0; font-size: clamp(14.5px, 1.3vw, 16.5px); color: var(--tinta-2); }
.pieza-hero .eyebrow { font-size: 11px; }
.pieza-buscar { position: relative; width: min(680px, 100%); height: 70px; margin-top: 18px; padding: 8px 8px 8px 22px;
  box-shadow: 0 18px 50px -22px rgba(231, 42, 136, .45), 0 0 44px -14px rgba(9, 173, 194, .35); animation: halo-busca 4.5s ease-in-out infinite; }
.pieza-buscar input { font-size: 18px; }
.pieza-buscar .btn { min-height: 54px; padding-inline: 26px; }
.pieza-buscar::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--giro), #e72a88, #f39223, #09adc2, #8ab73b, #e72a88);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: giro-borde 5s linear infinite; opacity: .85; }
.pieza-buscar:focus-within::before { opacity: 1; animation-duration: 2.5s; }
@keyframes giro-borde { to { --giro: 360deg; } }
@keyframes halo-busca { 50% { box-shadow: 0 22px 60px -20px rgba(243, 146, 35, .5), 0 0 54px -12px rgba(231, 42, 136, .4); } }
.pieza-aviso { position: absolute; left: 0; right: 0; bottom: calc(34px + env(safe-area-inset-bottom)); font-size: 13.5px; padding: 0 var(--g); }
.pieza-aviso .enlace { font-size: 13.5px; }
@media (max-width: 820px) { .pieza-buscar { height: 62px; padding-left: 16px; } .pieza-buscar input { font-size: 16.5px; } .pieza-buscar .btn { min-height: 48px; padding-inline: 18px; } }
/* reseñas compactas aún más delgadas */
.resenas-sec--compacta .res-c { width: clamp(220px, 20vw, 270px); padding: 10px 14px; gap: 6px; }
.resenas-sec--compacta .res-c blockquote { font-size: 13px; line-height: 1.38; -webkit-line-clamp: 2; }
.resenas-sec--compacta .res-c figcaption { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.resenas-sec--compacta .res-estrellas svg { width: 12px; height: 12px; } .resenas-sec--compacta .res-c__src { font-size: 10px; padding: 2px 7px; }

/* productos: vitrina 3D */
.vitrina { position: relative; z-index: 3; height: 320vh; background: radial-gradient(110% 80% at 60% 40%, #fffdf9 0%, var(--papel) 55%, #efe6da 100%); }
.vitrina__pegajosa { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.vitrina__canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.vitrina__cab { position: absolute; left: var(--g); top: 50%; transform: translateY(-50%); width: min(30vw, 400px); display: grid; gap: 14px; z-index: 2; }
.vitrina__cab .titulo { font-size: clamp(2.4rem, 4.4vw, 4.4rem); }
.vitrina__lead { margin: 0; color: var(--tinta-2); font-size: 16px; }
.vitrina__todos { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 15px; color: var(--rosa); background: #fff; padding: 10px 18px; border-radius: 999px; box-shadow: 0 12px 30px -16px rgba(22, 18, 14, .4); margin-top: 6px; }
.vitrina__todos .flecha { width: 16px; }
.vitrina__rotulos { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.rotulo-v { position: absolute; left: 0; top: 0; display: grid; justify-items: center; text-align: center; padding: 6px 12px 7px; border-radius: 14px; pointer-events: auto; opacity: 0; transition: background-color .3s, box-shadow .3s; }
.rotulo-v b { font-size: 15px; letter-spacing: -.02em; line-height: 1.1; } .rotulo-v span { font-size: 12px; color: var(--tinta-2); font-weight: 560; }
.rotulo-v.on, .rotulo-v:hover { background: #fff; box-shadow: 0 10px 26px -14px rgba(22, 18, 14, .4); }
.vitrina__cuenta { display: none; }
@media (max-width: 820px) {
  .vitrina { height: 620vh; }
  .vitrina__cab { top: calc(var(--nav-h) + 2vh); transform: none; width: auto; right: var(--g); gap: 6px; }
  .vitrina__cab .titulo { font-size: 2.1rem; } .vitrina__lead { display: none; }
  .vitrina__todos { position: fixed; display: none; }
  .rotulo-v b { font-size: 21px; } .rotulo-v span { font-size: 13.5px; }
  .vitrina__cuenta { display: block; position: absolute; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2; font-family: var(--serif); font-style: italic; font-size: 17px; background: rgba(255, 255, 255, .94); padding: 6px 14px; border-radius: 999px; box-shadow: 0 10px 26px -14px rgba(22, 18, 14, .45); }
}

@media (max-width: 820px) {
  /* celular: el título tiene su fondo; los productos pasan por debajo */
  .vitrina__cab { top: 0; left: 0; right: 0; padding: calc(var(--nav-h) + 2vh) var(--g) 28px; background: linear-gradient(var(--papel) 72%, rgba(251, 248, 243, 0)); }
}

/* productos del inicio: tarjetas limpias con papel picado arriba */
.prods { position: relative; z-index: 3; background: var(--papel); padding: clamp(150px, 16vw, 220px) 0 clamp(80px, 9vw, 130px); overflow: hidden; }
.prods__banderas { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: clamp(120px, 13vw, 190px); pointer-events: none; }
.prods__cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: clamp(26px, 3.5vw, 44px); }
.prods__cab > div { display: grid; gap: 12px; }
.prods__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 24px); }
.pcard { position: relative; display: grid; background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 1px 2px rgba(22, 18, 14, .05), 0 22px 44px -30px rgba(22, 18, 14, .35); transition: transform .6s var(--expo), box-shadow .5s; isolation: isolate; }
.pcard::after { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), color-mix(in srgb, var(--c) 14%, transparent), transparent 55%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.pcard:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(22, 18, 14, .06), 0 34px 60px -30px rgba(22, 18, 14, .42); }
.pcard:hover::after { opacity: 1; }
.pcard__img { aspect-ratio: 4 / 3; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #fff 0%, color-mix(in srgb, var(--c) 15%, #fff) 85%); }
.pcard__img img { width: 72%; height: 82%; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(22, 18, 14, .22)); transition: transform .8s var(--expo); }
.pcard:hover .pcard__img img { transform: translateY(-6px) scale(1.06) rotate(-2deg); }
.pcard__txt { display: grid; gap: 2px; padding: 16px 18px 18px; }
.pcard__txt small { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--c); }
.pcard__txt b { font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -.03em; line-height: 1.1; }
.pcard__txt span { font-size: 14px; color: var(--tinta-2); } .pcard__txt em { font-style: normal; font-weight: 700; color: var(--tinta); }
.pcard__ir { position: absolute; right: 16px; bottom: 18px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--papel); color: var(--tinta); transition: background-color .3s, color .3s, transform .5s var(--expo); }
.pcard__ir .flecha { width: 17px; }
.pcard:hover .pcard__ir { background: var(--c); color: #fff; transform: translateX(3px); }
.prods__todos { display: none; justify-content: center; margin-top: 28px; }
@media (max-width: 820px) {
  .prods { padding-top: 130px; }
  .prods__banderas { height: 112px; }
  .prods__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pcard { border-radius: 20px; } .pcard__img { aspect-ratio: 1; } .pcard__img img { width: 82%; }
  .pcard__txt { padding: 10px 12px 14px; } .pcard__txt b { font-size: 17px; } .pcard__txt span { font-size: 12.5px; } .pcard__txt small { font-size: 10px; }
  .pcard__ir { display: none; }
  .prods__todos { display: flex; }
}
@media (max-width: 820px) { .pcard:last-child:nth-child(odd) { grid-column: span 2; grid-template-columns: 1fr 1fr; align-items: center; } .pcard:last-child:nth-child(odd) .pcard__img { aspect-ratio: 1; } }

/* productos del inicio: bento con jerarquía (los imanes al frente) */
.bento-p { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(190px, 17vw, 250px); gap: clamp(12px, 1.4vw, 20px); }
.bp { position: relative; overflow: hidden; border-radius: 28px; display: grid; isolation: isolate; color: var(--tinta);
  background: radial-gradient(120% 120% at 70% 30%, #fff 0%, color-mix(in srgb, var(--c) 14%, #fff) 70%, color-mix(in srgb, var(--c) 22%, #fff) 100%);
  box-shadow: 0 1px 2px rgba(22, 18, 14, .05), 0 22px 44px -32px rgba(22, 18, 14, .4); transition: transform .6s var(--expo), box-shadow .5s; }
.bp:hover { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(22, 18, 14, .06), 0 34px 60px -30px rgba(22, 18, 14, .45); }
.bp::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx, 60%) var(--my, 30%), color-mix(in srgb, var(--c) 16%, transparent), transparent 60%); opacity: 0; transition: opacity .4s; }
.bp:hover::after { opacity: 1; }
.bp__img { position: absolute; display: grid; place-items: center; pointer-events: none; }
.bp__img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(22, 18, 14, .24)); transition: transform .8s var(--expo); }
.bp:hover .bp__img img { transform: scale(1.06) rotate(-2deg); }
.bp__txt { position: relative; z-index: 1; align-self: end; display: grid; gap: 3px; padding: clamp(16px, 1.8vw, 26px); max-width: 62%; }
.bp__txt small { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--c); }
.bp__txt b { font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.035em; line-height: 1.05; }
.bp__txt i { font-style: normal; font-size: 14.5px; color: var(--tinta-2); line-height: 1.35; margin: 2px 0 4px; }
.bp__txt span { font-size: 14px; color: var(--tinta-2); } .bp__txt em { font-style: normal; font-weight: 700; color: var(--tinta); }
.bp__ir { position: absolute; right: 16px; top: 16px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .85); transition: background-color .3s, color .3s, transform .5s var(--expo); }
.bp__ir .flecha { width: 17px; } .bp:hover .bp__ir { background: var(--c); color: #fff; transform: translateX(3px); }
/* tamaños */
.bp--grande { grid-column: span 2; grid-row: span 2; }
.bp--grande .bp__img { inset: 6% 6% 26% 6%; } .bp--grande .bp__txt { max-width: 80%; } .bp--grande .bp__txt b { font-size: clamp(34px, 3.6vw, 52px); } .bp--grande .bp__txt i { font-size: 17px; }
.bp--ancho { grid-column: span 2; } .bp--ancho .bp__img { top: 8%; bottom: 8%; right: 4%; width: 46%; } .bp--ancho .bp__txt { max-width: 52%; }
.bp--medio { grid-column: span 2; } .bp--medio .bp__img { top: 10%; bottom: 10%; right: 5%; width: 42%; } .bp--medio .bp__txt { max-width: 55%; }
.bp--chico .bp__img { inset: 8% 10% 42% 10%; } .bp--chico .bp__txt { max-width: 100%; } .bp--chico .bp__ir { width: 34px; height: 34px; }
@media (max-width: 820px) {
  .bento-p { grid-template-columns: 1fr 1fr; grid-auto-rows: 172px; gap: 10px; }
  .bp { border-radius: 22px; }
  .bp--grande { grid-column: span 2; grid-row: span 2; } .bp--grande .bp__txt b { font-size: 32px; } .bp--grande .bp__txt i { font-size: 14px; }
  .bp--ancho, .bp--medio { grid-column: span 1; grid-row: span 1; }
  .bp--ancho .bp__img, .bp--medio .bp__img { inset: 8% 10% 42% 10%; width: auto; } .bp--ancho .bp__txt, .bp--medio .bp__txt { max-width: 100%; }
  .bp--ancho .bp__txt i, .bp--medio .bp__txt i { display: none; }
  .bp__txt { padding: 12px 14px 14px; } .bp__txt b { font-size: 18px; } .bp__txt span { font-size: 12.5px; } .bp__txt small { font-size: 10px; }
  .bp__ir { display: none; } .bp--grande .bp__ir { display: grid; }
}

/* bento: en bloques chicos (y en celular) la imagen tiene su propio espacio arriba y el texto va abajo: nunca se enciman */
.bp--chico { grid-template-rows: minmax(0, 1fr) auto; }
.bp--chico .bp__img { position: relative; inset: auto; width: auto; height: auto; min-height: 0; padding: 18px 18px 4px; }
.bp--chico .bp__txt { padding-top: 6px; }
@media (max-width: 820px) {
  .bento-p { grid-auto-rows: 196px; }
  .bp--ancho, .bp--medio, .bp--chico { grid-template-rows: minmax(0, 1fr) auto; }
  .bp--ancho .bp__img, .bp--medio .bp__img, .bp--chico .bp__img { position: relative; inset: auto; width: auto; height: auto; min-height: 0; padding: 14px 14px 2px; }
  .bp--ancho .bp__txt, .bp--medio .bp__txt, .bp--chico .bp__txt { padding-top: 4px; }
}
/* la imagen queda fija dentro de su espacio (con una imagen cuadrada, height:100% no se respetaba) */
.bp--chico .bp__img img { position: absolute; left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 22px); }
@media (max-width: 820px) {
  .bp--ancho .bp__img img, .bp--medio .bp__img img, .bp--chico .bp__img img { position: absolute; left: 14px; top: 14px; width: calc(100% - 28px); height: calc(100% - 16px); }
}
/* bento sin hueco (2026-09-30, productos-inicio.js): en celular, si queda un bloque solo al final (.bp--fila),
   ocupa todo el renglón como los medios de la computadora: texto a la izquierda, pieza a la derecha */
@media (max-width: 820px) {
  .bento-p .bp--fila { grid-column: span 2; grid-template-rows: none; }
  .bento-p .bp--fila .bp__img { position: absolute; inset: 10% 5% 10% auto; width: 44%; height: auto; padding: 0; }
  .bento-p .bp--fila .bp__img img { left: 0; top: 0; width: 100%; height: 100%; }
  .bento-p .bp--fila .bp__txt { max-width: 56%; padding-top: 12px; }
  .bento-p .bp--fila .bp__txt i { display: block; }
}

/* ===== Ronda 8: leyenda del inicio en dos renglones centrados (no llega a las piezas de los lados) ===== */
@media (min-width: 821px) { .hero__abajo .lead { max-width: 25em; } }

/* ===== Ronda 8: "Entre más piezas, más diseños" — la tarjeta de diseños nunca tapa la calculadora ===== */
@media (max-width: 820px) {
  .nivel { align-self: start; }
  .disena3__cab, .disena3 .calc, .nivel { width: 100%; max-width: 560px; justify-self: center; }
}
@media (max-width: 820px) and (max-height: 780px) {
  .disena3__cab .titulo { font-size: 1.75rem; }
  .nivel__nota { display: none; }
  .nivel__cab b { font-size: 2.1rem; }
  .nivel__disenos { margin: 8px 0 2px; }
}
@media (max-width: 820px) and (min-width: 481px) and (max-height: 780px) {
  .nivel__d, .nivel__d.on { width: calc(12.5% - 6px); }
}

/* ===== Ronda 8: mapa — los destinos llevan a Una pieza; en celular la tarjeta es más baja y compacta ===== */
a.elemento { display: block; color: inherit; text-decoration: none; transition: transform .35s var(--expo), box-shadow .35s; }
a.elemento:hover { transform: translateY(-3px); }
a.elemento:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }
a.pin { color: inherit; text-decoration: none; }
.pin.on { pointer-events: auto; cursor: pointer; }
@media (max-width: 820px) {
  .region-panel { padding: 10px 12px; gap: 4px; bottom: calc(80px + env(safe-area-inset-bottom)); border-radius: 18px; }
  .region-panel .num { font-size: 14px; }
  .region-panel h2 { font-size: 1.55rem; }
  .region-panel .estados { font-size: 11.5px; line-height: 1.3; }
  .elementos { grid-auto-columns: 33%; gap: 8px; margin-top: 4px; }
  .elemento { aspect-ratio: 3 / 2; border-radius: 12px; }
  .elemento span { left: 8px; right: 8px; bottom: 6px; font-size: 10.5px; }
  .elemento span b { font-size: 12px; }
}

/* ===== Ronda 8: puertas legibles — foto arriba sin texto encima, texto sobre fondo sólido ===== */
.puerta { display: grid; grid-template-rows: clamp(220px, 22vw, 300px) auto; padding: 0; min-height: 0; gap: 0; justify-content: stretch; background: #1a1511; }
.puerta::after { display: none; }
.puerta__foto { position: relative; overflow: hidden; }
.puerta__foto img.fondo { z-index: 0; }
.puerta__txt { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 3vw, 40px); }
.puerta h3 { font-size: clamp(1.9rem, 3.1vw, 2.9rem); }
.puerta p { font-size: 16px; color: rgba(255, 255, 255, .8); }
.puerta .botones { margin-top: 4px; }
@media (max-width: 820px) { .puerta { grid-template-rows: 190px auto; } .puerta__txt { padding: 20px; gap: 10px; } .puerta h3 { font-size: 1.8rem; } .puerta p { font-size: 15px; } }

/* ===== Ronda 8: el mapa ahora va más abajo — recorrido más corto para que se vea completo ===== */
.cap-mapa { height: 850vh; }
@media (max-width: 820px) { .cap-mapa { height: 800vh; } }

/* ===== Ronda 8b: tarjetas de "lo que nos hace diferentes" — el texto va junto, arriba (sin hueco en medio) ===== */
.pila__txt { align-content: start; gap: clamp(18px, 2.4vw, 32px); }

/* ===== Ronda 8c: en el pie, "Productos" es un solo link a la colección ===== */
.pie__titulo-link { color: inherit; text-decoration: none; transition: color .25s; }
.pie__titulo-link:hover, .pie__titulo-link:focus-visible { color: var(--rosa); }

/* ===== Ronda 9: "Lo que la hace especial" es un carrusel que avanza solo (ya no se ata al scroll) ===== */
.galeria--carrusel { height: auto; padding: clamp(20px, 3vw, 40px) 0 clamp(64px, 8vw, 110px); }
.galeria--carrusel .galeria__pegajosa { position: relative; height: auto; overflow: visible; }
.galeria--carrusel .galeria__marco { touch-action: pan-y; }
.galeria--carrusel .galeria__cap { bottom: clamp(62px, 6vw, 84px); }
.galeria__ctrl { position: absolute; left: 0; right: 0; bottom: clamp(18px, 2vw, 26px); z-index: 3; display: flex; justify-content: center; align-items: center; gap: 12px; }
.galeria__puntos { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: rgba(12, 10, 8, .32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.galeria__puntos button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .5); cursor: pointer; transition: width .5s var(--expo), background-color .3s; }
.galeria__puntos button.on { width: 28px; background: #fff; }
.galeria__puntos button:focus-visible, .galeria__pausa:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.galeria__pausa { width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(12, 10, 8, .32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.galeria__pausa i { width: 10px; height: 12px; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.galeria__pausa.en-pausa i { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; margin-left: 3px; }

/* ===== Rondas 9-10: página de producto ===== */
/* características: "Tu destino" a todo lo ancho y, debajo, dos cuadrados de media anchura (ronda 10) */
.bento--prod { max-width: 920px; margin-inline: auto; grid-template-columns: 1fr 1fr; }
.bento--prod .bento__c.a6 { grid-column: 1 / -1; min-height: 240px; }
.bento__c--destino { background: color-mix(in srgb, var(--c) 9%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); }
.bento__c--destino p { max-width: 520px; font-size: 16.5px; }
.bento__c--cuadro { grid-column: span 1; aspect-ratio: 1 / 1; min-height: 0; gap: 10px; }
.bento__c--cuadro .bento__ico { margin-bottom: auto; }
.bento__num { font-size: clamp(3.6rem, 11vw, 8.5rem); font-weight: 780; letter-spacing: -.065em; line-height: .82; color: var(--c); font-variant-numeric: tabular-nums; }
.bento__c--cuadro h3 { font-size: clamp(1.1rem, 2vw, 1.6rem); }
@media (max-width: 820px) { .bento--prod .bento__c.a6 { min-height: 200px; } }
@media (max-width: 600px) {
  .bento__c--cuadro { padding: 16px; gap: 6px; border-radius: 22px; }
  .bento__c--cuadro .bento__ico { width: 34px; height: 34px; border-radius: 10px; }
  .bento__c--cuadro .bento__ico svg { width: 18px; height: 18px; }
  .bento__c--cuadro p { display: none; }
  .bento__c--cuadro h3 { font-size: 15px; letter-spacing: -.02em; line-height: 1.1; }
}

/* diseños según tu pedido, dentro de las preguntas */
.modelos--faq { margin: 12px 0 4px; padding: 0; background: none; box-shadow: none; }

/* tamaños y precios del imán clásico (ronda 10): render ancho, el selector debajo y los precios aparte */
.tallas__escena { position: relative; max-width: 1040px; margin: 0 auto; aspect-ratio: 2 / 1; border-radius: clamp(24px, 3vw, 36px); background: radial-gradient(120% 90% at 50% 38%, #fff 0%, var(--papel-2) 72%); box-shadow: inset 0 0 0 1px var(--linea); overflow: hidden; }
.tallas__escena canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tallas__img { display: none; }
.tallas__cota { position: absolute; left: 0; top: 0; height: 0; pointer-events: none; }
.tallas__cota i { position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: var(--tinta); }
.tallas__cota i::before, .tallas__cota i::after { content: ""; position: absolute; top: -6px; width: 1.5px; height: 13px; background: var(--tinta); }
.tallas__cota i::before { left: 0; }
.tallas__cota i::after { right: 0; }
.tallas__cota span { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); font-weight: 740; font-size: clamp(18px, 1.9vw, 26px); letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* selector: el mismo de Clásico · 3D · 4D, con la pastilla blanca que se desliza */
.tallas__controles { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: clamp(18px, 2.4vw, 28px) auto 0; }
/* formato (opción C de Iván): interruptor chico de vidrio en la esquina del render; sus íconos son la silueta real de cada pieza */
.tallas__sw { position: absolute; right: clamp(14px, 2vw, 22px); top: clamp(14px, 2vw, 22px); z-index: 2; display: flex; padding: 4px; border-radius: 999px; background: rgba(244, 238, 229, .92); box-shadow: inset 0 0 0 1px var(--linea); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tallas__sw button { display: grid; place-items: center; width: 50px; height: 38px; padding: 0; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 12px; font-weight: 700; color: var(--tinta-2); cursor: pointer; transition: background-color .35s, box-shadow .35s; }
.tallas__sw svg { width: 27px; height: auto; max-height: 24px; }
.tallas__sw polygon { fill: var(--tinta-3); transition: fill .35s; }
.tallas__sw button:hover polygon { fill: var(--tinta-2); }
.tallas__sw button.on { background: #fff; box-shadow: 0 2px 10px rgba(22, 18, 14, .14); }
.tallas__sw button.on polygon { fill: var(--tinta); }
.tallas__segs { position: relative; display: flex; width: max-content; padding: 5px; border-radius: 999px; background: var(--papel-2); }
.tallas__segs button { position: relative; z-index: 1; min-height: 46px; padding: 0 clamp(20px, 2.6vw, 32px); border: 0; border-radius: 999px; background: none; font: inherit; font-weight: 700; font-size: 17px; color: var(--tinta-2); cursor: pointer; transition: color .35s; }
.tallas__segs button.on { color: var(--c); }
.tallas__marca { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: #fff; box-shadow: 0 2px 10px rgba(22, 18, 14, .14); }
/* precios: bloque propio, con aire */
.tallas__precio { max-width: 820px; margin: clamp(56px, 8vw, 104px) auto 0; display: grid; justify-items: center; gap: clamp(18px, 2.4vw, 26px); text-align: center; }
.tallas__sub { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--tinta-2); }
.tallas__sub b { color: var(--tinta); }
.tallas__tramos { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.tallas__tramo { display: grid; gap: 10px; justify-items: center; align-content: start; padding: 4px clamp(10px, 3vw, 40px); }
.tallas__tramo + .tallas__tramo { box-shadow: -1px 0 0 var(--linea-2); }
.tallas__tag { padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font-size: 11.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.tallas__tramo small { font-size: 15px; font-weight: 620; color: var(--tinta-2); }
.tallas__tramo b { font-size: clamp(3.4rem, 8vw, 6rem); font-weight: 780; letter-spacing: -.065em; line-height: .88; font-variant-numeric: tabular-nums; }
.tallas__tramo b span { margin-left: 6px; font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--tinta-2); }
.tallas__tramo em { font-style: normal; font-size: 14px; color: var(--tinta-3); }
.tallas__tramo--mayoreo b { color: var(--c); }
.tallas__precio .chico { margin: 0; }
.tallas--sin-3d .tallas__img { display: block; position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); height: auto; transition: width .9s var(--expo); }
.tallas--sin-3d .tallas__cota { left: 50% !important; top: auto !important; bottom: 12%; width: 0 !important; }
.tallas--sin-3d .tallas__cota i { display: none; }
/* en computadora el render se ajusta al alto de la ventana y el selector va en su borde de abajo (como el
   comparador), así al entrar a #precios se ven los dos sin bajar */
@media (min-width: 821px) {
  .tallas.seccion { padding-top: clamp(48px, 5vw, 76px); }
  .tallas__escena { aspect-ratio: auto; height: clamp(290px, calc(100svh - 424px), 500px); }
  .tallas__controles { margin-top: -78px; }
  .tallas__segs { background: rgba(244, 238, 229, .92); box-shadow: inset 0 0 0 1px var(--linea), 0 10px 26px -14px rgba(22, 18, 14, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
@media (max-width: 820px) {
  .tallas__escena { aspect-ratio: 10 / 9; }
  .tallas__sw button { width: 44px; height: 34px; } .tallas__sw svg { width: 24px; max-height: 21px; }
  .tallas__segs button { min-height: 42px; font-size: 16px; }
  .tallas__tramo small { font-size: 13.5px; }
  .tallas__tramo em { font-size: 12.5px; }
}

/* ficha técnica (ronda 10b): hoja de dibujo clara dentro de la página (el negro "rompía"); el contorno real
   se dibuja como plano y los datos entran como lecturas */
.ficha__hoja { position: relative; isolation: isolate; overflow: hidden; border-radius: clamp(24px, 3vw, 36px); background: #fff; box-shadow: inset 0 0 0 1px var(--linea); padding: clamp(22px, 4vw, 56px); margin-top: clamp(24px, 3vw, 40px); }
.ficha__hoja::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(22, 18, 14, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 18, 14, .055) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(70% 80% at 30% 50%, #000 20%, transparent 80%); mask-image: radial-gradient(70% 80% at 30% 50%, #000 20%, transparent 80%); }
.ficha__hoja::after { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(42% 60% at 28% 50%, color-mix(in srgb, var(--c) 9%, transparent), transparent 72%); }
.ficha__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ficha--sin-plano .ficha__grid { grid-template-columns: 1fr; }
.ficha__plano { position: relative; margin: 0; display: grid; place-items: center; }
.plano { width: 100%; height: clamp(280px, 34vw, 460px); overflow: visible; --u: 1; }
.plano__trazo { fill: none; stroke: var(--tinta); stroke-width: calc(1.6px * var(--u)); stroke-linejoin: round; }
.plano__trazo--atras { stroke: var(--c); stroke-opacity: .6; }
.plano__trazo--a2 { stroke-opacity: .35; }
.plano__mira { fill: none; stroke: var(--c); stroke-width: calc(1.2px * var(--u)); }
.plano__cota path { fill: none; stroke: var(--c); stroke-width: calc(1.3px * var(--u)); }
.plano__cota .plano__guia { stroke: rgba(22, 18, 14, .28); stroke-dasharray: calc(4px * var(--u)) calc(4px * var(--u)); }
.plano text { fill: var(--tinta); font-size: calc(15px * var(--u)); font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.plano .plano__eti { fill: var(--tinta-3); font-size: calc(11px * var(--u)); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
/* un haz del color del producto barre el plano cada tanto, como un escáner */
.ficha__plano::after { content: ""; position: absolute; top: 4%; bottom: 4%; left: 0; width: 2px; background: linear-gradient(180deg, transparent, var(--c), transparent); box-shadow: 0 0 18px 3px color-mix(in srgb, var(--c) 30%, transparent); opacity: 0; animation: ficha-barrido 7s var(--expo) 2.8s infinite; pointer-events: none; }
@keyframes ficha-barrido { 0% { left: 0; opacity: 0; } 8% { opacity: .7; } 42% { left: 100%; opacity: .7; } 50%, 100% { left: 100%; opacity: 0; } }
.ficha__datos { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(18px, 3vw, 36px); border-top: 1px solid var(--linea-2); }
.ficha--sin-plano .ficha__datos { grid-template-columns: repeat(3, 1fr); }
.ficha__dato { padding: clamp(16px, 2vw, 22px) 0; border-bottom: 1px solid var(--linea); }
.ficha__dato dt { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }
.ficha__dato dt::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); flex: none; }
.ficha__dato dd { margin: 0; font-size: clamp(1.05rem, 1.45vw, 1.25rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; color: var(--tinta); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .ficha__grid { grid-template-columns: 1fr; }
  .plano { height: clamp(220px, 58vw, 360px); }
  .ficha--sin-plano .ficha__datos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .ficha__datos, .ficha--sin-plano .ficha__datos { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ficha__plano::after { animation: none; } }

/* hoja "Comprar" (ronda 10): primero y en grande el mayoreo; una sola pieza, chico y solo con logos */
.compra-mayoreo { display: grid; gap: 6px; margin-top: 14px; padding: clamp(20px, 3vw, 26px); border-radius: 24px; background: var(--rosa); color: #fff; text-decoration: none; box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--rosa) 80%, transparent); transition: transform .5s var(--expo), box-shadow .5s var(--expo); }
.compra-mayoreo:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -18px color-mix(in srgb, var(--rosa) 85%, transparent); }
.compra-mayoreo__eti { font-size: 12px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.compra-mayoreo b { font-size: clamp(1.5rem, 4.6vw, 1.9rem); letter-spacing: -.04em; line-height: 1.05; }
.compra-mayoreo small { font-size: 15px; opacity: .88; }
.compra-mayoreo__cta { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 10px; padding: 11px 18px; border-radius: 999px; background: #fff; color: var(--rosa); font-weight: 700; font-size: 15.5px; }
.compra-mayoreo__cta .flecha { width: 16px; }
.compra-pieza { display: grid; gap: 10px; margin-top: 18px; }
.compra-pieza > span { font-size: 14.5px; font-weight: 650; color: var(--tinta-2); }
.compra-pieza__logos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compra-pieza__logos a { display: grid; place-items: center; height: 46px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea); transition: transform .4s var(--expo), box-shadow .4s; }
.compra-pieza__logos a:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.compra-pieza__logos .logo-tienda { width: 100%; height: 100%; border-radius: 14px; padding: 8px 14px; box-shadow: none; }

/* WhatsApp dentro de los menús (ronda 12): el botón flotante se veía intrusivo. Un ícono discreto en el color del
   texto que se vuelve verde al pasar; en la barra de abajo del celular, un círculo blanco chico junto a Comprar y Mayoreo
   (en la barra del producto NO: Iván lo pidió fuera) */
.nav__wa, .barra-movil__wa { display: grid; place-items: center; flex: none; border-radius: 999px; transition: background-color .25s, color .25s, transform .4s var(--expo); }
.nav__wa { width: 44px; height: 44px; color: currentColor; }
.nav__wa svg { width: 19px; height: 19px; }
.nav__wa:hover { background: rgba(22, 18, 14, .05); color: #1ea952; }
.barra-movil__wa { width: 48px; height: 48px; background: #fff; color: #1ea952; box-shadow: inset 0 0 0 1px var(--linea); }
.barra-movil__wa svg { width: 22px; height: 22px; }
.barra-movil__wa:active { transform: scale(.94); }

/* ===== Imán 4D (ronda 4, 2026-09-29): menos animaciones, sin bloques pesados =====
   Precio + ganancia sin 3D, el armado con la pieza siempre arriba de su tarjeta, la cocina en su cuadro con un
   selector igual al del comparador. Solo tipografías del sitio. Celular primero. */
.p4d .seccion { padding: clamp(56px, 8vw, 112px) 0; }

/* precio directo de fábrica + tu ganancia */
.pg4d__grid { display: grid; gap: clamp(44px, 6vw, 72px); }
.pg4d__filas { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; margin-top: 16px; }
.p4d-fila { padding: 10px 0 4px; border-top: 1px solid var(--linea); }
.p4d-fila small { display: block; font-size: 11px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.p4d-fila b { display: flex; align-items: baseline; margin-top: 4px; font-size: clamp(56px, 16vw, 120px); font-weight: 300; letter-spacing: -.06em; line-height: .9; font-variant-numeric: lining-nums; }
.p4d-fila b sup { align-self: flex-start; margin: .1em .04em 0 0; font-size: .3em; font-weight: 450; letter-spacing: 0; line-height: 1; }
.p4d-fila b span { margin-left: .22em; font-size: .2em; font-weight: 550; letter-spacing: 0; color: var(--tinta-3); }
.p4d-fila--b b { color: var(--c); }
.p4d-fmt { margin: 12px 0 0; font-size: 13px; color: var(--tinta-3); }
.g4d-frase { max-width: 21ch; margin: 16px 0 0; font-size: clamp(30px, 8.4vw, 72px); font-weight: 600; letter-spacing: -.045em; line-height: 1.12; text-wrap: pretty; }
.g4d-num { display: inline-block; border-radius: 8px; color: var(--c); cursor: ew-resize; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.g4d-num b { font-weight: 650; text-decoration: underline dotted 3px; text-underline-offset: .14em; font-variant-numeric: tabular-nums; }
.g4d-num:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.g4d-num.activo b { text-decoration-style: solid; }
.g4d-total { color: var(--rosa); font-weight: 700; font-variant-numeric: tabular-nums; }
.g4d-barra { display: flex; gap: 4px; height: 72px; margin-top: 22px; }
.g4d-seg { display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; min-width: 0; padding: 10px 12px; overflow: hidden; white-space: nowrap; border-radius: 6px; transition: flex-grow .9s var(--expo); }
.g4d-seg span { font-size: 10.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.g4d-seg b { font-size: 21px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.g4d-seg--costo { background: repeating-linear-gradient(135deg, rgba(22, 18, 14, .09) 0 1px, transparent 1px 7px), var(--papel-2); color: var(--tinta-2); }
.g4d-seg--gana { background: var(--rosa); color: #fff; }
.g4d-pie { margin: 12px 0 0; font-size: 15px; line-height: 1.45; color: var(--tinta-2); }
.g4d-pie b { color: var(--tinta); }
.g4d-pista { margin: 10px 0 0; font-size: 11px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); transition: opacity .5s; }
.g4d-tocado .g4d-pista { opacity: 0; }
@media (min-width: 821px) {
  .pg4d__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
  .pg4d__ganancia { padding-left: clamp(28px, 4vw, 64px); border-left: 1px solid var(--linea); }
  .pg4d__filas { grid-template-columns: 1fr; }
  .p4d-fila { padding: 12px 0 6px; }
  .p4d-fila b { font-size: clamp(76px, 7vw, 120px); }
  .g4d-frase { font-size: clamp(36px, 3.4vw, 56px); }
  .g4d-barra { height: 88px; margin-top: 30px; }
  .g4d-seg { padding: 14px 16px; }
  .g4d-seg b { font-size: clamp(22px, 2vw, 30px); }
}

/* así se arma (celular: tarjeta abajo, arriba de la barra del producto; la pieza se encuadra arriba de la tarjeta) */
.armado4d { position: relative; z-index: 3; height: 380vh; background: var(--papel); }
.armado4d__pegajosa { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.armado4d__pegajosa > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.armado4d__guia span { position: absolute; left: 0; top: 0; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #fff; font-size: 13px; font-weight: 800; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent), 0 6px 16px -6px rgba(22, 18, 14, .5); }
.armado4d__texto { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: calc(96px + env(safe-area-inset-bottom)); display: grid; gap: 8px; padding: 16px 18px; border-radius: 22px;
  background: color-mix(in srgb, #fff 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 30px -14px rgba(22, 18, 14, .35); }
.armado4d__texto .titulo-m { margin: 0; font-size: 1.5rem; }
.a4d-pasos { margin: 0; padding: 0; list-style: none; }
.a4d-pasos li { display: none; font-size: 15px; line-height: 1.42; color: var(--tinta-2); }
.a4d-pasos li.on { display: block; }
.a4d-pasos li b { color: var(--tinta); }
.a4d-barra { height: 2px; overflow: hidden; border-radius: 2px; background: var(--papel-3); }
.a4d-barra i { display: block; height: 100%; background: var(--c); transform-origin: left; transform: scaleX(0); }
@media (min-width: 821px) {
  .armado4d { height: 420vh; }
  .armado4d__texto { top: 50%; bottom: auto; left: max(var(--g), calc((100vw - var(--max)) / 2 + var(--g))); right: auto; width: min(420px, 34vw); transform: translateY(-50%);
    gap: 14px; padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .armado4d__texto .titulo-m { font-size: clamp(1.8rem, 4.2vw, 3.3rem); }
  .a4d-pasos { display: grid; gap: 12px; margin-top: 8px; }
  .a4d-pasos li { display: block; padding-left: 16px; border-left: 2px solid var(--papel-3); font-size: 16.5px; opacity: .32; transition: opacity .5s var(--expo), border-color .5s; }
  .a4d-pasos li.on { opacity: 1; border-color: var(--c); }
}
.armado4d--sin-3d { height: auto; padding: clamp(56px, 8vw, 112px) 0; }
.armado4d--sin-3d .armado4d__pegajosa { position: static; height: auto; overflow: visible; }
.armado4d--sin-3d canvas, .armado4d--sin-3d .armado4d__guia, .armado4d--sin-3d .a4d-barra { display: none; }
.armado4d--sin-3d .armado4d__texto { position: static; transform: none; width: auto; max-width: 720px; margin: 0 var(--g); }
.armado4d--sin-3d .a4d-pasos li { display: block; margin-top: 8px; opacity: 1; }

/* de pie o en el refri: la escena a pantalla completa (Iván, 2026-09-29), el título encima y el selector abajo,
   igual al del comparador (Clásico · 3D · 4D) */
.donde4d { position: relative; z-index: 3; background: #e9e5de; }
.donde4d__escena { position: relative; width: 100%; height: 100vh; height: 100svh; overflow: hidden; background: #e9e5de; }
.donde4d__escena canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; }
.donde4d--lista canvas { opacity: 1; }
.donde4d__escena::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 2; height: 34%; pointer-events: none; background: linear-gradient(180deg, rgba(251, 248, 243, .82), rgba(251, 248, 243, 0)); }
.donde4d__cab { position: absolute; z-index: 3; top: calc(var(--nav-h) + 16px); left: var(--g); right: var(--g); display: grid; gap: 10px; justify-items: center; text-align: center; pointer-events: none; }
.donde4d__cab .titulo-m { margin: 0; }
.donde4d__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.donde4d__foto[hidden] { display: none; } /* la regla global de img le quitaba el hidden */
.donde4d--sin-3d canvas { display: none; }
.donde4d--sin-3d .donde4d__escena::before { height: 40%; background: linear-gradient(180deg, rgba(251, 248, 243, .95) 45%, rgba(251, 248, 243, 0)); }   /* la foto es más cargada que la cocina */
.segs4d { position: absolute; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 3; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--papel-2); transform: translateX(-50%); box-shadow: 0 10px 26px -14px rgba(22, 18, 14, .35); }
.segs4d button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: none; font: inherit; font-weight: 650; font-size: 15px; color: var(--tinta-2); cursor: pointer; transition: background-color .3s, color .3s; }
.segs4d button[aria-selected="true"] { background: #fff; color: var(--c); box-shadow: 0 2px 8px rgba(22, 18, 14, .12); }

/* ===== Próximamente (Iván, 2026-09-29): solo el imán y el 4D se venden; los demás se ven con esta etiqueta
   y su página es la pantalla "Próximamente" (sitio/js/proximamente.js) ===== */
.pronto { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--tinta); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; white-space: nowrap; vertical-align: middle; }
.pronto::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--naranja); animation: pronto-latido 2.2s var(--suave) infinite; }
@keyframes pronto-latido { 0% { box-shadow: 0 0 0 0 rgba(243, 146, 35, .6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(243, 146, 35, 0); } }
.pronto--esquina { position: absolute; top: 12px; left: 12px; z-index: 3; }
.mega__item b:has(.pronto) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mega__item .pronto { padding: 2px 7px 2px 6px; font-size: 9.5px; }
.menu-movil__sub .pronto { align-self: flex-start; margin-top: -2px; padding: 2px 7px 2px 6px; font-size: 9px; }
table .pronto { margin-left: 4px; }

.pronto-esc { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; background: var(--papel); }
.pronto-esc__plano { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(color-mix(in srgb, var(--turquesa) 13%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--turquesa) 13%, transparent) 1px, transparent 1px);
  background-size: 32px 32px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 25%, transparent 75%); }
.pronto-esc__fantasma { position: absolute; left: 50%; top: 52%; z-index: -1; transform: translate(-50%, -50%); font-size: clamp(6rem, 26vw, 24rem); font-weight: 800; letter-spacing: -.07em;
  line-height: .8; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c) 30%, transparent); pointer-events: none; user-select: none; }
.pronto-esc__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.pronto-esc--3d .pronto-esc__canvas { opacity: 1; }
.pronto-esc__grid { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; max-width: var(--max); margin: 0 auto; display: grid; grid-template-rows: auto minmax(200px, 1fr) auto; gap: 14px;
  padding: calc(var(--nav-h) + 22px) var(--g) calc(26px + env(safe-area-inset-bottom)); pointer-events: none; }
.pronto-esc__cab, .pronto-esc__pie { pointer-events: auto; display: grid; justify-items: center; text-align: center; gap: 12px; }
.pronto-esc__titulo { margin: 0; font-size: clamp(2.9rem, 13.2vw, 7.4rem); line-height: .92; letter-spacing: -.055em; font-weight: 720; }
.pronto-esc__punto { color: var(--c); }
.pronto-esc__pieza { position: relative; display: grid; place-items: center; pointer-events: auto; touch-action: pan-y; cursor: grab; }
.pronto-esc__pieza img { width: min(72%, 380px); max-height: 100%; object-fit: contain; filter: drop-shadow(0 22px 26px rgba(22, 18, 14, .2)); }
.pronto-esc__raya { position: absolute; left: 14%; right: 14%; top: 12%; height: 2px; border-radius: 2px; background: var(--laser); box-shadow: 0 0 16px 2px rgba(243, 146, 35, .5);
  animation: pronto-raya 3.4s var(--suave) infinite; }
@keyframes pronto-raya { 0% { top: 12%; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: 88%; opacity: 0; } }
.pronto-esc--3d .pronto-esc__pieza img, .pronto-esc--3d .pronto-esc__raya { opacity: 0; animation: none; transition: opacity .6s; }   /* la foto le cede el lugar a la pieza 3D */
.pronto-esc__pie .lead { max-width: 34ch; font-size: clamp(1rem, 1.5vw, 1.2rem); }
.pronto-esc__hoy { display: grid; justify-items: center; gap: 8px; }
.pronto-esc__hoy-t { font-size: 12px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.pronto-esc__tarjetas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pronto-mini { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 16px 6px 6px; border-radius: 999px; background: #fff; box-shadow: var(--sombra);
  font-weight: 650; font-size: 15px; letter-spacing: -.01em; transition: transform .45s var(--expo), box-shadow .45s var(--expo); }
.pronto-mini:hover { transform: translateY(-2px); box-shadow: var(--sombra-l); }
.pronto-mini__img { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--c) 14%, #fff); }
.pronto-mini__img img { width: 84%; height: 84%; object-fit: contain; }
.pronto-mini .flecha { width: 16px; height: 16px; color: var(--c); }
.pronto-esc__wa { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--tinta-2); }
.pronto-esc__wa span { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--linea-2); }
.pronto-esc__wa svg { width: 18px; height: 18px; color: #25d366; }
@media (min-width: 821px) {
  .pronto-esc__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(24px, 4vw, 72px); row-gap: 26px; padding-bottom: 56px; }
  .pronto-esc__cab { grid-column: 1; grid-row: 2; justify-items: start; text-align: left; }
  .pronto-esc__pie { grid-column: 1; grid-row: 3; justify-items: start; text-align: left; gap: 18px; }
  .pronto-esc__titulo { font-size: clamp(3.6rem, 6.4vw, 7rem); }
  .pronto-esc__pie .lead { max-width: 32ch; }
  .pronto-esc__hoy { justify-items: start; }
  .pronto-esc__tarjetas { justify-content: flex-start; }
  .pronto-esc__pieza { grid-column: 2; grid-row: 1 / -1; min-height: 62vh; }
  .pronto-esc__fantasma { left: 62%; }
}
@media (prefers-reduced-motion: reduce) { .pronto::before, .pronto-esc__raya { animation: none; } }
.movimiento-reducido .pronto::before, .movimiento-reducido .pronto-esc__raya { animation: none; }

/* ===== Títulos cortados (Iván, 2026-09-29) =====
   "Sigue explorando": las tarjetas medían 300 px fijos, así que siempre quedaba una partida a media palabra en el
   borde ("Destapad…"). Ahora caben completas (1 en celular, 3 o 4 en computadora) y la siguiente solo asoma su
   orilla, desvanecida; al llegar al final ya no hay desvanecido (clase .al-final, de carril() en nucleo.js). */
[data-otros] { --n: 1; --asoma: 44px; --hueco: clamp(12px, 1.6vw, 22px); gap: var(--hueco);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--asoma) - var(--g)), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - var(--asoma) - var(--g)), transparent); }
[data-otros].al-final { -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(var(--asoma) + var(--g)));   /* al final asoma la anterior */
  mask-image: linear-gradient(90deg, transparent, #000 calc(var(--asoma) + var(--g))); }
[data-otros] > .tarjeta { width: calc((100% - (var(--n) - 1) * var(--hueco) - var(--asoma)) / var(--n)); }   /* 100% = el ancho útil del carril */
@media (min-width: 821px) { [data-otros] { --n: 3; --asoma: 64px; } }
@media (min-width: 1200px) { [data-otros] { --n: 4; } }
@media (min-width: 1680px) { [data-otros] { --n: 5; } }

/* Menú de productos: entre 821 y 1200 px su columna derecha se salía de la pantalla (las 4 columnas no podían
   encoger) y los enlaces de arriba se partían en dos líneas */
.mega__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega__item { grid-template-columns: 64px minmax(0, 1fr); }
.nav__link { white-space: nowrap; }
@media (max-width: 1200px) {
  .mega__dentro { grid-template-columns: minmax(0, 1fr) 220px; gap: 32px; }
  .mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega__lado { padding-left: 24px; }
  .nav__barra { gap: 14px; }
  .nav__link { padding: 0 10px; font-size: 14.5px; }
}
@media (max-width: 980px) { .mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* inicio sin 3D (teléfonos sin WebGL2): las piezas en foto llenan el hueco del hero, en vez de quedar en blanco */
.sin-webgl .hero__hueco { width: 100%; height: 34vh; }
@media (max-width: 820px) { .sin-webgl .hero__hueco { height: 100%; min-height: 200px; } }
.hero-sin3d { position: relative; width: min(100%, 560px); height: 100%; margin: 0 auto; }
.hero-sin3d img { position: absolute; top: 50%; max-height: 92%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(22, 18, 14, .2)); }
.hero-sin3d .c { left: 50%; width: 58%; transform: translate(-50%, -50%) rotate(-4deg); z-index: 2; }
.hero-sin3d .i { left: 2%; width: 30%; transform: translateY(-58%) rotate(-10deg); }
.hero-sin3d .d { right: 2%; width: 27%; transform: translateY(-40%) rotate(9deg); }