/* BUHO branding y movimiento. Se carga despues del CSS compilado del landing. */
.site-header{height:136px}
.logo-image img{display:block;width:124px;height:auto;max-height:122px;object-fit:contain}
.footer .logo-image img{width:165px;max-height:none;background:transparent;border-radius:0}
.mobile-navigation{display:none}
.honeypot{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
@media(max-width:680px){
.site-header{height:105px}
.logo-image img{width:95px;max-height:96px}
.mobile-navigation{display:block;position:relative}
.mobile-navigation summary{list-style:none;cursor:pointer;background:#e9f5fd;padding:5px 12px;border-radius:5px;font-size:24px}
.mobile-navigation summary::-webkit-details-marker{display:none}
.mobile-navigation nav{position:absolute;top:48px;right:0;min-width:220px;display:flex;flex-direction:column;gap:18px;padding:22px;background:#fff;box-shadow:0 14px 20px #001a3820;border-radius:5px}
.mobile-navigation nav a{font-size:14px;font-weight:700}
}

/* ==========================================================================
   Movimiento
   Nada de esto hace falta para leer la pagina: el JS solo agrega clases y el
   estado oculto depende de .buhoo-motion, clase que pone el propio JS antes
   del primer pintado. Sin JS no se oculta nada y, si el sistema pide menos
   movimiento, no se anima ni se esconde nada.
   ========================================================================== */
@keyframes buhoo-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes buhoo-kenburns{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.08) translate3d(-1.6%,-1.2%,0)}}
@keyframes buhoo-ring{0%{box-shadow:0 0 0 0 #25d36688}70%{box-shadow:0 0 0 16px #25d36600}100%{box-shadow:0 0 0 0 #25d36600}}
@keyframes buhoo-spark{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.16) rotate(14deg)}}
@keyframes buhoo-shine{from{transform:translateX(-130%) skewX(-18deg)}to{transform:translateX(230%) skewX(-18deg)}}

@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
html{scroll-behavior:auto}
}

