/* ===== Web corporativa Astra Capital ===== */
.co-nav{position:sticky;top:0;z-index:50;background:rgba(7,11,20,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08);}
.co-nav-inner{max-width:1120px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;}
.co-menu{display:flex;gap:30px;list-style:none;margin:0;padding:0;font-size:14px;font-weight:600;}
.co-menu a{color:rgba(255,255,255,.8);text-decoration:none;transition:color .15s;}
.co-menu a:hover{color:#fff;}
.co-nav-cta{background:#2563eb;color:#fff;text-decoration:none;font-size:13.5px;font-weight:700;padding:11px 22px;border-radius:999px;transition:filter .15s;}
.co-nav-cta:hover{filter:brightness(1.1);}

/* Hero */
.co-hero{position:relative;background:radial-gradient(1000px 600px at 75% -10%,rgba(37,99,235,.35),transparent 60%),linear-gradient(135deg,#070b14 0%,#0b1226 55%,#12224a 100%);color:#fff;overflow:hidden;}
.co-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 70% 50%,rgba(255,255,255,.5),transparent),radial-gradient(1.4px 1.4px at 85% 25%,rgba(255,255,255,.7),transparent);}
.co-hero-inner{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:96px 32px 104px;max-width:1120px;}
.co-hero .badge{display:inline-block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#cbd5e1;font-size:12.5px;font-weight:600;letter-spacing:.5px;padding:7px 16px;border-radius:999px;margin-bottom:22px;}
.co-hero h1{font-size:clamp(36px,5.2vw,60px);font-weight:800;line-height:1.06;letter-spacing:-1px;margin:0 0 20px;max-width:760px;}
.co-hero h1 .g{background:linear-gradient(180deg,#7cb0ff,#2563eb);-webkit-background-clip:text;background-clip:text;color:transparent;}
.co-hero p{font-size:19px;line-height:1.6;color:rgba(226,232,240,.82);max-width:620px;margin:0 0 32px;}
.co-hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.co-btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;text-decoration:none;padding:15px 30px;border-radius:999px;transition:transform .12s,filter .15s;}
.co-btn-primary{background:#2563eb;color:#fff;box-shadow:0 12px 30px rgba(37,99,235,.4);}
.co-btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08);}
.co-btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);}
.co-btn-ghost:hover{background:rgba(255,255,255,.08);}

/* Franja de confianza */
.co-strip{background:#0a1122;color:#cbd5e1;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);}
.co-strip-inner{max-width:1120px;margin:0 auto;padding:26px 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
.co-strip .n{font-size:26px;font-weight:800;color:#fff;}
.co-strip .l{font-size:12.5px;color:rgba(203,213,225,.65);margin-top:2px;}

/* Secciones */
.co-section{padding:88px 0;background:#fff;}
.co-section.dark{background:#070c18;color:#e2e8f0;}
.co-container{max-width:1120px;margin:0 auto;padding:0 32px;}
.co-eyebrow{color:#2563eb;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;font-size:12px;margin:0 0 14px;}
.co-section.dark .co-eyebrow{color:#60a5fa;}
.co-h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;line-height:1.1;letter-spacing:-.5px;margin:0 0 16px;color:#0f172a;}
.co-section.dark .co-h2{color:#fff;}
.co-lead{font-size:17px;line-height:1.7;color:#475569;max-width:680px;margin:0 0 44px;}
.co-section.dark .co-lead{color:rgba(226,232,240,.72);}

/* Servicios */
.co-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.co-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:28px 26px;transition:border-color .2s,box-shadow .2s,transform .2s;}
.co-card:hover{border-color:#bfdbfe;box-shadow:0 16px 40px rgba(37,99,235,.1);transform:translateY(-3px);}
.co-card .ic{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#2563eb,#3b82f6);display:grid;place-items:center;margin-bottom:18px;}
.co-card .ic svg{width:24px;height:24px;color:#fff;}
.co-card h3{font-size:18px;margin:0 0 8px;color:#0f172a;}
.co-card p{font-size:14.5px;color:#475569;line-height:1.6;margin:0;}

/* Sobre nosotros */
.co-about{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
.co-values{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.co-value{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:20px;}
.co-value .ic{width:38px;height:38px;border-radius:10px;background:rgba(37,99,235,.18);display:grid;place-items:center;margin-bottom:12px;}
.co-value .ic svg{width:20px;height:20px;color:#60a5fa;}
.co-value h4{margin:0 0 5px;font-size:15.5px;color:#fff;}
.co-value p{margin:0;font-size:13px;color:rgba(226,232,240,.65);line-height:1.55;}

/* Contacto */
.co-contact{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.co-contact-info p{color:#475569;font-size:15.5px;line-height:1.7;}
.co-contact-info .item{display:flex;gap:12px;align-items:center;margin-bottom:14px;font-size:15px;color:#0f172a;}
.co-contact-info .item svg{width:20px;height:20px;color:#2563eb;flex-shrink:0;}
.co-form{background:#f8fafc;border:1px solid #e2e8f0;border-radius:18px;padding:28px;}
.co-form .field{margin-bottom:14px;}
.co-form label{display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px;}
.co-form input,.co-form textarea{width:100%;border:1.5px solid #e2e8f0;border-radius:10px;padding:12px 14px;font-size:15px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s;}
.co-form input:focus,.co-form textarea:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.15);}
.co-form textarea{resize:vertical;min-height:110px;}
.co-form .err{color:#dc2626;font-size:12.5px;display:block;margin-top:4px;min-height:1px;}
.co-form button{width:100%;background:#2563eb;color:#fff;border:none;border-radius:10px;padding:14px;font-size:15px;font-weight:700;cursor:pointer;transition:filter .15s;margin-top:6px;}
.co-form button:hover{filter:brightness(1.08);}
.co-form button:disabled{opacity:.7;cursor:not-allowed;}
.co-form .ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;padding:12px 14px;border-radius:10px;font-size:14px;display:none;}
.co-form .alert{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;padding:10px 12px;border-radius:8px;font-size:13.5px;margin-bottom:12px;display:none;}

@media(max-width:900px){
  .co-cards{grid-template-columns:1fr;}
  .co-about{grid-template-columns:1fr;gap:32px;}
  .co-contact{grid-template-columns:1fr;gap:28px;}
  .co-strip-inner{grid-template-columns:repeat(2,1fr);gap:24px;}
  .co-menu{display:none;}
  .co-section{padding:60px 0;}
}
@media(max-width:520px){
  .co-container,.co-hero-inner,.co-nav-inner,.co-strip-inner{padding-left:18px;padding-right:18px;}
  .co-values{grid-template-columns:1fr;}
}

/* ==========================================================================
   ANIMACIONES / 3D / MICRO-INTERACCIONES (nivel senior)
   ========================================================================== */

/* Hero a dos columnas con visual 3D */
.co-hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
.co-hero-visual{position:relative;height:440px;perspective:1000px;}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.co-orb{position:absolute;border-radius:50%;filter:blur(46px);opacity:.55;pointer-events:none;z-index:0;will-change:transform;}
.co-orb.o1{width:280px;height:280px;background:radial-gradient(circle,#2563eb,transparent 70%);top:-40px;right:-20px;animation:floaty 9s ease-in-out infinite;}
.co-orb.o2{width:220px;height:220px;background:radial-gradient(circle,#7c3aed,transparent 70%);bottom:-30px;left:10px;animation:floaty 11s ease-in-out infinite reverse;}
.co-orb.o3{width:160px;height:160px;background:radial-gradient(circle,#38bdf8,transparent 70%);top:40%;right:30%;animation:floaty 13s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-26px) translateX(10px)}}

/* Badge con puntito latiendo */
.co-hero .badge::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#4ade80;margin-right:8px;vertical-align:middle;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:pulse 1.8s infinite;}

/* Título con entrada por palabras */
.co-hero h1 .word{display:inline-block;opacity:0;transform:translateY(26px) rotateX(-40deg);transform-origin:bottom;animation:wordUp .8s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes wordUp{to{opacity:1;transform:none;}}

/* Scroll reveal */
[data-reveal]{opacity:0;transform:translateY(36px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform;}
[data-reveal].in{opacity:1;transform:none;}
[data-reveal="zoom"]{transform:scale(.94);}
[data-reveal="left"]{transform:translateX(-40px);}
[data-reveal="right"]{transform:translateX(40px);}

/* Tarjetas de servicio: tilt 3D + brillo */
.co-card{transform-style:preserve-3d;transition:transform .2s ease,box-shadow .25s,border-color .25s;position:relative;overflow:hidden;}
.co-card .ic{transition:transform .25s ease;transform:translateZ(30px);}
.co-card:hover .ic{transform:translateZ(45px) scale(1.06);}
.co-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#2563eb,#7c3aed,#38bdf8);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;}
.co-card:hover::before{transform:scaleX(1);}

/* Botón con destello */
.co-btn-primary{position:relative;overflow:hidden;}
.co-btn-primary::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);}
.co-btn-primary:hover::after{animation:shine .85s ease;}
@keyframes shine{to{left:140%;}}

/* Valores: aparición con leve flotación */
.co-value{transition:transform .25s ease,border-color .25s,background .25s;}
.co-value:hover{transform:translateY(-4px);border-color:rgba(96,165,250,.45);background:rgba(255,255,255,.05);}

/* Franja de stats: número grande animado */
.co-strip .n{font-variant-numeric:tabular-nums;}

/* Nav: subrayado animado */
.co-menu a{position:relative;}
.co-menu a::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:2px;background:#60a5fa;transform:scaleX(0);transform-origin:left;transition:transform .25s ease;}
.co-menu a:hover::after{transform:scaleX(1);}

/* Menú móvil */
.co-burger{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-direction:column;gap:5px;}
.co-burger span{display:block;width:24px;height:2px;background:#fff;transition:transform .25s,opacity .2s;}
.co-mobile{display:none;flex-direction:column;gap:4px;padding:8px 32px 20px;background:#0a1122;border-bottom:1px solid rgba(255,255,255,.08);}
.co-mobile a{color:rgba(255,255,255,.85);text-decoration:none;padding:12px 0;font-weight:600;border-bottom:1px solid rgba(255,255,255,.06);}

/* Scrollbar y detalle final */
html{scroll-padding-top:80px;}

@media(max-width:900px){
  .co-hero-inner{grid-template-columns:1fr;gap:20px;}
  .co-hero-visual{height:300px;order:-1;}
  .co-burger{display:flex;}
}

@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none;}
  .co-orb,.co-hero h1 .word,.co-hero .badge::before{animation:none!important;opacity:1!important;transform:none!important;}
  #heroCanvas{display:none;}
}

/* ==========================================================================
   HERO CINEMATOGRÁFICO 3D + REFINAMIENTO EDITORIAL
   ========================================================================== */
:root{--font-display:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
.co-display,.co-h2,.co-hero h1,.astra-word,.s-num,.co-serv h3,.co-strip .n{font-family:var(--font-display);}

/* Nav flotante sobre el hero (fixed), sólido al hacer scroll */
.co-nav{position:fixed;top:0;left:0;right:0;background:linear-gradient(180deg,rgba(4,6,13,.6) 0%,rgba(4,6,13,0) 100%);border-bottom-color:transparent;transition:background .35s,border-color .35s,backdrop-filter .35s;}
.co-nav.scrolled{background:rgba(6,10,20,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:rgba(255,255,255,.08);}
.co-menu a,.co-nav .astra-word{text-shadow:0 1px 12px rgba(0,0,0,.35);}
.co-mobile{position:fixed;top:66px;left:0;right:0;z-index:49;}

/* Hero a pantalla completa con escena 3D */
.co-hero.cinematic{min-height:100svh;display:flex;align-items:center;padding:0;background:radial-gradient(1200px 800px at 78% 30%,rgba(37,99,235,.22),transparent 60%),linear-gradient(160deg,#04060d 0%,#070c1a 55%,#0a1226 100%);}
#hero3d{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;}
.co-hero-grad{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(4,6,13,.94) 0%,rgba(4,6,13,.72) 34%,rgba(4,6,13,.28) 58%,rgba(4,6,13,.5) 100%);}
.co-hero.cinematic .co-hero-center{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:0 32px;width:100%;}
.co-kicker{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#93c5fd;font-weight:600;margin-bottom:28px;}
.co-kicker::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,#60a5fa,transparent);}
.co-display{font-size:clamp(42px,7vw,88px);line-height:.98;letter-spacing:-2.5px;font-weight:700;margin:0 0 24px;color:#fff;max-width:16ch;text-wrap:balance;}
.co-display em{font-style:normal;background:linear-gradient(180deg,#aecbff,#2563eb);-webkit-background-clip:text;background-clip:text;color:transparent;}
.co-hero.cinematic p{font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:rgba(226,232,240,.8);max-width:520px;margin:0 0 34px;}
.co-scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.55);font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;}
.co-scrollcue::after{content:"";width:1px;height:34px;background:linear-gradient(180deg,rgba(255,255,255,.6),transparent);animation:cueLine 2s ease-in-out infinite;}
@keyframes cueLine{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* Servicios en formato editorial (lista) */
.co-serv-sec .co-serv-list{margin-top:20px;}
.co-serv{display:grid;grid-template-columns:70px 1fr 40px;gap:22px;align-items:center;padding:30px 14px;border-top:1px solid #e6e9f0;position:relative;transition:background .3s;}
.co-serv:last-child{border-bottom:1px solid #e6e9f0;}
.s-num{font-size:15px;color:#94a3b8;font-weight:600;letter-spacing:1px;}
.co-serv .s-body h3{font-size:clamp(21px,2.6vw,30px);margin:0 0 5px;color:#0f172a;transition:color .3s,transform .3s;font-weight:600;}
.co-serv .s-body p{margin:0;color:#64748b;font-size:14.5px;line-height:1.55;max-width:66ch;}
.s-arrow{color:#2563eb;font-size:22px;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s;justify-self:end;}
.co-serv::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#2563eb,#7c3aed);transform:scaleY(0);transition:transform .3s;}
.co-serv:hover{background:linear-gradient(90deg,rgba(37,99,235,.05),transparent);}
.co-serv:hover .s-body h3{color:#2563eb;transform:translateX(10px);}
.co-serv:hover .s-arrow{opacity:1;transform:none;}
.co-serv:hover::after{transform:scaleY(1);}

@media(max-width:640px){
  .co-serv{grid-template-columns:44px 1fr;gap:14px;padding:24px 4px;}
  .s-arrow{display:none;}
  .co-scrollcue{display:none;}
}