/* ============================================================ Tipografías autoalojadas, las mismas que precarga el sitio corporativo en su : /assets/fonts/archivo-var.woff2 /assets/fonts/fira-code-var.woff2 Archivo Variable para texto y titulares, Fira Code Variable para todo lo monoespaciado. Poppins queda reservada al eslogan del logo de TALOS, que sí está compuesto en esa tipografía. Las tres bajo SIL Open Font License; las licencias viajan en assets/fonts/. Sin peticiones a Google Fonts ni a terceros. ============================================================ */ @font-face{ font-family:"Archivo";src:url("assets/fonts/archivo-var.woff2") format("woff2-variations"); font-weight:100 900;font-style:normal;font-display:swap; } @font-face{ font-family:"Fira Code";src:url("assets/fonts/fira-code-var.woff2") format("woff2-variations"); font-weight:300 700;font-style:normal;font-display:swap; } @font-face{ font-family:"Poppins";src:url("assets/fonts/poppins-700.woff2") format("woff2"); font-weight:700;font-style:normal;font-display:swap; } :root{ /* Superficies */ --bg:#FFFFFF; --bg-soft:#F5F9FC; --bg-band:#F0F6FA; /* Tinta */ --ink:#0F2A44; --body:#51677A; --muted:#7C8FA0; /* Líneas */ --rule:#E3EBF1; --rule-2:#CFDCE6; /* Acentos por dominio */ --talos:#00A5B1; --agro:#75BB41; --grid:#5E5AA8; --public:#2E7BB8; /* Azul marino del arte TALOS */ --navy:#031A35; --grad:linear-gradient(100deg,#6C4FB0 0%,#5EA53A 52%,#1E9CA8 100%); --max:1240px; --sans:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --display:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --logo:"Poppins","Archivo",sans-serif; --mono:"Fira Code",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --ease:cubic-bezier(.22,.68,.3,1); --hdr-h:68px; } *{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--bg)} body{ margin:0;background:var(--bg);color:var(--body); font-family:var(--sans);font-size:17px;line-height:1.62; -webkit-font-smoothing:antialiased; } img,svg{display:block;max-width:100%} a{color:var(--talos)} p{margin:0} table{border-collapse:collapse;width:100%} h1,h2,h3{margin:0;color:var(--ink);font-family:var(--display);font-weight:600;letter-spacing:-.026em;line-height:1.1} ::selection{background:rgba(0,165,177,.2)} :focus-visible{outline:2px solid var(--talos);outline-offset:3px;border-radius:3px} .wrap{max-width:var(--max);margin:0 auto;padding:0 34px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .grad{ background:var(--grad); -webkit-background-clip:text;background-clip:text; color:transparent; } /* ============ Cabecera ============ */ .hdr{ position:fixed;inset:0 0 auto 0;z-index:90; background:rgba(255,255,255,.92); border-bottom:1px solid var(--rule); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); } .hdr-in{display:flex;align-items:center;justify-content:space-between;gap:22px;height:var(--hdr-h)} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:0 0 auto} .brand img{width:26px;height:auto;object-fit:contain} .brand b{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.02em} .nav{display:flex;align-items:center;gap:22px} .nav>a{color:var(--body);text-decoration:none;font-size:14.5px;white-space:nowrap} .nav>a:hover{color:var(--ink)} .nav-div{width:1px;height:18px;background:var(--rule-2);flex:0 0 auto} .dd{position:relative} .nav-link{ display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer; color:var(--body);font:inherit;font-size:14.5px;padding:6px 0; } .nav-link:hover,.nav-link[aria-expanded="true"]{color:var(--ink)} .dd-panel{ position:absolute;top:calc(100% + 16px);left:-16px;width:min(680px,86vw); display:grid;grid-template-columns:1fr 1fr; background:#fff;border:1px solid var(--rule-2);border-radius:12px;overflow:hidden; box-shadow:0 26px 60px rgba(15,42,68,.14);z-index:5; } .dd-panel[hidden]{display:none} .dd-item{ display:block;padding:18px 20px;text-decoration:none; border-right:1px solid var(--rule);border-bottom:1px solid var(--rule); } .dd-item:nth-child(2n){border-right:0} .dd-item:hover{background:var(--bg-soft)} .dd-item[aria-current]{background:rgba(0,165,177,.07)} .dd-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle} .dd-dot.t{background:var(--talos)} .dd-dot.a{background:var(--agro)} .dd-dot.g{background:var(--grid)} .dd-dot.p{background:var(--public)} .dd-name{ display:inline-block;vertical-align:middle; font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted); } .dd-name small{display:block;margin-top:5px;font-family:var(--sans);font-size:16px; letter-spacing:-.01em;text-transform:none;color:var(--ink);font-weight:650} .dd-trl{ display:block;margin-top:8px;font-family:var(--mono);font-size:11.5px; letter-spacing:.06em;color:var(--muted); } .lang{display:flex;align-items:center;gap:3px} .lang a{ color:var(--muted);text-decoration:none;font-family:var(--mono); font-size:13px;letter-spacing:.06em;padding:4px 5px; } .lang a:hover{color:var(--body)} .lang a[aria-current]{color:var(--ink);font-weight:700;border-bottom:2px solid var(--talos)} .lang span{color:var(--rule-2)} .nav-cta{ display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 20px; background:var(--ink);border-radius:8px; font-size:14.5px;font-weight:650;transition:transform .18s var(--ease),background .18s var(--ease); } /* El texto del botón va en blanco en todos los estados. Se declara explícitamente porque el selector de elemento `a` fija un color de enlace y :visited puede reintroducirlo en algunos navegadores. */ .nav-cta, .nav-cta:link, .nav-cta:visited, .nav-cta:hover, .nav-cta:focus, .nav-cta:active{color:#fff;text-decoration:none} .nav-cta:hover{background:#1B3E5C;transform:translateY(-1px)} .burger{ display:none;align-items:center;background:none;border:1px solid var(--rule-2); color:var(--ink);height:40px;padding:0 14px;border-radius:8px;font:inherit;font-size:14px;cursor:pointer; } main{padding-top:var(--hdr-h)} /* ============ Banner TALOS ============ Ya no es una banda de ancho completo: es una tarjeta que mide lo que mide su contenido y se centra en la página. Logo y eslogan a la izquierda, las tres palabras a la derecha. */ .talos-intro{background:transparent;padding:24px 0 2px} .ti-card{ --t-navy:#031A35; --t-teal:#00A5B1; --t-green:#6BB53A; position:relative;overflow:hidden; width:fit-content;max-width:100%;margin:0 auto; display:flex;align-items:center;gap:40px; padding:22px 28px;border-radius:14px;background:var(--t-navy); } .ti-card::before{ content:"";position:absolute;inset:0; background:var(--t-teal); clip-path:polygon(100% 0, 100% 100%, 34% 100%); opacity:.16; } .ti-brand,.ti-words{position:relative;z-index:1} .ti-brand{display:flex;flex-direction:column;align-items:center;gap:7px} .ti-lockup{width:148px;height:auto} .ti-tag{ font-family:var(--logo);font-weight:700;font-size:12px; letter-spacing:-.004em;color:var(--t-green);white-space:nowrap; } .ti-words{display:flex;flex-direction:column;gap:6px;margin:0} .ti-w{ position:relative;padding-left:18px; font-family:var(--mono);font-size:12.5px;letter-spacing:.15em; text-transform:uppercase;color:#fff;white-space:nowrap; } .ti-w::before{ content:"";position:absolute;left:0;top:.52em; width:6px;height:6px;border-radius:50%;background:var(--t-green); } /* Entrada: tarjeta, logo, eslogan y después el barrido de letras */ html.anim .ti-card{opacity:0;transform:translateY(12px);animation:tiCard .7s var(--ease) forwards} html.anim .ti-lockup{opacity:0;transform:scale(.94);animation:tiLogo .8s var(--ease) .12s forwards} html.anim .ti-tag{opacity:0;transform:translateY(6px);animation:tiTag .6s var(--ease) .46s forwards} .ti-words{--start:.56s; --step:28ms} .ti-w b{display:inline-block;font-weight:inherit} html.anim .ti-w b{ opacity:0;transform:scale(.45); animation:tiZoom .55s cubic-bezier(.2,.9,.3,1.3) forwards; animation-delay:calc(var(--start) + var(--i) * var(--step)); } html.anim .ti-w::before{opacity:0;animation:tiDot .4s var(--ease) forwards} html.anim .ti-w:nth-child(1)::before{animation-delay:.50s} html.anim .ti-w:nth-child(2)::before{animation-delay:.80s} html.anim .ti-w:nth-child(3)::before{animation-delay:1.12s} @keyframes tiCard{to{opacity:1;transform:none}} @keyframes tiLogo{to{opacity:1;transform:none}} @keyframes tiTag{to{opacity:1;transform:none}} @keyframes tiDot{to{opacity:1}} @keyframes tiZoom{ 0%{opacity:0;transform:scale(.45)} 55%{opacity:1} 100%{opacity:1;transform:scale(1)} } /* ============ Fondo generativo ============ El lienzo dibuja la trayectoria de un atractor extraño en los colores de marca. Va detrás del contenido y no captura eventos. Ver mathbg.js. */ /* Campo global: lienzo fijo a pantalla completa, detrás de todo el documento. No es un dibujo quieto: traza la órbita del atractor de forma continua, la estela se desvanece y la figura se desplaza con el scroll. Todo lo que lleve .above se sitúa por encima, y las secciones son traslúcidas para que el campo se vea entre ellas. */ #attractor-field{ position:fixed;inset:0;display:block; width:100%;height:100%;z-index:0;pointer-events:none; } .above{position:relative;z-index:1} /* Lienzo por sección — disponible pero sin usar en esta página. Dibuja una figura quieta dentro de una sección, como el helecho de Barnsley de la home corporativa. Para usarlo: añadir has-bg a la sección y dentro . */ .mathbg{ position:absolute;inset:0;display:block; width:100%;height:100%;z-index:0;pointer-events:none; } .has-bg{position:relative;overflow:hidden} .has-bg>.wrap{position:relative;z-index:1} /* ============ Hero ============ */ .hero{position:relative;overflow:hidden;background:transparent} /* Retícula de puntos, muy tenue, sobre el campo global. */ .hero::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:radial-gradient(rgba(15,42,68,.055) 1px,transparent 1px); background-size:22px 22px; -webkit-mask-image:radial-gradient(120% 90% at 28% 34%,#000,transparent 74%); mask-image:radial-gradient(120% 90% at 28% 34%,#000,transparent 74%); } .hero>.wrap{position:relative;z-index:1} .hero-grid{ display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:center; padding:48px 0 44px; } .hero h1{font-size:clamp(32px,3.5vw,50px);letter-spacing:-.032em;line-height:1.08;margin-bottom:20px;max-width:19ch} .sub{font-size:clamp(16px,1.15vw,18px);color:var(--body);max-width:56ch;line-height:1.55} .sub b{color:var(--ink);font-weight:700} .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .btn-prime,.btn-ghost{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:50px;padding:0 24px;border-radius:9px;text-decoration:none; font-size:15.5px;font-weight:650;border:1px solid transparent; transition:transform .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease); } .btn-prime{background:var(--ink)} .btn-prime, .btn-prime:link, .btn-prime:visited, .btn-prime:hover, .btn-prime:focus, .btn-prime:active{color:#fff;text-decoration:none} .btn-prime:hover{background:#1B3E5C;transform:translateY(-2px)} .btn-prime .arr{transition:transform .22s var(--ease)} .btn-prime:hover .arr{transform:translateX(3px)} .btn-ghost{border-color:var(--rule-2);background:#fff} .btn-ghost, .btn-ghost:link, .btn-ghost:visited, .btn-ghost:hover, .btn-ghost:focus, .btn-ghost:active{color:var(--ink);text-decoration:none} .btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)} /* ============ Diagramas ============ */ .diagram-col{min-width:0} .diagram{width:100%;height:auto} .diagram-col>.diagram{max-width:470px;margin-left:auto} .dg-src{font-family:var(--mono);font-size:11px;fill:var(--muted)} .dg-box{fill:#fff;stroke:var(--rule-2);stroke-width:1.4} .dg-node{fill:#fff;stroke:var(--rule-2);stroke-width:1.4} .dg-label{font-family:var(--mono);font-size:13px;fill:var(--ink);font-weight:700;letter-spacing:.04em} .dg-note{font-family:var(--mono);font-size:10.5px;fill:var(--muted)} .dg-wire{fill:none;stroke:var(--rule-2);stroke-width:1.4} .in-solid{fill:none;stroke:var(--rule-2);stroke-width:1.4} .in-dash{fill:none;stroke:var(--talos);stroke-width:1.4;stroke-dasharray:3 5;opacity:.55} /* Trazado progresivo */ .draw{stroke-dasharray:1;stroke-dashoffset:0} html.anim .draw{stroke-dashoffset:1;animation:drawIn 1.1s var(--ease) forwards} @keyframes drawIn{to{stroke-dashoffset:0}} .w2{animation-delay:.15s} .w3{animation-delay:.35s} .w4{animation-delay:.5s} .w5{animation-delay:.65s} .w6{animation-delay:.8s} .fadein{opacity:1} html.anim .fadein{opacity:0;animation:fadeIn .6s var(--ease) forwards} @keyframes fadeIn{to{opacity:1}} .f1{animation-delay:.25s} .f2{animation-delay:.55s} .f3{animation-delay:.7s} .f4{animation-delay:.85s} .f5{animation-delay:1s} .pkt{filter:drop-shadow(0 0 4px rgba(0,165,177,.6))} /* ============ Franja de telemetría ============ */ .telemetry{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:rgba(245,249,252,.80)} .tele-row{display:grid;grid-template-columns:repeat(5,1fr)} .tele-row>span{ display:block;padding:24px 22px 22px;border-right:1px solid var(--rule); font-family:var(--mono);font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.03em; } .tele-row>span:first-child{padding-left:0} .tele-row>span:last-child{border-right:0;padding-right:0} .tele-row em{ display:block;margin-top:6px;font-style:italic;font-size:13.5px; font-family:var(--sans);font-weight:400;color:var(--muted);letter-spacing:0;line-height:1.4; } /* ============ Secciones ============ */ .sect{padding:92px 0} .sect.band{background:rgba(240,246,250,.74);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .sect.band+.sect.band{border-top:0} .sect-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:60px;align-items:start} .display{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.03em;line-height:1.08} .acc-t{color:var(--talos)} .lede{font-size:18.5px;color:var(--ink);line-height:1.55} .lede+p{margin-top:14px} p+p{margin-top:14px} .band-head{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap} .trl-chip{ display:inline-flex;align-items:center;gap:9px;padding:8px 14px; border:1px solid var(--rule-2);border-radius:999px;background:#fff; font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--body); } .trl-chip .dot{width:7px;height:7px;border-radius:50%} /* ============ Pipeline ============ */ .pipe{display:grid;gap:0;border:1px solid var(--rule-2);border-radius:12px;overflow:hidden;background:#fff} .pipe-cell{padding:18px 22px;border-bottom:1px solid var(--rule)} .pipe-cell:last-child{border-bottom:0} .pipe-k{ display:flex;align-items:center;gap:9px; font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--ink);font-weight:700; } .pipe-k .dot{width:7px;height:7px;border-radius:50%} .pipe-cell p{margin-top:5px;font-size:15.5px;color:var(--body)} /* ============ Paneles ============ */ .panel{border:1px solid var(--rule-2);border-radius:12px;overflow:hidden;background:#fff} .panel-cap{ display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap; padding:15px 22px;border-bottom:1px solid var(--rule);background:var(--bg-soft); font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;color:var(--ink);font-weight:700; } .panel-cap .cap-soft{color:var(--muted);font-weight:400;letter-spacing:.05em} .panel-body{padding:8px 0} /* ============ Ledger ============ */ .ledger th,.ledger td{ text-align:left;padding:15px 22px;border-bottom:1px solid var(--rule); font-size:15.5px;vertical-align:top; } .ledger tr:last-child th,.ledger tr:last-child td{border-bottom:0} .ledger th{color:var(--ink);font-weight:700;width:38%} .ledger td{color:var(--body)} .ledger .mono{font-family:var(--mono);font-size:13.5px} .ledger td small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted);opacity:.95} /* ============ Check list ============ */ .check-list{list-style:none;margin:0;padding:14px 0} .check-list li{ display:grid;grid-template-columns:22px auto 1fr;gap:10px;align-items:baseline; padding:10px 22px;font-size:15.5px;color:var(--body); } .check-list svg{width:16px;height:16px;fill:none;stroke:var(--agro);stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round;align-self:center} .check-list b{color:var(--ink);font-weight:650;white-space:nowrap} /* ============ Facts ============ */ .facts{display:grid;grid-template-columns:1fr 1fr;gap:0} .fact{padding:20px 22px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)} .fact:nth-child(2n){border-right:0} .facts .fact:nth-last-child(-n+2){border-bottom:0} .fact b{ display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.09em; color:var(--ink);font-weight:700;margin-bottom:8px; } .fact-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;vertical-align:middle} .fact p{font-size:14.5px;color:var(--body);line-height:1.55} /* ============ Contacto ============ */ .contact-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} /* ============ Pie ============ */ .footer{background:var(--ink);color:#A9BECE;padding:44px 0} .footer .brand{color:#fff} .foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start} .foot-links{display:flex;flex-wrap:wrap;gap:22px;max-width:640px} .foot-links a{color:#C7D7E2;text-decoration:none;font-size:14.5px} .foot-links a:hover{color:#fff;text-decoration:underline} .foot-legal{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14); font-size:13.5px;color:#8AA3B5;line-height:1.7} /* ============ Entradas y reveals ============ */ .rise{opacity:1;transform:none} html.anim .rise{opacity:0;transform:translateY(16px);animation:riseIn .8s var(--ease) forwards} .d1{animation-delay:.12s} .d2{animation-delay:.24s} .d3{animation-delay:.36s} .d4{animation-delay:.48s} @keyframes riseIn{to{opacity:1;transform:none}} .rv{opacity:1;transform:none} html.anim .rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)} html.anim .rv.in{opacity:1;transform:none} /* ============ Responsive ============ */ @media (max-width:1080px){ .hero-grid{grid-template-columns:1fr;gap:44px;padding:52px 0} .sect-grid{grid-template-columns:1fr;gap:34px} .tele-row{grid-template-columns:repeat(3,1fr)} .tele-row>span{border-bottom:1px solid var(--rule);padding-left:0} .tele-row>span:nth-child(3n){border-right:0} } @media (max-width:820px){ body{font-size:16.5px} .wrap{padding:0 22px} .sect{padding:60px 0} .nav{ display:none;position:absolute;top:var(--hdr-h);left:0;right:0;flex-direction:column; align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--rule); padding:8px 22px 20px;max-height:calc(100vh - var(--hdr-h));overflow-y:auto; } .nav.open{display:flex} .nav>a{padding:14px 0;border-bottom:1px solid var(--rule);font-size:16px} .nav-div{display:none} .burger{display:inline-flex} .nav-cta{display:none} .nav.open .nav-cta{display:inline-flex;margin-top:16px} .dd{width:100%} .nav-link{width:100%;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--rule);font-size:16px} .dd-panel{position:static;width:100%;grid-template-columns:1fr;border:0;box-shadow:none;border-radius:0} .dd-item{padding:14px 0 14px 14px;border-right:0;border-bottom:0;border-left:2px solid var(--rule)} .dd-item[aria-current]{border-left-color:var(--talos)} .tele-row{grid-template-columns:1fr 1fr} .tele-row>span:nth-child(3n){border-right:1px solid var(--rule)} .tele-row>span:nth-child(2n){border-right:0} .facts{grid-template-columns:1fr} .fact{border-right:0} .facts .fact:nth-last-child(2){border-bottom:1px solid var(--rule)} .ledger th,.ledger td{display:block;padding:10px 22px} .ledger th{width:auto;padding-bottom:2px;border-bottom:0} .ledger tr{display:block;border-bottom:1px solid var(--rule);padding:8px 0} .ledger tr:last-child{border-bottom:0} .ledger td{border-bottom:0} .check-list li{grid-template-columns:22px 1fr} .check-list b{grid-column:2;white-space:normal} .talos-intro{padding:22px 0 2px} .ti-card{flex-direction:column;gap:18px;padding:22px 24px;width:auto} .ti-card::before{clip-path:polygon(100% 0, 100% 100%, 0 100%)} .ti-lockup{width:138px} .ti-w{font-size:12px;letter-spacing:.13em} } /* ============ Reduced motion ============ */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rise,.rv,.ti-card,.ti-lockup,.ti-tag,.ti-w b,.fadein{opacity:1;transform:none;animation:none;transition:none} .ti-w::before{opacity:1;animation:none} .draw{stroke-dashoffset:0;animation:none} .pkt{display:none} .btn-prime:hover,.btn-ghost:hover,.nav-cta:hover{transform:none} } /* ============ Impresión ============ */ @media print{ .hdr,.burger,.lang{display:none} main{padding-top:0} .talos-intro{background:#fff} .ti-w{color:#000} .ti-card{background:#fff} body{color:#000} } /* La franja de telemetría vive dentro del hero: hay que sacarla por encima del patrón de puntos del fondo. */ .telemetry{position:relative;z-index:1} /* Línea de infraestructura y ecosistema. En la versión autosuficiente va en texto: los logotipos de los partners vivían en el servidor corporativo y traerlos de fuera rompería la independencia del paquete. Para usarlos, colócalos en assets/ y sustituye este párrafo por una fila de . */ .partners{ font-family:var(--mono);font-size:14px;line-height:1.9; color:var(--muted);letter-spacing:.02em; }