/* Tema de la portada comercial. Las páginas de compra y atención usan styles.css. */
:root {
  color-scheme: dark;
  --ink: #e5eef8;
  --muted: #a9bbce;
  --line: #23394c;
  --surface: #060f1b;
  --surface-soft: #0b1828;
  --surface-blue: #10263a;
  --blue-50: #10263a;
  --blue-100: #123248;
  --green-100: #0d3028;
  --purple-100: #123248;
  --shadow-xs: 0 4px 16px #00000012;
  --shadow-sm: 0 12px 30px #00000024;
  --shadow-md: 0 22px 55px #00000038;
  --shadow-lg: 0 32px 80px #00000050;
  --header-height: 76px;
}

body { background: #060f1b; }
h1, h2, h3 { color: #f4f8ff; }
h2 { font-size: clamp(2rem, 3.5vw, 3rem); text-wrap: balance; }
.section { padding-block: 76px; }
.section-heading { margin-bottom: 40px; }
.section-kicker, .text-link, .plan-name, .access-label { color: #65c8ff; }
.site-header { background: #081321ed; border-color: var(--line); }
.main-nav a { color: #bfd0e2; }
.main-nav a:hover, .main-nav a.active { color: #fff; }
.brand img, .footer-brand img { background: #fff; border-radius: 10px; padding: 7px 10px; }
.menu-toggle { background: #102438; color: #dceeff; }
.button { border-radius: 12px; }
.button-primary { background: linear-gradient(115deg, #086ba8, #087e98); box-shadow: 0 8px 28px #058abb24; }
.header-cta, .hero-actions .button-primary { background: linear-gradient(115deg, #087b45, #09805b); box-shadow: 0 8px 28px #19a83b20; }
.button-ghost { background: linear-gradient(110deg, #086cae, #079c9b); color: #fff; border-color: #51cfff30; }
.button-outline { color: #b8e5ff; background: #102336; border-color: #2a5069; }
.button-ghost:hover, .button-outline:hover { color: #fff; background: #17415a; }
.button:focus-visible, a:focus-visible, summary:focus-visible { outline-color: #79d3ff; }

/* Portada: texto amplio y capturas reales dentro de un panel de producto. */
.hero { padding-block: 76px 68px; background: radial-gradient(ellipse at 40% 20%, #073c685c, transparent 60%), radial-gradient(ellipse at 92% 80%, #08643e30, transparent 45%), #060f1b; }
.hero::before, .hero-glow, .stage-orbit { display: none; }
.hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 56px; }
.hero-copy h1 { font-size: clamp(2.65rem, 4.4vw, 4rem); line-height: 1.08; letter-spacing: -.045em; }
.hero-copy h1 span { color: #61d4cf; background: linear-gradient(100deg, #56baff, #54d888); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.eyebrow { color: #9adeff; background: #0d3550; border-color: #266085; font-size: .67rem; letter-spacing: .06em; }
.hero-lead { color: #b7c9dd; font-size: 1.05rem; line-height: 1.8; }
.hero-proof { color: #b3c8d9; font-size: .77rem; gap: 12px 16px; }
.hero-proof .icon { color: #62d797; background: transparent; padding: 0; }
.hero-price-line { border-color: var(--line); }
.hero-price-line strong { color: #72dc9d; }
.product-stage { min-height: 420px; border: 1px solid #28445b; border-radius: 26px; background: linear-gradient(145deg, #112339, #0a1929); box-shadow: 0 30px 90px #00000040; }
.laptop { top: 66px; right: 5%; width: 90%; transform: none; }
.laptop-screen { border-color: #2c4255; padding: 7px; border-radius: 12px; }
.laptop-base { display: none; }
.support-float { top: 14px; left: 5%; padding: 0; background: transparent; box-shadow: none; border: 0; }
.support-float > .icon { background: #133c31; color: #70e49d; }
.support-float small { color: #b8ccdf; }
.support-float strong { color: #72dc9d; }
.phone-card { width: 106px; bottom: -22px; left: 7%; right: auto; transform: rotate(-3deg); border-radius: 22px; padding: 6px; }
.phone-card img { border-radius: 16px; }
.ai-float { width: 235px; right: 5%; bottom: -30px; background: #112639; border-color: #2b5265; padding: 15px; }
.ai-float-title { color: #72d8ed; margin-bottom: 10px; }
.ai-question { background: #09668b; }
.ai-answer { background: #18384a; color: #d0e5ef; }
.price-float { top: 17px; right: 5%; min-width: 0; padding: 0; background: transparent; border: 0; transform: none; box-shadow: none; }
.price-float small { color: #a9bbce; font-size: .55rem; }
.price-float strong { color: #71df9f; font-size: 1.45rem; }
.trust-strip { background: #0a1725; border-block: 1px solid var(--line); }
.trust-icon { color: #61d598; background: #10342d; }

/* Tarjetas y secciones continuas sobre el fondo azul noche. */
.transformation, .feature-showcase, .commerce-section, .why-section, .pricing-section, .access-section, .payment-section { background: #060f1b; }
.benefits-section, .industries, .process-section, .faq-section { background: #091522; border-block: 1px solid #182b3d; }
.state-card, .benefit-card, .industry-card, .price-card, .process-card, .documents-banner, .faq-list details, .payment-panel, .payment-details article, .lead-form, .access-card, .cloud-card { background: #0e1d2e; border: 1px solid #24384c; }
.after-card { background: linear-gradient(140deg, #0e1d2e, #0c2925); border-color: #246345; }
.state-list li, .mini-checks li, .price-card li, .hero-proof, .industries-note { color: #b7c9d9; }
.state-label { color: #b8c9dc; background: #1b2c3f; }
.after-card .state-label { color: #75dca0; }
.benefit-card:hover, .industry-card:hover { border-color: #40846e; box-shadow: 0 12px 32px #00000030; }
.feature-icon.blue, .feature-icon.purple, .feature-icon.cyan, .feature-icon.navy, .industry-icon, .why-icon, .access-icon, .documents-icon, .payment-icon { color: #73cfff; background: #123248; }
.feature-icon.green, .feature-icon.orange, .industry-card:nth-child(even) .industry-icon, .why-list article:nth-child(even) .why-icon, .cloud-card .access-icon { color: #70df9d; background: #10362c; }
.spotlight, .spotlight-ai, .spotlight-dashboard, .commerce-store, .commerce-self-service { background: linear-gradient(130deg, #102239, #0b1929 65%); border: 1px solid #253d53; border-radius: 24px; }
.spotlight-dashboard, .commerce-self-service { background: linear-gradient(135deg, #0c2729, #0b1929 65%); }
.spotlight, .spotlight-ai { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 42px; padding: 42px; min-height: 460px; }
.spotlight-number { color: #ffffff09; }
.purple-tag, .blue-tag { color: #89d6ff; background: #153a53; }
.green-tag { color: #76e1a1; background: #10392e; }
.screen-card, .ai-window { background: #11273a; border-color: #29485f; }
.ai-window-bar { background: #14374b; color: #9bddff; }
.ai-prompt { background: #095e83; border-color: #1c455b; }
.prompt-list span, .metric-chips span, .dashboard-badge { color: #cce3f2; background: #102a3b; border-color: #2a4a60; }
.commerce-copy p strong { color: #72dca0; }
.operation-section { background: #091827; border-block: 1px solid #24384c; }
.why-stat { border-color: #122a40; }
.price-card.featured { border: 1px solid #2aae78; background: linear-gradient(145deg, #102c31, #0d1c2d 60%); transform: none; box-shadow: 0 12px 50px #13975712; }
.price-card-top { margin-bottom: 24px; }
.price-card-top h3 { color: #70e0a0; font-size: 4.2rem; }
.price-table thead { background: #153950; }
.price-table tbody tr:nth-child(even) { background: #122638; }
.renewal-note, .free-note { background: #0e342b; color: #c0efd2; border: 1px solid #22533c; }
.access-panel { border: 1px solid #25435a; background: radial-gradient(ellipse at top right, #12463155, transparent 60%), #0c1e30; }
.access-copy { display: block; max-width: 720px; }
.access-copy h2 { margin-bottom: 16px; }
.access-value, .cloud-card .access-label, .cloud-card .access-value { color: #7cdda3; }
.documents-banner strong, .faq-list summary, .payment-details strong, .form-heading strong { color: #e0edf8; }
.format-tags span, .faq-list summary span { color: #81d4ff; background: #17364a; border-color: #2b4d61; }
.contact-section { background: radial-gradient(ellipse at left top, #09375470, transparent 60%), #071522; border-block: 1px solid #24384c; }
.lead-form label > span { color: #bcd0e2; }
.lead-form input, .lead-form textarea, .lead-form select { background: #091727; border-color: #355069; }
.lead-form input:focus, .lead-form textarea:focus, .lead-form select:focus { background: #10263a; }
.lead-form input::placeholder, .lead-form textarea::placeholder, .lead-form small { color: #94aac0; }
.form-status { color: #ffabb6; }
.form-status.success { color: #80e4a6; background: #10372d; }
.lead-form .field-error { border-color: #ff879b; }
.final-cta { background: linear-gradient(110deg, #093958, #0c4239); border-block: 1px solid #2c655b; }
.site-footer { background: #050d17; }
.floating-whatsapp { border: 1px solid #57bf8c; background: #086d45; }
.mobile-cta { background: #0b1b2af5; }
.mobile-cta a { color: #d4e9f8; }

@media (max-width: 1120px) {
  .hero-grid { gap: 30px; }
  .hero-copy h1 { font-size: 3rem; }
  .ai-float { width: 210px; }
  .commerce-panel, .commerce-self-service { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
}
@media (max-width: 930px) {
  .main-nav { background: #091827; bottom: auto; height: calc(100dvh - var(--header-height)); }
  .hero-grid { grid-template-columns: 1fr; gap: 65px; }
  .hero-copy { max-width: 680px; }
  .hero-copy h1 { font-size: clamp(2.6rem, 6vw, 3.7rem); }
  .product-stage { max-width: 520px; min-height: 430px; }
  .spotlight, .spotlight-ai, .commerce-panel, .commerce-self-service { grid-template-columns: 1fr; }
  .section { padding-block: 56px; }
  .hero { padding-block: 52px 74px; }
}
@media (max-width: 700px) {
  .hero-copy { text-align: left; }
  .hero-actions, .hero-proof { justify-content: flex-start; }
  .hero-copy h1 { font-size: clamp(2.25rem, 8.5vw, 3rem); }
  .hero-lead { font-size: .98rem; }
  .hero-actions .button { flex: 1 1 150px; padding-inline: 14px; font-size: .9rem; }
  .hero-price-line { gap: 10px; }
  .hero-price-line span { text-align: left; }
  .eyebrow { font-size: .61rem; }
  .product-stage { min-height: 350px; }
  .phone-card { width: 95px; left: 5%; bottom: -20px; }
  .ai-float { width: 58%; bottom: -24px; right: 4%; padding: 12px; }
  .ai-float-title { font-size: .8rem; }
  .ai-message { font-size: .65rem; padding: 8px; }
  .support-float { max-width: none; }
  .support-float small { font-size: .55rem; }
  .support-float strong { font-size: .65rem; }
  .price-float { top: 18px; right: 5%; min-width: 0; }
  .price-float strong { font-size: 1.25rem; }
  .spotlight, .spotlight-ai { padding: 28px 20px; gap: 30px; }
  .spotlight-visual { min-height: 300px; }
  .price-card-top h3 { font-size: 3.5rem; }
  .payment-details strong, .payment-details small { overflow-wrap: anywhere; }
  .section { padding-block: 44px; }
  .hero { padding-bottom: 68px; }
}