/* Encabezado pegajoso que se compacta al desplazarse. */
.site-header{position:sticky;top:0;z-index:60}
.logo-image img{transition:width .35s cubic-bezier(.22,.61,.36,1)}
html.buhoo-motion .site-header.is-scrolled{height:136px;box-shadow:0 12px 30px #06213a1c}
html.buhoo-motion .site-header.is-scrolled .logo-image img{width:122px}
section[id]{scroll-margin-top:118px}
@media(max-width:680px){
html.buhoo-motion .site-header.is-scrolled{height:76px}
html.buhoo-motion .site-header.is-scrolled .logo-image img{width:90px}
section[id]{scroll-margin-top:92px}
}

/* Hero: la fotografia respira y el texto entra escalonado. */
.hero{position:relative;overflow:hidden;min-height:610px;padding:80px 0;display:flex;align-items:center;background:#102a42}
.hero::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:url('../images/buho-equipo-bg.webp') center 42%/cover no-repeat;transform-origin:58% 50%}
.hero::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:linear-gradient(90deg,rgba(5,22,39,.92) 0%,rgba(5,22,39,.82) 32%,rgba(5,22,39,.48) 57%,rgba(5,22,39,.08) 100%)}
.hero .hero-grid{display:block;width:100%}
.hero .hero-copy{position:relative;z-index:2;max-width:570px;margin:0;text-align:left}
.hero h1{color:#fff;font-size:clamp(2.8rem,4.4vw,4.1rem);line-height:1.13;text-shadow:0 2px 16px #071c3455}
.hero .eyebrow{color:#1691F0}
.hero .hero-copy>p{color:#dbe8f3;font-size:16px;line-height:1.75;max-width:510px;margin:0}
.hero .actions{justify-content:flex-start;margin:30px 0 0}
.hero .actions .text-link{color:#fff}
.hero .actions .text-link:hover{color:#1691F0}
@media(max-width:680px){
.hero{min-height:650px;align-items:flex-end;padding:250px 0 50px}
.hero::before{background-position:50% top;background-size:auto 440px}
.hero::after{background:linear-gradient(180deg,rgba(5,22,39,.12) 0%,rgba(5,22,39,.25) 24%,rgba(5,22,39,.9) 55%,rgba(5,22,39,.97) 100%)}
.hero h1{font-size:clamp(2.1rem,9vw,3rem);line-height:1.12;margin:12px 0 14px}
.hero .hero-copy>p{font-size:13px;line-height:1.6}
.hero .actions{gap:16px;margin:22px 0 0}
.hero .btn{white-space:normal}
}

@media(prefers-reduced-motion:no-preference){
.hero-copy>*{animation:buhoo-rise .9s cubic-bezier(.22,.61,.36,1) both}
.hero-copy>:nth-child(2){animation-delay:.1s}
.hero-copy>:nth-child(3){animation-delay:.2s}
.hero-copy>:nth-child(4){animation-delay:.3s}
.hero-copy>:nth-child(5){animation-delay:.4s}
html.buhoo-motion .hero::before{animation:buhoo-kenburns 26s ease-in-out infinite alternate}
html.buhoo-motion .mobile-navigation nav{animation:buhoo-rise .3s cubic-bezier(.22,.61,.36,1) both}
.value-spark{animation:buhoo-spark 5.5s ease-in-out infinite}
.value-card:nth-child(2) .value-spark{animation-delay:-1.4s}
.value-card:nth-child(3) .value-spark{animation-delay:-2.8s}
.value-card:nth-child(4) .value-spark{animation-delay:-4.2s}

/* Revelado al entrar en pantalla (el JS pone .is-revealed). */
html.buhoo-motion .section-heading>*,
html.buhoo-motion .trust-grid>span,
html.buhoo-motion .about-grid>*,
html.buhoo-motion .check-list>li,
html.buhoo-motion .service-card,
html.buhoo-motion .peace-grid>div:first-child,
html.buhoo-motion .peace-card,
html.buhoo-motion .value-card,
html.buhoo-motion .contact-grid>*,
html.buhoo-motion .footer-grid>*
{opacity:0;translate:0 26px;transition:opacity .75s cubic-bezier(.22,.61,.36,1) var(--d,0ms),translate .75s cubic-bezier(.22,.61,.36,1) var(--d,0ms),scale .75s cubic-bezier(.22,.61,.36,1) var(--d,0ms),transform .3s ease,box-shadow .3s ease}
html.buhoo-motion .value-card{scale:.975}
html.buhoo-motion .section-heading>*.is-revealed,
html.buhoo-motion .trust-grid>span.is-revealed,
html.buhoo-motion .about-grid>*.is-revealed,
html.buhoo-motion .check-list>li.is-revealed,
html.buhoo-motion .service-card.is-revealed,
html.buhoo-motion .peace-grid>div:first-child.is-revealed,
html.buhoo-motion .peace-card.is-revealed,
html.buhoo-motion .value-card.is-revealed,
html.buhoo-motion .contact-grid>*.is-revealed,
html.buhoo-motion .footer-grid>*.is-revealed
{opacity:1;translate:0 0;scale:1}
}

/* Vuelta a la vida al pasar el cursor (solo donde hay cursor de verdad). */
@media(hover:hover){
.service-card:hover{transform:translateY(-7px);box-shadow:0 20px 44px #0729441f}
.service-card-media img{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.service-card:hover .service-card-media img{transform:scale(1.07)}
.service-card-glyph{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.service-card:hover .service-card-glyph{transform:translateY(-3px) rotate(-4deg) scale(1.06)}
.service-card .service-card-cta{transition:background .25s ease,color .25s ease,transform .25s ease}
.service-card:hover .service-card-cta{transform:translateX(3px)}
.value-card:hover{transform:translateY(-8px);box-shadow:0 28px 58px #071d3224;border-color:#1691f052}
.value-spark{transition:color .3s ease}
.value-card:hover .value-spark{color:#1691f0}
.peace-card:hover{transform:translateY(-6px);border-color:#2f668f;background:#183c5b}
.peace-card .icon{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.peace-card:hover .icon{transform:rotate(-6deg) scale(1.07)}
.text-link{transition:color .2s ease,gap .3s ease}
.text-link:hover{gap:19px}
.btn{position:relative;overflow:hidden}
.btn-primary{transition:transform .2s,background .2s,box-shadow .3s ease}
.btn-primary:hover{box-shadow:0 12px 26px #0678db47}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;width:42%;background:linear-gradient(90deg,#ffffff00,#ffffff52,#ffffff00);transform:translateX(-130%) skewX(-18deg);pointer-events:none}
.btn-primary:hover::after{animation:buhoo-shine .95s ease}
}

/* Servicios editables desde WordPress: imagen arriba, texto y boton "VER MAS" abajo. */
.service-card{display:flex;flex-direction:column;padding:0;overflow:hidden;min-height:0}
.service-card-media{margin:0;display:block;aspect-ratio:16/10;background:#eef5fb;overflow:hidden}
.service-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.service-card:hover .service-card-media img{transform:scale(1.03)}
.service-card-media.is-icon{display:grid;place-items:center;background:linear-gradient(135deg,#eaf6ff,#dff2ff)}
.service-card-glyph{display:grid;place-items:center;width:64px;height:64px;border-radius:14px;background:#fff;color:#1691F0;font-size:26px;font-weight:700;box-shadow:0 6px 18px #07294414}
.service-card-body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1;min-width:0}
.service-card-body h3{font-size:18px;margin:0 0 12px}
.service-card-body p{flex:1;margin:0}
.service-card .service-card-cta{align-self:flex-start;margin-top:20px;padding:10px 18px;border:1px solid var(--navy,#071d32);border-radius:4px;color:var(--navy,#071d32);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;transition:background .2s ease,color .2s ease}
.service-card .service-card-cta:hover{background:var(--navy,#071d32);color:#fff}
.service-empty{background:#fff;border:1px dashed #c9dcea;border-radius:7px;padding:24px;text-align:center;font-size:13px;color:#6E6A6B}
.service-empty a{color:#0678DB;font-weight:800}
/* Pagina de cada servicio: mismo ritmo que la portada. */
.hero-service{min-height:560px}
.hero-service::before{background-image:var(--hero-photo,url('../images/buho-equipo-bg.webp'))}
.hero-service::after{background:linear-gradient(90deg,rgba(5,22,39,.95) 0%,rgba(5,22,39,.9) 45%,rgba(5,22,39,.72) 72%,rgba(5,22,39,.42) 100%)}
.hero-service .hero-copy{max-width:640px}
.hero-back{display:inline-block;margin-bottom:20px;padding:7px 14px;border-radius:999px;background:rgba(127,195,246,.14);color:#9fd4fb;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.hero-back:hover{background:rgba(127,195,246,.24);color:#fff}
.about-grid.no-photo{grid-template-columns:1fr;max-width:820px}
.about-glyph{display:grid;place-items:center;height:510px;border-radius:12px;background:#eaf6ff;color:#0678DB;font-size:96px}
.service-detail-body{color:#6E6A6B;font-size:16px;line-height:1.85}
.service-detail-body>:first-child{margin-top:0}
.service-detail-body :is(h2,h3,h4){color:#071d32}
.service-detail-body h2{font-size:23px;margin:30px 0 10px}
.service-detail-body h3{font-size:18px;margin:26px 0 8px}
.service-detail-body p{margin:0 0 16px}
.service-detail-body ul{margin:0 0 20px;padding:0;list-style:none}
.service-detail-body li{position:relative;margin-bottom:10px;padding-left:24px}
.service-detail-body li::before{content:"✓";position:absolute;left:0;color:#0678DB;font-weight:800}
.service-detail-body img{max-width:100%;height:auto;border-radius:12px}
.service-detail-body a{color:#0678DB;font-weight:700}
.service-detail-body blockquote{margin:24px 0;padding:2px 0 2px 20px;border-left:3px solid #1691F0;color:#3d4a57}
.about .actions{margin:30px 0 0}
@media(max-width:680px){
.hero-back{margin-bottom:12px;font-size:10px}
.about-glyph{height:350px;font-size:64px}
.about .actions{gap:16px}
}

/* El logo B.U.H.O. es metal plateado: sobre el encabezado blanco las zonas claras
   se lavan. Una sombra suave despega la silueta sin cambiar el diseno. */
.site-header .logo-image img{vertical-align:top}

/* Boton flotante de WhatsApp: fijo en pantalla, con latido suave. */
.whatsapp-float{position:fixed;right:18px;bottom:20px;z-index:90;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .2s}
.whatsapp-float:hover{transform:translateY(-2px)}

/* Lista de contacto del pie: icono + texto alineados, sin saltos feos. */
.buhoo-contact{display:grid;gap:10px;margin:4px 0 12px}
.footer .buhoo-contact-item,.buhoo-contact a.buhoo-contact-item{display:flex;align-items:flex-start;gap:8px;margin:0;line-height:1.5;font-size:12px;color:#a3b9c8;text-decoration:none}
.buhoo-contact .buhoo-contact-item span:first-child{flex:none;line-height:1.4}
.buhoo-contact .buhoo-contact-label{font-weight:700;color:#cbd5e1}
.buhoo-contact .buhoo-contact-item span:last-child{word-break:break-word;overflow-wrap:anywhere}
.buhoo-contact a.buhoo-contact-item:hover{color:#1691F0}
@media(prefers-reduced-motion:no-preference){
.whatsapp-float::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;animation:buhoo-ring 2.8s ease-out infinite;pointer-events:none}
}