/* ============================================================ ESTUDIO ARG · Sistema v2 · base compartida del sitio integral Dirección cartográfica-dato · paleta oscurecida ============================================================ */ :root{ --base-0:#060A14; --base-1:#0A1122; --base-2:#0F1830; --base-3:#182648; --navy:#22305C; --navy-deep:#131C3A; --blanco:#FFFFFF; --papel:#F5F6F9; --tinta:#0B101C; --sec:#49536A; --hair:#DFE3EC; --hair-d:#223052; --celeste:#29ACFF; --steel:#6E93D6; --gold:#D4AF37; --gold-deep:#B8860B; --gold-ink:#7A5A06; --txt-d:#E9EDF6; --txt-d-sec:#A9B4CC; --serif:'Spectral',Georgia,'Times New Roman',serif; --sans:'IBM Plex Sans','Segoe UI',-apple-system,Arial,sans-serif; --mono:'IBM Plex Mono','Cascadia Mono',Consolas,monospace; --wrap:1240px; --gut:clamp(20px,4.5vw,64px); --t-fast:160ms; --t-med:240ms; --t-slow:300ms; --shadow:0 14px 40px rgba(6,10,20,.35); } *{box-sizing:border-box} html{scroll-behavior:smooth} html,body{overflow-x:clip} body{margin:0;background:var(--blanco);color:var(--tinta); font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility} @media (max-width:640px){body{font-size:16px}} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12; margin:0;color:var(--navy);text-wrap:balance} .dark h1,.dark h2,.dark h3,.dark h4{color:var(--txt-d)} h1{font-size:clamp(40px,6vw,68px);line-height:1.08} h2{font-size:clamp(28px,3.6vw,40px);line-height:1.15} h3{font-size:22px;line-height:1.25} h4{font-size:18px;line-height:1.35} p{margin:0 0 16px;max-width:68ch} a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:3px} .dark a{color:var(--txt-d)} :focus-visible{outline:2px solid var(--celeste);outline-offset:2px} img{max-width:100%;height:auto;display:block} ::selection{background:var(--navy);color:#fff} /* ---- contenedores y bandas ---- */ .wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)} .band{padding:clamp(64px,9vw,128px) 0} .band-tight{padding:clamp(40px,6vw,72px) 0} .dark{background:var(--base-1);color:var(--txt-d)} .dark p{color:var(--txt-d-sec)} .dark .lead,.dark p.lead{color:var(--txt-d)} .deep{background:var(--base-0);color:var(--txt-d)} .papel{background:var(--papel)} .grid{display:grid;gap:24px} .g-2{grid-template-columns:repeat(2,minmax(0,1fr))} .g-3{grid-template-columns:repeat(3,minmax(0,1fr))} .g-4{grid-template-columns:repeat(4,minmax(0,1fr))} .g-75{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} .g-57{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} @media (max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))} .g-75,.g-57{grid-template-columns:1fr}} @media (max-width:600px){.g-2,.g-3,.g-4{grid-template-columns:1fr}} /* ---- señalética ---- */ .klabel{font:500 12.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase; color:var(--sec);display:flex;align-items:center;gap:10px;margin:0 0 18px} .klabel::before{content:"";width:22px;height:1px;background:var(--gold-deep);flex:none} .dark .klabel{color:var(--steel)} .klabel.au{color:var(--gold-ink)} .dark .klabel.au{color:var(--gold)} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .coords{font:400 12px/1 var(--mono);letter-spacing:.12em;color:var(--sec)} .dark .coords{color:var(--txt-d-sec)} .lead{font-family:var(--serif);font-size:clamp(19px,2vw,22px);line-height:1.55} .standfirst{font-family:var(--serif);font-style:italic;font-weight:500; font-size:clamp(19px,2vw,23px);line-height:1.5;color:var(--gold-ink)} .dark .standfirst{color:var(--gold)} /* ---- botones ---- */ .btn{display:inline-flex;align-items:center;gap:10px;font:600 13.5px/1 var(--sans); letter-spacing:.05em;text-transform:uppercase;text-decoration:none;cursor:pointer; padding:15px 26px;border:1px solid transparent;transition:background var(--t-fast), color var(--t-fast),border-color var(--t-fast),transform var(--t-fast)} .btn .arr{transition:transform var(--t-fast)} .btn:hover .arr{transform:translateX(4px)} .btn-navy{background:var(--navy);color:#fff} .btn-navy:hover{background:var(--navy-deep)} .btn-gold{background:var(--gold);color:#231A02} .btn-gold:hover{background:#E2C258} .btn-line{background:transparent;color:var(--tinta);border-color:var(--tinta)} .btn-line:hover{background:var(--tinta);color:#fff} .dark .btn-line{color:var(--txt-d);border-color:var(--hair-d)} .dark .btn-line:hover{background:var(--txt-d);color:var(--base-1);border-color:var(--txt-d)} .arr{display:inline-block} .linkline{position:relative;text-decoration:none;font-weight:500} .linkline::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%; background:currentColor;transform:scaleX(0);transform-origin:left; transition:transform 200ms ease-out} .linkline:hover::after,.linkline:focus-visible::after{transform:scaleX(1)} /* ---- cards ---- */ .card{background:var(--blanco);border:1px solid var(--hair);padding:28px; transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast)} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--navy)} .dark .card{background:var(--base-2);border-color:var(--hair-d)} .dark .card:hover{border-color:var(--gold-deep)} a.card{display:block;text-decoration:none;color:inherit} /* ---- imágenes: tratamiento de flota ---- */ .cover{position:relative;overflow:hidden;background:var(--base-1)} .cover img{width:100%;height:100%;object-fit:cover; filter:saturate(.82) contrast(1.06);transition:filter var(--t-med),transform 400ms ease-out} .cover::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(10,17,34,.18) 0%,rgba(10,17,34,.06) 45%,rgba(10,17,34,.62) 100%)} .cover.duo img{filter:saturate(.12) contrast(1.05) brightness(.92)} .cover.duo::after{background:linear-gradient(180deg,rgba(10,17,34,.5),rgba(10,17,34,.72))} a:hover .cover.duo img,a:focus-visible .cover.duo img{filter:saturate(.85) contrast(1.06) brightness(1)} a:hover .cover.duo::after{background:linear-gradient(180deg,rgba(10,17,34,.24),rgba(10,17,34,.6))} .cover .caption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:18px 22px;color:#fff} /* ---- tablas y listas ---- */ .tbl{width:100%;border-collapse:collapse;font-size:15px} .tbl th{font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase; color:var(--sec);text-align:left;padding:10px 14px 10px 0;border-bottom:1px solid var(--tinta)} .tbl td{padding:12px 14px 12px 0;border-bottom:1px solid var(--hair);vertical-align:top} .dark .tbl th{color:var(--steel);border-color:var(--txt-d)} .dark .tbl td{border-color:var(--hair-d)} .list-h{list-style:none;margin:0;padding:0} .list-h li{padding:14px 0;border-bottom:1px solid var(--hair);max-width:76ch} .dark .list-h li{border-color:var(--hair-d)} /* ---- formularios ---- */ .field{display:block;margin-bottom:20px} .field span{display:block;font:500 12px/1.3 var(--mono);letter-spacing:.12em; text-transform:uppercase;color:var(--sec);margin-bottom:8px} .dark .field span{color:var(--txt-d-sec)} .field input,.field textarea{width:100%;font:400 16px/1.5 var(--sans);color:var(--tinta); background:var(--blanco);border:1px solid var(--hair);padding:13px 14px;border-radius:0; transition:border-color var(--t-fast)} .field input:focus,.field textarea:focus{outline:none;border-color:var(--navy); box-shadow:0 0 0 2px rgba(41,172,255,.25)} .dark .field input,.dark .field textarea{background:var(--base-2);color:var(--txt-d); border-color:var(--hair-d)} /* ---- header ---- */ .hd{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(6,10,20,.82); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(34,48,82,.6)} .hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px; height:72px} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--txt-d)} .brand svg{width:26px;height:32px;flex:none} .brand b{font:600 13px/1.15 var(--sans);letter-spacing:.2em} .brand i{display:block;font:400 8.5px/1.2 var(--sans);font-style:normal; letter-spacing:.18em;color:var(--txt-d-sec)} .nav-d{display:flex;align-items:center;gap:28px} .nav-d a{font:500 13px/1 var(--sans);letter-spacing:.06em;text-decoration:none; color:var(--txt-d-sec);padding:6px 0;position:relative;transition:color var(--t-fast)} .nav-d a:hover{color:#fff} .nav-d a[aria-current]{color:#fff} .nav-d a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-2px; height:2px;background:var(--gold)} .langs{display:flex;gap:2px;margin-left:8px} .langs a{font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--txt-d-sec); text-decoration:none;padding:6px 7px;border:1px solid transparent} .langs a[aria-current]{color:var(--gold);border-color:var(--hair-d)} .langs a:hover{color:#fff} .hd .cta-hd{font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase; color:var(--base-0);background:var(--celeste);text-decoration:none;padding:12px 18px; transition:background var(--t-fast)} .hd .cta-hd:hover{background:#5CBFFF} .burger{display:none;background:none;border:1px solid var(--hair-d);color:var(--txt-d); width:44px;height:44px;cursor:pointer;padding:0} .burger svg{width:20px;height:14px;margin:auto;display:block} @media (max-width:1080px){.nav-d,.hd .cta-hd{display:none}.burger{display:block}} .mnav{position:fixed;inset:0;z-index:70;background:var(--base-0);color:var(--txt-d); display:none;flex-direction:column;padding:24px var(--gut) 40px;overflow-y:auto} .mnav.open{display:flex} .mnav .top{display:flex;justify-content:space-between;align-items:center;height:48px} .mnav a.mlink{font-family:var(--serif);font-size:clamp(28px,7vw,40px);font-weight:600; color:var(--txt-d);text-decoration:none;padding:18px 0;border-bottom:1px solid var(--hair-d); display:flex;justify-content:space-between;align-items:baseline} .mnav a.mlink .mono{font-size:12px;color:var(--steel)} .mnav .langs{margin:26px 0 0} /* ---- footer ---- */ .ft{background:var(--base-0);color:var(--txt-d-sec);border-top:1px solid var(--hair-d)} .ft .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px; padding:64px 0 48px} @media (max-width:900px){.ft .cols{grid-template-columns:1fr 1fr}} @media (max-width:560px){.ft .cols{grid-template-columns:1fr}} .ft h5{font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase; color:var(--steel);margin:0 0 14px} .ft a{color:var(--txt-d-sec);text-decoration:none;display:inline-block;padding:5px 0; transition:color var(--t-fast)} .ft a:hover{color:#fff} .ft .lema{font-family:var(--serif);font-size:19px;line-height:1.4;color:var(--txt-d); max-width:26ch;margin-top:18px} .ft .base{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between; padding:22px 0 34px;border-top:1px solid var(--hair-d);font-size:12.5px} /* ---- movimiento ---- */ .rv{opacity:0;transform:translateY(18px); transition:opacity var(--t-slow) ease-out,transform var(--t-slow) ease-out; transition-delay:var(--d,0ms)} .rv.in{opacity:1;transform:none} .draw path,.draw line,.draw circle.tr,.draw polyline{stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 900ms ease-out var(--d,0ms)} .draw.in path,.draw.in line,.draw.in circle.tr,.draw.in polyline{stroke-dashoffset:0} .pulse{animation:pulse 4s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}} .drift{animation:drift 60s linear infinite alternate} @keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-40px,-24px,0)}} .marquee{overflow:hidden;white-space:nowrap;position:relative} .marquee .track{display:inline-flex;gap:0;animation:mq 55s linear infinite;will-change:transform} .marquee:hover .track{animation-play-state:paused} @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}} #pageload{position:fixed;top:0;left:0;right:0;height:2px;z-index:80; background:var(--gold);transform-origin:left;transform:scaleX(0)} .page{display:none} .page.active{display:block;animation:pagein 220ms ease-out} @keyframes pagein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rv{opacity:1;transform:none;transition:none} .draw path,.draw line,.draw circle.tr,.draw polyline{stroke-dasharray:none; stroke-dashoffset:0;transition:none} .pulse,.drift{animation:none} .marquee .track{animation:none} .page.active{animation:none} .btn,.card{transition:none} } /* ============================================================ v2.1 · capa de refinamiento (imágenes de flota + micro-detalle) ============================================================ */ html{scroll-padding-top:96px} .band{position:relative} .band>.wrap{position:relative;z-index:2} /* ---- portada a pantalla completa (.arg-portada) ---- Toda apertura de pagina ocupa el alto util del navegador. Si la portada midiera menos, la banda siguiente asomaria recortada al abrir y el primer golpe de vista quedaria partido al medio: era el defecto de ATLAS, Riesgos Globales y las fichas de los directores. La referencia era ARG Intelligence, cuya apertura llena la pantalla por tener mas texto; esto lo vuelve regla. `safe center` centra el contenido cuando sobra alto y, cuando la portada es MAS alta que la pantalla, degrada a alineacion superior en lugar de esconder el arranque bajo el header fijo (el desborde clasico de flex centrado). Los navegadores que no entienden `safe` descartan la declaracion entera y caen en `stretch`: mismo resultado, contenido desde arriba. */ .arg-portada{position:relative;display:flex;align-items:safe center} .arg-portada>.wrap{width:100%} @supports (min-height:100svh){ .arg-portada{min-height:100svh} /* Con la barra de WordPress (solo administradores) el viewport util pierde 32 px: se descuentan para que el editor vea lo mismo que el visitante. */ body.admin-bar .arg-portada{min-height:calc(100svh - 32px)} } @media (max-width:782px){ /* Debajo de 782 px la barra de WP mide 46 px y deja de ser fija: no resta. */ body.admin-bar .arg-portada{min-height:100svh} } /* Senal de continuidad: una portada a pantalla completa puede leerse como el final de la pagina. Filete vertical que se estira y se recoge, sin texto y sin markup nuevo. No se pone en el 404, donde no hay nada mas abajo. */ .arg-portada::after{ content:"";position:absolute;left:50%;bottom:clamp(16px,3vh,30px);z-index:3; width:1px;height:clamp(30px,4.8vh,48px);margin-left:-1px;pointer-events:none; background:linear-gradient(180deg,rgba(212,175,55,0),var(--gold-deep) 68%,rgba(212,175,55,0)); transform-origin:50% 0;animation:portada-sigue 3.6s ease-in-out infinite; } @keyframes portada-sigue{ 0%,100%{transform:scaleY(.34);opacity:.24} 50%{transform:scaleY(1);opacity:.72} } @media (prefers-reduced-motion:reduce){ .arg-portada::after{animation:none;transform:scaleY(.72);opacity:.45} } /* fondo fotográfico de apertura: la imagen vive bajo la cartografía dibujada */ .hero-img{position:absolute;inset:0;overflow:hidden;z-index:0} .hero-img img{width:100%;height:100%;object-fit:cover;opacity:.94; transform-origin:50% 40%;animation:kenb 44s ease-in-out infinite alternate; filter:saturate(.92) contrast(1.04)} @keyframes kenb{from{transform:scale(1)}to{transform:scale(1.055)}} .hero-img::after{content:"";position:absolute;inset:0; background:linear-gradient(105deg,rgba(10,17,34,.72) 0%,rgba(10,17,34,.34) 46%,rgba(10,17,34,.12) 100%), linear-gradient(180deg,rgba(10,17,34,.42) 0%,rgba(10,17,34,.05) 34%,var(--base-1) 99%)} .hero-img.to0::after{background:linear-gradient(105deg,rgba(6,10,20,.74) 0%,rgba(6,10,20,.36) 46%,rgba(6,10,20,.14) 100%), linear-gradient(180deg,rgba(6,10,20,.44) 0%,rgba(6,10,20,.06) 34%,var(--base-0) 99%)} /* tipografía: ajuste óptico de display */ h1{letter-spacing:-.015em} h2{letter-spacing:-.008em} /* botones: prensado y foco */ .btn:active{transform:translateY(1px)} .btn-navy:hover,.btn-gold:hover{box-shadow:0 10px 26px rgba(6,10,20,.28)} .btn:focus-visible{outline:2px solid var(--celeste);outline-offset:3px} a.card:focus-visible{outline:2px solid var(--celeste);outline-offset:3px} /* nav: subrayado que se dibuja también al hover */ .nav-d a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px; background:rgba(233,237,246,.5);transform:scaleX(0);transform-origin:left; transition:transform 200ms ease-out} .nav-d a:hover::after{transform:scaleX(1)} .nav-d a[aria-current]::after{background:var(--gold);transform:scaleX(1)} /* header: se compacta al hacer scroll */ .hd{transition:background var(--t-med)} .hd .wrap{transition:height var(--t-med)} .hd.scrolled{background:rgba(6,10,20,.94);box-shadow:0 10px 30px rgba(4,7,14,.45)} .hd.scrolled .wrap{height:60px} /* marquesina: desvanecidos laterales */ .marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} /* menú móvil: entrada deslizada */ .mnav.open{animation:mnavin 260ms ease-out} @keyframes mnavin{from{opacity:0;transform:translateX(6%)}to{opacity:1;transform:none}} /* formularios: hover y foco más finos */ .field input:hover,.field textarea:hover{border-color:#B9C1D2} .dark .field input:hover,.dark .field textarea:hover{border-color:var(--base-3)} .field input:focus,.field textarea:focus{border-color:var(--navy)} .field:focus-within span{color:var(--navy)} .dark .field:focus-within span{color:var(--celeste)} /* linkline también con foco */ .linkline:focus-visible::after{transform:scaleX(1)} @media (prefers-reduced-motion:reduce){ .hero-img img{animation:none} .mnav.open{animation:none} .hd,.hd .wrap{transition:none} } /* ---- utilidades ---- */ .hairline{height:1px;background:var(--hair);border:0;margin:0} .dark .hairline{background:var(--hair-d)} .gold-rule{height:1px;background:linear-gradient(90deg,var(--gold),rgba(212,175,55,0));border:0} .num{font:500 13px/1 var(--mono);color:var(--gold-ink)} .dark .num{color:var(--gold)} .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .center{text-align:center} .mt0{margin-top:0}.mb0{margin-bottom:0} /* ============================================================ Adaptación WordPress: las 'páginas' del router son páginas reales. Cada plantilla envuelve su contenido en la misma section id=pg-X, con display:block permanente (sin router). ============================================================ */ .page{display:block} .page.active{animation:none} /* ==== página: home ==== */ /* ---- 1 · hero ---- */ #pg-home .hero-b{position:relative;overflow:clip; background:linear-gradient(180deg,var(--base-0) 0%,var(--base-1) 62%); padding-top:calc(72px + clamp(48px,7vw,96px)); min-height:min(92vh,880px);display:flex;align-items:center} #pg-home .hero-svg{position:absolute;inset:0;pointer-events:none} #pg-home .hero-svg svg{width:100%;height:100%} #pg-home .hero-in{position:relative;width:100%} #pg-home .hero-kicker{font:500 12.5px/1.6 var(--mono);letter-spacing:.14em; text-transform:uppercase;display:flex;flex-wrap:wrap;gap:8px 16px; color:var(--txt-d-sec);margin:0 0 26px} #pg-home .hero-kicker .au{color:var(--gold)} #pg-home .hero-kicker .sep{color:var(--hair-d)} #pg-home .hero-h1 span{display:block} #pg-home .hero-bajada{max-width:62ch;font-size:clamp(17px,1.6vw,19px); color:var(--txt-d);margin:26px 0 36px} #pg-home .hero-ctas{display:flex;flex-wrap:wrap;gap:14px} #pg-home .btn-cel{background:var(--celeste);color:var(--base-0)} #pg-home .btn-cel:hover{background:#5CBFFF} /* ---- 2 · marquesina ---- */ #pg-home .campos{padding:18px 0;border-top:1px solid var(--hair-d); border-bottom:1px solid var(--hair-d)} #pg-home .campos .track{align-items:center;font-size:12px;letter-spacing:.16em; text-transform:uppercase;color:var(--txt-d-sec)} #pg-home .campos .campo{padding:0 26px;white-space:nowrap} #pg-home .campos .rombo{display:inline-flex;flex:none;opacity:.7} /* ---- 3 · tres preguntas ---- */ #pg-home .preg-lead{max-width:68ch;color:var(--tinta);margin-bottom:48px} #pg-home .pregunta{background:var(--blanco);border:1px solid var(--hair); padding:32px 28px;transition:border-color var(--t-fast),transform var(--t-fast)} #pg-home .pregunta:hover{border-color:var(--navy);transform:translateY(-4px)} #pg-home .pregunta .ic{margin-bottom:22px} #pg-home .pregunta .rotulo{font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--sec);margin:0 0 10px} #pg-home .pregunta h3{max-width:20ch} /* ---- 4 · servicios ---- */ #pg-home .servicios h2{margin-bottom:14px} #pg-home .serv-list{border-top:1px solid var(--tinta);margin-top:34px} #pg-home .serv-row{display:grid;grid-template-columns:72px minmax(0,7fr) minmax(0,4fr); gap:24px;padding:44px 0;border-bottom:1px solid var(--hair)} #pg-home .serv-num{margin:6px 0 0} #pg-home .serv-cuerpo h3{margin-bottom:14px} #pg-home .serv-sub{display:block;font:500 12px/1.5 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:var(--sec);margin-top:8px} #pg-home .serv-cuerpo p{color:var(--tinta)} #pg-home .serv-link{color:var(--navy);font-size:15px} #pg-home .serv-meta .metahead{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--gold-ink);margin:6px 0 4px} #pg-home .serv-meta .list-h li{font-size:14.5px;color:var(--sec);padding:10px 0} @media (max-width:900px){ #pg-home .serv-row{grid-template-columns:1fr;gap:12px;padding:36px 0} #pg-home .serv-num{margin:0} } /* ---- 5 · ATLAS ---- */ #pg-home .atlas-b{position:relative;overflow:clip;background:var(--base-0); padding:clamp(72px,10vw,136px) 0} #pg-home .atlas-rule{position:absolute;top:0;left:0;right:0} #pg-home .atlas-marca{position:absolute;right:-4%;top:50%;width:min(46vw,520px);height:auto; transform:translateY(-50%);opacity:.06;pointer-events:none} #pg-home .atlas-in{position:relative} #pg-home .sello{font-size:12px;letter-spacing:.2em;text-transform:uppercase; color:var(--gold);border-bottom:1px solid var(--hair-d); padding-bottom:16px;margin:0 0 44px} #pg-home .atlas-grid{gap:clamp(32px,5vw,72px);align-items:start} #pg-home .atlas-t{display:flex;align-items:center;gap:16px; font-size:clamp(34px,4.6vw,52px);letter-spacing:.04em;margin-bottom:10px} #pg-home .atlas-t .rombo-oro{flex:none} #pg-home .atlas-sig{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--txt-d-sec);margin:0 0 26px} #pg-home .atlas-b .standfirst{margin:0 0 22px} #pg-home .atlas-nores{font-family:var(--serif);font-weight:500; font-size:clamp(21px,2.4vw,26px);line-height:1.3;color:var(--txt-d); max-width:26ch;margin:0 0 8px} #pg-home .atlas-def{list-style:none;margin:0 0 34px;padding:0;max-width:60ch} #pg-home .atlas-def li{position:relative;padding:12px 0 12px 26px; border-bottom:1px solid var(--hair-d);color:var(--txt-d-sec)} #pg-home .atlas-def li::before{content:"";position:absolute;left:4px;top:1.35em; width:6px;height:6px;background:var(--gold);transform:rotate(45deg)} #pg-home .atlas-ctas{display:flex;flex-wrap:wrap;gap:14px} #pg-home .atlas-ficha{border:1px solid rgba(184,134,11,.4);background:var(--base-2); padding:32px 28px} #pg-home .fichahead{font-size:12px;letter-spacing:.18em;text-transform:uppercase; color:var(--gold);margin:0 0 18px} #pg-home .ficha-list{list-style:none;margin:0;padding:0;counter-reset:none} #pg-home .ficha-list li{display:grid;grid-template-columns:auto 1fr;gap:16px; padding:16px 0;border-top:1px solid var(--hair-d);color:var(--txt-d)} #pg-home .ficha-list .fnum{font-size:11.5px;letter-spacing:.14em;color:var(--gold); padding-top:.35em} #pg-home .ficha-pie{margin:20px 0 0;padding-top:16px; border-top:1px solid rgba(184,134,11,.4);color:var(--txt-d-sec);font-size:14.5px} /* ---- 6 · nosotros ---- */ #pg-home .nos-grid{gap:clamp(32px,5vw,64px);align-items:start} #pg-home .nos-cita{font-family:var(--serif);font-style:italic;font-weight:500; font-size:clamp(20px,2.2vw,24px);line-height:1.45;color:var(--navy); border-left:2px solid var(--celeste);padding-left:20px; margin:26px 0 30px;max-width:34ch} #pg-home .nosotros-b .linkline{color:var(--navy);font-size:15px} #pg-home .nos-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px; border-top:1px solid var(--tinta);border-bottom:1px solid var(--hair); padding:26px 0;margin-bottom:32px} #pg-home .stat-n{font-size:clamp(30px,3.4vw,40px);font-weight:500;line-height:1; color:var(--navy);margin:0 0 8px} #pg-home .stat-l{font-size:13.5px;color:var(--sec);margin:0;max-width:18ch} #pg-home .dir-card{padding:26px 24px} #pg-home .dir-card .mg{margin-bottom:16px} #pg-home .dir-card h3{font-size:19px;margin-bottom:4px} #pg-home .dir-cargo{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--gold-ink);margin:0 0 10px} #pg-home .dir-linea{font-size:14.5px;color:var(--sec);margin:0} @media (max-width:600px){ #pg-home .nos-stats{grid-template-columns:1fr;gap:18px} } /* ---- 7 · visión ---- */ #pg-home .vis-head{display:flex;flex-wrap:wrap;align-items:flex-end; justify-content:space-between;gap:16px;margin-bottom:36px} #pg-home .vis-todos{color:var(--navy);font-size:15px} #pg-home .art-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:11.5px; letter-spacing:.12em;text-transform:uppercase;color:var(--sec);margin:0 0 12px} #pg-home .art-meta .cat{color:var(--gold-ink)} #pg-home .art-meta .dest-tag{color:var(--navy);border:1px solid var(--hair); padding:2px 8px} #pg-home .art-destacada{margin-bottom:24px;padding:36px 32px} #pg-home .art-destacada .curvas{width:min(320px,100%);height:30px;margin-bottom:20px} #pg-home .art-td{font-size:clamp(26px,3.2vw,34px);line-height:1.18;max-width:26ch; margin-bottom:12px} #pg-home .art-copete{color:var(--sec);font-size:15px;margin:0} #pg-home .art-destacada .art-copete{font-size:16.5px;max-width:64ch;margin-bottom:18px} #pg-home .art-leer{color:var(--navy);font-size:14px} #pg-home .art-card h3{font-size:19.5px;line-height:1.28;margin-bottom:10px} /* ---- 8 · cierre ---- */ #pg-home .cierre-b{position:relative;overflow:clip;background:var(--base-1)} #pg-home .horizonte{position:absolute;left:0;right:0;bottom:0;width:100%;height:80px; pointer-events:none} #pg-home .cierre-in{position:relative;display:flex;flex-wrap:wrap;align-items:center; justify-content:space-between;gap:24px;padding-bottom:28px} #pg-home .cierre-txt{max-width:44ch;margin:0;color:var(--txt-d)} /* Decisiones clave: 1. Hero con gradiente base-0 (arriba) a base-1, graticulado steel al 14-24% con curvas de nivel, una ruta celeste .draw, 3 nodos .pulse y un solo hito dorado: el 10% de acento. 2. Servicios como filas editoriales 72px/7fr/4fr (numero mono, cuerpo, meta lateral) en vez de cards: mas institucional y colapsa limpio a 1 columna bajo 900px. 3. Banda ATLAS sobre base-0 con isotipo dorado al 6% como marca de agua, gold-rule superior y ficha con borde dorado translucido: la unica banda donde el dorado manda. 4. Vision con la nota destacada a ancho completo (curvas de nivel .draw como firma grafica) y las otras tres en g-3; todas rutean a #/articulo segun el contrato de la maqueta. 5. Dorado sobre claro siempre via --gold-ink (metas de servicio, cargos, categorias); celeste solo en trazos, nodos y el CTA principal del hero (texto base-0 encima, AA). 6. Reveals escalonados con --d en pasos de 60-90ms; el shell observa .rv/.draw, sin JS propio. */ /* ==== página: nosotros ==== */ /* ===== NOSOTROS ===== */ #pg-nosotros .nos-hero{position:relative;overflow:hidden; padding-top:calc(72px + clamp(48px,7vw,96px));padding-bottom:clamp(56px,7vw,88px)} #pg-nosotros .nos-carta{position:absolute;inset:0;width:100%;height:100%;opacity:.85} #pg-nosotros .nos-hero-in{position:relative;z-index:1} #pg-nosotros .nos-hero h1{max-width:14ch} #pg-nosotros .nos-hero .standfirst{max-width:52ch;margin:22px 0 26px} #pg-nosotros .nos-hero .coords{margin:0} /* manifiesto: columna de lectura */ #pg-nosotros .nos-man{max-width:68ch} #pg-nosotros .nos-lead{font-family:var(--serif);font-size:clamp(19px,2vw,22px); line-height:1.55;color:var(--tinta)} #pg-nosotros .nos-pull{margin:clamp(32px,5vw,56px) 0;padding:0} #pg-nosotros .nos-pull .gold-rule{display:block;width:72px;margin-bottom:18px} #pg-nosotros .nos-pull p{font-family:var(--serif);font-style:italic;font-weight:500; font-size:clamp(22px,3vw,30px);line-height:1.35;color:var(--navy);margin:0;max-width:30ch; text-wrap:balance} /* método */ #pg-nosotros .nos-met>div:first-child p{max-width:34ch} #pg-nosotros .nos-rosa{width:min(200px,52vw);height:auto;margin-top:28px;display:block} #pg-nosotros .nos-dif{list-style:none;margin:0;padding:0} #pg-nosotros .nos-dif li{padding:22px 0;border-bottom:1px solid var(--hair)} #pg-nosotros .nos-dif li:first-child{padding-top:6px} #pg-nosotros .nos-dif h3{font-size:19px;line-height:1.3;margin:8px 0 8px} #pg-nosotros .nos-dif p{margin:0;font-size:15.5px;color:var(--sec);max-width:52ch} /* destinatarios */ #pg-nosotros .nos-dest{list-style:none;margin:8px 0 0;padding:0; display:flex;flex-wrap:wrap;gap:18px 44px} #pg-nosotros .nos-dest li{display:flex;align-items:center;gap:16px; font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.8vw,30px); line-height:1.25;color:var(--txt-d)} #pg-nosotros .nos-dest .rombo{width:9px;height:9px;flex:none; transform:rotate(45deg);border:1px solid var(--gold);background:transparent} #pg-nosotros .nos-dest li:nth-child(odd) .rombo{background:var(--gold);border-color:var(--gold)} @media (max-width:600px){#pg-nosotros .nos-dest{flex-direction:column;gap:16px}} /* directores */ #pg-nosotros .nos-dir{margin-top:34px} #pg-nosotros .nos-dir .card{padding:34px 30px 30px} #pg-nosotros .nos-dir .mgr{width:58px;height:58px;display:flex;align-items:center; justify-content:center;transform:rotate(45deg);border:1px solid var(--navy); margin:6px 0 30px 6px} #pg-nosotros .nos-dir .mgr b{transform:rotate(-45deg);font:500 13px/1 var(--mono); letter-spacing:.08em;color:var(--navy)} #pg-nosotros .nos-dir .card:hover .mgr{border-color:var(--gold-deep)} #pg-nosotros .nos-dir .card:hover .mgr b{color:var(--gold-ink)} #pg-nosotros .nos-dir h3{font-size:clamp(22px,2.6vw,27px)} #pg-nosotros .nos-dir .cargo{font-size:12px;letter-spacing:.14em;color:var(--gold-ink); margin:8px 0 16px} #pg-nosotros .nos-dir .card>p:not(.cargo){font-size:15.5px;color:var(--sec);margin-bottom:22px} #pg-nosotros .nos-dir .linkline{color:var(--navy);font-size:14px} /* cierre */ #pg-nosotros .nos-cta .lead{max-width:46ch;margin-bottom:26px;color:var(--txt-d)} /* Decisiones clave: 1. Apertura .dark compacta con graticulado curvo propio (.draw + .drift) y ruta punteada con 2 nodos .pulse; padding-top compensa el header fijo de 72px. 2. Manifiesto en columna de 68ch: los dos párrafos reales una sola vez, partidos en bloques de lectura; apertura y síntesis en Spectral (.nos-lead) y dos pull quotes con gold-rule. 3. Los guiones del original ("– geopolíticas y económico-financieras -") se normalizaron a comas para cumplir la regla tipográfica sin alterar el contenido. 4. M-01..M-05 con textos de apoyo tomados textualmente del propio manifiesto (nada inventado); rosa cartográfica en SVG de trazo fino sobre papel. 5. Destinatarios como fila serif grande con rombos dorados alternados (lleno/vacío); colapsa a columna en 360px sin overflow. 6. Directores: monograma tipográfico en rombo rotado, cargo en mono gold-ink (AA sobre blanco), bios reales de la página nosotros, linkline "Conocé más". */ /* ==== página: laporte ==== */ #pg-laporte .lp-hero{position:relative;overflow:hidden; padding-top:calc(72px + clamp(48px,7vw,96px))} #pg-laporte .lp-trama{position:absolute;inset:-40px;width:calc(100% + 80px); height:calc(100% + 80px);pointer-events:none} #pg-laporte .lp-heroin{position:relative;align-items:center} #pg-laporte .lp-monobox{display:flex;justify-content:flex-start} #pg-laporte .lp-mono{width:min(300px,68vw);height:auto} #pg-laporte .lp-sigla{font-family:var(--serif);font-weight:600;font-size:52px; letter-spacing:.08em;fill:var(--gold)} #pg-laporte .lp-cargo{font-size:13px;letter-spacing:.16em;color:var(--gold); margin:6px 0 18px} #pg-laporte .lp-hero .lead{color:var(--txt-d);max-width:56ch} #pg-laporte .lp-hero .coords{margin-top:22px} #pg-laporte .lp-bio p{margin-bottom:22px} #pg-laporte .lp-areas li{display:flex;gap:20px;align-items:baseline;padding:20px 0} #pg-laporte .lp-areas strong{display:block;font-family:var(--serif);font-weight:600; font-size:19px;color:var(--navy);margin-bottom:4px} #pg-laporte .lp-areas div span{display:block;color:var(--sec);font-size:15px; line-height:1.55;max-width:64ch} #pg-laporte .lp-cta{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:center; margin-top:28px} #pg-laporte .lp-back{color:var(--txt-d-sec);margin-left:auto} #pg-laporte .lp-back:hover{color:var(--txt-d)} @media (max-width:900px){ #pg-laporte .lp-monobox{justify-content:center} #pg-laporte .lp-back{margin-left:0} } /* Decisiones clave (Laporte): - Trama de apertura variante "graticulado clásico": meridianos y paralelos curvos en --steel al 10-22 %, con deriva lenta (.drift) y solo 2 nodos en .pulse. - Monograma JPL en rombo doble hairline SVG con .draw (dorado exterior, hairline interior), sigla en Spectral dorada; decorativo (aria-hidden), el nombre vive en el único h1. - Bio completa real en 4 párrafos a 68ch sobre blanco; sin recortes ni cargos inventados. - Áreas extraídas textuales de la bio (cátedras, CIPEA/RIPEA, CARI, EUDEBA, SAAP, prensa), numeradas en mono con hairlines de .list-h sobre --papel. - Cierre .dark compacto con gold-rule, LinkedIn y contacto como .btn-line y volver como .linkline; todo colapsa a 1 columna bajo 900px sin overflow a 360px. */ /* ==== página: rubbi ==== */ #pg-rubbi .rb-hero{position:relative;overflow:hidden; padding-top:calc(72px + clamp(48px,7vw,96px))} #pg-rubbi .rb-trama{position:absolute;inset:-40px;width:calc(100% + 80px); height:calc(100% + 80px);pointer-events:none} #pg-rubbi .rb-heroin{position:relative;align-items:center} #pg-rubbi .rb-monobox{display:flex;justify-content:flex-start} #pg-rubbi .rb-mono{width:min(300px,68vw);height:auto} #pg-rubbi .rb-sigla{font-family:var(--serif);font-weight:600;font-size:52px; letter-spacing:.08em;fill:var(--gold)} #pg-rubbi .rb-cargo{font-size:13px;letter-spacing:.16em;color:var(--gold); margin:6px 0 18px} #pg-rubbi .rb-hero .lead{color:var(--txt-d);max-width:56ch} #pg-rubbi .rb-hero .coords{margin-top:22px} #pg-rubbi .rb-bio p{margin-bottom:22px} #pg-rubbi .rb-areas li{display:flex;gap:20px;align-items:baseline;padding:20px 0} #pg-rubbi .rb-areas strong{display:block;font-family:var(--serif);font-weight:600; font-size:19px;color:var(--navy);margin-bottom:4px} #pg-rubbi .rb-areas div span{display:block;color:var(--sec);font-size:15px; line-height:1.55;max-width:64ch} #pg-rubbi .rb-cta{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:center; margin-top:28px} #pg-rubbi .rb-back{color:var(--txt-d-sec);margin-left:auto} #pg-rubbi .rb-back:hover{color:var(--txt-d)} @media (max-width:900px){ #pg-rubbi .rb-monobox{justify-content:center} #pg-rubbi .rb-back{margin-left:0} } /* Decisiones clave (Rubbi): - Trama de apertura variante "red de rutas": polilíneas de nodos conectados en --steel al 10-20 % (constelación de datos, guiño a tecnologías emergentes), 3 nodos .pulse máximo. - Mismo esqueleto que el perfil Laporte (rombo LNR con .draw, klabel, cargo mono dorado) para que ambos directores lean como par institucional. - Bio extendida real en 4 párrafos a 68ch; typos de origen corregidos (Consultor, Administración) y em-dashes reemplazados por comas; sumado el dato PwC del brochure. - Áreas extraídas textuales de la bio: prospectiva/PwC, Observatorio CEPI-UBA, Laboratorio IA CIPEA-UBA, publicaciones y medios, docencia de posgrado. - Cierre idéntico al par: gold-rule, LinkedIn y contacto en .btn-line, volver en .linkline; sin overflow a 360px (grids colapsan a 1 columna). */ /* ==== página: atlas ==== */ /* ===== ATLAS · #pg-atlas ===== */ /* Hero */ #pg-atlas .hero-atlas{position:relative;overflow:hidden;background:var(--base-0); padding-top:calc(72px + clamp(48px,7vw,96px));padding-bottom:clamp(72px,9vw,128px)} #pg-atlas .hero-carta{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} #pg-atlas .hero-inner{position:relative;z-index:1} #pg-atlas .sello{display:inline-block;font:500 11.5px/1.9 var(--mono);letter-spacing:.18em; text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-deep); padding:9px 16px;margin:0 0 28px;max-width:100%} #pg-atlas .hero-atlas h1{letter-spacing:.05em;font-size:clamp(56px,9vw,104px);margin:0 0 10px} #pg-atlas .baja{color:var(--txt-d);max-width:34ch;margin-bottom:14px} #pg-atlas .hero-atlas .standfirst{margin:0 0 34px} #pg-atlas .hero-atlas .coords{color:var(--txt-d-sec)} /* Qué es: lista fuerte */ #pg-atlas .no-resumen{font:600 13px/1.4 var(--mono);letter-spacing:.12em; text-transform:uppercase;color:var(--gold-ink);margin:30px 0 4px} #pg-atlas .defs{list-style:none;margin:0;padding:0} #pg-atlas .defs li{font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.5; color:var(--tinta);padding:16px 0 16px 22px;border-bottom:1px solid var(--hair); border-left:2px solid var(--gold-deep);margin-top:8px;max-width:62ch} /* Módulos A-01/02/03 */ #pg-atlas .modulos{margin-top:34px} #pg-atlas .modulos .ic{width:44px;height:44px;margin-bottom:20px} #pg-atlas .modulos .num{margin:0 0 8px} #pg-atlas .modulos h3{margin-bottom:10px} #pg-atlas .modulos p:last-child{margin-bottom:0;color:var(--sec)} /* Vista previa: monitor sobrio */ #pg-atlas .previa-txt{max-width:64ch} #pg-atlas .monitor{margin:40px auto 0;max-width:920px;border:1px solid var(--hair-d); background:var(--base-2)} #pg-atlas .monitor-bar{display:flex;gap:7px;align-items:center;height:34px; padding:0 16px;border-bottom:1px solid var(--hair-d)} #pg-atlas .monitor-bar i{width:7px;height:7px;border-radius:50%;background:var(--base-3)} #pg-atlas .monitor-bar i:first-child{background:var(--gold-deep)} #pg-atlas .monitor .cover{aspect-ratio:16/10} #pg-atlas .pie{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--txt-d-sec);padding:14px 16px;border-top:1px solid var(--hair-d)} /* Destinatarios y compromisos */ #pg-atlas .dest{margin-top:34px} #pg-atlas .dest h3{margin-bottom:8px} #pg-atlas .dest p:last-child,#pg-atlas .comp p:last-of-type{margin-bottom:0} #pg-atlas .comp{margin-top:34px} #pg-atlas .comp h3{margin-bottom:12px} #pg-atlas .periodicidad{font-size:12px;letter-spacing:.12em;text-transform:uppercase; color:var(--gold-ink);margin-top:18px;padding-top:14px;border-top:1px solid var(--hair)} /* Acceso de clientes (anticipo del gate, Fase 4) */ #pg-atlas .gate{max-width:560px;margin:0 auto;text-align:center; border:1px solid var(--hair-d);background:var(--base-2); padding:clamp(36px,6vw,56px) clamp(22px,5vw,48px)} #pg-atlas .rombo{width:46px;height:56px;margin:0 auto 22px;display:block} #pg-atlas .gate h2{margin-bottom:14px} #pg-atlas .gate p{margin-left:auto;margin-right:auto} #pg-atlas .gate-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:26px 0 18px} #pg-atlas .gate-row input{flex:1 1 220px;max-width:300px;min-width:0; font:500 13px/1 var(--mono);letter-spacing:.14em;text-align:center; color:var(--txt-d);background:var(--base-1);border:1px solid var(--hair-d); padding:15px 14px;border-radius:0} #pg-atlas .gate-row input::placeholder{color:var(--txt-d-sec);opacity:1} #pg-atlas .gate-row .btn[disabled],#pg-atlas .gate-row input[disabled]{ opacity:.55;cursor:not-allowed} #pg-atlas .nota{font-size:11.5px;letter-spacing:.1em;color:var(--txt-d-sec);margin:0} #pg-atlas .cierre{text-align:center;margin-top:clamp(48px,7vw,72px)} #pg-atlas .cierre .gold-rule{max-width:280px;margin:0 auto 30px; background:linear-gradient(90deg,rgba(212,175,55,0),var(--gold),rgba(212,175,55,0))} #pg-atlas .cierre p{color:var(--txt-d-sec);max-width:52ch;margin:0 auto 26px} @media (max-width:600px){ #pg-atlas .hero-atlas h1{font-size:clamp(48px,15vw,64px)} #pg-atlas .defs li{font-size:17px} #pg-atlas .gate-row input{max-width:100%} } /* DECISIONES CLAVE - Hero sobre base-0 con graticulado steel al 20% en deriva y rombo-isotipo redibujado en dorado con .draw: el guiño al informe real sin sellos ni clichés de "confidencial". - El sello mono dorado enmarcado (borde gold-deep 1px) funciona como marca de circulación controlada; sobre oscuro usa --gold, AA garantizado por sistema. - "No es un resumen de noticias" como lista serif con filete izquierdo gold-deep: jerarquía editorial fuerte sin recurrir a negritas ni iconografía. - Vista previa en marco tipo monitor (hair-d + barra con tres puntos, uno gold-deep) y .cover sin .duo para mostrar la edición real a color con el velo navy del tratamiento de flota. - Gate de clientes como panel centrado base-2 con input y btn-gold deshabilitados (opacity .55): anticipo visual honesto del acceso de Fase 4, sin JS propio. - Dorado como texto chico sobre claro solo via --gold-ink (kickers, periodicidad, A-0x). */ /* ==== página: encuentros ==== */ #pg-encuentros .hero-e{position:relative;overflow:hidden; padding-top:calc(72px + clamp(48px,7vw,96px))} #pg-encuentros .hero-e .mapa{position:absolute;inset:0;width:100%;height:100%;opacity:.9} #pg-encuentros .hero-e .wrap{position:relative;z-index:1} #pg-encuentros .hero-e h1{max-width:18ch} #pg-encuentros .hero-e .baj{max-width:62ch;margin-top:22px} #pg-encuentros .hero-e .coords{margin-top:34px} #pg-encuentros .prosa p{max-width:68ch} #pg-encuentros .g-57 h2{max-width:20ch} #pg-encuentros .fmt{list-style:none;margin:34px 0 0;padding:0} #pg-encuentros .fmt li{display:grid;grid-template-columns:64px 60px minmax(0,1fr); gap:20px;align-items:start;padding:26px 0;border-bottom:1px solid var(--hair)} #pg-encuentros .fmt li:first-child{border-top:1px solid var(--tinta)} #pg-encuentros .fmt .num{padding-top:5px} #pg-encuentros .fic{width:44px;height:44px;flex:none} #pg-encuentros .fmt h3{margin:0 0 4px} #pg-encuentros .fmt p{margin:0;color:var(--sec);max-width:58ch} @media (max-width:600px){ #pg-encuentros .fmt li{grid-template-columns:44px minmax(0,1fr)} #pg-encuentros .fmt .num{grid-column:1 / -1;padding-top:0} } #pg-encuentros .cierre-e h2{max-width:26ch;margin:0 auto} /* Decisiones: 1. Hero oscuro con graticulado propio y una ruta con 3 nodos (2 con pulso), .draw + .drift. 2. Texto real en composición 5/7: kicker + h2 a la izquierda, los 3 párrafos a 68ch a la derecha. 3. Formatos como filas F-01..F-05 (num mono + ícono de línea 44px + nombre/detalle), hairline superior en tinta como cabecera de tabla; colapsa a 2 col en 360px. 4. Solo contenido del paquete y del backup; títulos de banda como rótulos, sin inventar copy. */ /* ==== página: argintelligence ==== */ #pg-argintelligence .hero-ai{position:relative;overflow:hidden;background:var(--base-0); padding-top:calc(72px + clamp(48px,7vw,96px))} #pg-argintelligence .hero-ai .trama{position:absolute;inset:0;width:100%;height:100%} #pg-argintelligence .hero-ai .wrap{position:relative;z-index:1} #pg-argintelligence .hero-ai h1{max-width:14ch} #pg-argintelligence .hero-ai .standfirst{max-width:34ch;margin:26px 0 0; font-size:clamp(22px,2.6vw,28px)} #pg-argintelligence .hero-ai .intro{margin-top:30px;border-left:1px solid var(--hair-d); padding-left:clamp(18px,2.4vw,28px)} #pg-argintelligence .hero-ai .intro .lead{max-width:52ch;color:var(--txt-d)} #pg-argintelligence .hero-ai .intro p:last-child{max-width:64ch;margin-bottom:0} #pg-argintelligence .prosa p{max-width:68ch} #pg-argintelligence .g-57 h2{max-width:20ch} #pg-argintelligence .pull{font-family:var(--serif);font-style:italic;font-weight:500; font-size:clamp(19px,2vw,22px);line-height:1.5;color:var(--gold-ink); border-top:1px solid var(--hair);padding-top:18px;margin-top:26px;max-width:26ch} #pg-argintelligence .pilares{margin-top:34px} #pg-argintelligence .pilares .card{display:flex;flex-direction:column;gap:14px} #pg-argintelligence .pilares .pic{width:56px;height:40px} #pg-argintelligence .pilares h3{margin:2px 0 0} #pg-argintelligence .pilares p{margin:0;color:var(--sec);font-size:15.5px} #pg-argintelligence .cierre-ai{background:var(--base-0)} #pg-argintelligence .cierre-ai .gold-rule{width:min(420px,60%)} #pg-argintelligence .cita{margin:26px 0 0;padding:0} #pg-argintelligence .cita p{font-family:var(--serif);font-weight:600; font-size:clamp(28px,4vw,44px);line-height:1.15;color:var(--txt-d); max-width:22ch;margin:0;text-wrap:balance} #pg-argintelligence .cierre-ai .fin{max-width:66ch;margin-top:22px} /* Decisiones: 1. Hero sobre --base-0 (un paso más profundo que --base-1) para el tono más audaz de la línea de inversión; retícula ortogonal de energía/cómputo con nodo reactor abstracto (anillos y radiales en trazo, jamás literal) y núcleo dorado con pulso. 2. Standfirst itálico dorado con la frase real de apertura; el resto del primer párrafo como intro con filete lateral. 3. Tesis en 5/7 con pull-quote de la frase real "La latencia energética..." en gold-ink (único dorado AA como texto chico sobre claro). 4. Pilares P-01..P-03 como cards con pictogramas de línea propios (escenarios, arquitectura, red de actores), texto real completo de cada pilar. 5. Cierre como cita mayor serif + párrafo final real + CTA dorado; gold-rule como filete. */ /* ==== página: vision ==== */ /* ===== NUESTRA VISIÓN · solo #pg-vision ===== */ /* 1 · apertura */ #pg-vision .abre{position:relative;overflow:hidden; padding-top:calc(72px + clamp(48px,7vw,96px)); padding-bottom:clamp(48px,7vw,88px)} #pg-vision .abre .wrap{position:relative;z-index:1} #pg-vision .mapa{position:absolute;inset:0 0 0 auto;width:min(72vw,900px);height:100%; opacity:.9;pointer-events:none} #pg-vision .abre .lead{max-width:56ch;margin:18px 0 26px;color:var(--txt-d-sec)} #pg-vision .chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0} #pg-vision .chips li{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase; color:var(--txt-d-sec);border:1px solid var(--hair-d);padding:9px 14px;white-space:nowrap} /* kickers comunes */ #pg-vision .kick{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--sec);margin:0 0 12px} /* 2 · destacado */ #pg-vision .feat{text-decoration:none;color:inherit;align-items:center;gap:clamp(24px,4vw,56px)} #pg-vision .fcov{aspect-ratio:4/3;min-height:280px} #pg-vision .feat h2{font-size:clamp(30px,4.2vw,48px);margin:0 0 16px;transition:color var(--t-fast)} #pg-vision .feat:hover h2{color:var(--navy-deep)} #pg-vision .feat .copete{font-family:var(--serif);font-size:clamp(18px,1.9vw,21px); line-height:1.55;color:var(--sec);max-width:58ch;margin-bottom:22px} #pg-vision .feat .linkline{color:var(--navy)} @media (max-width:900px){#pg-vision .fcov{min-height:220px}} /* 3 · recientes */ #pg-vision .recientes{padding-top:0} #pg-vision .card.art{display:flex;flex-direction:column} #pg-vision .ccov{aspect-ratio:16/10;margin:-28px -28px 20px} #pg-vision .card.art h3{margin:0 0 10px} #pg-vision .card.art .copete{font-size:15px;line-height:1.6;color:var(--sec); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; margin-bottom:16px} #pg-vision .card.art .linkline{margin-top:auto;align-self:flex-start;font-size:14px; color:var(--navy)} /* 4 · archivo por mes */ #pg-vision .arch-cols{column-gap:clamp(24px,5vw,72px);max-width:880px} #pg-vision .arch-list{list-style:none;margin:0;padding:0} #pg-vision .arch-list li{border-bottom:1px solid var(--hair)} #pg-vision .arch-list a{display:flex;align-items:baseline;gap:14px;text-decoration:none; color:var(--tinta);padding:13px 2px;transition:color var(--t-fast),background var(--t-fast)} #pg-vision .arch-list a:hover,#pg-vision .arch-list a:focus-visible{color:var(--navy); background:rgba(34,48,92,.04)} #pg-vision .arch-list .mes{font:400 15.5px/1.3 var(--mono);letter-spacing:.02em} #pg-vision .arch-list .leader{flex:1;border-bottom:1px dotted var(--hair); transform:translateY(-4px)} #pg-vision .arch-list .n{font-size:14px;font-variant-numeric:tabular-nums;color:var(--sec); min-width:2ch;text-align:right} #pg-vision .arch-list a:hover .n{color:var(--navy)} #pg-vision .arch-total{font-size:13px;letter-spacing:.08em;text-transform:uppercase; color:var(--sec);margin:28px 0 0;max-width:none} #pg-vision .arch-total .num{font-size:13px} /* 5 · nota final */ #pg-vision .nota{background:var(--base-0)} #pg-vision .nota .gold-rule{margin:0 0 22px;max-width:220px} #pg-vision .nota p{max-width:68ch;margin:0;color:var(--txt-d-sec)} #pg-vision .nota .linkline{color:var(--gold)} /* 360px: sin overflow */ @media (max-width:600px){ #pg-vision .mapa{width:100vw;opacity:.5} #pg-vision .ccov{margin:-28px -28px 18px} } /* Decisiones: 1. Índice mensual calculado del CSV real (posts publish): 13 meses con actividad, Julio 2026 · 5 ... Julio 2025 · 3; junio 2025 sin posts se omite. Total exacto: 120. 2. Destacado en g-57 con cover 4/3 duotono y título Spectral clamp(30-48px): jerarquía editorial sin duplicar h1 (el único h1 es el de la apertura). 3. Cards recientes: cover 16/10 sangrada al borde del card (margin negativo), copete real clampado a 2 líneas para uniformidad de altura. 4. Archivo con líderes punteados (dotted) y conteos tabular-nums a la derecha: patrón tipográfico escalable que previsualiza el archivo ATLAS. 5. Apertura compacta con graticulado .draw a la derecha y solo 2 nodos .pulse, dentro del límite de movimiento del sistema. 6. Nota final sobre base-0 con gold-rule corto y link dorado a ATLAS (AA sobre oscuro). */ /* ==== página: articulo ==== */ /* ===== barra de progreso de lectura ===== */ #pg-articulo .readprogress{position:fixed;top:72px;left:0;right:0;height:2px; background:var(--gold);transform:scaleX(0);transform-origin:left;z-index:55} /* ===== portada ===== */ #pg-articulo .art-hero{position:relative;overflow:hidden; padding:calc(72px + clamp(48px,7vw,96px)) 0 clamp(56px,8vw,104px)} #pg-articulo .art-cover{position:absolute;inset:0;z-index:0} #pg-articulo .art-cover img{position:absolute;inset:0;width:100%;height:100%} #pg-articulo .art-cover::after{ background:linear-gradient(180deg,rgba(10,17,34,.68) 0%,rgba(10,17,34,.56) 42%,rgba(6,10,20,.9) 100%)} #pg-articulo .art-grat{position:absolute;inset:0;width:100%;height:100%;z-index:1; pointer-events:none;opacity:.55} #pg-articulo .art-hero-in{position:relative;z-index:2} #pg-articulo .art-hero h1{max-width:19ch} #pg-articulo .art-hero .standfirst{max-width:58ch;margin:26px 0 0} #pg-articulo .art-byline{font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:var(--txt-d-sec);margin:30px 0 0} /* ===== lectura ===== */ #pg-articulo .art-lectura{background:var(--blanco)} #pg-articulo .art-body{max-width:68ch;margin:0 auto} #pg-articulo .art-body>p{font-family:var(--serif);font-weight:400; font-size:18.5px;line-height:1.75;color:var(--tinta);margin:0 0 26px} #pg-articulo .art-body>p:first-of-type{font-size:clamp(20px,2.2vw,22.5px); line-height:1.62;font-weight:500;color:var(--navy)} #pg-articulo .art-sep{margin:44px auto 44px;max-width:68ch} #pg-articulo .art-pull{margin:52px 0;padding:6px 0 6px 28px; border-left:2px solid var(--gold-deep)} #pg-articulo .art-pull p{font-family:var(--serif);font-style:italic;font-weight:500; font-size:clamp(24px,3vw,31px);line-height:1.35;color:var(--navy);margin:0;max-width:26ch} #pg-articulo .art-firma{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--sec);line-height:1.9;margin:48px 0 0} #pg-articulo .art-share{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 26px; margin:44px 0 0;padding:22px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)} #pg-articulo .art-share-k{font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:var(--gold-ink)} #pg-articulo .art-share a{font-size:13.5px;letter-spacing:.06em;color:var(--navy)} #pg-articulo .art-ficha{font-size:12px;letter-spacing:.12em;text-transform:uppercase; color:var(--sec);margin:26px 0 0} /* ===== relacionados ===== */ #pg-articulo .art-rel{margin-top:34px} #pg-articulo .art-rel-meta{display:block;font-size:11.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--gold-ink);margin-bottom:14px} #pg-articulo .art-rel h3{margin:0 0 12px} #pg-articulo .art-rel p{font-size:14.5px;line-height:1.6;color:var(--sec);margin:0 0 18px} #pg-articulo .art-rel .linkline{font-size:13px;font-weight:600;letter-spacing:.04em; text-transform:uppercase;color:var(--navy)} #pg-articulo .art-back{margin:40px 0 0} #pg-articulo .art-back a{font-weight:600} @media (max-width:640px){ #pg-articulo .art-body>p{font-size:17.5px} #pg-articulo .art-pull{padding-left:20px} } /* Decisiones clave: 1. Portada como sala de mapas: la imagen {{IMG_2228}} vive en un .cover absoluto con velo navy reforzado (.68 a .9) y un graticulado steel al 20% con dos nodos en pulso; el texto queda siempre sobre la zona más oscura del degradé (AA garantizado). 2. Lectura en Spectral 18.5/1.75 a 68ch centrada; el primer párrafo se destaca por cuerpo, peso y color navy en lugar de drop cap. 3. Un solo pull quote (frase textual del artículo) con filete dorado profundo a la izquierda; hairlines separan los tres bloques temáticos (diagnóstico global, renta vs. capacidad, caso argentino). 4. Compartir y ficha en mono chico, dorado tinta #7A5A06 solo como señal, enmarcados por hairlines para cerrar la pieza sin ruido. 5. Relacionados como cards .papel con meta mono en gold-ink y colapso a 1 columna en móvil; todo navega por el router (#/articulo, #/vision), sin URLs externas. */ /* ==== página: contacto ==== */ #pg-contacto .cx-hero{padding-top:calc(72px + clamp(48px,7vw,96px)); padding-bottom:clamp(48px,6vw,80px)} #pg-contacto .cx-lead{max-width:56ch;margin-top:18px;margin-bottom:0} #pg-contacto .cx-main{padding-top:clamp(56px,7vw,88px)} #pg-contacto .cx-form form{max-width:56ch} #pg-contacto .cx-nota{font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:var(--sec);margin:22px 0 0} #pg-contacto .cx-panel{border:1px solid var(--hair);padding:clamp(24px,3.5vw,40px); align-self:start} #pg-contacto .cx-coords{line-height:1.7;margin:0 0 14px} #pg-contacto .cx-li{margin:0 0 4px} #pg-contacto .cx-li a{font-size:14px} #pg-contacto .cx-sep{margin:22px 0 26px} #pg-contacto .cx-niveles li:last-child{border-bottom:0;padding-bottom:0} #pg-contacto .cx-niveles h4{margin:0 0 6px} #pg-contacto .cx-niveles p{margin:0;font-size:15px;color:var(--sec)} #pg-contacto .cx-mapwrap{position:relative} #pg-contacto .cx-mapwrap svg{display:block;width:100%;height:auto;max-height:460px} #pg-contacto .cx-mapcoords{margin:14px 0 0;text-align:right} @media (max-width:900px){ #pg-contacto .cx-panel{margin-top:8px} } /* Decisiones: 1) Apertura oscura compacta con padding-top calc(72px + clamp) para el header fijo. 2) g-57: el form (5 col) queda angosto y legible; el panel papel (7 col) lleva coords, LinkedIn y los tres niveles de vinculación con una línea real del brochure cada uno. 3) Nota de reserva en mono bajo el form: confidencialidad sin inventar plazos. 4) Mini-mapa: retícula al 16 %, costa abstracta en dos trazos .draw y un solo nodo .pulse celeste sobre Buenos Aires; nada literal de mapa comercial. */ /* ==== página: 404 ==== */ #pg-404 .nf-band{position:relative;overflow:hidden;box-sizing:border-box; min-height:100vh;min-height:100svh;display:flex;align-items:center; padding-top:calc(72px + clamp(48px,7vw,96px));padding-bottom:clamp(64px,9vw,128px)} #pg-404 .nf-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} #pg-404 .nf-bg path.nf-dot{stroke-dasharray:2 7;stroke-dashoffset:0;transition:none} #pg-404 .nf-wrap{position:relative;text-align:center;width:100%} #pg-404 .nf-coords{margin:0 0 26px} #pg-404 .nf-num{display:flex;align-items:center;justify-content:center; gap:clamp(10px,2.5vw,26px);font-family:var(--serif);font-weight:600; font-size:clamp(96px,19vw,190px);line-height:1;color:var(--txt-d); margin:0 0 clamp(24px,4vw,40px)} #pg-404 .nf-rombo{width:.62em;height:auto;flex:none} #pg-404 .nf-h1{font-size:clamp(26px,3.4vw,38px);line-height:1.2;margin:0 auto 14px; max-width:24ch} #pg-404 .nf-p{color:var(--txt-d-sec);margin:0 auto 34px;max-width:44ch} #pg-404 .nf-actions{display:flex;align-items:center;justify-content:center; flex-wrap:wrap;gap:18px 30px} #pg-404 .nf-actions .linkline{font-size:14.5px} /* Decisiones: 1) Banda única casi a pantalla completa (100svh) con el contenido centrado en vertical y padding-top que absorbe el header fijo. 2) Ruta cartográfica que se vuelve punteada y termina en un nodo vacío: el "fin de la carta" contado solo con trazo; un único .pulse celeste en el último punto firme. 3) El 404 es decorativo (aria-hidden) con el rombo del isotipo en versión de línea como cero central; el h1 real es la frase, así el lector de pantalla recibe sentido. 4) h1 acotado a 38px: el protagonismo tipográfico lo lleva el 404, no el titular. 5) Jerarquía de salida: btn-gold al inicio + linkline a los análisis, nada más. */