/* Estilos propios de BIVIEX (encabezado, popup, demo, animaciones…). Se cargan después de site.css. */
/* ═════ estilos de los bloques añadidos (Cómo trabajamos 5 pasos, Sectores, Beneficios, Por qué BIVIEX, CTA final) */
.bvx-span-all{grid-column:1/-1}
.bvx-center-header{align-items:center;text-align:center;margin-inline:auto}
.bvx-pill{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border-strong);background:var(--surface);border-radius:9999px;padding:.375rem .875rem;font-size:.875rem;font-weight:600;line-height:1.25}
.bvx-dot{width:.5rem;height:.5rem;border-radius:9999px;background:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent)}
.bvx-benefits{display:grid;gap:1rem}
.bvx-benefits>li{background:var(--surface);border:1px solid var(--border);border-radius:20px;display:flex;flex-direction:column;gap:.75rem;padding:1.5rem}
.bvx-compare{display:grid;gap:1rem}
.bvx-compare-col{border:1px solid var(--border);border-radius:20px;background:var(--surface);padding:1.5rem}
.bvx-compare-col--us{border-color:color-mix(in srgb,var(--primary) 60%,var(--border));background:color-mix(in srgb,var(--primary) 9%,var(--surface))}
.bvx-compare-title{text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem}
.bvx-compare-item{padding-block:1rem;border-top:1px solid var(--border)}
.bvx-compare-item:first-child{border-top:0}
.bvx-about{display:flex;flex-direction:column;gap:1.25rem;margin-top:1rem;border:1px solid var(--border);border-radius:20px;background:var(--surface);padding:1.5rem}
.bvx-avatars{display:flex;flex-shrink:0}
.bvx-avatar{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:9999px;border:3px solid var(--surface);font-family:var(--font-sora);font-weight:700;font-size:1.05rem}
.bvx-avatar--b{background:var(--surface-2);color:var(--text)}
.bvx-avatar--v{background:var(--primary);color:#fff;margin-left:-.75rem}
.bvx-cta-row{display:flex;flex-direction:column;align-items:center;gap:.75rem}
@media (min-width:40rem){
.bvx-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
.bvx-about{flex-direction:row;align-items:center;gap:1.75rem;padding:2rem}
.bvx-cta-row{flex-direction:row;flex-wrap:wrap;justify-content:center}
}
@media (min-width:48rem){
.bvx-steps5{grid-template-columns:repeat(5,minmax(0,1fr))}
.bvx-steps5-line{right:9%}
.bvx-compare{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.bvx-compare-col{padding:2rem}
.bvx-benefits>li{padding:1.5rem}
}
@media (min-width:64rem){
.bvx-benefits{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ═════ popup "Reserva tu auditoría" */
.bvx-modal-open,.bvx-modal-open body{overflow:hidden}
.bvx-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.bvx-modal[hidden]{display:none}
.bvx-modal-backdrop{position:absolute;inset:0;background:#000000a6;backdrop-filter:blur(4px)}
.bvx-modal-panel{position:relative;width:100%;max-width:600px;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:20px;padding:28px 20px 24px;box-shadow:0 25px 50px -12px #00000080}
.bvx-modal-close{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;color:var(--muted);background:transparent;border:0;cursor:pointer}
.bvx-modal-close:hover{color:var(--text);background:var(--surface-2)}
.bvx-modal-close svg{width:22px;height:22px}
.bvx-modal-close:focus-visible,.bvx-submit:focus-visible,.bvx-secondary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.bvx-modal-title{font-family:var(--font-sora);font-weight:600;font-size:1.6rem;line-height:1.2;padding-right:44px}
.bvx-modal-sub{color:var(--muted);margin-top:.4rem}
.bvx-modal-body{margin-top:1.5rem}
.bvx-form{display:flex;flex-direction:column;gap:1rem}
.bvx-row{display:grid;gap:1rem}
.bvx-field{display:grid;gap:.45rem;min-width:0}
.bvx-field>label{font-size:.95rem;font-weight:500}
.bvx-input{width:100%;min-height:48px;border-radius:10px;border:1px solid var(--border-strong);background:var(--bg);color:var(--text);padding:.7rem 1rem;font:inherit;font-size:1rem;outline:none;transition:border-color .2s}
.bvx-input::placeholder{color:color-mix(in srgb,var(--muted) 80%,transparent)}
.bvx-input:focus-visible{border-color:var(--focus);outline:2px solid var(--focus);outline-offset:1px}
.bvx-input[aria-invalid=true]{border-color:var(--danger)}
.bvx-textarea{min-height:110px;resize:vertical}
.bvx-select-wrap{position:relative}
.bvx-select{appearance:none;padding-right:2.5rem}
.bvx-select option{background:var(--surface);color:var(--text)}
.bvx-select-arrow{position:absolute;right:12px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.bvx-check{display:flex;align-items:flex-start;gap:.75rem}
.bvx-check input{width:22px;height:22px;margin-top:1px;flex-shrink:0;accent-color:var(--primary);cursor:pointer}
.bvx-check label{color:var(--muted);font-size:.9rem;line-height:1.5}
.bvx-check a,.bvx-hint a,.bvx-consent a{color:var(--primary-ink);text-decoration:underline}
.bvx-rgpd,.bvx-hint{color:var(--muted);font-size:.8rem;line-height:1.5}
.bvx-error{color:var(--danger);font-size:.875rem;font-weight:500}
.bvx-error:empty{display:none}
.bvx-form-error{border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);color:var(--danger);border-radius:10px;padding:.75rem;font-size:.875rem}
.bvx-form-error[hidden]{display:none}
.bvx-honeypot{position:absolute;left:-9999px;width:0;height:0;overflow:hidden}
.bvx-submit{min-height:48px;border:0;border-radius:10px;padding:0 1.5rem;color:var(--on-gradient);font:inherit;font-weight:600;font-size:1rem;cursor:pointer;transition:opacity .2s}
.bvx-submit:hover{opacity:.9}
.bvx-submit:disabled{opacity:.6;cursor:wait}
.bvx-ok{font-family:var(--font-sora);font-weight:600;font-size:1.1rem;margin-bottom:1rem}
.bvx-cal{margin-bottom:1rem}
.bvx-cal-frame{width:100%;height:560px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.bvx-consent{display:flex;flex-direction:column;gap:.75rem;border:1px solid var(--border);border-radius:16px;padding:1.25rem;color:var(--muted)}
.bvx-consent-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.bvx-secondary{min-height:44px;border:1px solid var(--border-strong);border-radius:10px;padding:0 1.25rem;background:transparent;color:var(--text);font:inherit;font-weight:600;cursor:pointer}
.bvx-secondary:hover{background:var(--surface-2)}
@media (min-width:40rem){
.bvx-modal-panel{padding:36px 36px 32px}
.bvx-row{grid-template-columns:1fr 1fr}
}

/* ═════ Encabezado flotante ═════
   Colores por tema: en claro, barra blanca translúcida con texto oscuro; en oscuro, cristal oscuro. */
.br-nav{--nav-bg:rgba(255,255,255,.72);--nav-bg-open:rgba(255,255,255,.95);--nav-border:rgba(11,12,26,.08);--nav-text:#3a3f55;--nav-strong:#0b0c1a;--nav-hover:rgba(11,12,26,.05);--nav-shadow:0 10px 30px -14px rgba(11,12,26,.25);--cta-bg:#0b0c1a;--cta-text:#fff;--chip-bg:rgba(255,255,255,.16)}
@media (prefers-color-scheme:dark){.br-nav{--nav-bg:rgba(15,16,32,.6);--nav-bg-open:rgba(15,16,32,.95);--nav-border:rgba(255,255,255,.1);--nav-text:rgba(237,238,245,.8);--nav-strong:#fff;--nav-hover:rgba(255,255,255,.06);--nav-shadow:0 12px 40px 0 rgba(0,0,0,.35);--cta-bg:#fff;--cta-text:#101012;--chip-bg:rgba(16,16,18,.08)}}
:root{--br-spring:cubic-bezier(.22,.9,.3,1);--br-tween:cubic-bezier(.44,0,.56,1);--br-tween-logo:cubic-bezier(.25,.1,.25,1)}
@supports (transition-timing-function: linear(0, 1)){:root{--br-spring:linear(0, 0.0224, 0.0794, 0.1581, 0.2486, 0.3435, 0.4375, 0.5269, 0.6093, 0.6833, 0.7484, 0.8044, 0.8518, 0.8911, 0.9231, 0.9487, 0.9688, 0.9841, 0.9954, 1.0036, 1.0091, 1.0125, 1.0144, 1.0151, 1.015, 1.0142, 1.0131, 1.0118, 1.0104, 1.0089, 1.0076, 1)}}
#contenido{padding-top:96px}
main section[id]{scroll-margin-top:96px}
/* El fundido se hace en la propia barra (no en .br-nav): si lo hace el contenedor, el navegador no aplica
   el desenfoque del fondo durante el fundido y la barra se ve transparente y "salta" al final. */
.br-nav{position:fixed;top:24px;left:50%;z-index:50;width:min(1100px,94%);transform:translateX(-50%)}
.br-nav.is-hidden{pointer-events:none}
.br-nav.is-hidden .br-nav-bar{opacity:0}
.br-nav-bar{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 20px;border-radius:16px;background:var(--nav-bg);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);border:1px solid var(--nav-border);box-shadow:var(--nav-shadow);transition:background-color .3s ease,opacity .4s var(--br-spring)}
.br-nav.is-open .br-nav-bar{background:var(--nav-bg-open)}
.br-nav-top{display:flex;align-items:center;justify-content:space-between;flex:none}
.br-nav-logo{display:flex;align-items:center;min-height:40px;text-decoration:none;transition:opacity .2s var(--br-tween-logo)}
.br-nav-logo img{display:block;height:28px;width:auto}
.br-nav-logo:hover{opacity:.65}
.br-nav-panel{display:flex;align-items:center;flex:1 1 auto;justify-content:space-between;gap:16px}
.br-nav-links{display:flex;align-items:center;justify-content:center;flex:1 1 auto;gap:2px}
.br-nav-links a{display:flex;align-items:center;padding:8px 12px;border-radius:8px;color:var(--nav-text);text-decoration:none;font-size:15px;font-weight:500;line-height:1.4;white-space:nowrap;transition:color 1s var(--br-spring),background-color 1s var(--br-spring)}
.br-nav-links a:hover{color:var(--nav-strong);background:var(--nav-hover)}
.br-nav-cta{display:inline-flex;align-items:center;gap:10px;flex:none;padding:6px 6px 6px 14px;border-radius:11px;background:var(--cta-bg);color:var(--cta-text);text-decoration:none;font-size:15px;font-weight:600;line-height:1.4;white-space:nowrap}
.br-nav-chip{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--chip-bg);color:inherit;flex:none}
.br-nav-toggle{display:none;position:relative;width:40px;height:40px;margin-right:-8px;border:0;padding:0;background:transparent;cursor:pointer}
.br-nav-icon{position:absolute;left:8px;top:8px;width:24px;height:24px}
.br-nav-icon span{position:absolute;left:3px;width:18px;height:2px;border-radius:32px;background:var(--nav-strong);transition:top .2s var(--br-tween),transform .2s var(--br-tween)}
.br-nav-icon span:first-child{top:7px}
.br-nav-icon span:last-child{top:15px}
.br-nav.is-open .br-nav-icon span{top:11px}
.br-nav.is-open .br-nav-icon span:first-child{transform:rotate(45deg)}
.br-nav.is-open .br-nav-icon span:last-child{transform:rotate(-45deg)}
.br-nav a:focus-visible,.br-nav button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:1079px){
  #contenido{padding-top:80px}
  main section[id]{scroll-margin-top:80px}
  .br-nav{top:16px;width:92%}
  .br-nav-bar{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;height:56px;overflow:hidden;padding:8px 8px 12px 16px;transition:height .4s var(--br-spring),background-color .3s ease,opacity .4s var(--br-spring)}
  .br-nav-top{height:40px;padding-right:8px}
  .br-nav-toggle{display:block}
  .br-nav-panel{flex-direction:column;align-items:stretch;gap:8px;visibility:hidden}
  .br-nav.is-open .br-nav-panel,.br-nav.is-animating .br-nav-panel{visibility:visible}
  .br-nav-links{flex-direction:column;align-items:stretch;gap:2px;padding:8px 8px 4px 0;border-top:1px solid var(--nav-border)}
  .br-nav-links a{height:40px;box-sizing:border-box;padding:8px 12px;font-size:15px}
  .br-nav-cta{justify-content:space-between;width:100%;box-sizing:border-box;padding:8px 8px 8px 16px;margin-right:0;white-space:normal}
}
@media (prefers-reduced-motion:reduce){.br-nav,.br-nav-bar,.br-nav-links a,.br-nav-icon span{transition:none}}

/* ═════ fotos de "¿Quiénes somos?" */
img.bvx-avatar{object-fit:cover;background:var(--surface-2)}

/* ═════ destino de los botones "Hablemos" / "Reserva tu auditoría" */
#cta-final{scroll-margin-top:140px}

/* ═════ animaciones de los botones.
   Al pasar el ratón: el botón se eleva 2px, los principales brillan y los secundarios iluminan el borde;
   las flechas avanzan y los iconos crecen un poco. Al pulsar: se hunde (scale .97) con respuesta inmediata.
   Hover solo con ratón; con "reducir movimiento" se quitan los desplazamientos y se mantienen los cambios de color. */
:root{--bvx-ease-out:cubic-bezier(.23,1,.32,1)}
[class*="transition-[transform,opacity,background-color,border-color]"],.br-nav-cta,.bvx-submit,.bvx-secondary,.bvx-modal-close,ul[aria-label="Redes sociales"] a,.bvx-span-all>a{transition-property:translate,scale,opacity,background-color,border-color,color,box-shadow;transition-duration:200ms;transition-timing-function:var(--bvx-ease-out)}
[class*="transition-[transform,opacity,background-color,border-color]"] svg,.br-nav-chip svg{transition:translate 200ms var(--bvx-ease-out),scale 200ms var(--bvx-ease-out)}
[class*="transition-[transform,opacity,background-color,border-color]"]:active:not(:disabled),.br-nav-cta:active,.bvx-submit:active:not(:disabled),.bvx-secondary:active,ul[aria-label="Redes sociales"] a:active{scale:.97;translate:0 0;transition-duration:100ms}
.bvx-modal-close:active{scale:.92;transition-duration:100ms}
.bvx-span-all>a:active{scale:.99;translate:0 0;transition-duration:100ms}
@media (hover:hover) and (pointer:fine){
[class*="transition-[transform,opacity,background-color,border-color]"]:hover:not(:disabled),.br-nav-cta:hover,.bvx-submit:hover:not(:disabled),.bvx-secondary:hover,ul[aria-label="Redes sociales"] a:hover,.bvx-span-all>a:hover{translate:0 -2px}
[class*="transition-[transform,opacity,background-color,border-color]"].bg-brand:hover:not(:disabled),.bvx-submit:hover:not(:disabled){opacity:1;box-shadow:0 12px 28px -12px color-mix(in srgb,var(--primary) 75%,transparent),0 4px 12px -6px color-mix(in srgb,var(--accent) 45%,transparent)}
[class*="transition-[transform,opacity,background-color,border-color]"][class*="border-border-strong"]:hover:not(:disabled),.bvx-secondary:hover,ul[aria-label="Redes sociales"] a:hover{border-color:color-mix(in srgb,var(--primary) 60%,var(--border-strong));box-shadow:0 10px 24px -14px color-mix(in srgb,var(--primary) 60%,transparent)}
.br-nav-cta:hover{box-shadow:0 8px 22px -10px rgba(255,255,255,.45)}
[class*="transition-[transform,opacity,background-color,border-color]"]:hover svg.lucide-arrow-right{translate:3px 0}
[class*="transition-[transform,opacity,background-color,border-color]"]:hover svg:not(.lucide-arrow-right):not(.lucide-chevron-down){scale:1.1}
.br-nav-cta:hover .br-nav-chip svg{translate:2px -2px}
.bvx-modal-close:hover{color:var(--text)}
[class*="transition-[transform,opacity,background-color,border-color]"]:active:not(:disabled),.br-nav-cta:active,.bvx-submit:active:not(:disabled),.bvx-secondary:active,ul[aria-label="Redes sociales"] a:active,.bvx-span-all>a:active{translate:0 0}
}
@media (prefers-reduced-motion:reduce){
[class*="transition-[transform,opacity,background-color,border-color]"],.br-nav-cta,.bvx-submit,.bvx-secondary,.bvx-modal-close,ul[aria-label="Redes sociales"] a,.bvx-span-all>a,[class*="transition-[transform,opacity,background-color,border-color]"] svg,.br-nav-chip svg{translate:none!important;scale:none!important}
}

/* ═════ "¿Tu sector no está?" — al pasar el ratón: un haz de luz recorre el borde, se enciende un
   brillo suave y la flecha sale por la derecha mientras entra otra por la izquierda */
@property --bvx-beam{syntax:"<angle>";inherits:false;initial-value:0deg}
.bvx-span-all>a{position:relative;isolation:isolate}
.bvx-span-all>a::before,.bvx-span-all>a::after{content:"";position:absolute;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 350ms ease}
.bvx-span-all>a::before{inset:0;z-index:-1;
  background:radial-gradient(120% 140% at 0% 50%,color-mix(in srgb,var(--primary) 16%,transparent),transparent 60%),radial-gradient(80% 140% at 100% 50%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%)}
.bvx-span-all>a::after{inset:-1px;padding:1.5px;
  background:conic-gradient(from var(--bvx-beam),transparent 0deg 220deg,var(--primary) 285deg,var(--accent) 335deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@keyframes bvx-beam{to{--bvx-beam:360deg}}
.bvx-go{position:relative;display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:9999px;overflow:hidden;
  border:1px solid var(--border-strong);color:var(--primary-ink,var(--primary));transition:background-color 300ms ease,border-color 300ms ease,color 300ms ease}
.bvx-go svg{grid-area:1/1;transition:translate 450ms var(--bvx-ease-out)}
.bvx-go svg+svg{translate:-150% 0}
.bvx-span-all>a:hover,.bvx-span-all>a:focus-visible{border-color:transparent}
.bvx-span-all>a:hover::before,.bvx-span-all>a:hover::after,.bvx-span-all>a:focus-visible::before,.bvx-span-all>a:focus-visible::after{opacity:1}
.bvx-span-all>a:hover::after,.bvx-span-all>a:focus-visible::after{animation:bvx-beam 2.6s linear infinite}
.bvx-span-all>a:hover .bvx-go,.bvx-span-all>a:focus-visible .bvx-go{background:linear-gradient(135deg,var(--primary),var(--accent));border-color:transparent;color:#fff}
.bvx-span-all>a:hover .bvx-go svg:first-child,.bvx-span-all>a:focus-visible .bvx-go svg:first-child{translate:150% 0}
.bvx-span-all>a:hover .bvx-go svg+svg,.bvx-span-all>a:focus-visible .bvx-go svg+svg{translate:0 0;transition-delay:80ms}
@media (prefers-reduced-motion:reduce){
  .bvx-span-all>a::after{animation:none!important;background:linear-gradient(90deg,var(--primary),var(--accent))}
  .bvx-go svg{transition:none}
}

/* ═════ preguntas frecuentes — la respuesta se despliega suave (altura), aparece con un fundido que se enfoca,
   y se recoge más rápido de lo que se abre. El chevron gira con la misma curva. */
[data-slot="accordion-content"]{overflow:hidden}
[data-slot="accordion-content"][data-state="open"]{animation:bvx-acc-open 360ms var(--bvx-ease-out)}
[data-slot="accordion-content"][data-state="closed"]{animation:bvx-acc-close 220ms cubic-bezier(.4,0,.2,1)}
[data-slot="accordion-content"][data-state="open"]>div{animation:bvx-acc-text 420ms var(--bvx-ease-out)}
@keyframes bvx-acc-open{from{height:0;opacity:0}to{height:var(--radix-accordion-content-height);opacity:1}}
@keyframes bvx-acc-close{from{height:var(--radix-accordion-content-height);opacity:1}to{height:0;opacity:0}}
@keyframes bvx-acc-text{from{opacity:0;translate:0 -8px;filter:blur(4px)}to{opacity:1;translate:0 0;filter:blur(0)}}
[data-slot="accordion-trigger"]>svg{transition:rotate 320ms var(--bvx-ease-out),transform 320ms var(--bvx-ease-out),color 200ms ease}
[data-slot="accordion-trigger"][data-state="open"]>svg{color:var(--primary-ink)}
@media (prefers-reduced-motion:reduce){
[data-slot="accordion-content"][data-state="open"]{animation:bvx-acc-fade 200ms ease}
[data-slot="accordion-content"][data-state="closed"]{animation:none}
[data-slot="accordion-content"][data-state="open"]>div{animation:none}
}
@keyframes bvx-acc-fade{from{opacity:0}to{opacity:1}}

/* ═════ popup de reserva — entrada con fundido y ligero crecimiento desde el centro; salida más rápida */
.bvx-modal-backdrop{opacity:0;transition:opacity 220ms ease}
.bvx-modal-panel{opacity:0;scale:.96;translate:0 10px;transition:opacity 260ms var(--bvx-ease-out),scale 320ms var(--bvx-ease-out),translate 320ms var(--bvx-ease-out)}
.bvx-modal.is-open .bvx-modal-backdrop{opacity:1}
.bvx-modal.is-open .bvx-modal-panel{opacity:1;scale:1;translate:0 0}
.bvx-modal:not(.is-open) .bvx-modal-panel{transition-duration:160ms;transition-timing-function:ease-in-out}
.bvx-modal:not(.is-open) .bvx-modal-backdrop{transition-duration:180ms}
.bvx-modal.is-open .bvx-form>*{animation:bvx-pop-in 420ms var(--bvx-ease-out) both}
.bvx-modal.is-open .bvx-form>*:nth-child(1){animation-delay:60ms}
.bvx-modal.is-open .bvx-form>*:nth-child(2){animation-delay:100ms}
.bvx-modal.is-open .bvx-form>*:nth-child(3){animation-delay:140ms}
.bvx-modal.is-open .bvx-form>*:nth-child(4){animation-delay:180ms}
.bvx-modal.is-open .bvx-form>*:nth-child(n+5){animation-delay:220ms}
@keyframes bvx-pop-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}

/* ═════ "¿Quiénes somos?" — al pasar el ratón las fotos se separan y la que está debajo del cursor
   crece y se ilumina con un anillo morado */
img.bvx-avatar{position:relative;transition:translate 320ms var(--bvx-ease-out),scale 320ms var(--bvx-ease-out),rotate 320ms var(--bvx-ease-out),box-shadow 250ms ease}
@media (hover:hover) and (pointer:fine){
.bvx-avatars:hover .bvx-avatar--b{translate:-6px 0;rotate:-4deg}
.bvx-avatars:hover .bvx-avatar--v{translate:6px 0;rotate:4deg}
.bvx-avatars img.bvx-avatar:hover{scale:1.14;rotate:0deg;z-index:2;box-shadow:0 0 0 2px var(--primary),0 12px 26px -10px color-mix(in srgb,var(--primary) 75%,transparent)}
}

/* ═════ Calculadora ═════
   Deslizadores: barra fina con el tramo recorrido en degradado y punto con borde morado. */
.bvx-range{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y;--fill:50%}
.bvx-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--accent)) 0/var(--fill) 100% no-repeat,var(--surface-2)}
.bvx-range::-moz-range-track{height:6px;border-radius:999px;background:var(--surface-2)}
.bvx-range::-moz-range-progress{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--accent))}
.bvx-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:var(--text);border:2px solid var(--primary);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:scale 200ms var(--bvx-ease-out),box-shadow 200ms ease}
.bvx-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--text);border:2px solid var(--primary);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:scale 200ms var(--bvx-ease-out),box-shadow 200ms ease}
.bvx-range:hover::-webkit-slider-thumb{scale:1.1}
.bvx-range:active::-webkit-slider-thumb,.bvx-range:focus-visible::-webkit-slider-thumb{scale:1.25;box-shadow:0 0 0 6px color-mix(in srgb,var(--primary) 25%,transparent)}
.bvx-range:active::-moz-range-thumb,.bvx-range:focus-visible::-moz-range-thumb{scale:1.25;box-shadow:0 0 0 6px color-mix(in srgb,var(--primary) 25%,transparent)}
.bvx-range:focus-visible{outline:none}
#calculadora .bvx-calc-live{border-color:color-mix(in srgb,var(--primary) 50%,var(--border));box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 25%,transparent),0 18px 40px -24px color-mix(in srgb,var(--primary) 70%,transparent)}
#calculadora .bvx-calc-live dd{text-shadow:0 0 22px color-mix(in srgb,var(--accent) 45%,transparent)}
#calculadora [class*="rounded-[16px]"]{transition:border-color 300ms ease,box-shadow 400ms ease}
#calculadora dd{transition:text-shadow 300ms ease}

@media (prefers-reduced-motion:reduce){
.bvx-modal-panel{scale:1;translate:0 0}
.bvx-modal.is-open .bvx-form>*{animation:none}
img.bvx-avatar{transition:box-shadow 200ms ease}
.bvx-avatars:hover .bvx-avatar--b,.bvx-avatars:hover .bvx-avatar--v,.bvx-avatars img.bvx-avatar:hover{translate:none;rotate:none;scale:none}
.bvx-range::-webkit-slider-thumb,.bvx-range::-moz-range-thumb{transition:none}
}

/* ═════ calculadora — mientras cambian los datos el resultado brilla; al soltar, las cifras dan un pequeño "golpe" */
#calculadora dd{transform-origin:0 70%}
#calculadora dd.bvx-calc-settle{animation:bvx-calc-settle 520ms cubic-bezier(.34,1.56,.64,1)}
@keyframes bvx-calc-settle{0%{scale:1}35%{scale:1.06}100%{scale:1}}

/* ═════ demo — chat de WhatsApp en un móvil */
.bvx-phone-wrap{display:flex;justify-content:center;min-width:0}
.bvx-wa-field{contain:inline-size}
.bvx-phone{--wa-bg:#0b141a;--wa-bar:#1f2c34;--wa-in:#202c33;--wa-out:#005c4b;--wa-text:#e9edef;--wa-meta:#8696a0;--wa-green:#00a884;--wa-blue:#53bdeb;
  position:relative;margin:0;width:min(100%,360px);height:660px;display:flex;flex-direction:column;overflow:hidden;
  border-radius:46px;background:var(--wa-bg);color:var(--wa-text);font-family:var(--font-inter),ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  border:10px solid #111317;box-shadow:0 0 0 1.5px #2b2f38,0 40px 80px -30px rgba(0,0,0,.65),0 30px 60px -40px color-mix(in srgb,var(--primary) 60%,transparent)}
.bvx-phone-island{position:absolute;top:10px;left:50%;translate:-50% 0;width:96px;height:26px;border-radius:999px;background:#000;z-index:3}
.bvx-wa-status{display:flex;align-items:center;justify-content:space-between;padding:12px 26px 6px;font-size:13px;font-weight:600;background:var(--wa-bar);font-variant-numeric:tabular-nums}
.bvx-wa-status-icons{display:flex;align-items:center;gap:5px}
.bvx-wa-status-icons svg{width:15px;height:15px}
.bvx-wa-5g{font-size:11px;font-weight:700}
.bvx-wa-battery{width:22px;height:11px;border:1.5px solid var(--wa-text);border-radius:3px;padding:1px;display:inline-flex;opacity:.9}
.bvx-wa-battery-level{display:block;width:70%;background:var(--wa-text);border-radius:1px}
.bvx-wa-head{display:flex;align-items:center;gap:10px;padding:8px 14px 10px 8px;background:var(--wa-bar)}
.bvx-wa-head svg{width:22px;height:22px}
.bvx-wa-back{display:flex;color:var(--wa-text)}
.bvx-wa-avatar{width:38px;height:38px;border-radius:50%;background:#07070d;display:grid;place-items:center;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.bvx-wa-who{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.2}
.bvx-wa-name{font-weight:600;font-size:16px}
.bvx-wa-sub{font-size:12.5px;color:var(--wa-meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color 200ms ease}
.bvx-wa-sub.is-typing{color:var(--wa-green)}
.bvx-wa-actions{display:flex;gap:18px;color:var(--wa-text)}
.bvx-wa-chat{position:relative;flex:1;min-height:0;background-color:var(--wa-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140' fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M14 18h22a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H24l-7 6v-6h-3a5 5 0 0 1-5-5V23a5 5 0 0 1 5-5z'/%3E %3Ccircle cx='104' cy='26' r='9'/%3E%3Cpath d='M100 26h8M104 22v8'/%3E %3Cpath d='M70 62l4 8 9 1-6.5 6 1.6 9-8.1-4.3-8.1 4.3 1.6-9-6.5-6 9-1z'/%3E %3Cpath d='M18 92c6-8 14-8 20 0s14 8 20 0'/%3E %3Crect x='96' y='84' width='22' height='16' rx='3'/%3E%3Cpath d='M96 90h22'/%3E %3Cpath d='M112 120c0-5 4-8 8-8s8 3 8 8-8 12-8 12-8-7-8-12z' transform='translate%28-60 -4%29'/%3E %3Cpath d='M118 120l8 8M126 120l-8 8'/%3E %3Ccircle cx='30' cy='128' r='4'/%3E %3C/svg%3E");background-size:140px 140px}
.bvx-wa-scroll{position:absolute;inset:0;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px}
.bvx-wa-scroll::-webkit-scrollbar{display:none}
.bvx-wa-day{align-self:center;font-size:12px;color:var(--wa-meta);background:#182229;border-radius:8px;padding:4px 10px;margin:2px 0}
.bvx-wa-note{align-self:center;max-width:88%;text-align:center;font-size:11.5px;line-height:1.35;color:#ffd279;background:#182229;border-radius:8px;padding:6px 10px;margin-bottom:6px}
.bvx-wa-msg{display:flex;transition:opacity 220ms ease,translate 320ms var(--bvx-ease-out),scale 320ms var(--bvx-ease-out)}
.bvx-wa-msg>p{position:relative;margin:0;max-width:82%;padding:6px 9px 7px;border-radius:9px;font-size:14.5px;line-height:1.38;box-shadow:0 1px .5px rgba(0,0,0,.13);overflow-wrap:anywhere}
.bvx-wa-in{justify-content:flex-start}
.bvx-wa-out{justify-content:flex-end}
.bvx-wa-in>p{background:var(--wa-in);border-top-left-radius:0}
.bvx-wa-out>p{background:var(--wa-out);border-top-right-radius:0}
/* Colita de la burbuja con la punta redondeada, como en WhatsApp (forma dibujada con una máscara SVG) */
.bvx-wa-in>p::before,.bvx-wa-out>p::before{content:"";position:absolute;top:0;width:8px;height:13px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.bvx-wa-in>p::before{left:-8px;background:var(--wa-in);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M1.533 2.568 8 11.193V0H2.812C1.042 0 .474 1.156 1.533 2.568z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M1.533 2.568 8 11.193V0H2.812C1.042 0 .474 1.156 1.533 2.568z'/%3E%3C/svg%3E")}
.bvx-wa-out>p::before{right:-8px;background:var(--wa-out);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M5.188 0H0v11.193l6.467-8.625C7.526 1.156 6.958 0 5.188 0z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M5.188 0H0v11.193l6.467-8.625C7.526 1.156 6.958 0 5.188 0z'/%3E%3C/svg%3E")}
.bvx-wa-body{white-space:pre-wrap}
.bvx-wa-body strong{font-weight:700}
.bvx-wa-meta{float:right;display:inline-flex;align-items:center;gap:3px;margin:8px 0 -4px 10px;font-size:11px;color:rgba(233,237,239,.6);font-variant-numeric:tabular-nums}
.bvx-wa-ticks{width:16px;height:16px;color:var(--wa-meta);transition:color 300ms ease}
.bvx-wa-msg.is-read .bvx-wa-ticks{color:var(--wa-blue)}
.bvx-wa-msg.is-hidden{display:none}
.bvx-wa-msg.is-entering{opacity:0;translate:0 10px;scale:.96}
.bvx-wa-out.is-entering>p{transform-origin:100% 100%}
.bvx-wa-in.is-entering>p{transform-origin:0 100%}
.bvx-wa-typing{display:none}
.bvx-wa-typing.is-on{display:flex}
.bvx-wa-typing>p{display:flex;gap:4px;padding:11px 12px}
.bvx-wa-typing>p>span{width:7px;height:7px;border-radius:50%;background:var(--wa-meta);animation:bvx-wa-dot 1.2s infinite ease-in-out}
.bvx-wa-typing>p>span:nth-child(2){animation-delay:.15s}
.bvx-wa-typing>p>span:nth-child(3){animation-delay:.3s}
@keyframes bvx-wa-dot{0%,60%,100%{translate:0 0;opacity:.45}30%{translate:0 -4px;opacity:1}}
.bvx-wa-input{display:flex;align-items:flex-end;gap:6px;padding:6px 8px 14px;background:var(--wa-bg)}
.bvx-wa-field{flex:1;min-width:0;display:flex;align-items:flex-end;gap:10px;min-height:44px;padding:6px 12px;border-radius:24px;background:var(--wa-in);color:var(--wa-meta)}
.bvx-wa-field svg{width:22px;height:22px;flex:none;margin-bottom:4px}
/* Mientras se escribe, el texto se ve entero y la caja crece en varias líneas, como en WhatsApp */
.bvx-wa-text{flex:1;min-width:0;align-self:center;font-size:15px;line-height:1.35;color:var(--wa-text);white-space:pre-wrap;overflow-wrap:anywhere;max-height:calc(1.35em * 6);overflow:hidden;direction:ltr}
.bvx-wa-text:empty::before{content:attr(data-placeholder);color:var(--wa-meta)}
/* Como en WhatsApp: mientras se escribe se oculta la cámara y el texto tiene más sitio */
.bvx-wa-text.is-typing~svg:last-of-type{display:none}
.bvx-wa-text.is-typing::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-2px;background:var(--wa-green);animation:bvx-wa-caret 1s steps(1) infinite}
@keyframes bvx-wa-caret{50%{opacity:0}}
.bvx-wa-mic{position:relative;width:44px;height:44px;flex:none;border-radius:50%;background:var(--wa-green);color:#0b141a;display:grid;place-items:center;transition:scale 160ms var(--bvx-ease-out)}
.bvx-wa-mic svg{position:absolute;width:22px;height:22px;transition:opacity 180ms ease,scale 220ms var(--bvx-ease-out),rotate 220ms var(--bvx-ease-out)}
.bvx-wa-ico-send{opacity:0;scale:.5;rotate:-30deg}
.bvx-wa-mic.is-send .bvx-wa-ico-send{opacity:1;scale:1;rotate:0deg}
.bvx-wa-mic.is-send .bvx-wa-ico-mic{opacity:0;scale:.5}
.bvx-wa-mic.is-press{scale:.9}
.bvx-wa-scroll.is-fading .bvx-wa-msg{opacity:0;transition:opacity 400ms ease}
@media (max-width:420px){.bvx-phone{height:600px;border-width:8px;border-radius:40px}}

@media (prefers-reduced-motion:reduce){
#calculadora dd.bvx-calc-settle{animation:none}
.bvx-wa-typing>p>span,.bvx-wa-text.is-typing::after{animation:none}
}

/* ═════ Aviso de cookies: barra fina abajo ═════ */
.bvx-consent{position:fixed;left:0;right:0;bottom:0;z-index:50;border-top:1px solid var(--border-strong);background:color-mix(in srgb,var(--surface) 95%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:10px 16px max(10px,env(safe-area-inset-bottom))}
.bvx-consent[hidden]{display:none}
.bvx-consent-inner{max-width:1200px;margin-inline:auto;display:flex;flex-direction:column;gap:8px}
.bvx-consent-text{color:var(--muted);font-size:.85rem;line-height:1.45}
.bvx-consent-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bvx-consent-actions button{min-height:40px;height:40px}
@media (min-width:48rem){
.bvx-consent{padding-inline:32px}
.bvx-consent-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:24px}
.bvx-consent-actions{display:flex;flex:none}
}

/* ═════ Demo: el texto de la izquierda empieza a la altura del primer mensaje del móvil ═════ */

/* Inicio: el hero mide lo mismo que el resto de la web (1200px); los 3 puntos van debajo del móvil */

/* ═════ Precio orientativo debajo de la calculadora ═════ */
.bvx-price{color:var(--text);max-width:60ch}

/* ═════ Quiénes somos: tarjeta con las dos personas ═════ */
.bvx-team{margin-top:1rem;border:1px solid var(--border);border-radius:20px;background:var(--surface);padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}
.bvx-team-head{display:flex;flex-direction:column;gap:.5rem;max-width:62ch}
.bvx-team-list{display:grid;gap:1rem}
.bvx-person{display:flex;gap:1rem;align-items:flex-start;border:1px solid var(--border);border-radius:16px;background:var(--bg);padding:1.25rem}
.bvx-person-photo{width:72px;height:72px;flex:none;border-radius:9999px;object-fit:cover;background:var(--surface-2);border:2px solid var(--border-strong)}
@media (min-width:40rem){
.bvx-team{padding:2rem}
.bvx-person-photo{width:96px;height:96px}
}
@media (min-width:48rem){.bvx-team-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ═════ Pie: marca · navegación · contacto ═════ */
.bvx-footer-grid{display:grid;gap:2.5rem}
.bvx-footer-grid h2{font-size:.875rem;line-height:1.25rem;letter-spacing:0}
@media (min-width:48rem){.bvx-footer-grid{grid-template-columns:1.4fr 1fr 1fr}}

/* ═════ Móvil: versión más compacta de algunos apartados (el ordenador no cambia) ═════ */
@media (max-width:39.99rem){
  /* Sectores: 2 columnas con icono y nombre */
  #sectores ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  #sectores ul>li:not(.bvx-span-all)>div{padding:.9rem;gap:.5rem;border-radius:16px}
  #sectores ul>li:not(.bvx-span-all) p{display:none}
  #sectores ul>li:not(.bvx-span-all) h3{font-size:.95rem;line-height:1.25}
  #sectores ul>li:not(.bvx-span-all) svg{width:1.5rem;height:1.5rem}
  /* Beneficios: icono a la izquierda y menos relleno */
  .bvx-benefits>li{display:grid;grid-template-columns:auto 1fr;column-gap:.85rem;row-gap:.2rem;padding:1.1rem 1.25rem}
  .bvx-benefits>li>.bvx-ic{grid-row:span 2;margin-top:.15rem}
  .bvx-benefits>li>p{font-size:.9rem}
  /* Apartado final: sin ocupar toda la pantalla */
  #reservar .container-site{min-height:0;padding-top:4.5rem;padding-bottom:4.5rem;gap:1.5rem}
}
@media (max-width:39.99rem){
  /* Quiénes somos: en móvil, foto encima del texto para que no quede estrecho */
  .bvx-person{flex-direction:column;gap:.75rem}
  /* Pie: los enlaces de navegación en dos columnas */
  .bvx-footer-grid nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem}
}

/* ═════ Animaciones propias de cada bloque de tarjetas (entrada en public/js/cards-fx.js) ═════ */
/* Qué hacemos: foco de luz y borde iluminado que siguen al cursor */
[data-fx="servicios"] .bvx-fx-card{position:relative;isolation:isolate}
[data-fx="servicios"] .bvx-fx-card::before,
[data-fx="servicios"] .bvx-fx-card::after{content:"";position:absolute;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 300ms ease}
[data-fx="servicios"] .bvx-fx-card::before{inset:0;z-index:-1;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 11%,transparent),transparent 65%)}
[data-fx="servicios"] .bvx-fx-card::after{inset:-1px;padding:1px;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 75%,transparent),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
[data-fx="servicios"] .bvx-fx-card svg{transition:transform 300ms var(--bvx-ease-out)}
@media (hover:hover) and (pointer:fine){
  [data-fx="servicios"] .bvx-fx-card:hover::before,[data-fx="servicios"] .bvx-fx-card:hover::after{opacity:1}
  [data-fx="servicios"] .bvx-fx-card:hover svg{transform:translateY(-2px) scale(1.06)}
}

/* Sectores: relleno de color que entra por el lado por el que llega el cursor (cards-fx.js → dirFill) */
[data-fx="sectores"] .bvx-fx-card{position:relative;isolation:isolate;overflow:hidden;transition:border-color 300ms ease}
[data-fx="sectores"] .bvx-fx-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--accent) 12%,transparent));
  transform:translateY(101%);transition:transform 420ms var(--bvx-ease-out)}
[data-fx="sectores"] .bvx-fx-card[data-from="top"]::before{transform:translateY(-101%)}
[data-fx="sectores"] .bvx-fx-card[data-from="left"]::before{transform:translateX(-101%)}
[data-fx="sectores"] .bvx-fx-card[data-from="right"]::before{transform:translateX(101%)}
[data-fx="sectores"] .bvx-fx-card.is-in::before{transform:translate(0,0)}
[data-fx="sectores"] .bvx-fx-card.no-tr::before{transition:none}
[data-fx="sectores"] .bvx-fx-card svg{transition:scale 350ms cubic-bezier(.34,1.56,.64,1)}
@media (hover:hover) and (pointer:fine){
  [data-fx="sectores"] .bvx-fx-card:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--border))}
  [data-fx="sectores"] .bvx-fx-card:hover svg{scale:1.12}
}

/* ¿Por qué BIVIEX?: el recuadro de BIVIEX se inclina hacia el cursor con un brillo y el ✓ de la fila se acerca */
.bvx-compare-col--us{position:relative;transition:transform 500ms var(--bvx-ease-out)}
.bvx-compare-col--us::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 300ms ease;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.06),transparent 55%)}
.bvx-compare-col--us .bvx-compare-item svg{transition:transform 350ms var(--bvx-ease-out)}
@media (hover:hover) and (pointer:fine){
  .bvx-compare-col--us:hover{transition:transform 150ms ease-out}
  .bvx-compare-col--us:hover::after{opacity:1}
  .bvx-compare-col--us .bvx-compare-item:hover svg{transform:translateY(-2px) scale(1.2) rotate(-10deg);transition:transform 400ms cubic-bezier(.34,1.56,.64,1)}
}
@media (prefers-color-scheme:light){.bvx-compare-col--us::after{background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(124,92,255,.08),transparent 55%)}}

