/* Movimiento breve y consistente, sin alterar la distribución aprobada. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--motion-fast:180ms;--motion-enter:620ms}
html{scrollbar-gutter:stable;scroll-padding-bottom:100px}
html:has(dialog[open]){overflow:hidden}
::selection{background:var(--gold2);color:var(--navy)}
.site-header{transition:box-shadow 240ms ease,background-color 240ms ease}
.site-header.is-scrolled{box-shadow:0 8px 28px rgba(3,10,20,.18);background:rgba(7,17,31,.98)}
.nav a{position:relative}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--gold2);transform:scaleX(0);transform-origin:left;transition:transform 240ms var(--ease-out)}
.nav a[aria-current]{color:var(--gold2)}
.nav a[aria-current]::after{transform:scaleX(1)}
.reveal{opacity:1;transform:none;transition:opacity var(--motion-enter) var(--ease-out),transform var(--motion-enter) var(--ease-out)}
.reveal.is-pending:not(.visible){opacity:0;transform:translateY(18px)}
.service-grid>.reveal:nth-child(2),.process-list>.reveal:nth-child(2){transition-delay:70ms}
.service-grid>.reveal:nth-child(3),.process-list>.reveal:nth-child(3){transition-delay:140ms}
.reveal.visible:focus-within{transition-delay:0ms}
.reveal.is-pending:focus-within{opacity:1;transform:none}
.btn,.header-cta,.mobile-contact-bar a,.phone-option{transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,transform var(--motion-fast) var(--ease-out)}
.btn>span,.header-cta>span,.text-link>span,.service-content>b,.assistance-card>a>b{transition:transform 240ms var(--ease-out)}
.btn:active,.header-cta:active,.mobile-contact-bar a:active{transform:scale(.98)}
.phone-option:active{transform:scale(.99)}
.gallery-thumbnails button{transition:border-color 180ms ease,background-color 180ms ease,opacity 180ms ease}
.gallery-thumbnails button:hover{background:#20344c}
.phone-dialog[open],.gallery-dialog[open]{animation:dialog-enter 240ms var(--ease-out) both}
.phone-dialog[open]::backdrop,.gallery-dialog[open]::backdrop{animation:backdrop-enter 200ms ease both}
.faq-list details[open]>p{animation:content-enter 250ms var(--ease-out) both}
.faq-list summary{transition:color 180ms ease}
.faq-list summary:hover{color:#8b651d}
.faq-list summary:after{transition:background-color 180ms ease,color 180ms ease}
.contact-form input,.contact-form select,.contact-form textarea{transition:border-color 180ms ease,box-shadow 180ms ease;background:#fff}
.contact-form :is(input,textarea,select){scroll-margin-top:110px;scroll-margin-bottom:110px}
.contact-form :is(input,textarea,select):user-invalid{border-color:#b43d35;box-shadow:0 0 0 3px rgba(180,61,53,.1)}
.form-status{animation:content-enter 250ms var(--ease-out) both}
.phone-dialog-close,.gallery-close,.menu-toggle{min-width:44px;min-height:44px}
:focus-visible{outline:3px solid #b0832c;outline-offset:4px}
.site-header :focus-visible,.work :focus-visible,.project-start :focus-visible,.footer :focus-visible,dialog :focus-visible,.mobile-contact-bar :focus-visible{outline-color:var(--gold2)}
.hero-copy.visible>.kicker{animation:content-enter 500ms var(--ease-out) both}
.hero-copy.visible>h1{animation:content-enter 650ms 60ms var(--ease-out) both}
.hero-copy.visible>p{animation:content-enter 650ms 110ms var(--ease-out) both}
.hero-copy.visible>.hero-actions{animation:content-enter 650ms 160ms var(--ease-out) both}
.hero-copy.visible>.hero-note{animation:content-enter 650ms 200ms var(--ease-out) both}
@keyframes content-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@keyframes menu-enter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover) and (pointer:fine){
  .nav a:hover::after{transform:scaleX(1)}
  .btn:hover>span,.header-cta:hover>span,.text-link:hover>span,.assistance-card>a:hover>b{transform:translate(2px,-2px)}
  .service-card.visible:hover{transform:translateY(-4px);transition-delay:0ms}
  .service-card:hover .service-content>b{transform:rotate(-8deg);background:rgba(255,255,255,.12)}
  .btn-gold:hover,.header-cta:hover{box-shadow:0 8px 24px rgba(217,173,84,.18)}
}
@media(max-width:1080px){
  .nav.active{animation:menu-enter 200ms var(--ease-out) both;max-height:calc(100dvh - 170px);overflow-y:auto;overscroll-behavior:contain}
  .nav a::after{left:0;right:auto;bottom:7px;width:24px}
}
@media(max-width:760px){
  .mobile-contact-bar{transition:transform 200ms var(--ease-out)}
  body:has(.contact-form :is(input,textarea,select):focus) .mobile-contact-bar{transform:translateY(110%);pointer-events:none}
  .reveal.is-pending:not(.visible){transform:translateY(12px)}
  .service-grid>.reveal{transition-delay:0ms}
  .contact-form input,.contact-form select,.contact-form textarea{font-size:16px}
}
@media(hover:none){
  .service-card:hover,.contact-card:hover,.project-options>a:hover,.google-rating:hover,.services .section-head>.text-link:hover{transform:none}
  .service-card:hover img,.detail:hover .detail-image img{transform:none}
  .service-card-all:hover img{transform:scale(1.06);filter:blur(3px) brightness(.72)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal.is-pending:not(.visible){opacity:1;transform:none}
  .btn:hover>span,.header-cta:hover>span,.text-link:hover>span,.assistance-card>a:hover>b,.service-card.visible:hover,.service-card:hover .service-content>b{transform:none}
}
/* Contraste y lectura en las superficies claras. */
.section:not(.work):not(.project-start) .eyebrow{color:#89631f}
.contact-form label{font-size:.8rem;line-height:1.5}
.form-note{font-size:.75rem}
@media(min-width:761px){.contact-card small{font-size:.76rem}}

/* Secuencias de entrada y detalles de movimiento. */
.hero-media{animation:hero-photo-enter 2200ms var(--ease-out) both}
.hero h1 em{background-image:linear-gradient(var(--gold2),var(--gold2));background-position:left bottom;background-repeat:no-repeat;background-size:0 2px;animation:title-line 900ms 650ms var(--ease-out) forwards}
.intro-image,.about-photo{isolation:isolate}
.intro-image.visible img,.about-photo.visible img,.detail-image.visible img{animation:photo-reveal 1000ms var(--ease-out) both}
.project-options>.reveal:nth-child(2){transition-delay:90ms}
.project-options>.reveal:nth-child(3){transition-delay:180ms}
.project-options>a{position:relative;overflow:hidden}
.project-options>a::after{content:'';position:absolute;left:26px;right:26px;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold2),transparent);transform:scaleX(0);transform-origin:center;transition:transform 450ms var(--ease-out)}
.project-options>a:hover::after,.project-options>a:focus-visible::after{transform:scaleX(1)}
.process-item{position:relative}
.process-item::before{content:'';position:absolute;top:-1px;left:0;width:100%;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left}
.process-item.visible::before{animation:line-draw 750ms 180ms var(--ease-out) both}
.process-item.visible>span{animation:step-enter 600ms 100ms var(--ease-out) both}
.slide.is-active figcaption{animation:caption-enter 500ms 180ms var(--ease-out) both}
.gallery-thumbnails button img{transition:transform 400ms var(--ease-out),opacity 200ms ease}
.gallery-thumbnails button[aria-pressed=false] img{opacity:.72}
.gallery-thumbnails button[aria-pressed=true] img{opacity:1}
.gallery-thumbnails button:hover img{transform:scale(1.055);opacity:1}
.faq-list details[open]>p{animation:none}
.btn-gold,.header-cta{position:relative;overflow:hidden;isolation:isolate}
.btn-gold::after,.header-cta::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 66%);transform:translateX(-110%)}
@media(hover:hover) and (pointer:fine){
  .btn-gold:hover::after,.header-cta:hover::after{animation:button-light 650ms ease-out}
  .project-options>a.visible:hover{transform:translateY(-5px);transition-delay:0ms}
  .phone-option:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.14)}
}
@keyframes hero-photo-enter{from{transform:scale(1.075)}to{transform:scale(1)}}
@keyframes title-line{to{background-size:100% 2px}}
@keyframes photo-reveal{from{opacity:.55;clip-path:inset(0 0 10% 0 round 20px)}to{opacity:1;clip-path:inset(0 round 20px)}}
@keyframes line-draw{to{transform:scaleX(1)}}
@keyframes step-enter{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes caption-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes button-light{to{transform:translateX(110%)}}
@media(max-width:760px){
  .hero-media{animation-duration:1500ms}
  .project-options>.reveal{transition-delay:0ms}
  .intro-image.visible img,.about-photo.visible img,.detail-image.visible img{animation-duration:650ms}
}
@media(prefers-reduced-motion:reduce){
  .hero h1 em{background-size:100% 2px}
  .process-item.visible::before{transform:scaleX(1)}
  .gallery-thumbnails button:hover img,.phone-option:hover,.project-options>a.visible:hover{transform:none}
}
/* Conserva las proporciones al reservar el tamaño de los archivos. */
img{height:auto}

/* Acabado final: jerarquía, materiales y consistencia visual. */
body{-webkit-font-smoothing:antialiased}
h1,h2,h3{text-wrap:balance}
.intro-copy>p,.about-copy>p,.lead-intro>p,.contact-info>p,.detail-copy>p,.faq-list details>p{text-wrap:pretty}
.intro-copy h2,.section-head h2,.about-copy h2,.process-heading h2,.contact-info h2,.lead-intro h2,.location-copy h2{line-height:1.04}
.intro-copy h2 span,.section-head h2 span,.about-copy h2 span,.process-heading h2 span,.lead-intro h2 span,.location-copy h2 span,.faq-heading h2 span{color:#75818c}
.work .section-head h2 span{color:var(--gold2)}
.intro-copy>p:not(.eyebrow),.about-copy>p:not(.eyebrow),.lead-intro>p:not(.eyebrow),.contact-info>p:not(.eyebrow){line-height:1.8}
.intro-image img,.about-photo img{box-shadow:0 20px 48px -24px rgba(7,17,31,.3)}
.intro-image>span,.photo-label{border-radius:999px;padding:10px 15px;box-shadow:0 5px 18px rgba(7,17,31,.14);font-size:.62rem;letter-spacing:.1em}
.intro-image>span{border:1px solid rgba(240,206,123,.25);background:rgba(7,17,31,.92)}
.about-points{gap:14px;padding:22px 0}
.about-points b{color:#8b6523}.about-points span{line-height:1.5}
.btn{min-height:48px}
.btn-gold,.header-cta{box-shadow:inset 0 1px 0 rgba(255,255,255,.24)}
.btn-ghost,.btn-outline{background:rgba(7,17,31,.16)}
.service-card{border-color:rgba(7,17,31,.1);box-shadow:0 12px 30px -14px rgba(7,17,31,.28)}
.service-content p{color:#e1e6ec}
.service-content>b{background:rgba(7,17,31,.22)}
.service-card-all::before{background:rgba(7,17,31,.3)}
.project-options>a{box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.work .carousel{border:1px solid #344253;box-shadow:0 20px 45px -22px rgba(0,0,0,.5)}
.slide figcaption{max-width:calc(100% - 68px);padding:12px 17px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(7,17,31,.68);backdrop-filter:blur(12px)}
.gallery-thumbnails button{box-shadow:0 4px 12px rgba(0,0,0,.1)}
.gallery-thumbnails button[aria-pressed=true]{background:#25354a}
.detail-num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#f7efdc;border:1px solid #eddfbd;color:#89631f;font-size:.75rem}
.contact-form{box-shadow:0 24px 64px -28px rgba(7,17,31,.18)}
.contact-form input::placeholder,.contact-form textarea::placeholder{font-weight:400;color:#78828d;opacity:1}
.contact-form input,.contact-form textarea{font-weight:400}
.contact-form input:not([type=checkbox]),.contact-form select{min-height:50px}
.form-top strong{font-size:1.08rem}
.contact-card{border-color:#e3e2dc;box-shadow:0 9px 22px -17px rgba(7,17,31,.22)}
.contact-card strong{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#f4f1ea;color:#89631f;font-size:.9rem}
.faq-list summary{line-height:1.5}
.phone-dialog{background:radial-gradient(ellipse at top left,rgba(217,173,84,.1),transparent 65%),var(--navy)}
.phone-option{border-color:rgba(217,173,84,.55);background:rgba(255,255,255,.025)}
.phone-option>span{font-size:.9rem}.phone-option>strong{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.footer-main p{color:#a5afbb}.footer-bottom{color:#9ba6b4;margin-top:32px;font-size:.72rem}
.footer-signature{color:#344357;border-top-color:#253140}
.footer-contact a,.footer-nav a{text-underline-offset:5px}
.footer-contact a:hover,.footer-nav a:hover{text-decoration:underline}
@media(max-width:760px){
  .section-head{gap:24px}
  .intro-image>span,.photo-label{font-size:.56rem;left:14px;right:auto;bottom:14px;padding:9px 12px}
  .slide figcaption{left:12px;bottom:12px;max-width:calc(100% - 24px);padding:10px 12px;gap:4px 10px;border-radius:12px}
  .slide figcaption b{font-size:1rem}.slide figcaption span{font-size:.7rem}
  .about-points{gap:10px}
  .contact-card{padding:17px 14px;column-gap:12px}
  .footer-bottom{margin-top:24px;padding-top:20px}
}