/* Content extensions retain the existing site's palette and component styles. */
:root{--id-ink:#03172e;--id-blue:#38bdf8;--id-line:rgba(148,163,184,.24)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{overflow-x:hidden}img{max-width:100%}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #38bdf8;outline-offset:5px}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}.skip-link{position:fixed;top:-100px;left:20px;background:#fff;color:#03172e;padding:12px;z-index:1000001}.skip-link:focus{top:15px}.id-shell{width:min(1260px,90%);margin-inline:auto}.id-content-page{background:#03172e;color:#fff}.id-content-page #main-content{padding-top:100px}.id-page-banner{background:linear-gradient(135deg,#03172e,#0a2540);padding:65px 0 48px;border-bottom:1px solid var(--id-line)}.id-page-banner h1{font-size:clamp(30px,4vw,54px);line-height:1.13;max-width:980px;margin:20px 0}.id-page-banner p{color:#cbd5e1;max-width:850px;font-size:17px;line-height:1.8}.id-detail{padding-block:45px 80px}.id-detail h2{margin-block:30px 20px}.id-detail p,.id-detail-panel p{line-height:1.8;color:#cbd5e1}.id-detail a:not([class]),.id-prose a:not([class]){color:#7dd3fc}.id-detail-panel{background:rgba(15,23,42,.9);border:1px solid var(--id-line);border-radius:24px;padding:30px}.id-detail-panel h1{font-size:clamp(28px,3vw,40px);line-height:1.2;margin:20px 0}.id-detail-panel h2{font-size:25px;margin-top:8px}.id-detail-panel h3{color:#fff}.id-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-bottom:32px}.id-wide-image{width:100%;height:450px;object-fit:cover;border-radius:18px;margin-bottom:25px}.id-product-image{width:100%;height:420px;object-fit:contain;background:#fff;border-radius:16px}.id-caption{font-size:12px;color:#94a3b8!important;line-height:1.6}.id-breadcrumb{color:#94a3b8;font-size:13px;margin-bottom:25px}.id-specs{width:100%;border-collapse:collapse;margin:24px 0;color:#e2e8f0;font-size:14px}.id-specs caption{text-align:left;font-weight:700;margin-bottom:10px}.id-specs th,.id-specs td{text-align:left;vertical-align:top;padding:12px 8px;border-bottom:1px solid var(--id-line);overflow-wrap:anywhere}.id-specs th{width:35%;color:#7dd3fc}.id-text-link{color:#38bdf8;text-decoration:none;font-weight:750;font-size:13px;display:inline-block;padding:10px 0}.id-eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:800;text-transform:uppercase;color:#38bdf8}.id-listing{padding:36px 0 70px}.id-filters{display:flex;gap:18px;align-items:end;flex-wrap:wrap;padding:24px;background:#0b233e;border-radius:18px}.id-filters label{flex:1;min-width:210px;font-size:13px;font-weight:700;display:grid;gap:8px}.id-filters input,.id-filters select,.id-form input,.id-form textarea{border:1px solid #49647f;background:#06182d;color:#fff;border-radius:9px;padding:13px 14px;font:inherit;width:100%}.id-filters select option{background:#06182d}.id-clear{background:transparent;border:1px solid #49647f;color:#fff;border-radius:9px;padding:13px 18px}.id-result-count{margin:25px 0;color:#cbd5e1}.id-card-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.id-card{overflow:hidden;border:1px solid var(--id-line);border-radius:20px;background:#0b2039;display:flex;flex-direction:column;min-width:0}.id-card .bh-prod-img-wrap{height:245px;display:block;overflow:hidden;margin:0;border-radius:0}.id-card .bh-prod-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.id-card:hover .bh-prod-img-wrap img{transform:scale(1.025)}.id-card .bh-prod-img-wrap .id-contain{object-fit:contain;background:#fff;padding:14px}.id-card .bh-prod-body{padding:24px;display:flex;flex-direction:column;flex:1}.id-card h2{font:800 21px/1.3 var(--font-main,Arial,sans-serif);margin:12px 0;color:white}.id-card h2 a{color:inherit;text-decoration:none}.id-card p{font-size:13px;line-height:1.7;color:#b9cadb;margin:0 0 12px}.id-card .id-text-link{margin-top:auto}.id-catalog-note{padding-top:25px;font-size:13px;color:#b9cadb;line-height:1.8}.id-catalog-note a{color:#7dd3fc;text-underline-offset:4px}.id-pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:32px}.id-pagination button{min-width:42px;height:42px;background:#0b233e;border:1px solid #49647f;border-radius:10px;color:#fff}.id-pagination button[aria-current=page]{background:#0284c7;border-color:#38bdf8}.id-pagination button:disabled{opacity:.4;cursor:default}[hidden]{display:none!important}.id-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:30px 0}.id-gallery a{display:block}.id-gallery img{width:100%;height:270px;object-fit:cover;border-radius:14px}.id-video-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.id-video-grid figure{margin:0}.id-video-grid video{width:100%;max-height:550px;border-radius:16px;background:#000}.id-video-embed iframe{width:100%;height:360px;border:0;border-radius:16px}.id-video-grid figcaption{color:#94a3b8;padding:12px 0}.id-tool-frame{width:100%;height:850px;border:1px solid var(--id-line);border-radius:16px;background:#fff}.id-prose{max-width:850px;line-height:1.85}.id-prose h2{margin:25px 0 16px}.id-prose p{font-size:16px}.id-contact-strip{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:32px}.id-form label{display:grid;gap:9px;font-size:14px;font-weight:650;margin-bottom:22px}.id-form button{width:100%;border:0}.id-form textarea{resize:vertical}.id-footer{background:#061120;color:#b5c2d3;padding:65px 0 25px;font-size:13px}.id-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.4fr 1fr;gap:45px}.id-footer a{color:#cbd5e1;display:block;text-decoration:none;line-height:2.2}.id-footer h3{font-size:14px;color:#fff;margin-bottom:20px}.id-footer p{line-height:1.8;margin:18px 0}.id-footer-bottom{border-top:1px solid var(--id-line);margin-top:35px;padding-top:20px;display:flex;justify-content:space-between;gap:20px}.id-whatsapp{position:fixed;right:22px;bottom:22px;z-index:990;background:#25d366;color:#ffffff!important;padding:12px 18px;border-radius:999px;font-size:14px;font-weight:800;text-decoration:none;box-shadow:0 8px 24px rgba(37,211,102,.45);display:inline-flex!important;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.2);transition:transform .23s ease,box-shadow .23s ease,background-color .23s ease}.id-cta{text-align:center;padding:70px 0}.id-cta h2{font-size:clamp(25px,3vw,40px)}.id-cta p{max-width:700px;margin:20px auto 30px;line-height:1.8}.id-brand-row{display:flex;flex-wrap:wrap;justify-content:center;gap:32px;padding:30px 0}.id-brand-row a{font-size:22px;font-weight:800;color:#24405d;text-decoration:none}.id-faq{max-width:900px;margin:30px auto}.id-faq details{border-bottom:1px solid #cbd5e1;padding:20px 0;color:#15304c}.id-faq summary{font-size:17px;font-weight:750;cursor:pointer}.id-faq p{line-height:1.8;color:#475569}.honduras-split-section .id-shell{padding:65px 0}.honduras-split-section .id-card-grid{margin-top:30px}.sec8-calc-redesign,.sec9-ai-redesign{padding:75px 0}.sec8-calc-redesign p,.sec9-ai-redesign p{line-height:1.9;margin:22px 0 30px}.sec8-calc-redesign .id-wide-image,.sec9-ai-redesign .id-wide-image{height:360px}.testi-feat-quote-wrap p{line-height:1.8;margin-bottom:24px}.semper-header-container .header-actions{display:flex;align-items:center;gap:12px}.semper-header-container{gap:20px}.semper-nav ul{gap:20px!important}.semper-nav a{white-space:nowrap}.mobile-nav-toggle{font-size:24px;color:#fff}.sec4-carousel-viewport{overflow-x:auto!important;scrollbar-width:thin;scrollbar-color:#0284c7 #e2e8f0}.sec4-carousel-track{transform:none!important;width:max-content!important}.sec4-slide{display:flex!important;gap:22px}.sec4-vertical-card{width:260px;flex:0 0 260px;text-decoration:none}.sec4-controls-row .sec4-square-dots{display:none}.fs-project-spec-drawer p{font-size:14px;color:#cbd5e1;margin:16px 0}.hero-slide:not(.active),.fullscreen-project-slide:not(.active){visibility:hidden}.hero-slide.active,.fullscreen-project-slide.active{visibility:visible}.mob-menu-fs.open{overflow-y:auto}.mob-menu-nav{gap:16px!important}.mob-menu-link{font-size:clamp(22px,5vw,42px)!important}.mob-menu-foot{padding-top:25px}.mob-menu-close{font-size:26px;color:#fff}.id-lightbox{border:0;border-radius:16px;background:#061120;color:#fff;padding:16px;width:min(95vw,1200px);max-height:95vh}.id-lightbox::backdrop{background:#000c}.id-lightbox img{display:block;max-height:80vh;max-width:100%;margin:auto;object-fit:contain}.id-lightbox button{display:block;margin-left:auto;background:transparent;border:0;color:#fff;font-size:24px;padding:6px 12px}.id-lightbox p{margin:10px 0;font-size:13px}
@media(max-width:1060px){.semper-nav{display:none!important}.mobile-nav-toggle{display:block!important}.id-footer-grid{gap:25px}.id-card-grid{gap:18px}}
@media(max-width:800px){.id-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.id-detail-grid{grid-template-columns:1fr;gap:24px}.id-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.id-video-grid{grid-template-columns:1fr}.id-footer-grid{grid-template-columns:1fr 1fr}.id-product-image{height:330px}.id-wide-image{height:330px}.id-detail-panel{padding:24px}.id-page-banner{padding:45px 0 30px}.id-content-page #main-content{padding-top:85px}.testi-featured-row{grid-template-columns:1fr!important}.fs-project-spec-drawer{display:none!important}.hero-slide h1,.hero-slide h2{font-size:34px!important}.sec2-big-heading{font-size:36px!important}.semper-brand-logo img{max-width:160px}.semper-header-container{padding-inline:20px!important}.header-action-btn{font-size:11px!important;padding:12px 18px!important}.id-footer-bottom{flex-direction:column}}
@media(max-width:520px){.id-card-grid{grid-template-columns:1fr}.id-gallery{gap:10px}.id-gallery img{height:180px}.id-card .bh-prod-img-wrap{height:260px}.id-filters{padding:18px}.id-filters label{min-width:100%}.id-footer-grid{grid-template-columns:1fr}.id-detail-panel{padding:20px}.id-whatsapp{position:fixed;right:22px;bottom:22px;z-index:990;background:#25d366;color:#ffffff!important;padding:12px 18px;border-radius:999px;font-size:14px;font-weight:800;text-decoration:none;box-shadow:0 8px 24px rgba(37,211,102,.45);display:inline-flex!important;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.2);transition:transform .23s ease,box-shadow .23s ease,background-color .23s ease}.id-page-banner h1{font-size:32px}.hero-slide h1,.hero-slide h2{font-size:30px!important}.hero-slide p{font-size:14px!important}.fs-project-title{font-size:29px!important}.id-tool-frame{height:780px}.sec4-vertical-card{width:225px;flex-basis:225px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.id-cta{min-height:0!important;height:auto!important;display:block!important;padding:85px 0!important}.testi-feat-quote-wrap p{color:#334155}.testi-feat-quote-wrap .testi-quote-text{color:#0f172a;font-size:30px}.id-archive-list{list-style:none;padding:0;display:grid;gap:15px}.id-archive-list a{display:block;padding:22px;border:1px solid var(--id-line);border-radius:12px;color:#cbd5e1;text-decoration:none;line-height:1.6}

/* Shared motion: entrances, tactile controls and image exploration. */
.id-reading-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,#0284c7,#38bdf8,#a5f3fc);transform:scaleX(0);transform-origin:left;z-index:1000000;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
 .semper-main-header{animation:id-header-enter .65s cubic-bezier(.2,.75,.25,1) backwards}
 .hero-slide.active :is(.hero-category-pill,h1,h2,p),.fullscreen-project-slide.active :is(.fs-project-cat-pill,.fs-project-title,.fs-project-location,.fs-project-desc,.fs-project-spec-drawer){animation:id-content-enter .75s cubic-bezier(.2,.75,.25,1) backwards}
 .hero-slide.active :is(h1,h2),.fullscreen-project-slide.active .fs-project-title{animation-delay:90ms}
 .hero-slide.active p,.fullscreen-project-slide.active .fs-project-desc{animation-delay:170ms}
 .hero-slide.active :is(.btn-hero-primary-blue,.btn-hero-white-pill),.fullscreen-project-slide.active :is(.btn-hero-primary-blue,.btn-hero-white-pill){animation:id-content-enter .7s .24s backwards}
 :is(.btn-hero-primary-blue,.btn-hero-white-pill,.header-action-btn,.id-whatsapp,.id-clear,.id-pagination button,.hero-arrow,.sec4-arrow-btn){transition:transform .23s ease,box-shadow .23s ease,background-color .23s ease,border-color .23s ease}
 :is(.btn-hero-primary-blue,.btn-hero-white-pill,.header-action-btn,.id-whatsapp,.id-clear,.id-pagination button,.hero-arrow,.sec4-arrow-btn):active{transform:scale(.96)}
 .id-card,.id-detail-panel,.id-archive-list a{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
 .id-gallery img,.honduras-frame-img img,.testi-feat-img,.sec4-card-img{transition:transform .6s cubic-bezier(.2,.75,.25,1),filter .4s ease}
 .id-gallery a,.honduras-frame-img,.testi-feat-img-wrap{overflow:hidden;border-radius:14px}
 .id-text-link,.semper-nav a,.id-footer a{transition:color .2s ease,text-shadow .2s ease}
 .id-form input,.id-form textarea,.id-filters input,.id-filters select{transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease}
 :is(.id-form input,.id-form textarea,.id-filters input,.id-filters select):focus{border-color:#38bdf8;box-shadow:0 0 0 4px #38bdf81a;background-color:#0b233e}
 .id-faq details[open] p{animation:id-content-enter .35s ease backwards}
 .id-faq summary::marker{color:#0284c7}
 .sec2-accordion-item.open .sec2-acc-body{animation:id-content-enter .4s ease backwards}
 .mob-menu-fs.open .mob-menu-link{animation:id-menu-enter .5s backwards}
 .mob-menu-link:nth-child(2){animation-delay:45ms!important}.mob-menu-link:nth-child(3){animation-delay:90ms!important}.mob-menu-link:nth-child(4){animation-delay:135ms!important}.mob-menu-link:nth-child(5){animation-delay:180ms!important}.mob-menu-link:nth-child(6){animation-delay:225ms!important}.mob-menu-link:nth-child(7){animation-delay:270ms!important}
 .id-lightbox[open]{animation:id-dialog-enter .28s cubic-bezier(.2,.75,.25,1) backwards}
 .id-lightbox[open]::backdrop{animation:id-backdrop-enter .25s ease backwards}
 #quote-status:not(:empty),.id-empty:not([hidden]){animation:id-content-enter .35s ease backwards}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 :is(.btn-hero-primary-blue,.btn-hero-white-pill,.header-action-btn,.id-whatsapp):hover{transform:translateY(-3px);box-shadow:0 10px 28px #0284c744}
 :is(.id-clear,.id-pagination button,.hero-arrow,.sec4-arrow-btn):not(:disabled):hover{transform:translateY(-2px);border-color:#38bdf8}
 .id-card:hover{transform:translateY(-6px);border-color:#38bdf880;box-shadow:0 18px 35px #0003}
 .id-detail-panel:focus-within{border-color:#38bdf880;box-shadow:0 12px 30px #0002}
 .id-gallery a:hover img,.honduras-frame-img:hover img,.testi-feat-img-wrap:hover img,.sec4-vertical-card:hover img{transform:scale(1.045);filter:saturate(1.06)}
 .id-archive-list a:hover{transform:translateX(5px);border-color:#38bdf8}
 .id-text-link:hover,.semper-nav a:hover,.id-footer a:hover{color:#7dd3fc;text-shadow:0 0 16px #38bdf84d}
}
@keyframes id-content-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes id-header-enter{from{opacity:0;translate:0 -12px}to{opacity:1;translate:0 0}}
@keyframes id-menu-enter{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
@keyframes id-dialog-enter{from{opacity:0;transform:scale(.96) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes id-backdrop-enter{from{background:#0000}to{background:#000c}}
@media(prefers-reduced-motion:reduce){.id-reading-progress{display:none}html{scroll-behavior:auto!important}}
/* Mobile refinements and recognizable social icons. */
.id-social-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.id-social-link{display:inline-flex!important;align-items:center;gap:8px;border:1px solid rgba(125,211,252,.24);border-radius:999px;padding:8px 11px;line-height:1!important;background:rgba(56,189,248,.06)}.id-social-link svg{width:18px;height:18px;fill:currentColor;stroke:none!important;display:block;flex-shrink:0}.id-social-link span{font-size:12px}
.id-brand-marquee{overflow:hidden;position:relative;width:100%;padding:15px 0 25px;mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent)}.id-brand-track{display:flex;width:max-content;gap:24px;animation:id-brand-loop 34s linear infinite;align-items:center}.id-brand-marquee:hover .id-brand-track{animation-play-state:paused}.id-brand-logo{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:190px!important;max-width:220px!important;height:92px!important;padding:14px 24px!important;border:1px solid #e2e8f0!important;border-radius:18px!important;background:#ffffff!important;box-shadow:0 4px 18px rgba(15,23,42,.05)!important;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease!important;text-decoration:none!important;box-sizing:border-box!important}.id-brand-logo:hover{transform:translateY(-4px) scale(1.02)!important;border-color:#38bdf8!important;box-shadow:0 10px 28px rgba(2,132,199,.16)!important}.id-brand-img{max-height:48px!important;max-width:160px!important;width:auto!important;height:auto!important;object-fit:contain!important;display:block!important;filter:contrast(1.04)}
@keyframes id-brand-loop{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 12px))}}
@media(max-width:800px){.sec4-light-beige{padding:52px 0 44px!important}.sec4-light-beige .sec4-header-row{display:block!important;margin-bottom:24px!important;padding:0 20px}.sec4-light-beige .sec4-title-dark,.sec4-light-beige .sec4-title-color{font-size:clamp(29px,9vw,43px)!important;line-height:1.04!important}.sec4-light-beige .sec4-desc{font-size:14px!important;line-height:1.6!important;margin-top:18px!important;max-width:none!important}.sec4-light-beige .sec4-carousel-viewport{margin:0!important;padding:0 20px 12px!important}.sec4-light-beige .sec4-slide{gap:14px!important}.sec4-light-beige .sec4-vertical-card{width:min(70vw,260px)!important;flex-basis:min(70vw,260px)!important;height:285px!important}.sec4-light-beige .sec4-card-img{height:285px!important}.honduras-split-section{padding:48px 0 55px!important}.honduras-split-section>div:first-child{margin-bottom:34px!important;padding:0 20px}.honduras-split-section .sec4-title-dark{font-size:clamp(29px,9vw,43px)!important;line-height:1.04!important}.honduras-zigzag-row,.honduras-zigzag-row.reverse{display:flex!important;flex-direction:column!important;gap:18px!important;margin-bottom:36px!important;padding:0 20px!important}.honduras-zigzag-row .honduras-frame-img{order:0!important;width:100%!important;min-height:0!important}.honduras-zigzag-row .honduras-info-box{order:1!important;width:100%!important;padding:24px!important}.honduras-zigzag-row .honduras-frame-img img{width:100%!important;height:230px!important;object-fit:cover!important}.honduras-city-title{font-size:29px!important;margin:9px 0!important}.honduras-city-desc{font-size:14px!important;line-height:1.65!important}.honduras-info-box>div{font-size:13px!important;display:flex;gap:7px;flex-wrap:wrap}.honduras-info-box>div a{white-space:nowrap}.id-social-link span{display:none}.id-social-link{width:40px;height:40px;justify-content:center;padding:0}}
.sec4-controls-row{display:flex!important;align-items:center;justify-content:space-between;gap:16px}.sec4-arrow-btn{min-width:42px;min-height:42px}.sec4-carousel-viewport{scroll-snap-type:x mandatory;overscroll-behavior-x:contain;touch-action:pan-x}.sec4-slide{width:max-content!important}.sec4-vertical-card{scroll-snap-align:start}
.sec4-slide .sec4-vertical-card,.sec4-slide .sec4-vertical-card:nth-child(n+2){display:block!important}
@media(max-width:800px){.id-brand-marquee{margin-inline:-20px;width:calc(100% + 40px);padding:10px 0 20px}.id-brand-track{gap:14px;animation-duration:26s}.id-brand-logo{min-width:140px!important;max-width:165px!important;height:68px!important;padding:10px 16px!important;border-radius:14px!important}.id-brand-img{max-height:34px!important;max-width:125px!important}.testimonials-light-section{padding:52px 20px!important}.testimonials-light-section .testi-inner{width:100%!important}.testimonials-light-section .testi-header{display:block!important;margin-bottom:25px}.testimonials-light-section .testi-big-title{font-size:clamp(31px,9vw,44px)!important;line-height:1.04!important}.testimonials-light-section .testi-lead{font-size:14px!important;line-height:1.65!important;margin-top:18px!important}.testimonials-light-section .testi-featured-row{display:flex!important;flex-direction:column!important;gap:0!important}.testimonials-light-section .testi-feat-img-wrap{min-height:0!important;height:245px!important;width:100%!important}.testimonials-light-section .testi-feat-img{height:245px!important;object-fit:cover!important}.testimonials-light-section .testi-feat-quote-wrap{padding:25px 20px!important}.testimonials-light-section .testi-quote-text{font-size:25px!important;line-height:1.16!important;margin:10px 0!important}.testimonials-light-section .testi-feat-quote-wrap p{font-size:14px!important}.testimonials-light-section .btn-hero-primary-blue{width:100%;text-align:center}.sec4-controls-row{padding:14px 20px 0!important}.sec4-controls-row .sec4-square-dots{display:flex!important;gap:7px}.sec4-controls-row .sec4-sq-dot{width:8px;height:8px;border-radius:50%;background:#94a3b8}.sec4-controls-row .sec4-sq-dot.active{background:#0284c7;transform:scale(1.25)}}
/* Important declarations in this layer also override legacy button effects. */
@layer id-accessibility {
 @media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 }
}

/* ==========================================================================
   SECCIÓN PRESENCIA EN TODA HONDURAS (OPCIÓN A - ELEGANTE & MODERNA)
   ========================================================================== */
.honduras-split-section {
    background: #070e1c !important;
    color: #f8fafc !important;
    padding: 90px 5% 90px !important;
    position: relative;
    box-sizing: border-box !important;
}

.honduras-header-center {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 65px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.honduras-main-title {
    font-size: clamp(30px, 4vw, 44px) !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    margin: 16px 0 12px 0 !important;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    line-height: 1.15 !important;
}

.honduras-main-title span {
    color: #0284c7 !important;
}

.honduras-main-lead {
    font-size: 16.5px !important;
    color: #64748b !important;
    line-height: 1.65 !important;
    margin: 0;
}

.honduras-zigzag-row {
    max-width: 1260px;
    margin: 0 auto 50px auto !important;
    display: grid !important;
    grid-template-columns: 1.15fr 1fr !important;
    gap: 48px !important;
    align-items: center !important;
}

.honduras-zigzag-row.reverse {
    grid-template-columns: 1fr 1.15fr !important;
}

.honduras-split-section .honduras-frame-img {
    position: relative;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    height: 380px !important;
    background: #0f172a;
}

.honduras-split-section .honduras-frame-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.6s cubic-bezier(0.2, 0.75, 0.25, 1) !important;
}

.honduras-split-section .honduras-frame-img:hover img {
    transform: scale(1.035) !important;
}

/* Corchetes interiores arquitectónicos sin recorte */
.honduras-split-section .corner-bracket-tl {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    width: 26px !important;
    height: 26px !important;
    border-top: 3px solid #38bdf8 !important;
    border-left: 3px solid #38bdf8 !important;
    border-right: none !important;
    border-bottom: none !important;
    z-index: 2 !important;
    pointer-events: none;
    box-shadow: -2px -2px 6px rgba(0,0,0,0.3);
}

.honduras-split-section .corner-bracket-br {
    position: absolute !important;
    bottom: 16px !important;
    right: 16px !important;
    width: 26px !important;
    height: 26px !important;
    border-bottom: 3px solid #38bdf8 !important;
    border-right: 3px solid #38bdf8 !important;
    border-top: none !important;
    border-left: none !important;
    z-index: 2 !important;
    pointer-events: none;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
}

/* Tarjeta elegante para el texto */
.honduras-split-section .honduras-info-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 40px !important;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.honduras-split-section .honduras-info-box:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08) !important;
    border-color: rgba(56, 189, 248, 0.5) !important;
}

.honduras-split-section .honduras-city-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: rgba(2, 132, 199, 0.08) !important;
    color: #0284c7 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    margin-bottom: 14px !important;
    width: fit-content !important;
    border: 1px solid rgba(2, 132, 199, 0.18) !important;
}

.honduras-split-section .honduras-city-title {
    font-size: 30px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.3px !important;
}

.honduras-split-section .honduras-city-desc {
    font-size: 15px !important;
    color: #475569 !important;
    line-height: 1.75 !important;
    margin: 0 0 24px 0 !important;
}

.honduras-actions {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    padding-top: 14px !important;
    border-top: 1px solid #f1f5f9 !important;
}

.honduras-btn-tel {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #0284c7 !important;
    color: #ffffff !important;
    font-weight: 750 !important;
    font-size: 13.5px !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25) !important;
}

.honduras-btn-tel:hover {
    background: #0369a1 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.35) !important;
}

.honduras-btn-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #0284c7 !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

.honduras-btn-link:hover {
    background: rgba(2, 132, 199, 0.08) !important;
    color: #0369a1 !important;
}

/* Reglas móviles para sección Honduras */
@media (max-width: 800px) {
    .honduras-split-section {
        padding: 55px 5% 50px !important;
    }
    .honduras-header-center {
        margin-bottom: 35px !important;
        padding: 0 10px !important;
    }
    .honduras-main-title {
        font-size: clamp(26px, 8vw, 36px) !important;
    }
    .honduras-zigzag-row,
    .honduras-zigzag-row.reverse {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        margin-bottom: 38px !important;
        padding: 0 !important;
    }
    .honduras-split-section .honduras-frame-img {
        order: 0 !important;
        width: 100% !important;
        height: 250px !important;
        border-radius: 16px !important;
    }
    .honduras-split-section .honduras-info-box {
        order: 1 !important;
        width: 100% !important;
        padding: 24px 20px !important;
        border-radius: 16px !important;
    }
    .honduras-split-section .honduras-city-title {
        font-size: 24px !important;
    }
    .honduras-split-section .honduras-city-desc {
        font-size: 14px !important;
        margin-bottom: 18px !important;
    }
    .honduras-actions {
        width: 100% !important;
        justify-content: space-between !important;
    }
}

/* ==========================================================================
   PÁGINA SOBRE NOSOTROS (ESTILOS MODERNOS Y DINÁMICOS)
   ========================================================================== */
.nosotros-hero {
    position: relative;
    background: linear-gradient(180deg, rgba(3, 23, 46, 0.76) 0%, rgba(3, 23, 46, 0.90) 65%, #03172e 100%), url('../images/nosotros_hero_bg.jpg') center/cover no-repeat;
    padding: 85px 0 75px;
    border-bottom: 1px solid var(--id-line, rgba(255,255,255,0.08));
    overflow: hidden;
}
.nosotros-hero-content {
    max-width: 960px;
}
.nosotros-hero-title {
    font-size: clamp(32px, 4.8vw, 56px);
    font-weight: 850;
    line-height: 1.12;
    margin: 22px 0 18px;
    color: #ffffff;
    letter-spacing: -0.02em;
}
.nosotros-gradient-text {
    background: linear-gradient(135deg, #38bdf8 0%, #7dd3fc 60%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nosotros-hero-lead {
    font-size: clamp(16px, 1.7vw, 18.5px);
    line-height: 1.75;
    color: #cbd5e1;
    max-width: 820px;
    margin-bottom: 34px;
}
.nosotros-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 45px;
}
.nosotros-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
}
.nosotros-stat-card {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 20px;
    padding: 24px 20px;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.nosotros-stat-card:hover {
    transform: translateY(-4px);
    border-color: #38bdf8;
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.22);
}
.nosotros-stat-num {
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 900;
    color: #38bdf8;
    line-height: 1.08;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}
.nosotros-stat-label {
    font-size: 14.5px;
    font-weight: 750;
    color: #f8fafc;
    margin-bottom: 4px;
}
.nosotros-stat-sub {
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.45;
}

/* Sección Historia y Legado */
.nosotros-story-section {
    padding: 95px 0 85px;
    background: #03172e;
}
.nosotros-story-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 55px;
    align-items: center;
}
.nosotros-story-lead {
    font-size: 16.5px;
    line-height: 1.8;
    color: #cbd5e1;
    margin-bottom: 28px;
}
.nosotros-timeline {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    margin-top: 25px;
}
.nosotros-timeline::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 30px;
    bottom: 30px;
    width: 2px;
    background: linear-gradient(180deg, #38bdf8, rgba(56, 189, 248, 0.1));
}
.nosotros-timeline-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    position: relative;
}
.nosotros-timeline-badge {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.9);
    border: 1.5px solid #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    font-weight: 850;
    color: #38bdf8;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.25);
    z-index: 1;
}
.nosotros-timeline-content {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 18px 22px;
    flex: 1;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.nosotros-timeline-content:hover {
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateX(4px);
}
.nosotros-timeline-content h4 {
    margin: 0 0 4px;
    font-size: 16.5px;
    color: #ffffff;
    font-weight: 750;
}
.nosotros-timeline-content p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #94a3b8;
}

/* Composición Visual de Imagen */
.nosotros-visual-stack {
    position: relative;
}
.nosotros-main-visual {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
    display: block;
}
.nosotros-floating-card {
    position: absolute;
    bottom: -25px;
    left: -25px;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 20px;
    padding: 16px 20px;
    backdrop-filter: blur(14px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 290px;
}
.nosotros-floating-img {
    width: 58px;
    height: 58px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}
.nosotros-floating-text h5 {
    margin: 0 0 3px;
    font-size: 14px;
    color: #ffffff;
    font-weight: 750;
}
.nosotros-floating-text p {
    margin: 0;
    font-size: 12px;
    color: #38bdf8;
    font-weight: 600;
}

/* Sección Tecnología e Infraestructura Hídrica */
.nosotros-tech-section {
    position: relative;
    padding: 100px 0 90px;
    background: linear-gradient(135deg, rgba(3, 23, 46, 0.93) 0%, rgba(6, 30, 58, 0.88) 50%, rgba(3, 23, 46, 0.96) 100%), url('../images/nosotros_water_tech.jpg') center/cover no-repeat;
    border-top: 1px solid rgba(56, 189, 248, 0.15);
    border-bottom: 1px solid rgba(56, 189, 248, 0.15);
}
.nosotros-tech-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    margin-top: 45px;
}
.nosotros-tech-card {
    background: rgba(15, 23, 42, 0.82);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 22px;
    padding: 32px 28px;
    backdrop-filter: blur(12px);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.nosotros-tech-card:hover {
    transform: translateY(-5px);
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.22);
}
.nosotros-tech-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
}
.nosotros-tech-card h3 {
    margin: 0 0 8px;
    font-size: 19px;
    color: #ffffff;
    font-weight: 750;
}
.nosotros-tech-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #cbd5e1;
}

/* Sección Misión, Visión y Pilares (Bento) */
.nosotros-bento-section {
    padding: 95px 0;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}
.nosotros-bento-section h2 {
    color: #0f172a !important;
}
.nosotros-bento-section p.nosotros-story-lead {
    color: #475569 !important;
}
.nosotros-bento-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 40px;
}
.nosotros-bento-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.nosotros-bento-card:hover {
    border-color: #0284c7;
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.12);
}
.nosotros-bento-card.highlight {
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
    border-color: rgba(2, 132, 199, 0.35);
}
.nosotros-bento-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #0284c7;
    margin-bottom: 14px;
}
.nosotros-bento-card h3 {
    font-size: 24px;
    color: #0f172a;
    margin: 0 0 14px;
    font-weight: 800;
}
.nosotros-bento-card p {
    font-size: 15px;
    line-height: 1.75;
    color: #475569;
    margin: 0;
}

/* Sección Presencia Nacional */
.nosotros-branches-section {
    padding: 85px 0 95px;
    background: #f1f5f9;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}
.nosotros-branches-section h2 {
    color: #0f172a !important;
}
.nosotros-branches-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 36px;
}
.nosotros-branch-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.nosotros-branch-card:hover {
    transform: translateY(-4px);
    border-color: #0284c7;
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.12);
}
.nosotros-branch-card h3 {
    font-size: 20px;
    color: #0f172a;
    margin: 8px 0 10px;
}
.nosotros-branch-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
    margin: 0 0 16px;
    flex: 1;
}
.nosotros-branch-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0284c7;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 12px;
}
.nosotros-branch-phone:hover {
    text-decoration: underline;
}

