/* ========================================================================== Dataclick.cl — hoja de estilos base Tema claro/oscuro vía [data-theme] en , persistido en localStorage. Header, hero y footer mantienen el "navy" de marca en ambos temas; el resto del contenido cambia de superficie según el tema activo. ========================================================================== */ :root{ --navy-950:#0a1220; --navy-900:#0d1b2e; --navy-800:#122238; --navy-700:#1a2f4b; --navy-600:#24406a; --cyan-400:#3fd0e0; --cyan-300:#7fe3ee; --green-400:#3ecf8e; --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --ease:cubic-bezier(.22,.61,.36,1); /* tema claro (default) */ --bg:#ffffff; --bg-alt:#f6f8fb; --surface:#ffffff; --border:#e2e8f0; --text:#0c1524; --text-muted:#4a5a72; --text-soft:#7488a3; } html[data-theme="dark"]{ --bg:#0a1220; --bg-alt:#0f1b2e; --surface:#122238; --border:rgba(255,255,255,0.10); --text:#eef2f7; --text-muted:#a9bad4; --text-soft:#7f92ac; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; font-family:'Inter',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); transition:background .35s var(--ease), color .35s var(--ease); text-wrap:pretty; } h1,h2,h3,h4{ font-family:'Space Grotesk',system-ui,sans-serif; margin:0; letter-spacing:-0.01em; color:var(--text); } p{color:var(--text-muted);} a{color:var(--cyan-400);text-decoration:none;} img{max-width:100%;display:block;} .container{max-width:1180px;margin:0 auto;padding:0 24px;} .eyebrow{ font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-400); } .section{padding:96px 0;} .section-tight{padding:64px 0;} .section-alt{background:var(--bg-alt);} /* Botones */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:14px 28px;border-radius:var(--radius-sm);font-weight:600;font-size:15px; cursor:pointer;border:1px solid transparent;white-space:nowrap; transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease); font-family:inherit; } .btn:active{transform:scale(.97);} .btn-primary{background:var(--cyan-400);color:var(--navy-950);} .btn-primary:hover{background:var(--cyan-300);transform:translateY(-2px);} .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28);} .btn-ghost:hover{border-color:rgba(255,255,255,.6);} .btn-outline{background:transparent;color:var(--text);border-color:var(--border);} .btn-outline:hover{border-color:var(--cyan-400);color:var(--cyan-400);} .btn-sm{padding:10px 18px;font-size:13.5px;} .btn-block{width:100%;} .btn[disabled]{opacity:.6;cursor:not-allowed;transform:none !important;} /* ===== Header ===== */ .site-header{ position:sticky;top:0;z-index:50; display:flex;align-items:center;justify-content:space-between; padding:18px 0;background:rgba(10,18,32,.86);backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.08); } .site-header .container{display:flex;align-items:center;justify-content:space-between;width:100%;} .brand{display:flex;align-items:center;gap:10px;color:#fff;} .brand svg{display:block;} .nav{display:flex;align-items:center;gap:8px;} .nav a{ position:relative;font-size:14.5px;font-weight:500;color:#c7d2e2;padding:8px 14px;border-radius:6px; transition:color .18s var(--ease); } .nav a:hover{color:#fff;} .nav a.active{color:#fff;} .nav a.active::after{ content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--cyan-400);border-radius:2px; } .nav-actions{display:flex;align-items:center;gap:14px;} /* Toggle de tema */ .theme-toggle{ width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;cursor:pointer; color:#fff;transition:border-color .18s var(--ease), transform .3s var(--ease); } .theme-toggle:hover{border-color:var(--cyan-400);} .theme-toggle svg{transition:transform .5s var(--ease), opacity .3s var(--ease);} .theme-toggle .icon-sun{display:none;} html[data-theme="dark"] .theme-toggle .icon-moon{display:none;} html[data-theme="dark"] .theme-toggle .icon-sun{display:block;} .nav-burger{display:none;width:40px;height:40px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#fff;align-items:center;justify-content:center;cursor:pointer;} /* ===== Hero con movimiento ===== */ .hero{ position:relative;overflow:hidden; padding:120px 0 130px; background:linear-gradient(160deg,var(--navy-950) 0%,var(--navy-900) 55%,var(--navy-800) 100%); } .hero-inner{position:relative;z-index:2;} .hero h1{font-size:56px;line-height:1.08;color:#fff;max-width:760px;} .hero p.lead{margin-top:24px;font-size:18px;line-height:1.6;color:#a9bad4;max-width:600px;} .hero-actions{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap;} .hero-stats{display:flex;gap:48px;margin-top:72px;padding-top:32px;border-top:1px solid rgba(255,255,255,.12);flex-wrap:wrap;} .hero-stats .num{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:700;color:#fff;} .hero-stats .label{font-size:13.5px;color:#7f92ac;margin-top:4px;} .hero-orbit{position:absolute;right:-160px;top:-140px;opacity:.55;z-index:1;animation:spin 90s linear infinite;} .hero-orbit.reverse{animation-direction:reverse;animation-duration:130s;opacity:.35;} @keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}} .hero-node{animation:pulse 3.2s ease-in-out infinite;transform-origin:center;} .hero-node:nth-child(2){animation-delay:.6s;} .hero-node:nth-child(3){animation-delay:1.2s;} @keyframes pulse{0%,100%{opacity:.55;transform:scale(1);}50%{opacity:1;transform:scale(1.6);}} .hero-float{animation:float 6s ease-in-out infinite;} @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}} @media (prefers-reduced-motion: reduce){ .hero-orbit,.hero-node,.hero-float,[data-reveal]{animation:none !important;transition:none !important;} } /* Fade-up al hacer scroll */ [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease), transform .7s var(--ease);} [data-reveal].in-view{opacity:1;transform:translateY(0);} [data-reveal-delay="1"]{transition-delay:.08s;} [data-reveal-delay="2"]{transition-delay:.16s;} [data-reveal-delay="3"]{transition-delay:.24s;} [data-reveal-delay="4"]{transition-delay:.32s;} /* ===== Tarjetas / grillas ===== */ .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;} .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;} .grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;} .card{ padding:36px 30px;background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-md); transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .card:hover{transform:translateY(-6px);border-color:var(--cyan-400);box-shadow:0 18px 40px -20px rgba(63,208,224,.35);} .card .icon-badge{ width:52px;height:52px;border-radius:10px;background:var(--navy-950);display:flex;align-items:center;justify-content:center; transition:transform .3s var(--ease); } .card:hover .icon-badge{transform:scale(1.08) rotate(-4deg);} .card h3{font-size:20px;margin-top:20px;} .card p{font-size:14.5px;line-height:1.65;margin-top:12px;} .card .more{font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--cyan-400);} .card .more svg{transition:transform .2s var(--ease);} .card:hover .more svg{transform:translateX(4px);} .card-flat{display:flex;align-items:flex-start;gap:16px;padding:26px;background:var(--surface);border:1px solid var(--border);border-radius:8px;} .card-flat h3{font-size:16.5px;} .card-flat p{font-size:14px;line-height:1.6;margin-top:8px;} .pillar{padding:28px;background:var(--navy-900);border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.08);transition:transform .3s var(--ease);} .pillar:hover{transform:translateY(-4px);} .pillar h3{font-size:16px;color:#fff;margin-top:16px;} .pillar p{font-size:13.5px;line-height:1.6;color:#8695ad;margin-top:8px;} /* Pasos de proceso */ .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative;} .step{position:relative;padding:0 20px;} .step .num{ width:44px;height:44px;border-radius:50%;background:var(--surface);border:2px solid var(--cyan-400);color:var(--cyan-400); display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px; position:relative;z-index:2; } .step h4{font-size:15.5px;margin-top:16px;} .step p{font-size:13.5px;margin-top:8px;line-height:1.6;} .step-line{position:absolute;top:22px;left:calc(50% + 22px);right:calc(-50% + 22px);height:2px;background:var(--border);z-index:1;} .step:last-child .step-line{display:none;} /* ===== Formulario ===== */ .form-field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;} .form-field label{font-size:13.5px;font-weight:600;color:var(--text);} .form-field input,.form-field select,.form-field textarea{ padding:13px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text); font-family:inherit;font-size:14.5px;transition:border-color .18s var(--ease), box-shadow .18s var(--ease); } .form-field input:focus,.form-field select:focus,.form-field textarea:focus{ outline:none;border-color:var(--cyan-400);box-shadow:0 0 0 3px rgba(63,208,224,.18); } .form-field textarea{resize:vertical;min-height:130px;} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;} .form-hint{font-size:12.5px;color:var(--text-soft);margin-top:4px;} .form-status{font-size:13.5px;padding:12px 14px;border-radius:8px;margin-top:16px;display:none;} .form-status.ok{display:block;background:rgba(62,207,142,.12);color:var(--green-400);border:1px solid rgba(62,207,142,.3);} .form-status.err{display:block;background:rgba(240,90,90,.1);color:#e06868;border:1px solid rgba(240,90,90,.3);} .form-status.sending{display:block;background:rgba(63,208,224,.1);color:var(--cyan-400);border:1px solid rgba(63,208,224,.3);} .contact-info-card{padding:32px;background:var(--navy-900);border-radius:var(--radius-lg);color:#fff;} .contact-info-row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08);} .contact-info-row:last-child{border-bottom:none;} .contact-info-row .label{font-size:12.5px;color:#7f92ac;} .contact-info-row .value{font-size:15px;color:#fff;font-weight:500;margin-top:2px;} /* ===== Footer ===== */ .site-footer{padding:56px 0 32px;background:var(--navy-950);} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1);} .footer-grid h4{font-size:13px;font-weight:600;color:#fff;margin-bottom:14px;} .footer-links{display:flex;flex-direction:column;gap:10px;} .footer-links a{font-size:13.5px;color:#8695ad;transition:color .18s var(--ease);} .footer-links a:hover{color:var(--cyan-400);} .footer-bottom{display:flex;justify-content:space-between;padding-top:24px;flex-wrap:wrap;gap:10px;} .footer-bottom span{font-size:12.5px;color:#5c6d87;} /* ===== Utilidades responsive ===== */ @media (max-width: 960px){ .nav,.nav-actions .btn-primary{display:none;} .nav-burger{display:flex;} .grid-3,.grid-2,.grid-4{grid-template-columns:1fr;} .hero h1{font-size:38px;} .steps{grid-template-columns:1fr;gap:32px;} .step-line{display:none;} .form-row{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr 1fr;gap:28px;} }