/* Fuentes: se cargan desde el con preconnect, no con @import. */ :root{--tinta:#020D19;--tinta-70:#4E565E;--tinta-55:#676E75;--amarillo:#FFD100;--amarillo-hover:#EFC400;--fondo:#FDFDFD;--borde:rgba(2,13,25,.12);--f-display:'Archivo',system-ui,sans-serif;--f-texto:'Instrument Sans',system-ui,sans-serif;--f-mono:'JetBrains Mono',monospace;--h1:clamp(2.75rem,6vw,5rem);--h2:clamp(2rem,4vw,3.25rem);--h3:clamp(1.5rem,2.5vw,2rem);--cifra:clamp(3.5rem,7vw,6rem);--entradilla:clamp(1.125rem,1.6vw,1.375rem);--texto:clamp(1.0625rem,1.1vw,1.125rem);--ink:var(--tinta);--ink-soft:var(--tinta-70);--muted:var(--tinta-55);--paper:var(--fondo);--white:var(--fondo);--line:var(--borde);--accent:var(--amarillo);--deep:var(--tinta);--soft:var(--fondo);--font-display:var(--f-display);--font-body:var(--f-texto);--pad:clamp(24px,5vw,80px);--radius:32px;--radius-sm:20px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body)}a{color:inherit;text-decoration:none}p{line-height:1.55}.site-header{height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);border-bottom:1px solid rgba(2,13,25,.14);position:relative;z-index:20}.logo{font:600 30px var(--font-display);letter-spacing:-2px}.logo span{color:var(--accent)}.site-header nav{display:flex;align-items:center;gap:30px;font-size:14px}.site-header nav a{transition:opacity .2s}.site-header nav a:hover{opacity:.55}.nav-cta{padding:13px 22px;border:1px solid;border-radius:30px}.menu-toggle{display:none;background:none;border:0;font:inherit}.hero{min-height:calc(100vh - 96px);padding:clamp(70px,10vw,140px) var(--pad) 50px;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:38vw;height:38vw;border-radius:50%;background:var(--accent);right:-11vw;top:7vh;z-index:-1;filter:blur(.1px)}.hero .eyebrow,.intro>span,.listing>span,.related>span{font-size:12px;text-transform:uppercase;letter-spacing:.16em;display:flex;align-items:center;gap:12px}.eyebrow span{width:34px;height:1px;background:currentColor}.hero h1{font:500 clamp(60px,10vw,150px)/.88 var(--font-display);letter-spacing:-.075em;max-width:1200px;margin:55px 0 35px}.hero p{font-size:clamp(18px,2vw,28px);max-width:670px;margin-left:33%;color:var(--ink-soft)}.round-link{display:flex;width:150px;height:150px;border-radius:50%;background:var(--ink);color:var(--paper);align-items:center;justify-content:center;text-align:center;padding:20px;margin-top:45px;transition:.3s}.round-link:hover{transform:rotate(-7deg);background:var(--deep)}.round-link i{font-style:normal;margin-left:7px}.hero-index{position:absolute;right:var(--pad);bottom:44px;font-size:12px;letter-spacing:.15em}.statement{padding:130px var(--pad);background:var(--ink);color:var(--paper)}.statement p{color:var(--accent);font-size:12px;letter-spacing:.16em}.statement h2,.intro h2{font:500 clamp(42px,6vw,90px)/1.04 var(--font-display);letter-spacing:-.055em;max-width:1100px;margin:35px 0 0}.split{display:grid;grid-template-columns:1fr 1fr}.split>div{min-height:560px;padding:80px var(--pad);position:relative;border-right:1px solid var(--line)}.split>div:first-child{background:var(--accent)}.split .num{font-size:12px}.split h2{font:500 clamp(48px,6vw,82px) var(--font-display);margin-top:130px;letter-spacing:-.06em}.split p{font-size:20px;max-width:440px}.split a{display:inline-block;margin-top:35px;border-bottom:1px solid;padding-bottom:7px}.manifesto{padding:150px var(--pad);text-align:center;background:url('../img/casos/about-us-bg.jpg') center/cover;color:var(--paper)}.manifesto h2{font:500 clamp(48px,7vw,105px)/1 var(--font-display);letter-spacing:-.06em}.manifesto a{display:inline-block;border-bottom:1px solid;padding:10px}.intro{padding:140px var(--pad);border-top:1px solid var(--line)}.listing,.related{padding:0 var(--pad) 130px}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid}.card{padding:35px 28px 40px 0;border-bottom:1px solid;margin-right:28px;position:relative;min-height:235px}.card span,.cases span{font-size:11px;letter-spacing:.15em;color:var(--muted)}.card h3{font:500 28px/1.1 var(--font-display);margin:45px 0 15px;letter-spacing:-.04em}.card p{color:var(--muted);font-size:14px}.card b{position:absolute;right:3px;top:34px;font-size:24px;transition:.2s}.card:hover b{transform:translate(4px,-4px)}.process{display:grid;grid-template-columns:repeat(4,1fr);padding:20px var(--pad) 130px}.process article,.values article{border-top:1px solid;padding:30px 25px 20px 0;min-height:260px}.process b,.values b{font-size:12px;color:var(--muted)}.process h3,.values h3{font:500 27px var(--font-display);margin-top:70px}.process p,.values p{color:var(--muted);font-size:15px;max-width:260px}.included{background:var(--ink);color:var(--paper);padding:120px var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:60px}.included span{color:var(--accent);font-size:12px;text-transform:uppercase;letter-spacing:.15em}.included h2{font:500 clamp(45px,5vw,75px)/1 var(--font-display);letter-spacing:-.05em}.included ul{list-style:none;margin:0;padding:0}.included li{padding:22px 0;border-bottom:1px solid rgba(255,255,255,.18);font-size:20px}.related{padding-top:120px}.related>.card-grid{margin-top:35px}.big-cta{padding:130px var(--pad);background:var(--accent);position:relative}.big-cta p{font-size:12px;text-transform:uppercase;letter-spacing:.15em}.big-cta h2{font:500 clamp(65px,9vw,130px)/.9 var(--font-display);letter-spacing:-.07em;margin:55px 0}.big-cta a{display:inline-flex;gap:20px;border-bottom:1px solid;padding-bottom:8px;font-size:18px}.big-cta i{font-style:normal}.cases{padding:130px var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:90px 35px}.cases article:nth-child(3){grid-column:1/-1;width:70%}.case-img{height:55vh;background-size:cover;background-position:center;margin-bottom:25px;filter:saturate(.7)}.case-one{background-image:url('../img/casos/portfolio-thumb2.jpg')}.case-two{background-image:url('../img/casos/portfolio-thumb4.jpg')}.case-three{background-image:url('../img/casos/portfolio-thumb7.jpg')}.cases h2{font:500 36px/1.1 var(--font-display);letter-spacing:-.04em;max-width:560px}.cases p{color:var(--muted)}.values{padding:0 var(--pad) 140px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.contact-wrap{padding:120px var(--pad);display:grid;grid-template-columns:1.5fr 1fr;gap:10vw}.contact-wrap form{display:grid;gap:32px}.contact-wrap label{font-size:12px;text-transform:uppercase;letter-spacing:.12em}.contact-wrap input,.contact-wrap select,.contact-wrap textarea{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:15px 0;font:20px inherit;outline:none}.contact-wrap button{justify-self:start;background:var(--ink);color:var(--paper);border:0;padding:18px 28px;font:16px inherit}.contact-wrap aside{border-left:1px solid var(--line);padding-left:45px}.contact-wrap aside span,.contact-wrap aside small{font-size:12px;color:var(--muted)}.contact-wrap aside a{font:500 28px var(--font-display);display:block;margin:30px 0}.article{max-width:780px;margin:0 auto;padding:120px 25px}.article .lead{font-size:28px;color:var(--ink)}.article h2{font:500 40px var(--font-display);margin-top:80px;letter-spacing:-.04em}.article p{font-size:19px;color:var(--ink-soft)}.article blockquote{font:500 36px/1.2 var(--font-display);border-left:5px solid var(--accent);margin:70px 0;padding:15px 0 15px 35px}.article-cta{background:var(--accent);padding:35px;margin-top:80px}.article-cta h3{font:500 30px var(--font-display)}.article-cta a{border-bottom:1px solid}footer{background:var(--ink);color:var(--paper);padding:90px var(--pad) 30px;display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:50px}footer p{color:rgba(255,255,255,.62);font-size:14px}.logo-light span{color:var(--accent)}footer>div:not(.footer-bottom){display:flex;flex-direction:column;align-items:flex-start;gap:12px}footer small{color:rgba(255,255,255,.45);letter-spacing:.14em;margin-bottom:12px}.footer-bottom{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.18);margin-top:55px;padding-top:25px;display:flex;justify-content:space-between;color:rgba(255,255,255,.45);font-size:12px} @media(max-width:900px){.site-header{height:74px}.menu-toggle{display:block}.site-header nav{position:absolute;top:74px;left:0;right:0;background:var(--ink);color:var(--paper);padding:30px var(--pad);display:none;flex-direction:column;align-items:flex-start}.site-header nav.open{display:flex}.hero{min-height:720px;padding-top:70px}.hero h1{font-size:clamp(58px,17vw,95px);margin-top:50px}.hero p{margin-left:0}.hero:after{width:80vw;height:80vw;right:-38vw}.round-link{width:125px;height:125px;font-size:14px}.split,.included,.contact-wrap{grid-template-columns:1fr}.split>div{min-height:430px}.split h2{margin-top:80px}.card-grid{grid-template-columns:1fr 1fr}.process{grid-template-columns:1fr 1fr}.cases{grid-template-columns:1fr}.cases article:nth-child(3){grid-column:auto;width:100%}.values{grid-template-columns:1fr}.contact-wrap aside{border-left:0;border-top:1px solid;padding:45px 0}footer{grid-template-columns:1fr 1fr}footer>div:first-child{grid-column:1/-1}} @media(max-width:560px){.hero h1{font-size:56px}.hero p{font-size:18px}.hero-index{display:none}.card-grid,.process{grid-template-columns:1fr}.included{padding-top:80px;padding-bottom:80px}.cases{padding-top:80px}.case-img{height:340px}.article .lead{font-size:23px}.article h2{font-size:32px}.article blockquote{font-size:28px}.big-cta h2{font-size:60px}footer{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:8px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}} /* Home ampliada */ .section-head>span{font-size:12px;letter-spacing:.15em;text-transform:uppercase}.section-head h2{font:500 clamp(45px,6vw,85px)/1.02 var(--font-display);letter-spacing:-.055em;margin:35px 0}.home-services,.method,.home-sectors,.faq{padding:130px var(--pad)}.home-services .section-head{max-width:950px}.service-lines{margin-top:90px;border-top:1px solid}.service-lines a{display:grid;grid-template-columns:60px 1fr 40px;align-items:center;padding:28px 0;border-bottom:1px solid}.service-lines b{font-size:12px;color:var(--muted)}.service-lines h3{font:500 clamp(25px,3.3vw,48px) var(--font-display);margin:0;letter-spacing:-.04em}.service-lines a>span{font-size:24px;transition:.2s}.service-lines a:hover>span{transform:translate(5px,-5px)} .home-case{background:var(--ink);color:var(--paper);padding:120px var(--pad);display:grid;grid-template-columns:1.1fr 1fr;gap:8vw;align-items:center}.home-case-image{height:650px;background:url('../img/casos/portfolio-thumb2.jpg') center/cover}.home-case>div>span{color:var(--accent);font-size:11px;letter-spacing:.14em}.home-case h2{font:500 clamp(42px,5vw,75px)/1 var(--font-display);letter-spacing:-.055em}.home-case p{font-size:18px;color:rgba(255,255,255,.62)}.home-case dl{display:flex;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);margin:40px 0}.home-case dl div{padding:25px 40px 25px 0;margin-right:40px}.home-case dt{font:500 40px var(--font-display)}.home-case dd{margin:5px 0;color:rgba(255,255,255,.45);font-size:12px}.home-case a{border-bottom:1px solid;padding-bottom:7px} .method{display:grid;grid-template-columns:1fr 1.2fr;gap:10vw}.method .section-head p{max-width:460px;color:var(--muted);font-size:18px}.method-steps{display:grid;grid-template-columns:1fr 1fr}.method-steps article{border-top:1px solid;padding:25px 25px 50px 0}.method-steps b{font-size:11px;color:var(--muted)}.method-steps h3{font:500 27px var(--font-display);margin-top:55px}.method-steps p{color:var(--muted)} .home-sectors{background:var(--soft)}.sector-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:80px}.sector-grid a{min-height:380px;border-top:1px solid;border-right:1px solid;padding:25px;position:relative}.sector-grid span{font-size:11px}.sector-grid h3{font:500 38px var(--font-display);margin-top:120px}.sector-grid p{color:var(--muted)}.sector-grid a:hover{background:var(--accent)} .numbers{display:grid;grid-template-columns:repeat(4,1fr);background:var(--accent);padding:90px var(--pad)}.numbers article{display:flex;flex-direction:column;border-right:1px solid;padding-left:30px}.numbers article:first-child{padding-left:0}.numbers strong{font:500 clamp(55px,7vw,100px) var(--font-display);letter-spacing:-.06em}.numbers span{font-size:13px}.testimonial{padding:150px var(--pad);text-align:center}.testimonial p{font:500 clamp(38px,5vw,70px)/1.1 var(--font-display);letter-spacing:-.045em;max-width:1100px;margin:0 auto 50px}.testimonial span{font-size:12px;color:var(--muted)} .faq{display:grid;grid-template-columns:1fr 1fr;gap:8vw}.faq details{border-top:1px solid}.faq summary{font-size:20px;padding:25px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between}.faq summary i{font-style:normal}.faq details[open] summary i{transform:rotate(45deg)}.faq details p{color:var(--muted);padding:0 35px 25px 0} @media(max-width:900px){.home-case,.method,.faq{grid-template-columns:1fr}.home-case-image{height:450px}.sector-grid,.numbers{grid-template-columns:1fr 1fr}.sector-grid a{min-height:300px}.numbers article{padding:30px;border-bottom:1px solid}} @media(max-width:560px){.sector-grid,.numbers{grid-template-columns:1fr}.service-lines a{grid-template-columns:35px 1fr 30px}.home-case-image{height:340px}.method-steps{grid-template-columns:1fr}.numbers article{padding-left:0}} /* Dirección visual Piximbi: cálida, orgánica y redondeada */ .site-header{margin:16px var(--pad) 0;height:76px;padding:0 26px;background:rgba(255,255,255,.9);border:1px solid rgba(2,13,25,.1);border-radius:24px;backdrop-filter:blur(14px);position:sticky;top:16px;box-shadow:0 10px 35px rgba(2,13,25,.06)} .logo span{color:var(--accent)}.nav-cta{background:var(--ink);color:var(--white);border-color:var(--ink);border-radius:999px}.hero{min-height:calc(100vh - 108px);margin:18px var(--pad) 0;border-radius:44px;background:var(--soft);padding-left:clamp(28px,5vw,76px);padding-right:clamp(28px,5vw,76px)}.hero:after{background:var(--deep);opacity:.9}.round-link{background:var(--accent);color:var(--ink);border-radius:44% 56% 52% 48%/48% 43% 57% 52%;box-shadow:0 18px 35px rgba(2,13,25,.12)}.round-link:hover{background:var(--deep)} .statement{margin:18px var(--pad);border-radius:var(--radius);background:var(--ink)}.statement p,.included span,.home-case>div>span{color:var(--accent)}.split{gap:18px;padding:0 var(--pad)}.split>div{border:0;border-radius:var(--radius);background:var(--soft)}.split>div:first-child{background:var(--accent)}.home-services,.method,.faq{margin:18px var(--pad);padding-left:clamp(24px,4vw,64px);padding-right:clamp(24px,4vw,64px);border-radius:var(--radius);background:var(--white)} .service-lines a{padding:24px;border:1px solid var(--line);border-bottom:0;background:var(--paper)}.service-lines a:first-child{border-radius:var(--radius-sm) var(--radius-sm) 0 0}.service-lines a:last-child{border-bottom:1px solid var(--line);border-radius:0 0 var(--radius-sm) var(--radius-sm)}.service-lines a:hover{background:var(--soft)} .home-case,.included{margin:18px var(--pad);border-radius:var(--radius);background:var(--ink);overflow:hidden}.home-case-image,.case-img{border-radius:var(--radius-sm)}.home-case dl{border-color:rgba(255,255,255,.22)}.method-steps{gap:14px}.method-steps article,.process article,.values article{border:1px solid var(--line);border-radius:var(--radius-sm);padding:26px;background:var(--paper);min-height:245px}.method-steps h3,.process h3,.values h3{margin-top:48px} .home-sectors{margin:18px var(--pad);border-radius:var(--radius);background:var(--soft)}.sector-grid{gap:12px}.sector-grid a{border:0;border-radius:var(--radius-sm);background:var(--white);box-shadow:0 8px 26px rgba(2,13,25,.05)}.sector-grid a:hover{background:var(--accent);transform:translateY(-4px)}.numbers{margin:18px var(--pad);border-radius:var(--radius);background:var(--accent);gap:12px}.numbers article{border-right:1px solid rgba(2,13,25,.22)}.testimonial{margin:18px var(--pad);border-radius:var(--radius);background:var(--soft)}.faq details{border:1px solid var(--line);border-bottom:0;padding:0 22px;background:var(--paper)}.faq details:first-child{border-radius:var(--radius-sm) var(--radius-sm) 0 0}.faq details:last-child{border-bottom:1px solid var(--line);border-radius:0 0 var(--radius-sm) var(--radius-sm)} .manifesto,.big-cta{margin:18px var(--pad);border-radius:var(--radius);overflow:hidden}.big-cta{background:var(--accent)}footer{margin:18px;border-radius:var(--radius);background:var(--ink)} .intro{margin:18px var(--pad);border:0;border-radius:var(--radius);background:var(--white);padding-left:clamp(24px,4vw,64px);padding-right:clamp(24px,4vw,64px)}.card-grid{gap:16px;border:0}.card{margin:0;padding:28px;min-height:250px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--white)}.card:hover{background:var(--soft);transform:translateY(-3px)}.process{gap:14px}.included li{border-color:rgba(255,255,255,.18)} .cases article{padding:14px;border-radius:var(--radius);background:var(--white)}.cases article h2,.cases article p,.cases article>span{margin-left:12px;margin-right:12px}.contact-wrap form,.contact-wrap aside{padding:38px;border-radius:var(--radius);background:var(--white);border:1px solid var(--line)}.contact-wrap aside{border-left:1px solid var(--line)}.contact-wrap input,.contact-wrap select,.contact-wrap textarea{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:9px}.contact-wrap button{border-radius:999px;background:var(--accent);color:var(--ink)}.article{margin-top:20px;margin-bottom:20px;padding-left:clamp(25px,5vw,70px);padding-right:clamp(25px,5vw,70px);max-width:920px;background:var(--white);border-radius:var(--radius)}.article blockquote{border:0;border-radius:var(--radius-sm);background:var(--soft);padding:35px}.article-cta{border-radius:var(--radius-sm);background:var(--accent)} @media(max-width:900px){.site-header{margin-left:16px;margin-right:16px}.site-header nav{top:84px;left:0;border-radius:var(--radius-sm);box-shadow:0 16px 40px rgba(2,13,25,.2)}.hero,.statement,.home-services,.home-case,.method,.home-sectors,.numbers,.testimonial,.faq,.manifesto,.big-cta,.intro{margin-left:16px;margin-right:16px}.split{padding-left:16px;padding-right:16px}.home-case{padding:40px}.numbers article{border-right:0;border-bottom:1px solid rgba(2,13,25,.18)}.contact-wrap aside{border-left:1px solid var(--line)}} @media(max-width:560px){:root{--radius:24px;--radius-sm:16px}.site-header{padding:0 18px}.hero{border-radius:28px}.hero h1{font-size:50px}.statement,.home-services,.method,.home-sectors,.faq{padding-top:75px;padding-bottom:75px}.split{gap:12px}.split>div{border-radius:24px}.home-case{padding:22px}.numbers{padding:35px 24px}.testimonial{padding-top:85px;padding-bottom:85px}footer{margin:12px}} /* Hero compacto y navegación desplegable */ .hero{min-height:0;padding-top:clamp(70px,8vw,112px);padding-bottom:clamp(65px,7vw,100px)}.hero h1{margin-top:42px;margin-bottom:30px}.hero .round-link{margin-top:34px}.hero-index{bottom:34px} .nav-dropdown{position:relative}.dropdown-toggle{display:flex;align-items:center;gap:6px;border:0;background:transparent;color:inherit;padding:15px 0;font:14px var(--font-body);cursor:pointer}.dropdown-toggle span{font-size:15px;transition:transform .2s}.nav-dropdown.open .dropdown-toggle span{transform:rotate(180deg)}.dropdown-panel{display:none;position:absolute;z-index:50;top:calc(100% + 15px);left:50%;transform:translateX(-38%);width:min(680px,85vw);grid-template-columns:210px 1fr;gap:34px;padding:30px;background:var(--white);color:var(--ink);border:1px solid rgba(2,13,25,.12);border-radius:24px;box-shadow:0 24px 65px rgba(2,13,25,.18)}.nav-dropdown.open .dropdown-panel{display:grid}.dropdown-panel:before{content:"";position:absolute;top:-18px;left:0;right:0;height:20px}.dropdown-panel small{display:block;color:var(--muted);font-size:10px;letter-spacing:.16em;margin-bottom:22px}.dropdown-featured{display:flex!important;justify-content:space-between;align-items:flex-end;min-height:125px;padding:18px!important;border-radius:16px;background:var(--soft);font:500 20px/1.15 var(--font-display)!important}.dropdown-featured b{font-size:21px}.dropdown-links{display:grid;grid-template-columns:1fr 1fr;gap:0 25px;align-content:start}.dropdown-links a{padding:11px 3px!important;border-bottom:1px solid var(--line);font-size:13px!important}.dropdown-links a:hover{opacity:1!important;color:var(--accent)}.dropdown-panel-small{width:min(570px,85vw)} @media(hover:hover) and (min-width:901px){.nav-dropdown:hover .dropdown-panel{display:grid}.nav-dropdown:hover .dropdown-toggle span{transform:rotate(180deg)}} @media(max-width:900px){.hero{min-height:0;padding-top:68px;padding-bottom:70px}.site-header nav{max-height:calc(100vh - 110px);overflow-y:auto;gap:8px}.nav-dropdown{width:100%}.dropdown-toggle{width:100%;justify-content:space-between;padding:12px 0;font-size:16px}.dropdown-panel,.dropdown-panel-small{position:static;transform:none;width:100%;grid-template-columns:1fr;gap:14px;margin:4px 0 14px;padding:16px;border-radius:16px;box-shadow:none;background:var(--soft)}.dropdown-panel small{margin-bottom:10px}.dropdown-featured{min-height:78px}.dropdown-links{grid-template-columns:1fr}.dropdown-links a{padding:10px 2px!important}.hero-index{display:none}} /* Megamenú de contenido */ .dropdown-panel-wide{width:min(800px,88vw);grid-template-columns:1fr 1fr;left:auto;right:-180px;transform:none}.dropdown-service-group{min-width:0}.dropdown-group-title{display:block!important;font:500 19px/1.25 var(--font-display)!important;margin:-5px 0 16px;padding:0!important}.dropdown-links.single{grid-template-columns:1fr}.case-note{margin:50px var(--pad) 0;padding:28px 32px;border-radius:var(--radius-sm);background:var(--soft);display:grid;grid-template-columns:220px 1fr;gap:30px}.case-note span{font-size:11px;letter-spacing:.15em}.case-note p{margin:0;max-width:820px}.cases article:nth-child(3){grid-column:auto;width:auto}.cases article ul{list-style:none;padding:18px 12px 5px;margin:20px 0 0;border-top:1px solid var(--line)}.cases article li{padding:5px 0;color:var(--muted);font-size:14px}.case-four{background-image:url('../img/casos/portfolio-thumb8.jpg')} @media(max-width:900px){.dropdown-panel-wide{width:100%;grid-template-columns:1fr;right:auto}.case-note{grid-template-columns:1fr;margin-left:16px;margin-right:16px}} @media(min-width:901px){.site-header nav{gap:clamp(14px,1.6vw,25px)}.site-header nav>a,.dropdown-toggle{font-size:13px}} /* Color oscuro de marca */ .site-header{border-color:rgba(2,13,25,.1);box-shadow:0 10px 35px rgba(2,13,25,.06)} .round-link{box-shadow:0 18px 35px rgba(2,13,25,.14)} .sector-grid a{box-shadow:0 8px 26px rgba(2,13,25,.05)} .dropdown-panel{border-color:rgba(2,13,25,.12);box-shadow:0 24px 65px rgba(2,13,25,.18)} @media(max-width:900px){.site-header nav{box-shadow:0 16px 40px rgba(2,13,25,.2)}} .dropdown-panel-av{left:auto;right:-90px;transform:none} @media(max-width:900px){.dropdown-panel-av{right:auto}} /* Logotipo oficial */ .logo{display:inline-flex;align-items:center;line-height:0;flex:0 0 auto}.logo img{display:block;width:152px;height:auto}.logo-light img{width:170px;filter:invert(1) brightness(2)} @media(max-width:560px){.logo img{width:132px}.logo-light img{width:155px}} /* Textos legales y consentimiento */ .legal-copy{max-width:920px;margin:18px auto;padding:clamp(40px,7vw,90px);border-radius:var(--radius);background:var(--white)}.legal-copy h2{font:500 clamp(27px,3vw,40px)/1.15 var(--font-display);margin:70px 0 20px;letter-spacing:-.035em}.legal-copy h2:first-of-type{margin-top:38px}.legal-copy p,.legal-copy li{color:var(--ink-soft);font-size:17px}.legal-copy a{text-decoration:underline;text-underline-offset:3px}.legal-updated{font-size:13px!important;color:var(--muted)!important}.legal-data{border-top:1px solid var(--line)}.legal-data div{display:grid;grid-template-columns:180px 1fr;gap:25px;padding:15px 0;border-bottom:1px solid var(--line)}.legal-data dt{font-weight:600}.legal-data dd{margin:0}.legal-table,.cookie-table{display:grid;gap:12px}.legal-table>div,.cookie-table>div{padding:24px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper)}.legal-table p,.cookie-table p{margin-bottom:0}.cookie-table span{display:block;margin-top:7px;color:var(--muted);font-size:13px}.privacy-check{display:grid!important;grid-template-columns:22px 1fr;gap:12px;align-items:start;text-transform:none!important;letter-spacing:0!important;font-size:14px!important}.privacy-check input{width:20px!important;height:20px;margin:0!important}.privacy-check a{text-decoration:underline}.footer-bottom nav{display:flex;gap:18px;flex-wrap:wrap}.footer-bottom button{border:0;background:none;color:inherit;padding:0;font:inherit;cursor:pointer}.cookie-banner{position:fixed;z-index:1000;left:24px;right:24px;bottom:24px;max-width:1180px;margin:auto;padding:25px 28px;border-radius:24px;background:var(--ink);color:var(--paper);box-shadow:0 24px 70px rgba(2,13,25,.35);display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center}.cookie-banner[hidden],.cookie-modal[hidden]{display:none}.cookie-banner strong{font:500 22px var(--font-display)}.cookie-banner p{margin:7px 0 0;max-width:720px;color:rgba(255,255,255,.72);font-size:14px}.cookie-banner a{text-decoration:underline}.cookie-actions,.cookie-modal-actions{display:flex;gap:9px;flex-wrap:wrap}.cookie-actions button,.cookie-modal-actions button{border:1px solid rgba(255,255,255,.35);border-radius:999px;background:transparent;color:var(--paper);padding:12px 18px;font:13px inherit;cursor:pointer}.cookie-actions .primary,.cookie-modal-actions .primary{background:var(--accent);border-color:var(--accent);color:var(--ink)}.cookie-modal{position:fixed;z-index:1100;inset:0;padding:20px;background:rgba(2,13,25,.7);display:grid;place-items:center}.cookie-modal-card{position:relative;width:min(590px,100%);max-height:90vh;overflow:auto;padding:38px;border-radius:28px;background:var(--white)}.cookie-close{position:absolute;right:22px;top:18px;border:0;background:none;font-size:30px;cursor:pointer}.cookie-modal-card>span{font-size:10px;letter-spacing:.15em;color:var(--muted)}.cookie-modal-card h2{font:500 38px var(--font-display);margin:16px 0}.cookie-modal-card>label{display:flex;justify-content:space-between;gap:25px;padding:20px 0;border-top:1px solid var(--line)}.cookie-modal-card label span{display:flex;flex-direction:column;gap:5px}.cookie-modal-card small{color:var(--muted)}.cookie-modal-card input{width:22px;height:22px;accent-color:var(--accent)}.cookie-modal-actions{margin-top:15px}.cookie-modal-actions button{color:var(--ink);border-color:var(--line)}body.modal-open{overflow:hidden} @media(max-width:700px){.legal-copy{margin-left:16px;margin-right:16px}.legal-data div{grid-template-columns:1fr;gap:4px}.cookie-banner{grid-template-columns:1fr;left:12px;right:12px;bottom:12px;gap:18px}.cookie-actions{display:grid;grid-template-columns:1fr 1fr}.cookie-actions .primary{grid-column:1/-1;grid-row:1}.cookie-modal-card{padding:30px 22px}.footer-bottom nav{flex-direction:column;gap:8px}} /* Casos de éxito y fichas de proyecto */ .case-card{display:block;border-radius:var(--radius);transition:transform .25s}.case-card:hover{transform:translateY(-6px)}.case-card article{height:100%}.case-card strong{display:inline-block;margin:20px 12px 12px;padding-bottom:6px;border-bottom:1px solid;font-size:14px}.project-intro{margin:18px var(--pad);padding:55px clamp(25px,5vw,70px);border-radius:var(--radius);background:var(--white);display:grid;grid-template-columns:.7fr 1fr 1.4fr;gap:50px}.project-intro span,.project-story span,.next-case span{font-size:10px;letter-spacing:.16em;color:var(--muted)}.project-intro h2{font:500 32px var(--font-display);margin:18px 0}.project-intro ul{list-style:none;padding:0;margin:16px 0}.project-intro li{padding:5px 0}.project-intro>p{font:500 clamp(22px,2.7vw,38px)/1.2 var(--font-display);margin:0;letter-spacing:-.035em}.project-cover{height:min(72vw,820px);margin:18px var(--pad);border-radius:var(--radius);background-size:cover;background-position:center}.project-story{max-width:1060px;margin:0 auto;padding:130px 30px;display:grid;grid-template-columns:1fr 1fr;gap:70px 8vw;align-items:start}.project-story h2{font:500 clamp(32px,4vw,56px)/1.05 var(--font-display);letter-spacing:-.045em;margin:22px 0}.project-story p{font-size:19px;color:var(--muted);margin:30px 0}.project-gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0 var(--pad) 130px}.project-photo{min-height:520px;border-radius:var(--radius);background-size:cover;background-position:center}.project-photo:nth-child(3){grid-column:1/-1;min-height:700px}.next-case{margin:18px var(--pad);padding:100px clamp(28px,6vw,90px);border-radius:var(--radius);background:var(--soft)}.next-case h2{font:500 clamp(48px,7vw,95px)/.95 var(--font-display);letter-spacing:-.06em}.next-case a{display:inline-block;border-bottom:1px solid;padding-bottom:7px} .noray-one{background-image:url('../img/casos/portfolio-thumb2.jpg')}.noray-two{background-image:url('../img/casos/service-details-image.jpg')}.noray-three{background-image:url('../img/casos/portfolio-thumb7.jpg')}.aurea-one{background-image:url('../img/casos/portfolio-thumb4.jpg')}.aurea-two{background-image:url('../img/casos/team-img2.jpg')}.aurea-three{background-image:url('../img/casos/about-us-img2.jpg')}.monoh-one{background-image:url('../img/casos/portfolio-thumb7.jpg')}.monoh-two{background-image:url('../img/casos/hero-hero-1.jpg')}.monoh-three{background-image:url('../img/casos/portfolio-thumb3.jpg')}.bruma-one{background-image:url('../img/casos/portfolio-thumb8.jpg')}.bruma-two{background-image:url('../img/casos/blog-blog2.jpg')}.bruma-three{background-image:url('../img/casos/video-img.jpg')} @media(max-width:800px){.project-intro{grid-template-columns:1fr;gap:25px}.project-story{grid-template-columns:1fr;gap:25px}.project-story p{margin:0 0 55px}.project-gallery{grid-template-columns:1fr}.project-photo,.project-photo:nth-child(3){grid-column:auto;min-height:420px}.project-cover{height:65vh;margin-left:16px;margin-right:16px}} /* Primera capa de protección de datos */ .privacy-first-layer{padding:24px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper)}.privacy-first-layer>strong{display:block;font:600 17px var(--font-display);margin-bottom:18px}.privacy-first-layer dl{margin:0}.privacy-first-layer dl>div{display:grid;grid-template-columns:125px 1fr;gap:16px;padding:10px 0;border-top:1px solid var(--line)}.privacy-first-layer dt{font-size:12px;font-weight:600}.privacy-first-layer dd{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.privacy-first-layer a{text-decoration:underline;text-underline-offset:2px}@media(max-width:560px){.privacy-first-layer dl>div{grid-template-columns:1fr;gap:4px}} /* Accesibilidad: foco visible, salto al contenido y aviso de cambio de ruta */ .skip-link{position:absolute;left:-9999px;top:0;z-index:2000;padding:14px 22px;border-radius:0 0 16px 0;background:var(--ink);color:var(--white);font-size:14px} .skip-link:focus{left:0} :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px} .contact-wrap input:focus-visible,.contact-wrap select:focus-visible,.contact-wrap textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px} #main:focus{outline:none} .route-announcer{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} #app.is-loading{opacity:.55;transition:opacity .15s} /* Migas de pan */ .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:32px;font-size:12px;letter-spacing:.05em;color:var(--muted)} .breadcrumb a{text-decoration:underline;text-underline-offset:3px} .breadcrumb a:hover{color:var(--ink)} .breadcrumb i{font-style:normal} .breadcrumb [aria-current]{color:var(--ink)} /* Texto propio de cada servicio */ .service-copy{margin:18px var(--pad);padding:clamp(50px,6vw,95px) clamp(24px,4vw,64px);border-radius:var(--radius);background:var(--white);display:grid;grid-template-columns:1fr 1fr;gap:50px 8vw} .service-copy h2{font:500 clamp(26px,3vw,40px)/1.15 var(--font-display);letter-spacing:-.04em;margin:0 0 18px} .service-copy p{margin:0;color:var(--ink-soft);font-size:17px} .related-hub{margin-top:38px} .related-hub a{border-bottom:1px solid;padding-bottom:6px} .form-note{margin-top:-10px;color:var(--muted);font-size:14px} .form-note a{text-decoration:underline} .testimonial blockquote{margin:0} .testimonial cite{display:block;font-size:12px;font-style:normal;color:var(--muted)} /* Dentro del artículo la columna es estrecha: la FAQ va a una sola columna */ .article .faq{display:block;margin:80px 0 0;padding:0;background:none;border-radius:0} .article .faq .section-head h2{font:500 clamp(28px,4vw,40px)/1.1 var(--font-display);margin:22px 0 28px} .hero-notfound{min-height:0} .notfound-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px} .notfound-links a{padding:13px 22px;border:1px solid var(--line);border-radius:999px;background:var(--white)} .notfound-links a:hover{background:var(--soft)} @media(max-width:800px){.service-copy{grid-template-columns:1fr;gap:35px;margin-left:16px;margin-right:16px}} /* Tarjetas de servicio: icono arriba y flecha pegada al título */ /* Ojo: la capa base marca `.card span` como epígrafe de 11px espaciado, así que los demás span de la tarjeta necesitan recuperar su estilo con una especificidad mayor. */ .card .card-icon{position:absolute;right:24px;top:24px;display:block;width:34px;height:34px;color:var(--muted);font-size:0;letter-spacing:normal;transition:color .25s,transform .25s} .card-icon svg{display:block;width:100%;height:100%;overflow:visible} .card:hover .card-icon{color:var(--accent);transform:scale(1.06)} .card h3{padding-right:46px} .card h3 .card-title-end{white-space:nowrap;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit;text-transform:none} .card h3 b{position:static;top:auto;right:auto;display:inline-block;font-size:19px;font-weight:400;line-height:1;transition:transform .25s} .card:hover h3 b{transform:translate(4px,-4px)} /* Cada parte del icono se anima sola; el origen va al centro de la propia forma, que si no las rotaciones se van al vértice del lienzo. */ .card-icon [class*="i-"]{transform-box:fill-box;transform-origin:center} .i-draw{stroke-dasharray:1;stroke-dashoffset:0} .i-bar{transform-box:fill-box;transform-origin:bottom} .card:hover .i-draw{animation:ic-draw .75s ease-out} .card:hover .i-spin{animation:ic-spin .8s ease-in-out} .card:hover .i-pop{animation:ic-pop .55s ease-out} .card:hover .i-rise{animation:ic-rise .55s ease-out} .card:hover .i-pulse{animation:ic-pulse .8s ease-in-out} .card:hover .i-slide-l{animation:ic-slide-l .5s ease-out} .card:hover .i-slide-r{animation:ic-slide-r .5s ease-out} .card:hover .i-orbit{animation:ic-orbit .9s ease-in-out} .card:hover .i-clap{animation:ic-clap .6s ease-in-out;transform-origin:left bottom} .card:hover .i-bar-1{animation:ic-bar .5s ease-out} .card:hover .i-bar-2{animation:ic-bar .5s .09s ease-out both} .card:hover .i-bar-3{animation:ic-bar .5s .18s ease-out both} @keyframes ic-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes ic-spin{from{transform:rotate(0)}to{transform:rotate(180deg)}} @keyframes ic-pop{0%{transform:scale(1)}45%{transform:scale(.72)}to{transform:scale(1)}} @keyframes ic-rise{0%{transform:translateY(0)}45%{transform:translateY(-3px)}to{transform:translateY(0)}} @keyframes ic-pulse{0%,to{opacity:1}45%{opacity:.25}} @keyframes ic-slide-l{0%{transform:translateX(0)}45%{transform:translateX(-3px)}to{transform:translateX(0)}} @keyframes ic-slide-r{0%{transform:translateX(0)}45%{transform:translateX(3px)}to{transform:translateX(0)}} @keyframes ic-orbit{0%{transform:translate(0,0)}35%{transform:translate(3px,-2px)}to{transform:translate(0,0)}} @keyframes ic-clap{0%,to{transform:rotate(0)}40%{transform:rotate(-11deg)}} @keyframes ic-bar{from{transform:scaleY(.15)}to{transform:scaleY(1)}} /* Quien pide menos movimiento se queda con el icono quieto. */ @media(prefers-reduced-motion:reduce){.card-icon,.card-icon *{animation:none!important;transition:none!important}} @media(max-width:560px){.card-icon{width:29px;height:29px;right:20px;top:20px}.card h3{padding-right:38px}} /* Formulario de contacto: trampa antispam y respuesta del envío */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-status{margin:0;font-size:15px} .form-status:empty{display:none} .form-status.is-sending{color:var(--muted)} .form-status.is-ok{padding:16px 18px;border-radius:14px;background:var(--soft);color:var(--ink)} .form-status.is-error{padding:16px 18px;border-radius:14px;background:#FDECEA;color:#8A1F11} .contact-wrap button[disabled]{opacity:.6;cursor:progress} /* Clientes */ .clients{padding:40px var(--pad) 130px} .client-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;margin:0;padding:0} .client{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:170px;padding:26px 30px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--white)} /* El ancho llega desde content.py en --logo-w: cada logotipo tiene sus proporciones y una altura común los descompensa. */ .client img{width:var(--logo-w,120px);max-width:100%;height:auto} .client span{color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase} .client-empty{border-style:dashed;background:transparent} .clients-note{max-width:640px;margin:26px 0 0;color:var(--muted);font-size:17px} .clients-note a{text-decoration:underline;text-underline-offset:3px} @media(max-width:1100px){.client-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.client-grid{grid-template-columns:1fr}.client{min-height:130px}} /* =========================================================================== Identidad Piximbi Tinta #020D19 · Amarillo #FFD100 · Fondo #FDFDFD Archivo (display) · Instrument Sans (texto) · JetBrains Mono (acentos) Los tokens del manual están arriba, en :root, tal cual se entregaron. Aquí solo va lo que hace falta para que la hoja los use: la escala tipográfica y los pesos, que la capa base traía fijados a mano. =========================================================================== */ body{font-size:var(--texto);line-height:1.65} p{line-height:1.65} /* Archivo Variable en 500. Los selectores van uno a uno porque la capa base fija el peso con la forma abreviada `font:`, que gana por especificidad. */ .hero h1,.statement h2,.intro h2,.section-head h2,.split h2,.manifesto h2, .included h2,.big-cta h2,.cases h2,.article h2,.legal-copy h2,.next-case h2, .home-case h2,.project-story h2,.card h3,.process h3,.values h3,.method-steps h3, .sector-grid h3,.service-lines h3,.service-copy h2,.article-cta h3, .contact-wrap aside a,.cookie-banner strong,.cookie-modal-card h2, .numbers strong,.home-case dt,.testimonial p,.article blockquote, .project-intro>p,h1,h2,h3{ font-family:var(--f-display);font-weight:500;letter-spacing:-.03em;line-height:1} .dropdown-featured,.dropdown-group-title{ font-family:var(--f-display)!important;font-weight:500!important;letter-spacing:-.03em} /* Escala del manual. Sustituye a los clamp sueltos que había por selector. */ .hero h1{font-size:var(--h1)} .big-cta h2,.manifesto h2{font-size:var(--h1)} .statement h2,.intro h2,.section-head h2,.included h2,.split h2,.next-case h2, .home-case h2,.project-story h2,.testimonial p{font-size:var(--h2)} .card h3,.process h3,.values h3,.method-steps h3,.sector-grid h3,.service-lines h3, .service-copy h2,.article h2,.legal-copy h2,.cases h2,.article-cta h3, .contact-wrap aside a,.cookie-modal-card h2,.article blockquote{font-size:var(--h3)} .numbers strong,.home-case dt{font-size:var(--cifra)} .hero p,.article .lead,.split p{font-size:var(--entradilla);line-height:1.5} /* Line-height 1 aprieta demasiado cuando el titular ocupa varias líneas. */ .statement h2,.intro h2,.section-head h2,.included h2,.split h2, .home-case h2,.project-story h2,.testimonial p{line-height:1.06} .card h3,.process h3,.values h3,.method-steps h3,.sector-grid h3, .service-copy h2,.article h2,.legal-copy h2,.cases h2{line-height:1.15} /* Epígrafes en mono, según el manual. */ .hero .eyebrow,.intro>span,.listing>span,.related>span,.card span,.cases span, .section-head>span,.split .num,.process b,.values b,.method-steps b, .service-lines b,.numbers span,.home-case>div>span,.home-case dd, .sector-grid span,.statement p,.included span,.big-cta p,.hero-index, .contact-wrap label,.contact-wrap aside span,.contact-wrap aside small, footer small,.footer-bottom,.breadcrumb,.client span,.legal-updated, .cookie-modal-card>span,.project-intro span,.project-story span,.next-case span, .case-note span,.dropdown-panel small,.form-status,.form-note{ font-family:var(--f-mono);font-weight:500;letter-spacing:.12em} .form-status,.form-note,.breadcrumb,.footer-bottom{letter-spacing:.04em;text-transform:none} /* El amarillo es muy claro: encima siempre tinta, nunca blanco. */ .big-cta,.split>div:first-child,.article-cta,.sector-grid a:hover{color:var(--tinta)} .round-link{background:var(--amarillo);color:var(--tinta)} .round-link:hover{background:var(--amarillo-hover);color:var(--tinta)} .numbers{background:var(--tinta);color:var(--fondo)} .numbers strong{color:var(--amarillo)} .numbers article{border-right-color:rgba(255,255,255,.2)} .statement p,.included span,.home-case>div>span{color:var(--amarillo)} .hero:after{background:var(--amarillo);opacity:.85} .article blockquote{border-left:0;background:var(--fondo)} .cookie-actions .primary,.cookie-modal-actions .primary{ background:var(--amarillo);border-color:var(--amarillo);color:var(--tinta)} .cookie-actions .primary:hover,.cookie-modal-actions .primary:hover{background:var(--amarillo-hover)} :focus-visible{outline-color:var(--tinta)} .card:hover .card-icon{color:var(--tinta)} /* El manifiesto va sobre una foto clara: sin velo el texto es ilegible. */ .manifesto{ background-image:linear-gradient(rgba(2,13,25,.62),rgba(2,13,25,.78)), url('../img/casos/about-us-bg.jpg'); background-size:cover;background-position:center} /* tinta-70 para el texto menudo de los paneles: más aire que tinta-55 y margen de sobra sobre el fondo claro. */ .hero .breadcrumb,.testimonial cite,.split>div:last-child p, .card:hover p{color:var(--tinta-70)} /* --------------------------------------------------------------------------- Paleta de tres colores: #FDFDFD, tinta y amarillo. Al desaparecer el gris, los paneles ya no se distinguen por relleno —todo es el mismo claro—, así que la separación pasa a los filetes. Donde antes había un cambio de fondo ahora hay un borde de tinta al 12 %. --------------------------------------------------------------------------- */ .hero,.testimonial,.home-sectors,.split>div:last-child, .article-cta,.case-note{border:1px solid var(--borde)} .sector-grid a{border:1px solid var(--borde);box-shadow:none} .article blockquote{border-left:4px solid var(--amarillo);border-radius:0;padding-left:28px;background:none} /* Los estados de hover tampoco pueden apoyarse en un fondo más oscuro. */ .card:hover{background:var(--fondo);border-color:var(--tinta)} .service-lines a:hover{background:var(--fondo);border-color:var(--tinta)} .sector-grid a:hover{background:var(--amarillo);border-color:var(--amarillo)} .faq details:hover{border-color:var(--tinta)} .form-status.is-ok{background:none;border:1px solid var(--tinta);color:var(--tinta)} /* Tarjeta destacada de cada desplegable, en amarillo. */ .dropdown-featured{background:var(--amarillo);border:1px solid var(--amarillo);color:var(--tinta)} /* --------------------------------------------------------------------------- Acciones flotantes: WhatsApp y volver arriba. --------------------------------------------------------------------------- */ .floating-actions{position:fixed;right:24px;bottom:var(--flotantes-abajo,24px);z-index:900; display:flex;flex-direction:column;gap:12px;transition:bottom .25s} .fab{display:grid;place-items:center;width:54px;height:54px;padding:0;border:0;border-radius:50%; background:var(--tinta);color:var(--fondo);cursor:pointer; box-shadow:0 8px 24px rgba(2,13,25,.22);transition:background .2s,color .2s,transform .2s} .fab svg{width:26px;height:26px} .fab:hover{background:var(--amarillo);color:var(--tinta);transform:translateY(-2px)} .fab[hidden]{display:none} .fab-top svg{width:22px;height:22px} @media(max-width:560px){ .floating-actions{right:16px;gap:10px} .fab{width:48px;height:48px} .fab svg{width:23px;height:23px} } @media(prefers-reduced-motion:reduce){.floating-actions,.fab{transition:none}} /* La tarjeta amarilla del menú no reacciona al puntero: la capa base aplica opacity .55 a todo enlace de la cabecera y la dejaba translúcida. */ .site-header nav a.dropdown-featured:hover{opacity:1} /* --------------------------------------------------------------------------- Tarjetas de servicio en tres colores, en ciclo: tinta, amarillo y claro. El ciclo se reinicia en cada rejilla, así que toda lista empieza en tinta. Los tonos de texto cambian con el fondo: tinta-55 se queda en 3,8:1 sobre tinta y en 3,5:1 sobre amarillo, por debajo del mínimo en ambos casos. --------------------------------------------------------------------------- */ .card-grid .card:nth-child(3n+1){background:var(--tinta);border-color:var(--tinta);color:var(--fondo)} .card-grid .card:nth-child(3n+1)>span:first-child, .card-grid .card:nth-child(3n+1) p{color:#B9BDC2} .card-grid .card:nth-child(3n+1) .card-icon{color:var(--amarillo)} .card-grid .card:nth-child(3n+2){background:var(--amarillo);border-color:var(--amarillo);color:var(--tinta)} .card-grid .card:nth-child(3n+2)>span:first-child, .card-grid .card:nth-child(3n+2) p{color:var(--tinta-70)} .card-grid .card:nth-child(3n+2) .card-icon{color:var(--tinta)} .card-grid .card:nth-child(3n){background:var(--fondo);border-color:var(--borde);color:var(--tinta)} /* El hover general repintaba el fondo y borraba el ciclo: ahora solo levanta la tarjeta y marca el borde en cada variante. */ .card-grid .card:hover{transform:translateY(-3px)} .card-grid .card:nth-child(3n+1):hover{background:var(--tinta);border-color:var(--amarillo)} .card-grid .card:nth-child(3n+2):hover{background:var(--amarillo);border-color:var(--tinta)} .card-grid .card:nth-child(3n):hover{background:var(--fondo);border-color:var(--tinta)} .card-grid .card:nth-child(3n+1):hover .card-icon, .card-grid .card:nth-child(3n+2):hover .card-icon{color:inherit} .card-grid .card:nth-child(3n+1):hover p, .card-grid .card:nth-child(3n+2):hover p{color:inherit} /* --------------------------------------------------------------------------- Botón del menú móvil: hamburguesa y aspa en vez de las palabras «Menú» y «Cerrar». El icono lo elige el CSS a partir de aria-expanded, así que el estado visible y el que anuncia un lector de pantalla no pueden desalinearse. --------------------------------------------------------------------------- */ .menu-toggle{width:44px;height:44px;padding:0;margin-right:-8px;background:none;border:0; color:inherit;cursor:pointer;place-items:center} .menu-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .menu-toggle .icon-close{display:none} .menu-toggle[aria-expanded="true"] .icon-menu{display:none} .menu-toggle[aria-expanded="true"] .icon-close{display:block} /* 44px de lado: el mínimo cómodo para el pulgar. */ @media(max-width:900px){.menu-toggle{display:grid}} /* --------------------------------------------------------------------------- Hero en tinta. Todo lo que va dentro tenía color pensado para fondo claro, así que hay que reasignarlo: tinta-70 sobre tinta da 1,3:1 y tinta-55, 3,8:1. --------------------------------------------------------------------------- */ .hero{background:var(--tinta);color:var(--fondo);border-color:transparent} .hero h1{color:var(--fondo)} .hero p,.hero-index{color:#B9BDC2} .hero .breadcrumb{color:#B9BDC2} .hero .breadcrumb a:hover,.hero .breadcrumb [aria-current]{color:var(--fondo)} /* Con el menú móvil desplegado, los botones flotantes se solapaban encima. */ @media(max-width:900px){body.menu-open .floating-actions{display:none}} /* --------------------------------------------------------------------------- Mismo ciclo de color en los bloques de proceso, método y valores. Van sin enlace, así que no llevan hover; el resto es idéntico a las tarjetas. --------------------------------------------------------------------------- */ .process article:nth-child(3n+1),.values article:nth-child(3n+1),.method-steps article:nth-child(3n+1){ background:var(--tinta);border-color:var(--tinta);color:var(--fondo)} .process article:nth-child(3n+1) b,.process article:nth-child(3n+1) p, .values article:nth-child(3n+1) b,.values article:nth-child(3n+1) p, .method-steps article:nth-child(3n+1) b,.method-steps article:nth-child(3n+1) p{color:#B9BDC2} .process article:nth-child(3n+2),.values article:nth-child(3n+2),.method-steps article:nth-child(3n+2){ background:var(--amarillo);border-color:var(--amarillo);color:var(--tinta)} .process article:nth-child(3n+2) b,.process article:nth-child(3n+2) p, .values article:nth-child(3n+2) b,.values article:nth-child(3n+2) p, .method-steps article:nth-child(3n+2) b,.method-steps article:nth-child(3n+2) p{color:var(--tinta-70)} .process article:nth-child(3n),.values article:nth-child(3n),.method-steps article:nth-child(3n){ background:var(--fondo);border-color:var(--borde);color:var(--tinta)}