/* Propuesta 2 — “deslumbrar”. Mismos tokens y formas de styles.css (colores, Inter, radios 16/20, botones 12).
   Solo agrega componentes nuevos. Todo lo que se mueve respeta prefers-reduced-motion (regla global de styles.css). */

@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

:root { --p2-grad: linear-gradient(135deg, var(--gold), var(--glow)); }
html { overflow-x: hidden; }
html.no-js .rv { opacity: 1 !important; transform: none !important; }
body { overflow-x: hidden; }

/* ---------- utilidades ---------- */
.p2-wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.p2-sec { padding: 112px 0; position: relative; }
.p2-dark { background: var(--ink); color: var(--text-light); overflow: hidden; }
.p2-soft { background: var(--paper-2); }
.p2-head { max-width: 740px; margin: 0 auto 56px; text-align: center; }
.p2-head h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
.p2-sub { margin-top: 16px; font-size: 1.08rem; color: var(--text-dark-dim); }
.p2-dark .p2-head h2 { color: var(--text-light); }
.p2-dark .p2-sub { color: var(--text-light-dim); }
.p2-dark .eyebrow { color: var(--glow); }
.grad { background: var(--p2-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.center { text-align: center; }
.mono { font-family: var(--font-mono); }

.rv { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--d, 0) * 90ms); }
.rv.in { opacity: 1; transform: none; }

.spot { position: relative; isolation: isolate; }
.spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(39,199,232,.16), transparent 42%);
  opacity: 0; transition: opacity .3s ease;
}
.spot:hover::before { opacity: 1; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-light);
  color: var(--text-dark-dim); background: #fff; white-space: nowrap;
}
.chip--live { color: #0b6b44; border-color: rgba(22,163,106,.35); background: rgba(22,163,106,.08); }
.chip--beta { color: var(--gold-2); border-color: rgba(49,86,245,.3); background: rgba(49,86,245,.07); }
.chip--plan { color: var(--gold-2); background: var(--paper-2); border-color: transparent; }
.p2-dark .chip { background: rgba(234,240,255,.06); border-color: var(--line-dark); color: var(--text-light-dim); }

/* barra de progreso de scroll */
.p2-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300; background: var(--p2-grad); transform-origin: 0 50%; transform: scaleX(0); }
.prop-banner { background: var(--gold); color: #fff; text-align: center; font-family: var(--font-mono); font-size: .78rem; padding: 8px 16px; }
.prop-banner b { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- nav extras ---------- */
.nav__links a { white-space: nowrap; }
.p2-cwrap { position: relative; }
.p2-cbtn {
  white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line-light);
  background: #fff; font: 600 .85rem var(--font-body); color: var(--text-dark); cursor: pointer;
}
.p2-cbtn b { font-family: var(--font-mono); font-size: .72rem; background: var(--paper-2); color: var(--gold-2); padding: 2px 6px; border-radius: 6px; }
.p2-cbtn svg { width: 10px; height: 10px; }
.p2-cmenu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 290px; z-index: 250; background: #fff; border: 1px solid var(--line-light);
  border-radius: var(--radius); box-shadow: 0 24px 48px -16px rgba(12,20,38,.28); padding: 8px; display: none;
}
.p2-cmenu.open { display: block; }
.p2-cmenu a {
  display: flex; width: 100%; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border: 0; background: none; border-radius: 10px;
  font: 500 .9rem var(--font-body); color: var(--text-dark); cursor: pointer;
}
.p2-cmenu a:hover, .p2-cmenu a[aria-checked="true"] { background: var(--paper-2); }
.p2-cmenu a b { font-family: var(--font-mono); font-size: .7rem; color: var(--gold-2); width: 26px; }
.p2-cmenu a small { margin-left: auto; color: var(--text-dark-dim); font-size: .72rem; }
.p2-cmenu .soon { opacity: .75; }
@media (max-width: 1180px) { .nav__links { gap: 18px; font-size: .9rem; } }
@media (max-width: 980px) { .nav .p2-cwrap { display: none; } }