/* Call to Action Dinámico */
.nosotros-cta-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 28px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.06);
    position: relative;
    overflow: hidden;
}
.nosotros-cta-card::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(2, 132, 199, 0.06) 0%, transparent 60%);
    pointer-events: none;
}
.nosotros-cta-card h2 {
    font-size: clamp(28px, 3.8vw, 46px);
    color: #0f172a;
    margin: 16px 0;
    font-weight: 850;
}
.nosotros-cta-card p {
    font-size: 17px;
    line-height: 1.75;
    color: #475569;
    max-width: 680px;
    margin: 0 auto 35px;
}

/* Media Queries para Nosotros */
@media (max-width: 992px) {
    .nosotros-stats-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .nosotros-story-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .nosotros-floating-card {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: 15px;
        max-width: none;
    }
    .nosotros-main-visual {
        height: 360px;
    }
    .nosotros-tech-grid {
        grid-template-columns: 1fr;
    }
    .nosotros-bento-grid {
        grid-template-columns: 1fr;
    }
    .nosotros-branches-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 580px) {
    .nosotros-hero {
        padding: 55px 0 50px;
    }
    .nosotros-stats-strip {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .nosotros-stat-card {
        padding: 18px 16px;
    }
    .nosotros-timeline-badge {
        width: 46px;
        height: 46px;
        font-size: 12px;
    }
    .nosotros-timeline::before {
        left: 22px;
    }
    .nosotros-tech-card {
        flex-direction: column;
        padding: 24px 20px;
    }
    .nosotros-cta-card {
        padding: 40px 20px;
    }
}

/* ==========================================================================
   PÁGINA DE SERVICIOS (ESTILOS MODERNOS Y DINÁMICOS)
   ========================================================================== */
.servicios-hero {
    position: relative;
    background: linear-gradient(180deg, rgba(3, 23, 46, 0.74) 0%, rgba(3, 23, 46, 0.90) 65%, #03172e 100%), url('../images/servicios_hero_bg.jpg') center/cover no-repeat;
    padding: 85px 0 75px;
    border-bottom: 1px solid var(--id-line, rgba(255,255,255,0.08));
    overflow: hidden;
}
.servicios-hero-content {
    max-width: 950px;
}
.servicios-hero-title {
    font-size: clamp(32px, 4.8vw, 56px);
    font-weight: 850;
    line-height: 1.12;
    margin: 22px 0 18px;
    color: #ffffff;
    letter-spacing: -0.02em;
}
.servicios-hero-lead {
    font-size: clamp(16px, 1.7vw, 18.5px);
    line-height: 1.75;
    color: #cbd5e1;
    max-width: 820px;
    margin-bottom: 32px;
}
.servicios-category-pills {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 35px;
}
.servicios-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 999px;
    color: #e2e8f0;
    font-size: 13.5px;
    font-weight: 650;
    text-decoration: none;
    backdrop-filter: blur(8px);
    transition: all 0.25s ease;
}
.servicios-cat-pill:hover {
    background: rgba(56, 189, 248, 0.15);
    border-color: #38bdf8;
    color: #fff;
    transform: translateY(-2px);
}
.servicios-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

/* Barra de Filtros Interactivos */
.servicios-filter-container {
    padding: 40px 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.servicios-filter-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.servicios-filter-btn {
    padding: 11px 22px;
    background: #0b2039;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.servicios-filter-btn:hover {
    border-color: #38bdf8;
    color: #fff;
}
.servicios-filter-btn.active {
    background: #0284c7;
    border-color: #38bdf8;
    color: #fff;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

/* Grilla de Servicios Mejorada */
.servicios-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    padding: 30px 0 80px;
}
.servicio-card {
    background: #0b2039;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.servicio-card:hover {
    transform: translateY(-6px);
    border-color: rgba(56, 189, 248, 0.5);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}
.servicio-card-img-wrap {
    height: 240px;
    overflow: hidden;
    position: relative;
    display: block;
}
.servicio-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.servicio-card:hover .servicio-card-img-wrap img {
    transform: scale(1.05);
}
.servicio-card-tag-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.35);
    backdrop-filter: blur(8px);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: #38bdf8;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.servicio-card-body {
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.servicio-card-body h3 {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 12px;
    color: #ffffff;
}
.servicio-card-body h3 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.servicio-card-body h3 a:hover {
    color: #38bdf8;
}
.servicio-card-body p {
    font-size: 14px;
    line-height: 1.65;
    color: #cbd5e1;
    margin: 0 0 18px;
    flex: 1;
}
.servicio-feature-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.servicio-feature-tag {
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 11.5px;
    color: #7dd3fc;
    font-weight: 600;
}
.servicio-card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 16px;
    margin-top: auto;
}
.servicio-btn-quote {
    color: #38bdf8;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    transition: color 0.2s ease;
}
.servicio-btn-quote:hover {
    color: #bae6fd;
    text-decoration: underline;
}

