/* Portada: reglas del diseño "CRESPO Web" (el resto del estilo va en línea en index.html). */
:root { --color-bg: #f3f2f2; }
p { margin: 0 0 12px; }
button { font: inherit; color: inherit; }
#contacto a[data-btn]:hover { border-color: #6f9fe0; }
[data-wavebar] > span { flex: 1 1 0; min-width: 1px; transition: opacity .15s; transform-origin: center; animation: crespo-wave .55s cubic-bezier(.2,.8,.2,1) backwards; }
[data-eq] { display: none; align-items: center; gap: 2px; height: 12px; }
[data-eq] > span { display: block; width: 3px; height: 4px; background: currentColor; transition: height .35s cubic-bezier(.4,0,.2,1); }
[data-playing] [data-eq] { display: flex; }
[data-playing] [data-tri] { display: none; }

@keyframes crespo-run{0%{transform:translateY(-16px)}100%{transform:translateY(56px)}}

@keyframes crespo-eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
[data-btn]{transition:transform .12s ease-out,background-color .25s,color .25s,border-color .25s}
[data-btn]:active{transform:scale(.97)}
[data-fx=sweep]{position:relative;overflow:hidden;isolation:isolate}
[data-fx=sweep]::before{content:"";position:absolute;inset:0;background:var(--h);z-index:-1;transform:translate(var(--fx,-101%),var(--fy,0));transition:transform .28s cubic-bezier(.6,0,.2,1)}
[data-fx=sweep].nt:not(.in)::before{transition:none}
[data-fx=sweep].in::before{transform:translate(0,0)}
[data-fx=sweep].in{color:var(--hc) !important}
[data-spot]{background-image:radial-gradient(220px circle at var(--mx,-300px) var(--my,-300px),var(--sp),transparent 70%)}
[data-tilt]{transition:transform .45s cubic-bezier(.2,.8,.2,1);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
[data-tilt].mv{transition:transform .08s linear}
[data-tilt] [data-depth]{transition:transform .45s cubic-bezier(.2,.8,.2,1);transform:translate(var(--px,0),var(--py,0))}
[data-rv]{opacity:0;translate:0 18px;will-change:opacity,translate;transition:opacity .55s cubic-bezier(.2,.8,.2,1) var(--d,0s),translate .55s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
[data-rv][data-tilt]{transition:opacity .55s cubic-bezier(.2,.8,.2,1) var(--d,0s),translate .55s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .45s cubic-bezier(.2,.8,.2,1)}
[data-rv][data-tilt].mv{transition:opacity .55s cubic-bezier(.2,.8,.2,1) var(--d,0s),translate .55s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .08s linear}
[data-rv].vis{opacity:1;translate:none}
[data-sps]{background-color:#f3f2f2;background-image:radial-gradient(60px circle at var(--lx,-400px) var(--ly,-400px),rgba(64,135,226,var(--a,0)),rgba(64,135,226,0) 100%)}
[data-spt]{-webkit-background-clip:text;background-clip:text;color:transparent !important;background-image:radial-gradient(170px circle at var(--lx,-400px) var(--ly,-400px),rgba(111,159,224,var(--a,0)) 0%,rgba(111,159,224,var(--a,0)) 32%,rgba(111,159,224,0) 72%),linear-gradient(var(--base,#f3f2f2),var(--base,#f3f2f2))}
@media (prefers-reduced-motion:reduce){[data-rv]{opacity:1;translate:none;transition:none}}
[data-flap]>span{display:inline-block;box-sizing:border-box;white-space:pre;overflow:hidden;flex:none;cursor:default;transition:color .25s,border-color .25s}
[data-flap]>span:hover{color:#4087E2;border-color:#4087E2}
[data-cart]::before{content:"";position:absolute;inset:0;background:#f3f2f2;z-index:-1;transform:scaleX(0);transform-origin:left}
@keyframes ct-drop{0%{opacity:0;transform:translateY(-18px)}30%{opacity:1}100%{opacity:1;transform:translateY(4px)}}
@keyframes ct-bump{0%,100%{transform:none}45%{transform:translateY(2px) scaleY(.88)}75%{transform:translateY(-1px)}}
@keyframes ct-drive{0%{transform:none}25%{transform:translateX(48px)}26%{transform:translateX(-240px)}100%{transform:none}}
@keyframes ct-trail{0%,26%{transform:scaleX(0)}100%{transform:scaleX(1)}}
[data-cart]:hover .ct-item{animation:ct-drop .38s cubic-bezier(.5,0,1,.6) forwards}
[data-cart]:hover svg{animation:ct-bump .35s .36s ease-out}
[data-cart]:hover .ct-i{animation:ct-drive 1s .72s cubic-bezier(.5,0,.3,1) forwards}
[data-cart]:hover::before{animation:ct-trail 1s .72s cubic-bezier(.5,0,.3,1) forwards}
@media (prefers-reduced-motion:reduce){[data-cart] *,[data-cart]::before{animation:none !important}}
@keyframes b9-rot{to{transform:rotate(360deg)}}

@media (max-width:760px){.b9-x{display:none}}

@media (prefers-reduced-motion:reduce){.b9-seal svg{animation:none}}
@property --mt{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes mt-spin{to{--mt:360deg}}
[data-metal]{background:conic-gradient(from var(--mt),#5b6470,#f4f6f8 8%,#8a94a3 16%,#2b3038 26%,#c9d6e8 36%,#7fa6e0 42%,#f3f2f2 50%,#3a4049 60%,#b9c2cc 70%,#ffffff 76%,#6f9fe0 84%,#4a525d 92%,#5b6470);animation:mt-spin 6s linear infinite}
[data-metal]::after{content:"";position:absolute;inset:-6px;z-index:-1;background:inherit;filter:blur(10px);opacity:.35;pointer-events:none}
[data-metal]:hover{animation-duration:2.2s}
[data-metal]:hover::after{opacity:.6}
@media (prefers-reduced-motion:reduce){[data-metal]{animation:none}}
@media (max-width:760px){
[data-agh]{display:none !important}
[data-agr]{grid-template-columns:minmax(0,1fr) auto !important;row-gap:10px !important;column-gap:16px !important}
[data-agr]>*:nth-child(1){grid-area:1/1}
[data-agr]>*:nth-child(5){grid-area:1/2;justify-self:end}
[data-agr]>*:nth-child(2){grid-area:2/1/3/3}
[data-agr]>*:nth-child(3){grid-area:3/1}
[data-agr]>*:nth-child(4){grid-area:3/2;justify-self:end}
}
@media (max-width:640px){
[data-burger]{display:block !important}
[data-nvslide]{position:absolute !important;top:44px;left:0;right:0;margin:0 !important;flex-direction:column;flex-wrap:nowrap !important;gap:0 !important;padding:8px clamp(16px,3vw,40px) 16px;background:rgba(15,17,20,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:2px solid rgba(243,242,242,.25);font-size:14px !important;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
[data-nvslide] [data-pill]{display:none}
[data-nvslide] [data-nv]{padding:16px 0 !important;border-bottom:1px solid rgba(243,242,242,.15)}
[data-nvslide] [data-nv]{color:#f3f2f2 !important;opacity:1 !important}
[data-nvslide] [data-nv]:last-child{border-bottom:0;color:#6f9fe0 !important}
[data-nvslide] [data-nv]:active{color:#6f9fe0 !important}
header.open [data-nvslide]{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
header.open [data-burger] span:first-child{transform:translateY(4px) rotate(45deg)}
header.open [data-burger] span:last-child{transform:translateY(-4px) rotate(-45deg)}
}
@media (hover:none){
[data-tilt]{transform:none !important}
[data-tilt] [data-depth]{transform:none !important}
[data-spot]{background-image:none !important}
[data-fx=sweep]:active{color:var(--hc) !important}
[data-fx=sweep]:active::before{transform:translate(0,0)}
[data-flap]>span:hover{color:inherit;border-color:#f3f2f2}
[data-metal]:hover{animation-duration:6s}
}
@keyframes crespo-wave{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* Las animaciones en bucle solo corren cuando su sección está en pantalla (clase puesta por main.js). */
[data-metal]:not(.on-screen), [data-metal]:not(.on-screen)::after { animation-play-state: paused; }