/* ---------- HERO ---------- */
.p2-hero { position: relative; background: var(--ink); color: var(--text-light); overflow: hidden; padding: 96px 0 120px; }
.p2-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.p2-hero__bg::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 760px; filter: blur(12px);
  background:
    radial-gradient(520px 360px at 15% 18%, rgba(49,86,245,.42), transparent 70%),
    radial-gradient(460px 320px at 85% 8%, rgba(22,163,106,.16), transparent 70%),
    radial-gradient(520px 380px at 62% 58%, var(--glow-soft), transparent 72%);
  animation: aurora-drift 14s ease-in-out infinite alternate;
}
.p2-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(233,238,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(233,238,255,.045) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.p2-orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .6; animation: bob 9s ease-in-out infinite; }
.p2-orb--1 { width: 10px; height: 10px; left: 8%; top: 30%; background: var(--glow); box-shadow: 0 0 24px var(--glow); }
.p2-orb--2 { width: 6px; height: 6px; left: 46%; top: 16%; background: var(--gold); box-shadow: 0 0 20px var(--gold); animation-delay: -3s; }
.p2-orb--3 { width: 8px; height: 8px; right: 6%; top: 60%; background: var(--mint); box-shadow: 0 0 20px var(--mint); animation-delay: -6s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

.p2-hero__inner { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: 40px; align-items: center; }
.p2-hero .eyebrow { color: var(--glow); }
.p2-title { font-size: clamp(2.8rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -.02em; color: var(--text-light); }
.p2-title .w { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(2deg); animation: word-in .8s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(var(--i) * 70ms + 150ms); }
@keyframes word-in { to { opacity: 1; transform: none; } }
.p2-title em { font-style: italic; color: var(--glow); }
.p2-strike { position: relative; color: var(--text-light-dim); }
.p2-strike::after { content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: 3px; background: var(--p2-grad); transform: rotate(-2deg) scaleX(0); transform-origin: left; animation: strike 0.7s .9s ease forwards; }
@keyframes strike { to { transform: rotate(-2deg) scaleX(1); } }
.p2-lead { margin-top: 24px; font-size: 1.22rem; color: var(--text-light-dim); max-width: 48ch; opacity: 0; animation: rise-in .8s .8s ease forwards; }
.p2-hero .hero__cta, .p2-hero .hero__trust { opacity: 0; animation: rise-in .8s 1s ease forwards; }
.p2-hero .hero__cta .btn--ghost { border-color: rgba(234,240,255,.35); color: var(--text-light); }

.p2-stage { position: relative; height: 640px; display: flex; align-items: center; justify-content: center; perspective: 1200px; }
.p2-ring { position: absolute; border-radius: 50%; border: 1px solid var(--line-dark); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.p2-ring:nth-child(1) { width: 420px; height: 420px; }
.p2-ring:nth-child(2) { width: 560px; height: 560px; opacity: .6; }
.p2-ring:nth-child(3) { width: 700px; height: 700px; opacity: .3; }
.p2-phone {
  position: relative; width: 318px; height: 600px; border-radius: 40px; background: #060b18; padding: 10px;
  border: 1px solid rgba(233,238,255,.22); transform-style: preserve-3d; transition: transform .25s ease-out;
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.7), 0 0 80px -10px var(--glow-soft), inset 0 0 0 2px rgba(255,255,255,.04);
}
.p2-phone__scr { width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: var(--ink-2); display: flex; flex-direction: column; position: relative; }
.p2-phone__scr::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 86px; height: 22px; border-radius: 14px; background: #060b18; z-index: 3; }
.p2-wa { display: flex; align-items: center; gap: 10px; padding: 40px 14px 10px; border-bottom: 1px solid var(--line-dark); background: var(--ink-3); }
.p2-wa .agentico { width: 34px; height: 34px; font-size: .85rem; }
.p2-wa b { display: block; font-size: .88rem; color: var(--text-light); }
.p2-wa small { font-size: .68rem; color: var(--mint); font-family: var(--font-mono); }
.p2-wa time { margin-left: auto; font: .7rem var(--font-mono); color: var(--text-light-dim); }
.p2-tabs { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line-dark); }
.p2-tabs button { flex: 1; border: 1px solid var(--line-dark); background: transparent; color: var(--text-light-dim); padding: 6px 4px; border-radius: 8px; font: 600 .68rem var(--font-body); cursor: pointer; transition: all .2s; }
.p2-tabs button[aria-selected="true"] { background: rgba(49,86,245,.22); border-color: rgba(49,86,245,.6); color: #fff; }
.p2-thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px 12px 14px; overflow: hidden; }
.p2-thread .msg { opacity: 1; transform: none; animation: none; max-width: 86%; font-size: .8rem; padding: 8px 12px; }
.p2-thread .msg.pop { animation: msg-pop .35s cubic-bezier(.16,1,.3,1); }
@keyframes msg-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.p2-typing { align-self: flex-end; display: inline-flex; gap: 4px; padding: 10px 14px; border-radius: 14px; background: var(--gold); }
.p2-typing i { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .5; animation: dot 1s infinite; }
.p2-typing i:nth-child(2) { animation-delay: .15s; } .p2-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%,100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } }
.p2-float {
  position: absolute; z-index: 4; padding: 10px 14px; border-radius: 14px; background: rgba(18,27,51,.92); border: 1px solid var(--line-dark);
  backdrop-filter: blur(8px); font-size: .78rem; color: var(--text-light); box-shadow: 0 20px 40px -16px rgba(0,0,0,.6); animation: bob 7s ease-in-out infinite;
  display: flex; gap: 10px; align-items: center;
}
.p2-float b { font-family: var(--font-mono); font-weight: 500; color: var(--glow); }
.p2-float i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-style: normal; background: rgba(22,163,106,.18); color: var(--mint); }
.p2-float--a { left: -34px; top: 110px; } .p2-float--b { right: -30px; top: 290px; animation-delay: -2.5s; } .p2-float--c { left: -24px; bottom: 34px; animation-delay: -5s; }
.p2-float--b i { background: rgba(39,199,232,.16); color: var(--glow); } .p2-float--c i { background: rgba(49,86,245,.25); color: #9db0ff; }

/* ---------- marquee ---------- */
.p2-proof { padding: 52px 0 40px; text-align: center; }
.p2-proof__label { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dark-dim); font-weight: 600; margin-bottom: 26px; }
.p2-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.p2-marquee__track { display: flex; align-items: center; gap: 64px; width: max-content; animation: marq 32s linear infinite; }
.p2-marquee:hover .p2-marquee__track { animation-play-state: paused; }
.p2-marquee img { height: 46px; width: auto; filter: grayscale(1); opacity: .55; transition: .25s; }
.p2-marquee img:hover { filter: none; opacity: 1; }
.p2-marquee img[src*="robusa"] { height: 64px; } .p2-marquee img[src*="vendotime"] { height: 84px; }
@keyframes marq { to { transform: translateX(-50%); } }
.p2-cases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; text-align: left; }
.p2-cases div { border-top: 1px solid var(--line-light); padding-top: 12px; font-size: .86rem; color: var(--text-dark-dim); }
.p2-cases b { display: block; color: var(--text-dark); font-size: .9rem; margin-bottom: 2px; }