/* Sección Proceso y Metodología (Con Background) */
.servicios-workflow-section {
    position: relative;
    padding: 100px 0 90px;
    background: linear-gradient(135deg, rgba(3, 23, 46, 0.94) 0%, rgba(6, 30, 58, 0.90) 50%, rgba(3, 23, 46, 0.96) 100%), url('../images/servicios_workflow_bg.jpg') center/cover no-repeat;
    border-top: 1px solid rgba(56, 189, 248, 0.15);
    border-bottom: 1px solid rgba(56, 189, 248, 0.15);
}
.servicios-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 48px;
}
.servicios-step-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 20px;
    padding: 28px 22px;
    backdrop-filter: blur(10px);
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.servicios-step-card:hover {
    transform: translateY(-5px);
    border-color: #38bdf8;
}
.servicios-step-num {
    display: inline-block;
    font-size: 14px;
    font-weight: 900;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 6px 12px;
    border-radius: 10px;
    margin-bottom: 16px;
    letter-spacing: 1px;
}
.servicios-step-card h3 {
    font-size: 18px;
    color: #ffffff;
    margin: 0 0 10px;
    font-weight: 750;
}
.servicios-step-card p {
    font-size: 13.5px;
    line-height: 1.65;
    color: #cbd5e1;
    margin: 0;
}

/* Sección Integración de Herramientas IA */
.servicios-tools-section {
    padding: 90px 0;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}
.servicios-tools-section h2 {
    color: #0f172a !important;
}
.servicios-tools-section p {
    color: #475569 !important;
}
.servicios-tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}
.servicios-tool-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 26px 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    transition: all 0.25s ease;
    text-decoration: none;
}
.servicios-tool-card:hover {
    border-color: #0284c7;
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.12);
    background: #ffffff;
}
.servicios-tool-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(2, 132, 199, 0.1);
    border: 1px solid rgba(2, 132, 199, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0284c7;
    margin-bottom: 16px;
}
.servicios-tool-card h4 {
    font-size: 16.5px;
    color: #0f172a;
    margin: 0 0 8px;
    font-weight: 750;
}
.servicios-tool-card p {
    font-size: 13px;
    line-height: 1.55;
    color: #64748b;
    margin: 0 0 14px;
    flex: 1;
}
.servicios-tool-link {
    font-size: 12.5px;
    font-weight: 750;
    color: #0284c7;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Media Queries para Servicios */
@media (max-width: 1024px) {
    .servicios-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .servicios-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .servicios-tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .servicios-hero {
        padding: 55px 0 50px;
    }
    .servicios-grid {
        grid-template-columns: 1fr;
    }
    .servicios-steps-grid {
        grid-template-columns: 1fr;
    }
    .servicios-tools-grid {
        grid-template-columns: 1fr;
    }
    .servicios-filter-container {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   PÁGINA DE PRODUCTOS Y CATÁLOGO (ESTILOS MODERNOS Y DINÁMICOS)
   ========================================================================== */
.productos-hero {
    position: relative;
    background: linear-gradient(180deg, rgba(3, 23, 46, 0.74) 0%, rgba(3, 23, 46, 0.90) 65%, #03172e 100%), url('../images/productos_hero_bg.jpg') center/cover no-repeat;
    padding: 85px 0 75px;
    border-bottom: 1px solid var(--id-line, rgba(255,255,255,0.08));
    overflow: hidden;
}
.productos-hero-content {
    max-width: 950px;
}
.productos-hero-title {
    font-size: clamp(32px, 4.8vw, 56px);
    font-weight: 850;
    line-height: 1.12;
    margin: 22px 0 18px;
    color: #ffffff;
    letter-spacing: -0.02em;
}
.productos-hero-lead {
    font-size: clamp(16px, 1.7vw, 18.5px);
    line-height: 1.75;
    color: #cbd5e1;
    max-width: 820px;
    margin-bottom: 30px;
}
.productos-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 45px;
}
.productos-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
}
.productos-stat-card {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 20px;
    padding: 22px 18px;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.productos-stat-card:hover {
    transform: translateY(-4px);
    border-color: #38bdf8;
}
.productos-stat-num {
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 900;
    color: #38bdf8;
    line-height: 1.1;
    margin-bottom: 4px;
}
.productos-stat-label {
    font-size: 14px;
    font-weight: 750;
    color: #f8fafc;
    margin-bottom: 3px;
}
.productos-stat-sub {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.4;
}

/* Categorías Destacadas (Spotlight Grid) */
.productos-categories-section {
    padding: 70px 0 20px;
}
.productos-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 32px;
}
.productos-cat-card {
    background: #0b2039;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 24px 20px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.productos-cat-card:hover {
    transform: translateY(-5px);
    border-color: #38bdf8;
    background: rgba(14, 46, 80, 0.55);
}
.productos-cat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    margin-bottom: 16px;
}
.productos-cat-card h3 {
    font-size: 17.5px;
    color: #ffffff;
    margin: 0 0 8px;
    font-weight: 750;
}
.productos-cat-card p {
    font-size: 13px;
    line-height: 1.55;
    color: #94a3b8;
    margin: 0 0 14px;
    flex: 1;
}
.productos-cat-link {
    font-size: 12.5px;
    color: #38bdf8;
    font-weight: 750;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Chips de Marcas y Filtros */
.productos-brand-chips {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: rgba(11, 35, 62, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 14px;
}
.productos-chip-label {
    font-size: 13px;
    font-weight: 750;
    color: #94a3b8;
    margin-right: 4px;
}
.productos-chip {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.productos-chip:hover {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    transform: translateY(-2px);
}
.productos-chip.active {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
}

/* Sección Garantía y Almacén de Repuestos */
.productos-warranty-section {
    position: relative;
    padding: 100px 0 90px;
    background: linear-gradient(135deg, rgba(3, 23, 46, 0.94) 0%, rgba(6, 30, 58, 0.90) 50%, rgba(3, 23, 46, 0.96) 100%), url('../images/productos_warranty_bg.jpg') center/cover no-repeat;
    border-top: 1px solid rgba(56, 189, 248, 0.15);
    border-bottom: 1px solid rgba(56, 189, 248, 0.15);
}
.productos-warranty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 45px;
}
.productos-warranty-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 22px;
    padding: 32px 26px;
    backdrop-filter: blur(12px);
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.productos-warranty-card:hover {
    transform: translateY(-5px);
    border-color: #38bdf8;
}
.productos-warranty-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    margin-bottom: 20px;
}
.productos-warranty-card h3 {
    font-size: 20px;
    color: #ffffff;
    margin: 0 0 10px;
    font-weight: 750;
}
.productos-warranty-card p {
    font-size: 14px;
    line-height: 1.65;
    color: #cbd5e1;
    margin: 0;
}

/* Responsive para Productos */
@media (max-width: 1024px) {
    .productos-stats-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .productos-cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .productos-warranty-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .productos-hero {
        padding: 55px 0 50px;
    }
    .productos-stats-strip {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .productos-cat-grid {
        grid-template-columns: 1fr;
    }
    .productos-brand-chips {
        padding: 12px;
    }
}
/* ==========================================================================
   ENRICHED PRODUCT DETAIL SHEET STYLES (producto-*.html)
   ========================================================================== */
.bh-prod-sheet-container {
    padding-top: 30px;
    padding-bottom: 80px;
}

.bh-sheet-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 24px;
}

.bh-sheet-breadcrumb a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.bh-sheet-breadcrumb a:hover {
    color: #38bdf8;
}

.bh-bc-sep {
    color: #475569;
}

.bh-bc-current {
    color: #f1f5f9;
    font-weight: 600;
}

.bh-prod-sheet-panel {
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 28px;
    padding: 44px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
}

.bh-prod-sheet-grid {
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 48px;
    align-items: start;
}

/* Left Column: Media & Trust */
.bh-sheet-media-col {
    position: sticky;
    top: 100px;
}

.bh-sheet-img-wrap {
    position: relative;
    background: #ffffff;
    border-radius: 22px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.bh-sheet-seal-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(3, 105, 161, 0.95);
    color: #ffffff;
    font-size: 11px;
    font-weight: 750;
    padding: 6px 12px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    z-index: 2;
}

.bh-sheet-img-link {
    display: block;
    cursor: zoom-in;
}

.bh-sheet-main-img {
    width: 100%;
    height: 380px;
    object-fit: contain;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.bh-sheet-img-link:hover .bh-sheet-main-img {
    transform: scale(1.05);
}

.bh-sheet-img-caption-box {
    margin-top: 14px;
    padding: 0 6px;
}

.bh-sheet-img-caption-box .id-caption {
    margin: 0 0 6px 0;
    line-height: 1.5;
}

.bh-sheet-trust-box {
    margin-top: 24px;
    background: rgba(11, 32, 57, 0.75);
    border: 1px solid rgba(56, 189, 248, 0.18);
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bh-sheet-trust-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.bh-sheet-trust-item svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.bh-sheet-trust-item strong {
    color: #ffffff;
    display: block;
    font-size: 13.5px;
    margin-bottom: 2px;
}

.bh-sheet-trust-item p {
    margin: 0;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.5;
}

/* Right Column: Information */
.bh-sheet-info-col {
    min-width: 0;
}

.bh-sheet-pill-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.bh-sheet-brand-pill {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    font-size: 11.5px;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.bh-sheet-model-pill {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 50px;
}

.bh-sheet-title {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.16;
    margin: 0 0 20px;
    letter-spacing: -0.5px;
}

.bh-sheet-prose {
    color: #cbd5e1;
    font-size: 15.5px;
    line-height: 1.85;
    margin-bottom: 28px;
}

.bh-sheet-prose p {
    margin: 0;
}

/* Section Box */
.bh-prod-section {
    margin-bottom: 28px;
    background: rgba(11, 32, 57, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 24px 28px;
}

.bh-sec-heading {
    font-size: 17px;
    font-weight: 750;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bh-use-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.bh-use-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1.65;
}

.bh-use-icon {
    flex-shrink: 0;
    margin-top: 3px;
    color: #38bdf8;
}

.bh-benefit-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.bh-benefit-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1.65;
}

.bh-benefit-icon {
    flex-shrink: 0;
    margin-top: 3px;
    color: #38bdf8;
}

/* Specs Table */
.bh-enhanced-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    color: #e2e8f0;
}

.bh-enhanced-specs-table tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.bh-enhanced-specs-table th {
    text-align: left;
    width: 38%;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: #7dd3fc;
    font-weight: 600;
}

.bh-enhanced-specs-table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: #f1f5f9;
}

/* Engineering Tip Card */
.bh-prod-tip-card {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.18), rgba(3, 105, 161, 0.06));
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 18px;
    padding: 22px 26px;
    margin-bottom: 28px;
}

.bh-tip-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #38bdf8;
    font-weight: 750;
    font-size: 14.5px;
    margin-bottom: 8px;
}

