/* Azulweb: distinct compositions, native scrolling, progressive depth. */
:root {
  --support-surface: #eaf4fb;
  --infra-surface: #12334e;
  --infra-raised: #1c435f;
  --digital-surface: #edf3f8;
  --motion-rise: 42px;
}
html { scroll-padding-top: 0; }
#inicio, #contenido { scroll-margin-top: 124px; }
body { overflow-x: clip; }
main { overflow: clip; }
.nav { position: relative; }
.nav-links { gap: 26px; }
.reading-track { position: absolute; left: 34px; right: 34px; bottom: 0; height: 2px; border-radius: 4px; overflow: hidden; }
.reading-track::after { content: ""; display: block; height: 100%; width: 100%; background: var(--gold); transform: scaleX(var(--reading-progress, 0)); transform-origin: left; }
.hero { min-height: 590px; margin-top: 32px; background: #edf3f8; }
.hero-copy { position: relative; }
.hero .lead { max-width: 39ch; }
.hero-visual { transform: translate3d(0, calc(var(--scene-leave, 0) * -20px), 0); }
.service-index { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; padding-top: 112px; padding-bottom: 88px; align-items: center; scroll-margin-top: 128px; }
.index-title h2 { font-size: clamp(2.25rem, 4.2vw, 3.6rem); }
.index-title p { margin-top: 24px; color: var(--muted); font-size: 18px; }
.service-directory { display: grid; gap: 8px; }
.directory-link { display: grid; grid-template-columns: 46px minmax(0, 1fr) 30px; gap: 22px; align-items: center; padding: 23px 22px; border-radius: 22px; transition: background 250ms var(--ease); }
.directory-link:hover { background: #edf3f8; }
.directory-symbol { color: var(--blue); }
.directory-symbol svg { width: 35px; height: 35px; }
.directory-link strong { display: block; font-size: 24px; font-weight: 620; letter-spacing: -.025em; line-height: 1.2; }
.directory-link small { display: block; margin-top: 7px; font-size: 16px; color: var(--muted); }
.directory-arrow { transition: transform 250ms var(--ease); }
.directory-link:hover .directory-arrow { transform: translateX(5px); }
.chapter { position: relative; padding: 64px; border-radius: 44px; isolation: isolate; scroll-margin-top: 124px; }
.chapter h2, .digital-intro h2 { font-size: clamp(2.4rem, 4.4vw, 3.75rem); }
.section-copy { margin-top: 24px; font-size: 18px; line-height: 1.6; max-width: 43ch; color: var(--muted); }
.support-chapter { background: var(--support-surface); }
.support-composition { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 70px; }
.support-art { position: relative; min-height: 430px; perspective: 1100px; }
.support-disc { position: absolute; width: 310px; height: 310px; background: #e3e8eb; border-radius: 50%; top: 25px; left: 0; }
.large-headset { top: 36px; left: 62px; width: 230px; height: 250px; }
.large-headset .headset-object { width: 140px; height: 150px; transform: translateZ(45px) rotateZ(-13deg) rotateY(-20deg) scale(1.85); transform-origin: left top; }
.large-headset .ear-left { border-left-color: var(--gold); }
.policy-pass { top: 190px; left: 172px; width: 190px; height: 190px; z-index: 2; }
.pass-surface { height: 100%; padding: 24px; background: #f4f9fd; color: var(--ink); border-radius: 24px; border-right: 5px solid #b2dcf3; border-bottom: 7px solid #b2dcf3; box-shadow: 0 20px 36px #24313d1c; transform: perspective(800px) rotateY(-14deg) rotateZ(8deg); }
.pass-surface svg { width: 32px; height: 32px; padding: 5px; background: var(--gold); color: #173d60; border-radius: 50%; }
.pass-surface strong { display: block; font-size: 24px; margin-top: 12px; letter-spacing: -.04em; }
.pass-surface>span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.art-caption { position: absolute; bottom: 0; left: 12px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.support-options { margin-top: 36px; display: grid; gap: 14px; }
.service-item { min-width: 0; }
.service-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 18px; align-items: center; }
.service-item summary::-webkit-details-marker { display: none; }
.service-item strong { display: block; font-size: 20px; font-weight: 620; letter-spacing: -.025em; line-height: 1.3; }
.item-description { display: block; margin-top: 8px; font-size: 16px; color: var(--muted); line-height: 1.5; }
.item-plus { font-size: 25px; font-weight: 350; color: var(--blue); transition: transform 250ms var(--ease); }
.service-item[open] .item-plus { transform: rotate(45deg); }
.support-item { background: #fff; border-radius: 24px; }
.support-item summary { padding: 23px 25px; min-height: 108px; }
.item-body { padding: 0 25px 24px; font-size: 16px; color: var(--muted); }
.item-body a { display: inline-block; margin-top: 16px; color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.service-item[open] .item-body { animation: detail-in 240ms var(--ease) both; }
@keyframes detail-in { from { opacity: .3; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
.infra-chapter { margin-top: 64px; background: var(--infra-surface); color: #fff; padding-top: 76px; padding-bottom: 76px; overflow: hidden; }
.infra-composition { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.infra-chapter .section-copy { color: #d7e2ec; max-width: 39ch; }
.infra-story { min-width: 0; position: relative; padding-bottom: 250px; }
.infra-sculpture { width: min(360px, 95%); height: 196px; bottom: 10px; left: 14px; perspective: 900px; }
.infra-stack { position: relative; transform: rotateY(calc(-18deg + var(--scene-turn, 0deg))) rotateX(7deg) rotateZ(-4deg); transform-style: preserve-3d; }
.infra-unit { height: 58px; margin-bottom: 10px; border-radius: 13px; background: #f3f7fa; color: var(--ink); border-right: 8px solid #b9ccdc; border-bottom: 5px solid #c8d8e4; display: flex; align-items: center; gap: 18px; padding: 12px 22px; box-shadow: 15px 12px 0 #0a253c; }
.infra-unit:nth-child(2) { transform: translateX(14px); }
.infra-unit:nth-child(3) { transform: translateX(28px); }
.infra-unit svg { width: 25px; height: 25px; }
.infra-unit>span { font-size: 15px; font-weight: 550; }
.infra-unit i { height: 6px; width: 6px; background: var(--gold); border-radius: 50%; margin-left: auto; }
.infra-options { display: grid; gap: 20px; padding-top: 4px; }
.infra-item { background: var(--infra-raised); border-radius: 26px; }
.infra-item summary { grid-template-columns: 36px minmax(0, 1fr) 20px; min-height: 150px; padding: 28px; gap: 20px; }
.infra-symbol { width: 32px; height: 32px; color: #7fcaf0; }
.infra-item .item-description, .infra-item .item-body { color: #d7e2ec; }
.infra-item .item-plus { color: #7fcaf0; }
.infra-item .item-body { padding-left: 84px; padding-right: 30px; }
.infra-item .item-body a { color: #fff; }
.digital-chapter { margin-top: 112px; scroll-margin-top: 128px; }
.digital-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: 44px; }
.digital-intro .section-copy { margin: 0; max-width: 34ch; }
.digital-composition { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; }
.digital-composition article { border-radius: 34px; min-width: 0; overflow: hidden; }
.digital-web { background: #eaf0f6; }
.web-art { position: relative; height: 300px; margin: 35px 36px 0; perspective: 1000px; }
.browser-object { left: 0; right: 0; top: 5px; height: 275px; border-radius: 16px; background: #fff; border-right: 7px solid #ccdce8; border-bottom: 6px solid #c0d2e0; box-shadow: 0 25px 30px #173d6018; }
.browser-top { height: 30px; display: flex; align-items: center; gap: 5px; padding: 0 13px; background: #e0e8ee; border-radius: 11px 8px 0 0; }
.browser-top>span { height: 5px; width: 5px; background: #94aabb; border-radius: 50%; }
.browser-top p { font-size: 10px; text-align: center; flex: 1; padding-right: 24px; color: var(--muted); }
.browser-body { position: relative; height: 240px; padding: 20px 24px; }
.browser-nav { display: flex; justify-content: space-between; gap: 14px; font-size: 11px; }
.browser-nav b { font-size: 14px; letter-spacing: -.04em; }
.browser-nav>span { color: var(--muted); }
.browser-copy { margin-top: 26px; }
.browser-copy>strong { font-size: 29px; line-height: 1.1; font-weight: 650; letter-spacing: -.04em; display: block; }
.browser-copy>span { display: block; font-size: 12px; margin-top: 10px; color: var(--muted); }
.browser-cta { display: inline-block; background: var(--blue); color: #fff; border-radius: 20px; font-size: 11px; margin-top: 15px; padding: 7px 13px; }
.browser-mobile { position: absolute; right: 12px; bottom: -12px; height: 164px; width: 91px; padding: 17px 10px; border: 5px solid var(--ink); border-radius: 17px; background: #f4f9fd; box-shadow: 9px 9px 0 #35a6e328; transform: rotateZ(5deg); }
.browser-mobile>span { font-size: 8px; font-weight: 600; }
.browser-mobile>strong { font-size: 19px; font-weight: 650; line-height: 1.15; display: block; margin-top: 18px; letter-spacing: -.04em; }
.browser-mobile i { display: block; width: 38px; height: 12px; background: var(--gold); border-radius: 10px; margin-top: 14px; }
.digital-text { padding: 35px 40px 38px; position: relative; z-index: 1; }
.digital-text h3 { font-size: 25px; line-height: 1.18; font-weight: 640; letter-spacing: -.035em; margin: 0; }
.digital-text p { font-size: 17px; margin-top: 15px; color: var(--muted); max-width: 43ch; }
.service-link { display: inline-flex; align-items: center; gap: 13px; font-size: 16px; font-weight: 570; color: var(--blue); margin-top: 25px; padding-block: 6px; }
.service-link svg { width: 21px; height: 21px; transition: transform 250ms var(--ease); }
.service-link:hover svg { transform: translateX(5px); }
.digital-mail { background: #eaf4fb; }
.mail-art { height: 300px; position: relative; perspective: 900px; }
.mail-art .mail-object { width: 175px; height: 138px; top: 78px; left: calc(50% - 85px); transform: translateY(var(--layer-y, 0px)) rotateZ(-9deg) rotateY(-12deg); border-radius: 24px; box-shadow: 15px 25px 0 #35a6e325; }
.mail-art .mail-object span { font-size: 76px; }
.mail-art .envelope-seam { width: 150px; height: 150px; top: -106px; }
.digital-custom { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 280px; background: #fff; }
.digital-custom .digital-text { padding: 48px; }
.custom-art { height: 240px; position: relative; perspective: 1000px; }
.module { width: 153px; height: 120px; border-radius: 23px; padding: 24px 20px; background: var(--panel); border-bottom: 6px solid #d4e0e9; border-right: 5px solid #d9e6ef; color: var(--ink); box-shadow: 10px 14px 18px #173d6011; }
.module svg { display: block; width: 30px; height: 30px; }
.module>span { display: block; font-size: 15px; font-weight: 600; margin-top: 11px; }
.module-back { left: 2%; top: 25px; z-index: 0; }
.module-mid { left: 27%; top: 60px; z-index: 1; background: #245f8e; color: #fff; border-color: #1b4669; }
.module-front { left: 53%; top: 95px; z-index: 2; background: #e1f0fa; border-color: #b2dcf3; color: #174f78; }
.contact-chapter { margin-top: 112px; margin-bottom: 40px; background: #eaf4fb; border-radius: 44px; scroll-margin-top: 128px; }
.contact-composition { display: grid; grid-template-columns: 1fr 240px; gap: 64px; align-items: center; padding: 80px 72px; }
.contact-chapter h2 { font-size: clamp(2.5rem, 4.7vw, 4.2rem); }
.contact-chapter .section-copy { max-width: 40ch; }
.contact-links { margin-top: 32px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.contact-links a:first-child { font-size: 20px; font-weight: 600; color: var(--ink); text-underline-offset: 6px; text-decoration: underline; }
.contact-links a:last-child { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--blue); padding-block: 12px; }
.contact-links svg { width: 21px; height: 21px; }
.contact-sculpture { display: block; width: 210px; height: 210px; position: relative; perspective: 900px; border-radius: 50%; }
.contact-disc { width: 190px; height: 190px; display: grid; place-items: center; background: var(--gold); color: #173d60; border-radius: 50%; border-right: 10px solid #2b8fc7; border-bottom: 12px solid #2b8fc7; box-shadow: 10px 20px 28px #4c3a1f14; }
.contact-disc svg { width: 94px; height: 94px; stroke-width: 1.2; transform: rotate(-35deg); transition: transform 400ms var(--ease); }
.contact-sculpture:hover .contact-disc svg { transform: rotate(-35deg) translateX(7px); }
.reveal-block { --entry: 1; --from-x: 0px; --from-y: 28px; }
.motion-ready .reveal-block { opacity: calc(.45 + var(--entry, 1) * .55); transform: translate3d(calc((1 - var(--entry, 1)) * var(--from-x)), calc((1 - var(--entry, 1)) * var(--from-y)), 0); }
.motion-ready [data-enter="right"] { --from-x: 36px; --from-y: 0px; }
.motion-ready [data-enter="left"] { --from-x: -36px; --from-y: 0px; }
.motion-ready .support-chapter { transform: translateY(calc((1 - var(--section-enter, 1)) * 46px)); }
.motion-ready .infra-chapter { transform: scale(calc(.965 + var(--section-enter, 1) * .035)); clip-path: inset(calc((1 - var(--section-enter, 1)) * 2%) calc((1 - var(--section-enter, 1)) * 1%) round 44px); }
.footer { padding-bottom: 38px; }
body.motion-off .reveal-block, body.motion-off .chapter, body.motion-off .hero-visual { opacity: 1 !important; transform: none !important; clip-path: none !important; }
body.motion-off .infra-stack { transform: rotateY(-18deg) rotateX(7deg) rotateZ(-4deg); }
body.motion-off .reading-track::after { transform: scaleX(1); }

@media (max-width: 1100px) {
  .hero { min-height: 530px; }
  .service-index { gap: 44px; padding-top: 85px; padding-bottom: 68px; }
  .directory-link { padding: 20px 12px; gap: 14px; }
  .directory-link strong { font-size: 21px; }
  .chapter { padding: 44px; }
  .support-composition { gap: 36px; grid-template-columns: .85fr 1.15fr; }
  .support-art { transform: scale(.85); transform-origin: left center; margin-right: -30px; }
  .infra-composition { gap: 44px; }
  .infra-item summary { padding: 24px 20px; gap: 15px; grid-template-columns: 30px minmax(0, 1fr) 18px; }
  .infra-item .item-body { padding-left: 65px; }
  .digital-intro { gap: 36px; }
  .digital-text { padding: 28px; }
  .web-art { margin-inline: 24px; }
  .browser-copy>strong { font-size: 25px; }
  .browser-copy>span { max-width: 17ch; }
  .browser-mobile { right: 6px; width: 77px; }
  .digital-custom .digital-text { padding: 34px; }
  .module { width: 130px; padding: 22px 16px; }
  .contact-composition { padding: 64px 48px; gap: 36px; grid-template-columns: 1fr 190px; }
  .contact-sculpture { transform: scale(.85); transform-origin: center; }
}
@media (max-width: 800px) {
  html { scroll-padding-top: 0; }
  #inicio, #contenido { scroll-margin-top: 108px; }
  .hero { min-height: 0; margin-top: 16px; }
  .service-index { display: block; padding-top: 64px; padding-bottom: 42px; scroll-margin-top: 108px; }
  .index-title h2 { font-size: 38px; }
  .index-title p { font-size: 17px; margin-top: 21px; }
  .service-directory { margin-top: 26px; gap: 4px; }
  .directory-link { padding: 19px 6px; gap: 15px; grid-template-columns: 32px minmax(0, 1fr) 24px; }
  .directory-symbol svg { width: 29px; height: 29px; }
  .directory-link strong { font-size: 20px; }
  .directory-link small { font-size: 16px; margin-top: 5px; }
  .directory-arrow { width: 23px; height: 23px; }
  .chapter { border-radius: 32px; padding: 35px 24px; scroll-margin-top: 108px; }
  .chapter h2, .digital-intro h2 { font-size: clamp(31px, 8.6vw, 39px); }
  .section-copy { font-size: 17px; margin-top: 21px; }
  .support-composition { display: flex; flex-direction: column; gap: 26px; align-items: stretch; }
  .support-content { order: 0; }
  .support-art { order: 1; min-height: 330px; margin: -12px auto 0; width: 300px; max-width: 100%; transform: none; }
  .support-disc { width: 250px; height: 250px; top: 25px; left: 0; }
  .large-headset { top: 36px; left: 42px; width: 140px; height: 150px; }
  .large-headset .headset-object { transform: rotateZ(-13deg) rotateY(-15deg) scale(1.5); }
  .policy-pass { left: 135px; top: 140px; width: 148px; height: 158px; }
  .pass-surface { padding: 18px; }
  .pass-surface strong { font-size: 21px; margin-top: 8px; }
  .pass-surface>span { font-size: 14px; }
  .art-caption { font-size: 14px; bottom: 0; left: 0; }
  .support-options { margin-top: 26px; gap: 12px; }
  .support-item summary { padding: 20px; min-height: 108px; }
  .service-item strong { font-size: 18px; }
  .item-description { font-size: 16px; }
  .item-body { padding-inline: 20px; }
  .infra-chapter { margin-top: 32px; }
  .infra-composition { display: block; }
  .infra-story { padding-bottom: 215px; }
  .infra-sculpture { left: 0; bottom: 12px; width: 88%; height: 175px; }
  .infra-unit { padding: 10px 15px; gap: 12px; height: 49px; box-shadow: 10px 8px 0 #0a253c; }
  .infra-unit>span { font-size: 13px; }
  .infra-unit:nth-child(2) { transform: translateX(10px); }
  .infra-unit:nth-child(3) { transform: translateX(20px); }
  .infra-options { gap: 12px; margin-top: 16px; }
  .infra-item { border-radius: 22px; }
  .infra-item summary { min-height: 132px; padding: 22px 18px; gap: 12px; grid-template-columns: 27px minmax(0, 1fr) 15px; }
  .infra-symbol { width: 25px; height: 25px; }
  .infra-item .item-body { padding-left: 22px; padding-right: 22px; }
  .digital-chapter { margin-top: 70px; scroll-margin-top: 108px; }
  .digital-intro { display: block; margin: 0 8px 28px; }
  .digital-intro .section-copy { margin-top: 22px; }
  .digital-composition { grid-template-columns: 1fr; gap: 18px; }
  .digital-composition article { border-radius: 28px; }
  .web-art { height: 246px; margin: 24px 24px 0; }
  .browser-object { height: 222px; }
  .browser-body { height: 190px; padding: 15px 16px; }
  .browser-nav { font-size: 9px; }
  .browser-nav b { font-size: 12px; }
  .browser-copy { margin-top: 22px; }
  .browser-copy>strong { font-size: 25px; }
  .browser-copy>span { font-size: 10px; max-width: 18ch; }
  .browser-cta { font-size: 9px; margin-top: 12px; }
  .browser-mobile { height: 139px; width: 72px; right: 1px; bottom: -15px; padding: 13px 8px; border-width: 4px; }
  .browser-mobile>strong { font-size: 16px; }
  .browser-mobile>span { font-size: 7px; }
  .browser-mobile i { margin-top: 10px; }
  .digital-text, .digital-custom .digital-text { padding: 25px 26px 30px; }
  .digital-text h3 { font-size: 24px; }
  .digital-text p { font-size: 16px; margin-top: 14px; }
  .service-link { font-size: 16px; margin-top: 21px; }
  .mail-art { height: 240px; }
  .mail-art .mail-object { top: 55px; width: 155px; height: 128px; left: calc(50% - 75px); }
  .digital-custom { display: flex; flex-direction: column; grid-column: auto; }
  .digital-custom .digital-text { align-self: stretch; order: 1; }
  .custom-art { order: 0; width: 100%; height: 230px; }
  .module { width: 117px; height: 108px; padding: 18px 14px; }
  .module>span { font-size: 13px; }
  .module svg { width: 27px; height: 27px; }
  .module-back { left: 4%; top: 30px; }
  .module-mid { left: 28%; top: 62px; }
  .module-front { left: 52%; top: 94px; }
  .contact-chapter { margin-top: 70px; margin-bottom: 15px; border-radius: 32px; scroll-margin-top: 108px; }
  .contact-composition { display: block; padding: 38px 26px; }
  .contact-chapter h2 { font-size: clamp(32px, 8.3vw, 40px); }
  .contact-links { margin-top: 25px; display: grid; gap: 9px; }
  .contact-links a:first-child { font-size: 20px; overflow-wrap: anywhere; }
  .contact-links a:last-child { font-size: 16px; }
  .contact-sculpture { width: 125px; height: 125px; margin-top: 32px; margin-left: auto; transform: none; }
  .contact-disc { width: 115px; height: 115px; border-right-width: 7px; border-bottom-width: 8px; }
  .contact-disc svg { width: 55px; height: 55px; }
  .motion-ready [data-enter="right"] { --from-x: 20px; }
  .motion-ready [data-enter="left"] { --from-x: -20px; }
  .motion-ready .infra-chapter { clip-path: inset(0 round 32px); }
}
@media (max-width: 370px) {
  .hero h1 { font-size: clamp(23px, 7.5vw, 27px); }
  .hero-copy .actions { display: grid; gap: 4px; }
  .hero-copy .text-link { text-align: center; }
  .brand { font-size: 21px; }
  .nav { padding-right: 14px; }
  .support-art { min-height: 310px; }
  .policy-pass { left: 118px; width: 132px; }
  .module { width: 105px; }
  .browser-copy>strong { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-block, .chapter, .hero-visual { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .service-item[open] .item-body { animation: none; }
}