/* ---------- turno de noche ---------- */
.p2-night { padding-bottom: 96px; }
.p2-night::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 400px at 80% 0%, rgba(49,86,245,.25), transparent 70%), radial-gradient(600px 400px at 0% 100%, var(--glow-soft), transparent 70%); pointer-events: none; }
.p2-night__grid { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 32px; align-items: stretch; }
.p2-clockcard { background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 22px; }
.p2-clock { display: flex; align-items: baseline; gap: 14px; }
.p2-clock output { font: 500 clamp(3rem, 6vw, 4.6rem)/1 var(--font-mono); letter-spacing: -.03em; color: var(--text-light); }
.p2-clock span { font: .8rem var(--font-mono); color: var(--text-light-dim); }
.p2-sky { position: relative; height: 96px; border-radius: 14px; overflow: hidden; background: linear-gradient(90deg, #060b18 0%, #0c1426 38%, #1b2f6b 72%, #3156F5 90%, #27C7E8 100%); border: 1px solid var(--line-dark); }
.p2-sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: linear-gradient(to top, rgba(6,11,24,.85), transparent); }
.p2-sky__star { position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%; opacity: .8; }
.p2-sky__orb { position: absolute; bottom: 8px; left: 0; width: 26px; height: 26px; border-radius: 50%; background: #dfe8ff; box-shadow: 0 0 30px 6px rgba(223,232,255,.55); transform: translate(0, 0); }
.p2-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.p2-kpi { background: rgba(234,240,255,.04); border: 1px solid var(--line-dark); border-radius: 14px; padding: 14px; }
.p2-kpi strong { display: block; font: 500 1.7rem var(--font-mono); color: var(--text-light); letter-spacing: -.02em; }
.p2-kpi span { font-size: .72rem; color: var(--text-light-dim); }
.p2-feedcard { background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 20px; padding: 22px 22px 8px; display: flex; flex-direction: column; min-height: 420px; }
.p2-feedcard h3 { color: var(--text-light); font-size: .95rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.p2-feedcard h3 .demo__dot--live { display: inline-block; }
.p2-feed { display: flex; flex-direction: column; gap: 4px; overflow: hidden; flex: 1; justify-content: flex-start; }
.p2-ev { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-dark); font-size: .86rem; color: var(--text-light); animation: ev-in .5s cubic-bezier(.16,1,.3,1); }
.p2-ev:first-child { border-top: 0; }
.p2-ev time { font: .74rem var(--font-mono); color: var(--text-light-dim); }
.p2-ev em { font-style: normal; font: .68rem var(--font-mono); color: var(--glow); border: 1px solid rgba(39,199,232,.35); padding: 2px 8px; border-radius: 999px; }
.p2-ev em.m { color: var(--mint); border-color: rgba(22,163,106,.45); }
@keyframes ev-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.p2-morning {
  position: relative; margin-top: 28px; border-radius: 20px; padding: 26px 30px; background: linear-gradient(120deg, rgba(49,86,245,.28), rgba(39,199,232,.16)); border: 1px solid rgba(39,199,232,.35);
  display: flex; align-items: center; gap: 22px; opacity: .35; transition: opacity .8s ease, transform .8s ease; transform: translateY(6px);
}
.p2-morning.on { opacity: 1; transform: none; }
.p2-morning .agentico { width: 46px; height: 46px; font-size: 1.05rem; }
.p2-morning p { font-size: 1.1rem; color: var(--text-light); }
.p2-morning p b { color: var(--glow); font-weight: 600; }
.p2-morning small { display: block; color: var(--text-light-dim); font-size: .74rem; margin-top: 4px; font-family: var(--font-mono); }
.p2-replay { margin-left: auto; background: transparent; border: 1px solid var(--line-dark); color: var(--text-light); border-radius: 10px; padding: 8px 14px; font: 600 .78rem var(--font-body); cursor: pointer; }

/* ---------- agentes ---------- */
.p2-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.p2-agent {
  background: #fff; border: 1px solid var(--line-light); border-radius: 20px; padding: 26px 22px; box-shadow: 0 8px 30px rgba(12,20,38,.06);
  display: flex; flex-direction: column; gap: 12px; transform-style: preserve-3d; transition: transform .2s ease-out, box-shadow .3s, border-color .3s;
}
.p2-agent:hover { border-color: transparent; box-shadow: 0 30px 50px -24px rgba(12,20,38,.25), 0 0 0 1px var(--line-light), 0 0 40px -12px var(--glow-soft); }
.p2-agent__top { display: flex; align-items: center; gap: 12px; }
.p2-agent .agentico { width: 44px; height: 44px; font-size: 1rem; }
.p2-agent h3 { font-size: 1.2rem; }
.p2-agent__role { font: .72rem var(--font-mono); color: var(--text-dark-dim); }
.p2-agent p { color: var(--text-dark-dim); font-size: .92rem; }
.p2-agent__tag { align-self: flex-start; }
.p2-agent__live { margin-top: auto; border-top: 1px solid var(--line-light); padding-top: 12px; font: .74rem var(--font-mono); color: var(--text-dark); min-height: 44px; display: flex; gap: 8px; align-items: flex-start; }
.p2-agent__live i { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(22,163,106,.2); flex-shrink: 0; animation: pulse 1.8s infinite; }
.p2-agent--more { background: transparent; border-style: dashed; box-shadow: none; }

/* ---------- bento ---------- */
.p2-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(190px, auto); gap: 18px; }
.p2-tile { background: #fff; border: 1px solid var(--line-light); border-radius: 20px; padding: 22px; box-shadow: 0 8px 30px rgba(12,20,38,.06); display: flex; flex-direction: column; gap: 12px; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.p2-tile:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -22px rgba(12,20,38,.22), 0 0 34px -12px var(--glow-soft); }
.p2-tile__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.p2-tile h3 { font-size: 1.02rem; }
.p2-tile p { font-size: .86rem; color: var(--text-dark-dim); }
.t-2x2 { grid-column: span 2; grid-row: span 2; } .t-2x1 { grid-column: span 2; }
.p2-inbox { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.p2-conv { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-light); border-radius: 12px; background: var(--paper); }
.p2-conv:first-child { border-color: rgba(49,86,245,.4); background: #fff; box-shadow: 0 0 0 3px rgba(49,86,245,.07); }
.p2-conv .agentico { width: 34px; height: 34px; font-size: .78rem; }
.p2-conv b { font-size: .84rem; display: block; } .p2-conv span { font-size: .74rem; color: var(--text-dark-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 210px; }
.p2-conv em { font: .64rem var(--font-mono); font-style: normal; padding: 3px 8px; border-radius: 999px; background: rgba(22,163,106,.1); color: #0b6b44; }
.p2-conv em.h { background: rgba(49,86,245,.1); color: var(--gold-2); }
.p2-toggle { display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 600; margin-top: auto; }
.p2-sw { width: 40px; height: 22px; border-radius: 999px; background: var(--mint); position: relative; transition: background .3s; flex-shrink: 0; }
.p2-sw::after { content: ""; position: absolute; top: 3px; left: 21px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .3s; }
.p2-sw.off { background: #b7c0d4; } .p2-sw.off::after { left: 3px; }
.p2-bars { display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.p2-bars i { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(to top, var(--gold), var(--glow)); height: 6px; transition: height 1s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--k) * 80ms); }
.in .p2-bars i, .p2-bars.go i { height: calc(var(--h) * 1%); }
.p2-roi { display: flex; align-items: baseline; gap: 10px; } .p2-roi strong { font: 500 2rem var(--font-mono); letter-spacing: -.03em; } .p2-roi span { color: var(--text-dark-dim); font-size: .8rem; }
.p2-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.p2-cal i { aspect-ratio: 1; border-radius: 6px; background: var(--paper-2); font-style: normal; display: grid; place-items: center; font: .6rem var(--font-mono); color: var(--text-dark-dim); }
.p2-cal i.b { background: var(--gold); color: #fff; } .p2-cal i.c { background: rgba(39,199,232,.35); color: var(--text-dark); }
.p2-progressbar { height: 10px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.p2-progressbar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--p2-grad); transition: width 1.6s cubic-bezier(.16,1,.3,1); }
.in .p2-progressbar i { width: 84%; }
.p2-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p2-node { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-light); background: var(--paper); font: 600 .74rem var(--font-body); }
.p2-node.k { background: rgba(49,86,245,.08); border-color: rgba(49,86,245,.35); color: var(--gold-2); }
.p2-arrow { color: var(--text-dark-dim); font-size: .8rem; }
.p2-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.p2-posts i { aspect-ratio: 1; border-radius: 10px; background: var(--p2-grad); opacity: .85; }
.p2-posts i:nth-child(2) { background: linear-gradient(135deg, var(--ink-3), var(--gold)); } .p2-posts i:nth-child(3) { background: linear-gradient(135deg, var(--glow), var(--mint)); }
.p2-files { display: flex; flex-wrap: wrap; gap: 8px; }
.p2-files span { font: .72rem var(--font-mono); padding: 6px 10px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line-light); }
.p2-files span::after { content: " ✓"; color: var(--mint); }

/* ---------- calculadora ---------- */
.p2-calc { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; }
.p2-panel { background: #fff; border: 1px solid var(--line-light); border-radius: 20px; padding: 30px; box-shadow: 0 8px 30px rgba(12,20,38,.06); }
.p2-field { margin-bottom: 26px; }
.p2-field label { display: flex; justify-content: space-between; font-weight: 600; font-size: .92rem; margin-bottom: 12px; }
.p2-field label output { font: 500 .95rem var(--font-mono); color: var(--gold-2); }
.p2-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--gold) var(--fill, 30%), var(--paper-2) var(--fill, 30%)); outline-offset: 6px; }
.p2-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--gold); box-shadow: 0 4px 12px rgba(49,86,245,.4); cursor: grab; }
.p2-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--gold); cursor: grab; }
.p2-checks { display: grid; gap: 10px; }
.p2-checks label { display: flex; gap: 10px; align-items: center; font-weight: 500; font-size: .88rem; cursor: pointer; }
.p2-checks input { width: 18px; height: 18px; accent-color: var(--gold); }
.p2-ladder { display: grid; gap: 10px; margin-bottom: 22px; }
.p2-rung { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-light); font-size: .86rem; transition: all .3s; }
.p2-rung .ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; background: var(--paper-2); color: var(--text-dark-dim); }
.p2-rung small { display: block; color: var(--text-dark-dim); font-size: .72rem; }
.p2-rung.ok .ic { background: rgba(22,163,106,.15); color: var(--mint); }
.p2-rung.no { opacity: .55; }
.p2-rung.pick { border-color: var(--gold); background: linear-gradient(120deg, rgba(49,86,245,.08), rgba(39,199,232,.08)); box-shadow: 0 0 0 3px rgba(49,86,245,.1); opacity: 1; }
.p2-rung.pick .ic { background: var(--gold); color: #fff; }
.p2-rung b { font-weight: 600; }
.p2-out { border-radius: 16px; background: var(--ink); color: var(--text-light); padding: 22px; position: relative; overflow: hidden; }
.p2-out::before { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; background: radial-gradient(circle, var(--glow-soft), transparent 70%); }
.p2-out dl { position: relative; margin: 0; display: grid; gap: 12px; }
.p2-out dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .88rem; color: var(--text-light-dim); }
.p2-out dd { margin: 0; font: 500 1.1rem var(--font-mono); color: var(--text-light); }
.p2-out dd.big { font-size: 1.6rem; color: var(--glow); }
.p2-out small { display: block; margin-top: 14px; font-size: .72rem; color: var(--text-light-dim); position: relative; }