/* Beneficios: icono en baldosa de color, destello de luz que cruza la tarjeta y elevación al pasar el ratón */
.bvx-benefits>li{position:relative;overflow:hidden;isolation:isolate;transition:translate 300ms var(--bvx-ease-out),border-color 300ms ease,box-shadow 300ms ease}
.bvx-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;flex:none;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,var(--primary) 14%,transparent));
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);transition:rotate 400ms cubic-bezier(.34,1.56,.64,1),scale 400ms cubic-bezier(.34,1.56,.64,1)}
.bvx-ic svg{width:24px;height:24px}
.bvx-benefits>li::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translateX(-110%);
  background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--accent) 9%,transparent) 45%,rgba(255,255,255,.06) 50%,color-mix(in srgb,var(--primary) 9%,transparent) 55%,transparent 70%)}
.bvx-benefits>li.is-shine::before{animation:bvx-shine 1100ms var(--bvx-ease-out)}
@keyframes bvx-shine{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
@media (hover:hover) and (pointer:fine){
  .bvx-benefits>li:hover{translate:0 -4px;border-color:color-mix(in srgb,var(--accent) 35%,var(--border));box-shadow:0 18px 40px -24px color-mix(in srgb,var(--accent) 45%,transparent)}
  .bvx-benefits>li:hover .bvx-ic{rotate:-8deg;scale:1.08}
  .bvx-benefits>li:hover::before{animation:bvx-shine 900ms var(--bvx-ease-out)}
}
@media (max-width:39.99rem){.bvx-ic{width:40px;height:40px;border-radius:12px}.bvx-ic svg{width:22px;height:22px}}

/* Calculadora: presentación del recuadro de resultados (las cifras cuentan desde 0 en calculator.js) */
#calculadora .bvx-calc-pre dt,#calculadora .bvx-calc-pre .bvx-calc-hyp{opacity:0}
#calculadora .bvx-calc-intro dt{animation:bvx-fade-up 500ms var(--bvx-ease-out) both}
#calculadora .bvx-calc-intro div+div dt{animation-delay:150ms}
#calculadora .bvx-calc-intro .bvx-calc-hyp{animation:bvx-fade-up 600ms var(--bvx-ease-out) 1300ms both}
#calculadora .bvx-calc-hyp strong{background:linear-gradient(90deg,var(--primary),var(--accent)) 0 100%/0 2px no-repeat;padding-bottom:1px}
#calculadora .bvx-calc-intro .bvx-calc-hyp strong{animation:bvx-underline 700ms var(--bvx-ease-out) 1800ms forwards}
@keyframes bvx-fade-up{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes bvx-underline{to{background-size:100% 2px}}

/* ¿Cuántas horas pierde…?: palabras que se escriben (cards-fx.js) y, con ratón,
   rotulador de color bajo el título y brillo en el icono */
.bvx-w{display:inline-block}
[data-fx="problemas"] .bvx-mark{
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 32%,transparent),color-mix(in srgb,var(--primary) 32%,transparent)) 0 90%/0% 40% no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 500ms var(--bvx-ease-out)}
[data-fx="problemas"]>li>svg{transition:scale 300ms cubic-bezier(.34,1.56,.64,1),filter 300ms ease}
@media (hover:hover) and (pointer:fine){
  [data-fx="problemas"]>li:hover .bvx-mark{background-size:100% 40%}
  [data-fx="problemas"]>li:hover>svg{scale:1.15;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 70%,transparent))}
}

