/* ============================================================ RADEX · Web v1 — Hoja de estilos compartida Identidad basada en la página "coming soon". Tema por defecto = HÍBRIDO (hero oscuro + cuerpo claro). Añade class="tema-oscuro" al para la versión oscura. ============================================================ */ :root{ /* Marca */ --blue:#1f7bff; --blue-soft:#4f9bff; --blue-deep:#0b1f3a; --ink:#05080f; /* casi negro azulado */ --black:#000000; --silver:#cfd6dd; --muted-d:#7e8a99; /* texto tenue sobre oscuro */ /* Tema HÍBRIDO (cuerpo claro) */ --bg:#ffffff; --bg-alt:#f4f7fb; /* secciones alternas */ --surface:#ffffff; /* tarjetas */ --border:#e4eaf2; --text:#15202b; /* texto principal */ --text-soft:#52617a; /* texto secundario */ --heading:#0e1b2e; --hero-bg:#000000; /* el hero siempre es oscuro */ --hero-text:#e9eef5; --hero-muted:#7e8a99; --footer-bg:#05080f; --footer-text:#aeb9c7; --nav-bg:rgba(5,8,15,.92); --nav-text:#e9eef5; --shadow:0 16px 40px rgba(16,33,61,.10); --radius:16px; } /* ====== Tema OSCURO predominante ====== */ body.tema-oscuro{ --bg:#04070d; --bg-alt:#070b14; --surface:#0b1019; --border:#172234; --text:#e9eef5; --text-soft:#9aa7b8; --heading:#f3f7fc; --footer-bg:#02040a; --footer-text:#8b97a8; --nav-bg:rgba(2,4,10,.92); --shadow:0 16px 40px rgba(0,0,0,.45); } /* ====== Base ====== */ *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{color:var(--blue);text-decoration:none;} .container{width:100%;max-width:1160px;margin:0 auto;padding:0 24px;} section{padding:clamp(56px,9vw,104px) 0;} h1,h2,h3,h4{color:var(--heading);line-height:1.15;font-weight:700;letter-spacing:-.01em;} h2.section-title{font-size:clamp(26px,4.6vw,40px);} .section-head{max-width:680px;margin:0 auto clamp(36px,6vw,56px);text-align:center;} .section-head .eyebrow{ display:inline-block;color:var(--blue);font-weight:700;font-size:13px; letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px; } .section-head p{color:var(--text-soft);font-size:clamp(15px,2.4vw,18px);margin-top:14px;} .bg-alt{background:var(--bg-alt);} /* ====== Botones ====== */ .btn{ display:inline-flex;align-items:center;gap:9px; padding:14px 26px;border-radius:999px;font-weight:600;font-size:15px; cursor:pointer;border:1.5px solid transparent;transition:.2s ease;white-space:nowrap; } .btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(31,123,255,.32);} .btn-primary:hover{background:#1568e6;transform:translateY(-2px);} .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);} .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);} .btn-outline{background:transparent;color:var(--blue);border-color:var(--blue);} .btn-outline:hover{background:var(--blue);color:#fff;} /* ====== Navbar ====== */ .nav{ position:fixed;top:0;left:0;right:0;z-index:50; background:var(--nav-bg);backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.06); } .nav .container{display:flex;align-items:center;justify-content:space-between;height:72px;gap:18px;} .nav .brand img{height:38px;width:auto;} .nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin-left:auto;margin-right:24px;} .nav-links a{color:var(--nav-text);font-size:15px;font-weight:500;opacity:.88;transition:.2s;} .nav-links a:hover{opacity:1;color:var(--blue-soft);} .nav-cta{margin-left:8px;} .nav-actions{display:flex;align-items:center;gap:10px;} .nav-actions .btn{padding:11px 18px;font-size:14px;} .btn-login{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);} .btn-login:hover{border-color:var(--blue-soft);background:rgba(31,123,255,.14);color:#fff;transform:translateY(-2px);} .nav-toggle{display:none;background:none;border:0;color:var(--nav-text);font-size:26px;cursor:pointer;margin-left:2px;} .menu-open .nav-links{display:flex;} /* ====== Hero ====== */ .hero{ position:relative;background:var(--hero-bg);color:var(--hero-text); padding:clamp(130px,18vw,180px) 0 clamp(80px,12vw,120px); overflow:hidden;text-align:center; } .hero::before{ content:"";position:absolute;inset:0; background: radial-gradient(1100px 600px at 50% -10%, rgba(31,123,255,.22), transparent 60%), radial-gradient(800px 500px at 50% 120%, rgba(31,123,255,.10), transparent 60%); pointer-events:none; } .hero::after{ content:"";position:absolute;inset:0; background-image:radial-gradient(rgba(79,155,255,.10) 1px, transparent 1.4px); background-size:26px 26px; -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 72%); mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 72%); pointer-events:none; } .hero .container{position:relative;z-index:1;} .hero-logo{width:min(78vw,440px);height:auto;margin:0 auto 30px;display:block;animation:rise .9s ease-out both;} .hero .badge{ display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px; border:1px solid rgba(79,155,255,.35);background:rgba(31,123,255,.06); color:var(--blue-soft);font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:26px; } .hero .badge .dot{width:8px;height:8px;border-radius:50%;background:var(--blue-soft);box-shadow:0 0 12px var(--blue-soft);} .hero h1{ color:#fff;font-size:clamp(32px,6.4vw,60px);font-weight:700;max-width:18ch;margin:0 auto 22px; background:linear-gradient(180deg,#fff 0%,#cfd6dd 60%,#9fb0c4 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .hero h1 .accent{-webkit-text-fill-color:initial;color:var(--blue-soft);} .hero p.lead{color:var(--hero-muted);font-size:clamp(16px,2.6vw,20px);max-width:60ch;margin:0 auto 36px;} .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} .hero-stats{ display:flex;gap:clamp(24px,6vw,72px);justify-content:center;flex-wrap:wrap; margin-top:clamp(48px,8vw,72px);padding-top:36px;border-top:1px solid rgba(255,255,255,.08); } .hero-stats .stat strong{display:block;font-size:clamp(26px,4vw,38px);color:#fff;font-weight:700;} .hero-stats .stat span{color:var(--hero-muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase;} /* ====== Pilares ====== */ .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .pillar{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:34px 28px;text-align:center;box-shadow:var(--shadow); } .pillar .ic{ width:60px;height:60px;border-radius:14px;margin:0 auto 18px;display:grid;place-items:center; background:linear-gradient(140deg,rgba(31,123,255,.14),rgba(79,155,255,.06));color:var(--blue); } .pillar h3{font-size:20px;margin-bottom:8px;} .pillar p{color:var(--text-soft);font-size:15px;} /* ====== Tecnología (split) ====== */ .tech-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,64px);align-items:center;} .tech-media{ position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--border); background:linear-gradient(160deg,#0a1422,#05080f);min-height:340px;box-shadow:var(--shadow); } .tech-media img{width:100%;height:100%;object-fit:cover;} .tech-media.is-product{background:linear-gradient(160deg,#ffffff,#eef3f9);} .tech-media.is-product img{object-fit:contain;padding:22px;} .tech-media .ph{ position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--muted-d); padding:24px;font-size:14px; } .tech-text h2{font-size:clamp(26px,4.4vw,38px);margin-bottom:18px;} .tech-text .lead{color:var(--text-soft);font-size:17px;margin-bottom:26px;} .spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;} .spec{background:var(--bg-alt);border:1px solid var(--border);border-radius:12px;padding:18px 18px;} .spec strong{display:block;color:var(--blue);font-size:22px;font-weight:700;} .spec span{font-size:14px;color:var(--text-soft);} .tech-note{margin-top:22px;font-size:13px;color:var(--text-soft);} /* ====== Servicios ====== */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .svc{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:30px 26px;box-shadow:var(--shadow);transition:.22s ease;position:relative;overflow:hidden; } .svc:hover{transform:translateY(-4px);border-color:var(--blue);} .svc .ic{ width:54px;height:54px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px; background:linear-gradient(140deg,var(--blue),var(--blue-soft));color:#fff; } .svc h3{font-size:19px;margin-bottom:8px;} .svc p{color:var(--text-soft);font-size:15px;} .svc .tag{display:inline-block;margin-top:14px;font-size:12px;color:var(--blue);font-weight:600;letter-spacing:.04em;} /* ====== Profesionales (portal) ====== */ .pro{ background:linear-gradient(150deg,#061129,#02060f 70%);color:#e9eef5;border-radius:24px; padding:clamp(36px,6vw,64px);position:relative;overflow:hidden; } .pro::after{ content:"";position:absolute;inset:0; background-image:radial-gradient(rgba(79,155,255,.10) 1px, transparent 1.4px);background-size:24px 24px; -webkit-mask-image:radial-gradient(circle at 80% 30%,#000,transparent 70%); mask-image:radial-gradient(circle at 80% 30%,#000,transparent 70%);pointer-events:none; } .pro .inner{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;} .pro .eyebrow{color:var(--blue-soft);font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;} .pro h2{color:#fff;font-size:clamp(26px,4.2vw,38px);margin:14px 0 16px;} .pro p{color:#aeb9c7;font-size:16px;margin-bottom:26px;} .pro-feats{list-style:none;display:grid;gap:14px;} .pro-feats li{display:flex;gap:12px;align-items:flex-start;color:#cdd6e2;font-size:15px;} .pro-feats .chk{color:var(--blue-soft);flex:none;margin-top:2px;} .pro-card{ background:rgba(255,255,255,.04);border:1px solid rgba(79,155,255,.25);border-radius:18px; padding:28px;text-align:center;backdrop-filter:blur(6px); } .pro-card .big{font-size:clamp(20px,3vw,24px);color:#fff;font-weight:700;margin-bottom:6px;} .pro-card .soft{color:#9aa7b8;font-size:14px;margin-bottom:20px;} /* ====== Pacientes ====== */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step;} .step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px 22px;box-shadow:var(--shadow);} .step .n{ width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700; background:var(--blue);color:#fff;margin-bottom:16px; } .step h3{font-size:17px;margin-bottom:6px;} .step p{color:var(--text-soft);font-size:14px;} /* ====== El centro ====== */ .centro-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,56px);align-items:center;} .centro-media{border-radius:20px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);} .centro-text h2{font-size:clamp(26px,4.4vw,38px);margin-bottom:18px;} .centro-text p{color:var(--text-soft);font-size:16px;margin-bottom:16px;} .centro-values{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px;} .centro-values li{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--text);} .centro-values .chk{color:var(--blue);flex:none;} /* ====== Contacto ====== */ .contact-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,56px);} .contact-info .item{display:flex;gap:16px;align-items:flex-start;margin-bottom:26px;} .contact-info .ic{ width:48px;height:48px;border-radius:12px;flex:none;display:grid;place-items:center; background:linear-gradient(140deg,rgba(31,123,255,.14),rgba(79,155,255,.06));color:var(--blue); } .contact-info h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);margin-bottom:3px;} .contact-info .v{font-size:17px;color:var(--heading);font-weight:600;} .contact-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(26px,4vw,38px);box-shadow:var(--shadow);} .field{margin-bottom:18px;} .field label{display:block;font-size:14px;font-weight:600;margin-bottom:7px;color:var(--heading);} .field input,.field select,.field textarea{ width:100%;padding:13px 15px;border:1.5px solid var(--border);border-radius:11px; background:var(--bg);color:var(--text);font-size:15px;font-family:inherit;transition:.2s; } .field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,123,255,.14);} .field textarea{resize:vertical;min-height:110px;} .consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text-soft);margin-bottom:20px;} .consent input{margin-top:3px;flex:none;} /* ====== Footer ====== */ .footer{background:var(--footer-bg);color:var(--footer-text);padding:64px 0 28px;} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:44px;} .footer .brand img{height:42px;margin-bottom:18px;} .footer p{font-size:14px;color:var(--footer-text);max-width:38ch;} .footer h4{color:#fff;font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;} .footer ul{list-style:none;display:grid;gap:11px;} .footer ul a{color:var(--footer-text);font-size:14px;transition:.2s;} .footer ul a:hover{color:var(--blue-soft);} .footer .socials{display:flex;gap:12px;margin-top:18px;} .footer .socials a{ width:40px;height:40px;border-radius:50%;display:grid;place-items:center; border:1px solid rgba(255,255,255,.16);color:var(--footer-text);transition:.2s; } .footer .socials a:hover{border-color:var(--blue-soft);color:var(--blue-soft);} .footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;} .footer-bottom a{color:var(--footer-text);} /* ====== Toggle de versión (solo demo) ====== */ .ver-toggle{ position:fixed;right:18px;bottom:18px;z-index:80;display:flex;gap:6px; background:rgba(5,8,15,.9);border:1px solid rgba(79,155,255,.3);border-radius:999px;padding:6px; backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.4); } .ver-toggle a{padding:8px 14px;border-radius:999px;font-size:12px;font-weight:600;color:#aeb9c7;letter-spacing:.03em;} .ver-toggle a.active{background:var(--blue);color:#fff;} /* ====== Placeholder helper ====== */ .ph-note{ display:inline-block;background:rgba(255,193,7,.14);color:#b8860b;border:1px dashed #d9b441; padding:2px 8px;border-radius:6px;font-size:12px;font-weight:600; } body.tema-oscuro .ph-note{color:#ffd874;background:rgba(255,193,7,.10);} /* ====== Páginas legales / texto ====== */ .legal{padding:clamp(110px,16vw,150px) 0 80px;} .legal .container{max-width:860px;} .legal h1{font-size:clamp(28px,5vw,40px);margin-bottom:10px;} .legal .updated{color:var(--text-soft);font-size:14px;margin-bottom:36px;} .legal h2{font-size:22px;margin:34px 0 12px;} .legal h3{font-size:18px;margin:22px 0 8px;} .legal p,.legal li{color:var(--text-soft);font-size:16px;margin-bottom:12px;} .legal ul,.legal ol{padding-left:22px;margin-bottom:14px;} .legal a{color:var(--blue);} .callout{background:var(--bg-alt);border:1px solid var(--border);border-left:4px solid var(--blue);border-radius:10px;padding:18px 20px;margin:20px 0;} /* ====== FAQ ====== */ .faq{max-width:820px;margin:0 auto;display:grid;gap:14px;} .faq details{ background:var(--surface);border:1px solid var(--border);border-radius:14px; padding:0 22px;box-shadow:var(--shadow);overflow:hidden; } .faq summary{ list-style:none;cursor:pointer;padding:20px 0;font-weight:600;font-size:17px;color:var(--heading); display:flex;justify-content:space-between;align-items:center;gap:16px; } .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"+";color:var(--blue);font-size:24px;font-weight:400;flex:none;transition:.2s;} .faq details[open] summary::after{transform:rotate(45deg);} .faq details p{color:var(--text-soft);font-size:15px;padding:0 0 22px;margin:0;} /* ====== Responsive ====== */ @media (max-width:900px){ .pillars,.svc-grid,.steps{grid-template-columns:1fr 1fr;} .tech-split,.pro .inner,.centro-split,.contact-split,.footer-grid{grid-template-columns:1fr;} .footer-grid{gap:30px;} .spec-grid,.centro-values{grid-template-columns:1fr 1fr;} .nav-links{ display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0; background:var(--nav-bg);border-bottom:1px solid rgba(255,255,255,.08);padding:8px 0; margin:0; } .nav-links li{width:100%;} .nav-links a{display:block;padding:14px 24px;} .nav-cta{margin:10px 24px 16px;} .nav-toggle{display:block;} .nav .brand img{height:32px;} .nav-actions{gap:7px;} .nav-actions .btn{padding:9px 13px;font-size:12.5px;} } @media (max-width:560px){ .pillars,.svc-grid,.steps{grid-template-columns:1fr;} .spec-grid,.centro-values{grid-template-columns:1fr;} .hero-cta{flex-direction:column;} .hero-cta .btn{width:100%;justify-content:center;} .nav .container{gap:8px;padding:0 16px;} .nav .brand img{height:28px;} .nav-actions .btn{padding:8px 11px;font-size:12px;} }