/* ---------- ruta de compra ---------- */
.p2-journey { display: grid; grid-template-columns: .82fr 1.18fr; gap: 40px; align-items: center; }
.p2-steps { display: grid; gap: 10px; }
.p2-stp { position: relative; text-align: left; background: rgba(234,240,255,.03); border: 1px solid var(--line-dark); border-radius: 14px; padding: 14px 16px 14px 56px; color: var(--text-light-dim); cursor: pointer; font: 400 .88rem var(--font-body); overflow: hidden; transition: all .3s; }
.p2-stp b { display: block; color: var(--text-light); font-size: .95rem; margin-bottom: 2px; }
.p2-stp .n { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: .72rem var(--font-mono); background: var(--ink-3); color: var(--glow); border: 1px solid var(--line-dark); }
.p2-stp.on { background: rgba(49,86,245,.16); border-color: rgba(49,86,245,.6); color: var(--text-light); }
.p2-stp.on .n { background: var(--gold); color: #fff; border-color: transparent; }
.p2-stp::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--p2-grad); }
.p2-stp.on.run::after { width: 100%; transition: width var(--dur, 5000ms) linear; }
.p2-win { background: #fff; color: var(--text-dark); border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.65), 0 0 70px -20px var(--glow-soft); border: 1px solid var(--line-dark); }
.p2-win__bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #eef1f8; border-bottom: 1px solid var(--line-light); }
.p2-win__bar i { width: 10px; height: 10px; border-radius: 50%; background: #cfd6e6; }
.p2-win__url { margin-left: 10px; flex: 1; background: #fff; border: 1px solid var(--line-light); border-radius: 8px; padding: 5px 12px; font: .74rem var(--font-mono); color: var(--text-dark-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p2-win__url b { color: #0b6b44; font-weight: 500; }
.p2-win__body { position: relative; min-height: 392px; }
.p2-scr { position: absolute; inset: 0; padding: 26px 30px; opacity: 0; transform: translateX(24px); pointer-events: none; transition: opacity .45s, transform .45s cubic-bezier(.16,1,.3,1); }
.p2-scr.on { opacity: 1; transform: none; pointer-events: auto; }
.p2-scr h4 { font-size: 1.15rem; margin: 0 0 4px; } .p2-scr p.s { font-size: .82rem; color: var(--text-dark-dim); margin-bottom: 16px; }
.p2-mini { display: grid; gap: 10px; }
.p2-mini .row { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border: 1px solid var(--line-light); border-radius: 10px; font-size: .84rem; background: #fff; }
.p2-mini .row.sel { border-color: var(--gold); background: rgba(49,86,245,.05); box-shadow: 0 0 0 3px rgba(49,86,245,.08); }
.p2-mini .row b { font-family: var(--font-mono); font-weight: 500; }
.p2-fake { height: 38px; border: 1px solid var(--line-light); border-radius: 10px; padding: 0 14px; display: flex; align-items: center; font-size: .82rem; color: var(--text-dark-dim); background: #fff; }
.p2-fake.f { color: var(--text-dark); }
.p2-btnfake { display: flex; justify-content: center; align-items: center; gap: 8px; height: 44px; border-radius: 12px; background: var(--gold); color: #fff; font-weight: 600; font-size: .9rem; margin-top: 4px; }
.p2-btnfake.g { background: #fff; color: var(--text-dark); border: 1px solid var(--line-light); }
.p2-note { font-size: .74rem; color: var(--text-dark-dim); }
.p2-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-top: 1px dashed var(--line-light); font-size: .88rem; }
.p2-total b { font: 500 1.5rem var(--font-mono); }
.p2-check { width: 64px; height: 64px; border-radius: 50%; background: rgba(22,163,106,.12); display: grid; place-items: center; margin: 4px auto 14px; }
.p2-check svg { width: 30px; height: 30px; stroke: var(--mint); stroke-width: 3; fill: none; stroke-dasharray: 40; stroke-dashoffset: 40; }
.p2-scr.on .p2-check svg { animation: draw .7s .2s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.p2-auto { display: grid; gap: 8px; }
.p2-auto div { display: flex; gap: 10px; align-items: center; font-size: .84rem; opacity: 0; transform: translateY(8px); }
.p2-scr.on .p2-auto div { animation: rise-in .5s ease forwards; }
.p2-scr.on .p2-auto div:nth-child(1) { animation-delay: .5s; } .p2-scr.on .p2-auto div:nth-child(2) { animation-delay: .8s; } .p2-scr.on .p2-auto div:nth-child(3) { animation-delay: 1.1s; } .p2-scr.on .p2-auto div:nth-child(4) { animation-delay: 1.4s; }
.p2-auto span { color: var(--mint); font-weight: 700; }
.p2-vs { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.p2-vs div { border: 1px solid var(--line-dark); border-radius: 14px; padding: 14px 16px; font-size: .82rem; color: var(--text-light-dim); }
.p2-vs b { display: block; color: var(--text-light); font: 500 1.4rem var(--font-mono); margin-bottom: 2px; }
.p2-vs div:last-child { border-color: rgba(39,199,232,.45); background: rgba(39,199,232,.07); }

/* ---------- precios ---------- */
.p2-ptools { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 44px; }
.p2-term { position: relative; display: inline-grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--line-light); border-radius: 999px; padding: 5px; box-shadow: 0 8px 24px rgba(12,20,38,.06); }
.p2-term button { position: relative; z-index: 1; border: 0; background: none; padding: 11px 22px; border-radius: 999px; font: 600 .9rem var(--font-body); color: var(--text-dark-dim); cursor: pointer; white-space: nowrap; transition: color .25s; }
.p2-term button small { display: block; font: .62rem var(--font-mono); color: #0b6b44; text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
.p2-term button[aria-pressed="true"] { color: #fff; } .p2-term button[aria-pressed="true"] small { color: #c9f3df; }
.p2-term__thumb { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; border-radius: 999px; background: var(--p2-grad); transition: transform .35s cubic-bezier(.16,1,.3,1); box-shadow: 0 8px 20px -6px rgba(49,86,245,.5); }
.p2-pricing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.p2-plan { position: relative; background: #fff; border: 1px solid var(--line-light); border-radius: 20px; padding: 30px 24px 26px; display: flex; flex-direction: column; box-shadow: 0 8px 30px rgba(12,20,38,.06); }
.p2-plan h3 { font-size: 1.1rem; margin-bottom: 4px; }
.p2-plan__tag { font-size: .8rem; color: var(--text-dark-dim); min-height: 2.6em; }
.p2-price { margin: 14px 0 2px; display: flex; align-items: baseline; align-content: flex-start; gap: 6px; flex-wrap: wrap; min-height: 4.5rem; }
.p2-price strong { font: 500 2.35rem var(--font-mono); letter-spacing: -.04em; }
.p2-price span { font-size: .82rem; color: var(--text-dark-dim); }
.p2-price s { font: .95rem var(--font-mono); color: #98a2b3; }
.p2-billed { font-size: .76rem; color: var(--text-dark-dim); min-height: 2.5em; }
.p2-billed b { color: var(--text-dark); font-weight: 600; }
.p2-save { align-self: flex-start; font: .66rem var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: #0b6b44; background: rgba(22,163,106,.1); padding: 4px 9px; border-radius: 999px; margin: 6px 0 12px; min-height: 22px; }
.p2-save:empty { visibility: hidden; }
.p2-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 16px; }
.p2-caps span { font-size: .74rem; background: var(--paper); border: 1px solid var(--line-light); border-radius: 8px; padding: 6px 8px; color: var(--text-dark-dim); }
.p2-caps b { display: block; color: var(--text-dark); font-size: .8rem; }
.p2-caps span.lim { border-color: rgba(217,45,32,.3); background: rgba(217,45,32,.04); }
.p2-feat { flex: 1; margin-bottom: 22px; }
.p2-feat li { padding: 6px 0 6px 22px; position: relative; font-size: .83rem; color: var(--text-dark); border-top: 1px solid var(--line-light); }
.p2-feat li:first-child { border-top: 0; }
.p2-feat li::before { content: "✓"; position: absolute; left: 0; color: var(--mint); font-weight: 700; }
.p2-feat li.x { color: #98a2b3; } .p2-feat li.x::before { content: "–"; color: #c2c9d8; }
.p2-feat li.x i { font-style: normal; color: var(--gold-2); font-size: .7rem; font-family: var(--font-mono); margin-left: 4px; }
.p2-plan--pro {
  border: 2px solid transparent; transform: translateY(-14px);
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--ang), var(--gold), var(--glow), var(--mint), var(--gold)) border-box;
  animation: spin 6s linear infinite; box-shadow: 0 30px 60px -24px rgba(49,86,245,.5);
}
@keyframes spin { to { --ang: 360deg; } }
.p2-plan__badge { position: absolute; top: -14px; left: 24px; background: var(--p2-grad); color: #fff; font: .68rem var(--font-mono); text-transform: uppercase; letter-spacing: .05em; padding: 5px 12px; border-radius: 999px; box-shadow: 0 8px 18px -6px rgba(49,86,245,.6); }
.p2-plan--emp { background: var(--ink); color: var(--text-light); border-color: var(--ink); }
.p2-plan--emp .p2-plan__tag, .p2-plan--emp .p2-price span, .p2-plan--emp .p2-billed { color: var(--text-light-dim); }
.p2-plan--emp .p2-billed b, .p2-plan--emp .p2-price strong, .p2-plan--emp .p2-feat li { color: var(--text-light); }
.p2-plan--emp .p2-feat li { border-color: var(--line-dark); }
.p2-plan--emp .p2-caps span { background: rgba(234,240,255,.05); border-color: var(--line-dark); color: var(--text-light-dim); }
.p2-plan--emp .p2-caps b { color: var(--text-light); }
.p2-plan--emp .p2-save { color: #7ee0b3; background: rgba(22,163,106,.18); }
.p2-min { font: .68rem var(--font-mono); color: var(--glow); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.p2-plan .btn { margin-top: auto; }
.p2-plan--emp .btn--ghost { border-color: rgba(234,240,255,.4); color: var(--text-light); }
.p2-wait { display: none; max-width: 760px; margin: 0 auto 30px; text-align: center; padding: 14px 20px; border-radius: 14px; background: rgba(49,86,245,.07); border: 1px solid rgba(49,86,245,.25); font-size: .9rem; }
html[data-waitlist="1"] .p2-wait { display: block; }
.p2-billing { max-width: var(--container); margin: 40px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.p2-billing div { font-size: .84rem; color: var(--text-dark-dim); border-top: 1px solid var(--line-light); padding-top: 12px; }
.p2-billing b { display: block; color: var(--text-dark); margin-bottom: 2px; font-size: .9rem; }
.p2-cmp { max-width: var(--container); margin: 56px auto 0; overflow-x: auto; }
.p2-cmp table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .86rem; background: #fff; border: 1px solid var(--line-light); border-radius: 16px; overflow: hidden; min-width: 720px; }
.p2-cmp th, .p2-cmp td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line-light); }
.p2-cmp th { background: var(--paper-2); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dark-dim); position: sticky; top: 0; }
.p2-cmp td:first-child { color: var(--text-dark-dim); }
.p2-cmp tr:last-child td { border-bottom: 0; }
.p2-cmp .pro { background: rgba(49,86,245,.05); font-weight: 600; }
.p2-cmp th.pro { background: rgba(49,86,245,.14); color: var(--gold-2); }
.p2-cmp .y { color: #0b6b44; font-weight: 700; } .p2-cmp .n { color: #b7bfd0; }
.p2-perf { max-width: var(--container); margin: 34px auto 0; display: flex; align-items: center; gap: 24px; padding: 22px 26px; border: 1px dashed var(--gold); border-radius: 18px; background: rgba(49,86,245,.04); }
.p2-perf h3 { font-size: 1.05rem; } .p2-perf p { font-size: .88rem; color: var(--text-dark-dim); margin-top: 2px; } .p2-perf .btn { margin-left: auto; }

/* ---------- servicios ---------- */
.p2-svcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.p2-svc { background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 20px; padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; transition: transform .3s, border-color .3s, box-shadow .3s; }
.p2-svc:hover { transform: translateY(-5px); border-color: rgba(39,199,232,.45); box-shadow: 0 0 36px -10px var(--glow-soft); }
.p2-svc .modulo__tag { align-self: flex-start; }
.p2-svc .pr { font: 500 1.5rem var(--font-mono); color: var(--text-light); margin-top: 4px; } .p2-svc .pr small { font: .76rem var(--font-body); color: var(--text-light-dim); }
.p2-svc p { color: var(--text-light-dim); font-size: .9rem; }
.p2-svc ul { margin-top: auto; border-top: 1px solid var(--line-dark); padding-top: 12px; }
.p2-svc li { position: relative; padding: 4px 0 4px 18px; font-size: .84rem; color: var(--text-light); }
.p2-svc li::before { content: "＋"; position: absolute; left: 0; color: var(--glow); font-size: .7rem; top: 7px; }
.p2-live { margin-top: 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.p2-live div { border: 1px solid var(--line-dark); border-radius: 14px; padding: 16px; background: rgba(234,240,255,.03); }
.p2-live i { display: block; font: normal .66rem var(--font-mono); color: var(--glow); margin-bottom: 6px; }
.p2-live b { display: block; color: var(--text-light); font-size: .92rem; margin-bottom: 4px; } .p2-live span { color: var(--text-light-dim); font-size: .8rem; }

/* ---------- CTA + footer ---------- */
.p2-cta { position: relative; background: var(--ink); color: var(--text-light); text-align: center; padding: 120px 24px; overflow: hidden; }
.p2-cta::before { content: ""; position: absolute; inset: -30%; background: conic-gradient(from 0deg at 50% 50%, rgba(49,86,245,.32), rgba(39,199,232,.22), rgba(22,163,106,.14), rgba(49,86,245,.32)); filter: blur(80px); animation: rot 24s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.p2-cta > * { position: relative; }
.p2-cta h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; max-width: 18ch; margin: 0 auto 18px; color: var(--text-light); }
.p2-cta p { color: var(--text-light-dim); font-size: 1.1rem; margin-bottom: 32px; }
.p2-cta .hero__cta { justify-content: center; margin-top: 0; }
.p2-cta .hero__cta .btn--ghost { border-color: rgba(234,240,255,.4); color: var(--text-light); }
.p2-cta small { display: block; margin-top: 22px; font: .78rem var(--font-mono); color: var(--text-light-dim); }
.p2-fcountries { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.p2-fcountries a { font: .78rem var(--font-mono); color: var(--text-dark-dim); }
.p2-fcountries a:hover, .p2-fcountries a.on { color: var(--gold); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .p2-pricing { grid-template-columns: repeat(2, 1fr); } .p2-plan--pro { transform: none; }
  .p2-team, .p2-cases, .p2-live, .p2-billing { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .p2-hero__inner, .p2-night__grid, .p2-calc, .p2-journey { grid-template-columns: 1fr; }
  .p2-stage { height: 620px; }
  .p2-bento { grid-template-columns: repeat(2, 1fr); } .t-2x2 { grid-row: span 1; }
  .p2-svcs { grid-template-columns: 1fr; }
  .p2-perf { flex-direction: column; align-items: flex-start; } .p2-perf .btn { margin-left: 0; }
}
@media (max-width: 720px) {
  .p2-sec { padding: 76px 0; } .p2-hero { padding: 56px 0 72px; }
  .p2-team, .p2-cases, .p2-live, .p2-billing, .p2-pricing, .p2-bento, .p2-kpis, .p2-vs { grid-template-columns: 1fr; }
  .t-2x2, .t-2x1 { grid-column: span 1; }
  .p2-phone { width: 290px; height: 560px; } .p2-stage { height: 580px; } .p2-float { display: none; }
  .p2-term button { padding: 10px 12px; font-size: .82rem; }
  .p2-morning { flex-direction: column; align-items: flex-start; }
  .p2-panel { padding: 22px; } .p2-scr { padding: 20px; }
}

/* selector de país dentro de precios: menú centrado */
.p2-cwrap[data-cwrap-left] .p2-cmenu { left: 50%; right: auto; transform: translateX(-50%); }
.p2-plan.hl { box-shadow: 0 0 0 4px var(--glow), 0 30px 60px -20px rgba(39,199,232,.6); transition: box-shadow .3s; }

/* ================= Propuesta 3: rubros, costo total, medios de pago ================= */
.p2-vert__tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 26px; }
.p2-vert__tabs button { border: 1px solid var(--line-dark); background: rgba(234,240,255,.04); color: var(--text-light-dim); padding: 10px 18px; border-radius: 999px; font: 600 .88rem var(--font-body); cursor: pointer; transition: .2s; }
.p2-vert__tabs button:hover { color: var(--text-light); border-color: rgba(39,199,232,.4); }
.p2-vert__tabs button[aria-selected="true"] { background: var(--p2-grad); border-color: transparent; color: #fff; box-shadow: 0 10px 24px -10px rgba(49,86,245,.7); }
.p2-vert__body { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: stretch; }
.p2-vert__chat { background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; min-height: 430px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), 0 0 60px -20px var(--glow-soft); }
.p2-vert__bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-dark); background: var(--ink-3); }
.p2-vert__bar .agentico { width: 36px; height: 36px; font-size: .9rem; }
.p2-vert__bar b { display: block; color: var(--text-light); font-size: .92rem; }
.p2-vert__bar small { color: var(--mint); font: .7rem var(--font-mono); }
.p2-vert__thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 18px; overflow: hidden; }
.p2-vert__thread .msg { opacity: 1; transform: none; animation: none; max-width: 84%; font-size: .88rem; }
.p2-vert__thread .msg.pop { animation: msg-pop .35s cubic-bezier(.16,1,.3,1); }
.p2-vert__side { display: flex; flex-direction: column; gap: 14px; padding: 6px 4px; }
.p2-vert__side h3 { color: var(--text-light); font-size: 1.5rem; line-height: 1.2; }
.p2-vert__side p { color: var(--text-light-dim); }
.p2-vert__list { border-top: 1px solid var(--line-dark); }
.p2-vert__list li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-dark); color: var(--text-light); font-size: .9rem; }
.p2-vert__side { min-width: 0; }
.p2-vert__plan { flex-shrink: 0; overflow-wrap: anywhere; line-height: 1.5; margin-top: auto; padding: 14px 16px; border-radius: 14px; background: rgba(49,86,245,.18); border: 1px solid rgba(49,86,245,.5); color: var(--text-light); font-size: .9rem; }
.p2-vert__plan b { color: var(--glow); font-family: var(--font-mono); font-weight: 500; }
.p2-vert__plan span { color: var(--text-light-dim); }
.p2-cost { max-width: var(--container); margin: 44px auto 0; padding: 30px; border-radius: 20px; background: var(--ink); color: var(--text-light); position: relative; overflow: hidden; }
.p2-cost::before { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; background: radial-gradient(circle, var(--glow-soft), transparent 70%); pointer-events: none; }
.p2-cost h3 { position: relative; color: var(--text-light); font-size: 1.4rem; }
.p2-cost__sub { position: relative; color: var(--text-light-dim); margin: 6px 0 22px; }
.p2-cost__grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.p2-cost__grid > div { border: 1px solid var(--line-dark); border-radius: 16px; padding: 18px; background: rgba(234,240,255,.04); display: flex; flex-direction: column; gap: 8px; }
.p2-cost__grid b { font: 500 1.5rem var(--font-mono); letter-spacing: -.03em; color: var(--text-light); }
.p2-cost__grid p { color: var(--text-light-dim); font-size: .86rem; }
.p2-cost .chip { align-self: flex-start; }
.p2-payline { text-align: center; font-size: .86rem; color: var(--text-dark-dim); margin: -22px auto 26px; max-width: 72ch; }
@media (max-width: 980px) { .p2-vert__body, .p2-cost__grid { grid-template-columns: 1fr; } }

@media (max-width: 1320px) { .nav__links { gap: 20px; } }

/* ajustes de ancho: navegación, tarjetas de 3 agentes y etiquetas largas */
.p2-team--3 { grid-template-columns: repeat(3, 1fr); }
.p2-tile .chip, .card .chip { white-space: normal; }
.p2-tile__head { flex-wrap: wrap; }
@media (max-width: 1100px) {
  .nav__links a:nth-child(n+5) { display: none; }
  .p2-float--b { display: none; }
  .p2-team--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) { .p2-team--3 { grid-template-columns: 1fr; } }

.p2-pricing > .p2-plan { min-width: 0; }

/* Recorrido, material visual, confianza y consentimiento */
.p2-channel-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.p2-channel-list span { padding:10px; border:1px solid var(--line-light); border-radius:10px; color:var(--text-dark-dim); font-size:.74rem; }
.p2-channel-list b { display:block; color:var(--text-dark); font-size:.8rem; }
.p2-onboard { list-style:none; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; padding:0; counter-reset:step; }
.p2-onboard li { background:#fff; border:1px solid var(--line-light); border-radius:20px; padding:22px; min-height:260px; box-shadow:0 8px 30px rgba(12,20,38,.06); }
.p2-onboard li>span { display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--paper-2); color:var(--gold-2); font:600 .78rem var(--font-mono); }
.p2-onboard h3 { font-size:1rem; margin:18px 0 10px; }
.p2-onboard p { color:var(--text-dark-dim); font-size:.86rem; line-height:1.55; }
.p2-onboard a { display:inline-block; margin-top:16px; color:var(--gold-2); font-weight:650; font-size:.78rem; }
.p2-help { margin-top:28px; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:28px; background:var(--ink); color:var(--text-light); border-radius:20px; }
.p2-help h3 { color:var(--text-light); font-size:1.35rem; margin:4px 0 8px; }
.p2-help p:not(.eyebrow) { color:var(--text-light-dim); max-width:70ch; }
.p2-shots { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.p2-shots figure { margin:0; }
.p2-shots a { display:block; overflow:hidden; border-radius:16px; border:1px solid var(--line-light); background:#fff; box-shadow:0 8px 30px rgba(12,20,38,.08); transition:transform .25s, box-shadow .25s; }
.p2-shots a:hover, .p2-shots a:focus-visible { transform:translateY(-4px); box-shadow:0 14px 38px rgba(12,20,38,.16); }
.p2-shots img { display:block; width:100%; height:auto; aspect-ratio:622/389; object-fit:cover; }
.p2-shots figcaption { padding:10px 4px 0; color:var(--text-dark-dim); font-size:.84rem; line-height:1.4; }
.p2-shots figcaption b { display:block; color:var(--text-dark); font-size:.9rem; margin-bottom:2px; }
.p2-trust { background:var(--ink); color:var(--text-light); }
.p2-trust .p2-head h2 { color:var(--text-light); }
.p2-trust .p2-sub { color:var(--text-light-dim); }
.p2-trust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.p2-trust-grid article { border:1px solid var(--line-dark); background:rgba(234,240,255,.04); border-radius:16px; padding:22px; }
.p2-trust-grid b { color:var(--text-light); }
.p2-trust-grid p { margin-top:7px; color:var(--text-light-dim); font-size:.88rem; }
.p2-trial-note { margin:24px auto 0; max-width:820px; text-align:center; padding:16px 20px; border:1px solid rgba(49,86,245,.28); border-radius:14px; background:#fff; color:var(--text-dark-dim); }
.p2-trial-note b { color:var(--text-dark); }
.p2-cookie-link { appearance:none; border:0; padding:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.p2-complaints { display:flex; align-items:center; gap:10px; align-self:start; padding:12px 14px; border:1px solid var(--line-light); border-radius:12px; background:#fff; color:var(--text-dark); font-size:.78rem; line-height:1.15; box-shadow:0 4px 14px rgba(12,20,38,.06); transition:transform .2s, box-shadow .2s; }
.p2-complaints:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(12,20,38,.12); }
.p2-complaints img { width:42px; height:42px; }
.p2-cookie[hidden] { display:none; }
.p2-cookie [hidden] { display:none !important; }
.p2-cookie { position:fixed; z-index:500; left:18px; right:18px; bottom:18px; max-width:1180px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px; border:1px solid var(--line-light); border-radius:18px; background:#fff; box-shadow:0 24px 70px rgba(12,20,38,.22); }
.p2-cookie h2 { font-size:1rem; }
.p2-cookie p { margin-top:5px; color:var(--text-dark-dim); font-size:.82rem; }
.p2-cookie__options { display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; font-size:.78rem; }
.p2-cookie__actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex-shrink:0; }
.p2-cookie .btn { padding:10px 14px; font-size:.76rem; }
@media (max-width:1080px) { .p2-onboard { grid-template-columns:repeat(2,1fr); } .p2-shots { grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px) { .p2-onboard,.p2-shots,.p2-trust-grid { grid-template-columns:1fr; } .p2-help,.p2-cookie { align-items:stretch; flex-direction:column; } .p2-cookie { max-height:calc(100vh - 36px); overflow:auto; } .p2-cookie__actions .btn { flex:1 1 140px; } .p2-channel-list { grid-template-columns:1fr; } }
.p2-price strong { font-size: clamp(1.7rem, 2.6vw, 2.35rem); }

/* Botones de prueba: una sola línea, sin desbordar el menú ni las tarjetas de plan */
.nav__actions .btn, .nav .btn--primary { white-space:nowrap; }
.p2-plan .btn { white-space:nowrap; padding-inline:14px; font-size:.95rem; }

/* Menú: que el botón de prueba siempre quepa completo */
.nav__inner { gap:20px; padding-inline:20px; }
.nav__links { gap:20px; font-size:.92rem; }
.nav__actions { gap:10px; flex-shrink:0; }
.nav__actions .btn { padding:11px 16px; font-size:.92rem; }

/* Menú de países: lista vertical, cada fila igual (código · país · moneda y estado) */
.p2-cmenu a { text-decoration: none; }
.p2-cmenu a b { text-align: center; background: var(--paper-2); padding: 3px 0; border-radius: 6px; flex: none; }
.p2-cmenu a span { flex: 1; white-space: nowrap; }
.p2-cmenu a small { white-space: nowrap; font-family: var(--font-mono); }
.p2-cmenu a[aria-checked="true"] { box-shadow: inset 3px 0 0 var(--gold); }

/* "Ingresar" siempre visible: en pantallas medianas se ocultan antes los enlaces menos importantes */
.nav__login { display: inline-block; white-space: nowrap; }
@media (max-width: 1400px) { .nav__links a:nth-child(7) { display: none; } }
@media (max-width: 1260px) { .nav__links a:nth-child(2) { display: none; } }
@media (max-width: 1100px) { .nav__links a:nth-child(n+5) { display: none; } .nav__login { font-size: .9rem; } }

/* Menú móvil: "Ingresar a mi cuenta" como botón visible */
.nav__mobile .nav__login { display:block; padding:12px 16px; border:1.5px solid var(--line-light); border-radius:12px; text-align:center; font-weight:600; color:var(--text-dark); background:#fff; }

.p2-social { display: flex; gap: 10px; margin-top: 14px; }
.p2-social:empty { display: none; }
.p2-social a { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: #fff; border: 1px solid var(--line-light); box-shadow: 0 4px 14px rgba(12,20,38,.06); transition: color .2s, border-color .2s, transform .2s; }
.p2-social a:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-2px); }