*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; color-scheme:only dark; }
body{ margin:0; background:#070D1A; color:#fff; font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
::selection{ background:rgba(56,189,248,.3); color:#fff; }
*{ scrollbar-width:thin; scrollbar-color:#1A2D40 #050A10; }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:#050A10; }
*::-webkit-scrollbar-thumb{ background:#1A2D40; border-radius:9999px; }
*::-webkit-scrollbar-thumb:hover{ background:#38BDF8; }
details > summary{ list-style:none; }
details > summary::-webkit-details-marker{ display:none; }
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-link:focus-visible{left:8px;top:8px;width:auto;height:auto;overflow:auto;padding:8px 16px;background:#38BDF8;color:#041527;border-radius:8px;font-weight:600;font-size:14px;text-decoration:none;z-index:999;}
a:focus-visible,button:focus-visible{outline:2px solid #38BDF8;outline-offset:3px;border-radius:4px;}
@media (prefers-reduced-motion: no-preference) {
  @keyframes sm-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
  @keyframes sm-spin{ to{ transform:rotate(360deg); } }
  @keyframes sm-pulse-glow{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
}

/* === AMBIENT === */
@media (prefers-reduced-motion: no-preference) {
  .hero-glow{ animation:sm-pulse-glow 5s ease-in-out 1s infinite; }
}

/* === LAYOUT === */
.page-wrapper{ position:relative; min-height:100vh; overflow-x:hidden; display:flex; flex-direction:column; }
#main-content{ flex:1; display:flex; flex-direction:column; }
#main-view, #servicios-view, #portafolio-view, #contacto-view{ flex:1; display:flex; flex-direction:column; justify-content:center; }
#planes-view{ flex:1; display:flex; flex-direction:column; justify-content:flex-start; overflow-y:auto; }
#faq-view{ flex:1; display:flex; flex-direction:column; justify-content:flex-start; overflow-y:auto; }
#servicios-view .section,
#portafolio-view .section,
#contacto-view .section{ padding-top:84px; padding-bottom:32px; scroll-margin-top:0; }
#planes-view .section{ padding-top:84px; padding-bottom:80px; scroll-margin-top:0; margin-top:auto; margin-bottom:auto; }
#portafolio-view .portfolio-grid{ grid-template-columns:repeat(3,1fr); grid-template-rows:auto; }
#portafolio-view .portfolio-card--main{ grid-column:auto; grid-row:auto; display:flex; flex-direction:column; }
#portafolio-view .portfolio-card--main .portfolio-preview{ flex:none; height:170px; }
#faq-view .faq-wrap{ padding-top:32px; padding-bottom:60px; }
#servicios-view .services-split{ gap:40px; }
#servicios-view .services-grid{ gap:42px; }
#servicios-view .service-card{ padding:18px; }
#servicios-view .section-heading{ font-size:28px; }
#servicios-view .services-lead-text{ margin-top:12px; }
#stars-canvas{ position:fixed; inset:0; z-index:0; pointer-events:none; }

/* === NAV === */
.nav{ position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:50; display:flex; align-items:center; justify-content:space-between; gap:4px; padding:6px 10px 6px 26px; width:min(1100px,calc(100% - 48px)); background:rgba(7,13,26,.72); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(56,189,248,.16); border-radius:9999px; box-shadow:0 0 0 1px rgba(56,189,248,.06),0 8px 40px rgba(0,0,0,.5),0 0 50px rgba(56,189,248,.05); transition:border-color 300ms ease,box-shadow 300ms ease,background 300ms ease; white-space:nowrap; }
.nav-brand{ display:flex; align-items:center; gap:9px; text-decoration:none; margin-right:14px; }
.nav-brand-icon{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:rgba(56,189,248,.10); border:1px solid rgba(56,189,248,.28); box-shadow:0 0 14px rgba(56,189,248,.18); flex-shrink:0; }
.logo-filter{ display:block; filter:brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(165deg) brightness(1.4); }
.nav-brand-name{ font-weight:700; font-size:15px; letter-spacing:.18em; color:#fff; }
.nav-links{ display:flex; align-items:center; gap:0; flex:1; justify-content:space-evenly; }
.nav-link{ padding:8px 17px; border-radius:9999px; font-size:13px; font-weight:600; color:#8AA0B8; text-decoration:none; transition:color 150ms ease,background 150ms ease; }
.nav-link--active{ color:#fff; }
.nav-link:hover{ color:#fff; background:rgba(255,255,255,.06); }
.nav-cta{ margin-left:0; padding:10px 18px; border-radius:9999px; font-size:13px; font-weight:600; color:#041527; background:#38BDF8; text-decoration:none; box-shadow:0 0 20px rgba(56,189,248,.28); transition:background 150ms ease,box-shadow 150ms ease; }
.nav-cta:hover{ background:#0270A0; }
.nav--scrolled{ background:rgba(7,13,26,.92); border-color:rgba(56,189,248,.28); box-shadow:0 0 0 1px rgba(56,189,248,.10),0 8px 40px rgba(0,0,0,.7),0 0 60px rgba(56,189,248,.10); }

/* === HERO === */
.hero{ position:relative; z-index:1; scroll-margin-top:84px; }
.hero-inner{ position:relative; max-width:1040px; margin:0 auto; padding:160px 24px 90px; text-align:center; }
.hero-glow{ position:absolute; top:90px; left:50%; transform:translateX(-50%); width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(56,189,248,.22),transparent 65%); filter:blur(14px); pointer-events:none; }
.hero-logo-wrapper{ position:relative; display:inline-grid; place-items:center; margin-bottom:72px; }
.hero-ring-outer{ position:absolute; width:200px; height:200px; border:1px solid rgba(56,189,248,.18); border-radius:50%; animation:sm-spin 26s linear infinite; }
.hero-ring-inner{ position:absolute; width:150px; height:150px; border:1px dashed rgba(56,189,248,.22); border-radius:50%; animation:sm-spin 18s linear infinite reverse; }
.hero-logo{ display:block; filter:brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(165deg) brightness(1.4) drop-shadow(0 0 22px rgba(56,189,248,.5)); animation:sm-float 6s ease-in-out infinite; }
.hero-tag{ font-family:ui-monospace,Menlo,monospace; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#38BDF8; margin-bottom:20px; }
.hero-title{ margin:0 auto; max-width:880px; font-size:62px; line-height:1.04; font-weight:700; letter-spacing:-.02em; color:#fff; text-wrap:balance; }
.accent{ color:#38BDF8; }
.hero-subtitle{ margin:26px auto 0; max-width:600px; font-size:18px; line-height:1.6; color:#A8C4D8; }
.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px; }
.btn-primary{ padding:15px 30px; border-radius:11px; font-size:15px; font-weight:600; color:#041527; background:#38BDF8; text-decoration:none; box-shadow:0 0 28px rgba(56,189,248,.35); transition:background 150ms ease,box-shadow 150ms ease; }
.btn-primary:hover{ background:#0270A0; }
.btn-secondary{ padding:15px 30px; border-radius:11px; font-size:15px; font-weight:600; color:#A8C4D8; background:transparent; border:1px solid #1A2D40; text-decoration:none; transition:border-color 150ms ease,color 150ms ease; }
.btn-secondary:hover{ border-color:#38BDF8; color:#fff; }

/* === TERMINAL === */
.terminal{ margin:64px auto 0; max-width:760px; text-align:left; background:#050A10; border:1px solid #1A2D40; border-radius:14px; overflow:hidden; box-shadow:0 30px 80px -30px rgba(0,0,0,.8); }
.terminal-bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; background:#091528; border-bottom:1px solid #1A2D40; }
.terminal-dot{ width:11px; height:11px; border-radius:50%; }
.terminal-dot--red{ background:#F87171; }
.terminal-dot--gray{ background:#A8C4D8; }
.terminal-dot--blue{ background:#38BDF8; }
.terminal-title{ margin-left:10px; font-family:ui-monospace,monospace; font-size:12px; color:#8AA0B8; }
.terminal-body{ padding:18px 20px; font-family:ui-monospace,Menlo,monospace; font-size:13px; line-height:1.9; color:#8AA0B8; }
.t-blue{ color:#38BDF8; }
.t-light{ color:#A8C4D8; }
.t-white{ color:#fff; }

/* === REVEAL === */
[data-reveal]{ opacity:0; }
@media (prefers-reduced-motion: no-preference){ [data-reveal]{ transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; } }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* === SECTIONS === */
.section{ position:relative; z-index:1; margin:0 auto; padding:80px 32px; scroll-margin-top:84px; }
.section--services{ max-width:1200px; }
.section--portfolio{ max-width:1200px; }
.section--plans{ max-width:1140px; }
.section--faq{ max-width:820px; }
.section--contact{ max-width:1140px; padding-bottom:100px; }
.section-header{ text-align:center; max-width:640px; margin:0 auto 52px; }
.section-header--plans{ margin-bottom:36px; }
.section-header--faq{ max-width:none; margin-bottom:44px; }
.section-tag{ font-family:ui-monospace,monospace; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#38BDF8; margin-bottom:14px; }
.section-heading{ margin:0; font-size:42px; line-height:1.1; font-weight:700; letter-spacing:-.02em; color:#fff; }
.section-subheading{ margin:16px auto 0; font-size:17px; color:#A8C4D8; }

/* === SERVICES === */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.service-card{ background:#091528; border:1px solid #1A2D40; border-radius:16px; padding:26px; transition:border-color 150ms ease,background 150ms ease; }
@media (prefers-reduced-motion: no-preference){ .service-card{ transition:opacity .7s ease,transform .7s ease,border-color 150ms ease,background 150ms ease; } }
.service-card:hover{ border-color:#1E3E5C; background:#0D1F33; }
@media (prefers-reduced-motion: no-preference) {
  .service-card.revealed{ transition:border-color 150ms ease,background 150ms ease,transform 200ms ease,box-shadow 200ms ease; }
  .service-card.revealed:hover{ transform:translateY(-5px); box-shadow:0 18px 40px -8px rgba(0,0,0,.55); }
}
.service-card-header{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.service-icon{ display:grid; place-items:center; width:48px; height:48px; border-radius:12px; background:rgba(56,189,248,.12); border:1px solid rgba(56,189,248,.28); flex-shrink:0; }
.icon-filter{ filter:brightness(0) invert(1); }
.service-title{ margin:0; font-size:18px; font-weight:600; color:#fff; }
.service-desc{ margin:10px 0 0; font-size:14px; line-height:1.6; color:#8AA0B8; }

/* === PORTFOLIO === */
.portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.portfolio-card{ background:#091528; border:1px solid #1A2D40; border-radius:16px; overflow:hidden; }
.portfolio-card:hover{ border-color:#1E3E5C; }
@media (prefers-reduced-motion: no-preference) {
  .portfolio-card.revealed{ transition:border-color 150ms ease,transform 200ms ease,box-shadow 200ms ease; }
  .portfolio-card.revealed:hover{ transform:translateY(-5px); border-color:#1E3E5C; box-shadow:0 18px 40px -8px rgba(0,0,0,.55); }
}
.portfolio-preview{ height:170px; background:#050A10; border-bottom:1px solid #1A2D40; padding:16px; }
.portfolio-info{ padding:18px 20px 36px; }
.portfolio-info-row{ display:flex; align-items:center; justify-content:space-between; }
.portfolio-title{ margin:0; font-size:17px; font-weight:600; color:#fff; }
.portfolio-badge{ font-size:11px; padding:4px 10px; border-radius:9999px; background:rgba(56,189,248,.1); border:1px solid rgba(56,189,248,.25); color:#38BDF8; }
.portfolio-badge--neutral{ background:rgba(168,196,216,.08); border-color:rgba(168,196,216,.2); color:#8AA0B8; }
.portfolio-badge--own{ background:rgba(52,211,153,.1); border-color:rgba(52,211,153,.3); color:#34D399; }
.portfolio-desc{ margin:8px 0 0; font-size:13px; color:#8AA0B8; }
.portfolio-soon{ display:inline-block; margin-top:32px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:9999px; background:rgba(250,204,21,.1); border:1px solid rgba(250,204,21,.35); color:#FACC15; }

/* portfolio mockups */
.pm-retail{ display:flex; flex-direction:column; gap:10px; }
.pm-retail-header{ display:flex; justify-content:space-between; align-items:center; }
.pm-retail-bar{ width:70px; height:8px; border-radius:5px; background:#1E3E5C; }
.pm-retail-btn{ width:40px; height:18px; border-radius:6px; background:rgba(56,189,248,.2); }
.pm-retail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; flex:1; }
.pm-card-dark{ border-radius:8px; background:#0D1F33; border:1px solid #1A2D40; }
.pm-card-accent{ border-radius:8px; background:rgba(56,189,248,.12); border:1px solid rgba(56,189,248,.25); }

.pm-dashboard{ display:flex; gap:10px; }
.pm-dashboard-sidebar{ width:34px; display:flex; flex-direction:column; gap:8px; }
.pm-dashboard-nav-active{ height:20px; border-radius:6px; background:rgba(56,189,248,.25); }
.pm-dashboard-nav-item{ height:20px; border-radius:6px; background:#1A2D40; }
.pm-dashboard-main{ flex:1; display:flex; flex-direction:column; gap:10px; }
.pm-dashboard-topbar{ height:36px; border-radius:8px; background:#0D1F33; border:1px solid #1A2D40; }
.pm-dashboard-chart{ flex:1; border-radius:8px; background:#091528; border:1px solid #1A2D40; display:flex; align-items:flex-end; gap:6px; padding:10px; }
.pm-bar{ flex:1; border-radius:3px 3px 0 0; }
.pm-bar--50{ height:50%; background:#1E3E5C; }
.pm-bar--80{ height:80%; background:#38BDF8; }
.pm-bar--35{ height:35%; background:#1A2D40; }
.pm-bar--65{ height:65%; background:#1E3E5C; }

.pm-qr{ display:flex; align-items:center; justify-content:center; }
.pm-qr-box{ width:96px; height:96px; border-radius:14px; background:#0D1F33; border:1px solid #1E3E5C; display:grid; place-items:center; }
.pm-qr-icon{ filter:brightness(0) invert(1); opacity:.85; }

.pm-corporate{ display:flex; flex-direction:column; gap:10px; }
.pm-corporate-hero{ height:46px; border-radius:8px; background:linear-gradient(90deg,#0D1F33,#091528); border:1px solid #1A2D40; }
.pm-corporate-body{ flex:1; display:flex; gap:8px; }
.pm-corporate-content{ flex:1; border-radius:8px; background:#0D1F33; border:1px solid #1A2D40; }
.pm-corporate-sidebar{ width:70px; border-radius:8px; background:rgba(56,189,248,.12); border:1px solid rgba(56,189,248,.25); }

.pm-fleet{ display:flex; flex-direction:column; gap:9px; }
.pm-fleet-header{ display:flex; gap:8px; align-items:center; }
.pm-fleet-icon{ width:26px; height:26px; border-radius:8px; background:rgba(56,189,248,.25); }
.pm-fleet-label{ width:80px; height:8px; border-radius:5px; background:#1E3E5C; }
.pm-fleet-row{ height:30px; border-radius:7px; background:#0D1F33; border:1px solid #1A2D40; }
.pm-fleet-row--active{ background:rgba(56,189,248,.1); border-color:rgba(56,189,248,.25); }

.pm-medical{ display:flex; gap:10px; align-items:stretch; }
.pm-medical-list{ flex:1; border-radius:8px; background:#0D1F33; border:1px solid #1A2D40; display:flex; flex-direction:column; gap:7px; padding:10px; }
.pm-medical-line{ height:7px; border-radius:4px; }
.pm-medical-line--60{ width:60%; background:#1E3E5C; }
.pm-medical-line--90{ width:90%; background:#1A2D40; }
.pm-medical-line--75{ width:75%; background:#1A2D40; }
.pm-medical-avatar{ width:64px; border-radius:8px; background:rgba(56,189,248,.12); border:1px solid rgba(56,189,248,.25); display:grid; place-items:center; }
.pm-medical-dot{ width:30px; height:30px; border-radius:50%; background:rgba(56,189,248,.3); }

/* === BILLING TOGGLE === */
.billing-toggle-wrap{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:44px; }
.billing-toggle{ display:flex; gap:14px; }
.billing-btn{ padding:9px 22px; border-radius:9999px; font-size:14px; font-weight:600; cursor:pointer; transition:background 150ms ease,color 150ms ease,border-color 150ms ease; }
.billing-btn--active{ background:#38BDF8; color:#041527; border:1px solid #38BDF8; }
.billing-btn--inactive{ background:transparent; color:#A8C4D8; border:1px solid #1A2D40; }
.billing-save-badge{ font-size:12px; font-weight:600; padding:5px 11px; border-radius:9999px; background:rgba(56,189,248,.12); border:1px solid rgba(56,189,248,.3); color:#38BDF8; }

/* === PLANS === */
.plans-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.plan-card{ background:#091528; border:1px solid #1A2D40; border-radius:18px; padding:30px; display:flex; flex-direction:column; box-shadow:0 0 40px -18px rgba(56,189,248,.2); }
.plan-features{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; flex:1; }
.plan-card--featured{ position:relative; background:linear-gradient(180deg,#091C30,#091528); border-color:#38BDF8; box-shadow:0 0 50px -12px rgba(56,189,248,.35); }
.plan-badge{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 14px; border-radius:9999px; background:#38BDF8; color:#041527; }
.plan-name{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:#A8C4D8; }
.plan-name--featured{ color:#38BDF8; }
.plan-desc{ margin:8px 0 22px; font-size:13px; color:#8AA0B8; }
.plan-price-strike{ font-size:14px; color:#8AA0B8; text-decoration:line-through; }
.plan-price-row{ display:flex; align-items:baseline; gap:6px; }
.plan-price-amount{ font-size:40px; font-weight:700; color:#fff; }
.plan-price-period{ font-size:14px; color:#8AA0B8; }
.plan-bill-note{ font-size:12px; color:#8AA0B8; margin-top:4px; }
.plan-cta-secondary{ display:block; text-align:center; margin:40px 0 24px; padding:13px; border-radius:11px; font-size:14px; font-weight:600; color:#A8C4D8; background:transparent; border:1px solid #1A2D40; text-decoration:none; transition:border-color 150ms ease,color 150ms ease; }
.plan-cta-secondary:hover{ border-color:#38BDF8; color:#fff; }
.plan-cta-primary{ display:block; text-align:center; margin:22px 0 24px; padding:13px; border-radius:11px; font-size:14px; font-weight:600; color:#041527; background:#38BDF8; text-decoration:none; box-shadow:0 0 24px rgba(56,189,248,.3); transition:background 150ms ease,box-shadow 150ms ease; }
.plan-cta-primary:hover{ background:#0270A0; }
.plan-feature{ display:flex; gap:10px; font-size:14px; color:#A8C4D8; }
.plan-feature--featured{ color:#fff; }
.plan-feature-check{ color:#38BDF8; }
.plan-note{ text-align:center; margin:26px 0 0; font-size:13px; color:#8AA0B8; }
.plan-note a{ color:#38BDF8; text-decoration:none; }
@media (prefers-reduced-motion: no-preference) {
  .plan-card:not(.plan-card--featured){ transition:border-color 200ms ease,box-shadow 200ms ease,opacity .7s ease,transform .7s ease; }
  .plan-card:not(.plan-card--featured):hover{ border-color:rgba(56,189,248,.3); box-shadow:0 0 40px -10px rgba(56,189,248,.15); }
}

/* === FAQ === */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:#091528; border:1px solid #1A2D40; border-radius:12px; padding:0 16px; }
.faq-summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; padding:7px 0; font-size:13px; font-weight:600; color:#fff; }
.faq-summary-icon{ color:#38BDF8; font-size:22px; line-height:1; display:inline-block; }
details[open] .faq-summary-icon{ transform:rotate(45deg); }
@media (prefers-reduced-motion: no-preference) { .faq-summary-icon{ transition:transform 200ms ease; } }
.faq-answer{ margin:0 0 18px; font-size:14px; line-height:1.7; color:#8AA0B8; }

/* === CONTACT === */
.contact-card{ background:linear-gradient(135deg,#091528,#070D1A); border:1px solid #1A2D40; border-radius:24px; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; }
.contact-info{ padding:48px; }
.contact-info-heading{ margin:0; font-size:36px; line-height:1.1; font-weight:700; letter-spacing:-.02em; color:#fff; }
.contact-info-text{ margin:16px 0 32px; font-size:16px; line-height:1.6; color:#A8C4D8; }
.contact-info-list{ display:flex; flex-direction:column; gap:18px; }
.contact-info-row{ display:flex; align-items:center; gap:14px; }
.contact-info-icon{ display:grid; place-items:center; width:42px; height:42px; border-radius:11px; background:rgba(56,189,248,.12); border:1px solid rgba(56,189,248,.28); }
.contact-info-label{ font-size:12px; color:#8AA0B8; }
.contact-info-value{ font-size:15px; color:#fff; }
.contact-form-wrap{ padding:48px; background:#050A10; border-left:1px solid #1A2D40; }
.form-success{ height:100%; min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; }
.form-success-icon{ display:grid; place-items:center; width:60px; height:60px; border-radius:16px; background:rgba(56,189,248,.12); border:1px solid rgba(56,189,248,.3); color:#38BDF8; font-size:30px; }
.form-success-title{ font-size:20px; font-weight:600; color:#fff; }
.form-success-text{ margin:0; font-size:14px; color:#8AA0B8; max-width:280px; }
.form{ display:flex; flex-direction:column; gap:16px; }
.form-label{ display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:#A8C4D8; margin-bottom:7px; }
.form-input,.form-textarea{ width:100%; padding:13px 14px; border-radius:10px; background:#070D1A; border:1px solid #1A2D40; color:#fff; font-size:14px; outline:2px solid transparent; transition:border-color 150ms ease; }
.form-textarea{ resize:vertical; font-family:inherit; }
.form-input:focus-visible,.form-textarea:focus-visible{ border-color:#38BDF8; outline:2px solid rgba(56,189,248,.35); outline-offset:2px; }
.form-submit{ margin-top:4px; padding:15px; border-radius:11px; font-size:15px; font-weight:600; color:#041527; background:#38BDF8; border:none; cursor:pointer; box-shadow:0 0 24px rgba(56,189,248,.3); transition:background 150ms ease,box-shadow 150ms ease; width:100%; }
.form-submit:hover{ background:#0270A0; }

/* === FOOTER === */
.footer{ position:relative; z-index:1; background:#050A10; border-top:1px solid #1A2D40; }
.footer-bar{ max-width:1100px; margin:0 auto; padding:16px 32px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; }
.footer-bar-brand{ justify-self:start; }
.footer-bar-copy{ justify-self:center; }
.footer-bar-contact{ justify-self:end; }
.footer-bar-brand{ display:flex; align-items:center; gap:8px; }
.footer-brand-icon{ display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:rgba(56,189,248,.10); border:1px solid rgba(56,189,248,.28); }
.footer-bar-copy{ font-size:13px; color:#fff; }
.footer-bar-contact{ font-size:13px; color:#fff; }

/* === STATS STRIP === */
.stats-strip{ position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:0 32px 72px; display:flex; align-items:center; justify-content:center; }
.stat-item{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:18px 40px; }
.stat-num{ font-size:34px; font-weight:700; color:#fff; letter-spacing:-.03em; line-height:1; }
.stat-label{ font-size:11px; color:#8AA0B8; text-transform:uppercase; letter-spacing:.12em; text-align:center; }
.stat-sep{ width:1px; height:44px; background:#1A2D40; flex-shrink:0; }

/* === SERVICES SPLIT LAYOUT === */
.services-split{ display:grid; grid-template-columns:280px 1fr; gap:64px; align-items:center; }
.services-split-lead{ }
.services-split-lead .section-heading{ font-size:36px; }
.services-lead-text{ margin:20px 0 0; font-size:15px; line-height:1.7; color:#8AA0B8; }
.services-split .services-grid{ grid-template-columns:repeat(2,1fr); }

/* === PORTFOLIO FEATURED LAYOUT === */
.portfolio-intro{ margin-bottom:32px; }
.portfolio-intro-text{ margin:14px 0 0; font-size:16px; color:#A8C4D8; }
.portfolio-grid{ grid-template-columns:1.35fr 1fr; grid-template-rows:auto auto; }
.portfolio-card--main{ grid-column:1; grid-row:1/3; display:flex; flex-direction:column; }
.portfolio-card--main .portfolio-preview{ flex:1; height:auto; min-height:220px; }

/* === PLANS INTRO === */
.plans-intro{ margin-bottom:44px; max-width:600px; }
.plans-intro-text{ margin:16px 0 0; font-size:16px; color:#A8C4D8; }

/* === CONTACT FAQ === */
.contact-faq{ margin-top:56px; max-width:820px; }
.contact-faq-heading{ margin:0 0 28px; font-size:22px; font-weight:600; color:#fff; }

/* === RESPONSIVE === */

.nav-mobile-links{ display:none; }
.nav-mobile-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; border-radius:9999px; border:1px solid rgba(56,189,248,.2); background:rgba(56,189,248,.08); cursor:pointer; padding:9px; flex-shrink:0; }
.nav-mobile-bar{ display:block; width:100%; height:2px; background:#A8C4D8; border-radius:2px; transition:transform 200ms ease,opacity 200ms ease; }
.nav-mobile-toggle--open .nav-mobile-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-mobile-toggle--open .nav-mobile-bar:nth-child(2){ opacity:0; }
.nav-mobile-toggle--open .nav-mobile-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:900px){
  .section{ padding:60px 24px; }
  .section-heading{ font-size:36px; }
  .hero-title{ font-size:48px; }
  .services-split{ grid-template-columns:1fr; gap:40px; }
  .services-split-lead{ position:static; }
  .services-split .services-grid{ grid-template-columns:repeat(2,1fr); }
  .portfolio-grid{ grid-template-columns:1fr; }
  .portfolio-card--main{ grid-column:auto; grid-row:auto; }
  .portfolio-card--main .portfolio-preview{ height:170px; }
  .portfolio-intro{ text-align:center; }
  .plans-grid{ grid-template-columns:1fr; max-width:480px; margin-left:auto; margin-right:auto; }
  .plans-intro{ text-align:center; max-width:100%; }
  .contact-card{ grid-template-columns:1fr; }
  .contact-form-wrap{ border-left:none; border-top:1px solid #1A2D40; }
  .footer-bar{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:16px 24px; }
  .footer-bar-contact{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

@media (max-width:640px){
  #portafolio-view .portfolio-grid{ grid-template-columns:1fr; }
  .nav{ top:12px; padding:6px 6px 6px 14px; max-width:calc(100% - 24px); }
  .nav-brand-name{ display:none; }
  .nav-mobile-links{ display:flex; flex:1; justify-content:center; gap:2px; }
  .nav-mobile-links .nav-link{ padding:6px 9px; font-size:11px; }
  .nav-mobile-toggle{ display:flex; }
  .nav-links{ display:flex; flex-direction:column; position:fixed; top:68px; left:50%; transform:translateX(-50%) translateY(-10px); background:rgba(7,13,26,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(56,189,248,.2); border-radius:20px; padding:10px; gap:2px; z-index:49; min-width:200px; box-shadow:0 8px 40px rgba(0,0,0,.7),0 0 40px rgba(56,189,248,.08); white-space:normal; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 220ms ease,transform 220ms ease,visibility 0ms linear 220ms; }
  .nav-links--open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); transition:opacity 220ms ease,transform 220ms ease,visibility 0ms; }
  .nav-link{ border-radius:12px; padding:12px 16px; font-size:14px; }
  .nav-cta{ margin-left:0; margin-top:4px; text-align:center; display:block; border-radius:12px; padding:12px 16px; }
  .hero-inner{ padding:120px 20px 60px; }
  .hero-title{ font-size:34px; }
  .hero-subtitle{ font-size:16px; }
  .hero-glow{ width:260px; height:260px; }
  .hero-ring-outer{ width:160px; height:160px; }
  .hero-ring-inner{ width:120px; height:120px; }
  .hero-logo{ width:80px; height:80px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .btn-primary,.btn-secondary{ text-align:center; }
  .section{ padding:48px 18px; }
  .section-heading{ font-size:28px; }
  .services-split{ gap:32px; }
  .services-split .services-grid{ grid-template-columns:1fr; }
  .plans-grid{ max-width:100%; }
  .plans-intro{ text-align:center; }
  .portfolio-intro{ text-align:center; }
  .contact-info{ padding:28px 22px; }
  .contact-info-heading{ font-size:26px; }
  .contact-form-wrap{ padding:28px 22px; }
  .footer-bar{ padding:14px 18px; }
  .footer-bar-contact{ display:none; }
  .footer-bar-brand .nav-brand-name{ display:inline; }
}

@media (max-width:640px) and (max-height:700px){
  .hero-inner{ padding:76px 16px 32px; }
  .hero-logo-wrapper{ margin-bottom:32px; }
  .hero-ring-outer{ width:120px; height:120px; }
  .hero-ring-inner{ width:90px; height:90px; }
  .hero-logo{ width:64px; height:64px; }
  .hero-subtitle{ margin-top:12px; }
  .hero-subtitle ~ .hero-subtitle{ display:none; }
  .hero-actions{ margin-top:20px; }
}

@media (max-width:400px){
  .hero-inner{ padding:96px 16px 48px; }
  .hero-logo-wrapper{ margin-bottom:52px; }
  .hero-title{ font-size:28px; }
  .hero-subtitle{ font-size:15px; }
  .section{ padding:40px 14px; }
  .section-heading{ font-size:22px; }
  .contact-info{ padding:20px 16px; }
  .contact-info-heading{ font-size:22px; }
  .contact-form-wrap{ padding:20px 16px; }
  .plan-card{ padding:22px 16px; }
  .footer-bar{ padding:12px 14px; }
  .footer-bar-copy{ font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .footer-bar-brand .nav-brand-name{ font-size:11px; letter-spacing:.1em; }
  .footer-brand-icon{ width:22px; height:22px; }
  .faq-callout{ padding:18px 16px; }
}

/* === WHATSAPP FAB === */
.whatsapp-fab{ position:fixed; bottom:80px; right:28px; z-index:999; width:58px; height:58px; background:#25D366; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,.5); transition:transform 200ms ease,box-shadow 200ms ease; text-decoration:none; }
.whatsapp-fab:hover{ transform:scale(1.1); box-shadow:0 6px 30px rgba(37,211,102,.7); }
.whatsapp-fab-tooltip{ position:absolute; right:68px; background:#091528; color:#fff; border:1px solid #1A2D40; padding:6px 12px; border-radius:8px; font-size:13px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 200ms ease; }
.whatsapp-fab:hover .whatsapp-fab-tooltip{ opacity:1; }