/* ============================================================ FUTTURE — Sistema de Diseño Editorial v1 (theme) Tri-color tinta #0A0A0B · crema #F1EDE5 · magenta #FF00FF Hanken Grotesk · IBM Plex Mono ============================================================ */ :root{--ink:#0A0A0B;--cream:#F1EDE5;--paper:#F4F3F1;--mag:#FF00FF;--ease:cubic-bezier(.16,1,.3,1);--sec:clamp(104px,13vw,210px)} *{margin:0;padding:0;box-sizing:border-box} html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth} body{font-family:'Hanken Grotesk',sans-serif;background:var(--ink);color:var(--cream);line-height:1.45;overflow-x:hidden} body.lock{overflow:hidden;height:100vh} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:1340px;margin:0 auto;padding:0 60px;position:relative} section{position:relative} /* a11y */ .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} .skip-link{position:fixed;top:-60px;left:12px;z-index:300;background:var(--mag);color:var(--ink);padding:10px 16px;border-radius:8px;font-weight:700;transition:top .2s} .skip-link:focus{top:12px} /* tipografía base */ .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase} .disp{font-weight:800;letter-spacing:-.035em;line-height:.98} .disp em,.it{font-family:'Hanken Grotesk',sans-serif;font-style:italic;font-weight:400;color:var(--mag);letter-spacing:-.005em} em{font-family:'Hanken Grotesk',sans-serif;font-style:italic;font-weight:400;color:var(--mag)} .rev{display:block;overflow:hidden;padding-bottom:.08em}.rev>span{display:block} .title-dot{color:var(--mag)} /* fondos por sección */ .bg-cream{background:var(--cream);color:var(--ink)} .bg-mag{background:var(--mag);color:var(--ink)} .bg-mag em,.bg-mag .it{color:var(--ink);font-weight:500} .bg-mag .eyebrow{color:#2a0024}.bg-cream .eyebrow{color:#FF00FF} /* Secciones volteadas a oscuro (refresh de ritmo en /servicios + fichas) */ .bg-ink{background:var(--ink)} .bg-ink .eyebrow{color:var(--mag)} .bg-ink h2,.bg-ink h3{color:var(--cream)} .bg-ink .lead,.bg-ink .stat .sl,.bg-ink .svc-cap .cap{color:rgba(244,243,241,.66)!important} .bg-ink .svc-cap{border-top-color:rgba(244,243,241,.16)} .bg-ink .svc-cap .cap{border-bottom-color:rgba(244,243,241,.12)} /* barra de progreso */ #prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--mag);z-index:90} /* ===== NAV ===== */ .site-nav{position:fixed;top:0;left:0;right:0;z-index:80;padding:14px 0} .nav-in{max-width:1206px;margin:0 auto;padding:0 22px;width:100%} .nav-pill{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;background:rgba(241,237,229,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(10,10,11,.08);border-radius:24px;padding:14px 14px 14px 18px;box-shadow:0 16px 44px rgba(10,10,11,.10)} .nav-l{display:flex;align-items:center;gap:30px} .brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:24px;letter-spacing:-.04em;color:#0A0A0B} .brand-dot{color:var(--mag)} .bg-mag .brand-dot{color:var(--ink)} .logo-tile{width:34px;height:34px;border-radius:9px;background:var(--mag);display:flex;align-items:center;justify-content:center;flex:none} .nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:30px;align-items:center;font-size:13.5px;font-weight:500} .nav-links a{color:rgba(10,10,11,.72);transition:color .25s}.nav-links a:hover{color:var(--mag)} .nav-r{display:flex;align-items:center;gap:18px} .nav-lang{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;display:inline-flex;align-items:center;gap:7px} .nav-lang a{color:rgba(10,10,11,.5);transition:color .2s} .nav-lang a.on{color:var(--mag);font-weight:500} .nav-lang a:hover{color:#0A0A0B} .nav-lang-sep{color:rgba(10,10,11,.25)} .nav-cta{background:#0A0A0B;color:#F1EDE5;font-weight:700;border-radius:30px;padding:9px 18px;font-size:12.5px;transition:transform .3s var(--ease)} .nav-cta:hover{transform:translateY(-2px)} .nav-burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px} .nav-burger span{width:22px;height:2px;background:#0A0A0B;border-radius:2px;transition:transform .3s var(--ease),opacity .3s} .site-nav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .site-nav.open .nav-burger span:nth-child(2){transform:translateY(-0px) rotate(-45deg)} /* botón pill primario */ .hbtn{display:inline-flex;align-items:center;gap:12px;background:var(--mag);color:var(--ink);font-weight:700;font-size:16px;padding:17px 34px;border-radius:46px;transition:transform .3s var(--ease)} .hbtn:hover{transform:translateY(-3px)}.bg-mag .hbtn{background:var(--ink);color:var(--mag)} /* ===== HERO ===== */ #hero{height:100vh;min-height:680px;position:relative;overflow:hidden} body.still #hero{height:660px;min-height:0} .hero-media{position:absolute;inset:-8% 0 0 0;height:116%;background:#0b0a0d} .hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover} .hero-media img{filter:grayscale(1) contrast(1.06) brightness(.8)} .hero-media video{filter:contrast(1.06) saturate(.5) brightness(.58)} .hero-scrim{position:absolute;inset:0;background:radial-gradient(120% 95% at 80% 6%,rgba(255,0,255,.16) 0%,rgba(255,0,255,.03) 36%,transparent 56%),linear-gradient(180deg,rgba(8,7,9,.55) 0%,rgba(8,7,9,.16) 38%,rgba(8,7,9,.86) 100%)} .hero-tag{position:absolute;top:132px;left:60px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)} .hero-reel{position:absolute;top:114px;right:60px;display:flex;align-items:center;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)} .hero-reel .pl{width:34px;height:34px;border:1px solid rgba(255,255,255,.55);border-radius:50%;display:flex;align-items:center;justify-content:center} .hero-reel .pl:after{content:"";border-left:7px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px} .hero-content{position:absolute;left:0;right:0;bottom:var(--sec)} .hero-content h1{color:#fff;font-size:clamp(28px,4.62vw,78px);font-weight:800;letter-spacing:-.03em;line-height:.96} .hero-content .sub{margin-top:26px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap} .hero-content .sub p{font-family:'Hanken Grotesk',sans-serif;font-style:normal;color:#fff;font-size:clamp(15px,1.7vw,22px);max-width:none;opacity:.9} /* statement */ .statement{padding:clamp(110px,15vw,220px) 0} .statement h2{font-size:clamp(36px,5.6vw,92px);font-weight:800;letter-spacing:-.035em;line-height:1.0;max-width:18ch} .statement .meta{margin-top:56px;display:flex;gap:60px;flex-wrap:wrap;font-size:16px;color:rgba(10,10,11,.55);max-width:62ch} .statement .meta b{color:var(--ink);font-weight:700} /* ===== SERVICIOS — ledger ===== */ #svc{padding:var(--sec) 0} .svc-head{margin-bottom:50px} .svc-head .eyebrow{color:#FF00FF} .svc-head h2{font-size:clamp(28px,3.8vw,54px);font-weight:800;letter-spacing:-.03em;line-height:1.02;max-width:20ch;margin:18px 0 18px} .svc-head p{font-size:17px;color:rgba(10,10,11,.55);max-width:60ch;line-height:1.55} .srow{display:grid;grid-template-columns:108px minmax(0,1.15fr) minmax(0,1.5fr);gap:44px;align-items:start;padding:30px 22px 34px 20px;border-top:1px solid rgba(10,10,11,.25);border-radius:10px;transition:background .35s var(--ease),border-color .3s var(--ease)} /* .srow hover ahora va por pseudo ::before en el bloque ftt-cream-hover (más abajo) */ .srow .skick{display:none} /* ftt: kicker 01·driver solo mobile (Opción C) */ .srow .sn{font-weight:900;font-size:46px;line-height:1;letter-spacing:-.04em;color:rgba(10,10,11,.2);transition:color .35s;transform:translateY(-2px)}/* ftt: line-height 1 + nudge -2px alinea el cap-top del número con el título (desktop) */ .srow .st{display:block;font-weight:800;font-size:27px;letter-spacing:-.025em;line-height:1.05} .srow .sx{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.03em;color:rgba(10,10,11,.5);margin-top:14px} .srow .sdrv{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#FF00FF;margin-bottom:12px} .srow .sd{font-size:16px;color:rgba(10,10,11,.7);line-height:1.55} .srow .srtb{margin-top:16px;font-size:14.5px;line-height:1.55;color:rgba(10,10,11,.6)} .srow .srtb b{color:#0a0a0b;font-weight:700} .srow .smore{margin-top:18px;display:inline-flex;gap:10px;align-items:center;font-size:14px;font-weight:500;color:var(--ink)} .srow .arrow{display:inline-block;transition:transform .3s var(--ease)} .srow:hover .sn{color:var(--mag)} .srow:hover{border-top-color:var(--mag)} .srow:hover .arrow{transform:translateX(7px)} /* approach / BMM */ .approach{position:relative;padding:var(--sec) 0 clamp(72px,8vw,120px);overflow:hidden} .approach-media{position:absolute;inset:0;background:#0b0a0d} .approach-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.4) contrast(1.1)} .approach-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,7,9,.95) 0%,rgba(8,7,9,.74) 52%,rgba(8,7,9,.55) 100%)} .approach .wrap{position:relative;z-index:2} .approach .eyebrow{color:var(--mag)} .approach h2{font-size:clamp(32px,4.6vw,74px);font-weight:800;letter-spacing:-.035em;line-height:1.0;max-width:17ch;margin:24px 0 0;color:#fff} .approach .ap-lead{margin-top:26px;font-size:17px;color:rgba(244,243,241,.72);max-width:540px;line-height:1.55} /* ejes BMM */ .ejes{padding:0 0 var(--sec)} .ejes-g{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .eje{border-top:1px solid var(--mag);padding:28px 22px 26px 22px;border-radius:10px} .eje .en{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;color:rgba(244,243,241,.5);margin-bottom:14px} .eje h3{font-weight:800;font-size:clamp(20px,1.95vw,26px);letter-spacing:-.02em;line-height:1.06;color:var(--mag)} .eje .etag{font-size:15px;color:var(--cream);font-weight:600;margin:2px 0 10px;letter-spacing:-.01em} .eje .ed{color:rgba(244,243,241,.6);font-size:15px;margin:12px 0 24px;line-height:1.55} .eje .ei{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-top:1px solid rgba(244,243,241,.1);transition:border-color .35s var(--ease)} .eje .ei b{font-weight:400;font-size:14.5px;transition:color .3s var(--ease),transform .3s var(--ease)} .eje .ei span{color:rgba(244,243,241,.42);text-align:right;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.02em;max-width:18ch;overflow-wrap:break-word;transition:color .3s var(--ease)} .eje .ei:hover{border-top-color:rgba(255,0,255,.5)}.eje .ei:hover b{color:var(--mag);transform:translateX(5px)}.eje .ei:hover span{color:rgba(244,243,241,.72)} /* (.eje .ehead:hover ya no hace falta — el hover unificado del .eje entero del bloque ftt-dark-hover se ocupa) */ .steps{margin-top:80px;display:grid;grid-template-columns:repeat(4,1fr);gap:34px} .step .spn{font-family:'IBM Plex Mono',monospace;font-size:13px;margin-bottom:34px;color:#2a0024} .step h3{font-weight:800;font-size:clamp(19px,2vw,27px);letter-spacing:-.02em;line-height:1.05;color:#15001a} .step p{font-size:14.5px;color:rgba(20,0,18,.72);margin-top:16px;line-height:1.55} /* stats */ .stats{padding:var(--sec) 0} .stats-g{display:grid;grid-template-columns:repeat(3,1fr);gap:50px} .stat{padding:24px 22px 26px 22px;border-radius:10px} .stat .sh{font-weight:900;font-size:clamp(66px,11vw,180px);letter-spacing:-.055em;line-height:.82;color:var(--mag)} .stat .sl{font-size:15.5px;color:rgba(10,10,11,.6);margin-top:22px;max-width:26ch;line-height:1.5} .stats-close{margin-top:88px;font-family:'Hanken Grotesk',sans-serif;font-style:normal;font-weight:700;font-size:clamp(20px,2.6vw,32px);color:var(--cream);max-width:22ch;line-height:1.25} /* pilares */ .pillars{padding:var(--sec) 0} .pillars .ph{margin-bottom:56px}.pillars .eyebrow{color:#FF00FF}.pillars .ph p{font-size:17px;line-height:1.55} .pillars h2{font-size:clamp(34px,5vw,78px);font-weight:800;letter-spacing:-.04em;line-height:1.0;margin-top:18px} .pillars h2 em{font-family:'Hanken Grotesk',sans-serif;font-style:italic;font-weight:400;color:var(--mag)} .pill-g{display:grid;grid-template-columns:repeat(3,1fr);gap:34px} .pill{border-top:1px solid rgba(10,10,11,.25);padding:24px 20px 28px;border-radius:10px;transition:border-color .3s var(--ease)} /* Pilares unificados al patrón ledger: número grande Hanken + eyebrow mono magenta + h3 27px + descripción 16px. Especificidad subida con .bg-cream prefix para superar el override .bg-cream .pn{color:#BD00BD!important} de la línea 558 (que viene después en cascade con misma especificidad+!important). */ .bg-cream .pill .pn{font-family:'Hanken Grotesk',sans-serif!important;font-weight:900;font-size:38px;letter-spacing:-.04em;line-height:1;color:rgba(10,10,11,.5)!important;margin-bottom:16px;transition:color .3s var(--ease)} .bg-cream .pill:hover .pn{color:var(--mag)!important} .pill:hover{border-top-color:var(--mag)} .pill .pll-eye{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#B000B0;margin-bottom:12px} .pill h3{font-weight:800;font-size:27px;letter-spacing:-.025em;line-height:1.05;margin:0 0 14px} .pill p{font-size:16px;line-height:1.55;color:rgba(10,10,11,.7)} /* agentes */ .agents{padding:var(--sec) 0}.agents .eyebrow{color:var(--mag)} .agents h2{font-size:clamp(30px,4.4vw,60px);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin-top:18px;color:var(--cream);max-width:24ch} .agents .alead{font-size:17px;color:rgba(244,243,241,.6);max-width:62ch;margin:22px 0 50px;line-height:1.55} .ag-g{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .agc{background:#111113;border:1px solid rgba(244,243,241,.1);border-radius:12px;padding:24px;min-height:182px;display:flex;flex-direction:column;transition:background .4s var(--ease),border-color .4s,transform .4s} .agc .agi{color:var(--mag);margin-bottom:auto} .agc .agi svg{width:26px;height:26px;display:block} .agc .agn{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--mag)} .agc h3{font-weight:800;font-size:20px;letter-spacing:-.02em;margin-top:14px} .agc .agr{font-size:11.5px;color:rgba(244,243,241,.45);margin-top:5px;font-family:'IBM Plex Mono',monospace} .agc p{font-size:13.5px;line-height:1.5;color:rgba(244,243,241,.6);margin-top:12px} /* .agc hover unificado abajo en bloque ftt-cream-hover */ .ag-tag{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;margin-bottom:14px} .ag-tag.own{color:var(--mag)} .ag-tag.sup{color:rgba(244,243,241,.42)} .ag-foot{margin-top:clamp(30px,4vw,46px);font-size:16px;line-height:1.6;color:rgba(244,243,241,.62);max-width:66ch} /* insm — manifiesto editorial (/insights): sección oscura, cards centradas con ícono */ .insm{padding:clamp(96px,13vw,170px) 0;background:var(--ink)} .insm-head{text-align:center;max-width:880px;margin:0 auto} .insm-head h2{font-size:clamp(28px,3.7vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--cream)} .insm-lead{font-size:17px;color:rgba(244,243,241,.6);margin-top:20px;line-height:1.55} .insm-g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px} .insm-card{background:#121214;border:1px solid rgba(244,243,241,.1);border-radius:16px;padding:46px 30px;text-align:center;display:flex;flex-direction:column;align-items:center;transition:background .4s var(--ease),border-color .4s,transform .4s} .insm-card .insm-ic{color:var(--cream);margin-bottom:24px} .insm-card .insm-ic svg{width:30px;height:30px;display:block} .insm-card h3{font-weight:800;font-size:19px;letter-spacing:-.01em;color:var(--mag);margin-bottom:12px} .insm-card p{font-size:14.5px;line-height:1.55;color:rgba(244,243,241,.6);max-width:26ch} .insm-card:hover{background:var(--mag);border-color:transparent;transform:translateY(-4px)} .insm-card:hover .insm-ic,.insm-card:hover h3,.insm-card:hover p{color:#0a0a0b!important} @media(max-width:860px){.insm-g{grid-template-columns:1fr;gap:14px}} /* conecta */ .conecta{padding:var(--sec) 0}.conecta .ch{margin-bottom:44px}.conecta .eyebrow{color:#FF00FF} .conecta h2{font-size:clamp(28px,4vw,56px);font-weight:800;letter-spacing:-.035em;line-height:1.05;margin-top:18px;max-width:28ch} .conecta h2 em{font-family:'Hanken Grotesk',sans-serif;font-style:italic;font-weight:400;color:var(--mag)} .cx-g{display:grid;grid-template-columns:1fr 1fr;gap:0 60px} .cx{display:flex;gap:18px;padding:22px 0;border-top:1px solid rgba(10,10,11,.12);font-size:16px;line-height:1.5;color:rgba(10,10,11,.72)} .cx .cn{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--mag);flex:none;padding-top:3px} .conecta .cfin{margin-top:46px;font-weight:800;font-size:clamp(20px,2.4vw,32px);letter-spacing:-.025em;max-width:34ch} .conecta .cfin em{font-family:'Hanken Grotesk',sans-serif;font-style:italic;font-weight:400;color:var(--mag)} /* conecta sobre fondo magenta: overrides para que nada quede magenta-on-magenta (invisible) */ .conecta.bg-mag .eyebrow{color:#2a0024} .conecta.bg-mag h2 em,.conecta.bg-mag .cfin em,.conecta.bg-mag .title-dot{color:var(--ink)} .conecta.bg-mag .cx .cn{color:#2a0024} .conecta.bg-mag .cx{border-top-color:rgba(10,10,11,.22)} /* ===== INSIGHTS cards ===== */ #ins{padding:clamp(110px,13vw,190px) 0} .ins-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:54px} .ins-head .eyebrow{color:var(--mag)} .ins-head h2{font-size:clamp(28px,3.8vw,54px);font-weight:800;letter-spacing:-.03em;line-height:1.04;max-width:18ch;margin-top:16px}.ins-head h2 em{font-family:'Hanken Grotesk',sans-serif;font-style:italic;font-weight:400;color:var(--mag)}.ins-head .rel-sub{font-size:clamp(15px,1.5vw,17px);line-height:1.55;color:rgba(10,10,11,.6);max-width:52ch;margin-top:14px} .ins-link{font-size:15px;border-bottom:1px solid var(--mag);padding-bottom:3px;color:var(--mag);white-space:nowrap} .ins-lead{font-size:17px;line-height:1.55;font-weight:500;letter-spacing:-.01em;color:rgba(10,10,11,.6);max-width:44ch;margin-top:22px} .ins-grid{display:flex;flex-direction:column;gap:30px} .ins-sub{display:grid;grid-template-columns:1fr 1fr;gap:30px} .ins{position:relative;background:#121214;border:1px solid rgba(244,243,241,.1);border-radius:18px;overflow:hidden;text-decoration:none;transition:transform .4s var(--ease),border-color .4s,box-shadow .4s} .ins .im{background-size:cover;background-position:center;transition:transform .6s var(--ease)} .ins .ik{display:flex;justify-content:space-between;align-items:center;gap:14px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase} .ins .ik .ikcat{color:var(--mag)} .ins .ik .ikcat b{font-weight:500;color:#F4F3F1;margin-right:9px} .ins .ik .ikrt{color:rgba(244,243,241,.42);white-space:nowrap} .ins .it{font-family:'Hanken Grotesk';font-style:normal;font-weight:800;color:#F4F3F1;letter-spacing:-.025em;line-height:1.13;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden} .ins .ix{color:rgba(244,243,241,.62);line-height:1.55;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden} .ins .iread{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--mag)} .ins .iread .arrow,.ins .icta .arrow{display:inline-block;transition:transform .3s var(--ease)} .ins:hover{transform:translateY(-6px);border-color:rgba(255,0,255,.4);box-shadow:0 22px 60px rgba(255,0,255,.16)} .ins:hover .im{transform:scale(1.04)} .ins:hover .iread .arrow,.ins:hover .icta .arrow{transform:translateX(5px)} .ins-feat{display:block;min-height:0} .ins-feat .im{position:relative;aspect-ratio:2/1} .ins-feat .im::after{display:none} .ins-feat .ibody{padding:clamp(30px,3.4vw,46px);display:flex;flex-direction:column;justify-content:center} .ins-feat .iflag{display:inline-flex;align-items:center;gap:9px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,243,241,.4);margin-bottom:24px} .ins-feat .iflag .dot{width:6px;height:6px;border-radius:50%;background:var(--mag)} .ins-feat .ik{margin-bottom:18px} .ins-feat .it{font-size:clamp(26px,2.4vw,35px);margin-bottom:16px;-webkit-line-clamp:5;max-width:26ch} .ins-feat .ix{font-size:15.5px;-webkit-line-clamp:2;max-width:44ch} .ins-feat .icta{margin-top:28px;align-self:flex-start;display:inline-flex;align-items:center;gap:11px;background:var(--mag);color:#0A0A0B;font-weight:700;font-size:14px;padding:13px 22px 13px 24px;border-radius:30px} .ins-sub .im,.ins-grid3 .im{aspect-ratio:2/1} .ins-sub .ibody,.ins-grid3 .ibody{padding:24px 26px 26px} .ins-sub .ik,.ins-grid3 .ik{margin-bottom:15px} .ins-sub .it,.ins-grid3 .it{font-size:21px;margin-bottom:13px;-webkit-line-clamp:3} .ins-sub .ix,.ins-grid3 .ix{font-size:14px;-webkit-line-clamp:2} .ins-sub .iread,.ins-grid3 .iread{margin-top:20px;padding-top:18px;border-top:1px solid rgba(244,243,241,.1);width:100%} /* ===== CONTACTO + CF7 ===== */ #cta{padding:var(--sec) 0} .cta h2{font-size:clamp(40px,7vw,124px);font-weight:800;letter-spacing:-.04em;line-height:.92;color:var(--ink);max-width:15ch} .cta .note{color:rgba(20,0,18,.72);font-size:16px;max-width:42ch;margin-top:30px;line-height:1.55} .contact .wrap{display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(40px,5vw,72px);align-items:start} .contact .ct-head .eyebrow{color:var(--mag);margin-bottom:26px} .ct-h2{font-size:clamp(30px,3.7vw,56px);font-weight:800;letter-spacing:-.035em;line-height:1.02;color:var(--ink);max-width:14ch} .ct-h2 em{font-family:'Hanken Grotesk',sans-serif;font-style:italic;font-weight:400;color:var(--mag)} .contact .note{margin-top:24px;font-size:17px;color:rgba(10,10,11,.6);line-height:1.55;max-width:40ch} .ct-steps{margin-top:38px;border-top:1px solid rgba(10,10,11,.14)} .ct-step{display:flex;gap:18px;align-items:flex-start;padding:16px 0;border-bottom:1px solid rgba(10,10,11,.1)} .ct-step .cs-n{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--mag);flex:none;padding-top:2px} .ct-step b{font-weight:700;font-size:15.5px;letter-spacing:-.01em;display:block} .ct-step span{display:block;margin-top:3px;font-size:14px;color:rgba(10,10,11,.6);line-height:1.45} .ct-form{background:#fff;border:1px solid rgba(10,10,11,.08);border-radius:20px;padding:clamp(26px,3vw,40px);box-shadow:0 24px 60px rgba(10,10,11,.07)} .wpcf7-form .hidden-fields-container{display:none} .wpcf7-form .futture-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .wpcf7-form .futture-field.full{grid-column:1/-1} .wpcf7-form p{margin:0} .wpcf7-form label{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(10,10,11,.5);margin-bottom:7px} .wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form select,.wpcf7-form textarea{width:100%;background:#faf8f5;border:1px solid rgba(10,10,11,.13);border-radius:11px;padding:13px 14px;font-family:'Hanken Grotesk',sans-serif;font-size:15px;color:var(--ink);text-transform:none;transition:border-color .25s,box-shadow .25s,background .25s;-webkit-appearance:none;appearance:none} .wpcf7-form input::placeholder,.wpcf7-form textarea::placeholder{color:rgba(10,10,11,.4)} .wpcf7-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230A0A0B' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px} .wpcf7-form input:focus,.wpcf7-form select:focus,.wpcf7-form textarea:focus{outline:0;background:#fff;border-color:var(--mag);box-shadow:0 0 0 3px rgba(255,0,255,.12)} .wpcf7-form textarea{min-height:120px;resize:vertical} .wpcf7-form .futture-submit{margin-top:22px} .wpcf7-form .wpcf7-submit{background:var(--mag);color:var(--ink);font-weight:700;font-size:15px;border:0;border-radius:40px;padding:15px 34px;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s} .wpcf7-form .wpcf7-submit:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(255,0,255,.28)} .wpcf7-form .futture-form-privacy{margin-top:16px;font-size:12.5px;color:rgba(10,10,11,.5)} .wpcf7-form .futture-form-privacy a{color:var(--mag);text-decoration:underline} .wpcf7-form .wpcf7-response-output{display:none;margin:16px 0 0;font-size:14px;padding:11px 15px;border-radius:9px;border:1px solid rgba(10,10,11,.2)} .wpcf7-form.sent .wpcf7-response-output,.wpcf7-form.invalid .wpcf7-response-output,.wpcf7-form.failed .wpcf7-response-output,.wpcf7-form.unaccepted .wpcf7-response-output,.wpcf7-form.spam .wpcf7-response-output{display:block} .wpcf7-form.sent .wpcf7-response-output{border-color:#1d9e75;background:rgba(29,158,117,.1);color:#0f6e56} .wpcf7-form.invalid .wpcf7-response-output,.wpcf7-form.failed .wpcf7-response-output{border-color:#e24b4a;background:rgba(226,75,74,.1);color:#a32d2d} .wpcf7-form .wpcf7-not-valid-tip{color:#a32d2d;font-size:12px;margin-top:5px;display:block} /* ===== AGNÓSTICOS (marquee) ===== */ .agno{padding:var(--sec) 0 clamp(40px,5vw,60px);overflow:hidden;background:var(--mag)} .agno+.site-footer.ftr,.agno+.site-footer.close{margin-top:0} .agno .agh{font-size:clamp(22px,3vw,42px);font-weight:800;letter-spacing:-.03em;text-align:center;color:#0A0A0B;margin-bottom:48px;padding:0 24px} .agno .agh em{font-family:'Hanken Grotesk',sans-serif;font-style:italic;font-weight:400;color:rgba(10,10,11,.72)} .agno-mq{position:relative;width:100%;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .agno-track{display:flex;gap:62px;width:max-content;animation:agnomove 42s linear infinite;align-items:center} .agno-track .lg{flex:none;color:#0A0A0B;height:32px;display:flex;align-items:center;transition:color .3s} .agno-track .lg svg{height:30px;width:auto;display:block} .agno-track .lg:hover{color:#F1EDE5} @keyframes agnomove{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ===== FOOTER ===== */ .site-footer.ftr{padding:0 0 clamp(46px,5vw,66px)} .site-footer .wrap{position:relative;padding-top:clamp(84px,9vw,150px)} .site-footer .wrap::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(10,10,11,.32),transparent)} .close-cols{display:grid;grid-template-columns:170px 170px minmax(0,1fr);column-gap:clamp(56px,6vw,104px);row-gap:44px;align-items:start} @media(min-width:881px){.close-cols>div:nth-child(1){grid-column:3;grid-row:1}.close-cols>div:nth-child(2){grid-column:1;grid-row:1}.close-cols>div:nth-child(3){grid-column:2;grid-row:1}} .cc-brand{font-weight:700;font-size:44px;letter-spacing:-.04em;display:flex;align-items:center;gap:16px;color:var(--ink);width:fit-content;margin:0 0 clamp(48px,5vw,76px);transition:transform .35s var(--ease);transform-origin:left center} .cc-brand:hover{transform:scale(1.06)} .cc-brand .logo-tile{background:#0a0a0b;width:44px;height:44px;border-radius:12px} .cc-brand .logo-tile svg{width:27px;height:27px} .close-cols .cc-h4{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:#2a0024;text-transform:uppercase;margin-bottom:16px} .close-cols a{display:block;font-size:15px;color:rgba(10,10,11,.72);margin-bottom:15px;transition:color .25s,transform .3s var(--ease)} .close-cols a:hover{color:var(--ink);transform:translateX(6px)} .close-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(56px,6vw,92px);font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(10,10,11,.55)} /* ===== REVEALS (IntersectionObserver) ===== */ .rvh{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .rvh.on{opacity:1;transform:none} .rvm>span{transform:translateY(110%);transition:transform 1s var(--ease)} .rvm.on>span{transform:none} /* Hero: reveal por animación CSS (visible aunque falle el JS) */ .hl .rev>span{animation:heroUp 1.1s var(--ease) both;animation-delay:.12s} .hero-content h1 .brm{display:none} .hl .rev:nth-child(2)>span{animation-delay:.24s} @keyframes heroUp{from{transform:translateY(110%)}to{transform:none}} /* anchos unificados de títulos + subtítulos (todo menos hero y cierre) */ .pillars h2,.svc-head h2,.approach h2,.agents h2,.conecta h2,.stats h2,.ins-head h2{font-size:clamp(28px,3.7vw,56px);line-height:1.05;letter-spacing:-.03em;max-width:700px} .pillars .ph p,.svc-head p,.approach .ap-lead,.agents .alead{max-width:540px} /* ===== PÁGINA DE SERVICIO (ficha) ===== */ .svc-hero{background:var(--cream);padding:clamp(150px,18vw,240px) 0 clamp(70px,9vw,120px)} .svc-hero .eyebrow{color:var(--mag)} .svc-hero h1{font-size:clamp(40px,6.5vw,92px);font-weight:800;letter-spacing:-.04em;line-height:1.0;margin-top:16px;color:var(--ink)} .svc-hero .wrap{position:relative} .svc-back{position:absolute;top:-34px;left:60px;display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.02em;color:rgba(10,10,11,.5);transition:color .25s} .svc-back:hover{color:var(--mag)} .svc-back .ab{font-size:15px;line-height:1;transition:transform .25s} .svc-back:hover .ab{transform:translateX(-4px)} .scroll-cue{margin:clamp(46px,6vw,78px) auto 0;display:none;flex-direction:column;align-items:center;gap:7px;width:fit-content;cursor:pointer} /* scroll-cue = mouse animado (tinta para fondos claros; el Home magenta lo sobre-escribe a crema) */ .scroll-cue .sc-txt{display:block;font-size:0;order:2} .scroll-cue .sc-txt::before{content:"scroll";font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,11,.5)} .scroll-cue .sc-line{order:1;position:relative;width:25px;height:40px;background:transparent;border:2px solid rgba(10,10,11,.55);border-radius:13px;animation:scmBob 2s ease-in-out infinite} .scroll-cue .sc-dot{position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:3px;background:var(--mag);margin-left:-2px;animation:scmWheel 1.9s cubic-bezier(.5,0,.3,1) infinite} @media(prefers-reduced-motion:reduce){.scroll-cue .sc-line{animation:none}.scroll-cue .sc-dot{animation:none;top:12px}} .ftt-hero .scroll-cue,.svc-hero .scroll-cue{position:relative;z-index:2} @media(max-width:880px){.ftt-hero .scroll-cue,.svc-hero .scroll-cue{display:none}} #hero .scroll-cue{position:absolute;bottom:clamp(18px,3vh,32px);left:50%;transform:translateX(-50%);margin:0;z-index:10;cursor:pointer;display:flex} #hero .scroll-cue .sc-txt{color:rgba(244,243,241,.55)} #hero .scroll-cue .sc-line{background:rgba(244,243,241,.22)} .svc-rot{margin-top:28px;position:relative;min-height:2.4em;font-weight:500;font-size:clamp(22px,3vw,40px);color:rgba(10,10,11,.85);letter-spacing:-.02em;line-height:1.2} .svc-rot em{font-family:'Hanken Grotesk',sans-serif;font-style:italic;font-weight:400;color:var(--mag)} .svc-rot span{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .svc-rot span.on{opacity:1;transform:none} .svc-rot span:first-child{opacity:1;transform:none} /* visible sin JS */ .svc-rot.js span:first-child:not(.on){opacity:0;transform:translateY(10px)} .svc-hero .svc-lead{margin-top:clamp(26px,4vw,46px);font-size:17px;color:rgba(10,10,11,.62);max-width:46ch;line-height:1.55} /* Ficha de servicio: hero 2-columnas (lead | rotador+dots), replica /servicios */ .svc-hero .svc-head{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:start;margin-top:clamp(40px,5.5vw,90px)} .svc-hero .svc-head-l p{margin-top:0;font-size:17px;line-height:1.55;color:rgba(10,10,11,.6);max-width:60ch} .svc-hero .svc-rtb{align-self:start;padding-top:0} .svc-hero .svc-rot{color:var(--ink);font-size:clamp(19px,2.3vw,30px);min-height:2.4em;font-weight:500;line-height:1.2;letter-spacing:-.02em;margin:-0.45em 0 0} .svc-hero .svc-rtb-dots{margin-top:14px} @media(max-width:820px){.svc-hero .svc-head{grid-template-columns:1fr;gap:26px;margin-top:36px}.svc-hero .svc-rot{min-height:2.6em;margin:0}.svc-hero .svc-head-l p{font-size:18px}} .svc-sec{padding:clamp(90px,12vw,170px) 0} .svc-sec h2{font-size:clamp(28px,3.7vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.05;max-width:700px;margin-top:18px} .svc-sec h2 em{font-family:'Hanken Grotesk',sans-serif;font-style:italic;font-weight:400;color:var(--mag)} .svc-sec .lead{font-size:17px;color:rgba(10,10,11,.62);max-width:600px;line-height:1.55;margin-top:22px} .svc-cap{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;margin-top:48px;border-top:1px solid rgba(10,10,11,.14)} .svc-cap .cap{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid rgba(10,10,11,.1);font-size:16.5px;color:rgba(10,10,11,.78);line-height:1.5} .svc-cap .cap .cn{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--mag);flex:none;padding-top:3px} .svc-agents-g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;max-width:1100px} /* FAQ acordeón (native
, editable, sin JS) */ .faq{max-width:840px;margin-top:48px} .faq details{border-top:1px solid rgba(10,10,11,.14)} .faq details:last-of-type{border-bottom:1px solid rgba(10,10,11,.14)} .faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;display:block;position:relative;font-weight:700;font-size:clamp(17px,1.9vw,21px);letter-spacing:-.01em;line-height:1.3;color:var(--ink);transition:color .25s} .faq summary::-webkit-details-marker{display:none} .faq summary .fq-ic{position:absolute;right:0;top:50%;transform:translateY(-50%);width:22px;height:22px} .faq summary .fq-ic::before,.faq summary .fq-ic::after{content:"";position:absolute;background:var(--mag);border-radius:2px} .faq summary .fq-ic::before{left:0;top:10px;width:22px;height:2px} .faq summary .fq-ic::after{left:10px;top:0;width:2px;height:22px;transition:transform .3s var(--ease)} .faq details[open] summary{color:var(--mag)} .faq details[open] summary .fq-ic::after{transform:scaleY(0)} .faq .fq-a{padding:0 0 24px;font-size:16px;color:rgba(10,10,11,.68);line-height:1.6;max-width:72ch} /* ===== ARTÍCULO (single) + LISTADO INSIGHTS ===== */ .post-single{background:var(--cream);color:var(--ink)} .post-hero{padding:clamp(150px,18vw,240px) 0 clamp(28px,4vw,46px)} .post-hero .eyebrow{color:#FF00FF;margin:0 0 14px;display:block} .post-title{font-size:clamp(32px,4.4vw,60px);font-weight:800;letter-spacing:-.035em;line-height:1.04;color:var(--ink);max-width:18ch} .post-meta{margin:24px 0 0;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.04em;color:rgba(10,10,11,.5);text-transform:uppercase} .post-cover{max-width:1100px;margin:clamp(28px,4vw,46px) auto 0;padding:0 60px} .post-cover img{width:100%;border-radius:18px} .post-body{padding:clamp(50px,7vw,90px) 0 clamp(40px,5vw,60px)} /* Tablas anchas: scroll horizontal DENTRO de su caja (no ensanchan la página en móvil/ventanas angostas) */ .post-body .wp-block-table,.post-body figure.wp-block-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(10,10,11,.42) rgba(10,10,11,.1)} .post-body .wp-block-table::-webkit-scrollbar{height:9px} .post-body .wp-block-table::-webkit-scrollbar-track{background:rgba(10,10,11,.1);border-radius:6px} .post-body .wp-block-table::-webkit-scrollbar-thumb{background:rgba(10,10,11,.42);border-radius:6px} .post-body .wp-block-table::-webkit-scrollbar-thumb:hover{background:rgba(10,10,11,.6)} /* ftt-tablas: líneas con color (magenta), header tinta con acento, zebra + lectura mobile */ .post-body .wp-block-table table{border-collapse:collapse;min-width:100%;border:1.5px solid #BD00BD;background:#faf8f4;font-size:15.5px;line-height:1.55} .post-body .wp-block-table th,.post-body .wp-block-table td{border:1px solid rgba(189,0,189,.34);padding:13px 16px;text-align:left;vertical-align:top} .post-body .wp-block-table thead th{background:var(--ink);color:var(--cream);font-weight:700;border-color:var(--ink);border-bottom:2px solid var(--mag);letter-spacing:-.01em} .post-body .wp-block-table tbody tr:nth-child(even){background:rgba(189,0,189,.055)} .post-body .wp-block-table tbody td strong{color:var(--ink)} @media(max-width:880px){.post-body .wp-block-table th,.post-body .wp-block-table td{padding:10px 12px;font-size:14px}} .post-content{font-size:18px;line-height:1.75;color:rgba(10,10,11,.82)} .post-content figure{margin:32px 0} .post-content figure img{width:100%;border-radius:14px} .post-content figcaption{margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.02em;color:rgba(10,10,11,.5);text-align:center} .post-content>*{margin-bottom:24px} .post-content h2{font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.025em;color:var(--ink);margin:48px 0 18px;line-height:1.15} .post-content h3{font-size:clamp(21px,2.2vw,27px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:36px 0 14px} .post-content a{color:var(--mag);text-decoration:underline} .post-content strong{font-weight:700;color:var(--ink)} .post-content em{font-family:'Hanken Grotesk',sans-serif;font-style:italic;color:var(--mag)} .post-content blockquote{border-left:3px solid var(--mag);padding-left:24px;margin:32px 0;font-family:'Hanken Grotesk',sans-serif;font-style:italic;font-size:clamp(22px,2.6vw,30px);color:var(--mag);line-height:1.3} .post-content ul,.post-content ol{margin:0 0 24px 24px}.post-content li{margin-bottom:10px} .post-content img{border-radius:14px;margin:32px 0} .post-back{display:inline-block;margin-top:60px;font-weight:600;color:var(--mag);border-bottom:1px solid var(--mag);padding-bottom:2px} /* Sigue leyendo (relacionados al final del artículo): link arriba + aire reducido */ .post-related.ins-listing{padding-top:clamp(16px,2vw,28px);padding-bottom:var(--sec)} .post-related .rel-back{margin-top:0;margin-bottom:clamp(36px,4.5vw,56px)} .ins-listing{padding:var(--sec) 0} .ins-listing .ins-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:46px} .page-numbers{display:inline-block;padding:9px 15px;margin:4px;border:1px solid rgba(10,10,11,.2);border-radius:9px;font-weight:600;color:var(--ink);transition:background .25s,color .25s,border-color .25s} .page-numbers:hover,.page-numbers.current{background:var(--mag);border-color:transparent;color:var(--ink)} .ins-listing .navigation{margin-top:50px;text-align:center} /* ===== Page hero estándar (.ftt-hero) — el "Hero de Insights", crema + H1 grande, en TODA página ===== */ .ftt-hero{padding:clamp(150px,18vw,240px) 0 0} /* Estandariza el punto de inicio: si la 1ª sección de una página NO es hero (ej. /nosotros parte con .svc-sec), arranca al mismo top que el hero estándar */ #main > section.svc-sec:first-of-type{padding-top:clamp(150px,18vw,240px)} .ftt-hero h1{font-size:clamp(40px,6.5vw,92px);font-weight:800;letter-spacing:-.04em;line-height:1.0;color:var(--ink);max-width:18ch;margin-top:16px;padding-bottom:.2em} .ftt-hero .hero-lead{margin-top:24px;font-size:17px;line-height:1.55;color:rgba(10,10,11,.62);max-width:48ch} /* ===== PÁGINA LEGAL (privacidad) ===== */ .legal-hero{background:var(--ink);color:var(--cream);padding:clamp(150px,18vw,240px) 0 clamp(50px,7vw,90px)} .legal-hero .eyebrow{color:var(--mag)} .legal-hero h1{font-size:clamp(40px,6.5vw,92px);font-weight:800;letter-spacing:-.04em;line-height:.96;margin-top:16px;color:#fff} .legal-hero p{margin-top:22px;color:rgba(244,243,241,.6);max-width:52ch;font-size:17px;line-height:1.55} .legal{padding:clamp(70px,9vw,120px) 0} .legal .lwrap{max-width:760px} .legal h2{font-size:clamp(20px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:48px 0 16px;line-height:1.2} .legal h2:first-child{margin-top:0} .legal p{font-size:16px;line-height:1.7;color:rgba(10,10,11,.74);margin-bottom:16px} .legal li{font-size:16px;line-height:1.7;color:rgba(10,10,11,.74);margin:0 0 8px 20px} /* ===== /NOSOTROS — fundador ===== */ .nos-hero{background:var(--ink);color:var(--cream);padding:clamp(150px,18vw,240px) 0 clamp(60px,8vw,110px)} .nos-hero .eyebrow{color:var(--mag)} .nos-hero h1{font-size:clamp(48px,8.5vw,120px);font-weight:800;letter-spacing:-.045em;line-height:.95;margin-top:18px;color:#fff} .nos-hero p{margin-top:clamp(24px,3vw,40px);font-size:clamp(18px,2vw,24px);color:rgba(244,243,241,.72);max-width:52ch;line-height:1.5} .fndr{display:grid;grid-template-columns:300px 1fr;gap:clamp(40px,6vw,90px);align-items:start;margin-top:60px} .fndr-id{position:sticky;top:120px} .fndr-photo{width:170px;height:170px;border-radius:50%;object-fit:cover;border:3px solid var(--mag);background:#e7e3da} .fndr-name{font-weight:800;font-size:24px;letter-spacing:-.03em;margin-top:22px;color:var(--ink)} .fndr-role{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#C200C2;margin-top:6px} .fndr-li{display:inline-flex;margin-top:18px;font-size:14px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--mag);padding-bottom:2px} .fndr-body p{font-size:17px;line-height:1.7;color:rgba(10,10,11,.78);margin-bottom:20px;max-width:62ch} .fndr-body .pull{font-family:'Hanken Grotesk',sans-serif;font-style:italic;font-weight:400;font-size:clamp(22px,2.6vw,34px);color:var(--mag);line-height:1.25;margin:8px 0 26px;max-width:26ch} /* ===== /SERVICIOS — acordeón de cajas magentas (firma) ===== */ #svc.svc-index{padding:clamp(48px,6.5vw,100px) 0 var(--sec)} .svc-index .svc-head{margin-bottom:0} .fac{display:flex;gap:14px;margin-top:54px} .fac-p{position:relative;flex:1;min-height:540px;background:#121214;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:30px;text-decoration:none;transition:flex .5s var(--ease),background .5s var(--ease)} .fac-n{position:absolute;top:26px;left:30px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--mag);transition:color .4s} .fac-lbl{position:absolute;left:34px;bottom:30px;writing-mode:vertical-rl;transform:rotate(180deg);font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--cream);white-space:nowrap;transition:opacity .3s} .fac-body{opacity:0;transform:translateY(10px);transition:opacity .4s .08s var(--ease),transform .4s .08s var(--ease);max-width:430px} .fac-eje{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#2a0024;margin-bottom:12px} .fac-body h3{font-weight:800;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.03em;line-height:1.02;color:var(--ink)} .fac-body p{font-size:15.5px;line-height:1.55;color:rgba(10,10,11,.82);margin-top:14px} .fac-more{margin-top:22px;display:inline-flex;gap:9px;align-items:center;font-weight:700;font-size:14px;color:var(--ink)} .fac-more .arrow{transition:transform .3s var(--ease)} .fac-p.on{flex:3.4;background:var(--mag)} .fac-p.on .fac-n{color:#2a0024} .fac-p.on .fac-lbl{opacity:0} .fac-p.on .fac-body{opacity:1;transform:none} .fac-p.on:hover .fac-more .arrow{transform:translateX(6px)} /* ===== RESPONSIVE ===== */ @media (max-width:880px){ .wrap,.nav-in{padding:0 22px} .svc-back{left:22px} .hero-tag,.hero-reel{left:22px;right:22px} /* ftt-hero-mobile: subir el titular sobre el scroll-cue (no se superponen) */ .hero-content{bottom:clamp(108px,15vh,140px)} #hero .scroll-cue{bottom:20px} #hero .scroll-cue .sc-line{height:38px} #hero,body.still #hero{height:90vh;height:90svh;min-height:0} .hero-content h1{font-size:clamp(30px,8vw,38px)} .hero-content .sub{margin-top:16px} .hero-net .hero-content .eyebrow{font-size:13px} .hero-content .sub p{font-size:18px} .hero-content h1 .brm{display:inline} .nav-burger{display:flex;order:3} .nav-r{display:contents} .nav-lang{order:2;margin-left:auto} .nav-cta{display:none;order:5} .nav-links{position:static;transform:none;display:none;flex-direction:column;align-items:center;gap:14px;width:100%;order:4;padding:16px 4px 4px;text-align:center} .site-nav.open .nav-pill{flex-wrap:wrap} .site-nav.open .nav-links{display:flex;width:100%;padding-bottom:18px;border-bottom:1px solid rgba(10,10,11,.1)} .site-nav.open .nav-cta{display:inline-flex;margin:14px auto 6px} .ejes-g,.steps,.stats-g,.ins-grid,.pill-g,.ag-g,.cx-g{grid-template-columns:1fr;gap:24px} .ins-feat,.ins-sub{grid-template-columns:1fr}.ins-feat{min-height:0}.ins-feat .im{aspect-ratio:16/10}.ins-feat .im::after{display:none}.ins-sub{gap:30px} .steps,.ejes-g,.stats-g,.ins-grid{gap:40px} /* ftt-ledger-mobile (Opción C): kicker 01·driver arriba, todo flush-left */ .srow{display:block;padding:30px 20px} .srow .skick{display:flex;gap:10px;align-items:baseline;margin-bottom:13px} .srow .skick .ki{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:14px;letter-spacing:.04em;color:#B000B0} .srow .skick .sdrv{margin:0} .srow .sn{display:none} .srow .sr3 .sdrv{display:none} .srow .st{font-size:24px} .pill h3{font-size:20px} .srow .sr3{margin-top:18px} .contact .wrap{grid-template-columns:1fr;gap:40px} .svc-cap,.svc-agents-g{grid-template-columns:1fr;gap:0}.svc-agents-g{gap:14px} .fac{flex-direction:column;gap:12px} .fac-p,.fac-p.on{min-height:0;flex:none;background:#121214;padding:26px} .fac-lbl{display:none} .fac-n{position:static;margin-bottom:14px;color:var(--mag)} .fac-body{opacity:1;transform:none;max-width:none} .fac-eje{color:var(--mag)}.fac-body h3{color:var(--cream)}.fac-body p{color:rgba(244,243,241,.66)}.fac-more{color:var(--mag)} .fndr{grid-template-columns:1fr;gap:34px}.fndr-id{position:static;display:grid;grid-template-columns:90px 1fr;column-gap:18px;align-items:start}.fndr-photo{width:90px;height:90px;grid-column:1;grid-row:1/4;align-self:start}.fndr-name{grid-column:2;grid-row:1}.fndr-role{grid-column:2;grid-row:2}.fndr-li{grid-column:2;grid-row:3} .ins-listing .ins-grid3{grid-template-columns:1fr}.post-cover{padding:0 22px} .close-cols{grid-template-columns:1fr 1fr;gap:30px 24px} .close-cols>div:nth-child(1),.close-cols>div:nth-child(2),.close-cols>div:nth-child(3){grid-column:auto} .close-cols>div:first-child{grid-column:1/-1;margin-bottom:4px} .close-bot{flex-direction:column;gap:6px} .pillars h2,.svc-head h2,.approach h2,.agents h2,.conecta h2,.stats h2,.ins-head h2,.pillars .ph p,.svc-head p,.approach .ap-lead,.agents .alead{max-width:100%} .post-content h2,.post-content h3,.post-content h4{text-align:left!important} } /* Compat: oculta la sección legacy "¿cómo nos conectamos?" del mu-plugin viejo (futture-conecta-section.php). El theme nuevo no la usa. Para quitarla del todo, renombrar ese archivo en wp-content/mu-plugins/. */ .ftc{display:none!important} @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} .rvh,.rvm>span,.hl .rev>span{opacity:1;transform:none} html{scroll-behavior:auto} } /* ===== /servicios: hero 2-col + RTB rotador + statement ===== */ .svc-index .svc-head{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:start} .svc-rtb{align-self:start;padding-top:0} .svc-index .svc-rot{color:var(--ink);font-size:clamp(19px,2.3vw,30px);min-height:2.4em;font-weight:500;margin:-0.45em 0 0} .svc-index .svc-rot em{color:var(--mag)} .svc-rtb-dots{display:flex;gap:9px;margin-top:26px} .svc-index .svc-rtb-dots{margin-top:14px} .svc-rtb-dots i{width:8px;height:8px;border-radius:50%;background:rgba(10,10,11,.16);transition:background .45s var(--ease),transform .45s var(--ease)} .svc-rtb-dots i.on{background:var(--mag);transform:scale(1.2)} .svc-stmt{text-align:center;max-width:760px;margin:clamp(64px,9vw,120px) auto;font-size:clamp(21px,2.5vw,33px);font-weight:500;line-height:1.4;letter-spacing:-.02em;color:var(--ink)} .svc-stmt em{font-family:'Hanken Grotesk',sans-serif;font-style:italic;color:var(--mag)} @media(max-width:820px){.svc-index .svc-head{grid-template-columns:1fr;gap:30px}.svc-rtb{padding-top:0}.svc-index .svc-rot{min-height:2.6em}} /* ===== /contacto: variante 4 cards (insm cols4) + respuestas FAQ con listas ===== */ .insm-g.cols4{grid-template-columns:repeat(4,1fr)} @media(max-width:980px){.insm-g.cols4{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.insm-g.cols4{grid-template-columns:1fr}} .faq .fq-a p{margin:0 0 12px}.faq .fq-a p:last-child{margin-bottom:0} .faq .fq-a ul{margin:6px 0 12px 20px}.faq .fq-a li{margin-bottom:5px} .faq .fq-a strong{color:var(--ink);font-weight:700} /* === A11y AA: magenta de TEXTO sobre fondo claro -> #BD00BD (≥4.5:1). Sobre oscuro/magenta el #FF00FF se mantiene. === */ .bg-cream .eyebrow,.bg-cream em,.bg-cream .sh,.bg-cream .stats-close,.bg-cream .pn,.bg-cream .cn,.bg-cream .cs-n,.bg-cream .sdrv,.bg-cream .ikcat,.bg-cream .iread,.bg-cream .ins-link{color:#B000B0!important} .bg-cream .title-dot{color:#BD00BD!important} /* === A11y AA: contraste de textos atenuados (mín. para pasar 4.5:1 / 3:1) === */ /* grises sobre crema */ .statement .meta,.svc-head p,.srow .sx,.srow .srtb,.stat .sl,.contact .note,.ct-step span,.wpcf7-form label,.wpcf7-form .futture-form-privacy,.post-meta,.post-content figcaption,.pillars .ph p{color:rgba(10,10,11,.72)!important} .srow .sn{color:rgba(10,10,11,.5)} .close-bot{color:rgba(10,10,11,.8)!important} /* grises sobre oscuro y cards */ .eje .en,.eje .ed,.eje .ei span,.agents .alead,.insm-lead,.insm-card p,.legal-hero p,.agc .agr,.agc p,.ins .ik .ikrt,.ins-feat .iflag{color:rgba(244,243,241,.66)!important} /* link magenta sobre blanco/claro */ .wpcf7-form .futture-form-privacy a{color:#BD00BD!important} /* texto/em sobre fondo magenta -> tinta */ .agno .agh,.agno .agh em{color:var(--ink)!important} .step p{color:rgba(20,0,18,.86)!important} .ins .ik .ikcat,.ins .iread{color:var(--mag)!important} /* Ocultar el widget de banderas flotante de GTranslate (usamos el selector ES|EN del nav) */ .gtranslate_wrapper{display:none!important} /* ===== Home Insights (#ins): título a la izq + destacado a la der (~mitad), 3 cards abajo (cards oscuras base) ===== */ #ins .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px 56px;align-items:start} #ins .ins-head{margin-bottom:0;flex-direction:column;align-items:flex-start;gap:22px} #ins .ins-grid{margin:0} #ins .ins-grid3{grid-column:1 / -1;margin-top:6px} @media(max-width:880px){#ins .wrap{grid-template-columns:1fr;gap:30px;align-items:start}#ins .ins-grid3{grid-template-columns:1fr}} /* Líneas verticales entre las 4 etapas (mismo tono que las del listado conecta) */ /* ftt-scroll-rail · indicador de progreso D (línea lateral + nombre de sección) */ #scroll-rail{position:fixed;right:24px;top:50%;transform:translateY(-50%);height:38vh;max-height:330px;min-height:170px;width:2px;z-index:90;pointer-events:none;opacity:0;transition:opacity .4s ease} #scroll-rail.on{opacity:1} #scroll-rail .sr-track{position:absolute;inset:0;border-radius:2px;background:rgba(10,10,11,.15)} #scroll-rail .sr-fill{position:absolute;top:0;left:0;width:100%;height:0;border-radius:2px;background:#FF00FF} #scroll-rail .sr-knob{position:absolute;left:50%;top:0;width:8px;height:8px;border-radius:50%;background:#FF00FF;transform:translate(-50%,-50%)} #scroll-rail .sr-label{position:absolute;right:14px;top:0;transform:translateY(-50%);font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#0A0A0B;white-space:nowrap;transition:color .3s,opacity .3s;opacity:0} #scroll-rail.on .sr-label{opacity:1} #scroll-rail.tone-dark .sr-track{background:rgba(244,243,241,.22)} #scroll-rail.tone-dark .sr-label{color:#F1EDE5} #scroll-rail.tone-mag .sr-track{background:rgba(10,10,11,.28)} #scroll-rail.tone-mag .sr-fill,#scroll-rail.tone-mag .sr-knob{background:#0A0A0B} #scroll-rail.tone-mag .sr-label{color:#0A0A0B} @media(max-width:880px){#scroll-rail{display:none}} /* ftt-why · comparativa "Agencia tradicional vs Con Futture" (Home, sobre el formulario). Grilla intercalada L,R,L,R → cada fila comparte altura entre columnas (alineadas). */ .why{padding:var(--sec) 0} .why .why-head{max-width:820px} .why h2{font-size:clamp(28px,3.7vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.05;max-width:26ch;margin-top:16px} .why-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;row-gap:0;margin-top:clamp(34px,4.5vw,58px);max-width:1010px} .why-grid>div{font-size:clamp(14px,1.4vw,15.5px);line-height:1.4;display:flex;align-items:center} .why-grid>.why-l{color:rgba(244,243,241,.6);border-top:1px solid rgba(244,243,241,.12);border-left:1px solid rgba(244,243,241,.2);border-right:1px solid rgba(244,243,241,.2);padding:20px 44px;border-radius:0} .why-grid>.why-l:not(:has(~ .why-l)){border-bottom:1px solid rgba(244,243,241,.2);border-radius:0 0 20px 20px;padding-bottom:36px} .why-grid>.why-r{color:var(--ink);background:var(--mag);border-top:1px solid rgba(10,10,11,.14);padding:20px 44px;border-radius:0} .why-grid>.why-r:last-child{border-radius:0 0 10px 10px} .why-lab{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;word-spacing:.22em;text-transform:uppercase} .why-grid>.why-lab{align-items:flex-end} .why-grid>.why-lab-l{color:rgba(244,243,241,.9);padding:34px 44px 18px;border:1px solid rgba(244,243,241,.2);border-bottom:none;border-radius:20px 20px 0 0} .why-grid>.why-lab-r{color:#2a0024;background:var(--mag);border-top:0;border-radius:20px 20px 0 0;padding:34px 44px 18px} .why-grid>.why-r:last-child{border-radius:0 0 20px 20px;padding-bottom:36px} @media(max-width:760px){ .why-grid{grid-template-columns:1fr;max-width:460px} .why-grid>.why-lab-l{order:0}.why-grid>.why-l{order:1} .why-grid>.why-lab-r{order:2;margin-top:30px}.why-grid>.why-r{order:3} .why-l{padding-right:0} } /* ===== MODELOS DE TRABAJO (3 formas de conectarse con Futture) ===== */ .modelos{padding:clamp(72px,9vw,120px) 0} .modelos h2{font-size:clamp(28px,3.7vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-top:16px;max-width:26ch} .modelos .mod-lead{font-size:17px;line-height:1.55;color:rgba(244,243,241,.6);max-width:56ch;margin-top:18px} .modelos .mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(44px,5vw,64px)} .modelos .mod{background:rgba(255,255,255,.06);border-radius:18px;padding:48px 38px 54px;transition:background .35s var(--ease),transform .35s var(--ease),color .3s var(--ease)} .modelos .mod:hover{background:var(--mag);transform:translateY(-5px)} .modelos .mod-num{font-family:'Hanken Grotesk',sans-serif;font-size:44px;font-weight:800;color:#BD00BD;line-height:1;margin-bottom:28px;letter-spacing:-.02em;transition:color .3s var(--ease)} .modelos .mod-title{font-family:'Hanken Grotesk',sans-serif;font-size:clamp(20px,1.8vw,24px);font-weight:700;color:var(--cream);margin-bottom:14px;letter-spacing:-.02em;transition:color .3s var(--ease)} .modelos .mod-desc{font-size:16px;line-height:1.7;color:rgba(244,243,241,.6);margin:0;transition:color .3s var(--ease)} .modelos .mod:hover .mod-num,.modelos .mod:hover .mod-title{color:#0a0a0b} .modelos .mod:hover .mod-desc{color:rgba(10,10,11,.75)} @media(max-width:880px){.modelos .mod-grid{grid-template-columns:1fr;max-width:460px}} /* ftt-newsletter · form Klaviyo en footer magenta (suscribe a lista vía Client API) */ .cc-news{margin-top:0;max-width:720px} .kl-form input[type=email]{min-width:230px} .cc-news-p{font-size:13.5px;line-height:1.5;color:#0a0a0b;margin:0 0 14px;max-width:600px} .kl-form{display:flex;gap:8px;flex-wrap:wrap} .kl-form input[type=email]{flex:1;min-width:175px;height:44px;border:1px solid rgba(10,10,11,.32);background:#F4F3F1;color:#0a0a0b;border-radius:10px;padding:0 14px;font-size:14px;font-family:inherit} .kl-form input[type=email]::placeholder{color:rgba(10,10,11,.5)} .kl-form input[type=email]:focus{outline:none;border-color:#0a0a0b} .kl-form button{height:44px;padding:0 18px;border:0;border-radius:10px;background:#0a0a0b;color:#F1EDE5;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:opacity .2s} .kl-form button:hover{opacity:.85}.kl-form button:disabled{opacity:.5;cursor:default} .kl-msg{font-size:13px;margin-top:10px;min-height:18px;color:#0a0a0b} .kl-msg.err{color:#5a0010} @media(max-width:880px){.cc-news{max-width:none}} /* ftt-cue-servicios · /servicios: el cue (DESLIZA) vive en .svc-index, centrado debajo del lead+rotador (svc-head), al pie del primer pantallazo (como las fichas). */ .svc-index .scroll-cue{margin:clamp(40px,5vw,64px) auto 0} /* ftt-ct-intro · /contacto: título introductorio al form, full-width arriba del grid pasos|form. */ .contact .ct-intro{grid-column:1 / -1;margin-bottom:clamp(30px,4.5vw,58px)} .ct-intro-h{font-size:clamp(24px,2.9vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.06;color:var(--ink);max-width:24ch;margin:0} /* ftt-svc-ejes · /servicios: mapa "7 servicios, 3 ejes del BMM" (sobre magenta). Paga la promesa "1 modelo" y conecta los servicios entre sí. */ .bg-mag .title-dot{color:var(--ink)} .svc-ejes{padding:var(--sec) 0} .svc-ejes .eyebrow{color:#2a0024} .svc-ejes h2{font-size:clamp(28px,3.6vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.04;color:var(--ink);max-width:18ch;margin:14px 0 0} .svc-ejes .se-lead{margin:20px 0 clamp(40px,5vw,64px);font-size:clamp(16px,1.7vw,19px);line-height:1.5;color:rgba(10,10,11,.72);max-width:52ch} .svc-ejes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)} .se-col{border-top:1px solid rgba(10,10,11,.22);padding-top:18px} .se-k{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#2a0024;display:block;margin-bottom:16px} .se-col a{display:block;font-size:14px;font-weight:400;letter-spacing:-.02em;color:var(--ink);text-decoration:none;padding:11px 0;border-top:1px solid rgba(10,10,11,.14);transition:transform .3s var(--ease),opacity .3s} .se-col a:first-of-type{border-top:0} .se-col a:hover{transform:translateX(6px);opacity:.7} @media(max-width:820px){.svc-ejes-grid{grid-template-columns:1fr;gap:32px}} /* ftt-svc-fit · fichas: beat "dónde encaja en el modelo" (sobre magenta), entre "Qué hacemos" y "Cómo operamos". Conecta cada servicio con su eje + 2 servicios. */ .svc-fit{padding:var(--sec) 0} .svc-fit .eyebrow{color:#2a0024} .svc-fit h2{font-size:clamp(26px,3.4vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.04;color:var(--ink);max-width:20ch;margin:14px 0 0} .svc-fit .sf-lead{margin:18px 0 clamp(34px,4vw,52px);font-size:clamp(16px,1.7vw,19px);line-height:1.55;color:rgba(10,10,11,.78);max-width:50ch} .svc-fit .sf-lead strong{font-weight:800;color:var(--ink)} .sf-links{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)} .sf-card{display:flex;flex-direction:column;gap:7px;text-decoration:none;border:1px solid rgba(10,10,11,.22);border-radius:16px;padding:clamp(20px,2.4vw,28px);background:transparent;transition:background .3s var(--ease),transform .3s var(--ease),border-color .3s} .sf-card:hover{background:rgba(10,10,11,.06);transform:translateY(-4px);border-color:rgba(10,10,11,.4)} .sf-card .sf-k{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#2a0024} .sf-card .sf-s{font-size:clamp(18px,2vw,24px);font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.1} .sf-card .sf-r{font-size:14.5px;line-height:1.45;color:rgba(10,10,11,.74)} @media(max-width:760px){.sf-links{grid-template-columns:1fr}} /* ftt-hero-net · Home hero: red de interacciones por código (tema magenta), reemplaza el