body{isolation:isolate}
.page-backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(5,6,7,.91),rgba(5,6,7,.48)),url('assets/hero-architecture.png') center/cover no-repeat}
.hero{background:transparent}.hero-media,.hero-shade{display:none}
.problem,.flow,.case{position:relative}.problem:before,.flow:before,.case:before{content:'';position:absolute;inset:0 calc((100% - 100vw)/2);background:rgba(10,11,12,.88);z-index:-1}
.brand{gap:8px;flex-shrink:0}.brand-crop{display:block;overflow:hidden;background-image:url('assets/brand-original.png');background-repeat:no-repeat}
.brand-symbol{width:38px;height:38px;background-size:165px 55px;background-position:-59px -1px}.brand-wordmark{width:190px;height:30px;background-size:215px 72px;background-position:-13px -42px}
.whatsapp-link{display:inline-flex;align-items:center;gap:9px;min-height:44px}.whatsapp-link svg{width:25px;height:25px;fill:#83bb97;flex-shrink:0}
.sheet img{object-fit:contain;object-position:center;background:#fff}.formats img{display:block;width:76px;height:65px;object-fit:contain;background:#eeeae3}.formats article{grid-template-columns:80px 65px 1fr 16px}
@media(max-width:820px){.brand-symbol{width:32px;height:32px;background-size:140px 47px;background-position:-50px -1px}.brand-wordmark{width:165px;height:26px;background-size:187px 62px;background-position:-11px -36px}}
@media(max-width:480px){.formats article{grid-template-columns:65px 1fr 16px}.formats img{width:58px;height:54px}.formats p{grid-column:2/-1}.page-backdrop{background-position:65% center}.sheet img{object-fit:contain}}
/* Approved refinements: source proportions are preserved. */
.brand .brand-image{display:block;width:240px;height:auto;max-width:100%;object-fit:contain}
.footer .brand .brand-image{width:225px}
.page-backdrop{background-image:linear-gradient(90deg,rgba(5,6,7,.76),rgba(5,6,7,.28)),url('assets/hero-architecture.png')}
.problem:before,.flow:before,.case:before{background:rgba(10,11,12,.56)}
.outputs{background:rgba(18,20,22,.64)}.developments{background:rgba(23,25,28,.57)}
.method{background:linear-gradient(120deg,rgba(33,25,22,.70),rgba(52,35,29,.64))}
.contact{background:linear-gradient(110deg,rgba(38,23,20,.76),rgba(75,41,32,.65),rgba(97,58,42,.62))}
.flow-visual{display:block;width:100%;height:244px;margin:1.3rem 0 1.5rem;border:1px solid rgba(214,92,86,.7);border-radius:8px;box-shadow:0 0 12px rgba(214,40,40,.25),0 0 30px rgba(180,18,18,.13);transition:box-shadow .25s}
.flow-list li{padding-right:1.1rem}.flow-list li:hover .flow-visual{box-shadow:0 0 18px rgba(224,44,44,.43),0 0 38px rgba(180,18,18,.22)}
.development-art{position:absolute;inset:0;width:100%;height:100%;z-index:0;filter:saturate(.72)}
.dev-grid article{min-height:420px}.dev-grid article::before{pointer-events:none}
.formats .format-item{position:relative;grid-template-columns:80px 65px 1fr 16px;gap:12px;min-height:130px}
.format-trigger{padding:0;background:transparent;border:0;color:inherit;line-height:0;border-radius:6px}
.format-icon{display:block;width:76px;height:100px;border-radius:5px;transition:filter .2s}
.format-trigger:hover .format-icon{filter:drop-shadow(0 0 8px rgba(209,106,96,.35))}
.format-preview{display:none;grid-column:1/-1;padding:12px 0 22px;max-width:100%}
.formats .format-preview img{display:block;width:100%;height:auto;max-height:480px;object-fit:contain;background:#f7f7f7;border:1px solid rgba(255,255,255,.2)}
.format-item:hover .format-preview,.format-item:focus-within .format-preview,.format-item.preview-open .format-preview{display:block}
.formats article:hover{padding-inline:0}
@media(max-width:820px){.brand .brand-image{width:205px}.flow-list li,.flow-list li+li{grid-template-columns:130px 1fr;column-gap:20px}.flow-list>li>span{grid-column:2}.flow-visual{grid-column:1;grid-row:1/4;width:130px;height:218px;margin:0 0 18px}.flow-list h3{grid-column:2;grid-row:2;align-self:end}.flow-list p{grid-column:2;grid-row:3}.dev-grid article{min-height:350px}}
@media(max-width:480px){.brand .brand-image{width:195px}.flow-list li,.flow-list li+li{grid-template-columns:110px 1fr;column-gap:16px}.flow-visual{width:110px;height:185px}.flow-list p{font-size:14px}.formats .format-item{grid-template-columns:65px 1fr 16px}.format-icon{width:58px;height:82px}.formats p{grid-column:2/-1;grid-row:2}.format-preview{grid-row:3}.dev-grid article{min-height:300px}.footer .brand .brand-image{width:210px}}
@media(prefers-reduced-motion:reduce){.flow-visual,.format-icon{transition:none}}
/* Stronger red glow and progressive anticlockwise laser border. */
.laser-frame{position:relative;width:100%;height:244px;margin:1.3rem 0 1.5rem;border-radius:8px;box-shadow:0 0 15px rgba(235,31,37,.35),0 0 34px rgba(210,14,24,.2);transition:box-shadow .25s;outline-offset:7px}
.laser-frame .flow-visual{width:100%;height:100%;margin:0;box-shadow:none!important}
.laser-overlay{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none;filter:drop-shadow(0 0 3px #ff172d) drop-shadow(0 0 8px #f01326)}
.laser-overlay path{fill:none;stroke:#ffe0e3;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:0 100;stroke-opacity:0}
.laser-active .laser-overlay path{stroke-opacity:1}.laser-active{box-shadow:0 0 22px rgba(255,24,43,.52),0 0 46px rgba(220,13,28,.3)}
@media(max-width:820px){.laser-frame{grid-column:1;grid-row:1/4;width:130px;height:218px;margin:0 0 18px}}
@media(max-width:480px){.laser-frame{width:110px;height:185px}}
@media(prefers-reduced-motion:reduce){.laser-frame{transition:none}}
/* Images for Estructura, Conexion and Control. */
.method-cards article{padding:1.5rem;overflow:hidden}
.method-art{display:block;width:100%;height:340px;margin:1.1rem 0 1.4rem;border-radius:4px;border:1px solid rgba(207,152,121,.22)}
.method-cards h3{margin:0 0 .7rem}
@media(max-width:820px){.method-art{height:330px}.method-cards h3{margin:0 0 .7rem}}
@media(max-width:480px){.method-art{height:310px}}
/* Document pop-up: the underlying format rows retain their dimensions. */
.formats .format-item .format-preview{display:none!important}
html{scrollbar-gutter:stable}
html.document-popup-open{overflow:hidden}
.document-popup{box-sizing:border-box;width:min(1060px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:16px;margin:auto;border:1px solid rgba(207,152,121,.45);border-radius:12px;background:#151618;color:#f5f3ef;box-shadow:0 22px 90px rgba(0,0,0,.65);overflow:auto}
.document-popup::backdrop{background:rgba(0,0,0,.76);backdrop-filter:blur(5px)}
.document-popup[open]{animation:document-pop .18s ease-out}
.popup-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}
.popup-bar h2{margin:0;font-size:18px;line-height:1.4;letter-spacing:0}
.popup-close{width:44px;height:44px;flex-shrink:0;border:1px solid rgba(255,255,255,.25);border-radius:50%;color:white;background:#28292c;font-size:28px;line-height:1;cursor:pointer}
.popup-image{display:block;width:100%;height:auto;max-height:calc(100dvh - 132px);object-fit:contain;background:#fff}
@keyframes document-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:480px){.document-popup{padding:10px;width:calc(100vw - 20px);max-width:calc(100vw - 20px)}.popup-bar h2{font-size:16px}}
@media(prefers-reduced-motion:reduce){.document-popup[open]{animation:none}}
/* Matching red hover glow for methodology and development images. */
.method-art{transition:border-color .25s ease,box-shadow .25s ease}
.method-art:hover{border-color:rgba(255,65,78,.95);box-shadow:0 0 9px rgba(255,30,49,.75),0 0 22px rgba(231,20,37,.5),0 0 34px rgba(197,10,24,.24)}
.dev-grid article{transition:border-color .25s ease,box-shadow .25s ease}
.dev-grid article:hover{border-color:rgba(255,65,78,.95);box-shadow:0 0 9px rgba(255,30,49,.75),0 0 22px rgba(231,20,37,.5),0 0 34px rgba(197,10,24,.24)}
@media(prefers-reduced-motion:reduce){.method-art,.dev-grid article{transition:none}}
/* One consistent halo and progressive laser for every image card. */
.laser-surface{position:relative;border-radius:8px;outline-offset:6px;box-shadow:0 0 12px rgba(214,40,40,.24),0 0 28px rgba(180,18,18,.13);transition:box-shadow .2s ease}
.laser-surface.halo-active,.laser-surface.laser-active,.dev-grid article.laser-surface:hover{box-shadow:0 0 9px rgba(255,35,52,.8),0 0 24px rgba(231,20,37,.52),0 0 44px rgba(197,10,24,.28)}
.laser-surface .laser-overlay{z-index:4;inset:0;width:100%;height:100%;border-radius:inherit}
.laser-method{width:100%;height:340px;margin:1.1rem 0 1.4rem}
.laser-method .method-art,.laser-method .method-art:hover{display:block;width:100%;height:100%;margin:0;border-radius:8px;box-shadow:none;border:1px solid rgba(214,92,86,.7)}
.method-cards article{overflow:visible}.laser-development{isolation:isolate}
.formats .format-item{grid-template-columns:80px minmax(0,1fr) 16px;cursor:pointer}
.formats .format-item p{grid-column:2;grid-row:1}.formats .format-item>span{grid-column:3;grid-row:1}
.format-trigger:after{content:'';position:absolute;inset:0}
.format-item:focus-within{outline:2px solid #cf9879;outline-offset:4px}
@media(max-width:820px){.laser-frame.laser-method{grid-column:auto;grid-row:auto;width:100%;height:330px;margin:1.1rem 0 1.4rem}}
@media(max-width:480px){.laser-frame.laser-method{height:310px}.formats .format-item{grid-template-columns:65px minmax(0,1fr) 16px}}
@media(prefers-reduced-motion:reduce){.laser-surface{transition:none}}
/* Pointer interactions do not leave a keyboard-focus outline behind. */
.format-item:focus-within{outline:none}
.format-item:has(.format-trigger:focus-visible){outline:2px solid #cf9879;outline-offset:4px}
/* Freeze the traced path on exit and fade its light without rewinding. */
.laser-surface{transition:box-shadow 1.2s ease,border-color 1.2s ease}
.laser-surface .laser-overlay{opacity:0;transition:opacity 1.2s ease}
.laser-surface .laser-overlay path{stroke-opacity:1}
.laser-surface.halo-active{transition-duration:.2s}
.laser-surface.halo-active .laser-overlay{opacity:1;transition-duration:.2s}
@media(prefers-reduced-motion:reduce){.laser-surface,.laser-surface .laser-overlay{transition:none}}