.bh-prod-tip-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: #cbd5e1;
}

/* Digital Tool Banner */
.bh-prod-tool-banner {
    background: linear-gradient(135deg, #072545, #0b345f);
    border: 1px solid rgba(56, 189, 248, 0.45);
    border-radius: 18px;
    padding: 22px 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.bh-tool-badge {
    font-size: 10.5px;
    letter-spacing: 1.2px;
    color: #38bdf8;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}

.bh-tool-text h4 {
    margin: 0 0 6px;
    font-size: 17px;
    color: #ffffff;
    font-weight: 750;
}

.bh-tool-text p {
    margin: 0;
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.5;
}

.bh-tool-btn {
    background: #0284c7;
    color: #ffffff;
    padding: 11px 22px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.bh-tool-btn:hover {
    background: #0369a1;
    transform: translateY(-2px);
}

/* CTA Conversion Box */
.bh-sheet-cta-box {
    background: rgba(3, 23, 46, 0.95);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 20px;
    padding: 28px 32px;
    margin-top: 36px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.bh-sheet-cta-text strong {
    font-size: 16.5px;
    color: #ffffff;
    display: block;
    margin-bottom: 6px;
}

.bh-sheet-cta-text p {
    font-size: 13.5px;
    color: #94a3b8;
    margin: 0 0 20px;
    line-height: 1.6;
}

.bh-sheet-cta-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.bh-sheet-btn-main {
    display: inline-block;
    padding: 15px 28px;
    font-size: 13.5px;
    font-weight: 800;
    border-radius: 50px;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.35);
}

.bh-sheet-btn-wa {
    background: #15803d;
    color: #ffffff;
    padding: 15px 26px;
    border-radius: 50px;
    font-weight: 750;
    font-size: 13.5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 6px 20px rgba(21, 128, 61, 0.3);
}

.bh-sheet-btn-wa:hover {
    background: #16a34a;
    transform: translateY(-2px);
}

/* Related Products Section */
.bh-sheet-related {
    margin-top: 75px;
    padding-top: 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bh-sheet-related-head {
    margin-bottom: 30px;
}

.bh-sheet-related-head h2 {
    font-size: clamp(22px, 2.6vw, 32px);
    color: #ffffff;
    margin-top: 8px;
    font-weight: 800;
}

/* Responsive Product Sheet */
@media (max-width: 1024px) {
    .bh-prod-sheet-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .bh-sheet-media-col {
        position: static;
        max-width: 540px;
        margin: 0 auto;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .bh-prod-sheet-panel {
        padding: 22px;
        border-radius: 18px;
    }
    .bh-prod-sheet-container {
        padding-top: 15px;
    }
    .bh-sheet-main-img {
        height: 280px;
    }
    .bh-prod-section {
        padding: 18px;
    }
    .bh-prod-tool-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .bh-sheet-cta-box {
        padding: 20px;
    }
    .bh-sheet-cta-buttons {
        flex-direction: column;
        width: 100%;
    }
    .bh-sheet-btn-main,
    .bh-sheet-btn-wa {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* ==========================================================================
   MODERN PROYECTOS SHOWCASE (/proyectos.html)
   ========================================================================== */
.proyectos-hero {
    position: relative;
    padding: 90px 0 60px;
    background: linear-gradient(180deg, rgba(3, 23, 46, 0.82) 0%, rgba(3, 23, 46, 0.94) 70%, #03172e 100%),
                url('../images/proyectos_hero_bg.jpg') center/cover no-repeat;
    border-bottom: 1px solid rgba(56, 189, 248, 0.2);
    overflow: hidden;
}

.proyectos-hero-content {
    max-width: 900px;
    margin-bottom: 50px;
}

.proyectos-hero-title {
    font-size: clamp(34px, 4.5vw, 56px);
    line-height: 1.15;
    font-weight: 850;
    color: #ffffff;
    margin: 20px 0;
    letter-spacing: -0.02em;
}

.proyectos-hero-lead {
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 1.8;
    color: #cbd5e1;
    max-width: 820px;
    margin-bottom: 30px;
}

.proyectos-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.proyectos-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    background: rgba(11, 35, 62, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 20px;
    padding: 26px 30px;
}

.proyectos-stat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 15px;
    transition: transform 0.2s ease;
}

.proyectos-stat-card:last-child {
    border-right: none;
    padding-right: 0;
}

.proyectos-stat-card:hover {
    transform: translateY(-2px);
}

.proyectos-stat-num {
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 900;
    color: #38bdf8;
    line-height: 1;
    letter-spacing: -0.02em;
}

.proyectos-stat-label {
    font-size: 14px;
    font-weight: 750;
    color: #f1f5f9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.proyectos-stat-sub {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.4;
}

.proyectos-categories-section {
    padding: 60px 0 20px;
    background: #03172e;
}

.proyectos-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 36px;
}

.proyectos-cat-card {
    display: flex;
    flex-direction: column;
    background: rgba(11, 32, 57, 0.75);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 18px;
    padding: 24px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.proyectos-cat-card:hover {
    background: rgba(11, 35, 62, 0.95);
    border-color: #38bdf8;
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.proyectos-cat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(56, 189, 248, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    margin-bottom: 16px;
    transition: background 0.3s ease;
}

.proyectos-cat-card:hover .proyectos-cat-icon {
    background: #0284c7;
    color: #ffffff;
}

.proyectos-cat-card h3 {
    font-size: 18px;
    font-weight: 750;
    color: #ffffff;
    margin: 0 0 8px;
}

.proyectos-cat-card p {
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0 0 16px;
    flex-grow: 1;
}

.proyectos-cat-link {
    font-size: 13px;
    font-weight: 750;
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

.proyectos-card-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.proyectos-loc-badge {
    font-size: 11px;
    font-weight: 700;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.08);
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ==========================================================================
   ENRICHED PROJECT DETAIL SHEET STYLES (proyecto-*.html)
   ========================================================================== */
.bh-proj-sheet-container {
    padding-top: 30px;
    padding-bottom: 80px;
}

.bh-proj-header {
    margin-bottom: 30px;
}

.bh-proj-tag-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.bh-proj-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 30px;
    font-size: 12px;
    font-weight: 800;
    color: #38bdf8;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.bh-proj-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    font-size: 12px;
    color: #e2e8f0;
}

.bh-proj-title {
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 850;
    line-height: 1.15;
    color: #ffffff;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.bh-proj-lead {
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.8;
    color: #cbd5e1;
    max-width: 960px;
    margin-bottom: 24px;
}

.bh-proj-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

/* Media Showcase */
.bh-proj-media-showcase {
    margin-bottom: 45px;
}

.bh-proj-main-image-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(56, 189, 248, 0.25);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    max-height: 600px;
    background: #061120;
}

.bh-proj-main-image-wrap img {
    width: 100%;
    height: 100%;
    max-height: 600px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.bh-proj-main-image-wrap:hover img {
    transform: scale(1.02);
}

.bh-proj-image-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(3, 23, 46, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #e2e8f0;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Video Showcase */
.bh-proj-video-container {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.bh-proj-video-card {
    background: rgba(11, 35, 62, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 16px;
    overflow: hidden;
    padding: 16px;
}

.bh-proj-video-card video {
    width: 100%;
    max-height: 480px;
    border-radius: 12px;
    background: #000;
    display: block;
}

.bh-proj-video-card figcaption {
    color: #cbd5e1;
    font-size: 13px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Gallery Grid */
.bh-proj-gallery-section {
    margin-top: 30px;
}

.bh-proj-gallery-heading {
    font-size: 20px;
    font-weight: 750;
    color: #ffffff;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bh-proj-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.bh-proj-gallery-item {
    display: block;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #061120;
    height: 220px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.bh-proj-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.bh-proj-gallery-item:hover {
    transform: translateY(-3px);
    border-color: #38bdf8;
}

.bh-proj-gallery-item:hover img {
    transform: scale(1.05);
}

.bh-proj-gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(3, 23, 46, 0.8) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    padding: 12px;
}

.bh-proj-gallery-item:hover .bh-proj-gallery-overlay {
    opacity: 1;
}

.bh-proj-gallery-icon {
    color: #38bdf8;
    background: rgba(3, 23, 46, 0.8);
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
}

/* Two-Column Engineering Details */
.bh-proj-content-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 36px;
    align-items: start;
    margin-bottom: 50px;
}

.bh-proj-main-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bh-proj-block {
    background: rgba(11, 35, 62, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 18px;
    padding: 28px;
}

.bh-proj-block-title {
    font-size: 19px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 12px;
}

.bh-proj-block p {
    font-size: 15px;
    line-height: 1.8;
    color: #cbd5e1;
    margin: 0 0 14px;
}

.bh-proj-block p:last-child {
    margin-bottom: 0;
}

.bh-proj-brand-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.bh-proj-brand-tag {
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #7dd3fc;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

/* Specs Card / Sidebar */
.bh-proj-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bh-proj-specs-card {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.bh-proj-specs-title {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.2);
    padding-bottom: 12px;
}

.bh-proj-specs-table {
    width: 100%;
    border-collapse: collapse;
}

.bh-proj-specs-table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.bh-proj-specs-table tr:last-child {
    border-bottom: none;
}

.bh-proj-specs-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 750;
    color: #7dd3fc;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 0;
    width: 40%;
    vertical-align: top;
}

.bh-proj-specs-table td {
    text-align: left;
    font-size: 13px;
    color: #f1f5f9;
    padding: 10px 0;
    vertical-align: top;
}

/* Sidebar Contact Card */
.bh-proj-contact-card {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.25) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 18px;
    padding: 24px;
}

.bh-proj-contact-card h4 {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px;
}

.bh-proj-contact-card p {
    font-size: 13px;
    line-height: 1.6;
    color: #cbd5e1;
    margin: 0 0 16px;
}

.bh-proj-contact-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Highlights 3-Card Grid */
.bh-proj-highlights-section {
    margin-bottom: 55px;
}

.bh-proj-highlights-heading {
    text-align: center;
    margin-bottom: 30px;
}

.bh-proj-highlights-heading h3 {
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 850;
    color: #ffffff;
    margin: 10px 0;
}

.bh-proj-highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.bh-proj-highlight-card {
    background: rgba(11, 35, 62, 0.65);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 18px;
    padding: 24px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.bh-proj-highlight-card:hover {
    transform: translateY(-4px);
    border-color: #38bdf8;
}

.bh-proj-highlight-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.bh-proj-highlight-card h4 {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px;
}

.bh-proj-highlight-card p {
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* Related Projects Section */
.bh-proj-related-section {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bh-proj-related-title {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 24px;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
    .proyectos-cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .proyectos-stats-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .proyectos-stat-card:nth-child(2) {
        border-right: none;
    }
    .bh-proj-content-layout {
        grid-template-columns: 1fr;
    }
    .bh-proj-sidebar {
        position: static;
    }
    .bh-proj-highlights-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .proyectos-hero {
        padding: 50px 0 35px;
    }
    .proyectos-cat-grid {
        grid-template-columns: 1fr;
    }
    .proyectos-stats-strip {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    .proyectos-stat-card {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 12px;
    }
    .proyectos-stat-card:last-child {
        border-bottom: none;
    }
    .bh-proj-header-actions {
        flex-direction: column;
        width: 100%;
    }
    .bh-proj-header-actions a {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .bh-proj-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   MODERN DISEÑA CON IA (/disena-con-ia.html) & HERRAMIENTAS
   ========================================================================== */
.disena-hero {
    position: relative;
    padding: 90px 0 60px;
    background: linear-gradient(180deg, rgba(3, 23, 46, 0.84) 0%, rgba(3, 23, 46, 0.94) 70%, #03172e 100%),
                url('../images/disena_hero_bg.jpg') center/cover no-repeat;
    border-bottom: 1px solid rgba(56, 189, 248, 0.2);
    overflow: hidden;
}

.disena-hero-content {
    max-width: 920px;
    margin-bottom: 50px;
}

.disena-hero-title {
    font-size: clamp(34px, 4.5vw, 56px);
    line-height: 1.15;
    font-weight: 850;
    color: #ffffff;
    margin: 20px 0;
    letter-spacing: -0.02em;
}

.disena-hero-lead {
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 1.8;
    color: #cbd5e1;
    max-width: 840px;
    margin-bottom: 30px;
}

.disena-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.disena-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    background: rgba(11, 35, 62, 0.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 20px;
    padding: 26px 30px;
}

.disena-stat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 15px;
    transition: transform 0.2s ease;
}

.disena-stat-card:last-child {
    border-right: none;
    padding-right: 0;
}

.disena-stat-card:hover {
    transform: translateY(-2px);
}

.disena-stat-num {
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 900;
    color: #38bdf8;
    line-height: 1;
    letter-spacing: -0.02em;
}

.disena-stat-label {
    font-size: 14px;
    font-weight: 750;
    color: #f1f5f9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.disena-stat-sub {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.4;
}

/* Tools Grid Showcase */
.disena-tools-section {
    padding: 70px 0 50px;
    background: #03172e;
}

.disena-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 40px;
}

.disena-tool-card {
    background: linear-gradient(145deg, rgba(11, 35, 62, 0.8) 0%, rgba(6, 24, 45, 0.95) 100%);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 24px;
    padding: 34px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.disena-tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0284c7, #38bdf8, #818cf8);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.disena-tool-card:hover {
    transform: translateY(-6px);
    border-color: #38bdf8;
    box-shadow: 0 20px 45px rgba(2, 132, 199, 0.2);
}

.disena-tool-card:hover::before {
    opacity: 1;
}

.disena-tool-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px;
}

.disena-tool-icon-wrap {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 16px;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    transition: all 0.3s ease;
}

.disena-tool-card:hover .disena-tool-icon-wrap {
    background: #0284c7;
    color: #ffffff;
    transform: scale(1.05);
}

.disena-tool-title-wrap {
    flex-grow: 1;
}

.disena-tool-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #38bdf8;
    display: block;
    margin-bottom: 6px;
}

.disena-tool-title {
    font-size: clamp(20px, 2.2vw, 24px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin: 0;
}

.disena-tool-desc {
    font-size: 14px;
    line-height: 1.75;
    color: #cbd5e1;
    margin: 0 0 22px;
    flex-grow: 1;
}

.disena-tool-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}

.disena-tool-pill {
    font-size: 12px;
    font-weight: 650;
    color: #7dd3fc;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 4px 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.disena-tool-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Workflow 3-Steps Section */
.disena-workflow-section {
    padding: 70px 0;
    background: linear-gradient(180deg, #03172e 0%, #06182e 100%);
    border-top: 1px solid rgba(56, 189, 248, 0.15);
    border-bottom: 1px solid rgba(56, 189, 248, 0.15);
}

.disena-workflow-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 50px;
}

.disena-workflow-heading h2 {
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 850;
    color: #ffffff;
    margin: 12px 0;
}

.disena-workflow-heading p {
    font-size: 15px;
    color: #94a3b8;
    margin: 0;
    line-height: 1.7;
}

.disena-workflow-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.disena-workflow-card {
    background: rgba(11, 35, 62, 0.65);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    transition: transform 0.3s ease;
}

.disena-workflow-card:hover {
    transform: translateY(-4px);
    border-color: #38bdf8;
}

.disena-workflow-num {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0284c7, #38bdf8);
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.disena-workflow-card h3 {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 10px;
}

.disena-workflow-card p {
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0;
}

/* FAQ Section */
.disena-faq-section {
    padding: 70px 0;
    background: #03172e;
}

.disena-faq-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
}

.disena-faq-heading h2 {
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 850;
    color: #ffffff;
    margin: 12px 0;
}

.disena-faq-list {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.disena-faq-item {
    background: rgba(11, 35, 62, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.disena-faq-item[open] {
    border-color: #38bdf8;
    background: rgba(11, 35, 62, 0.85);
}

.disena-faq-item summary {
    padding: 20px 24px;
    font-size: 16px;
    font-weight: 750;
    color: #ffffff;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.disena-faq-item summary::-webkit-details-marker {
    display: none;
}

.disena-faq-item summary::after {
    content: '+';
    font-size: 20px;
    font-weight: 400;
    color: #38bdf8;
    transition: transform 0.2s ease;
}

.disena-faq-item[open] summary::after {
    content: '−';
}

.disena-faq-item p {
    padding: 0 24px 22px;
    font-size: 14px;
    line-height: 1.8;
    color: #cbd5e1;
    margin: 0;
}

/* Individual Tool Sheet Styles (herramienta-*.html) */
.bh-tool-sheet-container {
    padding-top: 30px;
    padding-bottom: 80px;
}

.bh-tool-sheet-header {
    margin-bottom: 28px;
}

.bh-tool-frame-box {
    background: #06182d;
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    margin-bottom: 36px;
}

.bh-tool-frame-toolbar {
    background: rgba(11, 35, 62, 0.95);
    border-bottom: 1px solid rgba(56, 189, 248, 0.2);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.bh-tool-frame-title {
    font-size: 14px;
    font-weight: 750;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bh-tool-frame-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bh-tool-frame-btn {
    font-size: 12px;
    font-weight: 700;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.bh-tool-frame-btn:hover {
    color: #ffffff;
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
}

.bh-tool-frame-iframe {
    width: 100%;
    height: 880px;
    border: 0;
    display: block;
    background: #ffffff;
}

.bh-tool-advisory-strip {
    background: rgba(11, 35, 62, 0.65);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 18px;
    padding: 26px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.bh-tool-advisory-info {
    max-width: 680px;
}

.bh-tool-advisory-info h4 {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px;
}

.bh-tool-advisory-info p {
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
    .disena-tools-grid {
        grid-template-columns: 1fr;
    }
    .disena-stats-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .disena-stat-card:nth-child(2) {
        border-right: none;
    }
    .disena-workflow-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .disena-hero {
        padding: 50px 0 35px;
    }
    .disena-stats-strip {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    .disena-stat-card {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 12px;
    }
    .disena-stat-card:last-child {
        border-bottom: none;
    }
    .disena-tool-card {
        padding: 24px;
    }
    .bh-tool-frame-iframe {
        height: 720px;
    }
}

/* ==========================================================================
   NATIVE AI POOL DESIGNER STUDIO (herramienta-disenador-piscinas.html)
   ========================================================================== */
.bh-pool-studio-wrap {
    margin-bottom: 40px;
}

.bh-pool-studio-grid {
    display: grid;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    width: 100%;
    max-width: 100%;
}

.bh-studio-panel,
.bh-viz-panel {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.bh-studio-panel {
    background: #06182d;
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.bh-studio-step {
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bh-studio-step:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.bh-step-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.bh-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0284c7, #38bdf8);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.bh-step-title {
    font-size: 15px;
    font-weight: 750;
    color: #ffffff;
    margin: 0;
}

.bh-step-subtitle {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}

/* Shape Grid */
.bh-shape-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.bh-shape-btn {
    background: rgba(11, 35, 62, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 12px;
    padding: 10px 8px;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    text-align: center;
}

.bh-shape-btn svg {
    width: 32px;
    height: 32px;
    stroke: #38bdf8;
    stroke-width: 1.8;
    fill: rgba(56, 189, 248, 0.1);
    transition: all 0.2s ease;
}

.bh-shape-btn:hover {
    border-color: #38bdf8;
    color: #ffffff;
    background: rgba(56, 189, 248, 0.12);
}

.bh-shape-btn.active {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.35);
}

.bh-shape-btn.active svg {
    stroke: #7dd3fc;
    fill: rgba(56, 189, 248, 0.35);
}

/* Dimension Controls */
.bh-dim-row {
    margin-bottom: 12px;
}

.bh-dim-row:last-child {
    margin-bottom: 0;
}

.bh-dim-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 13px;
    color: #cbd5e1;
    font-weight: 600;
}

.bh-dim-val-badge {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
    font-size: 12px;
    font-weight: 750;
    padding: 2px 8px;
    border-radius: 6px;
}

.bh-range-input {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.bh-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 8px #38bdf8;
    cursor: pointer;
    border: 2px solid #ffffff;
}

.bh-range-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 8px #38bdf8;
    cursor: pointer;
    border: 2px solid #ffffff;
}

/* Mini Metrics Strip */
.bh-metrics-mini-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    background: rgba(11, 35, 62, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 12px;
    padding: 12px;
    margin-top: 14px;
}

.bh-metric-mini-item {
    text-align: center;
}

.bh-metric-mini-label {
    font-size: 11px;
    color: #94a3b8;
    display: block;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bh-metric-mini-value {
    font-size: 14px;
    font-weight: 800;
    color: #38bdf8;
}

/* Finish Swatches */
.bh-finish-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.bh-finish-btn {
    background: rgba(11, 35, 62, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 10px;
    padding: 8px 10px;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    transition: all 0.2s ease;
}

.bh-finish-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.bh-finish-btn:hover {
    border-color: #38bdf8;
    color: #ffffff;
    background: rgba(56, 189, 248, 0.1);
}

.bh-finish-btn.active {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}

/* Form Inputs */
.bh-studio-select,
.bh-studio-textarea {
    width: 100%;
    background: rgba(11, 35, 62, 0.8);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 10px;
    padding: 10px 14px;
    color: #ffffff;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.bh-studio-select:focus,
.bh-studio-textarea:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.bh-studio-textarea {
    resize: vertical;
    min-height: 60px;
}

/* Equipment Checkboxes */
.bh-equip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.bh-equip-label {
    background: rgba(11, 35, 62, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.15);
    border-radius: 10px;
    padding: 8px 10px;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    transition: all 0.2s ease;
}

.bh-equip-label input {
    accent-color: #38bdf8;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.bh-equip-label:hover {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    color: #ffffff;
}

.bh-equip-label.active {
    background: rgba(56, 189, 248, 0.15);
    border-color: #38bdf8;
    color: #ffffff;
}

/* Generate CTA */
.btn-generate-ai {
    width: 100%;
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 50%, #06b6d4 100%);
    border: none;
    border-radius: 14px;
    padding: 16px 20px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.45);
    transition: all 0.25s ease;
    margin-top: 20px;
}

.btn-generate-ai:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(56, 189, 248, 0.55);
}

.btn-generate-ai:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Visualization Panel */
.bh-viz-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bh-canvas-box {
    background: #06182d;
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    position: relative;
}

.bh-canvas-toolbar {
    background: rgba(11, 35, 62, 0.95);
    border-bottom: 1px solid rgba(56, 189, 248, 0.2);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.bh-canvas-toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bh-canvas-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 12px;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.bh-canvas-btn:hover {
    color: #ffffff;
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
}

.bh-canvas-btn.active {
    background: rgba(56, 189, 248, 0.25);
    border-color: #38bdf8;
    color: #38bdf8;
}

.bh-canvas-viewport {
    position: relative;
    width: 100%;
    height: 420px;
    background: #020c1b;
    overflow: hidden;
}

.bh-canvas-viewport canvas,
#pool-canvas,
#hydraulic-canvas,
#water-canvas,
#pool-chem-canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

.bh-canvas-hud {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(6, 24, 45, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 10px;
    padding: 10px 14px;
    pointer-events: none;
}

.bh-canvas-hud-title {
    font-size: 11px;
    font-weight: 800;
    color: #38bdf8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}

.bh-canvas-hud-metric {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    gap: 8px;
}

.bh-canvas-hud-metric span {
    color: #94a3b8;
    font-weight: 500;
}

/* AI Output Box */
.bh-ai-output-box {
    background: #06182d;
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.bh-ai-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.2);
}

.bh-ai-badge-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bh-gemini-badge {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(168, 85, 247, 0.2));
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: #d8b4fe;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 750;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bh-ai-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
}

.bh-ai-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
}

.bh-ai-status-dot.pulsing {
    background: #eab308;
    box-shadow: 0 0 8px #eab308;
    animation: bhPulse 1.5s infinite;
}

@keyframes bhPulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
}

/* AI Cards Grid */
.bh-ai-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}

.bh-ai-card {
    background: rgba(11, 35, 62, 0.65);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 14px;
    padding: 18px;
    transition: all 0.2s ease;
}

.bh-ai-card:hover {
    border-color: rgba(56, 189, 248, 0.4);
    background: rgba(11, 35, 62, 0.85);
}

.bh-ai-card-title {
    font-size: 14px;
    font-weight: 750;
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bh-ai-card-content {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
}

.bh-ai-card-content ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.bh-ai-card-content li {
    margin-bottom: 4px;
}

.bh-ai-card-content strong {
    color: #ffffff;
}

.bh-ai-actions-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Sticky Mobile Quick-Nav for Interactive Tool Sections */
.bh-mobile-quick-nav {
    display: none;
}

@media (max-width: 991px) {
    .bh-mobile-quick-nav {
        display: flex;
        position: sticky;
        top: 72px;
        z-index: 95;
        background: rgba(15, 23, 42, 0.94);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        padding: 6px;
        margin: 0 0 16px 0;
        gap: 6px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }
    .bh-mob-nav-btn {
        flex: 1;
        text-align: center;
        padding: 8px 6px;
        font-size: 11px;
        font-weight: 600;
        color: #cbd5e1;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        text-decoration: none;
        transition: all 0.2s ease;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }
    .bh-mob-nav-btn:hover, .bh-mob-nav-btn:active, .bh-mob-nav-btn:focus {
        background: #0ea5e9;
        color: #ffffff;
        border-color: #0ea5e9;
    }
}

/* ==========================================================================
   RESPONSIVE OVERHAUL FOR DIGITAL TOOLS
   ========================================================================== */
@media (max-width: 1100px) {
    .bh-pool-studio-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .bh-ai-cards-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .bh-tool-sheet-container {
        padding-top: 16px;
        padding-bottom: 40px;
    }
    .bh-tool-sheet-header {
        margin-bottom: 16px;
    }
    .bh-proj-title {
        font-size: 24px !important;
        line-height: 1.25;
    }
    .bh-proj-lead {
        font-size: 13px !important;
        line-height: 1.55;
    }
    .bh-proj-tag-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .bh-proj-pill,
    .bh-proj-cat-badge {
        font-size: 11px;
        padding: 4px 8px;
    }
    .bh-studio-panel {
        padding: 16px 14px;
        border-radius: 16px;
    }
    .bh-step-header {
        margin-bottom: 10px;
    }
    .bh-step-num {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }
    .bh-step-title {
        font-size: 14px;
    }
    .bh-step-subtitle {
        font-size: 11px;
    }
    .bh-shape-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .bh-shape-btn {
        padding: 8px 6px;
        font-size: 11px;
        min-height: 58px;
    }
    .bh-shape-btn svg {
        width: 26px;
        height: 26px;
    }
    .bh-finish-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .bh-finish-btn {
        padding: 6px 8px;
        font-size: 11px;
    }
    .bh-finish-dot {
        width: 16px;
        height: 16px;
    }
    .bh-equip-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 6px;
    }
    .bh-equip-label {
        padding: 6px 8px;
        font-size: 11px;
    }
    .bh-metrics-mini-strip {
        grid-template-columns: repeat(3, 1fr);
        padding: 8px 4px;
        gap: 4px;
    }
    .bh-metric-mini-label {
        font-size: 9px;
    }
    .bh-metric-mini-value {
        font-size: 12px;
    }
    .bh-dim-label-row {
        font-size: 12px;
        flex-wrap: wrap;
        gap: 4px;
    }
    .bh-dim-val-badge {
        font-size: 11px;
        padding: 1px 6px;
    }
    .btn-generate-ai {
        padding: 13px 16px;
        font-size: 13px;
        border-radius: 12px;
    }
    .bh-canvas-box {
        border-radius: 16px;
    }
    .bh-canvas-toolbar {
        padding: 10px 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .bh-canvas-toolbar-group {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 6px;
    }
    .bh-canvas-btn {
        padding: 5px 8px;
        font-size: 11px;
    }
    .bh-canvas-viewport {
        height: 280px;
    }
    .bh-canvas-hud {
        top: 6px;
        left: 6px;
        padding: 5px 8px;
        border-radius: 6px;
        max-width: 82%;
    }
    .bh-canvas-hud-title {
        font-size: 9px;
        letter-spacing: 0.4px;
        margin-bottom: 2px;
    }
    .bh-canvas-hud-metric {
        font-size: 10px;
        gap: 4px;
    }
    .bh-ai-output-box {
        padding: 16px 14px;
        border-radius: 16px;
    }
    .bh-ai-cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .bh-ai-card {
        padding: 14px;
        border-radius: 12px;
    }
    .bh-ai-card-title {
        font-size: 13px;
    }
    .bh-ai-card-content {
        font-size: 12px;
        line-height: 1.5;
    }
    .bh-ai-actions-strip {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .bh-ai-actions-strip .bh-tool-frame-btn,
    .bh-ai-actions-strip .btn-hero-white-pill,
    .bh-ai-actions-strip .btn-hero-primary-blue {
        width: 100%;
        text-align: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .bh-ai-actions-strip > div {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .bh-tool-advisory-strip {
        padding: 18px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .bh-tool-advisory-strip a {
        width: 100%;
        text-align: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .bh-tool-advisory-info h4 {
        font-size: 15px;
    }
    .bh-tool-advisory-info p {
        font-size: 12px;
    }
    .bh-prod-luxury-grid.id-card-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }
}

@media (max-width: 380px) {
    .bh-canvas-viewport {
        height: 250px;
    }
    .bh-metrics-mini-strip {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .bh-shape-grid {
        grid-template-columns: 1fr;
    }
    .bh-finish-grid {
        grid-template-columns: 1fr;
    }
}

/* Print Stylesheet for Project Sheet */
@media print {
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }
    .semper-main-header, .id-footer, .id-whatsapp, .bh-studio-panel, .bh-canvas-toolbar, .bh-ai-actions-strip, .bh-tool-advisory-strip {
        display: none !important;
    }
    .bh-canvas-box, .bh-ai-output-box {
        border: 1px solid #cccccc !important;
        background: #ffffff !important;
        color: #000000 !important;
        box-shadow: none !important;
    }
    .bh-ai-card {
        border: 1px solid #dddddd !important;
        background: #f8fafc !important;
        color: #1e293b !important;
    }
    .bh-ai-card-title {
        color: #0284c7 !important;
    }
}

/* ==========================================================================
   PÁGINAS DE CONTACTO & COTIZAR (DISEÑO UNIFICADO CON EL SISTEMA DEL SITIO)
   ========================================================================== */
.contacto-hero {
    position: relative;
    background: linear-gradient(180deg, rgba(3, 23, 46, 0.78) 0%, rgba(3, 23, 46, 0.92) 65%, #03172e 100%), url('../images/hero_tienda_pentair.jpg') center/cover no-repeat;
    padding: 85px 0 75px;
    border-bottom: 1px solid var(--id-line, rgba(255,255,255,0.08));
    overflow: hidden;
}

.cotizar-hero {
    position: relative;
    background: linear-gradient(180deg, rgba(3, 23, 46, 0.78) 0%, rgba(3, 23, 46, 0.92) 65%, #03172e 100%), url('../images/hero_piscina_concreto.jpg') center/cover no-repeat;
    padding: 85px 0 75px;
    border-bottom: 1px solid var(--id-line, rgba(255,255,255,0.08));
    overflow: hidden;
}

.contacto-hero-content,
.cotizar-hero-content {
    max-width: 960px;
}

.contacto-hero-title,
.cotizar-hero-title {
    font-size: clamp(32px, 4.8vw, 56px);
    font-weight: 850;
    line-height: 1.12;
    margin: 22px 0 18px;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.contacto-hero-lead,
.cotizar-hero-lead {
    font-size: clamp(16px, 1.7vw, 18.5px);
    line-height: 1.75;
    color: #cbd5e1;
    max-width: 820px;
    margin-bottom: 34px;
}

.contacto-hero-actions,
.cotizar-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 45px;
}

.contacto-stats-strip,
.cotizar-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.contacto-stat-card,
.cotizar-stat-card {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 20px;
    padding: 24px 20px;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.contacto-stat-card:hover,
.cotizar-stat-card:hover {
    transform: translateY(-4px);
    border-color: #38bdf8;
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.22);
}

.contacto-stat-num,
.cotizar-stat-num {
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 900;
    color: #38bdf8;
    line-height: 1.08;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.contacto-stat-label,
.cotizar-stat-label {
    font-size: 14.5px;
    font-weight: 750;
    color: #f8fafc;
    margin-bottom: 4px;
}

.contacto-stat-sub,
.cotizar-stat-sub {
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.45;
}

/* Canales Rápidos de Contacto */
.contacto-channels-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    padding: 40px 0 20px;
}

.contacto-channel-card {
    background: #0b2039;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 18px;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
}

.contacto-channel-card:hover {
    transform: translateY(-4px);
    border-color: #38bdf8;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

.contacto-channel-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(2, 132, 199, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.contacto-channel-card h3 {
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px;
}

.contacto-channel-card p {
    font-size: 13.5px;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0 0 14px;
}

.contacto-channel-action {
    margin-top: auto;
    font-size: 13px;
    font-weight: 750;
    color: #38bdf8;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Sucursales Tabs & Showcase */
.sucursal-tabs-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 25px 0 35px;
}

.sucursal-tab-btn {
    padding: 12px 24px;
    background: #0b2039;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sucursal-tab-btn:hover {
    border-color: #38bdf8;
    color: #ffffff;
}

.sucursal-tab-btn.active {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.sucursal-card-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: #0b2039;
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 24px;
    padding: 36px;
    margin-bottom: 50px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
}

.sucursal-info h3 {
    font-size: 26px;
    font-weight: 850;
    color: #ffffff;
    margin: 8px 0 14px;
}

.sucursal-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    color: #cbd5e1;
    font-size: 14.5px;
    line-height: 1.6;
}

.sucursal-detail-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.sucursal-map-wrap {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.25);
    height: 380px;
    background: #06182d;
}

.sucursal-map-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Cotizar Specific Component Styles */
.cotizar-context-banner {
    background: rgba(2, 132, 199, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 16px;
    padding: 16px 22px;
    margin: 25px 0 0;
    display: none;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    backdrop-filter: blur(8px);
}

.cotizar-filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 30px 0 20px;
}

.cotizar-main-split {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 45px;
    align-items: start;
    margin: 30px 0 70px;
}

.cotizar-process-panel {
    background: #0b2039;
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 24px;
    padding: 36px 32px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}

.cotizar-step-list {
    display: grid;
    gap: 24px;
    margin: 28px 0 34px;
    position: relative;
}

.cotizar-step-list::before {
    content: "";
    position: absolute;
    top: 15px;
    bottom: 25px;
    left: 17px;
    width: 2px;
    background: rgba(56, 189, 248, 0.25);
}

.cotizar-step-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    position: relative;
}

.cotizar-step-number {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #06182d;
    border: 2px solid #38bdf8;
    color: #38bdf8;
    font-size: 14px;
    font-weight: 850;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
    z-index: 2;
}

.cotizar-step-content strong {
    display: block;
    font-size: 15.5px;
    color: #ffffff;
    margin-bottom: 4px;
}

.cotizar-step-content span {
    font-size: 13.5px;
    color: #94a3b8;
    line-height: 1.6;
    display: block;
}

.cotizar-upload-hint-box {
    background: rgba(2, 132, 199, 0.1);
    border: 1px dashed rgba(56, 189, 248, 0.35);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 28px;
}

.cotizar-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    padding: 30px 0 70px;
}

.cotizar-benefit-card {
    background: #0b2039;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 18px;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.cotizar-benefit-card:hover {
    transform: translateY(-4px);
    border-color: #38bdf8;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

.cotizar-benefit-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(2, 132, 199, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.cotizar-benefit-card h3 {
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px;
}

.cotizar-benefit-card p {
    font-size: 13.5px;
    color: #94a3b8;
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 1024px) {
    .contacto-stats-strip,
    .cotizar-stats-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .contacto-channels-grid,
    .cotizar-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cotizar-main-split,
    .sucursal-card-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 680px) {
    .contacto-stats-strip,
    .cotizar-stats-strip {
        grid-template-columns: 1fr;
    }
    .contacto-channels-grid,
    .cotizar-benefits-grid {
        grid-template-columns: 1fr;
    }
    .sucursal-card-container,
    .cotizar-process-panel {
        padding: 24px 18px;
    }
    .sucursal-map-wrap {
        height: 300px;
    }
}


/* WhatsApp and Social Links Enhancement */
.id-wa-icon{width:18px;height:18px;fill:currentColor;stroke:none!important;display:inline-block;vertical-align:middle;flex-shrink:0}
.id-whatsapp:hover{background:#20ba5a!important;transform:translateY(-3px) scale(1.02);box-shadow:0 12px 30px rgba(37,211,102,.65);color:#ffffff!important}
.id-whatsapp svg,.id-whatsapp .id-wa-icon{width:22px;height:22px;fill:#ffffff;stroke:none!important;display:block;flex-shrink:0}
.id-whatsapp span{font-size:13.5px;letter-spacing:0.2px}
.id-social-link{transition:transform .25s ease,border-color .25s ease,background .25s ease,color .25s ease}
.id-social-link:hover{transform:translateY(-2px);color:#ffffff}
.id-social-link[aria-label*="Instagram"]:hover{border-color:#e1306c;background:rgba(225,48,108,.16);color:#f43f5e}
.id-social-link[aria-label*="Facebook"]:hover{border-color:#1877f2;background:rgba(24,119,242,.16);color:#38bdf8}
.id-social-link[aria-label*="YouTube"]:hover{border-color:#ef4444;background:rgba(239,68,68,.16);color:#ef4444}
.id-social-link[aria-label*="TikTok"]:hover{border-color:#00f2fe;background:rgba(0,242,254,.16);color:#00f2fe}
.id-social-link[aria-label*="Vimeo"]:hover{border-color:#1ab7ea;background:rgba(26,183,234,.16);color:#38bdf8}
@media(max-width:520px){.id-whatsapp{right:14px;bottom:14px;padding:11px 16px;font-size:13px}.id-whatsapp svg,.id-whatsapp .id-wa-icon{width:20px;height:20px}}

/* ==========================================================================
   MEGA MENU & COMPACT HEADER NAVIGATION
   ========================================================================== */
.id-nav-list {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.9vw, 12px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.id-nav-item,
.id-nav-item.id-has-mega {
    position: relative !important;
}

.semper-header-container {
    position: relative !important;
}

.id-nav-link {
    color: #cbd5e1 !important;
    text-decoration: none;
    font-weight: 700 !important;
    font-size: clamp(11.5px, 0.85vw, 12.5px) !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    padding: 6px clamp(6px, 0.65vw, 10px) !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.id-nav-link:hover,
.id-nav-item:hover > .id-nav-link,
.id-nav-item:focus-within > .id-nav-link,
.id-nav-item.is-open > .id-nav-link {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.12) !important;
}

.id-nav-link.active {
    background: rgba(56, 189, 248, 0.2) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
}

.id-chevron {
    width: 9px;
    height: 6px;
    opacity: 0.7;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.id-nav-item:hover .id-chevron,
.id-nav-item:focus-within .id-chevron,
.id-nav-item.is-open .id-chevron {
    transform: rotate(180deg);
    opacity: 1;
    color: #38bdf8;
}

.id-nav-pill-badge {
    font-size: 8.5px;
    font-weight: 800;
    background: linear-gradient(135deg, #0284c7, #0ea5e9);
    color: #ffffff;
    padding: 2px 5px;
    border-radius: 5px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
}

.id-header-contact-link {
    color: #cbd5e1 !important;
    text-decoration: none !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 7px 12px !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

.id-header-contact-link:hover,
.id-header-contact-link.active {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.12) !important;
}

/* ==========================================================================
   DESKTOP GOSITE-STYLE DROPDOWN PANELS (Pure White Card, Centered Arrow, 2-Cols)
   ========================================================================== */

/* Safeguard: ensure child links inside dropdowns are NEVER forced uppercase or nowrap */
.semper-nav .id-gosite-menu a,
.id-gosite-menu a,
.id-gosite-menu *,
.id-gs-item,
.id-gs-text,
.id-gs-title,
.id-gs-desc {
    text-transform: none !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
}

.id-gosite-menu {
    position: absolute !important;
    top: calc(100% + 14px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(8px) !important;
    width: min(640px, calc(100vw - 32px)) !important;
    background: #ffffff !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 50px -6px rgba(0, 15, 45, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    padding: 24px 26px !important;
    box-sizing: border-box !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s !important;
    z-index: 100005 !important;
}

/* Hover bridge between nav trigger and dropdown panel */
.id-gosite-menu::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 24px;
    background: transparent;
    pointer-events: auto;
}

/* Arrow notch pointing directly to active nav trigger */
.id-gosite-arrow {
    position: absolute !important;
    top: -7px !important;
    left: 50% !important;
    transform: translateX(-50%) rotate(45deg) !important;
    width: 14px !important;
    height: 14px !important;
    background: #ffffff !important;
    border-left: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.02) !important;
    z-index: 5 !important;
}

.id-nav-item:hover > .id-gosite-menu,
.id-nav-item:focus-within > .id-gosite-menu,
.id-nav-item.is-open > .id-gosite-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* 2-Column Grid Layout */
.id-gosite-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 26px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Individual Feature Item */
.id-gs-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 13px !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
    box-sizing: border-box !important;
    background: transparent !important;
    min-width: 0 !important;
    width: 100% !important;
}

.id-gosite-menu .id-gs-item:hover {
    background: #f8fafc !important;
}

.id-gs-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #0284c7 !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    transition: transform 0.18s ease !important;
}

.id-gs-icon svg {
    width: 24px !important;
    height: 24px !important;
    stroke: #0284c7 !important;
    stroke-width: 1.8 !important;
    fill: none !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    display: block !important;
    transition: transform 0.18s ease !important;
}

.id-gs-item:hover .id-gs-icon svg {
    transform: scale(1.08) !important;
}

.id-gs-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.id-gs-title {
    font-size: 14px !important;
    font-weight: 650 !important;
    color: #111827 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    letter-spacing: -0.15px !important;
    text-transform: none !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    transition: color 0.15s ease !important;
}

.id-gosite-menu .id-gs-item:hover .id-gs-title {
    color: #0284c7 !important;
}

.id-gs-desc {
    font-size: 12px !important;
    color: #64748b !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    letter-spacing: normal !important;
    font-weight: 400 !important;
    text-transform: none !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* ==========================================================================
   MOBILE MENU DRAWER (High-End, Slide-In Drawer from Right)
   ========================================================================== */

.mob-menu-drawer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000002 !important;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0.28s ease !important;
}

.mob-menu-drawer.open {
    visibility: visible !important;
    pointer-events: auto !important;
}

.mob-drawer-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(2, 5, 12, 0.82) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    opacity: 0;
    transition: opacity 0.28s ease !important;
}

.mob-menu-drawer.open .mob-drawer-backdrop {
    opacity: 1 !important;
}

.mob-drawer-panel {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    background: #070a10 !important;
    transform: translateX(100%) !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

@media (min-width: 640px) {
    .mob-drawer-panel {
        width: 440px !important;
        max-width: 90vw !important;
        border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: -20px 0 60px rgba(0, 0, 0, 0.85) !important;
    }
}

.mob-menu-drawer.open .mob-drawer-panel {
    transform: translateX(0) !important;
}

/* Header */
.mob-menu-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 22px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #070a10 !important;
    flex-shrink: 0 !important;
}

.mob-brand-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
}

.mob-brand-text {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.mob-menu-close {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #070a10 !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    transition: background 0.18s, transform 0.18s !important;
    flex-shrink: 0 !important;
}

.mob-menu-close:hover,
.mob-menu-close:active {
    background: #e2e8f0 !important;
    transform: scale(0.95) !important;
}

/* Main Navigation */
.mob-menu-nav {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 12px 22px 24px 22px !important;
    display: flex !important;
    flex-direction: column !important;
}

.mob-nav-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.mob-nav-title-link {
    display: flex !important;
    align-items: baseline !important;
    padding: 18px 0 !important;
    text-decoration: none !important;
    transition: color 0.18s ease, transform 0.18s ease !important;
}

.mob-nav-title-link:hover .mob-nav-text,
.mob-nav-title-link:active .mob-nav-text {
    color: #38bdf8 !important;
    transform: translateX(4px) !important;
}

.mob-nav-accordion {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.mob-nav-summary {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    padding: 18px 0 !important;
    cursor: pointer !important;
    user-select: none !important;
    list-style: none !important;
}

.mob-nav-summary::-webkit-details-marker {
    display: none !important;
}

.mob-nav-title-wrap {
    display: flex !important;
    align-items: baseline !important;
}

.mob-nav-num {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #38bdf8 !important;
    letter-spacing: 0.5px !important;
    margin-right: 14px !important;
    opacity: 0.85 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    flex-shrink: 0 !important;
}

.mob-nav-text {
    font-size: clamp(24px, 6vw, 32px) !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
    transition: color 0.18s ease, transform 0.18s ease !important;
}

.mob-nav-summary:hover .mob-nav-text,
.mob-nav-accordion[open] > .mob-nav-summary .mob-nav-text {
    color: #38bdf8 !important;
}

.mob-accordion-indicator {
    font-size: 24px !important;
    font-weight: 300 !important;
    color: #94a3b8 !important;
    line-height: 1 !important;
    transition: transform 0.22s ease, color 0.22s ease !important;
    display: inline-block !important;
}

.mob-nav-accordion[open] .mob-accordion-indicator {
    transform: rotate(45deg) !important;
    color: #38bdf8 !important;
}

.mob-ia-badge {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    background: linear-gradient(135deg, #0284c7, #2563eb) !important;
    color: #ffffff !important;
    padding: 3px 7px !important;
    border-radius: 9999px !important;
    margin-left: 10px !important;
    vertical-align: middle !important;
    text-transform: uppercase !important;
}

/* Subpanels */
.mob-nav-subpanel {
    padding: 6px 0 16px 26px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.mob-sub-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.025) !important;
    border-left: 2px solid transparent !important;
    transition: background 0.18s, border-color 0.18s, transform 0.18s !important;
    margin-bottom: 2px !important;
}

.mob-sub-item:hover,
.mob-sub-item:active {
    background: rgba(56, 189, 248, 0.08) !important;
    border-left-color: #38bdf8 !important;
    transform: translateX(3px) !important;
}

.mob-sub-featured {
    background: rgba(2, 132, 199, 0.12) !important;
    border-left-color: #38bdf8 !important;
}

.mob-sub-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.mob-sub-name {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #f8fafc !important;
    line-height: 1.3 !important;
}

.mob-sub-item:hover .mob-sub-name,
.mob-sub-item:active .mob-sub-name {
    color: #38bdf8 !important;
}

.mob-sub-hint {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    line-height: 1.3 !important;
}

.mob-sub-arrow {
    color: #64748b !important;
    font-size: 14px !important;
    transition: transform 0.18s, color 0.18s !important;
}

.mob-sub-item:hover .mob-sub-arrow {
    transform: translateX(2px) !important;
    color: #38bdf8 !important;
}

/* Footer Section */
.mob-menu-footer {
    padding: 20px 22px !important;
    background: #05080e !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    flex-shrink: 0 !important;
}

.mob-info-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.mob-info-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.mob-info-tag {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #38bdf8 !important;
}

.mob-branches-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.mob-branch-line {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    line-height: 1.4 !important;
}

.mob-branch-line strong {
    color: #e2e8f0 !important;
    font-weight: 600 !important;
}

.mob-channels-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}

.mob-contact-pill {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 9px 8px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: background 0.18s, border-color 0.18s !important;
}

.mob-contact-pill:hover,
.mob-contact-pill:active {
    background: rgba(56, 189, 248, 0.15) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    color: #38bdf8 !important;
}

.mob-pill-wa {
    background: rgba(37, 211, 102, 0.15) !important;
    border-color: rgba(37, 211, 102, 0.35) !important;
    color: #4ade80 !important;
}

.mob-pill-wa:hover,
.mob-pill-wa:active {
    background: rgba(37, 211, 102, 0.25) !important;
    border-color: #4ade80 !important;
    color: #ffffff !important;
}

.mob-cta-wander-btn {
    width: 100% !important;
    background: #0284c7 !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 13px 20px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 18px rgba(2, 132, 199, 0.35) !important;
    transition: background 0.2s, transform 0.18s !important;
}

.mob-cta-wander-btn:hover,
.mob-cta-wander-btn:active {
    background: #0369a1 !important;
    transform: translateY(-1px) !important;
}

.mob-cta-arr {
    font-size: 16px !important;
    font-weight: 400 !important;
}

.mob-bottom-legal {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 10.5px !important;
    color: #475569 !important;
}

.mob-bottom-legal a {
    color: #64748b !important;
    text-decoration: none !important;
}

.mob-bottom-legal a:hover {
    color: #38bdf8 !important;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 1200px) {
    .id-mega-grid-4 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 18px !important;
    }
    .id-mega-card {
        display: none !important;
    }
}

@media (max-width: 1080px) {
    .semper-nav {
        display: none !important;
    }
    .mobile-nav-toggle {
        display: flex !important;
    }
}

/* ==========================================================================
   SERVICE DETAIL PAGES LUXURY STYLES (.bh-service-*)
   ========================================================================== */
.bh-service-phases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 24px 0 32px;
}

.bh-service-phase-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.15);
    border-radius: 14px;
    padding: 20px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bh-service-phase-card:hover {
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateY(-3px);
    background: rgba(15, 23, 42, 0.9);
}

.bh-service-phase-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.3), rgba(56, 189, 248, 0.15));
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 12px;
}

.bh-service-phase-title {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px;
}

.bh-service-phase-desc {
    font-size: 13px;
    line-height: 1.55;
    color: #94a3b8;
    margin: 0;
}

.bh-service-ai-banner {
    background: linear-gradient(135deg, rgba(3, 105, 161, 0.25) 0%, rgba(15, 23, 42, 0.8) 100%);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 16px;
    padding: 24px 28px;
    margin: 32px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
}

.bh-service-ai-info {
    max-width: 580px;
}

.bh-service-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 9999px;
    font-size: 11.5px;
    font-weight: 750;
    color: #38bdf8;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.bh-service-ai-title {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px;
}

.bh-service-ai-desc {
    font-size: 13.5px;
    color: #cbd5e1;
    margin: 0;
    line-height: 1.5;
}

/* ==========================================================================
   BLOG HUB & ARTICLE STYLES (.bh-blog-*)
   ========================================================================== */
.bh-blog-hero {
    padding: 70px 0 40px;
    text-align: center;
    position: relative;
}

.bh-blog-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 800;
    color: #38bdf8;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.bh-blog-hero h1 {
    font-size: clamp(32px, 4.5vw, 48px);
    font-weight: 850;
    color: #ffffff;
    line-height: 1.15;
    margin: 0 auto 16px;
    max-width: 820px;
}

.bh-blog-hero-lead {
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 1.6;
    color: #94a3b8;
    max-width: 700px;
    margin: 0 auto 28px;
}

.bh-blog-filter-bar {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.bh-blog-filter-pill {
    padding: 8px 18px;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
}

.bh-blog-filter-pill:hover,
.bh-blog-filter-pill.active {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.35);
}

/* Featured Story */
.bh-blog-featured-wrap {
    margin: 30px 0 50px;
}

.bh-blog-featured-card {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.7);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}

.bh-blog-featured-card:hover {
    border-color: rgba(56, 189, 248, 0.5);
    transform: translateY(-4px);
    box-shadow: 0 25px 60px -15px rgba(2, 132, 199, 0.25);
}

.bh-blog-featured-img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.bh-blog-featured-card:hover .bh-blog-featured-img {
    transform: scale(1.03);
}

.bh-blog-featured-body {
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bh-blog-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.bh-blog-cat-tag {
    padding: 4px 11px;
    border-radius: 6px;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
    font-size: 11.5px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bh-blog-date-tag,
.bh-blog-time-tag {
    font-size: 12.5px;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.bh-blog-featured-title {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 850;
    line-height: 1.25;
    color: #ffffff;
    margin: 0 0 14px;
}

.bh-blog-featured-desc {
    font-size: 14.5px;
    line-height: 1.65;
    color: #94a3b8;
    margin: 0 0 24px;
}

.bh-blog-author-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bh-blog-author-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0284c7, #38bdf8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.bh-blog-author-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.bh-blog-author-role {
    font-size: 11.5px;
    color: #64748b;
    margin: 0;
}

/* Grid of Articles */
.bh-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
    margin-bottom: 60px;
}

.bh-blog-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
}

.bh-blog-card:hover {
    border-color: rgba(56, 189, 248, 0.35);
    transform: translateY(-5px);
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.6);
}

.bh-blog-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #09111e;
}

.bh-blog-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.bh-blog-card:hover .bh-blog-card-img {
    transform: scale(1.05);
}

.bh-blog-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.bh-blog-card-title {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.35;
    margin: 0 0 10px;
    transition: color 0.2s ease;
}

.bh-blog-card:hover .bh-blog-card-title {
    color: #38bdf8;
}

.bh-blog-card-excerpt {
    font-size: 13.5px;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 18px;
    flex: 1;
}

.bh-blog-card-read-more {
    font-size: 13px;
    font-weight: 750;
    color: #38bdf8;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease;
}

.bh-blog-card:hover .bh-blog-card-read-more {
    gap: 10px;
}

/* Individual Article Styles */
.bh-blog-article-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

.bh-blog-article-header {
    margin-bottom: 36px;
    text-align: left;
}

.bh-blog-article-title {
    font-size: clamp(28px, 3.8vw, 44px);
    font-weight: 900;
    line-height: 1.18;
    color: #ffffff;
    margin: 16px 0 18px;
    letter-spacing: -0.5px;
}

.bh-blog-article-lead {
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 1.65;
    color: #cbd5e1;
    margin: 0 0 24px;
    font-weight: 400;
}

.bh-blog-hero-image-wrap {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin: 0 0 40px;
    border: 1px solid rgba(56, 189, 248, 0.2);
    box-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.7);
}

.bh-blog-hero-image-wrap img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    display: block;
}

.bh-blog-image-caption {
    padding: 12px 18px;
    background: rgba(15, 23, 42, 0.92);
    font-size: 12.5px;
    color: #94a3b8;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Article Prose & Editorial Elements */
.bh-blog-prose {
    font-size: 16.5px;
    line-height: 1.75;
    color: #cbd5e1;
}

.bh-blog-prose p {
    margin: 0 0 22px;
}

.bh-blog-prose h2 {
    font-size: 26px;
    font-weight: 850;
    color: #ffffff;
    margin: 44px 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.2);
    letter-spacing: -0.3px;
}

.bh-blog-prose h3 {
    font-size: 20px;
    font-weight: 800;
    color: #f1f5f9;
    margin: 32px 0 12px;
}

.bh-blog-keypoints {
    background: rgba(2, 132, 199, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-left: 5px solid #0284c7;
    border-radius: 12px;
    padding: 24px 28px;
    margin: 30px 0 36px;
}

.bh-blog-keypoints-title {
    font-size: 16px;
    font-weight: 800;
    color: #38bdf8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bh-blog-keypoints ul {
    margin: 0;
    padding-left: 20px;
    color: #e2e8f0;
}

.bh-blog-keypoints li {
    margin-bottom: 8px;
    line-height: 1.55;
}

.bh-blog-callout {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 14px;
    padding: 22px 24px;
    margin: 32px 0;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.bh-blog-callout-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bh-blog-callout-body h4 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
}

.bh-blog-callout-body p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #94a3b8;
}

.bh-blog-blockquote {
    border-left: 4px solid #38bdf8;
    background: rgba(15, 23, 42, 0.5);
    margin: 36px 0;
    padding: 20px 26px;
    font-style: italic;
    font-size: 17.5px;
    line-height: 1.6;
    color: #f1f5f9;
    border-radius: 0 12px 12px 0;
}

.bh-blog-blockquote-cite {
    display: block;
    font-style: normal;
    font-size: 13px;
    font-weight: 700;
    color: #38bdf8;
    margin-top: 10px;
}

.bh-blog-author-bio-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 28px;
    margin: 50px 0 40px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.bh-blog-author-bio-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0284c7, #38bdf8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 900;
    color: #ffffff;
    flex-shrink: 0;
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.bh-blog-author-bio-info h3 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
}

.bh-blog-author-bio-info .bh-blog-bio-role {
    font-size: 12.5px;
    color: #38bdf8;
    margin: 0 0 8px;
    font-weight: 600;
}

.bh-blog-author-bio-info p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #94a3b8;
}

.bh-blog-article-cta {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.2), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 18px;
    padding: 32px;
    text-align: center;
    margin: 50px 0;
}

.bh-blog-article-cta h3 {
    font-size: 22px;
    font-weight: 850;
    color: #ffffff;
    margin: 0 0 10px;
}

.bh-blog-article-cta p {
    font-size: 14.5px;
    color: #94a3b8;
    max-width: 600px;
    margin: 0 auto 20px;
    line-height: 1.6;
}

.bh-blog-article-cta-btns {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .bh-blog-featured-card {
        grid-template-columns: 1fr;
    }
    .bh-blog-featured-img {
        min-height: 220px;
    }
    .bh-blog-featured-body {
        padding: 24px 20px;
    }
    .bh-blog-author-bio-card {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   ELEGANT LIGHT WHITE & GRAY THEME OVERRIDES (SERVICIOS, CONTACTO, COTIZAR)
   ========================================================================== */

/* 1. SERVICIOS PAGE: CARDS & WORKFLOW */
.servicios-grid .servicio-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important;
}

.servicios-grid .servicio-card:hover {
    border-color: #0284c7 !important;
    box-shadow: 0 20px 45px rgba(2, 132, 199, 0.12) !important;
}

.servicios-grid .servicio-card-body h3,
.servicios-grid .servicio-card-body h3 a {
    color: #0f172a !important;
}

.servicios-grid .servicio-card-body h3 a:hover {
    color: #0284c7 !important;
}

.servicios-grid .servicio-card-body p {
    color: #64748b !important;
}

.servicios-grid .servicio-feature-tag {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #0284c7 !important;
}

.servicios-grid .servicio-card-actions {
    border-top: 1px solid #f1f5f9 !important;
}

.servicios-grid .servicio-btn-quote {
    color: #0284c7 !important;
}

.servicios-filter-btn {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}

.servicios-filter-btn:hover {
    border-color: #0284c7 !important;
    color: #0284c7 !important;
}

.servicios-filter-btn.active {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3) !important;
}

/* Workflow section (Proceso y Metodología) */
.servicios-workflow-section {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.servicios-workflow-section h2 {
    color: #0f172a !important;
}

.servicios-workflow-section p {
    color: #64748b !important;
}

.servicios-steps-grid .servicios-step-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
}

.servicios-steps-grid .servicios-step-card:hover {
    border-color: #0284c7 !important;
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.12) !important;
}

.servicios-steps-grid .servicios-step-card h3 {
    color: #0f172a !important;
}

.servicios-steps-grid .servicios-step-card p {
    color: #64748b !important;
}


/* 2. CONTACTO PAGE: CHANNELS, SUCURSALES & FORM */
.contacto-channels-grid .contacto-channel-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
}

.contacto-channels-grid .contacto-channel-card:hover {
    border-color: #0284c7 !important;
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.12) !important;
}

.contacto-channels-grid .contacto-channel-card h3 {
    color: #0f172a !important;
}

.contacto-channels-grid .contacto-channel-card p {
    color: #64748b !important;
}

.sucursal-tabs-bar .sucursal-tab-btn {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}

.sucursal-tabs-bar .sucursal-tab-btn:hover {
    border-color: #0284c7 !important;
    color: #0284c7 !important;
}

.sucursal-tabs-bar .sucursal-tab-btn.active {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3) !important;
}

.sucursal-card-container {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06) !important;
}

.sucursal-info h3 {
    color: #0f172a !important;
}

.sucursal-info p {
    color: #475569 !important;
}

.sucursal-detail-item {
    color: #475569 !important;
}

.sucursal-detail-item strong {
    color: #0f172a !important;
}

.sucursal-map-wrap {
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
}

/* Contact and Quote Form Panels */
#formulario-cotizar .cotizar-process-panel,
.id-detail .id-detail-panel.id-form,
#formulario-cotizar .id-detail-panel.id-form {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06) !important;
}

#formulario-cotizar .cotizar-process-panel h2,
#formulario-cotizar .cotizar-process-panel h3,
.id-detail .id-detail-panel.id-form h3,
#formulario-cotizar .id-detail-panel.id-form h3 {
    color: #0f172a !important;
}

#formulario-cotizar .cotizar-process-panel p {
    color: #475569 !important;
}

.cotizar-step-content strong {
    color: #0f172a !important;
}

.cotizar-step-content span {
    color: #64748b !important;
}

.cotizar-upload-hint-box {
    background: #f8fafc !important;
    border: 1.5px dashed #cbd5e1 !important;
}

.cotizar-upload-hint-box p {
    color: #475569 !important;
}

/* Form Inputs within Light Panels */
.id-detail-panel.id-form label,
#quote-form.id-form label {
    color: #1e293b !important;
}

.id-detail-panel.id-form input,
.id-detail-panel.id-form textarea,
.id-detail-panel.id-form select,
#quote-form.id-form input,
#quote-form.id-form textarea,
#quote-form.id-form select {
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
}

.id-detail-panel.id-form input:focus,
.id-detail-panel.id-form textarea:focus,
.id-detail-panel.id-form select:focus,
#quote-form.id-form input:focus,
#quote-form.id-form textarea:focus,
#quote-form.id-form select:focus {
    background: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15) !important;
}

.id-detail-panel.id-form select option,
#quote-form.id-form select option {
    background: #ffffff !important;
    color: #0f172a !important;
}

/* Cotizar Benefits Cards */
.cotizar-benefits-grid .cotizar-benefit-card {
    background: #0b1528 !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

.cotizar-benefits-grid .cotizar-benefit-card:hover {
    border-color: #38bdf8 !important;
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.25) !important;
}

.cotizar-benefits-grid .cotizar-benefit-card h3 {
    color: #ffffff !important;
}

.cotizar-benefits-grid .cotizar-benefit-card p {
    color: #94a3b8 !important;
}

/* Contact FAQ items */
.id-faq details {
    background: #0b1528 !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.id-faq summary {
    color: #ffffff !important;
}

.id-faq p {
    color: #475569 !important;
}

/* ==========================================================================
   TRI-COLOR HARMONY & HIGH-CONTRAST TYPOGRAPHY (SUBPAGES, SERVICES, BLOG)
   Color Mix: Azul Corporativo / Navy + Blanco Puro + Gris Claro Casi Blanco
   ========================================================================== */

/* 1. GLOBAL SUBPAGE CANVAS (Gris claro casi blanco con texto nítido) */
.id-content-page {
    background: #f8fafc !important;
    color: #1e293b !important;
}

.id-content-page #main-content {
    background: transparent !important;
}

/* 2. SUBPAGE HEROES & BANNERS (Azul Corporativo Profundo con Blanco y Cyan) */
.id-page-banner,
.servicios-hero,
.bh-blog-hero {
    background: linear-gradient(135deg, #03172e 0%, #0c2b52 50%, #075985 100%) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.2) !important;
}

.id-page-banner h1,
.servicios-hero .servicios-hero-title,
.bh-blog-hero h1 {
    color: #ffffff !important;
}

.id-page-banner p,
.servicios-hero .servicios-hero-lead,
.bh-blog-hero .bh-blog-hero-lead {
    color: #cbd5e1 !important;
}

.bh-blog-hero {
    border-radius: 20px !important;
    padding: 48px 36px !important;
    margin-top: 24px !important;
    margin-bottom: 40px !important;
}

.bh-blog-hero-kicker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(56, 189, 248, 0.15) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    color: #38bdf8 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
}

/* 3. PRODUCT & SERVICE LISTING CARDS (Tarjetas Blancas con Sombra Suave) */
.id-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
}

.id-card:hover {
    border-color: #0284c7 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.12) !important;
}

.id-card h2,
.id-card h2 a {
    color: #0f172a !important;
}

.id-card p {
    color: #475569 !important;
}

.id-filters {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
}

.id-filters label {
    color: #0f172a !important;
}

.id-filters input,
.id-filters select {
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
}

.id-filters input::placeholder {
    color: #94a3b8 !important;
}

.id-filters input:focus,
.id-filters select:focus {
    background: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15) !important;
}

.id-clear {
    background: #e2e8f0 !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #1e293b !important;
    font-weight: 750 !important;
    transition: all 0.2s ease !important;
}

.id-clear:hover {
    background: #cbd5e1 !important;
    color: #0f172a !important;
    transform: translateY(-2px) !important;
}

.id-result-count {
    color: #475569 !important;
    font-weight: 650 !important;
}

.id-pagination button {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 750 !important;
    transition: all 0.2s ease !important;
}

.id-pagination button:hover:not(:disabled) {
    border-color: #0284c7 !important;
    color: #0284c7 !important;
}

.id-pagination button[aria-current=page] {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}

/* Category Cards across Products & Projects */
.productos-categories-section,
.proyectos-categories-section {
    background: #f8fafc !important;
}

.productos-cat-card,
.proyectos-cat-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04) !important;
}

.productos-cat-card:hover,
.proyectos-cat-card:hover {
    background: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 12px 32px rgba(2, 132, 199, 0.12) !important;
    transform: translateY(-4px) !important;
}

.productos-cat-card h3,
.proyectos-cat-card h3 {
    color: #0f172a !important;
}

.productos-cat-card p,
.proyectos-cat-card p {
    color: #475569 !important;
}

.productos-cat-icon,
.proyectos-cat-icon {
    background: rgba(2, 132, 199, 0.08) !important;
    border: 1px solid rgba(2, 132, 199, 0.25) !important;
    color: #0284c7 !important;
}

/* Products Brand Chips Bar */
.productos-brand-chips {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

.productos-chip-label {
    color: #0f172a !important;
}

.productos-chip {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
}

.productos-chip:hover,
.productos-chip.active {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}

/* Nosotros Story Section Balanced Light Rhythm */
.nosotros-story-section {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.nosotros-story-grid h2 {
    color: #0f172a !important;
}

.nosotros-story-lead {
    color: #334155 !important;
}

.nosotros-timeline-badge {
    background: #ffffff !important;
    border: 1.5px solid #0284c7 !important;
    color: #0284c7 !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15) !important;
}

.nosotros-timeline-content {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

.nosotros-timeline-content:hover {
    border-color: #0284c7 !important;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.1) !important;
}

.nosotros-timeline-content h4 {
    color: #0f172a !important;
}

.nosotros-timeline-content p {
    color: #475569 !important;
}

.nosotros-floating-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08) !important;
}

.nosotros-floating-text h5 {
    color: #0f172a !important;
}

.nosotros-floating-text p {
    color: #0284c7 !important;
}

/* 4. DETAIL PANELS & TABLES (Gris claro / Blanco con Contraste Slate) */
.id-detail-panel {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05) !important;
}

.id-detail-panel h1,
.id-detail-panel h2,
.id-detail-panel h3 {
    color: #0f172a !important;
}

.id-detail p,
.id-detail-panel p {
    color: #334155 !important;
}

.id-specs {
    color: #334155 !important;
}

.id-specs th {
    color: #0284c7 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.id-specs td {
    color: #334155 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* 5. INDIVIDUAL SERVICE DETAIL PAGES (.bh-proj-*) */
.bh-proj-sheet-container {
    color: #1e293b !important;
}

.bh-proj-title {
    color: #0f172a !important;
}

.bh-proj-lead {
    color: #334155 !important;
}

.bh-proj-cat-badge {
    background: rgba(2, 132, 199, 0.08) !important;
    border: 1px solid rgba(2, 132, 199, 0.3) !important;
    color: #0284c7 !important;
}

.bh-proj-pill {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

.bh-sheet-breadcrumb {
    color: #64748b !important;
}

.bh-sheet-breadcrumb a {
    color: #0284c7 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.bh-bc-current {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.bh-proj-block {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
}

.bh-proj-block-title {
    color: #0f172a !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.bh-proj-block p {
    color: #334155 !important;
}

.bh-proj-brand-tag {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #0284c7 !important;
}

.bh-proj-tech-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
}

.bh-proj-tech-box h3 {
    color: #0f172a !important;
}

.bh-proj-tech-item {
    border-bottom: 1px solid #f1f5f9 !important;
}

.bh-proj-tech-label {
    color: #64748b !important;
}

.bh-proj-tech-val {
    color: #0f172a !important;
}

.bh-proj-gallery-heading {
    color: #0f172a !important;
}

.bh-proj-gallery-item {
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
}

.bh-proj-main-image-wrap {
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08) !important;
}

/* 6. BLOG LISTING PAGE & BLOG ARTICLES (.bh-blog-*) */
.bh-blog-filter-bar .bh-blog-filter-pill {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

.bh-blog-filter-bar .bh-blog-filter-pill:hover {
    border-color: #0284c7 !important;
    color: #0284c7 !important;
}

.bh-blog-filter-bar .bh-blog-filter-pill.active {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3) !important;
}

.bh-blog-featured-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.06) !important;
}

.bh-blog-featured-card h2,
.bh-blog-featured-card h2 a {
    color: #0f172a !important;
}

.bh-blog-featured-card p {
    color: #475569 !important;
}

.bh-blog-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
}