/* Calculadora: con ratón, rejilla de puntos de luz alrededor del cursor y borde iluminado hacia él */
.bvx-calc-result{position:relative;isolation:isolate}
.bvx-calc-result::before,.bvx-calc-result::after{content:"";position:absolute;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 350ms ease}
.bvx-calc-result::before{inset:0;z-index:-1;
  background-image:radial-gradient(circle,color-mix(in srgb,var(--accent) 70%,transparent) 1px,transparent 1.6px);background-size:14px 14px;
  -webkit-mask:radial-gradient(170px circle at var(--lx,50%) var(--ly,50%),#000 0%,rgba(0,0,0,.35) 45%,transparent 75%);
  mask:radial-gradient(170px circle at var(--lx,50%) var(--ly,50%),#000 0%,rgba(0,0,0,.35) 45%,transparent 75%)}
.bvx-calc-result::after{inset:-1px;padding:1.5px;
  background:conic-gradient(from calc(var(--la,0deg) - 60deg),transparent 0deg,var(--primary) 40deg,var(--accent) 60deg,var(--primary) 80deg,transparent 120deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media (hover:hover) and (pointer:fine){
  .bvx-calc-result:hover::before{opacity:.55}
  .bvx-calc-result:hover::after{opacity:1}
}

/* Cómo trabajamos: cada paso se enciende al llegar la línea; con ratón, el círculo se rellena */
.bvx-step-dot{isolation:isolate;transition:color 550ms ease,border-color 550ms ease,scale 300ms cubic-bezier(.34,1.56,.64,1)}
.bvx-step-dot::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,var(--primary),var(--accent));opacity:0;transition:opacity 550ms ease}
.bvx-step-dot.is-lit{animation:bvx-lit 900ms var(--bvx-ease-out)}
@keyframes bvx-lit{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent);border-color:var(--accent)}100%{box-shadow:0 0 0 14px transparent}}
@media (hover:hover) and (pointer:fine){
  [data-fx="pasos"]>li:hover .bvx-step-dot{border-color:transparent;color:#fff;scale:1.12}
  [data-fx="pasos"]>li:hover .bvx-step-dot::before{opacity:1}
}

/* ¿Por qué BIVIEX?: lo que entra desde los lados no ensancha la página en el móvil */
#por-que{overflow-x:clip}
/* Quiénes somos: radar en la foto, cursor del cargo a máquina, haz de luz por el borde y, con
   ratón, anillo de colores girando alrededor de la foto (cards-fx.js → equipo y parallax) */
@property --bvx-scan{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --bvx-ring{syntax:"<angle>";inherits:false;initial-value:0deg}
.bvx-person{position:relative;transition:border-color 300ms ease}
.bvx-photo{position:relative;display:inline-flex;flex:none;border-radius:9999px;transition:transform 250ms var(--bvx-ease-out)}
.bvx-photo::before{content:"";position:absolute;inset:-5px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 300ms ease;
  background:conic-gradient(from var(--bvx-ring),var(--primary),var(--accent),transparent 55%,var(--primary));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px))}
@keyframes bvx-ring-spin{to{--bvx-ring:360deg}}
.bvx-person-photo{transition:scale 400ms cubic-bezier(.34,1.56,.64,1)}
.bvx-person-photo.is-scan{-webkit-mask:conic-gradient(#000 var(--bvx-scan),transparent 0);mask:conic-gradient(#000 var(--bvx-scan),transparent 0);animation:bvx-scan 650ms cubic-bezier(.65,0,.35,1) both}
@keyframes bvx-scan{from{--bvx-scan:0deg}to{--bvx-scan:360deg}}
.bvx-person-photo.is-ring{animation:bvx-photo-ring 1000ms var(--bvx-ease-out);-webkit-mask:none;mask:none}
@keyframes bvx-photo-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 65%,transparent)}100%{box-shadow:0 0 0 18px transparent}}
.bvx-role.is-typing::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:currentColor;animation:bvx-caret 1s steps(1) infinite}
@keyframes bvx-caret{50%{opacity:0}}
.bvx-person::after{content:"";position:absolute;inset:-1px;padding:1.5px;border-radius:inherit;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--bvx-beam),transparent 0deg 240deg,var(--primary) 295deg,var(--accent) 340deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.bvx-person.is-beam::after{animation:bvx-beam-once 1200ms linear}
@keyframes bvx-beam-once{0%{--bvx-beam:0deg;opacity:0}10%{opacity:1}85%{opacity:1}100%{--bvx-beam:360deg;opacity:0}}
@media (hover:hover) and (pointer:fine){
  .bvx-person:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
  .bvx-person:hover .bvx-photo::before{opacity:1;animation:bvx-ring-spin 2.4s linear infinite}
  .bvx-person:hover .bvx-person-photo{scale:1.05}
}

