/* ============================================================= 3L SYSTEMS — main.css Hoja de estilos global compartida por todas las páginas. Web estática (HTML + CSS + JS puro). Mobile-first. Identidad visual basada en 3lsystems-home-v3-outfit-white.html y en INSTRUCCIONES_COWORK.md. ÍNDICE 01. Variables (:root) 02. Reset y base 03. Tipografía base 04. Accesibilidad (skip-link, focus, sr-only) 06. Animaciones y scroll-reveal 07. Layout (.wrap, secciones, grid helpers) 08. Cabeceras de seccion (eyebrow / titulo / subtitulo) 09. Botones (.btn y variantes) 10. Badges, pills y tags 11. Cabecera / navegacion + megamenu + menu movil 12. Hero (home) 13. Page-hero OSCURO (cabecera de paginas internas, aurora) + breadcrumb 14. Barra de partners / trust bar 15. Cifras / stats 16. Soluciones (grid + cards) 17. Areas de solucion (pagina soluciones) 18. Seccion IA (oscura) 19. Sectores (feature-tiles oscuras home + grid pagina) 20. "Por que elegirnos" 21. Valores (nosotros) 22. Casos de exito (logos + cards) 23. Metodologia / pasos 24. Tablas de contenido 25. FAQ / acordeon 26. Blog / recursos 27. Formulario de contacto + datos de contacto 28. CTA final 29. Footer 30. Utilidades varias 31. Auroras / gradientes animados (fondos protagonistas) 32. Reveals avanzados (texto por palabras, blur-in, contadores) ============================================================= */ /* ============================================================= 01. VARIABLES Las fuentes (Outfit + DM Sans) se cargan via en el con display=swap. Tabler Icons tambien via CDN. ============================================================= */ :root{ /* Paleta corporativa */ --green:#8CC63E; /* Verde principal / CTAs / acentos */ --green2:#7ab535; /* Verde hover */ --green3:#27500A; /* Verde oscuro / texto sobre verde claro */ --greenlight:#f0f7e6; /* Verde muy claro / fondos hover */ --greenbg:#f9fdf4; /* Fondo verde suavisimo */ --ink:#0f1a08; /* Negro verdoso / titulos */ --dark:#0d1608; /* Fondo oscuro */ --dark2:#111d08; /* Fondo oscuro secundario */ --text:#111; /* Texto principal */ --text2:#444; /* Texto secundario */ --text3:#888; /* Texto terciario / meta */ --border:#e8f0de; /* Bordes suaves */ --border2:#c8dfa0; /* Bordes marcados */ --white:#fff; /* Tipografia */ --font-d:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* Display / headings */ --font-b:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* Body */ /* Layout */ --maxw:1200px; --gutter:20px; /* Padding lateral del contenedor (movil) */ --sec-pad:64px; /* Padding vertical de seccion (movil) */ /* Radios */ --r-sm:10px; --r:14px; --r-lg:18px; --r-pill:50px; /* Sombras (tinte verde corporativo) */ --sh-sm:0 4px 16px rgba(140,198,62,.10); --sh:0 16px 48px rgba(140,198,62,.15); --sh-lg:0 24px 64px rgba(15,26,8,.10); /* Transiciones */ --ease:cubic-bezier(.22,.61,.36,1); --t:.18s; --t2:.3s; /* Z-index */ --z-nav:200; --z-mega:190; } /* Contenedor mas holgado en tablet/desktop */ @media(min-width:768px){ :root{--gutter:40px;--sec-pad:84px;} } @media(min-width:1024px){ :root{--sec-pad:100px;} } /* ============================================================= 02. RESET Y BASE ============================================================= */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ font-family:var(--font-b); background:var(--white); color:var(--text); font-size:16px; line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; /* clip (no hidden): evita el scroll horizontal sin crear un contenedor de scroll, para que el menu .nav con position:sticky se quede fijo arriba. */ overflow-x:clip; } img,svg,video{max-width:100%;height:auto;display:block;} a{text-decoration:none;color:inherit;} ul,ol{list-style:none;} button{font-family:inherit;cursor:pointer;border:none;background:none;} input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit;} i[class^="ti-"],i[class*=" ti-"]{display:inline-block;line-height:1;} /* Evita salto al anclar bajo cabecera sticky */ :target{scroll-margin-top:84px;} /* ============================================================= 03. TIPOGRAFIA BASE ============================================================= */ h1,h2,h3,h4,h5,h6{font-family:var(--font-d);color:var(--ink);line-height:1.15;font-weight:900;} h1{font-size:clamp(36px,5.5vw,68px);letter-spacing:-2px;line-height:1.0;} h2{font-size:clamp(28px,3.5vw,44px);letter-spacing:-1.2px;line-height:1.05;} h3{font-size:clamp(19px,2vw,24px);font-weight:700;letter-spacing:-.5px;} h4{font-size:16px;font-weight:700;letter-spacing:-.3px;} h5{font-size:14px;font-weight:700;} p{line-height:1.75;} strong,b{font-weight:700;} small{font-size:.85em;} /* ============================================================= 04. ACCESIBILIDAD ============================================================= */ .sr-only{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } .skip-link{ position:absolute;left:50%;transform:translateX(-50%) translateY(-150%); top:8px;z-index:9999;background:var(--green);color:#fff;font-weight:700; font-size:14px;padding:10px 20px;border-radius:var(--r-pill);transition:transform .2s; } .skip-link:focus{transform:translateX(-50%) translateY(0);} :focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px;} /* ============================================================= 06. ANIMACIONES Y SCROLL-REVEAL ============================================================= */ @keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}} @keyframes fadeUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}} @keyframes lineReveal{to{transform:scaleX(1);}} @keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.06);}} /* Entradas escalonadas (above the fold) */ .a1{animation:fadeUp .55s .10s both;} .a2{animation:fadeUp .55s .25s both;} .a3{animation:fadeUp .55s .40s both;} .a4{animation:fadeUp .55s .55s both;} .a5{animation:fadeUp .55s .70s both;} /* Scroll reveal (activado por IntersectionObserver -> .in) */ .reveal{opacity:0;transform:translateY(30px);transition:opacity .65s var(--ease),transform .65s var(--ease);} .reveal.in{opacity:1;transform:none;} .rd{transition-delay:.15s;} .rd2{transition-delay:.30s;} .rd3{transition-delay:.45s;} /* Respeto a la preferencia de movimiento reducido */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;} .reveal{opacity:1;transform:none;} } /* ============================================================= 07. LAYOUT ============================================================= */ .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);} section{position:relative;} .section{padding:var(--sec-pad) 0;} .section--bg{background:var(--greenbg);} .section--light{background:var(--greenlight);} .section--white{background:var(--white);} /* Helpers de grid genericos (auto-responsivos) */ .grid{display:grid;gap:16px;} .grid-auto{display:grid;gap:16px;grid-template-columns:1fr;} @media(min-width:768px){.grid-auto{grid-template-columns:repeat(2,1fr);}} @media(min-width:1024px){.grid-auto{grid-template-columns:repeat(3,1fr);}} .center{text-align:center;} .mx-auto{margin-left:auto;margin-right:auto;} /* ============================================================= 08. CABECERAS DE SECCION ============================================================= */ .ey{ font-size:11px;color:var(--green);font-weight:600;text-transform:uppercase; letter-spacing:2.5px;margin-bottom:12px; } .sh{ font-family:var(--font-d);font-size:clamp(28px,3.5vw,44px);font-weight:900; color:var(--ink);letter-spacing:-1.5px;line-height:1.05;margin-bottom:12px; } /* Sello de producto en el hero: chip blanco con el logo (p. ej. BuscaFlete) */ .bf-badge{display:inline-flex;align-items:center;background:#fff;border-radius:var(--r-pill);padding:9px 20px;box-shadow:0 8px 24px rgba(0,0,0,.28);margin-bottom:4px;} .bf-badge img{height:24px;width:auto;display:block;} /* Galeria de capturas de pantalla (p. ej. BuscaFlete) */ .shots{display:grid;grid-template-columns:1fr;gap:22px;margin-top:32px;} @media(min-width:760px){.shots{grid-template-columns:1fr 1fr;}} .shot{margin:0;} .shot img{display:block;width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:0 14px 40px rgba(13,22,8,.12);} .shot figcaption{margin-top:12px;font-size:14px;font-weight:600;color:rgba(13,22,8,.62);text-align:center;} .shot--wide{grid-column:1/-1;} /* Las 6 capturas (no el dashboard) con la misma altura */ .shot:not(.shot--wide) img{height:280px;object-fit:cover;object-position:top;} /* Subtítulo dentro de una galería de capturas */ .shots-sub{margin-top:50px;} .shots-sub h3{font-family:var(--font-d);font-size:clamp(20px,2.4vw,26px);font-weight:900;color:var(--ink);letter-spacing:-.5px;margin:0;} /* Capturas de app móvil (orientación vertical, mostradas completas sin recorte) */ .app-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:28px;} @media(min-width:980px){.app-shots{grid-template-columns:repeat(4,1fr);}} .app-shot{margin:0;background:var(--greenbg);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;transition:transform .45s var(--ease,cubic-bezier(.22,.61,.36,1)),box-shadow .45s ease;} .app-shot:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(13,22,8,.12);} .app-shot img{display:block;width:100%;height:320px;object-fit:contain;border-radius:10px;} .app-shot figcaption{margin-top:14px;font-size:13px;font-weight:600;color:rgba(13,22,8,.62);text-align:center;line-height:1.45;} /* Rejilla de 4 columnas (8 tarjetas 4x2 en escritorio) */ .grid-4{display:grid;grid-template-columns:1fr;gap:18px;margin-top:24px;} @media(min-width:600px){.grid-4{grid-template-columns:repeat(2,1fr);}} @media(min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr);}} /* Numero grande de categoria (sustituye al eyebrow en paginas de listado) */ .cat-num{ font-family:var(--font-d);font-size:clamp(54px,7vw,84px);font-weight:900; line-height:.9;letter-spacing:-2px;color:rgba(140,198,62,.33);margin-bottom:8px; } /* ===== Bloques de sector "pro" ===== */ /* 1) Comparativa Antes / Después */ .cmp{display:grid;grid-template-columns:1fr;gap:20px;margin-top:36px;} @media(min-width:820px){.cmp{grid-template-columns:1fr 1fr;gap:24px;}} .cmp-card{border-radius:var(--r-lg);padding:34px 32px;border:1px solid var(--border);transition:transform .5s var(--ease,cubic-bezier(.22,.61,.36,1));} .cmp-card:hover{transform:translateY(-4px);} .cmp-card--bad{background:#faf9f7;} .cmp-card--good{background:var(--ink);border-color:transparent;position:relative;overflow:hidden;} .cmp-card--good::after{content:'';position:absolute;width:340px;height:340px;right:-120px;top:-120px;background:radial-gradient(circle,rgba(140,198,62,.32),transparent 70%);pointer-events:none;} .cmp-h{display:flex;align-items:center;gap:11px;font-family:var(--font-d);font-weight:800;font-size:20px;letter-spacing:-.5px;margin-bottom:22px;position:relative;z-index:1;} .cmp-card--bad .cmp-h{color:var(--ink);} .cmp-card--good .cmp-h{color:#fff;} .cmp-h .ti{font-size:24px;} .cmp-card--bad .cmp-h .ti{color:#d2604e;} .cmp-card--good .cmp-h .ti{color:var(--green);} .cmp-list{list-style:none;margin:0;padding:0;display:grid;gap:15px;position:relative;z-index:1;} .cmp-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55;} .cmp-list li .ti{flex-shrink:0;margin-top:1px;font-size:19px;} .cmp-card--bad .cmp-list li{color:#6f6a64;} .cmp-card--bad .cmp-list li .ti{color:#d2604e;} .cmp-card--good .cmp-list li{color:rgba(255,255,255,.82);} .cmp-card--good .cmp-list li .ti{color:var(--green);} /* 2) Flujo de proceso (stepper horizontal) */ .flow{display:grid;grid-template-columns:1fr;gap:28px;margin-top:44px;position:relative;} @media(min-width:900px){.flow{grid-template-columns:repeat(5,1fr);gap:8px;} .flow::before{content:'';position:absolute;top:28px;left:9%;right:9%;height:3px;background:linear-gradient(90deg,rgba(140,198,62,.25),var(--green),rgba(140,198,62,.25));border-radius:2px;}} .flow-step{text-align:center;padding:0 10px;position:relative;} .flow-num{width:58px;height:58px;border-radius:50%;background:var(--green);color:var(--ink);font-family:var(--font-d);font-weight:900;font-size:23px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;position:relative;z-index:2;box-shadow:0 8px 22px rgba(140,198,62,.4);} .flow-step h4{font-family:var(--font-d);font-size:16px;font-weight:800;color:var(--ink);margin:0 0 8px;} .flow-step p{font-size:13.5px;line-height:1.6;color:#6f6a64;margin:0;} /* 3) Banda oscura "lo que dominamos" con resplandor */ .mastery{position:relative;overflow:hidden;background:var(--ink);border-radius:var(--r-lg);padding:56px 40px;text-align:center;margin-top:8px;} .mastery::before{content:'';position:absolute;inset:0;background: radial-gradient(60% 80% at 50% 0%,rgba(140,198,62,.22),transparent 70%), linear-gradient(transparent 31px,rgba(255,255,255,.04) 32px) 0 0/100% 32px, linear-gradient(90deg,transparent 31px,rgba(255,255,255,.04) 32px) 0 0/32px 100%; pointer-events:none;} .mastery>*{position:relative;z-index:1;} .mastery h2{font-family:var(--font-d);font-size:clamp(26px,3.2vw,40px);font-weight:900;color:#fff;letter-spacing:-1px;line-height:1.08;margin:0 auto 14px;max-width:18ch;} .mastery h2 .hl{color:var(--green);} .mastery>p{font-size:15px;color:rgba(255,255,255,.6);line-height:1.7;max-width:60ch;margin:0 auto 30px;} .mastery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:900px;margin:0 auto;} @media(min-width:560px){.mastery-grid{grid-template-columns:repeat(3,1fr);}} @media(min-width:960px){.mastery-grid{grid-template-columns:repeat(5,1fr);}} .mg-item{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 12px;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);background:rgba(255,255,255,.03);transition:border-color .4s var(--ease,ease),background .4s var(--ease,ease),transform .4s var(--ease,ease);} .mg-item:hover{border-color:rgba(140,198,62,.45);background:rgba(140,198,62,.07);transform:translateY(-3px);} .mg-ico{width:46px;height:46px;border-radius:13px;background:rgba(140,198,62,.13);display:flex;align-items:center;justify-content:center;} .mg-ico .ti{font-size:23px;color:var(--green);} .mg-item span{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.82);text-align:center;line-height:1.35;} /* Tarjetas de solución "pro" (con efectos al pasar) */ .solpro-grid{display:grid;grid-template-columns:1fr;gap:22px;margin-top:32px;} @media(min-width:760px){.solpro-grid{grid-template-columns:repeat(3,1fr);}} .solpro-card{display:flex;flex-direction:column;gap:15px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:30px 28px;position:relative;overflow:hidden;text-decoration:none;color:inherit;transition:transform .45s var(--ease,ease),border-color .45s var(--ease,ease),box-shadow .45s var(--ease,ease);} .solpro-card::before{content:'';position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--green),#b6e26a);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease,ease);} .solpro-card:hover{transform:translateY(-6px);border-color:rgba(140,198,62,.5);box-shadow:0 24px 50px rgba(13,22,8,.12);} .solpro-card:hover::before{transform:scaleX(1);} .solpro-ico{width:54px;height:54px;border-radius:14px;background:rgba(140,198,62,.13);display:flex;align-items:center;justify-content:center;transition:background .45s var(--ease,ease),transform .45s var(--ease,ease);} .solpro-ico .ti{font-size:27px;color:var(--green);transition:color .45s var(--ease,ease);} .solpro-card:hover .solpro-ico{background:var(--green);transform:rotate(-6deg);} .solpro-card:hover .solpro-ico .ti{color:#fff;} .solpro-card h3{font-family:var(--font-d);font-size:19px;font-weight:800;color:var(--ink);margin:0;letter-spacing:-.4px;} .solpro-card p{font-size:14.5px;line-height:1.6;color:#6f6a64;margin:0;flex:1;} .solpro-more{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;color:var(--green);margin-top:2px;} .solpro-more .ti{transition:transform .4s var(--ease,ease);} .solpro-card:hover .solpro-more .ti{transform:translateX(6px);} /* ===== Timeline de historia (Nosotros) ===== */ .tl{position:relative;margin-top:46px;display:grid;gap:30px;} .tl::before{content:'';position:absolute;left:26px;top:12px;bottom:12px;width:3px;background:linear-gradient(180deg,rgba(140,198,62,.18),var(--green) 18%,var(--green) 82%,rgba(140,198,62,.18));border-radius:2px;} .tl-item{position:relative;padding-left:74px;} .tl-dot{position:absolute;left:14px;top:3px;width:27px;height:27px;border-radius:50%;background:var(--green);border:5px solid #fff;box-shadow:0 0 0 3px rgba(140,198,62,.22),0 6px 16px rgba(140,198,62,.45);z-index:2;display:flex;align-items:center;justify-content:center;} .tl-dot .ti{font-size:13px;color:#fff;} .tl-year{font-family:var(--font-d);font-weight:900;font-size:clamp(21px,3vw,29px);color:var(--green);letter-spacing:-1px;line-height:1;margin-bottom:11px;} .tl-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:22px 26px;transition:transform .45s var(--ease,cubic-bezier(.22,.61,.36,1)),box-shadow .45s ease,border-color .45s ease;} .tl-card:hover{transform:translateX(7px);box-shadow:0 18px 40px rgba(13,22,8,.1);border-color:rgba(140,198,62,.45);} .tl-card h4{font-family:var(--font-d);font-size:18px;font-weight:800;color:var(--ink);margin:0 0 8px;letter-spacing:-.3px;} .tl-card p{font-size:14.5px;line-height:1.65;color:#6f6a64;margin:0;} /* ===== Ficha de partner enriquecida (Nosotros) ===== */ .prt-grid{display:grid;grid-template-columns:1fr;gap:22px;margin-top:32px;} @media(min-width:820px){.prt-grid{grid-template-columns:repeat(3,1fr);}} .prt-card{position:relative;overflow:hidden;background:var(--ink);border-radius:var(--r-lg);padding:32px 30px;color:#fff;transition:transform .5s var(--ease,cubic-bezier(.22,.61,.36,1));} .prt-card::after{content:'';position:absolute;width:280px;height:280px;right:-110px;top:-110px;background:radial-gradient(circle,rgba(140,198,62,.28),transparent 70%);pointer-events:none;} .prt-card:hover{transform:translateY(-6px);} .prt-ico{width:56px;height:56px;border-radius:14px;background:rgba(140,198,62,.16);display:flex;align-items:center;justify-content:center;margin-bottom:18px;position:relative;z-index:1;} .prt-ico .ti{font-size:28px;color:var(--green);} .prt-card h3{font-family:var(--font-d);font-size:20px;font-weight:800;color:#fff;margin:0 0 6px;position:relative;z-index:1;} .prt-tag{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--green);margin-bottom:14px;position:relative;z-index:1;} .prt-card p{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.78);margin:0;position:relative;z-index:1;} .sh .hl{color:var(--green);} .ss{ font-size:14px;color:var(--text2);line-height:1.75;max-width:460px;font-weight:300; } .center .ss{margin-left:auto;margin-right:auto;} /* Modificadores de ancho para subtítulos de sección */ .ss.w-md{max-width:680px;} .ss.w-lg{max-width:880px;} .ss.w-full{max-width:none;} /* ============================================================= 09. BOTONES ============================================================= */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font-b);font-weight:500;font-size:14px;line-height:1; border:none;cursor:pointer;text-decoration:none;text-align:center; padding:13px 28px;border-radius:var(--r-pill);transition:all var(--t);white-space:nowrap; } .btn:hover{transform:translateY(-1px);} .btn:active{transform:translateY(0);} .btn i{font-size:1.05em;} .btn-p{background:var(--green);color:#fff;font-weight:700;} .btn-p:hover{background:var(--green2);box-shadow:0 8px 24px rgba(140,198,62,.2);} .btn-g{background:#fff;color:var(--ink);border:1.5px solid var(--border2);} .btn-g:hover{border-color:var(--green);} /* Botón "Soporte" del menú: outline verde con icono (enlace a Splashtop) */ .btn-soporte{background:transparent;color:var(--green3);border:1.5px solid var(--border2);font-weight:700;display:inline-flex;align-items:center;gap:7px;} .btn-soporte .ti{font-size:16px;color:var(--green);transition:color var(--t,.25s);} .btn-soporte:hover{border-color:var(--green);background:var(--greenlight);color:var(--green3);} /* ===== Páginas de error (400/403/404/500) ===== */ .errpage{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--dark,#0d1608);color:#fff;padding:90px 20px 60px;position:relative;overflow:hidden;isolation:isolate;} /* Capa base: degradado oscuro + viñeta */ .errpage::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background: radial-gradient(90% 70% at 50% 50%, rgba(20,38,8,.55), rgba(13,22,8,0) 70%), linear-gradient(180deg,#0b1306 0%,#0d1608 60%,#101a09 100%);} /* Aurora verde animada que deriva suavemente */ .errpage::after{content:'';position:absolute;inset:-25%;z-index:0;pointer-events:none; background: radial-gradient(38% 38% at 28% 30%, rgba(140,198,62,.22), transparent 62%), radial-gradient(34% 34% at 78% 68%, rgba(140,198,62,.14), transparent 62%), radial-gradient(60% 45% at 50% -5%, rgba(140,198,62,.16), transparent 60%); filter:blur(14px); animation:errAurora 18s ease-in-out infinite alternate;} .errpage>*{position:relative;z-index:1;} .err-logo{display:inline-flex;z-index:2;margin-bottom:30px;animation:fadeUp .7s both;} .err-logo img{height:30px;width:auto;filter:brightness(0) invert(1);} .err-code{font-family:var(--font-d);font-weight:900;font-size:clamp(96px,24vw,220px);line-height:.85;letter-spacing:-6px; background:linear-gradient(180deg,#aadb6e 0%,var(--green) 55%,#6fae2c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; animation:fadeUp .7s .06s both;} .errpage h1{font-family:var(--font-d);font-weight:900;font-size:clamp(24px,4vw,40px);color:#fff;letter-spacing:-1px;margin:6px 0 14px;animation:fadeUp .7s .18s both;} .errpage p{color:rgba(255,255,255,.65);max-width:520px;line-height:1.75;font-weight:300;margin:0 auto 30px;animation:fadeUp .7s .3s both;} .err-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;animation:fadeUp .7s .42s both;} .errpage .btn-g{background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(255,255,255,.18);font-weight:600;} .errpage .btn-g:hover{border-color:var(--green);background:rgba(140,198,62,.12);color:#fff;} @keyframes errAurora{ 0%{transform:translate3d(-3%,-2%,0) scale(1);} 100%{transform:translate3d(4%,3%,0) scale(1.14);} } @media(prefers-reduced-motion:reduce){ .errpage::after{animation:none;} .err-logo,.err-code,.errpage h1,.errpage p,.err-btns{animation:none;} } .btn-wh{background:#fff;color:var(--green3);font-weight:700;font-size:13px;padding:11px 24px;} .btn-wh:hover{box-shadow:var(--sh-sm);} .btn-ol{background:transparent;color:var(--green3);font-weight:600;font-size:13px;padding:10px 22px;border:1.5px solid var(--green);} .btn-ol:hover{background:var(--greenlight);} .btn-oldim{background:transparent;color:var(--text2);font-weight:500;font-size:13px;padding:10px 22px;border:1.5px solid var(--border2);} .btn-oldim:hover{border-color:var(--green);color:var(--green3);} .btn-ia{background:var(--green);color:#fff;font-weight:700;font-size:13px;padding:12px 26px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:8px;} .btn-ia:hover{background:var(--green2);} .btn-lg{font-size:15px;padding:15px 34px;} .btn-sm{font-size:13px;padding:9px 20px;} .btn-block{display:flex;width:100%;} /* Enlace tipo "Ver solucion ->" */ .lnk{ font-size:12px;color:var(--green);font-weight:600;display:inline-flex;align-items:center; gap:5px;transition:gap var(--t); } .lnk:hover{gap:9px;} /* ============================================================= 10. BADGES, PILLS Y TAGS ============================================================= */ .badge{ display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600; color:var(--green3);background:var(--greenlight);border:1px solid var(--border2); border-radius:var(--r-pill);padding:5px 14px; } .badge i{color:var(--green);} .tag{ display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:600; color:var(--green);text-transform:uppercase;letter-spacing:1.5px; } .pill{ display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border2); border-radius:var(--r-pill);padding:6px 16px;font-size:12px;color:var(--text2); cursor:pointer;transition:all var(--t); } .pill:hover,.pill.on{border-color:var(--green);color:var(--green3);background:var(--greenlight);} /* Punto que parpadea (badges "en vivo") */ .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;animation:blink 1.4s infinite;} /* ============================================================= 11. CABECERA / NAVEGACION ============================================================= */ /* Menu SIEMPRE fijo arriba. Usamos position:fixed (no sticky) para que funcione en todas las paginas sin depender del overflow de ancestros. El
reserva los 64px en el flujo para que el contenido no quede tapado por la barra fija. */ header{display:block;height:64px;} .nav{ position:fixed;top:0;left:0;right:0;z-index:var(--z-nav); background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border);height:64px;transition:box-shadow var(--t2); } .nav.sc{box-shadow:0 4px 24px rgba(140,198,62,.04);} .nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;} .nav-logo{display:flex;align-items:center;gap:10px;} .nav-logo img{height:30px;width:auto;} .nav-logo-fb{font-family:var(--font-d);font-weight:900;font-size:17px;color:var(--ink);letter-spacing:-.5px;} /* Toggle movil (visible por defecto, oculto en desktop) */ .nav-tog{ display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:10px;color:var(--ink);transition:background var(--t); } .nav-tog:hover{background:var(--greenlight);} .nav-tog i{font-size:24px;} /* Lista de enlaces: off-canvas en movil */ .nav-links{ position:fixed;top:64px;left:0;right:0;bottom:0; background:#fff;border-top:1px solid var(--border); display:flex;flex-direction:column;gap:4px; padding:20px var(--gutter) 40px;overflow-y:auto; transform:translateX(100%);opacity:0;visibility:hidden; transition:transform .32s var(--ease),opacity .25s,visibility .25s; } .nav-links.open{transform:translateX(0);opacity:1;visibility:visible;} .nav-link{ font-size:15px;color:var(--text2);display:flex;align-items:center;justify-content:space-between; gap:6px;padding:12px 4px;border-bottom:1px solid var(--border);transition:color var(--t); } .nav-link:hover,.nav-link:focus-visible{color:var(--ink);} .nav-link .chev{font-size:13px;transition:transform var(--t2);} .nav-ai{color:var(--green3);font-weight:600;} .nav-ai i{color:var(--green);} .nav-phone{ font-size:15px;color:var(--green3);font-weight:600;display:flex;align-items:center;gap:8px; padding:14px 4px; } .nav-phone i{color:var(--green);} .nav-links .btn{margin-top:14px;} /* Megamenu: en movil = panel desplegable (acordeon) */ .nav-item{display:flex;flex-direction:column;border-bottom:1px solid var(--border);} .nav-item .nav-link{border-bottom:none;} .mega{ display:grid;grid-template-columns:1fr;gap:2px;overflow:hidden; max-height:0;transition:max-height .35s var(--ease); } .nav-item.open .mega{max-height:1600px;} .nav-item.open .nav-link .chev{transform:rotate(180deg);} .mega-col h6{ font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px; font-weight:700;margin:14px 0 6px; } .mega-link{ display:flex;align-items:center;gap:10px;padding:9px 4px;font-size:14px;color:var(--text2); border-radius:8px;transition:background var(--t),color var(--t); } .mega-link:hover{background:var(--greenlight);color:var(--green3);} .mega-link i{color:var(--green);font-size:18px;flex-shrink:0;} .mega-link .mega-link-d{display:none;font-size:12px;color:var(--text3);} /* Backdrop del menu movil */ .nav-backdrop{ position:fixed;inset:64px 0 0;background:rgba(15,26,8,.3);z-index:calc(var(--z-nav) - 1); opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s; } .nav-backdrop.open{opacity:1;visibility:visible;} /* ---- Navegacion en escritorio (>=1024px) ---- */ @media(min-width:1024px){ .nav-tog{display:none;} .nav-backdrop{display:none;} .nav-links{ position:static;flex-direction:row;align-items:center;gap:28px; background:none;border:none;padding:0;overflow:visible; transform:none;opacity:1;visibility:visible; } .nav-link{font-size:13px;padding:0;border:none;} .nav-phone{font-size:13px;padding:0;} .nav-links .btn{margin-top:0;} .nav-item{flex-direction:row;align-items:center;border:none;position:static;height:64px;} /* Megamenu flotante en escritorio */ .mega{ position:absolute;left:0;right:0;top:64px;z-index:var(--z-mega); background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border); box-shadow:var(--sh-lg); grid-template-columns:repeat(3,1fr);gap:8px 40px; max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter); max-height:0;opacity:0;visibility:hidden;pointer-events:none; transition:opacity .2s,visibility .2s;overflow:visible; } /* Apertura por hover o foco dentro del item */ .nav-item:hover .mega, .nav-item:focus-within .mega, .nav-item.open .mega{ max-height:none;opacity:1;visibility:visible;pointer-events:auto;padding:28px var(--gutter) 32px; } .nav-item:hover .nav-link .chev, .nav-item:focus-within .nav-link .chev{transform:rotate(180deg);} .mega-link{padding:10px 12px;} .mega-link .mega-link-t{font-weight:600;color:var(--ink);font-size:14px;display:block;} .mega-link:hover .mega-link-t{color:var(--green3);} .mega-link .mega-link-d{display:block;margin-top:2px;} } /* ============================================================= 12. HERO (HOME) ============================================================= */ /* ---------- HERO OSCURO "Aurora Background + Shape Landing" (home) ---------- El hero es de tema OSCURO: fondo casi negro verdoso (--dark) con DOS capas decorativas inyectadas por JS (aria-hidden): .hero-aurora -> "Aurora Background" estilo Aceternity recreado en CSS: UNA sola capa ligera con dos repeating-linear-gradient (velo + franjas verdes de marca). Anima SOLO background-position (60s, lineal), con mix-blend-mode para fundir el verde sobre el oscuro y mascara radial para difuminar los bordes. Sustituye al antiguo SVG de 72 trazos (iba lento). El contenido va CENTRADO por encima (z-index:2). El parallax (var --py) se aplica a las capas decorativas con transform (sin reflow). El

es el LCP: su revelado es CSS puro y corto. Selector .hero: solo existe en home. */ .hero{ background:var(--dark);color:#fff; padding:72px 0 72px;position:relative;overflow:hidden;isolation:isolate;--py:0px; } /* Atmosfera de fondo: brillo verde superior + viñeta + fundido inferior hacia la barra de partners (clara) para una transicion limpia. Capa base. */ .hero::before{ content:'';position:absolute;inset:0;z-index:-3;pointer-events:none; background: radial-gradient(70% 50% at 50% -8%,rgba(140,198,62,.18),rgba(140,198,62,0) 60%), radial-gradient(90% 70% at 50% 50%,rgba(20,38,8,.6),rgba(13,22,8,0) 70%), linear-gradient(180deg,#0b1306 0%,#0d1608 55%,#101a09 100%); } /* Viñeta + fundido al borde inferior (transicion al .partners verde claro). */ .hero::after{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(120% 120% at 50% 40%,rgba(13,22,8,0) 55%,rgba(8,14,4,.7) 100%), linear-gradient(180deg,transparent 78%,rgba(13,22,8,.9) 100%); } /* --- Capa de AURORA "Aceternity" oscura (inyectada por JS) --- .hero-aurora -> wrapper: recorta, aplica la mascara radial (difumina hacia los bordes) y engancha el parallax (--py). .hero-aurora-layer -> capa unica con dos repeating-linear-gradient superpuestos. Anima SOLO background-position (barato). mix-blend-mode:screen funde las franjas verdes sobre el fondo oscuro sin tapar el contenido. */ .hero-aurora{ position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden; transform:translate3d(0,calc(var(--py) * 1),0);will-change:transform; /* Mascara radial: aurora visible arriba-centro y difuminada hacia los bordes, dejando libre la franja inferior y los laterales (estilo Aceternity). */ -webkit-mask-image:radial-gradient(125% 90% at 50% 8%,#000 0%,#000 32%,rgba(0,0,0,0) 72%); mask-image:radial-gradient(125% 90% at 50% 8%,#000 0%,#000 32%,rgba(0,0,0,0) 72%); } .hero-aurora-layer{ position:absolute;inset:-30%; /* (1) velo tenue con franjas de luz + (2) franjas de la paleta verde de marca SEPARADAS por huecos transparentes, para que el fondo oscuro siga viendose entre ellas (screen solo "enciende" las bandas verdes). */ background-image: repeating-linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 8%, rgba(190,224,130,.06) 11%, rgba(255,255,255,0) 14%, rgba(255,255,255,0) 20%), repeating-linear-gradient(100deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 6%, #8CC63E 9%, #7ab535 12%, #bee082 14%, #a3d65c 17%, #27500A 20%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 34%); background-size:300% 200%, 220% 120%; background-position:50% 50%, 50% 50%; mix-blend-mode:screen; filter:blur(56px) saturate(120%); opacity:.34; animation:aurora 60s linear infinite; will-change:background-position; } /* --- Contenido centrado --- */ .hero .wrap{position:relative;z-index:2;} /* --- Foto de fondo del hero (index .hero y resto .page-hero) --- */ .hero-photo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;} .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 28%; opacity:.5;filter:grayscale(.18) contrast(1.05) brightness(.92);} .hero-photo::after{content:'';position:absolute;inset:0;background: radial-gradient(120% 100% at 50% 38%, rgba(10,20,6,.20), rgba(10,20,6,.62) 82%), linear-gradient(180deg, rgba(10,20,6,.42) 0%, rgba(10,20,6,.34) 55%, rgba(13,22,8,.9) 100%);} .page-hero--photo .wrap{position:relative;z-index:2;} @media(max-width:760px){.hero-photo img{opacity:.38;}} /* Variante: foto a sangre completa con velo cargado a la izquierda (texto) */ .hero-photo.is-contain img{object-fit:cover;object-position:50% 60%;opacity:.22;} .hero-photo.is-contain::after{background: linear-gradient(90deg, rgba(10,20,6,.92) 0%, rgba(10,20,6,.72) 30%, rgba(10,20,6,.30) 62%, rgba(10,20,6,.12) 100%), linear-gradient(180deg, rgba(10,20,6,.22) 0%, rgba(10,20,6,.18) 60%, rgba(13,22,8,.85) 100%);} @media(max-width:760px){.hero-photo.is-contain img{opacity:.4;}} /* Hero sin aurora animada (cuando ya hay foto de fondo) */ .page-hero--noaura > .hero-aurora{display:none;} .hero-content{ display:flex;flex-direction:column;align-items:center;text-align:center; max-width:880px;margin:0 auto; } .hero-title{ font-family:var(--font-d);font-weight:900; font-size:clamp(34px,8.5vw,84px);line-height:1;letter-spacing:-1.5px; margin-bottom:24px;max-width:15ch;text-wrap:balance; /* Degradado de blanco a verde lima (estilo "title2" de Kokonut). */ background:linear-gradient(180deg,#ffffff 0%,#ffffff 35%,#dcecc4 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; /* Revelado CSS corto (LCP): aparece casi de inmediato. */ opacity:0;transform:translateY(14px); animation:heroTitleIn .5s .12s var(--ease) both; } .hero-title-acc{ background:linear-gradient(180deg,#aadb6e 0%,var(--green) 55%,#6fae2c 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:#8CC63E; } .hero-sub{ font-size:clamp(15px,1.7vw,18px);color:rgba(255,255,255,.6); line-height:1.7;max-width:600px;font-weight:300;margin-bottom:36px; opacity:0;animation:fadeUp .6s .3s both; } .hero-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;} .hero .a3{opacity:0;animation:fadeUp .6s .42s both;} .hero .a4{opacity:0;animation:fadeUp .6s .54s both;} /* Boton secundario sobre fondo OSCURO (variante de .btn-g para el hero). */ .btn-gd{ background:rgba(255,255,255,.05);color:#fff;font-weight:600; border:1.5px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } .btn-gd:hover{border-color:var(--green);background:rgba(140,198,62,.1);} @media(max-width:600px){ .hero-title{font-size:clamp(32px,8vw,42px);letter-spacing:-1px;} /* Aurora mas barata en movil: menos blur y un punto mas de opacidad. */ .hero-aurora-layer{filter:blur(38px) saturate(120%);opacity:.4;} .hero-stats{gap:0;} .hero-stats .stat{padding:0 clamp(6px,3vw,16px);} .hero-stats .stat-n{letter-spacing:-1px;} } @media(min-width:768px){ .hero{padding:92px 0 84px;} } @media(min-width:1024px){ .hero{padding:112px 0 104px;min-height:660px;display:flex;align-items:center;} } /* Animaciones del hero oscuro */ @keyframes heroTitleIn{to{opacity:1;transform:translateY(0);}} /* Aurora Aceternity: desplaza SOLO background-position (barato, fluido). */ @keyframes aurora{ from{background-position:50% 50%,50% 50%;} to{background-position:350% 50%,350% 50%;} } /* ============================================================= 13. PAGE-HERO (cabecera de paginas internas) + BREADCRUMB ============================================================= */ /* ---------- PAGE-HERO OSCURO "Aurora Background" (paginas internas) ---------- Misma estetica que el HERO de la home: fondo casi negro verdoso (--dark) con la MISMA "Aurora Background" estilo Aceternity (capa unica .hero-aurora / .hero-aurora-layer, definida en la seccion 12) inyectada por JS. Aqui solo ajustamos lo propio de la cabecera (mas baja que el hero): atmosfera de fondo, mascara de la aurora adaptada y colores del contenido (breadcrumb, h1, subtitulo, botones) en claro para buen contraste sobre el oscuro. El

es el LCP de estas paginas: aparece de inmediato (excluido del sistema JS de reveal por palabras). Con prefers-reduced-motion la aurora NO se inyecta y queda solo el fondo oscuro estatico de .page-hero::before. */ .page-hero{ position:relative;overflow:hidden;isolation:isolate; background:var(--dark);color:#fff;--py:0px; border-bottom:1px solid rgba(140,198,62,.12); padding:calc(var(--sec-pad) - 8px) 0; } /* Atmosfera de fondo (capa base): brillo verde superior + viñeta + fundido inferior hacia la barra de partners (clara), para una transicion limpia. Mismo lenguaje que .hero::before pero comprimido para una cabecera mas baja. */ .page-hero::before{ content:'';position:absolute;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(80% 75% at 50% -12%,rgba(140,198,62,.16),rgba(140,198,62,0) 62%), radial-gradient(100% 100% at 50% 40%,rgba(20,38,8,.5),rgba(13,22,8,0) 72%), linear-gradient(180deg,#0b1306 0%,#0d1608 60%,#101a09 100%); } /* Viñeta + fundido al borde inferior (transicion al .partners verde claro). */ .page-hero::after{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,transparent 72%,rgba(13,22,8,.85) 100%); } .page-hero .wrap{position:relative;z-index:2;} .page-hero h1{ font-size:clamp(32px,5vw,56px);letter-spacing:-1.8px;margin-bottom:16px; max-width:780px;color:#fff; /* line-height y padding extra: con background-clip:text un line-height muy ajustado recorta los descendentes (g, y) y las tildes. */ line-height:1.12;padding-bottom:.08em; /* Degradado sutil blanco -> verde lima, como en el hero de la home. */ background:linear-gradient(180deg,#ffffff 0%,#ffffff 55%,#dcecc4 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } /* Palabra resaltada (.hl) dentro del h1: verde lima sobre oscuro. */ .page-hero h1 .hl{ background:linear-gradient(180deg,#aadb6e 0%,var(--green) 55%,#6fae2c 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:#8CC63E; } .page-hero p{font-size:16px;color:rgba(255,255,255,.6);font-weight:300;line-height:1.75;max-width:600px;} .page-hero .hero-btns{margin-top:28px;} /* Boton secundario (.btn-g) del page-hero adaptado al fondo oscuro: usa la misma variante translucida que el hero de la home (.btn-gd). */ .page-hero .btn-g{ background:rgba(255,255,255,.05);color:#fff;font-weight:600; border:1.5px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } .page-hero .btn-g:hover{border-color:var(--green);background:rgba(140,198,62,.1);color:#fff;} /* --- Fotos del equipo en el fondo del hero (Nosotros) --- */ .hero-people{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;} .hero-people img{ position:absolute;top:0;height:100%;width:48%;object-fit:cover;object-position:center 22%; opacity:.34;filter:grayscale(.45) contrast(1.03) brightness(.9); } .hero-people .hp-left{left:0;width:58%;object-position:center 22%;transform:translateX(-26%); -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 60%,rgba(0,0,0,0) 97%); mask-image:linear-gradient(90deg,#000 0%,#000 60%,rgba(0,0,0,0) 97%);} .hero-people .hp-right{right:0;width:54%;object-position:center 22%;transform:translateX(14%); -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 46%,rgba(0,0,0,0) 93%); mask-image:linear-gradient(270deg,#000 0%,#000 46%,rgba(0,0,0,0) 93%);} /* Velo oscuro sobre las fotos para mantener el contraste del texto blanco */ .hero-people::after{content:'';position:absolute;inset:0; background: radial-gradient(120% 95% at 50% 50%, rgba(10,20,6,.30), rgba(10,20,6,.78) 80%), linear-gradient(180deg, rgba(10,20,6,.45), rgba(10,20,6,.70));} .page-hero--people .wrap{position:relative;z-index:2;} @media(max-width:760px){.hero-people{display:none;}} /* --- Aurora del page-hero: reutiliza .hero-aurora (seccion 12) pero con la mascara ajustada a una cabecera mas baja (brillo arriba, difuminado hacia abajo para no tapar la barra de partners). --- */ .page-hero .hero-aurora{ -webkit-mask-image:radial-gradient(140% 130% at 50% -10%,#000 0%,#000 38%,rgba(0,0,0,0) 80%); mask-image:radial-gradient(140% 130% at 50% -10%,#000 0%,#000 38%,rgba(0,0,0,0) 80%); } .breadcrumb{margin-bottom:18px;} .breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.55);} .breadcrumb li{display:flex;align-items:center;gap:8px;} .breadcrumb li:not(:last-child)::after{content:'/';color:rgba(255,255,255,.28);} .breadcrumb a{color:rgba(255,255,255,.7);transition:color var(--t);} .breadcrumb a:hover{color:var(--green);} .breadcrumb li[aria-current]{color:#aadb6e;font-weight:600;} /* ============================================================= 14. BARRA DE PARTNERS / TRUST BAR ============================================================= */ .partners{ background:var(--greenlight);border-top:1px solid var(--border);border-bottom:1px solid var(--border); padding:15px 0; } .partners .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;} .p-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;white-space:nowrap;} .p-sep{width:1px;height:20px;background:var(--border2);flex-shrink:0;} .p-logo{display:flex;align-items:center;gap:7px;font-family:var(--font-d);font-size:13px;font-weight:700;color:var(--text2);white-space:nowrap;} .p-logo i{color:var(--green);font-size:16px;} .p-since{font-size:12px;color:var(--text3);} @media(min-width:1024px){ .partners .wrap{gap:24px;justify-content:flex-start;} .p-since{margin-left:auto;} } /* ============================================================= 15. CIFRAS / STATS ============================================================= */ .stats{display:flex;flex-direction:column;gap:20px;} .hero-stats{display:flex;flex-direction:row;flex-wrap:nowrap;border-top:1px solid rgba(255,255,255,.12);padding-top:26px;margin-top:48px;gap:0;justify-content:center;max-width:620px;width:100%;} .hero-stats .stat{flex:1;min-width:0;padding:0 clamp(8px,2vw,32px);border-right:1px solid rgba(255,255,255,.12);border-bottom:none;text-align:center;} .hero-stats .stat:first-child{padding-left:0;} .hero-stats .stat:last-child{border-right:none;} .hero-stats .stat-n{font-size:clamp(24px,5.5vw,40px);color:#fff;} .hero-stats .stat-l{font-size:clamp(9px,1.1vw,11px);color:rgba(255,255,255,.5);} .stat{padding:0 0 16px;border-bottom:1px solid var(--border);} .stat:last-child{border-bottom:none;} .stat-n{font-family:var(--font-d);font-size:40px;font-weight:900;color:var(--ink);line-height:1;letter-spacing:-1.5px;} .stat-n .acc,.acc{color:var(--green);} .stat-l{font-size:11px;color:var(--text3);margin-top:5px;text-transform:uppercase;letter-spacing:1px;} @media(min-width:768px){ .stats{flex-direction:row;border-top:1px solid var(--border);padding-top:32px;} .hero-stats{flex-direction:row;padding-top:32px;margin-top:56px;} .stats .stat{padding:0 36px;border-right:1px solid var(--border);border-bottom:none;} .stat:first-child{padding-left:0;} .stat:last-child{border-right:none;} } /* Variante en tarjetas (p.ej. Nosotros: 4 cifras) */ .stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;} .stat-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r);padding:24px 20px;text-align:center;} .stat-card .stat-n{font-size:34px;} @media(min-width:1024px){.stats-grid{grid-template-columns:repeat(4,1fr);}} /* Variante centrada (p. ej. 3 cifras): tarjetas centradas y que envuelven */ .stats-grid--center{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;} .stats-grid--center .stat-card{flex:0 1 240px;} /* ============================================================= 16. SOLUCIONES (grid + cards) ============================================================= */ .sol-grid{display:grid;grid-template-columns:1fr;gap:16px;} @media(min-width:768px){.sol-grid{grid-template-columns:repeat(2,1fr);}} @media(min-width:1024px){.sol-grid{grid-template-columns:repeat(3,1fr);}} .sol-card{ background:#fff;border:1.5px solid var(--border);border-radius:var(--r-lg); padding:32px 28px;position:relative;overflow:hidden; transition:border-color var(--t),transform var(--t),box-shadow var(--t); } .sol-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--green); transform:scaleX(0);transform-origin:left;transition:transform .35s; } .sol-card:hover{border-color:var(--border2);transform:translateY(-4px);box-shadow:var(--sh);} .sol-card:hover::before{transform:scaleX(1);} .sol-num{font-family:var(--font-d);font-size:56px;font-weight:900;color:var(--green);opacity:.55;line-height:1;margin-bottom:-12px;pointer-events:none;} .sol-ico{width:48px;height:48px;background:var(--greenlight);border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;} .sol-ico i{font-size:22px;color:var(--green);} .sol-card h3{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--ink);margin-bottom:10px;line-height:1.2;} .sol-card p{font-size:13px;color:var(--text2);line-height:1.7;} .sol-card .lnk,.sol-lnk{margin-top:20px;font-size:12px;color:var(--green);font-weight:600;display:inline-flex;align-items:center;gap:5px;transition:gap var(--t);} .sol-card:hover .lnk,.sol-card:hover .sol-lnk{gap:9px;} /* Tarjeta CTA dentro del grid */ .sol-cta{background:var(--green);border-color:var(--green);display:flex;flex-direction:column;} .sol-cta:hover{background:var(--green2);border-color:var(--green2);box-shadow:0 16px 48px rgba(140,198,62,.3);transform:translateY(-4px);} .sol-cta::before{display:none;} /* Mayor especificidad (.sol-cta .sol-cta-x = 0,2,0) para ganar a la regla global .sol-card p (0,1,1), que si no pintaria estos

en gris oscuro. */ .sol-cta .sol-cta-t{font-family:var(--font-d);font-size:26px;font-weight:900;color:#fff;line-height:1.1;margin-bottom:12px;} .sol-cta .sol-cta-s{font-size:13px;color:rgba(255,255,255,.85);line-height:1.65;} .sol-cta .btn{margin-top:22px;align-self:flex-start;} /* ============================================================= 17. AREAS DE SOLUCION (pagina /soluciones/) ============================================================= */ .area{padding:var(--sec-pad) 0;border-bottom:1px solid var(--border);} .area:last-of-type{border-bottom:none;} .area-head{max-width:640px;margin-bottom:36px;} .area-head h2{margin-bottom:14px;} .area-head p{font-size:15px;color:var(--text2);font-weight:300;line-height:1.75;} .area--alt{background:var(--greenbg);} /* Lista de chequeo (areas con bullets, p.ej. ciberseguridad / backups) */ .feature-list{display:grid;grid-template-columns:1fr;gap:12px;margin-top:8px;} @media(min-width:768px){.feature-list{grid-template-columns:repeat(2,1fr);}} .feature-list li{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--text2);line-height:1.6;} .feature-list li::before{ content:'';width:20px;height:20px;flex-shrink:0;margin-top:1px;border-radius:50%; background:var(--greenlight) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238CC63E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-11'/%3E%3C/svg%3E") center/12px 12px no-repeat; } /* ============================================================= 18. SECCION IA (oscura) ============================================================= */ /* Fondo estatico: cuadricula sutil + resplandor verde emanando desde la izquierda. Cubre TODA la seccion (ambas columnas), sin animacion. */ .ia-sec{ position:relative; background: radial-gradient(80% 120% at 0% 50%,rgba(140,198,62,.18) 0%,rgba(140,198,62,.07) 28%,rgba(13,22,8,0) 60%), linear-gradient(rgba(140,198,62,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(140,198,62,.05) 1px,transparent 1px), var(--ink); background-size:auto,40px 40px,40px 40px,auto; } .ia-top{background:var(--green);padding:12px var(--gutter);display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .ia-dot{width:8px;height:8px;border-radius:50%;background:var(--ink);opacity:.45;animation:blink 1.2s infinite;flex-shrink:0;} .ia-tlbl{font-family:var(--font-d);font-size:12px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:2px;} .ia-tr{margin-left:auto;font-size:11px;color:rgba(0,0,0,.4);} .syn-logo{display:block;height:26px;width:auto;opacity:.92;filter:brightness(0);} .ia-body{display:grid;grid-template-columns:1fr;} .ia-left{padding:48px var(--gutter);border-bottom:1px solid rgba(255,255,255,.06);} .ia-ey{font-size:11px;color:var(--green);font-weight:600;text-transform:uppercase;letter-spacing:2px;margin-bottom:18px;display:flex;align-items:center;gap:10px;} .ia-ey::before{content:'';width:24px;height:1px;background:var(--green);flex-shrink:0;} .ia-left h2{font-family:var(--font-d);font-size:clamp(28px,3vw,44px);font-weight:900;color:#fff;letter-spacing:-1.5px;line-height:1.05;margin-bottom:20px;} .ia-left h2 .hl{color:var(--green);} .ia-left>p{font-size:14px;color:rgba(255,255,255,.5);line-height:1.8;font-weight:300;max-width:none;margin-bottom:32px;} .ia-pills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:36px;} /* Todas las pills con el mismo formato verde (como la activa "Copilot"). */ .ia-pill{border:1px solid var(--green);border-radius:var(--r-pill);padding:6px 13px;font-size:12px;color:var(--green);background:rgba(140,198,62,.08);display:flex;align-items:center;gap:6px;cursor:pointer;transition:all var(--t);white-space:nowrap;} .ia-pill i{font-size:13px;} .ia-pill:hover,.ia-pill.on{border-color:var(--green);color:var(--green);background:rgba(140,198,62,.16);} .ia-right{background:transparent;padding:32px var(--gutter);display:flex;flex-direction:column;gap:14px;} /* Tarjetas semitransparentes: dejan ver la cuadricula y el resplandor verde del fondo de la seccion por detras. Todas iguales (sin variante resaltada). */ .ia-card{background:rgba(13,22,8,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:20px;display:flex;gap:14px;align-items:flex-start;transition:border-color var(--t);} .ia-card:hover{border-color:rgba(140,198,62,.3);} .ia-ico{width:42px;height:42px;border-radius:10px;background:var(--dark2);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .ia-ico i{font-size:20px;color:var(--green);} .ia-ct{font-family:var(--font-d);font-size:14px;font-weight:700;color:#fff;margin-bottom:5px;} .ia-cd{font-size:12px;color:rgba(255,255,255,.4);line-height:1.65;} .ia-badge{display:inline-block;margin-top:8px;font-size:10px;color:var(--green);background:rgba(140,198,62,.1);border:1px solid rgba(140,198,62,.25);border-radius:var(--r-pill);padding:2px 10px;} /* Tarjetas grandes con logo de plataforma (p. ej. virtualización VMware / Hyper-V) */ .ia-card--logo{flex-direction:column;align-items:flex-start;gap:12px;padding:26px;} .ia-card--logo .ia-cd{font-size:13px;color:rgba(255,255,255,.6);line-height:1.7;} .ia-logo{height:30px;display:flex;align-items:center;} .ia-logo img{height:26px;width:auto;opacity:.95;} /* Logo a color (p. ej. Microsoft 365) dentro de la barra superior verde */ .ia-tr-logo{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-d);font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1px;} .ia-tr-logo img{height:18px;width:18px;display:block;} .ia-tr-logo i{font-size:19px;line-height:1;} .ia-bar{border-top:1px solid rgba(255,255,255,.06);padding:15px var(--gutter);display:flex;align-items:center;gap:14px;background:var(--dark);flex-wrap:wrap;} .ia-bar-t{font-size:12px;color:rgba(255,255,255,.35);} .ia-bar-t strong{color:var(--green);font-weight:500;} .ia-bar>i{color:var(--green);font-size:16px;flex-shrink:0;} /* Boton "Ver casos de uso IA": identico a "Descubrir soluciones IA" (.btn-ia, verde con texto e icono blancos), alineado a la derecha. */ .ia-bar .btn-ia{margin-left:auto;} @media(min-width:1024px){ .ia-top{padding:12px 40px;} .ia-body{grid-template-columns:1fr 1fr;} .ia-left{padding:72px 56px 72px 40px;border-right:1px solid rgba(255,255,255,.06);border-bottom:none;} .ia-right{padding:40px 36px;} .ia-bar{padding:15px 40px;} } /* ============================================================= 19. SECTORES ============================================================= */ /* -- Seccion "Por sector" de la home: fondo BLANCO, rejilla de 6 tarjetas claras (estilo feature-cards). Reutiliza .sector-grid / .sector-card / .sector-ico (definidas mas abajo, compartidas con la pagina /sectores), con iconos de la fuente Tabler (no SVG). El bloque usa la clase generica .section, asi que no necesita estilos propios aqui. */ /* -- Grid completo (pagina /sectores/ con 21 sectores) -- */ .sector-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:8px;} @media(min-width:600px){.sector-grid{grid-template-columns:repeat(2,1fr);}} @media(min-width:1024px){.sector-grid{grid-template-columns:repeat(3,1fr);}} .sector-card{ background:#fff;border:1.5px solid var(--border);border-radius:var(--r);padding:26px 24px; transition:border-color var(--t),transform var(--t),box-shadow var(--t); } .sector-card:hover{border-color:var(--border2);transform:translateY(-3px);box-shadow:var(--sh-sm);} .sector-card .sector-ico{width:44px;height:44px;background:var(--greenlight);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;} .sector-card .sector-ico i{font-size:20px;color:var(--green);} .sector-card h3{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px;} .sector-card p{font-size:13px;color:var(--text2);line-height:1.65;} /* ============================================================= 20. "POR QUE ELEGIRNOS" ============================================================= */ .porq{background:var(--green);padding:var(--sec-pad) 0;position:relative;overflow:hidden;} /* Textura sutil on-brand: halo de luz + malla de puntos tenue, sin afectar a la legibilidad */ .porq::before{ content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background-image: radial-gradient(120% 90% at 88% 8%, rgba(255,255,255,.22), transparent 55%), radial-gradient(rgba(255,255,255,.085) 1.4px, transparent 1.5px); background-size:auto, 26px 26px; background-position:0 0, 0 0; } .porq .wrap{position:relative;z-index:1;} .porq-in{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;} .porq-l h2{font-family:var(--font-d);font-size:clamp(30px,4.5vw,54px);font-weight:900;color:#fff;letter-spacing:-2px;line-height:1.0;margin-bottom:20px;} .porq-l>p{font-size:14px;color:rgba(255,255,255,.78);line-height:1.8;font-weight:300;max-width:380px;margin-bottom:30px;} .porq-grid{display:grid;grid-template-columns:1fr;gap:14px;} .porq-card{background:rgba(255,255,255,.15);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--r);padding:22px;} .porq-card i{font-size:24px;color:#fff;margin-bottom:12px;display:block;} .porq-card h4{font-family:var(--font-d);font-size:14px;font-weight:700;color:#fff;margin-bottom:6px;} .porq-card p{font-size:12px;color:rgba(255,255,255,.7);line-height:1.6;} @media(min-width:560px){.porq-grid{grid-template-columns:1fr 1fr;}} @media(min-width:1024px){.porq-in{grid-template-columns:1fr 1fr;gap:72px;}} /* ============================================================= 21. VALORES (pagina Nosotros) ============================================================= */ .value-grid{display:grid;grid-template-columns:1fr;gap:16px;} @media(min-width:768px){.value-grid{grid-template-columns:repeat(2,1fr);}} .value-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r);padding:28px;transition:border-color var(--t),box-shadow var(--t);} .value-card:hover{border-color:var(--border2);box-shadow:var(--sh-sm);} .value-card .value-ico{width:46px;height:46px;border-radius:12px;background:var(--greenlight);display:flex;align-items:center;justify-content:center;margin-bottom:16px;} .value-card .value-ico i{font-size:22px;color:var(--green);} .value-card h3{font-size:17px;font-weight:700;margin-bottom:10px;} .value-card p{font-size:14px;color:var(--text2);line-height:1.7;} /* Bloque de texto largo (historia, prosa) */ .prose{max-width:760px;} .prose p{font-size:16px;color:var(--text2);line-height:1.85;font-weight:300;margin-bottom:18px;} .prose p:last-child{margin-bottom:0;} .prose h2{margin-bottom:18px;} /* ============================================================= 22. CASOS DE EXITO ============================================================= */ /* Franja de logos (home + casos) */ .logos-strip{display:flex;flex-wrap:wrap;background:var(--ink);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);overflow:hidden;margin-top:36px;} .logo-i{flex:1 1 50%;padding:24px 18px;border-right:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;transition:background var(--t);} .logo-i:hover{background:rgba(255,255,255,.04);} .logo-i img{max-height:40px;width:auto;max-width:100%;object-fit:contain;opacity:.88;transition:opacity var(--t);} .logo-i:hover img{opacity:1;} @media(min-width:600px){.logo-i{flex:1 1 25%;}} /* Tarjetas de caso (pagina /casos-de-exito/) */ .casos-grid{display:grid;grid-template-columns:1fr;gap:20px;} @media(min-width:768px){.casos-grid{grid-template-columns:repeat(2,1fr);}} .caso-card{ background:#fff;border:1.5px solid var(--border);border-radius:var(--r-lg);padding:30px 28px;overflow:hidden; display:flex;flex-direction:column;transition:border-color var(--t),transform var(--t),box-shadow var(--t); } .caso-card:hover{border-color:var(--border2);transform:translateY(-4px);box-shadow:var(--sh);} .caso-head{margin:-30px -28px 22px;min-height:88px;background:var(--green);display:flex;align-items:center;justify-content:center;padding:20px 28px;position:relative;overflow:hidden;} .caso-head::after{content:'';position:absolute;width:220px;height:220px;right:-90px;top:-90px;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);pointer-events:none;} .caso-head img{max-height:44px;width:auto;max-width:78%;object-fit:contain;filter:brightness(0) invert(1);position:relative;z-index:1;} .caso-top{display:flex;align-items:center;gap:15px;margin-bottom:20px;} .caso-ico{width:52px;height:52px;border-radius:14px;background:rgba(140,198,62,.13);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .45s ease,transform .45s ease;} .caso-ico .ti{font-size:26px;color:var(--green);transition:color .45s ease;} .caso-card:hover .caso-ico{background:var(--green);transform:rotate(-6deg);} .caso-card:hover .caso-ico .ti{color:#fff;} .caso-card .caso-name{font-family:var(--font-d);font-size:22px;font-weight:900;color:var(--ink);letter-spacing:-.5px;margin-bottom:4px;line-height:1.1;} .caso-card .caso-meta{font-size:12px;color:var(--green3);font-weight:600;margin-bottom:18px;} .caso-top .caso-name,.caso-top .caso-meta{margin-bottom:0;} .caso-block{margin-bottom:14px;} .caso-block h4{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--green);margin-bottom:5px;} .caso-block p{font-size:13.5px;color:var(--text2);line-height:1.7;} .caso-card .caso-result{margin-top:auto;background:var(--greenlight);border-radius:var(--r-sm);padding:14px 16px;} .caso-card .caso-result h4{color:var(--green3);} .caso-card .caso-result p{color:var(--green3);font-weight:500;} /* ============================================================= 23. METODOLOGIA / PASOS ============================================================= */ .steps{display:grid;grid-template-columns:1fr;gap:16px;counter-reset:step;} @media(min-width:768px){.steps{grid-template-columns:repeat(2,1fr);}} @media(min-width:1024px){.steps.steps-5{grid-template-columns:repeat(5,1fr);}} .step{position:relative;background:#fff;border:1.5px solid var(--border);border-radius:var(--r);padding:24px 22px;} .step .step-n{font-family:var(--font-d);font-size:13px;font-weight:900;color:#fff;background:var(--green);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:14px;} .step h4{font-size:15px;font-weight:700;margin-bottom:8px;} .step p{font-size:13px;color:var(--text2);line-height:1.65;} .step .step-time{display:inline-block;margin-top:10px;font-size:11px;color:var(--green3);font-weight:600;} /* ============================================================= 24. TABLAS DE CONTENIDO ============================================================= */ .table-wrap{overflow-x:auto;border:1.5px solid var(--border);border-radius:var(--r);} table.t{width:100%;border-collapse:collapse;font-size:14px;min-width:480px;} table.t th,table.t td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--border);} table.t th{font-family:var(--font-d);font-weight:700;color:var(--ink);background:var(--greenbg);font-size:13px;} table.t tr:last-child td{border-bottom:none;} table.t td{color:var(--text2);} table.t tr:hover td{background:var(--greenbg);} /* ============================================================= 25. FAQ / ACORDEON ============================================================= */ .faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px;} .faq-item{border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;background:#fff;transition:border-color var(--t);} .faq-item.open{border-color:var(--border2);} .faq-q{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px; padding:20px 22px;font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--ink);text-align:left; } .faq-q .faq-ic{font-size:20px;color:var(--green);flex-shrink:0;transition:transform var(--t2);} .faq-item.open .faq-q .faq-ic{transform:rotate(45deg);} .faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);} .faq-item.open .faq-a{max-height:480px;} .faq-a-in{padding:0 22px 22px;font-size:14px;color:var(--text2);line-height:1.75;} /* ============================================================= 26. BLOG / RECURSOS ============================================================= */ .blog-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:44px;} @media(min-width:768px){.blog-grid{grid-template-columns:repeat(2,1fr);}} @media(min-width:1024px){.blog-grid{grid-template-columns:repeat(3,1fr);}} .blog-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--t),box-shadow var(--t);} .blog-card:hover{transform:translateY(-5px);box-shadow:var(--sh);} .blog-thumb{height:120px;background:var(--green);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center;} /* Numero grande (01/02/03) sobre fondo verde: blanco con 66% de opacidad */ .blog-num{font-family:var(--font-d);font-size:92px;font-weight:900;color:rgba(255,255,255,.66);line-height:1;letter-spacing:-3px;} .blog-thumb i{font-size:34px;color:var(--green);opacity:.5;} .blog-body{padding:24px;flex:1;display:flex;flex-direction:column;} .blog-tag{font-size:10px;color:var(--green);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;} .blog-card h4{font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--ink);line-height:1.3;margin-bottom:10px;} .blog-desc{font-size:12px;color:var(--text2);line-height:1.7;flex:1;margin-bottom:18px;} .blog-meta{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:6px;border-top:1px solid var(--border);padding-top:14px;} .blog-meta i{color:var(--green);font-size:13px;} a.blog-card{text-decoration:none;color:inherit;} a.blog-card .blog-num{transition:transform .5s var(--ease,cubic-bezier(.22,.61,.36,1));} a.blog-card:hover .blog-num{transform:scale(1.08);} .blog-card h4 .lnk-arrow{display:inline-block;transition:transform .4s ease;} a.blog-card:hover h4 .lnk-arrow{transform:translateX(4px);} /* ===== Blog: buscador + filtro de categorías + tarjetas pro ===== */ .blog-toolbar{display:flex;flex-direction:column;gap:18px;margin-bottom:18px;} @media(min-width:860px){.blog-toolbar{flex-direction:row;align-items:center;justify-content:space-between;}} .blog-search{position:relative;width:100%;max-width:440px;} .blog-search>.ti{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:var(--green);font-size:20px;pointer-events:none;} .blog-search input{width:100%;padding:13px 18px 13px 48px;border:1.5px solid var(--border);border-radius:100px;font-size:15px;font-family:inherit;color:var(--ink);background:#fff;transition:border-color .3s ease,box-shadow .3s ease;} .blog-search input::placeholder{color:var(--text3);} .blog-search input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(140,198,62,.13);} .blog-cats{display:flex;flex-wrap:wrap;gap:9px;} .blog-cat{font-family:var(--font-d);font-weight:700;font-size:13px;padding:9px 17px;border-radius:100px;border:1.5px solid var(--border);background:#fff;color:var(--text2);cursor:pointer;transition:background .3s ease,border-color .3s ease,color .3s ease,transform .3s ease;white-space:nowrap;} .blog-cat:hover{border-color:var(--green);color:var(--green3);transform:translateY(-2px);} .blog-cat.on{background:var(--green);border-color:var(--green);color:#fff;} .blog-count{font-size:13px;color:var(--text3);margin:0 0 22px;font-weight:500;} .blog-card.is-hidden{display:none;} .blog-empty{display:none;text-align:center;padding:46px 20px;} .blog-empty.show{display:block;} .blog-empty .ti{font-size:42px;color:var(--green);opacity:.55;} .blog-empty p{margin-top:12px;font-size:15px;color:var(--text2);} /* Thumb con degradado + icono de categoría como marca de agua */ .blog-thumb{position:relative;overflow:hidden;background:linear-gradient(135deg,#9ed24f 0%,var(--green) 55%,#6fa82e 100%);} .blog-thumb .blog-ico{position:absolute;right:-12px;bottom:-20px;font-size:108px;color:rgba(255,255,255,.18);line-height:1;pointer-events:none;transition:transform .5s var(--ease,cubic-bezier(.22,.61,.36,1));} a.blog-card:hover .blog-thumb .blog-ico{transform:scale(1.12) rotate(-6deg);} .blog-num{position:relative;z-index:1;} /* ===== Artículo (blog post) ===== */ .article-head{max-width:780px;margin:0 auto;text-align:center;} .article-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--green3);background:var(--greenlight);border:1px solid var(--border2);border-radius:100px;padding:6px 15px;margin-bottom:20px;} .article-meta{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;align-items:center;margin-top:22px;font-size:13.5px;color:var(--text3);} .article-meta span{display:inline-flex;align-items:center;gap:7px;} .article-meta .ti{color:var(--green);font-size:16px;} .prose h2{font-family:var(--font-d);font-size:clamp(23px,2.6vw,30px);font-weight:900;color:var(--ink);letter-spacing:-.6px;margin:46px 0 16px;line-height:1.2;} .prose h3{font-family:var(--font-d);font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.3px;margin:32px 0 12px;} .prose ul{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:12px;} .prose ul li{position:relative;padding-left:30px;font-size:16px;color:var(--text2);line-height:1.7;font-weight:300;} .prose ul li::before{content:'✓';position:absolute;left:0;top:0;color:var(--green);font-weight:700;} .prose strong{color:var(--ink);font-weight:600;} .article-callout{background:var(--greenbg);border:1px solid var(--border2);border-left:4px solid var(--green);border-radius:var(--r-sm);padding:20px 24px;margin:30px 0;} .article-callout p{margin:0;font-size:15.5px;color:var(--green3);line-height:1.75;font-weight:400;} .article-back{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--green3);margin-bottom:14px;} .article-back .ti{transition:transform .35s ease;} .article-back:hover .ti{transform:translateX(-4px);} /* El article-head vive sobre el page-hero oscuro: colores legibles */ .page-hero .article-back{color:#fff;} .page-hero .article-back:hover{color:var(--green);} .page-hero .article-tag{background:rgba(140,198,62,.14);border-color:rgba(140,198,62,.32);color:#aadb6e;} .page-hero .article-meta{color:rgba(255,255,255,.58);} /* ============================================================= 27. FORMULARIO DE CONTACTO + DATOS DE CONTACTO ============================================================= */ .contact-layout{display:grid;grid-template-columns:1fr;gap:40px;align-items:start;} @media(min-width:1024px){.contact-layout{grid-template-columns:1.2fr .9fr;gap:56px;}} .form{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-lg);padding:28px 24px;} @media(min-width:768px){.form{padding:36px 32px;}} .form-grid{display:grid;grid-template-columns:1fr;gap:18px;} @media(min-width:600px){.form-grid{grid-template-columns:1fr 1fr;}} .field{display:flex;flex-direction:column;gap:7px;} .field-full{grid-column:1/-1;} .field label{font-size:13px;font-weight:600;color:var(--ink);} .field label .req{color:var(--green);margin-left:2px;} .field input,.field select,.field textarea{ width:100%;background:var(--greenbg);border:1.5px solid var(--border);border-radius:var(--r-sm); padding:12px 14px;font-size:14px;color:var(--text);transition:border-color var(--t),background var(--t); } .field textarea{resize:vertical;min-height:120px;} .field input::placeholder,.field textarea::placeholder{color:var(--text3);} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);background:#fff;} .field input:invalid:not(:placeholder-shown), .field select:invalid:not(:focus){border-color:#d9534f;} .field-check{grid-column:1/-1;display:flex;align-items:flex-start;gap:10px;} .field-check input[type="checkbox"]{width:18px;height:18px;margin-top:2px;accent-color:var(--green);flex-shrink:0;cursor:pointer;} .field-check label{font-size:13px;font-weight:400;color:var(--text2);line-height:1.5;} .field-check a{color:var(--green3);text-decoration:underline;} .form-actions{grid-column:1/-1;margin-top:4px;} .form-msg{grid-column:1/-1;border-radius:var(--r-sm);padding:14px 16px;font-size:14px;line-height:1.6;display:none;} .form-msg.show{display:block;} .form-msg.ok{background:var(--greenlight);border:1px solid var(--border2);color:var(--green3);} .form-msg.err{background:#fdecea;border:1px solid #f5c6c2;color:#b02a25;} /* Tarjetas de datos de contacto */ .contact-info{display:flex;flex-direction:column;gap:14px;} .contact-card{display:flex;align-items:flex-start;gap:14px;background:#fff;border:1.5px solid var(--border);border-radius:var(--r);padding:20px;} .contact-card .ci-ico{width:44px;height:44px;border-radius:12px;background:var(--greenlight);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .contact-card .ci-ico i{font-size:20px;color:var(--green);} .contact-card .ci-lbl{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text3);margin-bottom:3px;} .contact-card .ci-val{font-size:15px;font-weight:600;color:var(--ink);line-height:1.45;} .contact-card .ci-val a{color:var(--green3);} .contact-card .ci-val a:hover{color:var(--green);} .map-embed{margin-top:32px;border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;} .map-embed iframe{display:block;width:100%;height:340px;border:0;} /* ===== Contacto pro ===== */ .contact-promos{display:grid;grid-template-columns:1fr;gap:16px;margin-top:36px;} @media(min-width:760px){.contact-promos{grid-template-columns:repeat(3,1fr);}} .cpromo{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px;transition:transform .45s var(--ease,cubic-bezier(.22,.61,.36,1)),box-shadow .45s ease,border-color .45s ease;} .cpromo:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(13,22,8,.1);border-color:rgba(140,198,62,.45);} .cpromo-ico{width:48px;height:48px;border-radius:13px;background:rgba(140,198,62,.13);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .45s ease,transform .45s ease;} .cpromo-ico .ti{font-size:24px;color:var(--green);transition:color .45s ease;} .cpromo:hover .cpromo-ico{background:var(--green);transform:rotate(-6deg);} .cpromo:hover .cpromo-ico .ti{color:#fff;} .cpromo-t{font-family:var(--font-d);font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.3px;} .cpromo-s{font-size:13px;color:#6f6a64;margin-top:2px;line-height:1.5;} .contact-card{transition:transform .45s var(--ease,cubic-bezier(.22,.61,.36,1)),box-shadow .45s ease,border-color .45s ease;} .contact-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(13,22,8,.08);border-color:rgba(140,198,62,.4);} .form-head{margin-bottom:24px;} .form-head h3{font-family:var(--font-d);font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.5px;margin:0 0 6px;} .form-head p{font-size:14px;color:#6f6a64;margin:0;line-height:1.6;} /* ============================================================= 28. CTA FINAL ============================================================= */ .cta-sec{padding:var(--sec-pad) 0;background:#fff;text-align:center;position:relative;overflow:hidden;} .cta-sec::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:700px;border-radius:50%;background:var(--green);opacity:.04;pointer-events:none;animation:pulse 5s ease-in-out infinite;} .cta-sec::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(460px,90vw);height:min(460px,90vw);border-radius:50%;border:4px solid var(--border2);opacity:.33;pointer-events:none;} .cta-sec .wrap{position:relative;z-index:2;} .cta-sec h2{font-family:var(--font-d);font-size:clamp(32px,5vw,58px);font-weight:900;color:var(--ink);letter-spacing:-2px;line-height:1.05;margin-bottom:18px;} .cta-sec h2 .hl{color:var(--green);} .cta-sec>.wrap>p{font-size:15px;color:var(--text2);font-weight:300;margin-bottom:36px;max-width:560px;margin-left:auto;margin-right:auto;} .cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} .cta-info{margin-top:26px;font-size:13px;color:var(--text3);display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;} .cta-info i{color:var(--green);font-size:14px;} /* ============================================================= 29. FOOTER ============================================================= */ .footer{background:var(--ink);padding:56px 0 36px;border-top:1px solid rgba(255,255,255,.05);} .footer-grid{display:grid;grid-template-columns:1fr;gap:36px;margin-bottom:44px;} .f-logo{height:26px;filter:brightness(0) invert(1);opacity:.55;margin-bottom:16px;} .f-logo-fb{font-family:var(--font-d);font-weight:900;font-size:18px;color:#fff;opacity:.85;margin-bottom:16px;} .f-desc{font-size:13px;color:rgba(255,255,255,.3);line-height:1.75;max-width:260px;} .f-contact{margin-top:18px;display:flex;flex-direction:column;gap:5px;} .f-contact a{font-size:13px;color:var(--green);transition:opacity var(--t);} .f-contact a:hover{opacity:.75;} .f-contact span{font-size:12px;color:rgba(255,255,255,.28);} .f-col h5{font-size:10px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:18px;} .f-col ul li{margin-bottom:10px;} .f-col ul li a{font-size:13px;color:rgba(255,255,255,.3);transition:color var(--t);} .f-col ul li a:hover{color:rgba(255,255,255,.7);} .f-bot{border-top:1px solid rgba(255,255,255,.06);padding-top:28px;display:flex;flex-direction:column;gap:16px;text-align:center;align-items:center;} .f-copy{font-size:12px;color:rgba(255,255,255,.25);} .f-legal{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;} .f-legal a{font-size:12px;color:rgba(255,255,255,.25);transition:color var(--t);} .f-legal a:hover{color:rgba(255,255,255,.6);} @media(min-width:600px){.footer-grid{grid-template-columns:1fr 1fr;}} @media(min-width:1024px){ .footer{padding:72px 0 40px;} .footer-grid{grid-template-columns:2.2fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px;} .f-bot{flex-direction:row;justify-content:space-between;text-align:left;} } /* ============================================================= 30. UTILIDADES VARIAS ============================================================= */ .mt-0{margin-top:0;} .mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;} .mb-0{margin-bottom:0;} .mb-8{margin-bottom:8px;} .mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;} .mb-48{margin-bottom:48px;} .w-fit{width:fit-content;} .text-green{color:var(--green);} .text-muted{color:var(--text3);} .nowrap{white-space:nowrap;} .hide-mobile{display:none;} @media(min-width:1024px){.hide-mobile{display:initial;}.hide-desktop{display:none;}} /* ============================================================= 31. AURORAS / GRADIENTES ANIMADOS Fondos atmosféricos para las secciones protagonistas. Animan solo transform/opacity/background-position (sin reflow). Se inyecta un contenedor .aurora por JS dentro de cada seccion; el texto va siempre por encima (z-index) y conserva contraste. Intensidad: llamativa pero contenida tras el contenido. ============================================================= */ /* Keyframes — movimiento lento de los blobs y deriva del mesh */ @keyframes auroraDrift1{ 0%,100%{transform:translate3d(-8%,-6%,0) scale(1);} 33%{transform:translate3d(10%,8%,0) scale(1.18);} 66%{transform:translate3d(-6%,12%,0) scale(.92);} } @keyframes auroraDrift2{ 0%,100%{transform:translate3d(8%,10%,0) scale(1.1);} 40%{transform:translate3d(-12%,-4%,0) scale(.95);} 70%{transform:translate3d(6%,-10%,0) scale(1.2);} } @keyframes auroraDrift3{ 0%,100%{transform:translate3d(0,4%,0) scale(1);} 50%{transform:translate3d(-10%,-8%,0) scale(1.15);} } @keyframes auroraHue{ 0%,100%{opacity:.9;} 50%{opacity:.55;} } /* Contenedor de la aurora (inyectado por JS como primer hijo) */ .aurora{ position:absolute;inset:0;overflow:hidden;pointer-events:none; z-index:0;border-radius:inherit; } /* Tres blobs de luz que derivan en bucle */ .aurora span{ position:absolute;display:block;border-radius:50%; filter:blur(60px);will-change:transform,opacity; mix-blend-mode:normal; } .aurora span:nth-child(1){ width:60vmax;height:60vmax;top:-22%;left:-12%; background:radial-gradient(circle at 50% 50%,rgba(140,198,62,.55),rgba(140,198,62,0) 68%); animation:auroraDrift1 22s var(--ease) infinite,auroraHue 14s ease-in-out infinite; } .aurora span:nth-child(2){ width:52vmax;height:52vmax;bottom:-26%;right:-14%; background:radial-gradient(circle at 50% 50%,rgba(122,181,53,.45),rgba(122,181,53,0) 70%); animation:auroraDrift2 26s var(--ease) infinite,auroraHue 18s ease-in-out infinite reverse; } .aurora span:nth-child(3){ width:42vmax;height:42vmax;top:18%;left:38%; background:radial-gradient(circle at 50% 50%,rgba(190,224,130,.4),rgba(190,224,130,0) 72%); animation:auroraDrift3 19s var(--ease) infinite; } /* Las secciones que reciben aurora deben recortar y apilar contenido */ .has-aurora{position:relative;overflow:hidden;isolation:isolate;} .has-aurora>*:not(.aurora){position:relative;z-index:1;} /* -- Variante sobre fondo CLARO (hero home, page-hero) -- */ .aurora--light span:nth-child(1){background:radial-gradient(circle at 50% 50%,rgba(140,198,62,.38),rgba(140,198,62,0) 68%);} .aurora--light span:nth-child(2){background:radial-gradient(circle at 50% 50%,rgba(122,181,53,.3),rgba(122,181,53,0) 70%);} .aurora--light span:nth-child(3){background:radial-gradient(circle at 50% 50%,rgba(190,224,130,.3),rgba(190,224,130,0) 72%);} /* Velo claro para no comer contraste del texto oscuro */ .aurora--light::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.78));pointer-events:none;} /* -- Variante sobre fondo OSCURO (seccion IA) -- */ .aurora--dark span{filter:blur(70px);} .aurora--dark span:nth-child(1){background:radial-gradient(circle at 50% 50%,rgba(140,198,62,.5),rgba(140,198,62,0) 66%);} .aurora--dark span:nth-child(2){background:radial-gradient(circle at 50% 50%,rgba(80,140,40,.55),rgba(80,140,40,0) 70%);} .aurora--dark span:nth-child(3){background:radial-gradient(circle at 50% 50%,rgba(170,215,110,.32),rgba(170,215,110,0) 72%);} .aurora--dark::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 120% at 50% 40%,rgba(13,22,8,0) 30%,rgba(13,22,8,.55) 100%);pointer-events:none;} /* -- Variante sobre el VERDE corporativo (.porq) — luz blanca -- */ .aurora--green span{filter:blur(64px);} .aurora--green span:nth-child(1){background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.4),rgba(255,255,255,0) 66%);} .aurora--green span:nth-child(2){background:radial-gradient(circle at 50% 50%,rgba(240,247,230,.32),rgba(240,247,230,0) 70%);} .aurora--green span:nth-child(3){background:radial-gradient(circle at 50% 50%,rgba(39,80,10,.3),rgba(39,80,10,0) 72%);} /* NOTA: el .hero de la HOME ya NO usa la aurora de blobs (.aurora). Tiene su propia "Aurora Background" estilo Aceternity OSCURA (.hero-aurora), inyectada por JS y definida en la seccion 12. Aqui no hay regla para .hero .aurora a proposito, para no duplicar capas de fondo. */ /* En moviles reducimos el blur (coste de pintado) y la escala */ @media(max-width:600px){ .aurora span{filter:blur(42px);} .aurora span:nth-child(1){width:90vmax;height:90vmax;} .aurora span:nth-child(2){width:80vmax;height:80vmax;} .aurora span:nth-child(3){width:70vmax;height:70vmax;} } /* ============================================================= 32. REVEALS AVANZADOS Reveal de titulares por palabras con mascara (clip + translate) y blur-in. El JS envuelve cada palabra en .rw>span de forma automatica; el texto sigue siendo seleccionable y legible por lectores de pantalla (no se altera el contenido textual). ============================================================= */ /* Palabra-mascara: el contenedor recorta, el span sube desde abajo */ /* padding vertical + margin negativo: da aire a la mascara para que no recorte ascendentes/descendentes ni signos (g, ¿, tildes) sin alterar la maquetacion. */ .rw{display:inline-block;overflow:hidden;vertical-align:top;line-height:inherit;padding:.18em 0;margin:-.18em 0;} .rw>span{ display:inline-block; transform:translateY(115%) rotate(2deg); opacity:0;filter:blur(8px); transition:transform .8s var(--ease),opacity .8s var(--ease),filter .8s var(--ease); transition-delay:var(--rw-delay,0s); will-change:transform,opacity; } .rw-on .rw>span{transform:none;opacity:1;filter:blur(0);} /* Preserva el espacio entre palabras al partir el titular */ .rw+.rw-sp{display:inline-block;white-space:pre;} /* Blur-in simple para subtitulos/parrafos marcados [data-reveal] */ .blur-in{opacity:0;filter:blur(10px);transform:translateY(14px); transition:opacity .7s var(--ease),filter .7s var(--ease),transform .7s var(--ease); transition-delay:var(--rw-delay,0s);} .blur-in.rw-on{opacity:1;filter:blur(0);transform:none;} /* Contadores: leve "pop" al terminar de contar (lo activa el JS) */ .cnt{display:inline-block;transition:transform .35s var(--ease);} .cnt.cnt-done{animation:cntPop .5s var(--ease);} @keyframes cntPop{0%{transform:scale(1);}45%{transform:scale(1.12);}100%{transform:scale(1);}} /* Movimiento reducido: todo visible y quieto, sin auroras animadas */ @media (prefers-reduced-motion:reduce){ .aurora{display:none;} .has-aurora{overflow:visible;} /* Sin parallax y sin animaciones del hero oscuro ni del page-hero: la "Aurora Background" NO llega a inyectarse con reduced-motion (lo decide el JS), asi que solo queda el fondo oscuro estatico de ::before. El titulo, el subtitulo, los botones y las cifras quedan visibles y quietos. Por si acaso, congelamos transform/animacion de cualquier capa que existiera. */ .hero-aurora{transform:none!important;} .hero-aurora-layer{animation:none!important;} .hero-title,.hero-sub,.hero .a3,.hero .a4{opacity:1!important;transform:none!important;animation:none!important;} .rw{overflow:visible;} .rw>span,.blur-in{opacity:1!important;filter:none!important;transform:none!important;} .cnt.cnt-done{animation:none;} } /* ============================================================= 33. TARJETAS NUMERADAS (.num-card) Bloques con numero grande (01/02/03) en verde tenue + titulo + descripcion, al estilo del bloque de "features" del caso gimnasios. Reutilizable en cualquier pagina/seccion clara. ============================================================= */ .num-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:24px;} @media(min-width:600px){.num-grid{grid-template-columns:repeat(2,1fr);}} @media(min-width:1024px){.num-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}} .num-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-lg);padding:28px 26px;transition:border-color var(--t),box-shadow var(--t),transform var(--t);} .num-card:hover{border-color:var(--border2);box-shadow:var(--sh-sm);transform:translateY(-3px);} .num-card .num{font-family:var(--font-d);font-size:52px;font-weight:900;line-height:1;letter-spacing:-2px;color:rgba(140,198,62,.33);} .num-card h3{font-family:var(--font-d);font-size:19px;font-weight:700;color:var(--ink);margin:8px 0;letter-spacing:-.3px;} .num-card p{font-size:14px;color:var(--text2);line-height:1.7;}