.bh-blog-card:hover {
    border-color: #0284c7 !important;
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.12) !important;
    transform: translateY(-4px) !important;
}

.bh-blog-card h3,
.bh-blog-card h3 a {
    color: #0f172a !important;
}

.bh-blog-card p {
    color: #475569 !important;
}

.bh-blog-card-meta {
    color: #64748b !important;
}

.bh-blog-card-read-more {
    color: #0284c7 !important;
    font-weight: 800 !important;
}

.bh-blog-author-name {
    color: #0f172a !important;
}

.bh-blog-author-role {
    color: #64748b !important;
}

.bh-blog-author-avatar {
    background: rgba(2, 132, 199, 0.1) !important;
    border: 1.5px solid rgba(2, 132, 199, 0.3) !important;
    color: #0284c7 !important;
}

/* Individual Blog Article Reader */
.bh-blog-article-container {
    color: #1e293b !important;
}

.bh-blog-article-title {
    color: #0f172a !important;
}

.bh-blog-article-lead {
    color: #334155 !important;
}

.bh-blog-hero-image-wrap {
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08) !important;
}

.bh-blog-image-caption {
    background: #f8fafc !important;
    color: #64748b !important;
    border-top: 1px solid #e2e8f0 !important;
}

.bh-blog-keypoints {
    background: #f0f7ff !important;
    border: 1px solid #bae6fd !important;
    border-left: 5px solid #0284c7 !important;
    border-radius: 14px !important;
}

