/* Product refinement: preserve the cinematic opening, give the devices room. */
.panel:has(.product-page) { --paper:#f5f2e9; --product-tint:#eee7d1; }
#agentes-ia { --product-tint:#e2eee7; }
#agentes-voz { --product-tint:#e3ebf7; }
#automatizacion { --product-tint:#f4e4d9; }
#solaria-app { --product-tint:#dfeef0; }
.panel-scroll > .panel-inner:has(.phone-stage) {
  height:auto !important; min-height:max(100%,900px); padding-top:108px; padding-bottom:96px;
  grid-template-columns:minmax(0,1fr) minmax(360px,1fr); gap:48px;
}
:is(#payback,#agentes-ia,#agentes-voz,#automatizacion) .panel-visual.phone-stage {
  width:100%; height:auto !important; min-height:0 !important; padding:0 !important;
  align-self:center; overflow:visible; transform:none !important;
}
:is(#payback,#agentes-ia,#agentes-voz,#automatizacion) .panel-visual.phone-stage .product-phone {
  --phone-edge:46px; width:320px !important; height:696px !important;
  max-width:none !important; min-height:0 !important; flex-shrink:0;
  padding:4px !important; border:1px solid #f0f2f7 !important;
  border-radius:46px !important; transform:none !important;
  box-shadow:0 30px 65px #0006,0 1px 0 #fff inset !important;
  container-type:inline-size;
}
:is(#payback,#agentes-ia,#agentes-voz,#automatizacion) .panel-visual.phone-stage .product-phone .device-frame {
  border-radius:41px !important; padding:4px !important; background:#121419 !important;
}
:is(#payback,#agentes-ia,#agentes-voz,#automatizacion) .panel-visual.phone-stage .product-phone .screen { border-radius:37px !important; color:#17191d; }
:is(#payback,#agentes-ia,#agentes-voz,#automatizacion) .panel-visual.phone-stage .product-phone .device-frame::before {
  width:82px !important; height:22px !important; top:12px !important;
}
:is(#payback,#agentes-ia,#agentes-voz,#automatizacion) .phone-stage .phone-status { top:13px !important; left:22px !important; right:20px !important; height:18px !important; padding:0 !important; font-size:10px !important; }
:is(#payback,#agentes-ia,#agentes-voz,#automatizacion) .phone-stage .phone-status-icons { gap:5px !important; }
:is(#payback,#agentes-ia,#agentes-voz,#automatizacion) .phone-stage .phone-status .phone-time { font-size:10px !important; }
:is(#payback,#agentes-ia,#agentes-voz,#automatizacion) .phone-stage .status-battery-percent { width:20px !important; height:10px !important; }
/* Secondary signals now live outside the screen, never across its content. */
:is(#payback,#agentes-ia,#agentes-voz,#automatizacion) .phone-stage > .ambient-proof,
:is(#payback,#agentes-ia,#agentes-voz,#automatizacion) .phone-stage > .glass-card,
:is(#payback,#agentes-ia,#agentes-voz,#automatizacion) .phone-stage > .channel-orbit,
:is(#payback,#agentes-ia,#agentes-voz,#automatizacion) .phone-stage > .automation-streams,
:is(#payback,#agentes-ia,#agentes-voz,#automatizacion) .phone-stage > .push-route,
:is(#payback,#agentes-ia,#agentes-voz,#automatizacion) .phone-stage > .reward-pulse { display:none !important; }
:is(#payback,#agentes-ia,#agentes-voz,#automatizacion) .phone-stage > .voice-field { opacity:.25; pointer-events:none; }

/* Wallet: keep the original pass image, crop only its duplicate OS chrome.
   1125 / 2436 original. The complete main pass sits between 8.2% and 69.5%. */
#payback .payback-phone-ui { background:#f0f1f6 !important; --wallet-drop:0%; }
#payback .wallet-stack { inset:143px 0 auto !important; height:calc(141cqw - 30px) !important; border-radius:0 !important; overflow:hidden; }
#payback .wallet-reference-pass { inset:0 !important; height:100% !important; border-radius:0 !important; }
#payback .wallet-reference-pass::before { display:none !important; }
#payback .wallet-reference-pass > img {
  top:-52px !important; left:0 !important; width:100% !important; height:auto !important; object-fit:contain !important;
}
#payback .wallet-live-stamps { top:42px !important; height:83px !important; left:9.7% !important; right:9.7% !important; }
#payback .wallet-reference-credit { top:363px !important; height:24px !important; font-size:10px !important; }
#payback .phone-notification {
  top:51px !important; left:12px !important; right:12px !important; min-height:76px !important;
  display:grid !important; grid-template-columns:34px minmax(0,1fr) !important; align-items:center;
  padding:12px !important; gap:10px !important; border:1px solid #fff !important;
  border-radius:19px !important; background:#fff !important; box-shadow:0 5px 18px #18212e12 !important;
  transform:none !important; opacity:1 !important; animation:none !important;
}
#payback .phone-notification i { width:34px !important; height:34px !important; border-radius:9px !important; }
#payback .phone-notification div { min-width:0; padding:0 !important; }
#payback .phone-notification b { font-size:11px !important; line-height:1.4 !important; margin:0 0 3px; }
#payback .phone-notification span { font-size:11px !important; line-height:1.4 !important; white-space:normal !important; color:#454a53; }
#payback .phone-notification time { position:absolute !important; top:12px !important; right:12px !important; font-size:9px !important; }

/* Chat: separate status, full contact name, transcript, and composer. */
#agentes-ia .agent-phone-ui { display:flex !important; flex-direction:column; padding:43px 0 18px !important; }
#agentes-ia .mobile-chat-head { display:grid !important; grid-template-columns:17px 33px minmax(0,1fr) 30px !important; gap:7px !important; padding:10px 9px !important; flex:0 0 64px !important; }
#agentes-ia .chat-avatar { width:33px !important; height:33px !important; }
#agentes-ia .wa-contact { min-width:0; }
#agentes-ia .mobile-chat-head .wa-contact b { font-size:12px !important; line-height:1.2 !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }
#agentes-ia .mobile-chat-head .wa-contact span { font-size:9px !important; line-height:1.3; white-space:normal; }
#agentes-ia .wa-conversation { flex:1; gap:9px !important; padding:12px 13px !important; justify-content:flex-start !important; }
#agentes-ia .wa-channel-label { font-size:8px !important; }
#agentes-ia .wa-channel-label b { font-size:9px !important; }
#agentes-ia .wa-channel-label span, #agentes-ia .wa-encryption { display:none !important; }
#agentes-ia .wa-date { margin:0 auto 3px !important; font-size:9px !important; }
#agentes-ia .phone-bubble { font-size:12px !important; line-height:1.4 !important; padding:10px 11px 21px !important; max-width:88% !important; flex-shrink:0; }
#agentes-ia .phone-bubble.optional-context { display:block !important; }
#agentes-ia .phone-bubble small { font-size:8px !important; bottom:5px; }
#agentes-ia .crm-confirm { font-size:9px !important; line-height:1.4 !important; padding:8px !important; margin-top:auto !important; flex-shrink:0; }
#agentes-ia .phone-compose { flex:0 0 43px !important; margin:6px 9px 0 !important; font-size:12px !important; }

/* Voice: a real call hierarchy with enough breathing room for the transcript. */
#agentes-voz .voice-phone-ui { display:flex !important; flex-direction:column; align-items:center; gap:0; padding:51px 20px 26px !important; }
#agentes-voz .ios-call-label { display:block !important; font-size:10px !important; margin:0 0 20px !important; }
#agentes-voz .voice-orbit { width:88px !important; height:88px !important; margin:0 auto 16px !important; flex-shrink:0; }
#agentes-voz .voice-phone-ui h3 { font-size:22px !important; line-height:1.2 !important; margin:0 0 9px !important; }
#agentes-voz .voice-phone-ui > p { font-size:10px !important; line-height:1.5; margin:0 !important; }
#agentes-voz .voice-wave { height:45px !important; margin:18px 0 !important; flex-shrink:0; }
#agentes-voz .voice-transcript { display:block !important; width:100%; font-size:14px !important; line-height:1.5 !important; padding:16px !important; margin:0 !important; border-radius:16px !important; }
#agentes-voz .voice-transcript small { display:block; font-size:9px !important; line-height:1.5; margin-bottom:8px; }
#agentes-voz .voice-result { width:100%; padding:12px !important; margin:12px 0 0 !important; border-radius:12px; }
#agentes-voz .voice-result b { font-size:12px !important; }
#agentes-voz .voice-result small { font-size:10px !important; }
#agentes-voz .voice-actions { position:static !important; width:100%; display:flex !important; justify-content:space-around; margin:auto 0 0 !important; padding-top:20px !important; }
#agentes-voz .voice-actions i { font-size:10px !important; }
#agentes-voz .voice-actions i b, #agentes-voz .voice-actions .hangup { width:48px !important; height:48px !important; }

/* Growth: readable question, answer, evidence and explicit approval. */
#automatizacion .growth-phone-ui { display:flex !important; flex-direction:column; padding:49px 17px 26px !important; gap:15px !important; }
#automatizacion .growth-head { padding:7px 0 14px !important; margin:0 !important; flex-shrink:0; }
#automatizacion .growth-head b { font-size:17px !important; }
#automatizacion .growth-head small { font-size:10px !important; }
#automatizacion .growth-question { font-size:12px !important; line-height:1.5 !important; padding:12px 14px !important; margin:0 !important; }
#automatizacion .growth-answer { padding:17px !important; margin:0 !important; border-radius:16px !important; }
#automatizacion .growth-answer span { font-size:9px !important; display:block; margin-bottom:10px; }
#automatizacion .growth-answer b { font-size:18px !important; line-height:1.35 !important; display:block; }
#automatizacion .growth-answer p { display:block !important; font-size:12px !important; line-height:1.5 !important; margin:12px 0 0 !important; }
#automatizacion .channel-strip { font-size:10px !important; margin:0 !important; gap:6px !important; }
#automatizacion .approval-card { margin:auto 0 0 !important; padding:17px !important; border-radius:16px !important; background:#f8efe5 !important; border-color:#e6d6c2 !important; }
#automatizacion .approval-card > span { font-size:9px !important; color:#8c4b13 !important; }
#automatizacion .approval-card > b { font-size:15px !important; line-height:1.4 !important; margin:8px 0 !important; }
#automatizacion .approval-card > small { font-size:10px !important; }
#automatizacion .approval-card > div { margin-top:14px !important; gap:8px; }
#automatizacion .approval-card button { min-height:44px !important; font-size:12px !important; padding:10px !important; }

/* The second act: opaque, full-width editorial sections per product. */
.product-page { max-width:none; width:100%; margin:0; padding:0; background:var(--paper); color:#181b20; }
.pp-journey { padding:90px max(6vw,24px); background:var(--product-tint); }
.pp-journey > *, .pp-closing > * { max-width:1120px; margin-left:auto; margin-right:auto; }
.pp-journey h3, .pp-closing h3 { font-size:clamp(32px,4.5vw,64px); line-height:1.05; letter-spacing:-.045em; font-weight:650; max-width:850px; margin:0 0 56px; }
.pp-journey ol { list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin:0 0 30px; }
.pp-journey li { border-top:1px solid #242b3440; padding-top:20px; display:flex; flex-direction:column; gap:30px; }
.pp-journey li span { font-size:12px; color:#4b5056; }
.pp-journey li strong { font-size:clamp(18px,2.2vw,28px); font-weight:550; letter-spacing:-.025em; }
.pp-journey > p:last-child { font-size:16px; color:#4b5056; margin-top:40px; }
.product-page .pp-sec { margin:0; border:0; padding:96px max(6vw,24px); background:var(--paper); --section-ink:#181b20; --section-muted:#51565d; --section-line:#232b3426; color:var(--section-ink); }
.product-page .pp-tone-1 { background:#12161c; --section-ink:#f5f2e9; --section-muted:#b5bdc7; --section-line:#ffffff26; }
.product-page .pp-tone-2 { background:var(--product-tint); }
.pp-section-inner { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,7vw,110px); align-items:start; }
.pp-section-number { display:block; font-size:12px; color:var(--section-muted); margin:0 0 44px; }
.product-page .pp-kicker { font-size:11px; color:inherit; opacity:.7; letter-spacing:.17em; margin:0 0 18px; }
.product-page .pp-h { font-size:clamp(30px,3.6vw,50px); line-height:1.07; letter-spacing:-.035em; color:var(--section-ink); margin:0 0 24px; }
.product-page .pp-lede { font-size:17px; color:var(--section-muted); line-height:1.65; }
.pp-editorial-body { padding-top:56px; }
.product-page .pp-list, .product-page .pp-steps, .product-page .pp-grid { margin:0; gap:0; }
.product-page .pp-list li, .product-page .pp-steps li { padding:18px 0; border-bottom:1px solid var(--section-line); color:var(--section-ink); font-size:16px; line-height:1.6; }
.product-page .pp-list li::before { color:inherit; opacity:.6; }
.product-page .pp-steps li::before { color:var(--section-ink); background:transparent; font-size:15px; width:25px; }
.product-page .pp-grid { grid-template-columns:1fr 1fr; gap:0 24px; }
.product-page .pp-grid li { padding:22px 0; border:0; border-bottom:1px solid var(--section-line); border-radius:0; background:none; font-size:17px; color:var(--section-ink); }
.product-page .pp-note, .product-page .pp-sec.is-warn .pp-note { margin:28px 0 0; padding:0 0 0 18px; border-radius:0; border-left:2px solid var(--section-line); background:transparent; color:var(--section-muted); font-size:14px; }
.product-page .pp-big { font-size:clamp(48px,6vw,84px); color:var(--section-ink); margin:0 0 30px; }
.product-page .pp-unit { font-size:16px; color:var(--section-muted); line-height:1.5; max-width:28ch; margin-top:18px; }
.product-page .pp-cols { margin:0; grid-template-columns:1fr; gap:36px; }
.product-page .pp-cols h4 { color:var(--section-ink); font-size:20px; }
.pp-closing { background:#11151b; color:#f5f2e9; padding:90px max(6vw,24px) 110px; text-align:center; }
.pp-closing > .ai-presence { display:block; width:64px; height:64px; margin:0 auto 30px; }
.pp-closing h3 { margin:0 auto 36px; }
.pp-closing > div { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }
.pp-closing button { display:flex; gap:30px; justify-content:space-between; align-items:center; padding:17px 22px; background:#f5f2e9; color:#15191f; border-radius:4px; min-height:52px; font-size:14px; cursor:pointer; }
.pp-closing button + button { background:transparent; color:#f5f2e9; border:1px solid #ffffff40; }
.pp-closing button:focus-visible { outline:3px solid #f5c842; outline-offset:5px; }
.panel-scroll .pp-hint { bottom:25px; }

@media(max-width:900px) {
  .panel-scroll > .panel-inner:has(.phone-stage) { display:flex !important; flex-direction:column; min-height:0; gap:42px !important; padding:calc(var(--header-h) + 28px) 24px 80px !important; overflow:visible !important; }
  .panel-scroll > .panel-inner:has(.phone-stage) .panel-copy { width:100%; max-width:600px; flex:none; align-self:center; }
  .panel-scroll > .panel-inner:has(.phone-stage) .panel-copy h2 { max-width:15ch; font-size:clamp(34px,6vw,52px); }
  .panel-scroll > .panel-inner:has(.phone-stage) .lede { display:block !important; -webkit-line-clamp:unset; overflow:visible; font-size:15px; line-height:1.6; }
  :is(#payback,#agentes-ia,#agentes-voz,#automatizacion) .panel-visual.phone-stage { flex:none !important; }
  :is(#payback,#agentes-ia,#agentes-voz,#automatizacion) .panel-visual.phone-stage .product-phone { width:310px !important; height:674px !important; }
  #payback .wallet-live-stamps { top:40px !important; height:79px !important; }
  #payback .wallet-reference-credit { top:349px !important; }
  .pp-section-inner { grid-template-columns:1fr; gap:30px; }
  .pp-editorial-body { padding:0; }
  .pp-section-number { margin-bottom:24px; }
  .product-page .pp-sec, .pp-journey { padding:64px 28px; }
  .pp-journey ol { grid-template-columns:1fr; gap:24px; }
  .pp-journey li { flex-direction:row; gap:24px; align-items:baseline; }
  .pp-journey h3 { margin-bottom:36px; }
  .product-page .pp-grid { grid-template-columns:1fr; }
  .pp-closing { padding:64px 28px 80px; }
}
@media(max-width:359px) {
  .panel-scroll > .panel-inner:has(.phone-stage) { padding-left:14px !important; padding-right:14px !important; }
  :is(#payback,#agentes-ia,#agentes-voz,#automatizacion) .panel-visual.phone-stage .product-phone { width:286px !important; height:622px !important; }
  #payback .wallet-reference-credit { top:314px !important; }
  #payback .wallet-live-stamps { top:32px !important; height:73px !important; }
  #agentes-ia .phone-bubble { font-size:11px !important; padding:8px 10px 18px !important; }
  #agentes-ia .wa-conversation { gap:6px !important; }
  #agentes-voz .voice-orbit { width:66px !important; height:66px !important; margin-bottom:12px !important; }
  #agentes-voz .ios-call-label { margin-bottom:14px !important; }
  #agentes-voz .voice-wave { margin:10px 0 !important; height:34px !important; }
  #automatizacion .growth-phone-ui { gap:10px !important; padding-left:14px !important; padding-right:14px !important; }
  #automatizacion .growth-answer { padding:12px !important; }
  #automatizacion .growth-answer b { font-size:16px !important; }
  #automatizacion .growth-answer p { font-size:11px !important; }
}
@media(prefers-reduced-motion:reduce) { .phone-stage *, .pp-hint i { animation:none !important; transition:none !important; } }

#agentes-ia .mobile-chat-head { grid-template-columns:17px 33px minmax(0,1fr) 36px !important; }
#agentes-ia .wa-tools { min-width:0 !important; width:36px !important; gap:6px !important; }
#agentes-ia .wa-tools svg { width:15px !important; height:15px !important; flex-shrink:0; }
#agentes-voz .phone-stage > .voice-field { z-index:-1; }
#automatizacion .growth-question { color:#27303b !important; background:#eceff3 !important; }
#automatizacion .approval-card button:first-child { background:#27303b !important; color:#fff !important; }
body:has(.panel.is-active .is-reading) .site-header { background:#11151b; backdrop-filter:none; }
body:has(.panel.is-active .is-reading) > .system-line { opacity:0 !important; }
.product-page:focus { outline:none; }

/* Vertical reading never chains into horizontal chapter navigation. */
#experience { overflow-x:hidden; touch-action:pan-y pinch-zoom; }
[data-panel-scroll] { overscroll-behavior:contain; touch-action:pan-y pinch-zoom; }