@media (prefers-reduced-motion:reduce){
  [data-fx] .bvx-fx-card,[data-fx] .bvx-fx-card svg{transition:none!important;transform:none!important}
  .bvx-calc-result::before,.bvx-calc-result::after{display:none}
  [data-fx="problemas"] .bvx-mark,[data-fx="problemas"]>li>svg,.bvx-compare-col--us,.bvx-compare-col--us .bvx-compare-item svg,.bvx-step-dot,.bvx-step-dot::before,.bvx-person-photo,.bvx-photo,.bvx-photo::before,.bvx-person::after,[data-fx="sectores"] .bvx-fx-card::before{animation:none!important;transition:none!important}
  .bvx-benefits>li,.bvx-ic{transition:none!important;translate:none!important;rotate:none!important;scale:none!important}
  .bvx-benefits>li::before{animation:none!important;display:none}
}

/* ═════ ¿Cuánto tiempo pierde tu empresa?: luces y cuadrícula que siguen al cursor (follow-glow.js) ═════ */
.bvx-follow{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bvx-blob{position:absolute;left:0;top:0;border-radius:9999px;filter:blur(30px);opacity:0;transition:opacity 800ms ease;will-change:transform}
.bvx-blob--a{width:520px;height:520px;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 42%,transparent),transparent 65%)}
.bvx-blob--b{width:360px;height:360px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 30%,transparent),transparent 65%)}
.bvx-follow.is-on .bvx-blob{opacity:1}
.bvx-follow-grid{position:absolute;inset:0;opacity:0;transition:opacity 800ms ease;
  background-image:linear-gradient(to right,color-mix(in srgb,var(--text) 9%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--text) 9%,transparent) 1px,transparent 1px);
  background-size:48px 48px;background-position:center;
  -webkit-mask:radial-gradient(280px circle at var(--fx,50%) var(--fy,50%),#000,transparent 75%);
  mask:radial-gradient(280px circle at var(--fx,50%) var(--fy,50%),#000,transparent 75%)}
.bvx-follow.is-on .bvx-follow-grid{opacity:1}
@media (max-width:39.99rem){.bvx-blob--a{width:340px;height:340px}.bvx-blob--b{width:240px;height:240px}}

/* ═════ Preguntas frecuentes: cada respuesta es un mensaje del asistente (faq.js) ═════ */
.bvx-faq-msg{display:flex;align-items:flex-start;gap:12px}
.bvx-faq-avatar{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:9999px;background:#0b0c1a;border:1px solid var(--border-strong)}
.bvx-faq-body{position:relative;min-width:0}
.bvx-faq-bubble{padding:12px 16px;border-radius:4px 16px 16px 16px;background:var(--surface);border:1px solid var(--border);transform-origin:0 0}
.bvx-faq-typing{position:absolute;left:0;top:0;display:none;align-items:center;gap:4px;height:40px;padding:0 14px;border-radius:4px 16px 16px 16px;background:var(--surface);border:1px solid var(--border)}
.bvx-faq-typing>span{width:7px;height:7px;border-radius:9999px;background:var(--muted);animation:bvx-faq-dot 1s infinite ease-in-out}
.bvx-faq-typing>span:nth-child(2){animation-delay:.15s}
.bvx-faq-typing>span:nth-child(3){animation-delay:.3s}
@keyframes bvx-faq-dot{0%,60%,100%{opacity:.35;translate:0 0}30%{opacity:1;translate:0 -3px}}
.bvx-faq-msg.is-typing .bvx-faq-typing{display:flex}
.bvx-faq-msg.is-typing .bvx-faq-bubble{visibility:hidden}
.bvx-faq-msg.is-typing .bvx-faq-avatar,.bvx-faq-msg.is-reply .bvx-faq-avatar{animation:bvx-faq-pop 400ms cubic-bezier(.34,1.56,.64,1) both}
.bvx-faq-msg.is-reply .bvx-faq-bubble{animation:bvx-faq-bubble 420ms cubic-bezier(.34,1.3,.64,1) both}
@keyframes bvx-faq-bubble{from{opacity:0;scale:.85}to{opacity:1;scale:1}}
@keyframes bvx-faq-pop{from{scale:.6}to{scale:1}}
.bvx-faq-msg.is-reply .bvx-faq-avatar{animation:none}
/* Flecha de cada pregunta dentro de un circulito de color al pasar el ratón o al abrirla */
[data-faq] [data-slot="accordion-trigger"]>svg{box-sizing:content-box;padding:6px;margin:-6px;border-radius:9999px;transition:rotate 320ms var(--bvx-ease-out),transform 320ms var(--bvx-ease-out),color 200ms ease,background-color 250ms ease}
[data-faq] [data-slot="accordion-trigger"][data-state="open"]>svg{background:color-mix(in srgb,var(--primary) 18%,transparent)}
@media (hover:hover) and (pointer:fine){
  [data-faq] [data-slot="accordion-trigger"]:hover>svg{background:color-mix(in srgb,var(--primary) 18%,transparent);color:var(--primary-ink)}
}
@media (max-width:39.99rem){.bvx-faq-avatar{width:28px;height:28px}.bvx-faq-avatar img{width:15px;height:15px}.bvx-faq-msg{gap:10px}}
@media (prefers-reduced-motion:reduce){.bvx-faq-typing>span{animation:none}}

/* Verificación antibots (Cloudflare Turnstile) del formulario de reserva */
.bvx-turnstile{min-height:0}
.bvx-turnstile:not(:empty){margin-top:.25rem}