.bh-blog-keypoints-title {
    color: #0284c7 !important;
}

.bh-blog-keypoints ul,
.bh-blog-keypoints li {
    color: #1e293b !important;
}

.bh-blog-prose {
    color: #334155 !important;
    font-size: 17px !important;
    line-height: 1.85 !important;
}

.bh-blog-prose p {
    color: #334155 !important;
}

.bh-blog-prose h2 {
    color: #0f172a !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.bh-blog-prose h3 {
    color: #0f172a !important;
}

.bh-blog-callout {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 14px !important;
}

.bh-blog-callout h4 {
    color: #15803d !important;
}

.bh-blog-callout p {
    color: #166534 !important;
}

.bh-blog-blockquote {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #0284c7 !important;
    border-radius: 10px !important;
    color: #0f172a !important;
    font-style: italic !important;
    padding: 20px 24px !important;
}

.bh-blog-blockquote-cite {
    color: #64748b !important;
    font-style: normal !important;
}

/* 7. BOTTOM CALL TO ACTION BANNER (.id-cta) */
.id-cta {
    background: linear-gradient(135deg, #03172e 0%, #075985 100%) !important;
    color: #ffffff !important;
    text-align: center !important;
}

.id-cta h2 {
    color: #ffffff !important;
    font-size: clamp(28px, 3.8vw, 44px) !important;
    font-weight: 900 !important;
    margin: 16px 0 !important;
}

.id-cta p {
    color: #e2e8f0 !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    max-width: 680px !important;
    margin: 0 auto 30px !important;
}

.id-cta .btn-hero-primary-blue {
    background: #ffffff !important;
    color: #03172e !important;
    border: none !important;
    font-weight: 850 !important;
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.25) !important;
}

