/* Campo 07 — one grid, shared material language, restrained color. */
:root{--panel-radius:18px;--surface:#f0f0eb;--signal:#d7ea40}

/* The frame and type are stationary; only the decorative plane pivots. */
.hero{width:calc(100% - var(--gutter)*2);max-width:var(--content);min-height:780px;border-radius:var(--panel-radius);background:var(--paper);border-color:#dcdcd7}
.hero-content.wrap{width:100%;max-width:none;padding:65px 70px 58px}
.hero h1{font-size:clamp(76px,7.5vw,150px);margin-top:73px;max-width:1120px}
.hero-bottom{margin-top:78px;gap:40px}
.hero-down{margin-top:55px}
.hero-art{inset:-8% -10% -8% 4%;mask-image:linear-gradient(to right,transparent,#000 20%);transform:perspective(1600px) rotateX(var(--hero-rotate-x,0deg)) rotateY(var(--hero-rotate-y,0deg)) scale(1.075);transform-origin:50% 50%;transition:transform .75s cubic-bezier(.2,.7,.2,1);backface-visibility:hidden}
.hero-art img[data-hero-drift]{object-position:61% 50%;transform-origin:center}
.hero:before{background:linear-gradient(90deg,#f7f7f4d9 0%,#f7f7f4b0 22%,#f7f7f43d 49%,transparent 69%)}
.hero .line-cta svg{background:#ffffff70;box-shadow:0 0 0 1px #17171b22;backdrop-filter:blur(8px)}
.hero .line-cta:hover svg{background:var(--signal)}
.hero .line-cta:hover{color:var(--ink)}
.hero .line-cta:after{background:var(--ink)}

/* Both dark narrative panels share the page grid and generous inner margins. */
.experience{width:calc(100% - var(--gutter)*2);max-width:var(--content);margin:36px auto 0;border:1px solid #27272d;border-radius:var(--panel-radius);overflow:hidden;background:var(--graphite)}
.experience-inner.wrap{width:100%;max-width:none;min-height:330px;padding:62px 70px;grid-template-columns:.82fr 1.25fr;gap:65px}
.experience-years{gap:34px;align-items:end}
.experience-years>span{font-size:146px}
.experience-years p{font-size:16px;line-height:1.65;padding-bottom:7px}
.experience-copy{border-left:1px solid #ffffff24;padding-left:65px}
.experience h2{font-size:39px;line-height:1.13}
.experience-copy>p{font-size:18px;margin-top:22px;max-width:650px;line-height:1.6}
.experience-dot{display:none}
.fields.section{padding-top:110px}

/* A quieter panoramic material replaces the second purple ribbon. */
.fields-grid{border-radius:10px;background:var(--paper)}
.field-visual{background-image:url('../campo-superficie-perlata.webp');background-size:400% calc(100% + 32px);background-position:var(--field-position) calc(50% + var(--field-shift,0px));height:255px}
.field-copy{background:#f7f7f4}
.field-card .text-link svg{background:transparent;border-color:#c9cbd1}
.field-visual:after{background:linear-gradient(110deg,transparent 15%,#fff9 47%,transparent 80%)}
.field-card:focus-within .text-link svg{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.case-dot.active span{background:var(--ink);box-shadow:none;transform:scale(1.3)}
.case-rail .case-panel:not(.active):hover .case-expand{background:white;border-color:white;color:var(--ink)}

/* Research cards: common paper, glass and grain, with local color accents. */
.evidence-grid{gap:22px}
.evidence-card,.evidence-adoption,.evidence-value,.evidence-training,.evidence-productivity{background:#f0f1ec;border-color:#dadbd5;border-radius:10px}
.evidence-adoption{background:#f0f1ec}
.evidence-value{background:#eeefeb}
.evidence-training .evidence-art,.evidence-productivity .evidence-art{inset:-45px -38% -45px auto;width:118%;height:calc(100% + 90px);object-position:75% center;filter:saturate(.48) contrast(.91);opacity:.8;mask-image:linear-gradient(90deg,transparent 10%,#000 50%)}
.evidence-productivity .evidence-art{filter:saturate(.58) contrast(.91);object-position:70% center}
.evidence-training:after,.evidence-productivity:after{background:linear-gradient(90deg,#f0f1ec 0%,#f0f1eceb 24%,#f0f1ec80 58%,transparent 85%)}
.material-frost{top:0;right:9%;width:16%;height:100%;transform:none;background:#f7f7f412;border-left:1px solid #ffffff80;border-right:1px solid #ffffff40;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);box-shadow:none;opacity:.6}
.evidence-productivity .material-frost{top:0;right:9%;width:16%;height:100%;transform:none;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.stat-glass,.evidence-productivity .stat-glass{background:#f7f7f480;border:1px solid #ffffffe6;border-radius:8px;box-shadow:none;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);max-width:540px}
.evidence-number{font-weight:450}
.data-dots,.evidence-value .data-dots{inset:0;background-image:radial-gradient(#4d56583d .8px,transparent .8px);background-size:10px 10px;opacity:.65;mask-image:linear-gradient(125deg,transparent 37%,#000 100%)}
.evidence-adoption .evidence-art,.evidence-value .evidence-art{inset:0;width:100%;height:100%}
.evidence-adoption .evidence-art:after{content:'';position:absolute;right:-5%;bottom:-14%;width:68%;height:76%;background:url('../campo-superficie-perlata.webp') 68% 70%/auto 100%;opacity:.16;mask-image:linear-gradient(130deg,transparent 12%,#000 90%)}
.value-halo{display:none}
.evidence-value .data-dots{mask-image:linear-gradient(145deg,transparent 37%,#000 100%)}
.evidence-card:before{background:radial-gradient(ellipse 430px 330px at var(--pointer-x) var(--pointer-y),#fff9,transparent 75%)}
.evidence-card[data-spotlight-active=true]{border-color:#acae91}
.evidence-content .source-link{color:#44454b}
.evidence-content .source-link:hover{color:var(--accent)}
.evidence-note{color:#66616a}

/* The single lime dot field is a quiet technical detail in the approach panel. */
.approach-section{border-radius:var(--panel-radius);background:var(--graphite);padding:66px 70px}
.approach-section:after{inset:auto auto 0 0;width:38%;height:37%;background:radial-gradient(#d7ea4050 .8px,transparent .8px);background-size:11px 11px;mask-image:linear-gradient(25deg,#000,transparent 64%);opacity:.65}
.approach-intro>.text-link{color:#f7f7f4}
.approach-intro>.text-link:hover{color:var(--signal)}
.approach-steps:before{background:#ffffff2e}
.approach-steps>div:before{border-color:#aaa4b7}
.approach-steps>div:last-child:before{border-color:#a7b1ff;background:#a7b1ff}
.approach-steps>div:hover:before{background:var(--signal);border-color:var(--signal)}

/* Closing panel reuses the pearl material as a side detail; no pastel orbs. */
.contact-section{border-color:#d7d8d1;border-radius:var(--panel-radius);background:#eeefea;min-height:480px}
.contact-art{background:#eeefea}
.contact-orb{display:none}
.contact-art:before{content:'';position:absolute;inset:-15% -19% -15% 53%;background:url('../campo-superficie-perlata.webp') 73% 50%/auto 100% no-repeat;opacity:.62;mask-image:linear-gradient(90deg,transparent,#000 48%)}
.dot-surface{background-image:radial-gradient(#6c716e44 .8px,transparent .8px);background-size:11px 11px;inset:0 65% 0 0;mask-image:linear-gradient(100deg,#000,transparent 90%);opacity:.65}
.contact-content{width:100%;padding:73px 55px}
.contact-content h2{font-size:52px}
.contact-content .line-cta:hover svg{color:var(--accent)}

@media(hover:hover) and (pointer:fine){
 .field-card:hover{box-shadow:inset 0 0 0 1px #b8bb9f}
 .field-card:hover .field-visual{filter:brightness(1.045)}
 .field-card:hover .field-copy{background:#ffffffe0}
 .field-card:hover .text-link svg{background:var(--signal);border-color:var(--signal);color:var(--ink)}
 .evidence-card:hover{box-shadow:0 10px 24px #1d251407}
}
@media(min-width:2000px){
 .hero{min-height:845px}.hero-content.wrap{padding:72px 80px 67px}.hero h1{margin-top:83px}.hero-bottom{margin-top:90px}.hero-down{margin-top:62px}
 .experience-inner.wrap{min-height:360px;padding:70px 80px;gap:80px}.experience-years>span{font-size:158px}.experience-years p{font-size:18px}.experience-copy{padding-left:80px}.experience h2{font-size:44px}.experience-copy>p{font-size:20px}
 .fields-grid .field-visual{height:280px}.stat-glass,.evidence-productivity .stat-glass{max-width:595px}.approach-section{padding:74px 80px}
}
@media(max-width:1350px){
 .hero{min-height:730px}.hero-content.wrap{padding:52px 48px}.hero h1{font-size:8vw;margin-top:68px}.hero-bottom{margin-top:72px}.hero-down{margin-top:50px}
 .experience-inner.wrap{min-height:320px;padding:48px;gap:40px}.experience-years{gap:24px}.experience-years>span{font-size:120px}.experience-years p{font-size:14px}.experience-copy{padding-left:40px}.experience h2{font-size:34px}.experience-copy>p{font-size:16px}
 .field-visual{height:220px}.approach-section{padding:52px 48px}.stat-glass,.evidence-productivity .stat-glass{max-width:470px}
}
@media(max-width:1000px){
 .hero{min-height:710px}.hero-content.wrap{padding:45px 38px}.hero h1{font-size:9vw;margin-top:65px}.hero h1 span:last-child{margin-left:15%}.hero-bottom{gap:28px;margin-top:75px}.hero-description{font-size:17px}.hero .line-cta{width:250px;font-size:14px}
 .experience-inner.wrap{grid-template-columns:.7fr 1.3fr;gap:28px;padding:42px 35px}.experience-years{display:block}.experience-years>span{font-size:105px}.experience-years p{margin-top:18px;font-size:13px}.experience-copy{padding-left:28px}.experience h2{font-size:30px}.experience-copy>p{font-size:15px}
 .field-visual{height:210px}.approach-section{padding:46px 35px}.contact-content h2{font-size:44px}
}
@media(max-width:800px){
 .hero{min-height:0;border-radius:14px}.hero-content.wrap{padding:38px 30px 36px}.hero h1{font-size:clamp(50px,9.7vw,78px);margin-top:60px}.hero-bottom{margin-top:80px}.hero-down{margin-top:40px}
 .hero-art{inset:-8% -50% -8% -15%;transform:none!important}.hero:before{background:linear-gradient(90deg,#f7f7f4d9,#f7f7f480 70%,transparent)}
 .experience{margin-top:24px;border-radius:14px}.experience-inner.wrap{min-height:0;padding:36px 30px;gap:25px}.experience-copy{padding-left:25px}.experience h2{font-size:27px}.experience-copy>p{font-size:14px}.experience-years>span{font-size:94px}.experience-years p{font-size:12px}
 .fields.section{padding-top:75px}.evidence-training .evidence-art,.evidence-productivity .evidence-art{right:-42%;opacity:.7}.stat-glass,.evidence-productivity .stat-glass{background:#f7f7f4b8}
 .approach-section{padding:38px 30px;border-radius:14px}.contact-section{border-radius:14px;min-height:410px}.contact-content{padding:54px 25px}.contact-content h2{font-size:39px}.contact-art:before{left:46%;right:-55%;opacity:.36}
}
@media(max-width:600px){
 .experience-inner.wrap{display:block;padding:36px 29px}.experience-years{display:flex;align-items:end;gap:25px}.experience-years>span{font-size:108px}.experience-years p{margin:0;font-size:13px;padding-bottom:5px}.experience-copy{padding:27px 0 0;margin-top:30px;border-left:0;border-top:1px solid #ffffff24}.experience h2{font-size:30px}.experience-copy>p{font-size:15px;margin-top:20px}
 .approach-section{padding:38px 29px}.evidence-training .evidence-art,.evidence-productivity .evidence-art{right:-32%;opacity:.78}.stat-glass,.evidence-productivity .stat-glass{max-width:none}.contact-content h2{font-size:35px}
}
@media(max-width:520px){
 .hero-content.wrap{padding:35px 23px}.hero h1{font-size:12.25vw;margin-top:62px;letter-spacing:-.071em}.hero h1 span:last-child{margin-left:13%}.hero .eyebrow{font-size:9px}.hero-bottom{margin-top:84px}.hero-description{font-size:15px}.hero-description p+p{font-size:14px}.hero-bottom>.line-cta{width:100%;font-size:13px;margin-top:28px}.hero-down{margin-top:35px;font-size:10px;gap:25px}.hero-art{inset:-5% -90% -5% -28%}
 .experience-inner.wrap{padding:34px 25px}.experience h2{font-size:28px}.experience-copy>p{font-size:14px}.experience-years>span{font-size:100px}.experience-years p{font-size:12px}.fields.section{padding-top:68px}.field-visual{height:180px}
 .approach-section,.contact-section{width:calc(100% - var(--gutter)*2)}.approach-section{padding:33px 25px}.approach-intro h2{font-size:29px}.approach-intro>.text-link{font-size:12px}.contact-content{padding:50px 22px}.contact-content h2{font-size:31px}.contact-content .line-cta{width:100%;max-width:235px}.contact-section{min-height:405px}
}
@media(max-width:360px){.hero-content.wrap{padding-inline:20px}.hero h1{font-size:12vw}.hero-description{font-size:14px}.hero-description p+p{font-size:13px}.experience-inner.wrap{padding-inline:22px}.experience-years{gap:17px}.experience h2{font-size:25px}.approach-section{padding-inline:22px}.approach-intro h2{font-size:27px}.approach-intro>.text-link{font-size:11px;gap:6px}.contact-content h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){.hero-art{transform:none!important;transition:none!important}}