/* Portada alineada con las superficies opalinas de Nexo Agenda. */
body { line-height: 1.65; }
.skip-link { position: fixed; left: 20px; top: -80px; z-index: 110; background: var(--paper); padding: 12px 18px; border-radius: 12px; }
.skip-link:focus { top: 12px; }
body > nav { height: 80px; padding-inline: max(24px, calc((100vw - 1200px) / 2)); background: rgba(212,220,229,.86); border-bottom-color: rgba(255,255,255,.65); }
.nav-logo img { width: 42px; height: 42px; border-radius: 12px; }
.nav-logo span { font-size: 18px; }
.nav-cta { border-radius: 12px; padding: 10px 18px; }
.nav-cta.solid { box-shadow: 0 4px 10px rgba(43,58,83,.16); }
.hero-layout { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 32px; max-width: 1200px; margin: auto; padding: 158px 24px 82px; }
.hero { max-width: none; margin: 0; padding: 0; text-align: left; }
.badge-chip { padding: 8px 12px; font-size: 11px; letter-spacing: .08em; border-radius: 10px; background: rgba(245,247,252,.55); box-shadow: none; margin-bottom: 26px; }
.badge-dot { background: var(--brand); box-shadow: none; }
.hero h1 { font-size: clamp(38px,4.6vw,62px); line-height: 1.09; letter-spacing: -.05em; margin-bottom: 26px; }
.grad { background: none; -webkit-text-fill-color: var(--brand); color: var(--brand); }
.lead { margin: 0 0 18px; max-width: 42ch; font-size: 18px; }
.hero-platforms { color: var(--muted); font-size: 13px; margin-bottom: 26px; }
.cta-row { justify-content: flex-start; gap: 12px; }
.btn { border-radius: 14px; padding: 14px 20px; font-size: 14px; min-height: 50px; }
.btn-primary { background: var(--brand); box-shadow: 0 5px 12px rgba(43,58,83,.20); }
.btn-primary:hover { background: var(--brand-deep); box-shadow: 0 8px 16px rgba(43,58,83,.24); }
.btn-store { background: rgba(245,247,252,.65); border-color: rgba(255,255,255,.85); }
.btn:active, .nav-cta:active { transform: translateY(1px); }
.stage { width: 100%; min-height: 470px; margin: 0; padding: 38px 0; align-items: center; }
.stage-glow { background: radial-gradient(ellipse,rgba(245,247,252,.7),transparent 70%); width: 100%; height: 100%; top: 0; }
.phone { width: 248px; aspect-ratio: 9 / 19.5; background: #263348; box-shadow: 0 28px 52px rgba(43,58,83,.24), inset 0 0 0 1px rgba(255,255,255,.4); }
.screen { height: 100%; display: flex; flex-direction: column; background: linear-gradient(150deg,#D4DCE5,#ACB8C9); padding: 22px 14px 18px; }
.screen::before { display: none; }
.scr-top { margin-bottom: 20px; }
.scr-top span { font-size: 10px; }
.appt { padding: 13px 10px; border-color: rgba(255,255,255,.85); background: rgba(245,247,252,.72); box-shadow: 0 3px 8px rgba(43,58,83,.10); }
.appt .dot.ok { background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,.13); }
.scr-nexi { border-radius: 14px; margin-top: auto; }
.float { border-top-color: rgba(255,255,255,.95); border-left-color: rgba(255,255,255,.85); background: rgba(245,247,252,.84); padding: 14px; box-shadow: 0 9px 24px rgba(43,58,83,.17); }
.float.wa { left: -8px; top: 5%; }
.float.cash { right: -8px; top: auto; bottom: 6%; }
.nexi { left: 4px; bottom: 48px; }
.nexi::before { background: radial-gradient(circle,rgba(143,182,210,.3),transparent 68%); }
.nexi::after { background: radial-gradient(ellipse,rgba(43,58,83,.2),transparent 70%); }
.nexi img { filter: drop-shadow(0 7px 10px rgba(43,58,83,.16)); }
.features { max-width: 1200px; margin-top: 48px; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 20px; }
.features-heading { grid-column: 1 / -1; padding-bottom: 12px; max-width: 640px; }
.eyebrow { color: var(--brand); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.features-heading h2 { font-size: clamp(28px,3.5vw,40px); line-height: 1.15; margin: 12px 0 16px; }
.features-heading p { color: var(--muted); font-size: 16px; }
.feature { grid-column: span 2; padding: 24px; background: rgba(245,247,252,.48); border-top-color: rgba(255,255,255,.85); border-left-color: rgba(255,255,255,.85); border-radius: 24px; box-shadow: 0 5px 12px rgba(43,58,83,.13); }
.feature:nth-last-child(-n+2) { grid-column: span 3; }
.feature .icn { width: 88px; height: 88px; border: 0; background: transparent; border-radius: 0; margin-bottom: 20px; }
.feature .icn img { width: 100%; height: 100%; object-fit: contain; }
.feature h3 { font-size: 18px; }
.feature p { max-width: 48ch; }
.video-sec { display: grid; grid-template-columns: minmax(0,1fr) 280px; column-gap: 72px; max-width: 1152px; margin: 8px auto 0; padding: 40px 48px; text-align: left; background: rgba(245,247,252,.44); border: 1px solid rgba(255,255,255,.65); border-radius: 28px; }
.video-sec h2 { align-self: end; font-size: 38px; line-height: 1.15; margin-bottom: 20px; }
.video-sec p { align-self: start; max-width: 40ch; font-size: 18px; margin: 0; }
.video-wrap { grid-column: 2; grid-row: 1 / 3; width: 100%; max-width: 240px; margin: 0 auto; }
.note { margin-top: 64px; font-size: 13px; line-height: 1.8; max-width: 850px; }
footer { max-width: 1200px; margin-top: 48px; padding-bottom: 32px; gap: 24px; }
footer nav.links { gap: 12px 20px; margin-left: 0; font-size: 12px; }
@media (max-width: 1000px) {
  .hero-layout { gap: 20px; padding-top: 136px; }
  .hero h1 { font-size: 44px; }
  .float.wa { left: 0; }
  .float.cash { right: 0; }
  .nexi { left: 0; width: 72px; }
  .nexi img { height: 115px; }
  .video-sec { margin-inline: 24px; }
}
@media (max-width: 760px) {
  body > nav { height: 70px; padding-inline: 20px; }
  .nav-logo span { font-size: 14px; }
  .nav-logo img { width: 34px; height: 34px; }
  .nav-group { gap: 8px; }
  .nav-cta { padding: 10px 12px; font-size: 12px; }
  .hero-layout { grid-template-columns: 1fr; gap: 36px; padding: 114px 20px 40px; }
  .hero h1 { font-size: clamp(38px,8.5vw,54px); }
  .lead { font-size: 17px; }
  .stage { min-height: 0; padding: 16px 0 0; gap: 12px; }
  .phone { order: 0; }
  .nexi { position: absolute; left: calc(50% - 170px); bottom: 144px; width: 72px; padding: 0; }
  .nexi img { height: 110px; }
  .float { order: 1; max-width: 360px; width: 100%; }
  .features { grid-template-columns: repeat(2,minmax(0,1fr)); padding-inline: 20px; margin-top: 36px; gap: 14px; }
  .feature, .feature:nth-last-child(-n+2) { grid-column: span 1; padding: 20px; }
  .feature:last-child { grid-column: 1 / -1; }
  .feature .icn { width: 72px; height: 72px; margin-bottom: 16px; }
  .feature h3 { font-size: 16px; }
  .feature p { font-size: 13px; }
  .video-sec { grid-template-columns: 1fr; padding: 28px; margin: 12px 20px 0; gap: 0; }
  .video-sec h2 { font-size: 30px; }
  .video-sec p { font-size: 16px; margin-bottom: 24px; }
  .video-wrap { grid-column: 1; grid-row: auto; max-width: 220px; }
}
@media (max-width: 380px) {
  .nav-logo span { max-width: 48px; line-height: 1.1; }
  .nav-cta { padding-inline: 10px; }
  .hero h1 { font-size: 36px; }
  .features { grid-template-columns: 1fr; }
}