.id-cta .btn-hero-primary-blue::before,
.id-cta .btn-hero-primary-blue::after {
    display: none !important;
}

.id-cta .btn-hero-primary-blue:hover {
    background: #f8fafc !important;
    transform: translateY(-2px) !important;
}

.id-cta .btn-hero-white-pill {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
}

.id-cta .btn-hero-white-pill::before,
.id-cta .btn-hero-white-pill::after {
    display: none !important;
}

.id-cta .btn-hero-white-pill:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Safeguard if nosotros-cta-card is ever used */
.nosotros-cta-card h2 {
    color: #0f172a !important;
}

.nosotros-cta-card p {
    color: #334155 !important;
}

.nosotros-cta-card .btn-hero-primary-blue {
    background: #0284c7 !important;
    color: #ffffff !important;
    border: none !important;
}

.nosotros-cta-card .btn-hero-white-pill {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

/* ==========================================================================
   HOMEPAGE REFINEMENTS: HEADER-HERO SPACING, FEATURED PROJECT & MODERN FAQ
   ========================================================================== */

/* 1. Eliminate gap between sticky header and hero */
.id-home-page #main-content,
#main-content:has(.hero-semper-light) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 2. Section 6 Featured Project Card (Hilton Comayagua) Visibility & Design */
.testi-feat-quote-wrap {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 38px 42px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important;
}

.testi-feat-quote-wrap .id-eyebrow {
    color: #0284c7 !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    font-size: 11.5px !important;
    display: inline-block !important;
    margin-bottom: 8px !important;
}

.testi-feat-quote-wrap .testi-quote-text {
    color: #0f172a !important;
    font-size: 28px !important;
    font-weight: 850 !important;
    font-style: normal !important;
    line-height: 1.25 !important;
    margin: 8px 0 16px 0 !important;
}

.testi-feat-quote-wrap p {
    color: #334155 !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    margin: 0 0 24px 0 !important;
}

.testi-feat-quote-wrap .btn-hero-primary-blue {
    background: #0284c7 !important;
    color: #ffffff !important;
    border: 1px solid #0284c7 !important;
    border-radius: 999px !important;
    padding: 13px 26px !important;
    font-weight: 750 !important;
    font-size: 13px !important;
    letter-spacing: 0.4px !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3) !important;
    width: fit-content !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.testi-feat-quote-wrap .btn-hero-primary-blue:hover {
    background: #0369a1 !important;
    border-color: #0369a1 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.42) !important;
}

.testi-feat-quote-wrap .btn-hero-primary-blue::before,
.testi-feat-quote-wrap .btn-hero-primary-blue::after {
    display: none !important;
}

/* 3. Modern 2-Column Architectural FAQ Section */
.faq-section {
    background: #08101e !important;
    padding: 95px 0 !important;
    border-top: 1px solid rgba(56, 189, 248, 0.15);
    border-bottom: 1px solid rgba(56, 189, 248, 0.15);
}

.faq-inner-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 65px;
    align-items: start;
}

