/* ==========================================================================
   Binnox — diseño nuevo (v2). Capa encima de style.css + home-design.css que solo
   se carga con design_v2() (vista previa o publicado desde Admin → Diseño).
   "Mixto": portada oscura (body.v2-dark) y páginas de compra claras.
   Toda animación usa solo transform/opacity; nada anima layout ni pinta por frame.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
body.v2 {
  /* Claros: reemplazan los de home-design.css (mismos nombres), así todo el sitio los hereda. */
  --ht-ink: #0f172a;
  --ht-muted: #566174;
  --text-muted: var(--ht-muted);
  --ht-border: rgba(15, 23, 42, 0.08);
  --ht-accent: #2563eb;
  --ht-accent-2: #1d4ed8;
  --ht-accent-wash: #eef3ff;
  --ht-white: #ffffff;
  --ht-canvas: #f5f6fa;
  --ht-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --ht-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -14px rgba(15, 23, 42, 0.14);
  --ht-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.05), 0 26px 48px -18px rgba(15, 23, 42, 0.26);

  /* Oscuros */
  --d-bg: #06070c;
  --d-bg-2: #0b0e17;
  --d-border: rgba(255, 255, 255, 0.09);
  --d-border-strong: rgba(255, 255, 255, 0.18);
  --d-text: #eef1f8;
  --d-muted: #9aa4b8;

  --v-grad-text: linear-gradient(100deg, #60a5fa 0%, #a78bfa 48%, #22d3ee 100%);
  --v-grad-line: linear-gradient(90deg, #3b82f6, #8b5cf6, #22d3ee);
  --v-grad-btn: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --v-ease: cubic-bezier(.16, 1, .3, 1);
  --v-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --v-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --v-header-h: 68px;

  font-family: var(--v-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.v2.v2-dark {
  background: var(--d-bg); color: var(--d-text); --text-muted: var(--d-muted); color-scheme: dark;
  /* El resto del sitio (carrito, checkout, mi cuenta, formularios, blog, FAQ...) usa home-design.css,
     que pinta todo con estas mismas variables --ht-*. Al redefinirlas aquí heredan el mismo oscuro
     de portada/producto sin tocar ese archivo ni cada plantilla por separado. */
  --ht-ink: var(--d-text);
  --ht-muted: var(--d-muted);
  --ht-border: var(--d-border);
  --ht-white: var(--d-bg-2);
  --ht-canvas: var(--d-bg);
  --ht-accent-wash: rgba(59, 130, 246, 0.14);
  --ht-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --ht-shadow-hover: 0 20px 44px -16px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.09);
}
body.v2 ::selection { background: rgba(99, 102, 241, 0.32); }
body.v2 :focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }

.v2-container { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }
.v2-center { text-align: center; margin-inline: auto; justify-content: center; }
/* Títulos con líneas parejas: evita una palabra sola colgando en la última línea. */
.v2-hero-title, .v2-section h2, .v2-cta h2, body.v2 .section-head h1, body.v2 .product-detail h1 { text-wrap: balance; }

.v2-skip {
  position: absolute; left: 12px; top: -64px; z-index: 1000;
  padding: 10px 16px; border-radius: 10px; background: #fff; color: #0f172a; font-weight: 600;
  transition: top 0.2s;
}
.v2-skip:focus { top: 12px; }
#contenido { outline: none; }

/* ---------- 2. Botones ---------- */
.v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--v-sans); font-weight: 600; font-size: 0.95rem; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.35s var(--v-ease), box-shadow 0.35s var(--v-ease), background-color 0.25s, border-color 0.25s, color 0.25s;
}
.v2-btn-sm { padding: 9px 16px; font-size: 0.86rem; }
.v2-btn-lg { padding: 16px 28px; font-size: 1.02rem; }
.v2-btn-primary {
  color: #fff; background: var(--v-grad-btn);
  box-shadow: 0 12px 30px -10px rgba(99, 102, 241, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.v2-btn-primary:hover { color: #fff; box-shadow: 0 18px 40px -10px rgba(124, 58, 237, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
/* El verde de los botones de WhatsApp en modo oscuro (#00a884) con su texto oscuro: 6:1 (con blanco no llega a 3:1). */
.v2-btn-wa { color: #0b141a; background: #00a884; box-shadow: 0 12px 30px -12px rgba(0, 168, 132, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.v2-btn-wa:hover { color: #0b141a; background: #06cf9c; box-shadow: 0 18px 40px -12px rgba(0, 168, 132, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.v2-btn-glass { color: #fff; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); }
.v2-btn-glass:hover { color: #fff; background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.28); transform: translateY(-2px); }
.v2-link { display: inline-flex; align-items: center; gap: 6px; color: #93c5fd; font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.v2-link:hover { color: #dbeafe; }
.v2-link span { transition: transform 0.3s var(--v-ease); }
.v2-link:hover span, a:hover > .v2-link span { transform: translateX(4px); }

/* ---------- 3. Encabezado (oscuro en todo el sitio) ---------- */
.v2-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(6, 7, 12, 0.78);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background-color 0.35s, border-color 0.35s;
}
/* Sobre fondo claro la transparencia se mezclaba y el encabezado se veía gris: casi sólido ahí. */
body.v2:not(.v2-dark) .v2-header { background: rgba(7, 8, 14, 0.97); }
/* En la portada arranca transparente sobre el hero y se vuelve sólido al bajar (main.js: .is-scrolled). */
body.v2-dark .v2-header { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.v2-dark .v2-header.is-scrolled {
  background: rgba(6, 7, 12, 0.78); border-bottom-color: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
}
.v2-header-inner {
  width: min(1240px, calc(100% - 32px)); margin-inline: auto; height: var(--v-header-h);
  display: flex; align-items: center; gap: 24px;
}
.v2-logo {
  display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
  color: #fff; font-family: var(--v-display); font-weight: 700; font-size: 1.22rem; letter-spacing: -0.02em; text-decoration: none;
}
.v2-logo:hover { color: #fff; }
/* Cada categoría nueva suma un enlace: si no caben, el menú se desliza de lado en vez de sacar de la pantalla
   la lupa, el carrito y la cuenta. El relleno deja ver completo el contorno de foco. */
.v2-nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 6px; margin-block: -6px; }
.v2-nav::-webkit-scrollbar { display: none; }
.v2-nav a {
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  color: rgba(238, 241, 248, 0.72); font-size: 0.92rem; font-weight: 500; text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}
.v2-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.v2-nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.09); }
.v2-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.v2-nav + .v2-actions { margin-left: 0; }
.v2-icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px;
  border-radius: 999px; color: #e8ecf5; text-decoration: none; transition: background-color 0.2s;
}
.v2-icon-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.v2-badge {
  position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--v-grad-btn); color: #fff; font-size: 0.68rem; font-weight: 700;
  box-shadow: 0 0 0 2px #06070c;
}
.v2-flash { margin-top: 16px; }

/* ---------- 4. Barra inferior y menú del celular ---------- */
body.v2 .v2-tabbar {
  background: rgba(8, 10, 16, 0.88); border-top: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
}
body.v2 .v2-tabbar .mobile-tab { color: #8f99ad; text-decoration: none; }
body.v2 .v2-tabbar .mobile-tab[aria-current="page"],
body.v2 .v2-tabbar .mobile-tab[aria-expanded="true"] { color: #fff; }
body.v2 .v2-tabbar .mobile-tab[aria-current="page"] svg,
body.v2 .v2-tabbar .mobile-tab[aria-expanded="true"] svg { color: #93c5fd; }
body.v2 .v2-sheet { background: #0c0f18; border: 1px solid rgba(255, 255, 255, 0.08); border-bottom: none; border-radius: 24px 24px 0 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5); }
body.v2 .v2-sheet a { color: #e5e9f2; border-bottom-color: rgba(255, 255, 255, 0.06); text-decoration: none; }
body.v2 .v2-sheet-title { margin: 6px 12px 4px; color: #6f7a8f; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
body.v2 .mobile-sheet-backdrop { background: rgba(2, 3, 8, 0.6); }

/* ---------- 5. Portada: hero ---------- */
.v2-hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(-1 * var(--v-header-h));
  padding: calc(var(--v-header-h) + clamp(40px, 8vh, 100px)) 0 clamp(64px, 10vh, 120px);
  min-height: min(100svh, 920px); display: flex; align-items: center;
}
.v2-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: -1;
  background: linear-gradient(180deg, transparent, var(--d-bg));
}
.v2-hero-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
/* Degradados radiales con caída suave: dan el "brillo" sin filter: blur (que es caro de pintar). */
.v2-aurora { position: absolute; border-radius: 50%; will-change: transform; }
.v2-aurora-1 {
  width: 760px; height: 760px; left: -260px; top: -300px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.55) 0%, rgba(37, 99, 235, 0.18) 38%, transparent 68%);
  animation: v2Drift1 22s ease-in-out infinite alternate;
}
.v2-aurora-2 {
  width: 700px; height: 700px; right: -220px; top: -80px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.5) 0%, rgba(124, 58, 237, 0.16) 40%, transparent 68%);
  animation: v2Drift2 26s ease-in-out infinite alternate;
}
.v2-aurora-3 {
  width: 640px; height: 640px; left: 30%; bottom: -380px;
  background: radial-gradient(circle, rgba(8, 145, 178, 0.42) 0%, rgba(8, 145, 178, 0.12) 42%, transparent 68%);
  animation: v2Drift3 30s ease-in-out infinite alternate;
}
@keyframes v2Drift1 { to { transform: translate3d(140px, 90px, 0) scale(1.12); } }
@keyframes v2Drift2 { to { transform: translate3d(-120px, 70px, 0) scale(0.9); } }
@keyframes v2Drift3 { to { transform: translate3d(90px, -70px, 0) scale(1.1); } }
.v2-grid-lines {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 25%, transparent 75%);
}
.v2-hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.v2-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  padding: 8px 16px 8px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cfd6e6; font-size: 0.85rem; font-weight: 500;
}
.v2-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
.v2-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #22c55e; animation: v2Ping 2s var(--v-ease) infinite; }
@keyframes v2Ping { from { transform: scale(1); opacity: 0.7; } to { transform: scale(3.2); opacity: 0; } }
.v2-hero-title {
  margin: 24px 0 22px; color: #fff;
  font-family: var(--v-display); font-weight: 700; font-size: clamp(2.7rem, 6.2vw, 5.4rem);
  line-height: 0.98; letter-spacing: -0.035em;
}
.v2-hero-title > span { display: block; }
.v2-gradient-text {
  background: var(--v-grad-text); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.v2-hero-lead { max-width: 560px; margin: 0 0 34px; color: var(--d-muted); font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.65; }
.v2-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.v2-hero-trust { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 34px 0 0; padding: 0; list-style: none; color: #c3cadb; font-size: 0.9rem; }
.v2-hero-trust li { display: inline-flex; align-items: center; gap: 8px; }
.v2-hero-trust svg { color: #34d399; flex-shrink: 0; }

/* Entrada escalonada al cargar. El H1 solo se desliza (opacidad fija en 1): si empezara invisible
   retrasaría el "Largest Contentful Paint" que mide Google. */
.v2-anim { opacity: 0; transform: translateY(18px); animation: v2Rise 0.9s var(--v-ease) forwards; animation-delay: calc(var(--d, 0) * 90ms + 60ms); }
.v2-hero-title.v2-anim { opacity: 1; animation-name: v2Slide; }
@keyframes v2Rise { to { opacity: 1; transform: none; } }
@keyframes v2Slide { from { transform: translateY(14px); } to { transform: none; } }

.v2-hero-visual { position: relative; height: clamp(380px, 44vw, 540px); }
.v2-orbit { position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.08); pointer-events: none; }
.v2-orbit-1 { width: 74%; aspect-ratio: 1; }
.v2-orbit-2 { width: 104%; aspect-ratio: 1; border-style: dashed; border-color: rgba(255, 255, 255, 0.07); animation: v2Spin 90s linear infinite; }
@keyframes v2Spin { to { rotate: 360deg; } }
/* left/top = centro de cada tarjeta; "translate" la centra; "transform" queda libre para el parallax de main.js. */
.v2-float-card { position: absolute; width: clamp(150px, 15vw, 205px); translate: -50% -50%; will-change: transform; }
.v2-float-card-inner {
  rotate: var(--r, 0deg); scale: var(--s, 1);
  filter: drop-shadow(0 30px 38px rgba(0, 0, 0, 0.55));
  animation: v2Float 7s ease-in-out infinite alternate; animation-delay: var(--fd, 0s);
}
.v2-float-card-inner svg { display: block; width: 100%; height: auto; }
@keyframes v2Float { from { transform: translateY(-8px); } to { transform: translateY(10px); } }
.v2-float-card--0 { left: 52%; top: 50%; z-index: 5; width: clamp(170px, 17vw, 232px); --r: -6deg; --fd: 0s; }
.v2-float-card--1 { left: 20%; top: 26%; z-index: 3; --r: -15deg; --s: 0.8; --fd: -2s; }
.v2-float-card--2 { left: 82%; top: 22%; z-index: 2; --r: 12deg; --s: 0.76; --fd: -4s; }
.v2-float-card--3 { left: 22%; top: 78%; z-index: 2; --r: 9deg; --s: 0.7; --fd: -1s; }
.v2-float-card--4 { left: 82%; top: 76%; z-index: 3; --r: -10deg; --s: 0.74; --fd: -3s; }
.v2-hero-chip {
  position: absolute; z-index: 6; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 10px; border-radius: 16px;
  background: rgba(14, 17, 28, 0.9); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 22px 44px -14px rgba(0, 0, 0, 0.7); will-change: transform;
}
.v2-hero-chip strong { display: block; color: #fff; font-size: 0.84rem; font-weight: 600; }
.v2-hero-chip small { display: block; color: var(--d-muted); font-size: 0.72rem; margin-top: 2px; }
.v2-hero-chip--a { left: -2%; top: 60%; }
.v2-hero-chip--b { right: -4%; top: 38%; }
.v2-chip-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(59, 130, 246, 0.18); color: #93c5fd; flex-shrink: 0; }
.v2-chip-icon--green { background: rgba(34, 197, 94, 0.16); color: #86efac; }

/* ---------- 6. Marquesina de marcas ---------- */
.v2-brands { padding: 22px 0 6px; border-block: 1px solid rgba(255, 255, 255, 0.06); background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent); }
.v2-brands-label { margin: 0 0 14px; text-align: center; color: #7f8aa0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.v2-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
/* margin-right (no gap) en cada chip: así las dos copias miden exactamente lo mismo y el -50% empalma sin salto. */
.v2-marquee-track { display: flex; width: max-content; padding: 4px 0 18px; animation: v2Marquee 70s linear infinite; }
.v2-marquee:hover .v2-marquee-track, .v2-marquee:focus-within .v2-marquee-track { animation-play-state: paused; }
@keyframes v2Marquee { to { transform: translateX(-50%); } }
.v2-brand-chip {
  flex: none; margin-right: 12px; padding: 11px 20px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
  color: #d7deeb; font-weight: 600; font-size: 0.93rem; text-decoration: none;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.v2-brand-chip:hover { color: #fff; background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.2); }

/* ---------- 7. Secciones oscuras ---------- */
.v2-section { padding-top: clamp(64px, 9vw, 120px); }
.v2-section--last { padding-bottom: clamp(64px, 9vw, 120px); }
/* (Sin content-visibility: dejaba "atascadas" las animaciones de entrada de lo que estaba fuera de
   pantalla y el navegador recalculaba estilos sin parar, aun sin tocar la página.) */
.v2-section-head { max-width: 780px; margin-bottom: clamp(30px, 4vw, 48px); }
.v2-kicker { display: inline-block; margin: 0 0 12px; color: #93c5fd; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
body.v2-dark .v2-section h2 {
  margin: 0; color: #fff; font-family: var(--v-display); font-weight: 700;
  font-size: clamp(1.95rem, 3.8vw, 3.1rem); line-height: 1.08; letter-spacing: -0.03em;
}
body.v2-dark .v2-row-head h2 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); }

/* Luz que sigue al puntero (main.js escribe --mx/--my). */
[data-spotlight] { position: relative; overflow: hidden; isolation: isolate; }
[data-spotlight]::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(139, 92, 246, 0.18), transparent 45%);
  opacity: 0; transition: opacity 0.4s;
}
[data-spotlight]:hover::after { opacity: 1; }

/* Bento de categorías */
.v2-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(210px, auto); gap: 16px; }
.v2-tile.is-big { grid-column: span 2; grid-row: span 2; }
.v2-tile.is-wide { grid-column: span 2; }
.v2-tile.is-full { grid-column: 1 / -1; }
.v2-tile {
  --tile-accent: #3b82f6;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 210px;
  padding: 26px 26px 24px; border-radius: 28px; text-decoration: none; color: var(--d-text);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--d-border);
  transition: transform 0.55s var(--v-ease), border-color 0.3s;
}
.v2-tile::before {
  content: ''; position: absolute; z-index: -2; width: 70%; aspect-ratio: 1; right: -18%; top: -30%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tile-accent) 42%, transparent), transparent 70%);
  transition: transform 0.8s var(--v-ease);
}
.v2-tile:hover { transform: translateY(-5px); border-color: var(--d-border-strong); color: var(--d-text); }
.v2-tile:hover::before { transform: scale(1.15); }
.v2-tile--pines-digitales { --tile-accent: #8b5cf6; }
.v2-tile--recargas-a-todo-operador { --tile-accent: #3b82f6; }
.v2-tile--paquetes-a-todo-operador { --tile-accent: #06b6d4; }
.v2-tile--tecnologia { --tile-accent: #f59e0b; }
.v2-tile--licencias { --tile-accent: #10b981; }
.v2-tile-body { position: relative; }
.v2-tile h3 { margin: 0; color: #fff; font-family: var(--v-display); font-weight: 700; font-size: 1.55rem; letter-spacing: -0.02em; }
.v2-tile.is-big h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.v2-tile p { margin: 6px 0 12px; max-width: 36ch; color: var(--d-muted); line-height: 1.55; }
.v2-tile-meta { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: #dbe3f3; font-size: 0.8rem; font-weight: 600; }
.v2-tile-arrow {
  position: absolute; right: 22px; bottom: 22px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--d-border); color: #fff;
  transition: transform 0.45s var(--v-ease), background-color 0.3s;
}
.v2-tile:hover .v2-tile-arrow { transform: translate(3px, -3px); background: var(--tile-accent); }
/* En las casillas chicas la flecha chocaba con la etiqueta de precio; toda la casilla ya es un enlace. */
@media (min-width: 861px) {
  .v2-tile:not(.is-big) .v2-tile-arrow { display: none; }
  .v2-tile:not(.is-big) .v2-tile-meta { white-space: nowrap; font-size: 0.76rem; }
  /* El texto de las casillas chicas no pasa por debajo del dibujo de la esquina (una foto ocupa más que un ícono). */
  .v2-tile:not(.is-big) .v2-tile-body > :is(h3, p) { padding-right: 96px; }
  .v2-tile:not(.is-big):has(.v2-tile-art img) .v2-tile-body > :is(h3, p) { padding-right: clamp(130px, 13vw, 170px); }
}
.v2-tile-art { position: absolute; right: 24px; top: 24px; }
.v2-tile.is-big .v2-tile-art { right: 12%; top: 16%; }
.v2-mini-card {
  position: absolute; width: clamp(84px, 9vw, 118px); aspect-ratio: 5 / 7; border-radius: 16px;
  display: grid; place-items: center; color: rgba(255, 255, 255, 0.95);
  font-family: var(--v-display); font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.7rem);
  border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 24px 40px -12px rgba(0, 0, 0, 0.6);
  transition: transform 0.6s var(--v-ease);
}
.v2-mini-card--1 { right: 96px; top: 26px; background: linear-gradient(150deg, #be123c, #7f1d1d); transform: rotate(-14deg); }
.v2-mini-card--2 { right: 44px; top: 0; background: linear-gradient(150deg, #2563eb, #1e1b4b); transform: rotate(3deg); z-index: 1; }
.v2-mini-card--3 { right: -8px; top: 34px; background: linear-gradient(150deg, #16a34a, #064e3b); transform: rotate(15deg); }
.v2-tile:hover .v2-mini-card--1 { transform: rotate(-20deg) translate(-10px, 4px); }
.v2-tile:hover .v2-mini-card--2 { transform: rotate(1deg) translateY(-8px); }
.v2-tile:hover .v2-mini-card--3 { transform: rotate(21deg) translate(10px, 4px); }
/* Las fotos de tecnología vienen con fondo blanco: se enmarcan como una tarjeta de producto a propósito. */
.v2-tile-art img {
  display: block; width: clamp(104px, 11vw, 150px); height: auto; padding: 10px; border-radius: 22px; background: #fff;
  box-shadow: 0 24px 40px -14px rgba(0, 0, 0, 0.7), 0 0 0 6px rgba(255, 255, 255, 0.06);
  transform: rotate(5deg); transition: transform 0.6s var(--v-ease);
}
.v2-tile:hover .v2-tile-art img { transform: translateY(-6px) rotate(-2deg); }
/* Con recorte transparente el producto flota sobre el fondo oscuro, sin marco blanco. */
.v2-tile-art img.is-cutout {
  width: clamp(130px, 14vw, 190px); padding: 0; background: none; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.6)); transform: rotate(-8deg);
}
.v2-tile:hover .v2-tile-art img.is-cutout { transform: translateY(-8px) rotate(-3deg) scale(1.04); }
/* En las casillas chicas la foto se limita por alto: un reloj o unos audífonos verticales tapaban el texto. */
.v2-tile:not(.is-big) .v2-tile-art img { width: auto; max-width: 150px; height: clamp(110px, 11vw, 140px); object-fit: contain; }
.v2-signal { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.v2-signal i { display: block; width: 10px; border-radius: 4px; background: linear-gradient(180deg, #93c5fd, #3b82f6); transform-origin: bottom; transition: transform 0.5s var(--v-ease); }
.v2-signal i:nth-child(1) { height: 30%; } .v2-signal i:nth-child(2) { height: 55%; } .v2-signal i:nth-child(3) { height: 78%; } .v2-signal i:nth-child(4) { height: 100%; }
.v2-tile:hover .v2-signal i { transform: scaleY(1.12); }
.v2-data-rings { position: relative; display: block; width: 64px; height: 64px; }
.v2-data-rings i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(34, 211, 238, 0.55); }
.v2-data-rings i:nth-child(2) { inset: 12px; border-color: rgba(34, 211, 238, 0.8); }
.v2-data-rings i:nth-child(3) { inset: 24px; background: #22d3ee; border: none; }
.v2-tile:hover .v2-data-rings i:nth-child(1) { transform: scale(1.12); transition: transform 0.5s var(--v-ease); }
.v2-tile-icon {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tile-accent) 85%, #fff), color-mix(in srgb, var(--tile-accent) 55%, #000));
  border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 18px 34px -12px color-mix(in srgb, var(--tile-accent) 70%, transparent);
  transform: rotate(-6deg); transition: transform 0.5s var(--v-ease);
}
.v2-tile:hover .v2-tile-icon { transform: rotate(0deg) scale(1.08); }

/* Filas tipo "streaming" (carrusel horizontal con scroll-snap) */
.v2-row-section { padding-top: clamp(44px, 6vw, 76px); }
.v2-row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.v2-row-tools { display: flex; align-items: center; gap: 12px; }

/* "Ver todo": píldora con borde degradado (fondo en padding-box + degradado en border-box) y la
   flecha dentro de un círculo con el mismo degradado del botón principal. */
.v2-more {
  display: inline-flex; align-items: center; gap: 12px; padding: 5px 5px 5px 18px; border-radius: 999px;
  border: 1px solid transparent; text-decoration: none; white-space: nowrap;
  background:
    linear-gradient(180deg, #151a2b, #0d1019) padding-box,
    linear-gradient(120deg, rgba(96, 165, 250, 0.55), rgba(167, 139, 250, 0.4), rgba(34, 211, 238, 0.5)) border-box;
  color: #eef1f8; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 26px -14px rgba(99, 102, 241, 0.6);
  transition: box-shadow 0.4s var(--v-ease), color 0.2s;
}
.v2-more:hover {
  color: #fff;
  background:
    linear-gradient(180deg, #1a2034, #10131e) padding-box,
    linear-gradient(120deg, rgba(96, 165, 250, 0.9), rgba(167, 139, 250, 0.75), rgba(34, 211, 238, 0.85)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 34px -14px rgba(124, 58, 237, 0.75);
}
.v2-more-icon {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--v-grad-btn); color: #fff; box-shadow: 0 6px 14px -6px rgba(124, 58, 237, 0.9);
  transition: transform 0.45s var(--v-ease);
}
.v2-more:hover .v2-more-icon { transform: translateX(3px); }

/* Flechas de la fila: un solo control tipo cápsula con divisor, en vez de dos círculos sueltos. */
.v2-row-nav {
  display: inline-flex; align-items: center; padding: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.v2-row-nav-divider { width: 1px; height: 18px; margin: 0 2px; background: rgba(255, 255, 255, 0.12); }
.v2-row-btn {
  display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: #e9edf6; transition: background-color 0.2s, opacity 0.2s, color 0.2s;
}
.v2-row-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); color: #fff; }
.v2-row-btn:disabled { opacity: 0.28; cursor: default; }
.v2-row-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(178px, calc((100% - 64px) / 5), 232px); gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 8px 2px 20px; margin: 0 -2px;
}
.v2-row-track::-webkit-scrollbar { display: none; }
.v2-row-track > .card-wrap { scroll-snap-align: start; }

/* Tarjeta de producto en fondo oscuro */
body.v2-dark .card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--d-border); border-radius: 22px; box-shadow: none; overflow: hidden;
  transition: transform 0.5s var(--v-ease), border-color 0.3s, box-shadow 0.5s var(--v-ease);
}
body.v2-dark .card:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(139, 92, 246, 0.22); }
body.v2-dark .card-media { background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.09), transparent 62%); padding: 18px 18px 6px; border-bottom: none; }
body.v2-dark .card-media svg { transition: transform 0.6s var(--v-ease); }
/* Productos físicos: con recorte transparente (.webp) el producto flota sobre el fondo oscuro de la
   tarjeta, igual que las tarjetas digitales. Solo si todavía no hay recorte (.jpg con fondo blanco) se
   deja una "vitrina" clara para que no se vea un cuadro blanco pegado. */
body.v2 .card-media img[src$=".webp"] { background: none; border-radius: 0; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.45)); }
body.v2:not(.v2-dark) .card-media img[src$=".webp"] { filter: drop-shadow(0 16px 18px rgba(15, 23, 42, 0.18)); }
body.v2-dark .card-media:has(img[src$=".jpg"]) { background: #fff; padding: 12px; }
body.v2-dark .card-media img { transition: transform 0.6s var(--v-ease); }
body.v2-dark .card-media img[src$=".jpg"] { border-radius: 12px; }
body.v2-dark .card:hover .card-media img { transform: translateY(-4px) scale(1.04); }
body.v2-dark .card:hover .card-media svg { filter: none; transform: translateY(-4px) rotate(-2deg) scale(1.03); }
body.v2-dark .card-body { padding: 12px 16px 18px; }
body.v2-dark .card-body h3 { color: #f1f4fa; font-size: 0.95rem; font-weight: 600; line-height: 1.35; }
body.v2-dark .card-price { color: #fff; font-family: var(--v-display); font-weight: 700; font-size: 1.08rem; }
/* Producto con varias opciones: "N opciones" bajo el nombre y "Desde" antes del precio más bajo. */
.card-options { display: block; margin-top: 2px; font-size: 0.8rem; color: #64748b; }
.card-price small { font-size: 0.72em; font-weight: 500; color: #64748b; }
body.v2-dark .card-options, body.v2-dark .card-price small { color: #9aa3b5; }
body.v2-dark .tag { background: rgba(59, 130, 246, 0.14); color: #93c5fd; }
body.v2-dark .wishlist-btn { background: rgba(10, 12, 20, 0.72); color: #e5e9f2; border: 1px solid var(--d-border); box-shadow: none; }

/* Resto del sitio en oscuro: colores que home-design.css deja fijos en hex (no usan --ht-*) porque
   se pensaron solo para el canvas claro -- sobre el canvas oscuro quedan como cajas casi blancas o
   texto casi invisible. */
body.v2-dark .alert-error { background: rgba(239, 68, 68, 0.14); color: #fca5a5; }
body.v2-dark .alert-success { background: rgba(34, 197, 94, 0.14); color: #86efac; }
body.v2-dark .alert-info { background: rgba(59, 130, 246, 0.14); color: #93c5fd; }
body.v2-dark .badge-status.status-pendiente, body.v2-dark .badge-status.status-en_revision { background: rgba(234, 179, 8, 0.16); color: #fde68a; }
body.v2-dark .badge-status.status-pagado, body.v2-dark .badge-status.status-entregado { background: rgba(34, 197, 94, 0.16); color: #86efac; }
body.v2-dark .badge-status.status-fallido, body.v2-dark .badge-status.status-cancelado { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }
body.v2-dark .product-guide p, body.v2-dark .product-guide li,
body.v2-dark .blog-card p, body.v2-dark .blog-cta p { color: var(--d-muted); }

/* --ht-accent se afinó a 4.5:1 de contraste sobre el canvas CLARO (#f4f5f8); sobre el canvas oscuro
   ese mismo azul no llega al mínimo legible, así que estos enlaces usan el azul claro que ya usa el
   resto del diseño oscuro (portada/producto). Los botones rellenos (btn-primary) no cambian: ahí el
   azul original sigue teniendo buen contraste con el texto blanco. */
body.v2-dark :is(.btn-ghost:hover, .section-head a, .form-foot a,
  .blog-card h2 a:hover, .blog-card h3 a:hover, .blog-card-more, .product-guide a) { color: #93c5fd; }

/* Operadores */
.v2-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.v2-split-copy p:not(.v2-kicker) { max-width: 46ch; margin: 16px 0 28px; color: var(--d-muted); font-size: 1.05rem; line-height: 1.7; }
.v2-op-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.v2-op {
  display: flex; flex-direction: column; gap: 6px; padding: 24px 20px; border-radius: 22px; text-decoration: none; color: #fff;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--d-border);
  transition: transform 0.45s var(--v-ease), border-color 0.3s, background-color 0.3s;
}
.v2-op strong { font-family: var(--v-display); font-size: 1.3rem; letter-spacing: -0.01em; }
.v2-op span { color: var(--d-muted); font-size: 0.88rem; }
.v2-op:hover { color: #fff; transform: translateY(-4px); border-color: var(--d-border-strong); background: rgba(255, 255, 255, 0.07); }

.v2-review-product { display: inline-block; margin-top: 3px; color: var(--d-muted); font-size: 0.8rem; text-decoration: none; border-bottom: 1px dashed rgba(255, 255, 255, 0.22); }
a.v2-review-product:hover { color: #fff; }

/* Cómo funciona */
.v2-steps { position: relative; }
.v2-steps ol { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.v2-steps-line { position: absolute; left: 16.66%; right: 16.66%; top: 38px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.v2-steps-line span { position: absolute; inset: 0; background: var(--v-grad-line); transform-origin: left center; transform: scaleX(var(--progress, 0)); }
.v2-step { text-align: center; padding: 0 10px; }
.v2-step-num {
  position: relative; display: inline-grid; place-items: center; width: 76px; height: 76px; margin-bottom: 22px; border-radius: 50%;
  color: #fff; font-family: var(--v-display); font-weight: 700; font-size: 1.3rem;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04) 60%), var(--d-bg-2);
  border: 1px solid var(--d-border-strong); box-shadow: 0 0 0 8px var(--d-bg), 0 20px 40px -12px rgba(59, 130, 246, 0.5);
}
.v2-step h3 { margin: 0 0 8px; color: #fff; font-family: var(--v-display); font-size: 1.3rem; letter-spacing: -0.01em; }
.v2-step p { max-width: 32ch; margin: 0 auto; color: var(--d-muted); line-height: 1.65; }

/* Por qué + números */
.v2-why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.v2-why {
  padding: 28px 24px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); border: 1px solid var(--d-border);
  transition: transform 0.45s var(--v-ease), border-color 0.3s;
}
.v2-why:hover { transform: translateY(-4px); border-color: var(--d-border-strong); }
.v2-why-icon {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; color: #c4b5fd;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(139, 92, 246, 0.22)); border: 1px solid rgba(255, 255, 255, 0.1);
}
.v2-why h3 { margin: 0 0 8px; color: #fff; font-family: var(--v-display); font-size: 1.15rem; }
.v2-why p { margin: 0; color: var(--d-muted); font-size: 0.95rem; line-height: 1.6; }
.v2-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; padding: 32px;
  border-radius: 26px; background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(124, 58, 237, 0.14)); border: 1px solid rgba(255, 255, 255, 0.1);
}
.v2-stats div { display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; text-align: center; }
.v2-stats dd { margin: 0; color: #fff; font-family: var(--v-display); font-weight: 700; font-size: clamp(2.3rem, 4.6vw, 3.5rem); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.v2-stats dt { color: #b7c0d3; font-size: 0.9rem; }

/* Blog */
.v2-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.v2-post {
  display: flex; flex-direction: column; gap: 10px; min-height: 230px; padding: 26px; border-radius: 22px; text-decoration: none; color: var(--d-text);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--d-border);
  transition: transform 0.45s var(--v-ease), border-color 0.3s;
}
.v2-post:hover { color: var(--d-text); transform: translateY(-4px); border-color: var(--d-border-strong); }
.v2-post-tag { align-self: flex-start; padding: 5px 10px; border-radius: 999px; background: rgba(129, 140, 248, 0.14); color: #a5b4fc; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.v2-post h3 { margin: 0; color: #fff; font-family: var(--v-display); font-size: 1.2rem; line-height: 1.3; }
.v2-post p { margin: 0; color: var(--d-muted); font-size: 0.93rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.v2-post .v2-link { margin-top: auto; }

/* Llamado final */
.v2-cta {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  padding: clamp(48px, 7vw, 88px) clamp(22px, 5vw, 64px); border-radius: 34px;
  background: linear-gradient(135deg, #0f1837 0%, #1a1340 52%, #0b2230 100%); border: 1px solid rgba(255, 255, 255, 0.1);
}
.v2-cta-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.v2-cta-glow::before, .v2-cta-glow::after { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; will-change: transform; }
.v2-cta-glow::before { left: -140px; top: -220px; background: radial-gradient(circle, rgba(37, 99, 235, 0.5), transparent 65%); animation: v2Drift1 18s ease-in-out infinite alternate; }
.v2-cta-glow::after { right: -160px; bottom: -240px; background: radial-gradient(circle, rgba(124, 58, 237, 0.48), transparent 65%); animation: v2Drift2 22s ease-in-out infinite alternate; }
body.v2-dark .v2-cta h2 { font-size: clamp(1.9rem, 4.2vw, 3.3rem); max-width: 20ch; margin-inline: auto; }
.v2-cta p { max-width: 52ch; margin: 16px auto 32px; color: #c7cfe0; font-size: 1.05rem; line-height: 1.65; }

/* Aparición al hacer scroll (el observador ya existe en main.js: [data-reveal] → .is-revealed). */
.reveal-ready body.v2 [data-reveal] { transform: translateY(30px); }
/* Mientras espera su turno no anima nada: si no, el paso a "escondido" también se animaba. */
.reveal-ready body.v2 [data-reveal]:not(.is-revealed) { transition: none; }
.reveal-ready body.v2 [data-reveal].is-revealed {
  transform: none;
  transition: opacity 0.9s var(--v-ease), transform 0.9s var(--v-ease), border-color 0.3s, background-color 0.3s;
  transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), 0s, 0s;
}
/* Una vez visibles, el hover de las tarjetas no debe arrastrar el retraso de la entrada. */
.reveal-ready body.v2 [data-reveal].is-revealed:hover { transition-delay: 0s; }

/* ---------- 8. Pie de página ---------- */
.v2-footer { background: #05060a; color: #9aa4b8; border-top: 1px solid rgba(255, 255, 255, 0.06); padding: clamp(52px, 7vw, 84px) 0 calc(28px + env(safe-area-inset-bottom, 0px)); }
body.v2:not(.v2-dark) .v2-footer { margin-top: clamp(56px, 8vw, 96px); }
.v2-footer-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 48px; }
.v2-footer-brand p { max-width: 36ch; margin: 16px 0 20px; line-height: 1.7; }
.v2-footer .v2-pay-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.v2-pay-badges li { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); color: #cbd3e1; font-size: 0.78rem; }
/* Logos oficiales (Admin → Pagos → Logos de pago) sobre ficha blanca, igual que en la ficha de producto.
   El ancho no depende de la imagen: la fila no se reacomoda cuando terminan de cargar. */
.v2-pay-badges li.has-logo {
  display: flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 54px; max-width: 72px; height: 36px; padding: 0 8px; border: 0; border-radius: 10px;
  background: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 18px -10px rgba(0, 0, 0, 0.7);
}
.v2-pay-badges li.has-logo img { display: block; max-width: 100%; height: 22px; object-fit: contain; }
.v2-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.v2-footer-heading { margin: 0 0 14px; color: #fff; font-family: var(--v-display); font-size: 0.95rem; font-weight: 600; }
.v2-footer ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.v2-footer a { color: #9aa4b8; font-size: 0.92rem; text-decoration: none; transition: color 0.2s; }
.v2-footer a:hover { color: #fff; }
.v2-footer .v2-logo { color: #fff; }
.v2-footer-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.06); color: #6f7a8f; font-size: 0.8rem; line-height: 1.6; }
.v2-footer-bottom p { margin: 0 0 6px; }

/* ---------- 9. Páginas claras (catálogo, producto, carrito, pago, cuenta) ---------- */
/* Solo tipografía: el color lo pone cada componente (p. ej. el título blanco sobre el banner azul del checkout). */
body.v2:not(.v2-dark) :is(.section, .product-detail, .form-card, .container) :is(h1, h2) { font-family: var(--v-display); letter-spacing: -0.025em; }
body.v2 .section-head h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.1; }
body.v2 .btn { border-radius: 999px; font-weight: 600; transition: transform 0.3s var(--v-ease), box-shadow 0.3s var(--v-ease), background-color 0.2s, color 0.2s; }
body.v2 .btn-primary { background: var(--v-grad-btn); color: #fff; border: none; box-shadow: 0 12px 26px -12px rgba(79, 70, 229, 0.75); }
body.v2 .btn-primary:hover { background: var(--v-grad-btn); color: #fff; transform: translateY(-1px); box-shadow: 0 18px 34px -14px rgba(79, 70, 229, 0.8); }
body.v2 .btn-ghost { border: 1px solid var(--ht-border); }
body.v2 .field input, body.v2 .field select, body.v2 .field textarea { border-radius: 12px; transition: border-color 0.2s, box-shadow 0.2s; }
body.v2 .field input:focus, body.v2 .field select:focus, body.v2 .field textarea:focus { border-color: var(--ht-accent); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14); outline: none; }

body.v2:not(.v2-dark) .card { border-radius: 22px; border: 1px solid var(--ht-border); transition: transform 0.45s var(--v-ease), box-shadow 0.45s var(--v-ease), border-color 0.3s; }
body.v2:not(.v2-dark) .card:hover { transform: translateY(-5px); box-shadow: var(--ht-shadow-hover); border-color: rgba(37, 99, 235, 0.22); }
body.v2:not(.v2-dark) .card-media { background: radial-gradient(120% 90% at 50% 0%, #eef2ff 0%, #ffffff 70%); }
body.v2:not(.v2-dark) .card:hover .card-media svg { filter: none; transform: translateY(-3px) rotate(-1.5deg) scale(1.02); }
body.v2 .card-media svg { transition: transform 0.6s var(--v-ease); }
body.v2 .card-price { font-family: var(--v-display); font-weight: 700; letter-spacing: -0.01em; }

body.v2 .product-detail { gap: clamp(28px, 5vw, 64px); }
body.v2 .product-detail .card-media { border-radius: 28px; padding: clamp(22px, 4vw, 52px); background: radial-gradient(120% 90% at 50% 0%, #eef2ff 0%, #ffffff 72%); border: 1px solid var(--ht-border); box-shadow: var(--ht-shadow); }
body.v2 .product-detail h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.08; letter-spacing: -0.03em; }
body.v2 .product-price { font-family: var(--v-display); font-size: clamp(1.9rem, 3vw, 2.5rem); letter-spacing: -0.02em; }
@media (min-width: 801px) {
  /* La imagen acompaña mientras se lee la columna de compra. */
  body.v2 .product-detail > div:first-child { position: sticky; top: calc(var(--v-header-h) + 20px); }
}
body.v2 .plan-option, body.v2 .delivery-note, body.v2 .qty-row input { border-radius: 14px; }
body.v2 .product-guide { border-radius: 26px; border: 1px solid var(--ht-border); padding: clamp(26px, 4vw, 52px); }
body.v2 .product-guide h2 { font-family: var(--v-display); letter-spacing: -0.02em; }
body.v2 :is(.form-card, .cart-card, .cart-summary-bar, .pay-ticket, .pay-detail, .result-card, .order-card, .blog-card) { border-radius: 22px; border: 1px solid var(--ht-border); }

/* Elementos de confianza (solo textos en espacios existentes). */
body.v2 .pd-trust .v2-guarantee { color: var(--ht-ink); font-weight: 500; line-height: 1.5; }
body.v2 .pd-trust .v2-guarantee svg { color: #16a34a; }
body.v2 .pd-trust .v2-guarantee a { color: var(--ht-accent); font-weight: 600; white-space: nowrap; margin-left: 4px; }
body.v2 .v2-stock-low { display: inline-flex; align-items: center; gap: 7px; color: #b45309; font-size: 0.85rem; font-weight: 600; }
body.v2 .v2-stock-low::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
body.v2 .v2-help-link {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px;
  background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; font-size: 0.86rem; line-height: 1.45; text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, transform 0.3s var(--v-ease);
}
body.v2 .v2-help-link svg { color: #16a34a; flex-shrink: 0; }
body.v2 .v2-help-link strong { color: #15803d; }
body.v2 .v2-help-link:hover { background: #dcfce7; border-color: #86efac; color: #14532d; transform: translateY(-1px); }
body.v2 .v2-help-link--center { justify-content: center; text-align: left; margin: 14px auto 0; max-width: 520px; }
body.v2-dark .v2-help-link { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.28); color: #d1fae5; }
body.v2-dark .v2-help-link svg { color: #4ade80; }
body.v2-dark .v2-help-link strong { color: #86efac; }
body.v2-dark .v2-help-link:hover { background: rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.4); color: #ecfdf5; }
body.v2-dark .v2-stock-low { color: #fbbf24; }
body.v2 .v2-trust-note {
  display: flex; align-items: flex-start; gap: 8px; margin: 12px 4px 0; color: var(--ht-muted); font-size: 0.84rem; line-height: 1.5;
}
body.v2 .v2-trust-note svg { color: #16a34a; flex-shrink: 0; margin-top: 2px; }
body.v2 .v2-trust-note strong { color: var(--ht-ink); }

/* ---------- 10. Responsive ---------- */
@media (max-width: 1080px) {
  .v2-nav a { padding: 8px 10px; font-size: 0.88rem; }
  .v2-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-footer-top { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 860px) {
  body.v2 { --v-header-h: 60px; }
  .v2-nav, .v2-account { display: none; }
  .v2-nav + .v2-actions { margin-left: auto; }
  .v2-header-inner { gap: 12px; }
  .v2-hero { min-height: 0; padding-bottom: 56px; }
  .v2-hero-inner { grid-template-columns: 1fr; text-align: center; gap: 12px; }
  .v2-hero-lead { margin-inline: auto; }
  .v2-hero-ctas, .v2-hero-trust { justify-content: center; }
  .v2-hero-visual { height: 330px; margin-top: 10px; }
  .v2-float-card { width: clamp(108px, 27vw, 150px); }
  .v2-float-card--0 { width: clamp(132px, 34vw, 178px); }
  .v2-hero-chip--a { left: 0; top: 74%; }
  .v2-hero-chip--b { right: 0; top: 8%; }
  .v2-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-tile.is-big { grid-column: 1 / -1; grid-row: span 1; min-height: 280px; }
  .v2-tile.is-wide { grid-column: span 1; }
  /* En pantallas angostas no cabe el dibujo al lado del texto: se le reserva espacio arriba. */
  .v2-tile { padding-top: 150px; }
  .v2-tile.is-big { padding-top: 190px; }
  .v2-tile.is-big .v2-tile-art { right: 24px; top: 22px; }
  .v2-split { grid-template-columns: 1fr; }
  .v2-steps ol { grid-template-columns: 1fr; gap: 26px; }
  .v2-steps-line { left: 37px; right: auto; top: 38px; bottom: 38px; width: 2px; height: auto; }
  .v2-steps-line span { transform: scaleY(var(--progress, 0)); transform-origin: top center; }
  .v2-step { display: grid; grid-template-columns: 76px 1fr; column-gap: 18px; text-align: left; padding: 0; }
  .v2-step-num { grid-row: span 2; margin: 0; }
  .v2-step p { margin: 0; max-width: none; }
  .v2-blog-grid { grid-template-columns: 1fr; }
  .v2-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-row-track { grid-auto-columns: clamp(160px, 42%, 220px); }
}
@media (max-width: 560px) {
  .v2-container { width: calc(100% - 32px); }
  .v2-hero-title { font-size: clamp(2.35rem, 11vw, 3rem); }
  .v2-hero-visual { height: 290px; }
  .v2-hero-chip--b, .v2-hide-sm { display: none; }
  .v2-bento { grid-template-columns: 1fr; }
  .v2-tile:nth-child(n) { grid-column: auto; min-height: 220px; }
  .v2-tile-art { transform: scale(0.85); transform-origin: top right; }
  .v2-op-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd2-reviews.v2-home-reviews { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 4px 16px 10px; scroll-padding-inline: 16px; scrollbar-width: none; }
  .v2-home-reviews::-webkit-scrollbar { display: none; }
  .v2-home-reviews .pd2-review { scroll-snap-align: start; }
  .v2-why-grid { grid-template-columns: 1fr; }
  .v2-stats { grid-template-columns: 1fr; gap: 22px; padding: 26px; }
  .v2-row-track { grid-auto-columns: 64%; }
  .v2-row-tools .v2-row-nav { display: none; }
  .v2-more { padding-left: 14px; font-size: 0.84rem; }
}

/* ---------- 11. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  body.v2 .v2-anim, body.v2 .v2-aurora, body.v2 .v2-orbit-2, body.v2 .v2-float-card-inner,
  body.v2 .v2-pulse::after, body.v2 .v2-cta-glow::before, body.v2 .v2-cta-glow::after { animation: none; }
  body.v2 .v2-anim { opacity: 1; transform: none; }
  body.v2 .v2-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 10px; }
  body.v2 .v2-brand-chip[aria-hidden="true"] { display: none; }
  body.v2 *, body.v2 *::before, body.v2 *::after { transition-duration: 0.01ms !important; }
}

/* Animaciones en pausa mientras su sección no se ve (main.js agrega .v2-offscreen): mismo efecto, cero trabajo fuera de pantalla. */
.v2-offscreen, .v2-offscreen *, .v2-offscreen *::before, .v2-offscreen *::after { animation-play-state: paused !important; }

/* ---------- 12. Ficha de producto (oscura) ---------- */
.v2-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.pd2-hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(-1 * var(--v-header-h));
  padding: calc(var(--v-header-h) + 18px) 0 clamp(56px, 8vw, 96px);
}
.pd2-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: -1; background: linear-gradient(180deg, transparent, var(--d-bg)); }
.pd2-hero-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.pd2-hero-bg .v2-aurora-1 { width: 640px; height: 640px; left: -220px; top: -260px; }
.pd2-hero-bg .v2-aurora-2 { width: 620px; height: 620px; right: -200px; top: 60px; }

.pd2-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: clamp(18px, 3vw, 34px); color: #7f8aa0; font-size: 0.82rem; }
.pd2-crumbs a { color: #9aa4b8; text-decoration: none; transition: color 0.2s; }
.pd2-crumbs a:hover { color: #fff; }
.pd2-crumbs [aria-current] { color: #cfd6e6; }

.pd2-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }

/* Escenario del producto: halo + anillos + tarjeta flotando (main.js mueve [data-depth] con el puntero). */
.pd2-visual { position: sticky; top: calc(var(--v-header-h) + 24px); }
.pd2-stage {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; max-width: 560px; margin-inline: auto;
  border-radius: 36px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 10%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 60%);
  border: 1px solid var(--d-border);
}
.pd2-halo { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(99, 102, 241, 0.42) 0%, rgba(124, 58, 237, 0.16) 42%, transparent 70%); animation: pd2Breathe 6s ease-in-out infinite alternate; }
@keyframes pd2Breathe { from { transform: scale(0.92); opacity: 0.8; } to { transform: scale(1.06); opacity: 1; } }
.pd2-ring { position: absolute; width: 74%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.08); pointer-events: none; }
.pd2-ring--2 { width: 96%; border-style: dashed; border-color: rgba(255, 255, 255, 0.06); animation: v2Spin 90s linear infinite; }
.pd2-product { position: relative; z-index: 2; width: 56%; will-change: transform; }
.pd2-product-float { animation: v2Float 7s ease-in-out infinite alternate; }
.pd2-product-float.is-card { rotate: -6deg; filter: drop-shadow(0 34px 40px rgba(0, 0, 0, 0.6)); }
.pd2-product-float svg { display: block; width: 100%; height: auto; }
.pd2-product-float img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.55)); }
.pd2-product-float img[src$=".jpg"] { padding: 14px; border-radius: 22px; background: #fff; }
.pd2-chip {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 13px;
  background: rgba(12, 15, 24, 0.72); border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
}
.pd2-chip strong { display: block; color: #fff; font-size: 0.76rem; font-weight: 600; }
.pd2-chip small { display: block; color: var(--d-muted); font-size: 0.66rem; margin-top: 1px; }
.pd2-chip--a { left: 6%; bottom: 7%; }
.pd2-chip-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; background: rgba(99, 102, 241, 0.2); color: #c7d2fe; }
.pd2-chip-icon--green { background: rgba(34, 197, 94, 0.18); color: #86efac; }

.pd2-thumbs { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.pd2-thumb { width: 64px; height: 64px; padding: 6px; border-radius: 14px; border: 1px solid var(--d-border); background: rgba(255, 255, 255, 0.04); cursor: pointer; transition: border-color 0.25s, transform 0.3s var(--v-ease); }
.pd2-thumb:hover { transform: translateY(-2px); border-color: var(--d-border-strong); }
.pd2-thumb.is-active { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.25); }
.pd2-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* Columna de compra */
.pd2-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pd2-tag { padding: 6px 12px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #c7d2fe; background: rgba(99, 102, 241, 0.16); border: 1px solid rgba(129, 140, 248, 0.28); }
.pd2-tag--soft { color: #b7c0d3; background: rgba(255, 255, 255, 0.05); border-color: var(--d-border); }
.pd2-title { margin: 0; color: #fff; font-family: var(--v-display); font-weight: 700; font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.pd2-brand-link {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 6px 6px 6px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--d-border); color: #dfe4ee; font-size: 0.86rem; font-weight: 600; text-decoration: none;
  transition: border-color 0.25s, background-color 0.25s, color 0.25s, transform 0.35s var(--v-ease);
}
.pd2-brand-link:hover { color: #fff; border-color: rgba(129, 140, 248, 0.45); background: rgba(99, 102, 241, 0.12); transform: translateY(-1px); }
.pd2-brand-link-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(99, 102, 241, 0.18); color: #c7d2fe; }
.pd2-brand-link-arrow { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--v-grad-btn); color: #fff; transition: transform 0.35s var(--v-ease); }
.pd2-brand-link:hover .pd2-brand-link-arrow { transform: translateX(3px); }
.pd2-signals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pd2-signals:empty { display: none; }
.pd2-signal { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--d-border); color: #cfd6e6; font-size: 0.8rem; text-decoration: none; }
.pd2-signal--rating:hover { color: #fff; border-color: var(--d-border-strong); }
.pd2-stars { color: #fbbf24; letter-spacing: 1px; }

.pd2-price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 24px 0 20px; }
.pd2-price { color: #fff; font-family: var(--v-display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3rem); letter-spacing: -0.03em; line-height: 1; }
.pd2-price-note { padding: 6px 12px; border-radius: 999px; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.25); color: #86efac; font-size: 0.8rem; font-weight: 600; }

.pd2-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 20px; }
.pd2-plan {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 14px 42px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--d-border); color: var(--d-text); text-decoration: none;
  transition: border-color 0.25s, background-color 0.25s, transform 0.35s var(--v-ease);
}
.pd2-plan:hover { color: #fff; transform: translateY(-2px); border-color: var(--d-border-strong); background: rgba(255, 255, 255, 0.07); }
.pd2-plan-check { position: absolute; left: 14px; top: 16px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); transition: border-color 0.25s, box-shadow 0.3s var(--v-ease); }
.pd2-plan-label { font-weight: 600; font-size: 0.92rem; }
.pd2-plan-price { color: var(--d-muted); font-size: 0.84rem; }
.pd2-plan-price small { font-size: 0.76rem; }
.pd2-plan.is-active { border-color: transparent; background: linear-gradient(var(--d-bg-2), var(--d-bg-2)) padding-box, var(--v-grad-line) border-box; box-shadow: 0 14px 34px -18px rgba(124, 58, 237, 0.8); }
.pd2-plan.is-active .pd2-plan-check { border-color: #818cf8; background: radial-gradient(circle, #a5b4fc 0 38%, transparent 42%); box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.18); }
.pd2-plan.is-active .pd2-plan-price { color: #c7d2fe; }

.pd2-desc { margin: 0 0 24px; max-width: 58ch; color: #b7c0d3; font-size: 1.02rem; line-height: 1.7; }
/* Norma de dispositivos de pantallas y cuentas completas, antes del botón de compra. */
.pd2-usage { display: flex; align-items: flex-start; gap: 14px; margin: -8px 0 24px; padding: 14px 16px; border-radius: 18px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(251, 191, 36, 0.32); }
.pd2-usage-icon { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; background: rgba(251, 191, 36, 0.16); color: #fcd34d; }
.pd2-usage-title { margin: 0 0 4px; color: #fff; font-size: 1rem; font-weight: 800; line-height: 1.3; }
.pd2-usage-text { margin: 0; color: #d9dfea; font-size: 0.87rem; line-height: 1.55; }
.pd2-usage-text a { color: #fcd34d; white-space: nowrap; }

.pd2-buy { margin: 0; }
.pd2-qty-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 14px; }
.pd2-qty { display: inline-flex; align-items: center; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--d-border); }
.pd2-qty button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: #e5e9f2; font-size: 1.15rem; cursor: pointer; transition: background-color 0.2s, transform 0.2s; }
.pd2-qty button:hover { background: rgba(255, 255, 255, 0.1); }
.pd2-qty button:active { transform: scale(0.9); }
body.v2 .pd2-qty input { width: 46px; padding: 0; border: 0; background: transparent; color: #fff; font-weight: 700; font-size: 1rem; text-align: center; }
body.v2 .pd2-qty input:focus { outline: none; }
.pd2-stock { color: var(--d-muted); font-size: 0.86rem; }
.pd2-stock.is-low { display: inline-flex; align-items: center; gap: 8px; color: #fbbf24; font-weight: 600; }
.pd2-stock.is-low::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 10px #f59e0b; }

.pd2-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.pd2-cta-main { position: relative; overflow: hidden; flex: 1 1 220px; }
.pd2-cta-main svg { transition: transform 0.35s var(--v-ease); }
.pd2-cta-main:hover { transform: translateY(-2px) scale(1.01); }
.pd2-cta-main:hover svg { transform: translateX(4px); }
.pd2-cta-main:active { transform: scale(0.98); }
.pd2-cta-main::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent); transform: skewX(-18deg);
  animation: pd2Shine 5s ease-in-out 1.5s infinite;
}
@keyframes pd2Shine { 0%, 70% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(420%) skewX(-18deg); } }
.pd2-cta-cart { flex: 1 1 200px; }
.pd2-cta-cart:active { transform: scale(0.98); }
body.v2 .pd2-wish { position: static; width: 54px; height: 54px; flex: 0 0 54px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--d-border); color: #e5e9f2; transition: transform 0.3s var(--v-ease), border-color 0.25s, color 0.25s; }
body.v2 .pd2-wish:hover { transform: scale(1.06); border-color: rgba(244, 114, 182, 0.5); color: #f9a8d4; }
body.v2 .pd2-wish.active { color: #f472b6; border-color: rgba(244, 114, 182, 0.5); }
/* Ahorro real (precio oficial cargado por el admin / planes largos) */
.pd2-save { display: inline-flex; align-items: center; gap: 8px; margin: -8px 0 20px; padding: 8px 14px; border-radius: 12px; background: rgba(34, 197, 94, 0.08); border: 1px dashed rgba(34, 197, 94, 0.35); color: #b7c0d3; font-size: 0.86rem; }
.pd2-save svg { color: #4ade80; flex-shrink: 0; }
.pd2-save strong { color: #86efac; }
.pd2-plan-save { align-self: flex-start; margin-top: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(34, 197, 94, 0.14); color: #86efac; font-size: 0.7rem; font-weight: 700; }

/* Medios de pago */
/* Todas las etiquetas del mismo tamaño y sobre blanco: los logos de cada marca vienen pensados para fondo claro. */
.pd2-pay { margin-top: 18px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--d-border); }
.pd2-pay-label { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; color: #8f99ad; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pd2-pay-label svg { color: #86efac; }
.pd2-pay-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pd2-pay-tile {
  display: flex; align-items: center; justify-content: center; height: 36px; min-width: 0; padding: 0 10px; border-radius: 10px;
  background: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 18px -10px rgba(0, 0, 0, 0.7);
  transition: transform 0.3s var(--v-ease), box-shadow 0.3s var(--v-ease);
}
.pd2-pay-tile:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 12px 22px -10px rgba(99, 102, 241, 0.6); }
.pd2-pay-tile img { display: block; height: 22px; width: auto; max-width: 100%; object-fit: contain; }
.pd2-pay-tile.is-text { color: #1e293b; font-family: var(--v-display); font-size: 0.82rem; font-weight: 700; letter-spacing: -0.01em; }

/* Mini paso a paso junto al botón */
.pd2-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; color: #b7c0d3; font-size: 0.8rem; font-weight: 600; }
.pd2-flow li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pd2-flow li + li::before { content: ''; width: 18px; height: 1px; margin-right: 1px; background: linear-gradient(90deg, rgba(129, 140, 248, 0.2), rgba(129, 140, 248, 0.7)); }
.pd2-flow span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(99, 102, 241, 0.2); color: #c7d2fe; font-size: 0.7rem; font-weight: 800; }
.pd2-wa-note { margin: 14px 0 0; color: #b7c0d3; font-size: 0.92rem; line-height: 1.55; }

/* Compra por WhatsApp: vista previa del chat con la paleta del modo oscuro de WhatsApp (cabecera #202c33, fondo
   #0b141a, burbuja enviada #005c4b). Todos los textos pasan 4.5:1. */
.pd2-wa { overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px; background: #0b141a; box-shadow: 0 28px 60px -30px rgba(0, 168, 132, 0.55); }
.pd2-wa-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #202c33; }
.pd2-wa-avatar { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: #0b141a; }
.pd2-wa-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pd2-wa-who strong { color: #e9edef; font-size: 1rem; font-weight: 600; }
.pd2-wa-who small { color: #8696a0; font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd2-wa-brand { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: #00a884; font-size: 0.8rem; font-weight: 600; }
.pd2-wa-brand svg { width: 16px; height: 16px; }
.pd2-wa-chat { padding: 18px 18px 4px; background-image: radial-gradient(rgba(233, 237, 239, 0.05) 1px, transparent 1px); background-size: 14px 14px; }
.pd2-wa-bubble { position: relative; width: fit-content; max-width: 86%; margin: 0 8px 0 auto; padding: 9px 12px; border-radius: 10px 0 10px 10px; background: #005c4b; color: #e9edef; font-size: 0.94rem; line-height: 1.45; }
.pd2-wa-bubble::after { content: ''; position: absolute; top: 0; right: -8px; border-left: 8px solid #005c4b; border-bottom: 10px solid transparent; }
.pd2-wa-hint { margin: 8px 8px 0 0; color: #8696a0; font-size: 0.78rem; text-align: right; }
.pd2-wa-cta { display: flex; align-items: center; gap: 12px; margin: 14px; padding: 8px 8px 8px 20px; border-radius: 999px; background: #00a884; color: #0b141a; font-family: var(--v-sans); font-size: 1.02rem; font-weight: 700; text-decoration: none; transition: background-color 0.25s; }
.pd2-wa-cta > span:first-of-type { flex: 1; }
.pd2-wa-send { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #0b141a; color: #00a884; transition: transform 0.35s var(--v-ease); }
.pd2-wa-cta:hover { background: #06cf9c; color: #0b141a; }
.pd2-wa-cta:hover .pd2-wa-send { transform: translateX(3px); }
.pd2-wa-cta:focus-visible { outline: 3px solid #e9edef; outline-offset: 3px; }
@media (max-width: 400px) {
  .pd2-wa-cta { gap: 10px; margin: 12px; padding-left: 16px; font-size: 0.96rem; }
  .pd2-wa-cta > span:first-of-type { white-space: nowrap; }
  .pd2-wa-chat { padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) { .pd2-wa-cta, .pd2-wa-send { transition: none; } }

/* Complemento sugerido */
.pd2-combo { margin-top: 22px; padding: 14px; border-radius: 20px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(34, 211, 238, 0.05)); border: 1px solid rgba(129, 140, 248, 0.22); }
.pd2-combo-title { margin: 0 0 10px; color: #a5b4fc; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pd2-combo-row { display: flex; align-items: center; gap: 14px; }
.pd2-combo-media { display: grid; place-items: center; width: 58px; height: 58px; flex-shrink: 0; padding: 6px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); }
.pd2-combo-media svg, .pd2-combo-media img { width: 100%; height: 100%; object-fit: contain; }
.pd2-combo-info { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.pd2-combo-info strong { display: block; overflow: hidden; color: #fff; font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; }
.pd2-combo-info span { color: #c7d2fe; font-family: var(--v-display); font-weight: 700; font-size: 0.92rem; }
.pd2-combo-info:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.pd2-combo-form { margin: 0; flex-shrink: 0; }
.pd2-combo-add { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: #fff; font-family: inherit; font-weight: 600; font-size: 0.84rem; cursor: pointer; transition: background-color 0.25s, border-color 0.25s, transform 0.3s var(--v-ease); }
.pd2-combo-add:hover { background: var(--v-grad-btn); border-color: transparent; transform: translateY(-1px); }
.pd2-combo-add:active { transform: scale(0.96); }
.pd2-combo-add:disabled, .pd2-cta-cart:disabled { opacity: 0.6; cursor: progress; }

/* Compartir */
.pd2-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 18px; color: #8f99ad; font-size: 0.82rem; }
.pd2-share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--d-border); background: rgba(255, 255, 255, 0.04); color: #dfe4ee; font-family: inherit; font-size: 0.8rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color 0.25s, background-color 0.25s, color 0.25s; }
.pd2-share-btn:hover { color: #fff; border-color: var(--d-border-strong); background: rgba(255, 255, 255, 0.08); }
.pd2-share-btn.is-wa:hover { border-color: rgba(37, 211, 102, 0.5); color: #4ade80; }

/* Aviso "agregado al carrito" */
.pd2-toast {
  position: fixed; left: 50%; top: calc(var(--v-header-h) + 12px); z-index: 90; display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 14px; border-radius: 16px; max-width: calc(100% - 32px);
  background: rgba(12, 15, 24, 0.92); border: 1px solid rgba(34, 197, 94, 0.35); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: #fff; font-size: 0.88rem; font-weight: 600;
  opacity: 0; visibility: hidden; transform: translate(-50%, -14px) scale(0.97);
  transition: opacity 0.3s, transform 0.45s var(--v-ease), visibility 0s 0.45s;
}
.pd2-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.3s, transform 0.45s var(--v-ease), visibility 0s; }
.pd2-toast-icon { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: #22c55e; color: #fff; }
.pd2-toast-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd2-toast-link { color: #93c5fd; font-size: 0.84rem; text-decoration: none; white-space: nowrap; }
.pd2-toast-link:hover { color: #dbeafe; }
@keyframes pd2Bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.v2-badge.is-bump { animation: pd2Bump 0.5s var(--v-ease); }

.pd2-trust { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.pd2-trust li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--d-border); color: var(--d-muted); font-size: 0.88rem; line-height: 1.55; transition: border-color 0.25s, background-color 0.25s; }
.pd2-trust li:hover { border-color: var(--d-border-strong); background: rgba(255, 255, 255, 0.05); }
.pd2-trust strong { display: block; margin-bottom: 2px; color: #fff; font-size: 0.92rem; }
.pd2-trust a { color: #93c5fd; font-weight: 600; text-decoration: none; }
.pd2-trust a:hover { color: #dbeafe; }
.pd2-trust-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; background: rgba(99, 102, 241, 0.16); color: #c7d2fe; }
.pd2-trust-icon--green { background: rgba(34, 197, 94, 0.14); color: #86efac; }
.pd2-disclaimer { margin: 18px 0 0; color: #6f7a8f; font-size: 0.74rem; line-height: 1.6; }

.pd2-soldout { padding: 20px; border-radius: 20px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.28); }
.pd2-soldout strong { color: #fbbf24; font-family: var(--v-display); font-size: 1.15rem; }
.pd2-soldout p { margin: 6px 0 14px; color: var(--d-muted); }
.pd2-restock { display: flex; gap: 10px; flex-wrap: wrap; }
body.v2 .pd2-restock input[type="email"] { flex: 1 1 220px; padding: 13px 16px; border-radius: 999px; border: 1px solid var(--d-border-strong); background: rgba(255, 255, 255, 0.05); color: #fff; }
/* Agotado: opciones del mismo producto que sí se venden, junto al aviso */
.pd2-alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(245, 158, 11, 0.2); }
.pd2-soldout .pd2-alt-title { margin: 0 0 10px; color: #f1f4fa; font-weight: 600; font-size: 0.92rem; }
.pd2-alt-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pd2-alt-chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border-radius: 14px;
  border: 1px solid var(--d-border-strong); background: rgba(255, 255, 255, 0.05); color: #fff; font-weight: 600; font-size: 0.88rem;
  text-decoration: none; transition: border-color 0.2s, background-color 0.2s, transform 0.25s var(--v-ease);
}
.pd2-alt-chip:hover { border-color: rgba(129, 140, 248, 0.6); background: rgba(129, 140, 248, 0.12); transform: translateY(-1px); }
.pd2-alt-chip:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }
.pd2-alt-price { color: #c7d2fe; font-weight: 700; }
.pd2-plan.is-soldout:not(.is-active) { opacity: 0.62; }
.pd2-plan-soldout { align-self: flex-start; margin-top: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(245, 158, 11, 0.14); color: #fbbf24; font-size: 0.7rem; font-weight: 700; }

/* Guía larga: índice lateral + bloques */
.pd2-guide { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.pd2-guide:not(:has(.pd2-toc)) { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.pd2-toc { position: sticky; top: calc(var(--v-header-h) + 24px); }
.pd2-toc-title { margin: 0 0 12px; color: #7f8aa0; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pd2-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--d-border); }
.pd2-toc a { position: relative; display: flex; gap: 10px; padding: 8px 12px; margin-left: -1px; border-left: 2px solid transparent; color: #8f99ad; font-size: 0.86rem; line-height: 1.4; text-decoration: none; transition: color 0.2s, border-color 0.3s, background-color 0.2s; }
.pd2-toc a span { color: #5d6781; font-variant-numeric: tabular-nums; font-weight: 700; transition: color 0.2s; }
.pd2-toc a:hover { color: #fff; background: rgba(255, 255, 255, 0.03); }
.pd2-toc a.is-active { color: #fff; border-left-color: #818cf8; }
.pd2-toc a.is-active span { color: #a5b4fc; }
.pd2-guide-body { display: grid; gap: 16px; }
.pd2-block {
  scroll-margin-top: calc(var(--v-header-h) + 20px);
  padding: clamp(22px, 3.4vw, 36px); border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); border: 1px solid var(--d-border);
  color: #b7c0d3; font-size: 1rem; line-height: 1.75;
}
body.v2-dark .v2-section .pd2-block h2 { margin: 0 0 14px; color: #fff; font-family: var(--v-display); font-size: clamp(1.3rem, 2.2vw, 1.65rem); letter-spacing: -0.02em; line-height: 1.2; }
.pd2-block h3 { margin: 18px 0 8px; color: #fff; font-size: 1.05rem; }
.pd2-block p { margin: 0 0 12px; }
.pd2-block p:last-child { margin-bottom: 0; }
.pd2-block strong { color: #fff; font-weight: 600; }
.pd2-block a { color: #93c5fd; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(147, 197, 253, 0.4); text-underline-offset: 3px; transition: color 0.2s, text-decoration-color 0.2s; }
.pd2-block a:hover { color: #dbeafe; text-decoration-color: currentColor; }
.pd2-block ul { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.pd2-block ul li { position: relative; padding-left: 34px; }
.pd2-block ul li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(34, 197, 94, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386efac' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.pd2-block ol { position: relative; display: grid; gap: 18px; margin: 10px 0 0; padding: 0; list-style: none; counter-reset: pd2step; }
.pd2-block ol::before { content: ''; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #3b82f6, #8b5cf6, rgba(34, 211, 238, 0.3)); }
.pd2-block ol li { position: relative; padding-left: 54px; min-height: 36px; counter-increment: pd2step; }
.pd2-block ol li::before {
  content: counter(pd2step); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--v-grad-btn); color: #fff; font-family: var(--v-display); font-weight: 700; font-size: 0.95rem;
  box-shadow: 0 0 0 5px var(--d-bg), 0 8px 18px -6px rgba(124, 58, 237, 0.7);
}

.pd2-faq-item { border-bottom: 1px solid var(--d-border); }
.pd2-faq-item:last-child { border-bottom: 0; }
.pd2-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; color: #fff; font-weight: 600; cursor: pointer; list-style: none; transition: color 0.2s; }
.pd2-faq-item summary::-webkit-details-marker { display: none; }
.pd2-faq-item summary:hover { color: #c7d2fe; }
.pd2-faq-icon { position: relative; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--d-border); transition: transform 0.35s var(--v-ease), background-color 0.25s; }
.pd2-faq-icon::before, .pd2-faq-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; border-radius: 2px; background: #c7d2fe; translate: -50% -50%; }
.pd2-faq-icon::after { rotate: 90deg; transition: rotate 0.35s var(--v-ease); }
.pd2-faq-item[open] .pd2-faq-icon { background: rgba(129, 140, 248, 0.2); transform: rotate(180deg); }
.pd2-faq-item[open] .pd2-faq-icon::after { rotate: 0deg; }
.pd2-faq-answer { padding: 0 44px 18px 0; color: #b7c0d3; animation: pd2Open 0.35s var(--v-ease); }
@keyframes pd2Open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Opiniones reales */
.pd2-rating-summary { margin: 12px 0 0; color: var(--d-muted); }
.pd2-rating-summary strong { color: #fff; font-size: 1.1rem; }
.pd2-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.pd2-review { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 24px; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border: 1px solid var(--d-border); transition: transform 0.45s var(--v-ease), border-color 0.3s; }
.pd2-review:hover { transform: translateY(-4px); border-color: var(--d-border-strong); }
.pd2-review blockquote { margin: 0; color: #dfe4ee; font-size: 1rem; line-height: 1.65; }
.pd2-review figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.pd2-review figcaption strong { display: block; color: #fff; font-size: 0.92rem; }
.pd2-review figcaption small { display: flex; align-items: center; gap: 5px; color: #86efac; font-size: 0.76rem; }
.pd2-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--v-grad-btn); color: #fff; font-family: var(--v-display); font-weight: 700; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08); }

.pd2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }

/* Barra de compra fija (aparece cuando el botón principal sale de pantalla) */
.pd2-sticky { position: fixed; left: 0; right: 0; bottom: 16px; z-index: 70; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; transform: translateY(calc(100% + 120px)); opacity: 0; visibility: hidden; transition: transform 0.45s var(--v-ease), opacity 0.3s, visibility 0s 0.45s; }
.pd2-sticky.is-visible { transform: none; opacity: 1; visibility: visible; transition: transform 0.45s var(--v-ease), opacity 0.3s, visibility 0s; }
.pd2-sticky-inner {
  display: flex; align-items: center; gap: 18px; width: min(640px, 100%); padding: 10px 10px 10px 22px; border-radius: 999px; pointer-events: auto;
  background: rgba(12, 15, 24, 0.86); border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
}
.pd2-sticky-info { flex: 1; min-width: 0; }
.pd2-sticky-info strong { display: block; overflow: hidden; color: #fff; font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; }
.pd2-sticky-info span { color: #c7d2fe; font-family: var(--v-display); font-weight: 700; font-size: 0.95rem; }
.pd2-sticky .v2-btn { flex-shrink: 0; }

@media (max-width: 960px) {
  .pd2-layout { grid-template-columns: minmax(0, 1fr); }
  .pd2-visual { position: static; }
  .pd2-stage { max-width: 440px; }
  .pd2-guide { grid-template-columns: minmax(0, 1fr); }
  .pd2-toc { position: static; padding: 18px 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--d-border); }
}
@media (max-width: 860px) {
  .pd2-sticky { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
  .pd2-hero { padding-top: calc(var(--v-header-h) + 10px); }
  .pd2-stage { border-radius: 28px; }
  .pd2-chip { gap: 6px; padding: 5px 10px 5px 5px; border-radius: 11px; }
  .pd2-chip strong { font-size: 0.7rem; }
  .pd2-chip small { display: none; }
  .pd2-chip-icon { width: 22px; height: 22px; border-radius: 7px; }
  .pd2-chip-icon svg { width: 13px; height: 13px; }
  .pd2-plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pd2-plan { padding: 12px 12px 12px 38px; }
  .pd2-plan-check { left: 12px; top: 14px; }
  .pd2-cta-main { flex-basis: 100%; }
  .pd2-sticky-inner { padding-left: 16px; gap: 12px; }
  .pd2-faq-answer { padding-right: 0; }
  .pd2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pd2-toast { gap: 10px; }
  .pd2-pay { padding: 12px; }
  .pd2-pay-list { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
  .pd2-pay-tile { height: 32px; padding: 0 6px; border-radius: 8px; }
  .pd2-pay-tile img { height: 18px; }
  .pd2-pay-tile.is-text { font-size: 0.74rem; }
  .pd2-toast-link { display: none; }
  .pd2-flow { font-size: 0.76rem; gap: 6px; }
  .pd2-flow li + li::before { width: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pd2-halo, .pd2-ring--2, .pd2-product-float, .pd2-cta-main::after { animation: none; }
}