/* Plan Vector · hoja de estilo compartida (plan-vector.html, test-talleres.html) */
:root {
  --pv-purple: #511F74;
  --pv-blue: #0056BF;
  --pv-gray: #686868;
  --pv-ink: #2D2040;
  --pv-soft: #F4F0FA;
  --pv-lilac: #E7DDF2;
  --planet-purple: #7B2FBE;
  --yellow: #FFC612;
  --green: #4CAF50;
}

* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:74px }
body { font-family:'Nunito Sans',sans-serif; background:#fff; color:var(--pv-ink); overflow-x:hidden }
h1,h2,h3,h4 { font-family:'Montserrat',sans-serif }

/* ─── NAV fija ─── */
.pv-nav {
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.95); backdrop-filter:blur(8px);
  box-shadow:0 2px 18px rgba(81,31,116,.12);
}
.pv-nav-inner {
  max-width:1100px; margin:0 auto; padding:10px 18px;
  display:flex; align-items:center; gap:16px; justify-content:space-between;
}
.pv-nav-brand { display:flex; align-items:center; gap:10px; text-decoration:none }
.pv-nav-brand img { width:34px; height:34px }
.pv-nav-brand b { font-family:'Montserrat',sans-serif; font-weight:800; color:var(--pv-purple); font-size:1.05rem; letter-spacing:.5px }
.pv-nav-links { display:flex; gap:6px; flex-wrap:wrap; align-items:center }
.pv-nav-links a {
  text-decoration:none; color:var(--pv-ink); font-weight:700; font-size:.84rem;
  padding:8px 12px; border-radius:16px; transition:background .2s,color .2s; text-align:center; line-height:1.25;
}
.pv-nav-links a small { display:block; font-size:.7rem; font-weight:600; color:var(--pv-gray) }
.pv-nav-links a:hover { background:var(--pv-soft); color:var(--pv-purple) }
.pv-nav-links a.cta { background:var(--green); color:#fff }
.pv-nav-links a.cta:hover { background:#3d9142 }
.pv-nav-links a.to-planet { background:var(--planet-purple); color:#fff }
.pv-nav-links a.to-planet small { color:rgba(255,255,255,.85) }
.pv-nav-links a.to-planet:hover { background:#5F1F9C; color:#fff }

/* ─── BOTONES ─── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:1rem;
  padding:13px 26px; border-radius:50px; text-decoration:none; border:none; cursor:pointer;
  transition:transform .2s, box-shadow .2s, background .2s;
}
.btn:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(81,31,116,.22) }
.btn-pv { background:var(--pv-purple); color:#fff }
.btn-pv:hover { background:var(--pv-blue) }
.btn-pv-ghost { background:#fff; color:var(--pv-purple); border:2px solid var(--pv-purple) }
.btn-planet { background:var(--yellow); color:var(--planet-purple); font-weight:800 }
.btn-planet:hover { background:#fff }

/* ─── HEADER PLAN VECTOR ─── */
.pv-header {
  background:linear-gradient(180deg,#FFFFFF 0%, #F4F0FA 100%);
  padding:54px 20px 62px; color:var(--pv-gray);
}
.pv-inner { max-width:1100px; margin:0 auto; text-align:center }
.pv-logo { max-width:420px; width:80%; height:auto; display:block; margin:0 auto }
.pv-lead {
  max-width:640px; margin:18px auto 0; font-family:'Montserrat',sans-serif; font-weight:700;
  font-size:1.35rem; letter-spacing:1px; text-transform:uppercase; color:var(--pv-purple);
}
.pv-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:42px; text-align:left }
.pv-col {
  background:#fff; border-radius:22px; padding:30px 28px;
  box-shadow:0 8px 32px rgba(81,31,116,.10); border-top:5px solid var(--pv-blue);
}
.pv-col h3 {
  font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  font-size:1rem; color:var(--pv-blue); margin-bottom:20px;
}
.pv-steps { list-style:none; position:relative }
.pv-steps li { display:flex; gap:16px; align-items:flex-start; position:relative; padding-bottom:26px }
.pv-steps li:last-child { padding-bottom:0 }
.pv-steps li::before {
  content:''; position:absolute; left:19px; top:40px; bottom:2px; width:3px;
  background:linear-gradient(180deg,var(--pv-blue),var(--pv-purple)); border-radius:2px;
}
.pv-steps li:last-child::before { display:none }
.pv-step-n {
  flex:0 0 40px; width:40px; height:40px; border-radius:50%;
  background:var(--pv-blue); color:#fff; font-family:'Montserrat',sans-serif; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
  box-shadow:0 4px 12px rgba(0,86,191,.35);
}
.pv-steps li:nth-child(2) .pv-step-n { background:#2A3FA0 }
.pv-steps li:nth-child(3) .pv-step-n { background:var(--pv-purple); box-shadow:0 4px 12px rgba(81,31,116,.35) }
.pv-steps b { display:block; font-family:'Montserrat',sans-serif; font-weight:700; color:var(--pv-ink); font-size:.98rem; margin-bottom:3px }
.pv-steps p { font-size:.9rem; line-height:1.55; color:var(--pv-gray) }
.pv-cta { margin-top:38px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap }

/* ─── LUDOLAB ─── */
.pv-col.ludolab {
  border-top-color:var(--pv-purple); position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start;
  background:linear-gradient(160deg,#fff 0%, #FBF8FF 100%);
}
.pv-col.ludolab h3 { color:var(--pv-purple); font-size:1.6rem; letter-spacing:4px; margin-bottom:12px }
.ludo-tag {
  display:inline-block; background:var(--pv-soft); color:var(--pv-purple); font-family:'Montserrat',sans-serif;
  font-weight:700; font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; border-radius:50px; padding:4px 12px; margin-bottom:12px;
}
.ludo-blocks { position:absolute; right:22px; top:22px; width:70px; height:70px }
.lb { position:absolute; width:30px; height:30px; border-radius:7px; animation:lbFloat 4s ease-in-out infinite }
.lb1 { background:var(--pv-blue); left:0; top:0 }
.lb2 { background:var(--pv-purple); right:0; top:8px; animation-delay:.6s }
.lb3 { background:#2A3FA0; left:8px; bottom:0; animation-delay:1.2s }
.lb4 { background:var(--yellow); right:4px; bottom:4px; animation-delay:1.8s; width:22px; height:22px }
@keyframes lbFloat { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-6px) rotate(6deg)} }
.ludo-desc { font-family:'Montserrat',sans-serif; font-weight:700; color:var(--pv-ink); font-size:1.02rem; line-height:1.5; max-width:340px }
.ludo-how { margin-top:12px; font-size:.9rem; line-height:1.55; color:var(--pv-gray) }
.ludo-cta-text { margin-top:auto; padding-top:22px; font-family:'Montserrat',sans-serif; font-weight:700; color:var(--pv-blue); font-size:.95rem }
.ludo-btn { margin-top:12px }

/* ─── HEADER VECTOR (animado) ─── */
.pv-vector-header {
  background:radial-gradient(ellipse at 50% 0%, #F4F0FA 0%, #fff 60%);
  padding:70px 20px 76px; text-align:center; border-top:1px solid var(--pv-lilac);
}
.pv-vector-inner { max-width:760px; margin:0 auto }
.pv-vector-header h3 {
  font-weight:800; letter-spacing:2px; text-transform:uppercase;
  font-size:clamp(1rem,2.4vw,1.35rem); color:var(--pv-purple); margin-bottom:28px;
}
.pv-vector-stage { position:relative }
.pv-vector-svg { display:block; width:100%; max-width:520px; margin:0 auto 10px; overflow:visible }

/* Secuencia: punto de partida → magnitud (la línea se traza) → dirección (la punta) → etiquetas */
.v-origin { transform-box:fill-box; transform-origin:center; opacity:0; transform:scale(0) }
.v-pulse { transform-box:fill-box; transform-origin:center; opacity:0 }
.v-line { stroke-dasharray:300; stroke-dashoffset:300 }
.v-head { transform-box:fill-box; transform-origin:0% 100%; opacity:0; transform:scale(.2) }
.v-label { opacity:0; transform:translateY(6px) }
.v-caption { display:flex; justify-content:space-between; max-width:520px; margin:0 auto; padding:0 6px }
.v-cap { font-family:'Montserrat',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--pv-gray); opacity:0; transform:translateY(6px) }
.v-cap-3 { color:var(--pv-purple) } .v-cap-2 { color:var(--pv-blue) }

.play .v-origin { animation:vPop .6s cubic-bezier(.2,.9,.3,1.3) .2s forwards }
.play .v-pulse { animation:vPulse 2.4s ease-out .5s infinite }
.play .v-line { animation:vDraw 1.5s cubic-bezier(.4,0,.2,1) .9s forwards }
.play .v-head { animation:vHead .55s cubic-bezier(.2,.9,.3,1.3) 2.2s forwards }
.play .v-label-m { animation:vFade .6s ease 1.6s forwards }
.play .v-label-d { animation:vFade .6s ease 2.6s forwards }
.play .v-cap-1 { animation:vFade .6s ease .5s forwards }
.play .v-cap-2 { animation:vFade .6s ease 1.6s forwards }
.play .v-cap-3 { animation:vFade .6s ease 2.6s forwards }
@keyframes vPop { to{opacity:1;transform:scale(1)} }
@keyframes vPulse { 0%{opacity:.9;transform:scale(.4)} 100%{opacity:0;transform:scale(1.6)} }
@keyframes vDraw { to{stroke-dashoffset:0} }
@keyframes vHead { to{opacity:1;transform:scale(1)} }
@keyframes vFade { to{opacity:1;transform:translateY(0)} }

/* Frase con borde punteado que gira suavemente */
.pv-quote {
  position:relative; margin:30px auto 0; max-width:560px; border-radius:16px; padding:22px 26px;
  font-family:'Montserrat',sans-serif; font-weight:600; color:var(--pv-purple);
  font-size:1.05rem; line-height:1.55; text-align:center; background:#FBF8FF;
  animation:quoteBreath 6s ease-in-out infinite;
}
.pv-quote .hl { color:var(--pv-blue) }
.pv-quote-border { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible }
.pv-quote-border rect {
  width:calc(100% - 3px); height:calc(100% - 3px);
  fill:none; stroke:var(--pv-purple); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:10 9; animation:dashSpin 14s linear infinite;
}
.pv-quote-text { position:relative }
@keyframes dashSpin { to{stroke-dashoffset:-190} }
@keyframes quoteBreath { 0%,100%{box-shadow:0 0 0 0 rgba(81,31,116,0)} 50%{box-shadow:0 12px 34px -8px rgba(81,31,116,.28)} }

/* ─── CONTACTO / REDES ─── */
.pv-contact { background:linear-gradient(135deg,var(--pv-purple) 0%, #35155E 60%, var(--pv-blue) 140%); color:#fff; padding:64px 20px; text-align:center }
.pv-contact-inner { max-width:760px; margin:0 auto }
.pv-contact h3 { font-weight:800; font-size:1.6rem; margin-bottom:8px }
.pv-contact p { color:rgba(255,255,255,.85); font-weight:600 }
.pv-contact .btn-pv { background:var(--green) }
.pv-contact .btn-pv:hover { background:#3d9142 }
.pv-contact .btn-pv-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.7) }
.pv-social { list-style:none; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px }
.pv-social a {
  display:inline-flex; align-items:center; gap:9px; color:#fff; text-decoration:none;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28); border-radius:50px; padding:10px 18px;
  font-weight:700; font-size:.9rem; transition:background .2s, transform .2s;
}
.pv-social a:hover { background:rgba(255,255,255,.22); transform:translateY(-3px) }
.pv-social svg { width:22px; height:22px }

/* ─── PUENTE A PLANET ─── */
.pv-to-planet { background:radial-gradient(ellipse at 80% 50%, #4E2A8C 0%, #3A1B70 45%, #24104A 100%); color:#fff; padding:46px 20px }
.pv-to-planet-inner { max-width:1000px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap }
.pv-kids-tag { font-family:'Montserrat',sans-serif; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--yellow); font-size:.8rem }
.pv-to-planet h3 { font-weight:800; font-size:1.45rem; margin:6px 0 6px }
.pv-to-planet p { color:rgba(255,255,255,.85); max-width:560px; line-height:1.55 }

.pv-footer { background:#100825; color:#8a83a0; text-align:center; padding:24px 20px 76px; font-size:.82rem }
.pv-footer a { color:#C9A9FF; text-decoration:none; font-weight:700 }

.wa-float {
  position:fixed; right:18px; bottom:18px; z-index:80;
  background:#25D366; color:#fff; border-radius:50px; padding:14px 20px;
  font-family:'Montserrat',sans-serif; font-weight:800; text-decoration:none;
  box-shadow:0 8px 26px rgba(37,211,102,.45); display:flex; align-items:center; gap:8px;
}

/* ─── TEST TALLERES ─── */
.test-page { background:linear-gradient(180deg,#FFFFFF 0%, #F4F0FA 100%); min-height:calc(100vh - 60px); padding:44px 20px 80px }
.test-wrap { max-width:720px; margin:0 auto }
.test-head { text-align:center; margin-bottom:26px }
.test-head .ludo-tag { margin-bottom:10px }
.test-head h1 { font-weight:800; color:var(--pv-purple); font-size:clamp(1.5rem,4vw,2.1rem); letter-spacing:.5px }
.test-head p { color:var(--pv-gray); margin-top:8px; font-weight:600 }
.test-progress { height:8px; background:var(--pv-lilac); border-radius:50px; overflow:hidden; margin:22px 0 8px }
.test-progress span { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--pv-blue),var(--pv-purple)); border-radius:50px; transition:width .45s cubic-bezier(.2,.8,.2,1) }
.test-progress-label { display:flex; justify-content:space-between; font-size:.78rem; font-weight:700; color:var(--pv-gray); letter-spacing:.5px; text-transform:uppercase }
.test-card {
  background:#fff; border-radius:22px; padding:34px 30px; margin-top:18px;
  box-shadow:0 8px 32px rgba(81,31,116,.10); border-top:5px solid var(--pv-blue);
  animation:cardIn .4s ease both;
}
@keyframes cardIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.test-card h2 { font-weight:800; color:var(--pv-ink); font-size:1.3rem; line-height:1.35 }
.test-card .hint { color:var(--pv-gray); font-size:.9rem; margin-top:6px; font-weight:600 }
.options { list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:22px }
.opt {
  width:100%; text-align:left; background:#fff; border:2px solid var(--pv-lilac); border-radius:14px; padding:14px 16px;
  font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:.95rem; color:var(--pv-ink); cursor:pointer;
  display:flex; align-items:center; gap:12px; transition:border-color .2s, background .2s, transform .15s;
}
.opt:hover { border-color:var(--pv-blue); transform:translateY(-2px) }
.opt .dot { flex:0 0 20px; width:20px; height:20px; border-radius:50%; border:2px solid var(--pv-lilac); display:inline-flex; align-items:center; justify-content:center; transition:all .2s }
.opt[aria-pressed="true"] { border-color:var(--pv-purple); background:#FBF8FF }
.opt[aria-pressed="true"] .dot { background:var(--pv-purple); border-color:var(--pv-purple) }
.opt[aria-pressed="true"] .dot::after { content:''; width:8px; height:8px; border-radius:50%; background:#fff }
.opt[disabled] { opacity:.45; cursor:not-allowed; transform:none }
.test-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:28px; flex-wrap:wrap }
.btn-back { background:transparent; color:var(--pv-gray); border:2px solid var(--pv-lilac); padding:11px 20px }
.btn-back:hover { color:var(--pv-purple); border-color:var(--pv-purple); box-shadow:none }
.btn[disabled] { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none }

.result { border-top-color:var(--pv-purple) }
.result .ludo-tag { background:#EEF4FF; color:var(--pv-blue) }
.result h2 { color:var(--pv-purple); font-size:1.7rem; margin-top:6px }
.result .focus { display:inline-block; margin-top:10px; background:var(--pv-soft); color:var(--pv-purple); border-radius:50px; padding:6px 14px; font-weight:700; font-size:.85rem }
.result .reason { margin-top:18px; color:var(--pv-gray); line-height:1.6; font-size:1rem }
.result-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:20px }
.result-meta div { background:var(--pv-soft); border-radius:12px; padding:12px 14px; font-size:.85rem; color:var(--pv-gray) }
.result-meta b { display:block; color:var(--pv-ink); font-family:'Montserrat',sans-serif; font-size:.92rem; margin-top:2px }
.result h4 { margin-top:24px; font-weight:800; font-size:.8rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--pv-blue) }
.result ul { list-style:none; margin-top:10px; display:flex; flex-wrap:wrap; gap:8px }
.result ul li { background:#fff; border:2px solid var(--pv-lilac); border-radius:50px; padding:6px 14px; font-size:.85rem; font-weight:700; color:var(--pv-ink) }
.result .test-actions { justify-content:center }
.result .btn-pv { background:var(--green) } .result .btn-pv:hover { background:#3d9142 }

/* ─── RESPONSIVE / MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important }
  .v-origin,.v-head,.v-label,.v-cap { opacity:1; transform:none }
  .v-line { stroke-dashoffset:0 }
}
@media (max-width:820px) {
  .pv-grid { grid-template-columns:1fr }
  .pv-to-planet-inner { justify-content:center; text-align:center }
}
@media (max-width:640px) {
  .pv-nav-links a { padding:7px 9px; font-size:.76rem }
  .pv-nav-links a small { display:none }
  .pv-nav-brand b { display:none }
  .pv-lead { font-size:1.1rem }
  .test-card { padding:26px 20px }
  .v-cap { font-size:.62rem; letter-spacing:1px }
}