.faq-aside-col {
    position: sticky;
    top: 105px;
}

.faq-section-heading {
    font-size: clamp(30px, 3.4vw, 42px) !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    line-height: 1.16 !important;
    margin: 16px 0 14px 0 !important;
    letter-spacing: -0.5px;
}

.faq-section-desc {
    color: #94a3b8 !important;
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    margin: 0 0 30px 0 !important;
}

.faq-support-card {
    background: #0c182b;
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
}

.faq-support-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.faq-support-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(56, 189, 248, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    flex-shrink: 0;
}

.faq-support-title {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.faq-support-text {
    font-size: 14px !important;
    color: #94a3b8 !important;
    line-height: 1.6 !important;
    margin: 0 0 20px 0 !important;
}

.faq-support-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    background: #25d366;
    color: #ffffff !important;
    font-weight: 750;
    font-size: 13.5px;
    padding: 12px 18px;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25);
    transition: all 0.25s ease;
}

.faq-support-btn:hover {
    background: #20ba5a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
}

/* Right Column Accordion Cards */
.faq-list-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-modern-card {
    background: #0c182b !important;
    border: 1.5px solid rgba(56, 189, 248, 0.18) !important;
    border-radius: 18px !important;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.faq-modern-card:hover {
    border-color: rgba(56, 189, 248, 0.45) !important;
    background: #0e1e35 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
}

.faq-modern-card[open] {
    border-color: #38bdf8 !important;
    background: #0e203b !important;
    box-shadow: 0 12px 28px -6px rgba(2, 132, 199, 0.25) !important;
}

.faq-modern-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 22px 26px !important;
    cursor: pointer !important;
    list-style: none !important;
    gap: 16px !important;
    user-select: none !important;
}

.faq-modern-summary::-webkit-details-marker {
    display: none !important;
}

.faq-modern-question {
    font-size: 16.5px !important;
    font-weight: 750 !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
    transition: color 0.2s ease;
}

.faq-modern-card[open] .faq-modern-question,
.faq-modern-card:hover .faq-modern-question {
    color: #38bdf8 !important;
}

.faq-toggle-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-modern-card:hover .faq-toggle-circle {
    background: #0284c7;
    color: #ffffff;
}

.faq-modern-card[open] .faq-toggle-circle {
    background: #0284c7;
    color: #ffffff;
    transform: rotate(180deg);
}

.faq-toggle-icon {
    transition: transform 0.3s ease;
}

.faq-modern-body {
    padding: 0 26px 24px 26px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: -2px;
    padding-top: 18px !important;
}

.faq-modern-body p {
    color: #cbd5e1 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}

@media (max-width: 900px) {
    .faq-inner-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .faq-aside-col {
        position: static;
    }
    .faq-section {
        padding: 55px 0 !important;
    }
    .faq-modern-summary {
        padding: 18px 20px !important;
    }
    .faq-modern-body {
        padding: 0 20px 20px 20px !important;
    }
    .faq-modern-question {
        font-size: 15.5px !important;
    }
}