/* Bolboreta Labs — estilos comunes a toda la web */

/* Fuentes web autoalojadas (antes Google Fonts): Inter variable 300–700 y Poppins 500/700/800, subconjunto latino */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/poppins-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Preloader de marca «trazo y relleno» (.bl-loader): los tiempos los lleva assets/js/site/preloader.js */
.bl-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1200; overflow: hidden; }
.bl-panel { position: absolute; top: -25%; left: -25%; width: 150%; height: 150%; background: #000;
            transition: transform .75s cubic-bezier(.76, 0, .24, 1); will-change: transform; }
/* corte diagonal (la misma inclinación que el resto de la web): cada panel es una mitad */
.bl-panel-a { clip-path: polygon(0 0, 100% 0, 100% 36%, 0 64%); }
.bl-panel-b { clip-path: polygon(0 64%, 100% 36%, 100% 100%, 0 100%); }
.bl-loader.is-leaving .bl-panel-a { transform: translate(28%, -52%); }
.bl-loader.is-leaving .bl-panel-b { transform: translate(-28%, 52%); }
/* doble cortina: bajo la negra hay una violeta (color de marca) que se abre con un pequeño desfase,
   así la salida se ve igual sobre las páginas que arrancan en negro que sobre las de fondo blanco */
.bl-panel-v { background: #9f3cff; transition-delay: .16s; }
.bl-logo { position: absolute; left: 50%; top: 50%; width: clamp(96px, 16vw, 150px); height: auto; transform: translate(-50%, -50%); display: block; overflow: visible; }
@media (prefers-reduced-motion: reduce) { .bl-panel { transition-duration: .3s; } }

/* Fuentes de respaldo con métricas ajustadas a Inter y Poppins: mientras cargan las webfonts el texto ocupa casi el mismo espacio (menos CLS) */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 107%; ascent-override: 90%; descent-override: 22.5%; line-gap-override: 0%; }
@font-face { font-family: 'Poppins Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 113%; ascent-override: 93%; descent-override: 31%; line-gap-override: 9%; }
/* logotipos de clientes: los atributos width/height (para evitar saltos) no fijan la altura mostrada */
.cr-brand-item-2 img { height: auto; }

/* ===== Equivalencias de etiqueta (SEO): los elementos que cambiaron de etiqueta conservan exactamente el estilo que tenían ===== */
.tp-offcanvas-area p.tp-offcanvas-title { font-size: 40px; line-height: 1; letter-spacing: -0.8px; font-weight: 700; margin-bottom: 15px; color: var(--tp-common-black); }
.tp-offcanvas-area p.tp-offcanvas-title.sm { font-size: 20px; font-weight: 700; margin-bottom: 15px; text-transform: uppercase; color: var(--tp-common-black); }
p.studio-footer-big-title { letter-spacing: normal; }
@media (max-width: 575px) { p.studio-footer-big-title { letter-spacing: -0.03em; } }
h1.w3-claim { line-height: 1.56; }
p.studio-about-funfact-number { font-weight: 500; letter-spacing: normal; }
h3.tp-faq-accordion-header { font-size: 36px; line-height: 1.2; }
/* los elementos que antes eran encabezados conservan su transición (solo color): la plantilla aplica transition: all a los <p>, lo que alteraría los ajustes de tamaño por JS */
p.w3-word, p.ing-hero-word, p.ct-mail-big, p.studio-about-funfact-number, p.studio-footer-big-title, p.tp-offcanvas-title { transition: color 0.3s ease-in-out; }

/* ===== Cookies: aviso y panel de configuración (assets/js/site/cookies.js) ===== */
html.bl-ck-lock { overflow: hidden; }
.bl-ck[hidden], .bl-ckd[hidden] { display: none; }
.bl-ck { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 1100; display: flex; justify-content: flex-start; pointer-events: none; }
.bl-ck-banner { pointer-events: auto; max-width: 500px; background: #000; color: #fff; border-radius: 24px; padding: 26px 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); font-family: var(--tp-ff-body); }
.bl-ck-title { font-size: 18px; font-weight: 700; line-height: 1.2; margin: 0 0 8px; color: #fff; }
.bl-ck-text { font-size: 14px; line-height: 1.55; margin: 0 0 18px; color: #d0d0d0; }
.bl-ck-text a, .bl-ckd-foot a { color: inherit; text-decoration: underline; }
.bl-ck-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bl-ck-btn { font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; height: 44px; padding: 0 20px; border-radius: 30px; border: 1px solid #fff; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.bl-ck-primary { background: #fff; color: #000; }
.bl-ck-primary:hover { background: #9f3cff; border-color: #9f3cff; color: #fff; }
.bl-ck-secondary { background: transparent; color: #fff; }
.bl-ck-secondary:hover { background: #fff; color: #000; }
.bl-ck-btn:focus-visible, .bl-ckd-close:focus-visible { outline: 2px solid #9f3cff; outline-offset: 2px; }
@media (max-width: 575px) { .bl-ck { left: 10px; right: 10px; bottom: 10px; } .bl-ck-banner { padding: 20px; border-radius: 18px; } .bl-ck-btn { flex: 1 1 auto; } }
.bl-ckd { position: fixed; inset: 0; z-index: 1150; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: var(--tp-ff-body); }
.bl-ckd-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.bl-ckd-box { position: relative; width: 100%; max-width: 640px; max-height: calc(100vh - 40px); overflow: auto; background: #fff; color: #000; border-radius: 24px; padding: 36px 36px 28px; }
.bl-ckd-box h2 { font-size: 26px; line-height: 1.2; font-weight: 700; margin: 0 48px 10px 0; color: #000; }
.bl-ckd-box > p { font-size: 15px; line-height: 1.55; color: #444; margin: 0 0 20px; }
.bl-ckd-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); background: #fff; color: #000; font-size: 24px; line-height: 1; cursor: pointer; transition: background .3s, color .3s; }
.bl-ckd-close:hover { background: #000; color: #fff; }
.bl-ckd-cat { border-top: 1px solid rgba(0, 0, 0, .1); padding: 16px 0; }
.bl-ckd-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.bl-ckd-name { font-size: 16px; font-weight: 700; color: #000; margin: 0; }
label.bl-ckd-name { cursor: pointer; }
.bl-ckd-always { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9f3cff; white-space: nowrap; }
.bl-ckd-cat p { font-size: 14px; line-height: 1.55; color: #555; margin: 0; }
.bl-ckd-switch { position: relative; display: inline-block; width: 48px; height: 28px; flex: 0 0 auto; }
.bl-ckd-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bl-ckd-switch i { position: absolute; inset: 0; border-radius: 14px; background: #c4c4c4; transition: background .25s; pointer-events: none; }
.bl-ckd-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .25s; }
.bl-ckd-switch input:checked + i { background: #9f3cff; }
.bl-ckd-switch input:checked + i::after { transform: translateX(20px); }
.bl-ckd-switch input:focus-visible + i { outline: 2px solid #9f3cff; outline-offset: 2px; }
.bl-ckd .bl-ck-actions { margin-top: 22px; }
.bl-ckd .bl-ck-btn { border-color: #000; }
.bl-ckd .bl-ck-primary { background: #000; color: #fff; }
.bl-ckd .bl-ck-primary:hover { background: #9f3cff; border-color: #9f3cff; }
.bl-ckd-foot { font-size: 13px; color: #444; margin: 18px 0 0; }
@media (max-width: 575px) { .bl-ckd { padding: 10px; } .bl-ckd-box { padding: 28px 20px 20px; border-radius: 18px; } .bl-ckd .bl-ck-btn { flex: 1 1 auto; } }
@media (prefers-reduced-motion: reduce) { .bl-ck-btn, .bl-ckd-close, .bl-ckd-switch i, .bl-ckd-switch i::after { transition: none; } }

/* ===== Botón circular de scroll (index, apps, ingeniería, IA y contacto; assets/js/site/sc-wheel.js) ===== */
.sc-wheel { position: fixed; right: 32px; bottom: 26px; z-index: 50; width: 88px; height: 88px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: none; opacity: 0; transition: opacity .5s ease; }
.sc-wheel.is-ready { opacity: 1; transition-delay: 1.2s; }
.sc-wheel svg { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.sc-wheel text { font: 700 11px 'Inter', sans-serif; letter-spacing: .2em; fill: #9f3cff; }
.sc-wheel > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9f3cff; font-size: 22px; line-height: 1; transition: transform .4s ease; animation: sc-arrow 1.4s ease-in-out infinite; }
.sc-wheel.is-up > span { animation: none; transform: rotate(180deg); }
@keyframes sc-arrow { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
@media (max-width: 991px) { .sc-wheel { right: 16px; bottom: 16px; width: 68px; height: 68px; } .sc-wheel > span { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .sc-wheel > span { animation: none; } }