:root{--ink:#122b31;--paper:#f7f8f8;--soft:#e9f2f2;--line:#d5e0e1;--teal:#1d6b78;--teal-deep:#0c363e;--amber:#fca860;--muted:#5c6f74;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}
.skip-link{position:fixed;left:1rem;top:-4rem;background:#fff;padding:.6rem;z-index:20}
.skip-link:focus{top:1rem}
.site-header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1.25rem,4vw,5rem);border-bottom:1px solid var(--line);background:rgba(247,248,248,.94);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;height:100%;padding:.45rem 0}
.brand img{display:block;width:132px;height:auto}
.site-header nav{display:flex;gap:2.1rem}
.site-header a{color:var(--ink);text-decoration:none;font-size:.72rem;font-weight:700;letter-spacing:.01em}
.site-header nav a{color:var(--muted);transition:color .2s}
.site-header nav a:hover{color:var(--teal)}
.header-contact{padding:.62rem .9rem;background:transparent;border:1px solid var(--line);color:var(--teal)!important;transition:border-color .2s,color .2s}
.header-contact:hover{border-color:var(--teal);color:var(--ink)!important}
.mobile-navigation{display:none}
.hero{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(360px,.76fr);min-height:560px;border-bottom:1px solid var(--line);background:linear-gradient(115deg,#fbfdfd,#eef4f5)}
.hero-copy{padding:clamp(4rem,8vw,7.2rem) clamp(1.25rem,6vw,7rem) 3.5rem;display:flex;flex-direction:column;align-items:flex-start;position:relative}
.hero-copy:before{content:"";position:absolute;width:clamp(82px,11vw,150px);aspect-ratio:1;border:1px solid rgba(29,107,120,.18);border-radius:50%;right:10%;top:13%;box-shadow:0 0 0 13px rgba(252,168,96,.14),0 0 0 28px rgba(252,168,96,.06)}
.hero-copy>*{position:relative;z-index:1}
.eyebrow{font:500 .65rem/1.2 "DM Mono",monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 1.25rem}
.hero h1,h2{font-size:clamp(2.8rem,5vw,5.7rem);letter-spacing:-.07em;line-height:.94;margin:0;font-weight:700;max-width:760px}
.hero h1 em,h2 em{font-family:"Source Serif 4",serif;font-weight:500;letter-spacing:-.075em}
.hero-intro{max-width:480px;font-size:.95rem;line-height:1.72;margin:2rem 0;color:#435c62}
.hero-actions{display:flex;gap:1.4rem;align-items:center;margin-top:.8rem}
.button{font-size:.72rem;text-decoration:none;font-weight:800;padding:.95rem 1.2rem;letter-spacing:.01em;transition:background .2s,transform .2s}
.button-primary{background:var(--teal);color:#fff}
.button-primary:hover{background:var(--teal-deep);transform:translateY(-2px)}
.text-link{font-size:.73rem;color:var(--teal);text-decoration:none;font-weight:800;border-bottom:1px solid var(--teal);padding-bottom:.25rem}
.hero-media{overflow:hidden;position:relative;background:var(--teal-deep);height:clamp(360px,30vw,430px);aspect-ratio:16/11;align-self:center;margin:clamp(1.25rem,3vw,3rem) clamp(1.25rem,3vw,3rem) clamp(1.25rem,3vw,3rem) 0;border-radius:0 0 0 28px}
.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,30,36,.08),rgba(6,30,36,.35))}
.hero-media img,.about-image img,.project-visual img{display:block;width:100%;height:100%;object-fit:cover}
.hero-media img{min-height:100%;object-position:58% 62%}
.sun-mark{position:absolute;z-index:1;right:9%;top:8%;width:66px;height:66px;border:1px solid rgba(255,255,255,.72);border-radius:50%;display:grid;place-items:center}
.sun-mark:before{content:"";width:23px;height:23px;background:var(--amber);border-radius:50%}
.sun-mark i{display:none}
.media-caption{position:absolute;z-index:1;bottom:1.6rem;left:1.6rem;color:white;font:500 .58rem/1.45 "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em}
.hero-footnote{max-width:480px;margin:2.3rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.61rem;line-height:1.5;color:var(--muted)}
.credentials{display:grid;grid-template-columns:repeat(3,1fr);padding:1.55rem clamp(1.25rem,7vw,8rem);border-bottom:1px solid var(--line);background:#fff}
.credentials div{display:flex;align-items:center;gap:1rem;padding:.15rem 2rem;border-right:1px solid var(--line)}
.credentials div:first-child{padding-left:0}
.credentials div:last-child{border-right:0}
.credentials strong{font-size:clamp(1.65rem,2.4vw,2.45rem);letter-spacing:-.08em;color:var(--teal)}
.credentials span{font:500 .57rem/1.5 "DM Mono",monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.statement{padding:6.2rem clamp(1.25rem,14vw,15rem);text-align:center;background:var(--white)}
.statement .eyebrow{margin-bottom:1.6rem}
.statement>p:last-child{font:500 clamp(1.8rem,3vw,3.25rem)/1.18 "Source Serif 4",serif;letter-spacing:-.035em;margin:0}
.section-rule{border-bottom:1px solid var(--line)}
.about{padding:7rem clamp(1.25rem,7vw,8rem)}
.section-heading{display:grid;grid-template-columns:1fr 2.2fr;gap:2rem;margin-bottom:3.8rem}
.section-heading h2,.project-copy h2,.process h2,.contact h2{font-size:clamp(2.5rem,4.2vw,5rem)}
.about-grid{display:grid;grid-template-columns:.92fr 1fr;gap:clamp(2.5rem,8vw,10rem);align-items:start}
.about-image{margin:0;height:410px;position:relative;overflow:hidden;border-radius:0 0 24px 0}
.about-image:after{content:"";position:absolute;width:38%;height:8px;background:var(--amber);bottom:-8px;right:0}
.about-copy{padding-top:.2rem}
.about-copy>p{font:500 1.16rem/1.6 "Source Serif 4",serif;margin:0 0 2.2rem}
.check-list{padding:0;margin:0;list-style:none;border-top:1px solid var(--line)}
.check-list li{font-size:.79rem;line-height:1.55;padding:1rem 0 1rem 1.35rem;border-bottom:1px solid var(--line);position:relative}
.check-list li:before{content:"";position:absolute;left:0;top:1.38rem;width:5px;height:5px;border-radius:50%;background:var(--amber)}
.advantages{padding:7rem clamp(1.25rem,7vw,8rem);background:#fff}
.advantages-intro{display:grid;grid-template-columns:1fr 2.2fr;gap:2rem;margin-bottom:4rem}
.advantages-intro h2{font-size:clamp(2.5rem,4.2vw,5rem)}
.advantages-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.advantages-list article{background:#fff;padding:2rem 2rem 2.3rem;min-height:250px}
.advantages-list span{font:500 .62rem "DM Mono",monospace;color:var(--teal)}
.advantages-list h3{font-size:1.1rem;letter-spacing:-.04em;margin:3.8rem 0 1rem}
.advantages-list p{margin:0;font-size:.76rem;line-height:1.65;color:var(--muted);max-width:290px}
.team-note{padding:6rem clamp(1.25rem,15vw,15rem);text-align:center;background:var(--soft);border-bottom:1px solid var(--line)}
.team-note blockquote{max-width:850px;margin:0 auto;font:500 clamp(1.8rem,3.25vw,3.6rem)/1.15 "Source Serif 4",serif;letter-spacing:-.045em}
.team-signature{margin:2rem 0 0;font:600 .62rem "DM Mono",monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--teal)}
.project-section{background:var(--teal-deep);color:#f2f8f9;display:grid;grid-template-columns:.88fr 1.12fr;min-height:560px}
.project-visual{position:relative;overflow:hidden;align-self:center;aspect-ratio:16/11;margin:clamp(1.25rem,3vw,3rem) 0 clamp(1.25rem,3vw,3rem) clamp(1.25rem,3vw,3rem);border-radius:0 0 0 28px}
.project-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,30,36,.5),transparent 54%)}
.project-visual img{object-position:center}
.project-number{position:absolute;z-index:1;bottom:1.8rem;left:1.8rem;font-size:clamp(3.4rem,6vw,6.2rem);letter-spacing:-.1em;line-height:.75;font-weight:700}
.project-number span{font-size:.4em;vertical-align:top}
.project-number small{display:inline-block;font:500 .56rem/1.35 "DM Mono",monospace;letter-spacing:.05em;text-transform:uppercase;margin-left:1rem}
.project-copy{padding:clamp(4rem,8vw,7rem) clamp(2rem,7vw,7rem);display:flex;flex-direction:column;align-items:flex-start}
.project-copy .eyebrow{color:#93b8bf}
.project-copy h2{margin-bottom:1.7rem}
.project-copy>p{font-size:.86rem;line-height:1.7;margin:.3rem 0;max-width:500px;color:#cfe0e3}
.project-facts{display:flex;gap:3rem;margin-top:auto;padding-top:2.6rem}
.project-facts div{border-top:1px solid rgba(207,224,227,.38);padding-top:.8rem;min-width:155px}
.project-facts dt{font:500 .54rem/1.4 "DM Mono",monospace;text-transform:uppercase;color:#9dbcc2}
.project-facts dd{margin:.35rem 0 0;font-size:1.1rem;font-weight:700}
.process{padding:7rem clamp(1.25rem,7vw,8rem);background:var(--soft)}
.process-intro{display:grid;grid-template-columns:1fr 2.2fr;gap:2rem;margin-bottom:4.4rem}
.process-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.process-list li{text-align:center;padding:1.2rem 1.35rem 0 0;border-right:1px solid var(--line);min-height:280px}
.process-list li+li{padding-left:1.35rem}
.process-list li:last-child{border-right:0}
.process-list span{font:500 .64rem "DM Mono",monospace;color:var(--teal)}
.process-icon-wrap{position:relative;display:grid;place-items:center;width:46px;height:46px;margin:2.4rem auto 0;border:1px solid rgba(29,107,120,.42);transform:rotate(45deg);background:linear-gradient(135deg,rgba(252,168,96,.38),transparent 62%)}
.process-icon-wrap:before{content:"";position:absolute;inset:6px;border:1px solid rgba(29,107,120,.16)}
.process-icon-wrap:after{content:"";position:absolute;width:7px;height:7px;right:-4px;bottom:-4px;background:var(--amber);border:1px solid var(--teal)}
.process-icon{display:block;width:22px;height:22px;transform:rotate(-45deg);opacity:.9}
.process-list h3{font-size:1rem;line-height:1.18;letter-spacing:-.04em;max-width:190px;margin:3.3rem 0 1rem}
.process-icon-wrap+h3{margin:1.85rem auto 1rem}
.process-list p{font-size:.73rem;line-height:1.65;color:#546a70;max-width:235px;margin-left:auto;margin-right:auto}
.contact{background:linear-gradient(118deg,#15545f 0%,#10434c 60%,#0c363e 100%);color:#f5fafa;padding:clamp(4rem,7vw,7rem) clamp(1.25rem,7vw,8rem);display:grid;grid-template-columns:1.28fr .72fr;gap:5rem;position:relative;align-items:center;isolation:isolate;overflow:hidden;min-height:500px}
.contact:before{content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(circle at 86% 44%,rgba(252,168,96,.2),transparent 18%),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:auto,92px 92px;opacity:.75}
.contact:after{content:"";position:absolute;z-index:-1;left:clamp(1.25rem,7vw,8rem);bottom:clamp(2.4rem,5vw,5rem);width:76px;height:1px;background:#fca860;box-shadow:96px 0 0 rgba(252,168,96,.42)}
.contact-sun{position:absolute;z-index:-1;right:9%;top:50%;width:clamp(150px,15vw,230px);aspect-ratio:1;border:1px solid rgba(252,168,96,.46);border-radius:50%;transform:translateY(-50%);box-shadow:0 0 0 16px rgba(252,168,96,.06),0 0 0 38px rgba(252,168,96,.025)}
.contact-sun:before{content:"";position:absolute;inset:37%;border-radius:50%;background:#fca860;box-shadow:0 0 28px rgba(252,168,96,.35)}
.contact-sun:after{content:"";position:absolute;inset:-14px;border:1px dashed rgba(252,168,96,.22);border-radius:50%}
.contact>div:not(.contact-sun){position:relative;z-index:1}
.contact h2{font-size:clamp(2.9rem,5vw,5.8rem);max-width:700px;text-wrap:balance}
.contact .eyebrow{color:#fca860}
.contact-links{align-self:center;padding:1.3rem 0 1.3rem 1.7rem;border-left:1px solid rgba(252,168,96,.58)}
.contact-links p{font-size:.83rem;line-height:1.68;color:#cfe0e3;max-width:320px;margin:0 0 1.8rem}
.contact-links a{display:block;position:relative;color:#fff;text-decoration:none;font-size:.84rem;font-weight:800;padding:.78rem 0 .78rem 2rem;transition:color .2s,transform .2s}
.contact-links a:hover{color:#fca860;transform:translateX(.25rem)}
.contact-email:before{content:"";position:absolute;left:0;top:50%;width:15px;height:11px;border:1px solid currentColor;transform:translateY(-50%)}
.contact-email:after{content:"";position:absolute;left:4px;top:calc(50% - 5px);width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg)}
.contact-whatsapp img{position:absolute;left:0;top:50%;width:18px;height:18px;transform:translateY(-50%)}
footer{display:flex;justify-content:space-between;gap:1rem;padding:1.25rem clamp(1.25rem,4vw,5rem);background:#082a31;color:#9db6bb;font:400 .58rem "DM Mono",monospace;text-transform:uppercase;letter-spacing:.04em}
@media(min-width:1600px){.site-header{padding-inline:clamp(4rem,7vw,9rem)}.hero{grid-template-columns:minmax(650px,720px) minmax(480px,620px);justify-content:start;column-gap:clamp(2.5rem,3.5vw,4rem);padding-inline:clamp(4rem,7vw,9rem)}.hero-copy{padding:6.5rem 0 3.5rem}.hero h1{font-size:clamp(4.6rem,4.8vw,5.8rem)}.hero-copy:before{right:1%;top:12%}.hero-media{height:auto;aspect-ratio:16/11;margin:0;align-self:center}.project-visual{aspect-ratio:16/11}.credentials,.about,.advantages,.process,.contact{padding-left:clamp(4rem,7vw,9rem);padding-right:clamp(4rem,7vw,9rem)}footer{padding-left:clamp(4rem,7vw,9rem);padding-right:clamp(4rem,7vw,9rem)}}
@media(min-width:1101px) and (max-width:1599px){.hero{grid-template-columns:minmax(0,1fr) minmax(430px,540px);column-gap:clamp(2rem,3vw,3rem);padding-inline:clamp(2.5rem,6vw,6rem)}.hero-copy{padding:clamp(4.8rem,7vw,6.3rem) 0 3rem}.hero-media{height:auto;aspect-ratio:16/11;margin:0;align-self:center}.hero h1{font-size:clamp(3.9rem,5.4vw,5.1rem)}.hero-copy:before{right:2%;top:12%}}
@media(min-width:761px) and (max-width:1100px){.site-header{padding-inline:2rem}.hero{grid-template-columns:1fr .82fr;min-height:510px}.hero-copy{padding:4.5rem 2.5rem 3rem}.hero-media{height:auto;aspect-ratio:4/3;margin:2rem 2rem 2rem 0}.hero h1{font-size:clamp(3.1rem,5vw,4.4rem)}.credentials{padding-inline:2.5rem}.credentials div{padding-inline:1.1rem}.about,.advantages,.process,.contact{padding-left:2.5rem;padding-right:2.5rem}.section-heading,.advantages-intro,.process-intro{grid-template-columns:.85fr 2fr}.about-grid{gap:3rem}.project-visual{aspect-ratio:4/3}.project-copy{padding:4rem 3rem}.project-facts{gap:1.5rem}.process-list li{min-height:240px}.contact{gap:2.5rem}}
@media(max-width:760px){.site-header{height:70px}
.brand img{width:115px}
.site-header>nav,.header-contact{display:none}
.mobile-navigation{display:block;position:relative}
.mobile-navigation summary{display:flex;align-items:center;justify-content:center;gap:4px;list-style:none;width:38px;height:38px;border:1px solid var(--line);cursor:pointer}
.mobile-navigation summary::-webkit-details-marker{display:none}
.mobile-navigation summary span{display:block;width:14px;height:1px;background:var(--teal);transition:transform .2s}
.mobile-navigation[open] summary span:first-child{transform:translateY(2.5px) rotate(45deg)}
.mobile-navigation[open] summary span:last-child{transform:translateY(-2.5px) rotate(-45deg)}
.mobile-navigation nav{position:absolute;right:0;top:calc(100% + .6rem);width:min(250px,calc(100vw - 2.5rem));padding:.65rem;background:#fff;border:1px solid var(--line);box-shadow:0 14px 35px rgba(18,43,49,.12)}
.mobile-navigation nav a{display:block;padding:.85rem .75rem;color:var(--ink);text-decoration:none;font-size:.78rem;font-weight:700}
.mobile-navigation nav a:last-child{margin-top:.25rem;background:var(--teal);color:#fff;text-align:center}
.hero{display:block;min-height:0}
.hero-copy{padding:4.4rem 1.25rem 3.2rem}
.hero-copy:before{right:8%;top:8%}
.hero-media{height:auto;aspect-ratio:16/11;margin:0 1.25rem 1.25rem;border-radius:0 0 0 20px}
.hero-media img{min-height:0}
.hero-footnote{margin-top:2rem;padding-top:1rem}
.credentials{grid-template-columns:1fr;padding:0 1.25rem}
.credentials div,.credentials div:first-child{padding:1rem 0;border-right:0;border-bottom:1px solid var(--line)}
.credentials div:last-child{border-bottom:0}
.statement{padding:4.8rem 1.25rem}
.section-heading,.process-intro{display:block}
.section-heading .eyebrow,.process-intro .eyebrow{margin-bottom:1.5rem}
.about{padding:5rem 1.25rem}
.about-grid,.project-section,.contact{grid-template-columns:1fr}
.about-image{height:310px}
.advantages{padding:5rem 1.25rem}
.advantages-intro{display:block;margin-bottom:2.5rem}
.advantages-intro .eyebrow{margin-bottom:1.5rem}
.advantages-list{grid-template-columns:1fr}
.advantages-list article{min-height:0;padding:1.6rem}
.advantages-list h3{margin:1.8rem 0 .8rem}
.team-note{padding:4.8rem 1.25rem}
.project-visual{height:auto;aspect-ratio:16/11;margin:1.25rem 1.25rem 0;border-radius:0 0 0 20px}
.project-copy{padding:3.8rem 1.25rem;min-height:440px}
.project-facts{margin-top:2rem;gap:1.4rem}
.process{padding:5rem 1.25rem}
.process-list{display:block}
.process-list li,.process-list li+li{border-right:0;border-bottom:1px solid var(--line);min-height:auto;padding:1.25rem 0 1.8rem}
.process-list h3{margin:2rem 0 .8rem}
.process-icon-wrap{width:40px;height:40px;margin-top:1.8rem}
.process-icon-wrap+h3{margin-top:1.45rem}
.contact{padding:4.6rem 1.25rem;gap:3rem;min-height:0}
.contact-sun{right:-15%;top:24%;width:170px;opacity:.8}
.contact-links{padding:1.3rem 0 0;border-left:0;border-top:1px solid rgba(252,168,96,.58)}
footer{display:grid;grid-template-columns:1fr;gap:.7rem}
.hero-actions{align-items:flex-start;flex-direction:column}
}
@media(max-width:480px){.site-header{padding-inline:1rem}.brand img{width:105px}.hero-copy{padding:3.5rem 1.25rem 2.8rem}.hero h1{font-size:clamp(2.55rem,12vw,3.35rem)}.hero-intro{font-size:.88rem}.hero-media{aspect-ratio:15/11}.sun-mark{width:54px;height:54px}.sun-mark:before{width:18px;height:18px}.credentials strong{font-size:1.8rem}.credentials span{font-size:.53rem}.statement{padding-block:4rem}.about-image{height:260px}.project-visual{aspect-ratio:15/11}.project-number{left:1.25rem;bottom:1.25rem}.project-number small{max-width:100px}.project-copy{min-height:0}.project-facts{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.project-facts div{min-width:0}.contact h2{font-size:clamp(2.7rem,12vw,3.4rem)}}


/* ── Override original (bloque <style> secundario) ─────────────────── */
.eyebrow{margin:0 0 1.4rem}

/* ── Botón secundario sobre fondo oscuro ───────────────────────────── */
.project-actions{margin:2.4rem 0 .4rem}
.button-outline{display:inline-flex;align-items:center;gap:.65rem;border:1px solid rgba(207,224,227,.5);color:#f2f8f9}
.button-outline:hover{background:rgba(252,168,96,.14);border-color:var(--amber);color:#fff;transform:translateY(-2px)}
.button-outline svg{width:14px;height:14px;flex:none}

/* ── Caso de referencia: Los Pisingos I y II ───────────────────────── */
.case-study{padding:7rem clamp(1.25rem,7vw,8rem);background:var(--white)}
.case-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
.case-media{margin:0;position:relative;overflow:hidden;background:var(--teal-deep);border-radius:0 0 0 28px;aspect-ratio:16/9}
.case-media video{display:block;width:100%;height:100%;object-fit:cover;background:var(--teal-deep)}
.case-media:after{content:"";position:absolute;width:38%;height:8px;background:var(--amber);bottom:0;right:0;pointer-events:none}
.case-play{position:absolute;inset:0;display:grid;place-items:center;border:0;padding:0;cursor:pointer;background:linear-gradient(180deg,rgba(6,30,36,.16),rgba(6,30,36,.48));transition:opacity .25s}
.case-play[hidden]{display:none}
.case-play span{width:76px;height:76px;border:1px solid rgba(255,255,255,.72);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 14px rgba(252,168,96,.13),0 0 0 30px rgba(252,168,96,.05);transition:transform .2s,box-shadow .2s}
.case-play span:before{content:"";width:0;height:0;margin-left:5px;border-left:17px solid var(--amber);border-top:11px solid transparent;border-bottom:11px solid transparent}
.case-play:hover span{transform:scale(1.06);box-shadow:0 0 0 14px rgba(252,168,96,.2),0 0 0 32px rgba(252,168,96,.08)}
.case-play em{position:absolute;top:1.6rem;left:1.6rem;right:1.6rem;color:#fff;font:500 .58rem/1.45 "DM Mono",monospace;font-style:normal;text-transform:uppercase;letter-spacing:.08em;text-align:left;text-shadow:0 1px 10px rgba(6,30,36,.55)}
.case-caption{margin:.9rem 0 0;font:500 .57rem/1.5 "DM Mono",monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.case-copy>p{font:500 1.08rem/1.6 "Source Serif 4",serif;margin:0 0 1.5rem}
.case-copy>p+p{font:400 .82rem/1.72 Manrope,Arial,sans-serif;color:var(--muted);margin-bottom:2.2rem}
.case-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;background:var(--line);border:1px solid var(--line)}
.case-facts div{background:#fff;padding:1.15rem 1.2rem}
.case-facts dt{font:500 .54rem/1.4 "DM Mono",monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.case-facts dd{margin:.45rem 0 0;font-size:1.5rem;font-weight:700;letter-spacing:-.05em;color:var(--teal)}
.case-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 0;padding:0;list-style:none}
.case-tags li{font:500 .56rem "DM Mono",monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--teal);border:1px solid var(--line);padding:.5rem .75rem}

@media(min-width:761px) and (max-width:1100px){.site-header nav{gap:1.5rem}.case-study{padding-left:2.5rem;padding-right:2.5rem}.case-grid{grid-template-columns:1fr;gap:2.5rem}}
@media(max-width:760px){
  .case-study{padding:5rem 1.25rem}
  .case-grid{grid-template-columns:1fr;gap:2.2rem}
  .case-media{border-radius:0 0 0 20px}
  .case-play span{width:62px;height:62px;box-shadow:0 0 0 10px rgba(252,168,96,.13),0 0 0 22px rgba(252,168,96,.05)}
  .case-play em{top:1.1rem;left:1.1rem;right:1.1rem}
  .project-actions{margin:2rem 0 .4rem}
}
@media(max-width:480px){.case-facts{grid-template-columns:1fr}.case-facts dd{font-size:1.35rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* <picture> no debe crear una caja intermedia: las reglas de layout
   apuntan directamente a los <img> (height:100%, object-fit).          */
picture{display:contents}

/* ── Red de seguridad: ninguna palabra larga rompe el ancho ─────────── */
h1,h2,h3,blockquote{overflow-wrap:break-word}

/* ── Contacto directo de gerencia ──────────────────────────────────── */
.contact-person{margin:1.9rem 0 0;padding-top:1.3rem;border-top:1px solid rgba(252,168,96,.34);display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .85rem}
.contact-person strong{font-size:.82rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.contact-person span{font:500 .55rem "DM Mono",monospace;letter-spacing:.07em;text-transform:uppercase;color:#fca860;flex:1 0 auto}
.contact-links .contact-person a{display:inline;width:auto;padding:0;font-size:.74rem;font-weight:600;color:#cfe0e3;border-bottom:1px solid rgba(207,224,227,.32)}
.contact-links .contact-person a:hover{color:#fca860;border-bottom-color:#fca860;transform:none}
@media(max-width:760px){.contact-person{gap:.3rem .7rem}.contact-person span{flex-basis:100%}}

/* ── También hacemos: autoconsumo y cobertura rural ────────────────── */
.also{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2.5rem,6vw,6rem);align-items:start;padding:5.5rem clamp(1.25rem,7vw,8rem);background:#fff}
.also-intro h2{font-size:clamp(2rem,3.1vw,3.1rem)}
.also-intro>p{margin:1.6rem 0 0;font-size:.83rem;line-height:1.72;color:var(--muted);max-width:360px}
.also-list{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.also-list article{background:#fff;padding:1.9rem 1.8rem 2rem;position:relative}
.also-list article:before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;background:var(--amber)}
.also-list h3{font-size:1.02rem;letter-spacing:-.04em;margin:.9rem 0 .9rem}
.also-list p{margin:0;font-size:.76rem;line-height:1.68;color:var(--muted)}
@media(min-width:761px) and (max-width:1100px){.also{padding-left:2.5rem;padding-right:2.5rem;grid-template-columns:1fr;gap:2.5rem}}
@media(max-width:760px){
  .also{grid-template-columns:1fr;gap:2.2rem;padding:4.6rem 1.25rem}
  .also-list{grid-template-columns:1fr}
  .also-intro>p{max-width:none}
}

/* ── Menú móvil: el <nav> del <details> heredaba display:flex de
   `.site-header nav`, y el ocultamiento usa `>` (hijo directo), que no lo
   alcanza. Sin esto los enlaces salen en fila y se cortan fuera del panel. */
@media(max-width:760px){
  .mobile-navigation nav{display:block;gap:0}
}

/* ── Legibilidad en pantallas pequeñas y tablets ──────────────────────
   El diseño usa etiquetas en DM Mono de .53–.64rem, que se traducen en
   8,5–10,2px. A distancia de mano (teléfono y tablet) resulta ilegible,
   así que se elevan a ~11px hasta 1100px. Por encima queda como el
   diseño original lo definió.                                          */
@media(max-width:1100px){
  .eyebrow{font-size:.7rem}
  .hero-footnote{font-size:.7rem;line-height:1.6}
  .media-caption{font-size:.68rem}
  .credentials span{font-size:.68rem}
  .advantages-list span,.team-signature,.process-list span{font-size:.7rem}
  .project-facts dt,.case-facts dt{font-size:.68rem}
  .case-caption,.case-tags li,.contact-person span,.case-play em{font-size:.67rem}
  .project-number small{font-size:.68rem}
  footer{font-size:.68rem}
}
@media(max-width:480px){
  .credentials span{font-size:.68rem}
}

/* ── Objetivos táctiles de 44px en pantallas de contacto directo ───────
   Se amplía el área sensible sin mover nada de lo que se ve.            */
@media(max-width:760px){
  .mobile-navigation summary{position:relative}
  .mobile-navigation summary:before{content:"";position:absolute;inset:-4px}
  .text-link{display:inline-block;padding:1rem 0 .65rem}
  .contact-person{gap:.2rem .85rem}
  .contact-links .contact-person a{display:flex;align-items:center;min-height:44px;width:100%}
}

/* ── Texto justificado en columnas anchas ─────────────────────────────
   Medido: las columnas de texto corrido solo superan los ~420px a partir
   de 1024px. Por debajo (tablet vertical y móvil) quedan en 330–380px,
   donde justificar abre huecos entre palabras. Por eso el umbral es
   1024px y no el breakpoint de tablet.
   hyphens:auto parte palabras con los patrones de español (lang="es" en
   <html>), que es lo que evita los ríos de espacios.
   Los bloques centrados (propósito, cita y pasos del proceso) no entran. */
@media(min-width:1024px){
  .hero-intro,
  .hero-footnote,
  .about-copy>p,
  .check-list li,
  .project-copy>p:not(.eyebrow),
  .case-copy>p{
    text-align:justify;
    text-justify:inter-word;
    -webkit-hyphens:auto;
    hyphens:auto;
  }
}

/* ── Ritmo vertical más compacto ───────────────────────────────────────
   El diseño original respiraba 7rem por sección (14rem entre bloques
   contiguos). Se recorta ~25% dejando intactos los paddings laterales,
   que son los que sostienen la retícula.                                */
.statement{padding-block:4.6rem}
.about,.advantages,.process,.case-study{padding-block:5.2rem}
.team-note{padding-block:4.4rem}
.also{padding-block:4.6rem}
.contact{padding-block:clamp(3.2rem,5.2vw,5.2rem)}
.project-copy{padding-block:clamp(3.2rem,6vw,5.2rem)}
.section-heading,.advantages-intro{margin-bottom:2.9rem}
.process-intro{margin-bottom:3.2rem}

@media(max-width:1100px){
  .project-copy{padding-block:3.2rem}
}
@media(max-width:760px){
  .statement{padding-block:3.6rem}
  .about,.advantages,.process,.case-study{padding-block:3.8rem}
  .team-note{padding-block:3.6rem}
  .also{padding-block:3.6rem}
  .contact{padding-block:3.6rem}
  .section-heading,.advantages-intro{margin-bottom:2rem}
  .process-intro{margin-bottom:2.2rem}
}

/* ── Justificado también en la banda de autoconsumo ────────────────── */
@media(min-width:1024px){
  .also-intro>p,.also-list p{
    text-align:justify;text-justify:inter-word;
    -webkit-hyphens:auto;hyphens:auto;
  }
}