/* BOTÓN DE CITA · el oficial de boomatik.com, copiado de su CSS */
.boo-cita{position:fixed;top:14px;right:20px;z-index:1000;display:inline-flex;align-items:center;
 background:linear-gradient(135deg,#EC4899,#BF00FF 50%,#8B5CF6);color:#fff!important;
 font:800 13.6px/1.2 Geist,system-ui,-apple-system,sans-serif;letter-spacing:.408px;
 text-transform:uppercase;padding:13.6px 25.6px;border-radius:999px;text-decoration:none;border:0;
 box-shadow:0 10px 30px -10px rgba(191,0,255,.6);
 transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.boo-cita:hover{transform:translateY(-2px);color:#fff!important;
 box-shadow:0 16px 40px -10px rgba(191,0,255,.8)}
@media (max-width:700px){.boo-cita{top:auto;bottom:14px;right:14px;font-size:12px;padding:11px 20px}}

/* FOOTER OFICIAL · el de Odoo, a todo lo ancho de la pantalla.
   Va dentro de #wrapwrap, que lleva el margen del menú lateral; se compensa con un margen negativo del
   ancho de ese menú para que el pie llegue de borde a borde. */
#bottom,#footer,.o_footer{width:100vw!important;max-width:100vw!important;
 margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}


@media (max-width:700px){
    }


@media (max-width:700px){}

.boo-exp,.boo-exp *{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#070A0D}
.boo-exp{color:#DCE6EE;font:400 16px/1.7 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
 overflow-x:hidden;letter-spacing:.01em}
.boo-exp h1,.boo-exp h2,.boo-exp h3,.boo-exp p,.boo-exp span,.boo-exp em{color:inherit!important}

nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;padding:18px 6vw;
 background:linear-gradient(rgba(7,10,13,.82),transparent);backdrop-filter:blur(8px)}
nav b{font-weight:700;font-size:15px;letter-spacing:.34em;text-transform:uppercase}
nav small{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#5E7385}
nav .sp{flex:1}
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;font-size:11px;font-weight:700;
 letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:#070A0D;background:#E9EEF3;
 transition:transform .4s cubic-bezier(.16,1,.3,1)}
.btn:hover{transform:translateY(-2px)}
.btn.demo{background:none;color:#DCE6EE;border:1px solid rgba(220,230,238,.28)}
.btn.demo i{font-style:normal;font-size:9px;letter-spacing:.14em;opacity:.5;
 border:1px solid currentColor;padding:1px 5px}

/* LA HERO · el vídeo no se reproduce: lo arrastra el scroll. Tres pantallas de recorrido para ocho
   segundos de metraje, que es el ritmo al que el ojo sigue un plano sin marearse. */
.hero{height:500svh;position:relative}
.hero .fija{position:sticky;top:0;height:100svh;background:#070A0D}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .fija:after{content:"";position:absolute;inset:0;
 background:linear-gradient(105deg,rgba(7,10,13,.9) 0 26%,rgba(7,10,13,.5) 52%,rgba(7,10,13,.15))}
.hero .letra{position:absolute;z-index:2;left:6vw;top:50%;transform:translateY(-50%);max-width:min(460px,44%)}
.hero h1{font-size:clamp(2.4rem,6vw,4.8rem);font-weight:700;line-height:.98;letter-spacing:-.04em}
.hero h1 em{font-style:normal;display:block;color:#7FD4E8}
.hero .letra p{margin-top:20px;color:#95A8B8;font-size:clamp(15px,1.6vw,18px)}
.hero .pista{position:absolute;z-index:2;left:6vw;bottom:calc(7vh + 14px);font-size:10px;
 letter-spacing:.3em;text-transform:uppercase;color:#5E7385}

/* LOS TABLEROS · la página entera es el producto, no una cabecera con fotos debajo.
   Marc: «el objetivo es crear experiencias 3d, con variedad de menus hyperrealistas como la imagen de la
   portada». Una foto de la sala o un plato recortado no enseñan nada: se van. Cada tramo es otro tablero,
   otro encuadre, el mismo efecto. */
.tab{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden}
.tab .lienzo{position:absolute;inset:0;background:no-repeat center/cover;
 transform:scale(var(--z,1.06));transition:transform .1s linear;will-change:transform}
.tab:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.tab .dice{position:relative;z-index:2;max-width:min(440px,40%);padding:0 6vw}
.tab h2{font-size:clamp(1.7rem,3.8vw,3rem);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.tab p{margin-top:16px;color:#AFC0CE}
.tab .eti{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:#7FD4E8;margin-bottom:16px}
.tab.der{justify-items:end;text-align:right}

.t-cenital .lienzo{background-image:url(/web/content/18794/boofs2-t-cenital.jpg)}
.t-cenital:before{background:linear-gradient(90deg,rgba(7,10,13,.94) 0 34%,rgba(7,10,13,.2))}
.t-macro .lienzo{background-image:url(/web/content/18795/boofs2-t-macro.jpg)}
.t-macro:before{background:linear-gradient(270deg,rgba(7,10,13,.94) 0 32%,rgba(7,10,13,.15))}
.t-vertical{background:#07090C}
.t-vertical video.lienzo{position:absolute;right:7vw;top:9svh;left:auto;
 height:82svh;width:auto;object-fit:contain;background:none;transform:none}
.t-vertical:before{background:radial-gradient(90% 70% at 76% 50%,rgba(127,212,232,.07),transparent 60%)}
.t-vertical .dice{max-width:min(400px,40%)}
.t-mano .lienzo{background-image:url(/web/content/18796/boofs2-t-mano.jpg)}
.t-mano:before{background:linear-gradient(90deg,rgba(7,10,13,.92) 0 32%,rgba(7,10,13,.18))}

.venta{background:#0A1016;padding:14vh 6vw}
.venta h2{font-size:clamp(1.7rem,3.6vw,2.8rem);font-weight:700;letter-spacing:-.03em;max-width:20ch}
.rej{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin-top:7vh}
.rej div{border-left:1px solid rgba(127,212,232,.3);padding-left:18px}
.rej h4{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#7FD4E8;margin-bottom:10px}
.rej p{color:#95A8B8;font-size:15px}
footer{padding:7vh 6vw;text-align:center;font-size:12px;color:#4D6173;
 border-top:1px solid rgba(220,230,238,.08)}

@media (max-width:880px){
  .plato,.plato:nth-child(even){grid-template-columns:1fr;gap:5vh;min-height:auto;padding:7vh 0}
  .plato:nth-child(even) .ficha{order:0}
  .hero .letra{max-width:82%}
}
@media (prefers-reduced-motion:reduce){
  .plato .foto,.plato .ficha{opacity:1;transform:none}
}

.boo-exp{background:#070A0D}

#wrap.boo-exp h1,#wrap.boo-exp h2,#wrap.boo-exp h3,#wrap.boo-exp h4,#wrap.boo-exp h5,#wrap.boo-exp h6{color:inherit!important}
#wrap.boo-exp{overflow:visible!important}