/* ==========================================================
   PC al Toque · Inicio v4 "premium"
   Misma paleta (azul profundo, azul, violeta) · más aire, capas,
   líneas finas y movimiento sutil. Va al final, después de motion3.css.
   ========================================================== */
:root {
  --p-hair: rgba(255, 255, 255, .12);
  --p-hair-ink: rgba(13, 21, 56, .09);
  --p-sh-1: 0 1px 2px rgba(13, 21, 56, .05), 0 8px 24px rgba(13, 21, 56, .06);
  --p-sh-2: 0 2px 4px rgba(13, 21, 56, .05), 0 24px 56px rgba(20, 32, 95, .16);
  --p-grad: linear-gradient(100deg, #2f6bff 0%, #6d4aff 100%);
  --p-ease: cubic-bezier(.2, .8, .2, 1);
}
html { scroll-behavior: smooth; }
::selection { background: #2f6bff; color: #fff; }

/* Barra de progreso de lectura */
.p4-progress { position: fixed; z-index: 90; left: 0; top: 0; height: 3px; width: 100%; background: var(--p-grad); transform-origin: left; transform: scaleX(var(--sp, 0)); pointer-events: none; }

/* ---------- Encabezados de sección: numerados, con más aire ---------- */
main { counter-reset: sec; }
.head3 { max-width: 720px; margin-bottom: 56px; }
.head3 h2 { font-size: clamp(30px, 4.6vw, 48px); letter-spacing: -.03em; line-height: 1.08; }
.head3 p { font-size: 18.5px; }
.head3 p.eyebrow3 { counter-increment: sec; gap: 12px; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1px solid var(--p-hair); background: rgba(255, 255, 255, .05); font-size: 12px; letter-spacing: .16em; color: #b9c9ff; }
.head3 p.eyebrow3::before { content: "0" counter(sec); width: auto; height: auto; padding: 4px 8px; border-radius: 999px; background: var(--p-grad); color: #fff; opacity: 1; font-size: 11px; letter-spacing: .06em; }
.head3 p.eyebrow3::after { content: none; }
.head3--light p.eyebrow3, .go3 .head3 p.eyebrow3 { border-color: var(--p-hair-ink); background: #fff; color: var(--h-blue-deep); box-shadow: var(--p-sh-1); }

/* ---------- Botones ---------- */
.btn3 { position: relative; overflow: hidden; min-height: 54px; padding: 0 28px; border-radius: 14px; letter-spacing: -.005em; transition: transform .25s var(--p-ease), box-shadow .25s, background .25s, border-color .25s; }
.btn3::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
.btn3:hover::after { transform: translateX(120%); transition: transform .7s ease; }
.btn3--sun { box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 14px 34px rgba(47, 107, 255, .35); }
.btn3--sun::after { background: linear-gradient(110deg, transparent 30%, rgba(47, 107, 255, .16) 50%, transparent 70%); }
.btn3--line { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(8px); }

/* ---------- 1. Hero ---------- */
.hero3 { padding: 84px 0 96px; background: radial-gradient(1000px 600px at 86% -10%, rgba(93, 74, 255, .5) 0%, transparent 60%), radial-gradient(820px 520px at -8% 110%, rgba(31, 79, 216, .5) 0%, transparent 62%), linear-gradient(180deg, #050823 0%, #060a28 100%); }
.hero3::before { opacity: .22; background-size: 64px 64px; }
.hero3::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(143, 176, 255, .5), transparent); }
.hero3__glow i { filter: blur(100px); opacity: .34; transition: transform .6s ease-out; }
.hero3__glow::after { content: ""; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero3__grid { gap: 34px 64px; }
.pill3 { padding: 8px 16px; background: rgba(255, 255, 255, .05); border-color: var(--p-hair); backdrop-filter: blur(8px); font-weight: 600; letter-spacing: .02em; }
.hero3__copy h1 { margin: 24px 0 20px; font-size: clamp(40px, 5.8vw, 68px); line-height: 1; letter-spacing: -.04em; }
.hl3 { background: linear-gradient(95deg, #8fb8ff 0%, #a896ff 55%, #8fb8ff 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: p4-sheen 7s linear infinite; }
@keyframes p4-sheen { to { background-position: 200% 0; } }
.hero3__lead { font-size: clamp(17.5px, 2vw, 21px); color: rgba(255, 255, 255, .74); }
.hero3__cta { margin-top: 34px; }
.hero3__tip { color: rgba(255, 255, 255, .6); font-weight: 500; }
.anat__svg { filter: drop-shadow(0 40px 70px rgba(0, 0, 0, .6)) drop-shadow(0 0 60px rgba(79, 110, 255, .25)); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s ease-out; }
.chipx { min-height: 38px; background: rgba(255, 255, 255, .04); border-color: var(--p-hair); font-weight: 600; backdrop-filter: blur(6px); transition: background .2s, color .2s, border-color .2s, transform .2s; }
.chipx:hover { transform: translateY(-1px); }

/* Tarjeta de la pieza: cristal oscuro */
.anat__card { padding: 24px 26px 30px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .04)); border: 1px solid var(--p-hair); color: #fff; backdrop-filter: blur(14px); box-shadow: 0 30px 70px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .12) inset; }
.anat__card::before { top: 22px; bottom: 22px; width: 3px; border-radius: 3px; box-shadow: 0 0 18px var(--c); }
.anat__tag { color: rgba(255, 255, 255, .65); }
.anat__card h3 { font-size: 26px; color: #fff; }
.anat__frase { color: rgba(255, 255, 255, .88); }
.anat__como, .anat__mira { color: rgba(255, 255, 255, .7); }
.anat__como { background: rgba(255, 255, 255, .05); border-color: var(--p-hair); }
.anat__card b { color: #fff; }
.anat__next { background: #fff; color: var(--n-1); border-radius: 12px; }
.anat__next:hover { background: #dfe8ff; }
.anat__cat { color: #b9c9ff; }
.anat__bar { background: rgba(255, 255, 255, .08); }

/* ---------- Cifras: panel de cristal que continúa el hero ---------- */
.stats3 { position: relative; padding: 0 0 72px; background: #060a28; }
.stats3__grid { padding: 26px 10px; border-radius: 22px; border: 1px solid var(--p-hair); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)); box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 30px 60px rgba(0, 0, 0, .35); }
.stats3__grid li { border-left-color: var(--p-hair); }
.stats3__grid b { background: linear-gradient(180deg, #fff 20%, #9db8ff 100%); -webkit-background-clip: text; background-clip: text; }
.stats3__grid span { color: rgba(255, 255, 255, .68); font-size: 14px; letter-spacing: .01em; }

/* ---------- Ruta: cuatro paradas ---------- */
.path3 { position: relative; padding: 104px 0 108px; background: radial-gradient(800px 360px at 50% 0%, #eef2ff 0%, transparent 70%), #fff; }
.path3__grid { gap: 20px; counter-reset: stop; }
.stop { min-height: 280px; padding: 28px 24px 62px; border-radius: 22px; border-color: var(--p-hair-ink); box-shadow: var(--p-sh-1); transform: perspective(800px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(var(--lift, 0)); transition: transform .35s var(--p-ease), box-shadow .35s, border-color .35s; }
.stop::before { height: 3px; background: linear-gradient(90deg, var(--a), transparent 85%); }
.stop::after, .gocard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--a) 14%, transparent), transparent 70%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.stop:hover, .gocard:hover { --lift: -6px; transform: perspective(800px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(var(--lift, 0)); border-color: color-mix(in srgb, var(--a) 45%, #fff); box-shadow: var(--p-sh-2); }
.stop:hover::after, .gocard:hover::after { opacity: 1; }
.stop__n { display: block; width: auto; height: auto; background: none; font-size: 44px; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--a) 70%, #fff); }
.stop__n::before { content: "0"; }
.stop--sun .stop__n { color: transparent; }
.stop strong { margin-top: 14px; font-size: 21px; }
.stop small { left: 24px; bottom: 22px; letter-spacing: .04em; text-transform: uppercase; font-size: 11.5px; }
.stop__go { right: 20px; bottom: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--a) 10%, #fff); font-size: 17px; transition: transform .3s var(--p-ease), background .3s, color .3s; }
.stop:hover .stop__go { transform: translateX(3px); background: var(--a); color: #fff; }

/* ---------- Video ---------- */
.video3.cine { padding: 104px 0 100px; }
.video3.cine::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(143, 176, 255, .45), transparent); }
.cine__frame { border-radius: 22px; border: 1px solid var(--p-hair); }
.cine__caps button { border-radius: 14px; }

/* ---------- Ensamblar / Catálogo / Ayuda ---------- */
.go3 { padding: 104px 0 96px; background: radial-gradient(700px 320px at 50% 0%, #eaefff 0%, transparent 70%), #f6f8fe; }
.go3__grid { gap: 22px; }
.gocard { overflow: hidden; padding: 32px 28px 28px; border-radius: 22px; border-color: var(--p-hair-ink); box-shadow: var(--p-sh-1); transform: perspective(800px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(var(--lift, 0)); transition: transform .35s var(--p-ease), box-shadow .35s, border-color .35s; }
.gocard__ico { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(140deg, color-mix(in srgb, var(--a) 16%, #fff), #fff); border: 1px solid color-mix(in srgb, var(--a) 22%, #fff); transition: transform .35s var(--p-ease); }
.gocard:hover .gocard__ico { transform: scale(1.08) rotate(-4deg); }
.gocard strong { font-size: 23px; }
.gocard b { display: inline-flex; align-items: center; gap: 6px; transition: gap .25s; }
.gocard:hover b { gap: 12px; }

/* ---------- Mito o verdad ---------- */
.quiz3 { padding: 104px 0; }
.quiz3::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(143, 176, 255, .45), transparent); }
.quiz3__card { padding: 32px 32px 34px; border-radius: 24px; box-shadow: 0 40px 90px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08); }
.qz__btn { border-radius: 14px; min-height: 62px; }

/* ---------- Cierre: ayuda por WhatsApp ---------- */
.cta4 { padding: 0 0 96px; background: var(--paper, #fff); }
.cta4__box { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 28px 48px; align-items: center; padding: 52px 56px; border-radius: 28px; color: #fff; background: radial-gradient(600px 300px at 90% 0%, rgba(109, 74, 255, .7) 0%, transparent 65%), radial-gradient(500px 300px at 0% 100%, rgba(47, 107, 255, .6) 0%, transparent 65%), #060a28; box-shadow: 0 40px 80px rgba(20, 32, 95, .28); }
.cta4__box::before { content: ""; position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(130, 160, 255, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(130, 160, 255, .14) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 80% 20%, #000 10%, transparent 70%); pointer-events: none; }
.cta4__box > * { position: relative; }
.cta4 h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: #fff; }
.cta4 h2::after { content: none; }
.cta4 p { margin-top: 12px; max-width: 34em; font-size: 17.5px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.cta4__acts { display: grid; gap: 12px; min-width: 230px; }

/* ---------- Aparición con desenfoque ---------- */
@keyframes p4-up { from { opacity: 0; transform: translateY(30px); filter: blur(10px); } }
.rv-on [data-rv].is-seen { animation: p4-up .9s var(--p-ease) var(--rv, 0ms) backwards; }

/* ---------- Móvil ---------- */
@media (max-width: 960px) {
  .hero3 { padding: 52px 0 64px; }
  .stats3 { padding-bottom: 52px; }
  .stats3__grid { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .stats3__grid li:nth-child(3) { border-left: 0; }
  .path3, .go3, .quiz3, .video3.cine { padding: 68px 0; }
  .cta4 { padding-bottom: 64px; }
  .cta4__box { grid-template-columns: 1fr; padding: 36px 26px; border-radius: 22px; }
  .head3 { margin-bottom: 36px; }
}
@media (max-width: 720px) {
  .stop { min-height: 0; }
  .anat__card { padding: 22px 20px 26px 24px; }
  .quiz3__card { padding: 24px 18px 26px; }
}
@media (hover: none) { .stop, .gocard, .anat__svg { transform: none !important; } }
html.gg-calm .hl3, html.gg-calm .btn3::after { animation: none; transition: none; }
html.gg-calm .rv-on [data-rv].is-seen, html.gg-calm [data-rv] { animation: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .hl3 { animation: none; } .stop, .gocard, .anat__svg { transform: none !important; } html { scroll-behavior: auto; } }