@font-face{font-family:Manrope;src:url('assets/manrope-regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Manrope;src:url('assets/manrope-bold.ttf') format('truetype');font-weight:700;font-display:swap}@font-face{font-family:Space;src:url('assets/space-grotesk-bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--ink:#121215;--paper:#f6f6f2;--blue:#2772ff;--line:#dcdcd7;--muted:#68686f;--dark:#0c0c0e}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif;font-size:17px;line-height:1.65}body:has(dialog[open]){overflow:hidden}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{color:inherit}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:Space,Arial,sans-serif;font-weight:700;line-height:1.05;letter-spacing:-.05em}p+p{margin-top:18px}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--blue);outline-offset:5px}.wrap{width:min(1280px,calc(100% - 96px));margin:auto}.mono{font-family:Consolas,'Courier New',monospace;font-size:14px;letter-spacing:.07em}.blue{color:var(--blue)}.muted{color:#9b9ba4}.section{padding-top:110px;padding-bottom:110px}.section-code{display:block;color:var(--muted);margin-bottom:25px}.skip{position:fixed;top:-100px;background:var(--blue);color:white;padding:12px;z-index:100}.skip:focus{top:8px}
.header{height:84px;position:absolute;top:0;left:0;width:100%;display:flex;align-items:center;gap:35px;padding:0 48px;z-index:10;color:white;border-bottom:1px solid #ffffff16}.brand{margin-right:auto;width:132px}.brand img,.footer-brand img{width:132px;height:51px;object-fit:contain}.header nav{display:flex;gap:30px;align-items:center;font-size:16px}.nav-contact{border:1px solid #ffffff36;padding:8px 18px;border-radius:30px}.motion-button{background:transparent;border:0;color:#a0a0aa;font:14px Consolas,monospace}.motion-button span{color:#fff;margin-left:6px}.hero{background:var(--dark);color:#fff;overflow:hidden;padding-top:118px}.hero-top{display:flex;justify-content:space-between;align-items:center}.eyebrow{font:14px Consolas,monospace;letter-spacing:.12em}.eyebrow i{display:inline-block;width:6px;height:6px;background:var(--blue);border-radius:50%;margin-right:10px;box-shadow:0 0 18px var(--blue)}.hero-location{color:#888891}.hero-stage{height:480px;position:relative;margin-top:55px}.hero-kicker{position:absolute;left:50%;top:-10px;transform:translateX(-50%);font-family:Consolas,monospace;font-size:14px;letter-spacing:.25em;white-space:nowrap;color:#93c5fd;z-index:2}.hero-word{font-family:Space,Arial,sans-serif;position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none;font-weight:700;line-height:1}.word-back{top:20px;font-size:clamp(46px,5.8vw,84px);letter-spacing:-.04em;color:#ffffff;-webkit-text-stroke:0;z-index:2;text-shadow:0 4px 25px rgba(0,0,0,0.8)}.portrait{position:absolute;width:280px;height:345px;left:50%;top:110px;transform:translateX(-50%);border-radius:175px 175px 10px 10px;overflow:hidden;z-index:1;mask-image:linear-gradient(#000 70%,transparent 100%)}.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 17%;filter:grayscale(1) contrast(1.12)}.portrait:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 60%,var(--dark))}.portrait-destello{position:absolute;width:280px;height:345px;left:50%;top:110px;transform:translateX(-50%);pointer-events:none;z-index:1;overflow:visible}.word-front{top:380px;font-size:clamp(50px,6.4vw,90px);letter-spacing:-.05em;color:#ffffff;z-index:2;text-shadow:0 4px 20px rgba(0,0,0,0.9)}.destello-track{stroke:rgba(56,189,248,0.22);stroke-width:1.5px;stroke-linecap:round;mask-image:linear-gradient(180deg,#fff 15%,#fff 65%,transparent 95%);-webkit-mask-image:linear-gradient(180deg,#fff 15%,#fff 65%,transparent 95%)}.destello-ambient{stroke:rgba(56,189,248,0.45);stroke-width:8px;stroke-linecap:round;filter:blur(6px);stroke-dasharray:180 920;stroke-dashoffset:920;animation:destelloSweep 3.6s cubic-bezier(.4,0,.2,1) infinite;mask-image:linear-gradient(180deg,#fff 10%,#fff 70%,transparent 95%);-webkit-mask-image:linear-gradient(180deg,#fff 10%,#fff 70%,transparent 95%)}.destello-beam{stroke:#ffffff;stroke-width:3.2px;stroke-linecap:round;stroke-dasharray:140 920;stroke-dashoffset:920;filter:drop-shadow(0 0 5px #ffffff) drop-shadow(0 0 12px #38bdf8) drop-shadow(0 0 24px #2563eb);animation:destelloSweep 3.6s cubic-bezier(.4,0,.2,1) infinite;mask-image:linear-gradient(180deg,#fff 10%,#fff 70%,transparent 95%);-webkit-mask-image:linear-gradient(180deg,#fff 10%,#fff 70%,transparent 95%)}@keyframes destelloSweep{0%{stroke-dashoffset:920;opacity:0}8%{opacity:1}68%{stroke-dashoffset:-160;opacity:1}78%,100%{stroke-dashoffset:-160;opacity:0}}.no-motion .destello-beam,.no-motion .destello-ambient{animation:none;stroke-dashoffset:380;opacity:.6}.portrait-tag{position:absolute;right:9%;top:210px;transform:rotate(90deg);color:#97979f}.orbit{position:absolute;left:10%;top:245px;width:70px;height:70px;border:1px solid #ffffff30;border-radius:50%;display:grid;place-items:center;font:22px Consolas;color:var(--blue);transform:rotate(-18deg)}.hero-bottom{display:grid;grid-template-columns:1fr 1fr;gap:90px;position:relative;margin-top:-25px;padding-bottom:65px;z-index:3}.hero-bottom h1{font-size:clamp(30px,3.5vw,48px)}.hero-bottom .section-code{color:#9999a3;margin-bottom:18px}.hero-copy>p:first-child{font-size:18px;line-height:1.6;max-width:510px}.hero-copy .muted{font-size:16px;max-width:500px;margin-top:12px}.hero-actions{display:flex;align-items:center;gap:30px;margin-top:28px}.button{display:inline-flex;justify-content:space-between;gap:35px;align-items:center;border:0;border-radius:6px;padding:15px 20px;font-size:16px;font-weight:700;transition:background .2s,transform .2s}.primary{background:var(--blue);color:#fff}.primary:hover{background:#135be6;transform:translateY(-3px)}.text-link{font-size:16px;border-bottom:1px solid #ffffff50;padding-bottom:6px;display:inline-block}.hero-footer{display:flex;justify-content:space-between;color:#767681;border-top:1px solid #ffffff1c;padding:20px 0 110px;font-size:14px}
/* Demo interactiva inspirada en Reeixit One */
.demo-scroll-section{position:relative;background:#f3f5f8;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;padding:80px 0}
.demo-scroll-pin{width:100%}
.demo-label{display:flex;justify-content:space-between;align-items:center;color:#64748b;font-size:13px;margin-bottom:20px}
.demo-step-indicators{display:flex;gap:8px}
.step-pill{font-size:12px;font-family:Consolas,monospace;padding:4px 10px;border-radius:20px;background:#e2e8f0;color:#64748b;transition:all .3s}
.step-pill.is-active{background:#2563eb;color:#fff;font-weight:700;box-shadow:0 4px 12px #2563eb30}
.workspace{background:#fff;position:relative;border:1px solid #cbd5e1;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(15,23,42,0.12);transition:transform .4s ease,box-shadow .4s ease}
.window-bar{height:46px;background:#0f172a;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;border-bottom:1px solid #1e293b;color:#94a3b8}
.traffic{display:flex;gap:6px}
.traffic i{height:8px;width:8px;background:#475569;border-radius:50%}
.traffic i:nth-child(1){background:#ef4444}
.traffic i:nth-child(2){background:#f59e0b}
.traffic i:nth-child(3){background:#10b981}
.window-address{display:flex;align-items:center;gap:8px;background:#1e293b;padding:4px 14px;border-radius:6px;font-size:12px;color:#cbd5e1}
.window-actions{display:flex;align-items:center;gap:10px}
.live-pulse{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-family:Consolas,monospace;color:#10b981;background:#064e3b40;padding:2px 8px;border-radius:12px;border:1px solid #10b98140}
.live-pulse i{width:6px;height:6px;border-radius:50%;background:#10b981;animation:pulseLive 1.5s infinite}
@keyframes pulseLive{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.2)}}
.demo-badge{font:12px Consolas,monospace;color:#60a5fa;border:1px solid #3b82f640;border-radius:20px;padding:2px 9px}

/* Layout Reeixit One */
.workspace-body.rone-theme{display:grid;grid-template-columns:220px 1fr;min-height:580px;background:#f8fafc}
.rone-sidebar{background:#0b1329;color:#e2e8f0;padding:22px 14px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid #1e293b}
.rone-brand{display:flex;align-items:center;gap:10px;padding-bottom:18px;border-bottom:1px solid #1e293b;margin-bottom:16px}
.brand-avatar{width:34px;height:34px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;font:700 13px Space,sans-serif;display:grid;place-items:center;border-radius:8px}
.brand-text strong{display:block;font-size:13px;letter-spacing:.03em;color:#fff}
.brand-text small{display:block;font-size:11px;color:#94a3b8}
.rone-nav-header{display:block;font-size:10px;font-family:Consolas,monospace;color:#64748b;letter-spacing:.08em;margin:16px 8px 6px}
.rone-nav{display:flex;flex-direction:column;gap:4px}
.rone-nav-item{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:#94a3b8;font-size:13px;padding:9px 12px;border-radius:6px;text-align:left;transition:all .2s;cursor:pointer}
.rone-nav-item svg{width:16px;height:16px;flex-shrink:0}
.rone-nav-item:hover{background:#1e293b;color:#f8fafc}
.rone-nav-item.is-active{background:linear-gradient(90deg,#2563eb,#1d4ed8);color:#fff;font-weight:600;box-shadow:0 4px 12px #2563eb35}
.badge-count{margin-left:auto;background:#7c3aed;color:#fff;font-size:10px;font-family:Consolas,monospace;padding:1px 6px;border-radius:10px}
.sidebar-system-status{display:flex;align-items:center;gap:8px;padding:12px 10px;background:#060f24;border-radius:8px;border:1px solid #1e293b}
.status-indicator.online{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 10px #10b981}
.status-info strong{display:block;font-size:11px;color:#e2e8f0}
.status-info small{display:block;font-size:10px;color:#64748b}

/* Main Panel */
.rone-main{padding:26px 30px;min-width:0;overflow-y:auto}
.rone-topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px;border-bottom:2px solid #e2e8f0;padding-bottom:14px}
.rone-topbar h2{font-size:24px;letter-spacing:-.03em;color:#0f172a;margin-top:2px}
.rone-subtitle{font-size:13px;color:#64748b;margin-top:2px}
.rone-topbar-actions{display:flex;gap:10px}
.action-btn{display:inline-flex;align-items:center;gap:7px;border-radius:6px;padding:8px 14px;font-size:13px;font-weight:600;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s}
.action-btn.primary{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;box-shadow:0 4px 12px #2563eb30}
.action-btn.primary:hover{transform:translateY(-2px)}
.action-btn.outline{border:1px solid #cbd5e1;background:#fff;color:#0284c7}
.action-btn.outline:hover{background:#f0f9ff}

/* KPIs con gradientes reales de Reeixit One */
.rone-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.rone-kpi-card{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,0.03);transition:transform .2s,box-shadow .2s}
.rone-kpi-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.06)}
.kpi-blue{background:linear-gradient(135deg,#eef2ff,#dbeafe);border-top:3px solid #2563eb}
.kpi-amber{background:linear-gradient(135deg,#fffbeb,#fef3c7);border-top:3px solid #d97706}
.kpi-purple{background:linear-gradient(135deg,#f3e8ff,#ede9fe);border-top:3px solid #7c3aed}
.kpi-emerald{background:linear-gradient(135deg,#ecfdf3,#d1fae5);border-top:3px solid #059669}
.kpi-label{font-size:10px;font-weight:700;letter-spacing:.05em;color:#64748b}
.kpi-value{display:block;font-family:Space,sans-serif;font-size:28px;line-height:1.2;margin:4px 0 2px}
.kpi-blue .kpi-value{color:#1d4ed8}
.kpi-amber .kpi-value{color:#b45309}
.kpi-purple .kpi-value{color:#6d28d9}
.kpi-emerald .kpi-value{color:#047857}
.kpi-meta{font-size:11px;color:#64748b}
.kpi-icon svg{width:36px;height:36px;opacity:.75}
.kpi-blue .kpi-icon svg{stroke:#2563eb}
.kpi-amber .kpi-icon svg{stroke:#d97706}
.kpi-purple .kpi-icon svg{stroke:#7c3aed}
.kpi-emerald .kpi-icon svg{stroke:#059669}

/* Caja Diaria de Reeixit One */
.rone-caja-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:18px 20px;margin-bottom:22px;box-shadow:0 4px 15px rgba(0,0,0,0.02)}
.caja-card-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid #f1f5f9;margin-bottom:14px}
.caja-title{display:flex;align-items:center;gap:8px;font-size:14px;color:#0f172a}
.caja-live-badge{font-size:11px;color:#0284c7;background:#e0f2fe;padding:2px 8px;border-radius:12px;font-weight:600}
.caja-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.caja-metric-box{padding:12px 14px;border-radius:8px}
.caja-metric-box span{display:block;font-size:11px;font-weight:600;margin-bottom:3px}
.caja-metric-box strong{font-family:Space,sans-serif;font-size:18px}
.metric-green{background:linear-gradient(135deg,#ecfdf3,#d1fae5);border-left:4px solid #059669;color:#047857}
.metric-red{background:linear-gradient(135deg,#fef2f2,#fee2e2);border-left:4px solid #dc2626;color:#b91c1c}
.metric-balance{background:linear-gradient(135deg,#eef2ff,#e0e7ff);border-left:4px solid #4f46e5;color:#3730a3}

/* Tablas y Rows */
.rone-table{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}
.rone-table thead{background:#f8fafc;color:#64748b;text-align:left}
.rone-table th{padding:10px 12px;font-weight:600;font-size:11px;letter-spacing:.04em;border-bottom:1px solid #e2e8f0}
.rone-table td{padding:10px 12px;border-bottom:1px solid #f1f5f9;color:#334155}
.badge-ingreso{background:#dcfce7;color:#15803d;padding:2px 7px;border-radius:4px;font-size:11px;font-weight:600}
.text-green{color:#059669;font-weight:600}
.text-right{text-align:right}
.highlight-row{background:#f8fbff}
.status-ot{background:#ede9fe;color:#7c3aed;padding:2px 7px;border-radius:4px;font-size:11px;font-weight:600}
.status-aprobado{background:#d1fae5;color:#047857;padding:2px 7px;border-radius:4px;font-size:11px;font-weight:600}
.status-pendiente{background:#fef3c7;color:#b45309;padding:2px 7px;border-radius:4px;font-size:11px;font-weight:600}

/* Split Columns */
.rone-split-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.split-col{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:18px 20px}
.split-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;border-bottom:1px solid #f1f5f9;padding-bottom:10px}
.split-header h3{font-size:14px;letter-spacing:-.02em;color:#0f172a}
.progress-list{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.progress-labels{display:flex;justify-content:space-between;font-size:12px;color:#475569;margin-bottom:4px}
.bar-container{height:6px;background:#e2e8f0;border-radius:10px;overflow:hidden}
.bar{height:100%;border-radius:10px}
.bar-purple{background:#7c3aed}
.bar-green{background:#059669}
.bar-amber{background:#d97706}
.toast-event-card{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;font-size:12px;color:#334155}
.toast-dot{width:8px;height:8px;border-radius:50%;background:#2563eb;margin-top:4px;flex-shrink:0}
.toast-content strong{display:block;color:#0f172a;margin-bottom:2px}
.demo-caption{display:flex;justify-content:space-between;gap:25px;margin-top:25px}
.demo-caption p:first-child{font-weight:700;font-size:16px;color:#0f172a}
.demo-caption p:last-child{font-size:14px;color:var(--muted);max-width:540px;margin:0}

@media(max-width:1050px){
  .rone-kpi-grid{grid-template-columns:repeat(2,1fr)}
  .rone-split-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .workspace-body.rone-theme{display:flex!important;flex-direction:column!important;min-height:auto!important}
  .rone-sidebar{padding:12px 14px!important;border-right:0!important;border-bottom:1px solid #1e293b!important;background:#0b1329!important}
  .rone-brand{margin-bottom:8px!important;padding-bottom:8px!important;display:flex!important;justify-content:space-between!important;align-items:center!important}
  .mobile-live-tag{font-size:10px;color:#10b981;font-weight:700;font-family:Consolas,monospace;background:#064e3b40;padding:2px 8px;border-radius:10px;border:1px solid #10b98140}
  .rone-nav-header,.sidebar-system-status{display:none!important}
  .rone-nav{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:8px!important;padding:4px 2px 8px!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important}
  .rone-nav::-webkit-scrollbar{display:none!important}
  .rone-nav-item{width:auto!important;max-width:none!important;flex:0 0 auto!important;white-space:nowrap!important;padding:8px 12px!important;font-size:12px!important;border-radius:8px!important;display:inline-flex!important;align-items:center!important;gap:6px!important;background:rgba(255,255,255,0.08)!important;border:1px solid rgba(255,255,255,0.12)!important;color:#cbd5e1!important}
  .rone-nav-item.is-active{background:#2563eb!important;color:#fff!important;border-color:#3b82f6!important;font-weight:600!important;box-shadow:0 4px 12px rgba(37,99,235,0.35)!important}
  .rone-nav-item svg{width:15px!important;height:15px!important;min-width:15px!important;min-height:15px!important;flex-shrink:0!important}
  .rone-main{padding:14px 12px!important;max-height:500px!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important}
  .rone-topbar{flex-direction:column!important;align-items:stretch!important;gap:10px!important;margin-bottom:14px!important;padding-bottom:10px!important}
  #demo-title{font-size:20px!important}
  .rone-subtitle{font-size:12px!important}
  .rone-topbar-actions{display:flex!important;width:100%!important;gap:8px!important}
  .rone-topbar-actions .action-btn{flex:1!important;justify-content:center!important;padding:8px 12px!important;font-size:12px!important}
  .rone-kpi-grid{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:8px!important;margin-bottom:14px!important}
  .rone-kpi-card{padding:10px 12px!important;min-height:72px!important}
  .kpi-label{font-size:9px!important;letter-spacing:0.04em!important}
  .kpi-value{font-size:20px!important;margin:2px 0!important;line-height:1.1!important}
  .kpi-meta{font-size:10px!important}
  .kpi-icon svg{width:22px!important;height:22px!important}
  .caja-summary-grid{grid-template-columns:1fr!important;gap:8px!important}
  .agenda-cards-grid{grid-template-columns:1fr!important}
  .rone-table th, .rone-table td{padding:8px 10px!important;font-size:12px!important}
  .window-address{font-size:11px;padding:3px 8px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:480px){
  .window-bar{padding:0 10px}
  .window-address{display:none}
}


/* Filtros, tablas completas y vistas adicionales de Reeixit One */
.rone-view-content{animation:fadeInView .25s ease-out}
@keyframes fadeInView{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.rone-filter-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.rone-input-search{flex:1;min-width:220px;padding:9px 14px;border:1px solid #cbd5e1;border-radius:6px;font-size:13px;outline:none;background:#fff;color:#1e293b;transition:border-color .2s,box-shadow .2s}
.rone-input-search:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,0.12)}
.filter-pills{display:flex;gap:6px}
.filter-pill{background:#fff;border:1px solid #cbd5e1;color:#64748b;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}
.filter-pill.is-active,.filter-pill:hover{background:#2563eb;color:#fff;border-color:#2563eb}
.row-btn{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;padding:4px 10px;border-radius:5px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s}
.row-btn:hover{background:#2563eb;color:#fff}
.agenda-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.agenda-day-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.02)}
.agenda-day-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:12px;font-weight:700;letter-spacing:.04em}
.agenda-day-header.today{background:#eff6ff;color:#1d4ed8;border-bottom:1px solid #dbeafe}
.agenda-day-header.tomorrow{background:#f8fafc;color:#475569;border-bottom:1px solid #e2e8f0}
.badge-day{background:#fff;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.agenda-event-item{padding:14px 16px;border-bottom:1px solid #f1f5f9}
.agenda-event-item:last-child{border-bottom:none}
.event-time{font-size:11px;color:#2563eb;font-weight:700;margin-bottom:4px}
.agenda-event-item strong{display:block;font-size:13px;color:#0f172a;margin-bottom:2px}
.agenda-event-item p{margin:0 0 6px;font-size:12px;color:#64748b}
.event-tech{font-size:11px;color:#64748b}
.text-muted{color:#64748b}
.fw-bold{font-weight:700}
@media(max-width:768px){
  .agenda-cards-grid{grid-template-columns:1fr}
}


.projects{background:#eaeae6}.project-toolbar{display:flex;justify-content:space-between;align-items:center;margin:45px 0 30px}.filters{display:flex;gap:8px}.filters button{border:1px solid #cdcdc7;background:transparent;border-radius:30px;font-size:14px;padding:9px 17px}.filters button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}.filters button span{font:14px Consolas;margin-left:12px;color:#949499}.filter-count{font-size:14px;color:#87878a}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 26px}.project-card{padding:0;border:0;background:transparent;text-align:left;width:100%;display:flex;flex-direction:column;align-items:stretch}.project-card[hidden]{display:none}.project-image{position:relative;width:100%;flex-shrink:0;aspect-ratio:1.6;overflow:hidden;background:#0c0c0e;border-radius:8px}.project-image>img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s}.project-card:hover .project-image>img{transform:scale(1.045)}.project-open{position:absolute;right:18px;bottom:18px;width:36px;height:36px;border-radius:50%;background:#fff;color:#131313;display:grid;place-items:center;font-size:23px;transition:transform .3s}.project-card:hover .project-open{transform:rotate(45deg);background:var(--blue);color:white}.project-meta{padding:16px 0 0}.project-meta>.mono{color:#73737b;font-size:14px}.project-title{font-size:26px;line-height:1.15;min-height:2.3em;margin:0 0 16px}.project-meta p{font-size:15px;color:var(--muted);margin-top:8px}.conceptual{background:#18181e;color:#fff;padding:30px}.concept-top{display:flex;justify-content:space-between;font-size:14px;color:#a6a6b0}.concept-title{font:700 clamp(24px,3.2vw,45px)/1.05 Space;letter-spacing:-.05em;margin-top:30px;position:relative}.concept-title>span{position:absolute;right:0;top:0;font-size:70px;color:var(--blue)}.concept-flow{display:flex;gap:10px;align-items:center;margin-top:30px;font-size:14px}.concept-flow span{border:1px solid #ffffff25;border-radius:6px;padding:8px 10px}.concept-flow i{font-style:normal;color:#5d5d67}.concept-label{position:absolute;bottom:20px;font-size:14px;color:#737380}.sports{background:#e1e9fa;color:#152445}.sports .concept-top,.sports .concept-label{color:#677894}.sports .concept-flow span{border-color:#15244525}.project-footnote{font-size:14px;color:#848489;margin-top:40px;max-width:700px}.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:100px}.about h2{font-size:clamp(40px,5vw,68px)}.about p{color:var(--muted);font-size:17px}.about .large-copy{color:var(--ink);font-size:23px;line-height:1.4;max-width:370px;margin-bottom:25px}.dark-link{border-color:#999;color:var(--ink);margin-top:28px}
footer{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:35px 0;border-top:1px solid #ffffff18;margin-top:100px}footer .mono{font-size:14px;color:#71717c}.whatsapp-float{position:fixed;bottom:24px;right:24px;display:flex;gap:12px;align-items:center;z-index:30;background:#2772ff;color:#fff;border:1px solid #ffffff40;box-shadow:0 8px 30px #0003;border-radius:35px;padding:12px 19px;font-size:15px}.whatsapp-float svg{width:21px;height:21px}.whatsapp-float:hover{background:#1459df}dialog{width:min(760px,calc(100% - 32px));max-height:90vh;border:0;background:var(--paper);color:var(--ink);border-radius:14px;padding:0;overflow-y:auto;box-shadow:0 30px 90px #0006}dialog::backdrop{background:#08080dda;backdrop-filter:blur(7px)}.dialog-close{position:absolute;right:14px;top:14px;border:0;background:#fff;color:#131313;border-radius:50%;width:38px;height:38px;font-size:25px;z-index:2}.dialog-image{width:100%;aspect-ratio:1.65;object-fit:cover;object-position:top}.dialog-body{padding:35px}.dialog-body h2{font-size:37px;margin-top:12px}.dialog-body p{color:var(--muted);margin-top:20px;font-size:17px}.dialog-body .button{margin-top:25px}.dialog-concept{padding:60px 35px;background:#14141a;color:white;font:700 48px/1.1 Space;letter-spacing:-.04em}.dialog-body .mono{color:var(--blue)}.table-scroll{overflow-x:auto}.empty-row td{text-align:center;color:#888;padding:25px}.row-button{border:0;background:transparent;color:var(--blue);padding:0;font:inherit}.no-motion *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
@media(min-width:1500px){.hero-stage{height:510px}.word-back{top:24px;font-size:88px}.portrait,.portrait-destello{top:120px;width:300px;height:360px}.word-front{top:405px;font-size:94px}}
@media(max-width:1000px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wrap{width:calc(100% - 56px)}.header{padding:0 28px}.hero-stage{height:440px;margin-top:50px}.hero-kicker{top:-6px;font-size:13px}.word-back{top:18px;font-size:clamp(38px,5.5vw,64px)}.portrait,.portrait-destello{top:92px;width:240px;height:295px}.word-front{top:335px;font-size:clamp(42px,6.2vw,70px)}.portrait-tag{right:0;top:180px}.orbit{left:2%;top:200px;width:50px;height:50px}.hero-bottom{gap:40px;margin-top:0}.hero-copy>p:first-child{font-size:16px}.hero-actions{gap:18px}.hero-actions .button{gap:15px;padding:13px;font-size:15px}.section-heading,.about-grid{gap:40px}.section{padding-top:80px;padding-bottom:80px}.workspace-body{grid-template-columns:155px 1fr}.demo-main{padding:24px}.conceptual{padding:22px}.concept-title{margin-top:22px}.concept-flow{margin-top:20px;gap:6px}.concept-flow span{padding:6px}.concept-title>span{font-size:50px}footer .mono:nth-child(2){max-width:200px}}
@media(max-width:700px){.wrap{width:calc(100% - 36px)}.header{height:72px;padding:0 18px;gap:14px}.brand{width:110px}.brand img{width:110px;height:42px}.header nav{gap:14px;font-size:14px}.header nav>a:first-child{display:none}.nav-contact{padding:6px 10px}.motion-button{position:absolute;right:18px;top:84px;font-size:14px}.hero{padding-top:110px}.hero-top .eyebrow{font-size:14px}.hero-location{display:none}.hero-stage{height:300px;margin-top:45px}.hero-word{font-size:17vw}.word-back{top:10px}.word-front{top:190px}.portrait,.portrait-destello{width:215px;height:275px}.portrait-tag{font-size:14px;right:-32px;top:130px}.orbit{width:40px;height:40px;top:155px;left:0;font-size:16px}.hero-bottom{grid-template-columns:1fr;gap:22px;margin-top:12px;padding-bottom:40px}.hero-bottom h1{font-size:34px;line-height:1.1}.section-code{font-size:14px}.hero-copy>p:first-child{font-size:17px}.hero-copy .muted{font-size:15px}.hero-actions .button{padding:14px 17px;font-size:15px;gap:22px}.text-link{font-size:14px}.hero-footer{font-size:14px;padding-bottom:95px}.hero-footer span{max-width:140px}.demo-label{font-size:14px}.demo-label .mono{font-size:14px}.window-bar{padding:0 10px;gap:8px}.window-bar>.mono{font-size:14px;letter-spacing:0}.demo-badge{font-size:14px;padding:3px 5px}.workspace-body{display:block}.demo-sidebar{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-right:0;border-bottom:1px solid #eee}.demo-logo{font-size:14px;margin:0;gap:5px}.demo-logo>span{font-size:15px;padding:2px 5px}.demo-tabs{display:flex;gap:3px}.demo-tabs button{padding:6px 7px;font-size:14px;gap:4px}.sidebar-note{display:none}.demo-main{padding:20px 14px}.demo-heading h2{font-size:23px}.demo-stats{gap:5px}.stat{padding:9px 8px}.stat small{font-size:14px}.stat strong{font-size:20px}.stat em{display:none}.search input{width:115px}.table-head h3{font-size:14px}th,td{padding:10px 8px;font-size:14px}.demo-caption{display:block}.demo-caption p:last-child{margin-top:8px;font-size:14px}.section{padding-top:65px;padding-bottom:65px}.demo-section{padding-bottom:0}.section-heading{display:block}.section-heading h2,.about h2{font-size:42px}.section-heading>p{margin-top:25px;font-size:16px}.service-list{margin-top:35px}.service-row{grid-template-columns:30px 1fr 35px;padding:26px 0}.service-row h3{font-size:27px;letter-spacing:-.04em}.service-row p{font-size:15px;max-width:270px}.service-tags{font-size:14px;letter-spacing:0}.service-arrow{font-size:28px}.service-index{font-size:14px}.project-toolbar{margin-top:30px}.filters button{font-size:14px;padding:8px 12px}.filter-count{font-size:14px}.project-grid{grid-template-columns:1fr;gap:30px}.project-image{aspect-ratio:1.55}.project-meta{padding-top:15px}.project-title{font-size:25px;min-height:0;margin-bottom:14px}.conceptual{padding:24px}.concept-title{font-size:37px;margin-top:25px}.concept-title>span{font-size:60px}.concept-flow{margin-top:22px}.concept-label{font-size:14px}.about-grid{grid-template-columns:1fr;gap:30px}.about .large-copy{font-size:23px}.about p{font-size:16px}footer{margin-top:55px;flex-wrap:wrap;gap:15px;padding:25px 0 90px}footer .mono:nth-child(2){order:3;max-width:100%;font-size:14px}.footer-brand img{width:110px;height:40px}.whatsapp-float{bottom:15px;right:15px;padding:10px 15px;font-size:14px}.dialog-body{padding:25px}.dialog-body h2{font-size:31px}.dialog-body p{font-size:16px}.dialog-concept{font-size:38px;padding:55px 25px}.dialog-image{aspect-ratio:1.35}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Mensaje completo en portada */
.hero-bottom h1{font-size:clamp(30px,3.3vw,46px)}
/* ========================================================
   SECCIÓN 02 / SERVICIOS & ARQUITECTURA - CORTE CLARO Y DEGRADADO ELEGANTE TECH
   ======================================================== */
.solutions {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 85% 10%, #ffffff 0%, #f8fafc 45%, #eef2f6 100%), #f8fafc;
  border-top: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
  color: #0f172a;
  padding: 105px 0 115px;
}
.solutions-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.6;
  animation: ambientFloat 18s ease-in-out infinite alternate;
}
.glow-blue {
  width: 650px;
  height: 650px;
  background: rgba(186, 230, 253, 0.45);
  top: -100px;
  left: 5%;
}
.glow-cyan {
  width: 550px;
  height: 550px;
  background: rgba(199, 210, 254, 0.4);
  bottom: 80px;
  right: 2%;
  animation-duration: 22s;
  animation-delay: -6s;
}
.glow-indigo {
  width: 480px;
  height: 480px;
  background: rgba(224, 231, 255, 0.45);
  top: 40%;
  left: 45%;
  animation-duration: 16s;
  animation-delay: -9s;
}
.solutions-grid-pattern {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 90%);
}
.solutions-container {
  position: relative;
  z-index: 2;
}
.section-badge-tech {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 22px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
  font-weight: 700;
}
.solutions-header h2 {
  font-size: clamp(34px, 4vw, 56px);
  color: #0f172a;
  line-height: 1.1;
  margin-bottom: 16px;
  letter-spacing: -0.04em;
}
.solutions-lead {
  font-size: 18px;
  line-height: 1.7;
  color: #475569;
  max-width: 680px;
}
.solutions .solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 45px;
}
.solution-feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 50px;
  padding: 48px;
  background: linear-gradient(135deg, rgba(16, 29, 61, 0.95) 0%, rgba(10, 20, 42, 0.98) 100%);
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(10, 20, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
.solution-label-glow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #60a5fa;
  margin-bottom: 16px;
  font-weight: 700;
}
.solution-feature h2 {
  font-size: clamp(30px, 3.2vw, 44px);
  color: #ffffff;
  line-height: 1.12;
  margin-bottom: 18px;
}
.solution-copy p {
  font-size: 16px;
  line-height: 1.8;
  color: #cbd5e1;
  max-width: 520px;
  margin: 0;
}
.solution-chips-rich {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 26px 0 28px;
}
.chip-glow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #e2e8f0;
  background: rgba(30, 58, 138, 0.45);
  border: 1px solid rgba(96, 165, 250, 0.35);
  padding: 6px 13px;
  border-radius: 20px;
  transition: all 0.25s ease;
  font-weight: 500;
}
.chip-glow:hover {
  background: rgba(37, 99, 235, 0.5);
  border-color: #60a5fa;
  transform: translateY(-1px);
}
.chip-glow svg {
  color: #38bdf8;
}
.glow-btn {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border-radius: 8px;
  padding: 14px 24px;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.4);
  transition: all 0.25s ease;
}
.glow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(37, 99, 235, 0.6);
}
.solution-art {
  margin: 0 auto;
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: #030816;
  border: 1px solid rgba(96, 165, 250, 0.35);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.art-ambient-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.45), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
}
.solution-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.solution-feature:hover .solution-art img {
  transform: scale(1.03);
}
.art-badge-tag {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(11, 20, 42, 0.9);
  border: 1px solid rgba(96, 165, 250, 0.35);
  backdrop-filter: blur(8px);
  color: #e2e8f0;
  font-size: 11px;
  font-family: Consolas, monospace;
  padding: 6px 12px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}
.card-glass {
  background: linear-gradient(135deg, rgba(16, 29, 61, 0.92) 0%, rgba(10, 20, 42, 0.98) 100%);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 14px;
  padding: 34px 30px;
  box-shadow: 0 16px 40px rgba(10, 20, 42, 0.12);
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.card-glass:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 22px 50px rgba(2, 132, 199, 0.2);
}
.solution-label-cyan {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #38bdf8;
  font-weight: 700;
  margin-bottom: 12px;
}
.card-glass h3 {
  font-size: 26px;
  color: #ffffff;
  margin-bottom: 12px;
}
.card-glass p {
  font-size: 15px;
  line-height: 1.7;
  color: #cbd5e1;
  margin: 0 0 18px;
  flex-grow: 1;
}
.card-tech-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
}
.card-tech-pills span {
  font-size: 11px;
  color: #93c5fd;
  background: rgba(30, 58, 138, 0.4);
  border: 1px solid rgba(96, 165, 250, 0.28);
  padding: 3px 9px;
  border-radius: 12px;
  font-weight: 600;
}
.light-link {
  color: #38bdf8;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: gap 0.2s;
}
.light-link:hover {
  color: #7dd3fc;
  gap: 9px;
}
.service-architecture-section {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 85% 10%, #ffffff 0%, #f8fafc 45%, #eef2f6 100%), #f8fafc;
  border-top: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
  color: #0f172a;
  padding: 105px 0 115px;
}
.architecture-intro {
  margin-bottom: 35px;
}
.architecture-intro h2 {
  font-size: clamp(28px, 3.5vw, 42px);
  color: #0f172a;
  margin: 14px 0 10px;
}
.architecture-intro p {
  font-size: 16px;
  color: #475569;
  max-width: 650px;
}
.architecture-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.arch-card {
  background: linear-gradient(135deg, rgba(16, 29, 61, 0.92) 0%, rgba(10, 20, 42, 0.98) 100%);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: 0 14px 35px rgba(10, 20, 42, 0.12);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.arch-card:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 20px 45px rgba(2, 132, 199, 0.2);
}
.arch-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.arch-blue { background: rgba(37, 99, 235, 0.28); color: #60a5fa; border: 1px solid rgba(37, 99, 235, 0.5); }
.arch-cyan { background: rgba(2, 132, 199, 0.28); color: #38bdf8; border: 1px solid rgba(2, 132, 199, 0.5); }
.arch-indigo { background: rgba(99, 102, 241, 0.28); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.5); }
.arch-card h3 {
  font-size: 19px;
  color: #ffffff;
  margin-bottom: 10px;
}
.arch-card p {
  font-size: 14px;
  line-height: 1.7;
  color: #cbd5e1;
  margin: 0 0 16px;
  flex-grow: 1;
}
.arch-case-link {
  font-size: 12px;
  color: #94a3b8;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.arch-case-link a {
  color: #38bdf8;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ========================================================
   SECCIÓN 06 / PREGUNTAS FRECUENTES (AL FINAL, CONECTANDO CON EL FOOTER)
   ======================================================== */
.faq-section {
  position: relative;
  background: radial-gradient(ellipse at 50% 0%, #0d172e 0%, #070d1b 60%, #03060c 100%);
  border-top: 1px solid rgba(59, 130, 246, 0.25);
  color: #f8fafc;
  padding: 100px 0 110px;
}
.faq-heading h2 {
  font-size: clamp(30px, 3.8vw, 50px);
  color: #ffffff;
  margin-top: 12px;
}
.faq-heading p {
  color: #94a3b8;
  font-size: 17px;
  max-width: 620px;
  margin-top: 14px;
}
.faq-accordion-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 40px;
}
.faq-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 12px;
  padding: 18px 24px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
.faq-card:hover {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(96, 165, 250, 0.4);
}
.faq-card summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  list-style: none;
}
.faq-card summary::-webkit-details-marker {
  display: none;
}
.faq-arrow {
  color: #38bdf8;
  font-size: 18px;
  transition: transform 0.25s ease;
}
.faq-card[open] .faq-arrow {
  transform: rotate(180deg);
}
.faq-card p, .faq-card ol {
  margin: 16px 0 6px;
  font-size: 15px;
  line-height: 1.75;
  color: #cbd5e1;
}
.faq-card ol {
  padding-left: 20px;
}
.faq-cta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 45px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  font-size: 15px;
}
@media(max-width: 1024px) {
  .solution-feature {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .solutions .solution-grid,
  .architecture-cards-grid {
    grid-template-columns: 1fr;
  }
}
@media(max-width: 700px) {
  .faq-cta-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* Tecnologías: azul profundo y paneles de alto contraste. */
.technologies{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 90% 0%,#164aa8 0%,transparent 55%),radial-gradient(ellipse at 0% 100%,#103879 0%,transparent 55%),#081a3d;border-top:1px solid #21457b;color:#fff}
.technologies:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#7fb9ff08 1px,transparent 1px),linear-gradient(90deg,#7fb9ff08 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(transparent,#000 70%)}
.technologies .blue{color:#6ccaff}
.technologies .section-code{color:#8abbff}
.technologies .section-heading>p{color:#c2d3ed}
.technologies .stack-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin:36px 0 24px}
.technologies .stack-filters{display:flex;flex-wrap:wrap;gap:8px}
.technologies .stack-filters button{padding:8px 16px;border-radius:999px;font-size:13px;border:1px solid rgba(138,187,255,0.25);background:rgba(255,255,255,0.05);color:#c9d9f2;transition:all .2s;cursor:pointer}
.technologies .stack-filters button:hover{background:rgba(255,255,255,0.14);border-color:rgba(138,187,255,0.6);color:#fff}
.technologies .stack-filters button[aria-pressed=true]{background:#66c6ff;color:#062049;border-color:#66c6ff;font-weight:700;box-shadow:0 4px 20px rgba(39,133,255,0.35)}
.technologies .stack-count{color:#a4bfdf;font-size:12px}
.technologies .stack-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;border:0;margin-top:10px}
.technologies .stack-item{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;padding:24px 14px;background:rgba(16,38,75,0.7);border:1px solid rgba(139,188,255,0.18);border-radius:14px;transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease;min-height:175px}
.technologies .stack-item:hover{transform:translateY(-4px);background:rgba(23,57,102,0.9);border-color:rgba(108,202,255,0.6);box-shadow:0 10px 24px rgba(0,0,0,0.28)}
.technologies .tech-icon-wrap{background:#ffffff;border:1px solid #d8eaff;width:60px;height:60px;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,0.15);display:flex;align-items:center;justify-content:center;margin-bottom:12px;flex-shrink:0}
.technologies .tech-icon-wrap svg{max-width:40px;max-height:38px;width:auto;height:auto}
.technologies .stack-item strong{display:block;color:#f4f8ff;font-size:15px;font-weight:700;margin-bottom:4px}
.technologies .stack-item span{display:block;color:#b0c5e2;font-size:13px;line-height:1.35}

/* Retrato editorial moderno, limpio y profesional */
.portrait-composition{position:relative;width:100%;max-width:420px;margin:0 auto;isolation:isolate}
.portrait-halo{position:absolute;inset:-15px;z-index:-1;pointer-events:none;border-radius:30px;background:radial-gradient(circle at center,rgba(39,114,255,0.22),transparent 70%);filter:blur(25px)}
.portrait-outline{display:none}
.portrait-frame{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 22px 50px rgba(20,47,100,0.16),0 4px 12px rgba(0,0,0,0.06);border:1px solid #d4e3f8;background:#0f1c34}
.portrait-frame .about-photo{margin:0;padding:0;position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;display:block}
.portrait-frame .about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block;filter:saturate(.95) contrast(1.02)}
.portrait-frame .about-photo:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 40%,rgba(6,23,43,0.55) 68%,rgba(6,23,43,0.95) 100%)}
.portrait-frame .about-photo figcaption{position:absolute;z-index:2;bottom:22px;left:22px;right:22px;padding:0;background:none;border:0;display:flex;flex-direction:column;gap:6px;color:#fff}
.portrait-frame figcaption>.mono{font-size:12px;letter-spacing:.1em;color:#93c5fd;text-transform:uppercase}
.portrait-frame figcaption>strong{font:700 32px/1.1 Space,Arial,sans-serif;color:#fff;letter-spacing:-.04em}
.portrait-frame figcaption .blue{color:#60a5fa}
.portrait-role{font:14px Manrope,Arial,sans-serif;color:#e2e8f0}
.portrait-code{position:absolute;top:-10px;right:-10px;width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:#2563eb;color:#fff;box-shadow:0 8px 20px rgba(37,99,235,0.35);border:1px solid rgba(255,255,255,0.3);font:700 18px Consolas,monospace;pointer-events:none;z-index:3}
.portrait-signature{position:absolute;bottom:-14px;left:18px;border-radius:8px;background:#fff;padding:8px 15px;box-shadow:0 10px 25px rgba(20,47,100,0.15);border:1px solid #d4e3f8;font-size:13px;color:#1e3a8a;font-weight:600;pointer-events:none;z-index:3}
.portrait-signature i{display:inline-block;vertical-align:middle;background:#2563eb;border-radius:50%;width:6px;height:6px;margin-right:6px}

@media(max-width:1100px){
  .technologies .stack-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .technologies .stack-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .technologies .stack-item{padding:18px 10px;min-height:155px}
  .technologies .tech-icon-wrap{width:50px;height:50px;margin-bottom:10px}
  .technologies .tech-icon-wrap svg{max-width:32px;max-height:30px}
  .portrait-composition{max-width:340px}
  .portrait-frame figcaption>strong{font-size:28px}
  .portrait-frame .about-photo figcaption{bottom:18px;left:18px;right:18px}
}
@media(prefers-reduced-motion:reduce){.portrait-frame{transform:none}}

/* Contacto integrado en la presentación personal. */
.about-contact{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}
.about-contact>a{display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0;padding:18px 20px;border-radius:10px;border:1px solid #d2dff1;transition:transform .2s,box-shadow .2s,background .2s}
.about-contact>a:hover{transform:translateY(-3px);box-shadow:0 10px 25px #174a8918}
.about-contact-label{display:flex;justify-content:space-between;gap:12px;font-size:14px;line-height:1.4}
.about-contact-label>span{font-size:16px;line-height:1}
.about-contact strong{font:700 16px/1.4 Manrope;letter-spacing:-.03em;overflow-wrap:anywhere}
.about-whatsapp{background:#2772ff;color:white;border-color:#2772ff!important}.about-whatsapp:hover{background:#145bdd}.about-whatsapp .about-contact-label{color:#e0edff}
.about-email{background:#fff;color:#18345d}.about-email .about-contact-label{color:#62718a}
.site-footer{background:var(--dark);color:white}.site-footer footer{margin-top:0;border-top:0;padding-top:30px;padding-bottom:30px}
@media(max-width:1000px){.about-contact{grid-template-columns:1fr}.about-contact>a{padding:16px 20px}}
@media(max-width:700px){.about-contact{margin-top:25px}.site-footer footer{padding-bottom:85px}}

/* Escena 3D de portada: geometría local y luces en capas. */
.hero{position:relative;isolation:isolate;background:#060b16}
.hero>.wrap{position:relative;z-index:2}
.hero-depth{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;perspective:1100px;background:radial-gradient(ellipse at 45% 24%,#11356575,transparent 48%),radial-gradient(ellipse at 98% 18%,#162a6460,transparent 42%),#060b16}
.hero-depth:after{content:'';position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,#060b1626 0%,transparent 20%,transparent 42%,#060b16c7 71%,#060b16 97%);pointer-events:none}
.hero-world{position:absolute;inset:-20px;transform-style:preserve-3d}
.depth-light{position:absolute;border-radius:50%;pointer-events:none}
.depth-light-blue{width:650px;height:650px;left:-210px;top:60px;background:radial-gradient(circle,#174ce637,transparent 68%)}
.depth-light-cyan{width:600px;height:600px;right:-150px;top:120px;background:radial-gradient(circle,#00b7ef25,transparent 68%)}
.depth-grid{position:absolute;width:150%;height:720px;left:-25%;top:270px;transform:perspective(650px) rotateX(66deg);transform-origin:center top;background-image:linear-gradient(#5b9cff36 1px,transparent 1px),linear-gradient(90deg,#5b9cff36 1px,transparent 1px);background-size:78px 78px;mask-image:radial-gradient(ellipse at center,#000 10%,transparent 68%);opacity:.7}
.depth-cube-float{position:absolute;width:var(--cube-size);height:var(--cube-size);perspective:700px}
.depth-cube-one{--cube-size:150px;--cube-half:75px;left:7%;top:195px;opacity:.65}
.depth-cube-two{--cube-size:95px;--cube-half:47.5px;right:8%;top:470px;opacity:.55}
.depth-cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(34deg) rotateZ(-13deg)}
.depth-cube-two .depth-cube{transform:rotateX(28deg) rotateY(-32deg) rotateZ(15deg)}
.cube-face{position:absolute;inset:0;display:block;border:1px solid #78b6ff75;background:linear-gradient(135deg,#368dff29,#0a235c12 60%,#00d4ff20);box-shadow:inset 0 0 24px #266cff15;backface-visibility:visible}
.cube-front{transform:translateZ(var(--cube-half))}.cube-back{transform:rotateY(180deg) translateZ(var(--cube-half))}.cube-left{transform:rotateY(-90deg) translateZ(var(--cube-half))}.cube-right{transform:rotateY(90deg) translateZ(var(--cube-half));background:linear-gradient(145deg,#2478ff38,#00276518)}.cube-top{transform:rotateX(90deg) translateZ(var(--cube-half));background:linear-gradient(145deg,#69cfff38,#246bff13)}.cube-bottom{transform:rotateX(-90deg) translateZ(var(--cube-half))}
.depth-ring-float{position:absolute;right:9%;top:155px;width:240px;height:240px;perspective:800px;opacity:.65}
.depth-ring{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(58deg) rotateY(-19deg) rotateZ(-20deg)}
.depth-ring i{display:block;position:absolute;inset:0;border-radius:50%;border:2px solid #468aff85;box-shadow:0 0 18px #287cff35,inset 0 0 14px #2a73ff20}
.depth-ring i:nth-child(1){border-top-color:#a5e5ff;border-right-color:#63bdff;border-width:4px;transform:translateZ(14px)}
.depth-ring i:nth-child(2){transform:translateZ(-6px)}.depth-ring i:nth-child(3){inset:22px;border-color:#2f68dc80;transform:translateZ(14px)}
.depth-node{position:absolute;width:5px;height:5px;border-radius:50%;background:#8dccff;box-shadow:0 0 18px #438cff}
.node-one{left:22%;top:170px}.node-two{right:20%;top:420px;width:3px;height:3px}.node-three{left:13%;top:540px;width:3px;height:3px}
.hero .portrait:after{background:linear-gradient(transparent 60%,#060b16)}
@media(min-width:1600px){.depth-cube-one{left:11%}.depth-ring-float{right:12%}.depth-cube-two{right:12%}}
@media(max-width:1000px){.depth-cube-one{--cube-size:100px;--cube-half:50px;left:4%;top:210px;opacity:.5}.depth-ring-float{width:170px;height:170px;right:3%;top:145px;opacity:.5}.depth-cube-two{right:4%;top:425px;opacity:.35}.depth-grid{top:250px;background-size:64px 64px}}
@media(max-width:700px){.hero-world{inset:0}.depth-cube-one{--cube-size:68px;--cube-half:34px;left:-10px;top:190px;opacity:.55}.depth-cube-two{display:none}.depth-ring-float{width:130px;height:130px;right:-25px;top:185px;opacity:.5}.depth-grid{top:280px;height:430px;opacity:.5}.depth-light-blue{width:400px;height:450px;left:-160px;top:60px}.depth-light-cyan{width:350px;height:400px;right:-170px;top:140px}.node-one{left:10%;top:150px}.node-two{right:13%;top:380px}.node-three{display:none}}

/* Legibilidad: espacio para etiquetas y controles con tipografías mayores. */
.hero-top,.hero-footer,.hero-actions,.demo-label,.project-toolbar{flex-wrap:wrap;gap:16px}
.hero-bottom>div,.section-heading>*,.solution-grid>*,.project-card{min-width:0}
.project-meta>.mono{display:block;line-height:1.5}
.project-meta p,.project-footnote,.demo-notice{line-height:1.65}
.filters{flex-wrap:wrap}
.filter-count{white-space:nowrap}
.demo-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat em{display:block;margin:4px 0 0;line-height:1.5}
.window-bar{height:auto;min-height:48px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.demo-heading,.table-head{flex-wrap:wrap;gap:12px}
.search input{font-size:16px;width:180px;min-width:0}
.portrait-frame figcaption>.mono{letter-spacing:.05em;line-height:1.5}
.about-contact-label{flex-wrap:wrap}
@media(max-width:1000px){
  .header{gap:20px}.header nav{gap:18px}.nav-tech{display:none}
  .workspace-body{grid-template-columns:190px minmax(0,1fr)}
}
@media(max-width:700px){
  .header{gap:10px}.header nav{gap:10px}
  .hero-footer span{max-width:none;flex:1 1 220px}
  .demo-label{align-items:flex-start}
  .workspace-body{display:block}
  .demo-sidebar{flex-direction:column;align-items:stretch;gap:12px}
  .demo-tabs{flex-wrap:wrap;gap:6px}
  .demo-tabs button{flex:1 1 auto;justify-content:center;padding:10px 8px}
  .window-bar>.mono{flex:1 1 150px}
  .stat em{display:none}
  .project-toolbar{align-items:flex-start}
  .project-title{line-height:1.15}
  .hero-actions{align-items:flex-start}
  .portrait-tag{right:-48px}
}
@media(max-width:400px){
  .brand,.brand img{width:100px}
  .demo-stats{grid-template-columns:1fr}
  .stat{padding:12px 14px}
  .table-head{align-items:stretch}
  .table-head h3,.search{width:100%}
  .search input{width:100%}
}

/* Dialog actions */
.dialog-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:25px}
.dialog-body .dialog-actions .button,.dialog-body .dialog-actions .dark-link{margin-top:0}


/* ========================================================
   MEJORA MOBILE HERO: LECTURA PERFECTA DE "SISTEMAS WEB"
   ======================================================== */
@media(max-width: 700px) {
  .hero-stage {
    height: 380px !important;
    margin-top: 40px !important;
  }
  .hero-kicker {
    top: -10px !important;
    font-size: 12px !important;
    letter-spacing: .2em !important;
    color: #93c5fd !important;
  }
  .word-back {
    top: 12px !important;
    font-size: clamp(28px, 7.8vw, 40px) !important;
    color: #ffffff !important;
    -webkit-text-stroke: 0 !important;
    letter-spacing: -0.04em !important;
    z-index: 2 !important;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.85) !important;
  }
  .portrait, .portrait-destello {
    top: 65px !important;
    width: 195px !important;
    height: 245px !important;
  }
  .word-front {
    top: 260px !important;
    font-size: clamp(32px, 8.8vw, 44px) !important;
    z-index: 2 !important;
    letter-spacing: -0.05em !important;
  }
  .portrait-tag {
    display: none !important;
  }
  .orbit {
    display: none !important;
  }
}

/* ========================================================
   OPCIONES DE CONTACTO DIRECTO & MODAL DE FORMULARIO
   ======================================================== */
.about-contact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 32px !important;
}
.about-contact > a,
.about-contact > button {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 18px 20px !important;
  border-radius: 10px !important;
  border: 1px solid #d2dff1 !important;
  transition: transform .2s, box-shadow .2s, background .2s, border-color .2s !important;
  text-decoration: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  cursor: pointer !important;
  text-align: left !important;
}
.about-contact > a:hover,
.about-contact > button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 25px rgba(20, 47, 100, 0.12) !important;
}
.about-contact-label {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
}
.about-contact strong {
  font: 700 16px/1.35 Manrope, Arial, sans-serif !important;
  letter-spacing: -.03em !important;
  overflow-wrap: anywhere !important;
}
.about-whatsapp {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}
.about-whatsapp:hover {
  background: #1d4ed8 !important;
}
.about-whatsapp .about-contact-label {
  color: #dbeafe !important;
}
.about-form-btn {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #1e293b !important;
}
.about-form-btn:hover {
  background: #1e293b !important;
  border-color: #334155 !important;
}
.about-form-btn .about-contact-label {
  color: #94a3b8 !important;
}
.about-email {
  background: #ffffff !important;
  color: #1e293b !important;
  border-color: #d2dff1 !important;
}
.about-email:hover {
  border-color: #93c5fd !important;
}
.about-email .about-contact-label {
  color: #64748b !important;
}

@media(max-width: 1000px) {
  .about-contact {
    grid-template-columns: 1fr !important;
  }
}

/* Modal de Formulario */
.contact-modal {
  width: min(640px, calc(100% - 32px));
  max-height: 92vh;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  background: #ffffff;
  color: #0f172a;
  padding: 0;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);
  overflow-y: auto;
}
.contact-modal::backdrop {
  background: rgba(10, 15, 29, 0.78);
  backdrop-filter: blur(8px);
}
.contact-modal-body {
  position: relative;
  padding: 36px 32px;
}
.contact-modal-header {
  margin-bottom: 24px;
  padding-right: 32px;
}
.modal-kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #2563eb;
  margin-bottom: 8px;
  display: block;
  font-weight: 700;
}
.contact-modal-header h2 {
  font-size: clamp(26px, 3.2vw, 34px);
  color: #0f172a;
  margin-bottom: 8px;
}
.contact-modal-header p {
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}
.contact-form .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group-full {
  grid-column: 1 / -1;
}
.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}
.form-group .req {
  color: #ef4444;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  box-sizing: border-box;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.form-group textarea {
  resize: vertical;
  min-height: 90px;
}
.form-status {
  margin-top: 14px;
  font-size: 13px;
  border-radius: 6px;
  padding: 0;
  transition: all .2s;
}
.form-status.form-loading {
  padding: 10px 14px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.form-status.form-success {
  padding: 12px 14px;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  font-weight: 600;
}
.form-status.form-error {
  padding: 12px 14px;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-weight: 600;
}
.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.form-disclaimer {
  font-size: 12px;
  color: #64748b;
  flex: 1;
  min-width: 200px;
}
@media(max-width: 600px) {
  .contact-modal-body {
    padding: 26px 20px;
  }
  .contact-form .form-grid {
    grid-template-columns: 1fr;
  }
}