/* Equipo F (consejo 3, L7 y L9, 1-nov-2026): la portada «Conoce Hostess» y Mentorías partidas en dos.
   Por qué así (Alex, 31-oct-2026: «está en blanco, puro texto y amarillo… tiene que ser algo totalmente innovador»):
   - La cabecera deja de ser un párrafo: una frase de 9 palabras y un video HTML de 8 s que enseña lo que hace Hostess
     (escribes tu negocio → la H lo trabaja → salen tus herramientas) antes de que haya que leer nada.
   - El video es un cielo de noche con estrellas, como Vozavía y la foto 5 (fondo con vida, vidrio encima), y es CSS puro:
     cero imágenes en la ruta del LCP (el LCP sigue siendo el texto) y cero JavaScript para animarlo.
   - Solo se animan transform y opacity: nada cambia de tamaño (CLS 0). Corre una vez y se queda en el cuadro final; con
     «reducir movimiento» se ve directo el cuadro final.
   - Mentorías: dos tarjetas con una franja visual (un número grande que dice lo esencial) y 4 datos en rejilla, no párrafos. */
/* cx-variables */:root{--cx-r1:22px;--cx-r2:16px 16px 16px 4px;--cx-r3:50%;--cx-r4:14px;--cx-r5:999px;--cx-r6:18px;--cx-c1:#B86E0E;--cx-c2:#1B2130;--cx-c3:#11151E;--cx-c4:#0B0E15;--cx-c5:#F5F2EA;--cx-c6:#FFF;--cx-c7:#FFE3A8;--cx-c8:#F5A524;--cx-c9:#F3EEE4;--cx-c10:#14181F;--cx-c11:#C77A12;--cx-c12:#5A6070;--cx-c13:#0E121A;--cx-c14:#2A2116;--cx-c15:#14110C;--cx-c16:#4A5060;--cx-c17:#F6F4EF;--cx-c18:#8A6A2E;--cx-t1:8s;--cx-t2:16s;--cx-t3:.5s;--cx-t4:1.5s;--cx-t5:.35s;--cx-t6:.7s;--cx-t7:1.4s;--cx-t8:1.9s;--cx-t9:1.6s;--cx-t10:2.3s;--cx-t11:2.8s;--cx-t12:.6s;--cx-t13:3.6s;--cx-t14:.28s;--cx-t15:5.2s;--cx-t16:.2s;--cx-c19:#6B7180;--cx-t17:.15s;--cx-t18:.3s;--cx-t19:.45s;--cx-t20:.25s;--cx-t21:0s;--cx-c20:#070B17;--cx-c21:#4F8BFF;--cx-c22:#0F172A;--cx-c23:#8C805A;--cx-c24:#1E2230;--cx-al-azhari:#F7F5F1;--cx-al-azhari-t:#1D1D1B;--cx-al-el-cortijo:#F3EFE6;--cx-al-el-cortijo-t:#263127;--cx-al-vozavia:#05070D;--cx-al-vozavia-t:#F2F4F8;--cx-al-vertice:#020617;--cx-al-vertice-t:#EBEBEB;--cx-al-oysters:#FFFFFF;--cx-al-oysters-t:#1C1B19;--cx-al-syntex-nutrition:#FFFFFF;--cx-al-syntex-nutrition-t:#1A1D24;--cx-al-ess-packing:#F5F2EA;--cx-al-ess-packing-t:#302C24;--cx-al-tapand:#F5F2EA;--cx-al-tapand-t:#302C24;--cx-al-grupobildim:#F4F1EC;--cx-al-grupobildim-t:#17161A;--cx-al-binoqular:#FFFFFF;--cx-al-binoqular-t:#121212;}

.bx-cx-cab .eyebrow{color:var(--cx-c1)}
.bx-cx-cab .b-asesor-titular{font-size:var(--pl-f5,40px);line-height:1.06;letter-spacing:-.025em;text-wrap:balance}
.bx-cx-cab .b-asesor-social{max-width:46ch;font-size:var(--pl-f3,16px)}

/* En computadora, frase a la izquierda y video a la derecha: a 1280 el video a lo ancho quedaba vacío. */
@media (min-width:900px){.bx-cx-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:32px}.bx-cx-hero .bx-cx-escena{margin:0;height:300px}}

/* ── El video HTML ───────────────────────────────────────────────────────────────────────────────────────────────── */
.bx-cx-escena{--cx-dur:var(--cx-t1);position:relative;isolation:isolate;overflow:hidden;margin:14px 0 4px;border-radius:var(--cx-r1);height:clamp(232px,62vw,260px);background:radial-gradient(120% 90% at 85% -10%,rgba(245,165,36,.42),transparent 55%),radial-gradient(90% 80% at 0% 110%,rgba(112,132,255,.28),transparent 60%),linear-gradient(160deg,var(--cx-c2) 0%,var(--cx-c3) 62%,var(--cx-c4) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 40px -22px rgba(12,16,26,.6);color:var(--cx-c5)}
.bx-cx-cielo{position:absolute;inset:-20%;z-index:-1;opacity:.9}/* El cielo se mueve con transform en su ::before (el compositor lo anima sin pintar cada cuadro; la caja del span no se mueve): misión 12. */.bx-cx-cielo::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1.3px 1.3px at 12% 22%,var(--cx-c6) 99%,transparent),radial-gradient(1px 1px at 28% 68%,rgba(255,255,255,.8) 99%,transparent),radial-gradient(1.6px 1.6px at 46% 14%,var(--cx-c7) 99%,transparent),radial-gradient(1px 1px at 63% 44%,rgba(255,255,255,.7) 99%,transparent),radial-gradient(1.4px 1.4px at 78% 76%,var(--cx-c6) 99%,transparent),radial-gradient(1px 1px at 90% 30%,rgba(255,255,255,.75) 99%,transparent),radial-gradient(1.2px 1.2px at 36% 88%,var(--cx-c7) 99%,transparent),radial-gradient(1px 1px at 6% 58%,rgba(255,255,255,.6) 99%,transparent);animation:cx-cielo var(--cx-t2) linear infinite alternate}
.bx-cx-dice{position:absolute;left:16px;top:16px;margin:0;max-width:calc(100% - 32px);padding:9px 14px;border-radius:var(--cx-r2);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:600 var(--pl-f3,16px)/1.2 Manrope,system-ui,sans-serif;white-space:nowrap;animation:cx-entra var(--cx-t3) cubic-bezier(.22,1,.36,1) both}
.bx-cx-dice span{display:inline-block;overflow:hidden;vertical-align:bottom;clip-path:inset(0 100% 0 0);animation:cx-escribe var(--cx-t4) steps(20,end) var(--cx-t5) both}
.bx-cx-dice span::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--cx-c8);animation:cx-cursor var(--cx-t6) steps(1) 3 var(--cx-t5) both}
.bx-cx-h{position:absolute;left:50%;top:36%;display:grid;place-items:center;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:var(--cx-r3);background:radial-gradient(circle at 35% 30%,var(--cx-c6),var(--cx-c9));box-shadow:0 0 0 6px rgba(245,165,36,.18),0 0 34px 6px rgba(245,165,36,.45);animation:cx-h var(--cx-t7) cubic-bezier(.34,1.56,.64,1) var(--cx-t8) both}
.bx-cx-h::before,.bx-cx-h::after{content:"";position:absolute;inset:-14px;border-radius:var(--cx-r3);border:1.5px solid rgba(245,165,36,.55);animation:cx-onda var(--cx-t9) ease-out var(--cx-t10) 2 both}
.bx-cx-h::after{animation-delay:var(--cx-t11)}
.bx-cx-salen{position:absolute;left:12px;right:12px;bottom:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.bx-cx-salen li{display:grid;gap:2px;min-width:0;padding:10px 10px 11px;border-radius:var(--cx-r4);background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,241,234,.94));color:var(--cx-c10);box-shadow:0 10px 22px -14px rgba(0,0,0,.7);animation:cx-sale var(--cx-t12) cubic-bezier(.22,1,.36,1) calc(var(--cx-t13) + var(--k) * var(--cx-t14)) both}
.bx-cx-salen svg{width:20px;height:20px;fill:none;stroke:var(--cx-c11);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bx-cx-salen b{font:800 var(--pl-f2,14px)/1.15 Manrope,system-ui,sans-serif}
.bx-cx-salen small{font:600 var(--pl-f1,12px)/1.25 Manrope,system-ui,sans-serif;color:var(--cx-c12);overflow-wrap:anywhere}
.bx-cx-salen li:last-child::after{content:"Lista hoy";position:absolute;transform:translate(-4px,-30px);justify-self:end;padding:3px 7px;border-radius:var(--cx-r5);background:var(--cx-c8);color:var(--cx-c10);font:800 var(--pl-f1,12px)/1 Manrope,system-ui,sans-serif;letter-spacing:.02em;animation:cx-sello var(--cx-t3) cubic-bezier(.34,1.56,.64,1) var(--cx-t15) both}
.bx-cx-salen li{position:relative}

/* Las estrellas derivan moviendo el fondo, no la capa: su caja no cambia (la prueba de panel.css mide cajas). */
@keyframes cx-cielo{to{transform:translate3d(24px,14px,0)}}
@keyframes cx-entra{from{opacity:0;transform:translate3d(0,10px,0) scale(.96)}}
@keyframes cx-escribe{to{clip-path:inset(0 0 0 0)}}
@keyframes cx-cursor{50%{opacity:0}}
@keyframes cx-h{from{opacity:0;transform:scale(.3) rotate(-25deg)}}
@keyframes cx-onda{from{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(1.9)}}
@keyframes cx-sale{from{opacity:0;transform:translate3d(0,26px,0) scale(.92)}}
@keyframes cx-sello{from{opacity:0;transform:translate(-4px,-30px) scale(.4)}}

@media (min-width:640px){.bx-cx-dice{left:22px;top:22px;font-size:var(--pl-f3,16px)}.bx-cx-salen{left:20px;right:20px;bottom:18px;gap:12px}.bx-cx-salen li{padding:12px 14px}.bx-cx-salen b{font-size:var(--pl-f3,16px)}.bx-cx-salen small{font-size:var(--pl-f1,12px)}}
@media (prefers-reduced-motion:reduce){.bx-cx-escena *,.bx-cx-escena *::before,.bx-cx-escena *::after{animation:none!important}.bx-cx-dice span{clip-path:none}.bx-cx-h::before,.bx-cx-h::after{opacity:0}}

/* ── Mentorías ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.bx-mentor-par{display:grid;gap:16px;margin-top:18px}
@media (min-width:900px){.bx-mentor-par{grid-template-columns:1fr 1fr;align-items:start}}
.bx-mentor{display:grid;overflow:hidden;border-radius:var(--cx-r1);border:1px solid rgba(20,24,31,.08);background:var(--cx-c6);box-shadow:0 18px 40px -28px rgba(20,24,31,.45)}
.bx-mentor-franja{display:flex;align-items:center;gap:14px;min-height:112px;padding:18px 20px;color:var(--cx-c5);background:radial-gradient(110% 120% at 100% 0%,rgba(245,165,36,.5),transparent 60%),linear-gradient(150deg,var(--cx-c2),var(--cx-c13))}
.bx-mentor-alex .bx-mentor-franja{background:radial-gradient(110% 120% at 0% 0%,rgba(245,165,36,.55),transparent 60%),linear-gradient(150deg,var(--cx-c14),var(--cx-c15))}
.bx-mentor-num{font:800 var(--pl-f6,40px)/1 Archivo,Manrope,system-ui,sans-serif;letter-spacing:-.04em;color:var(--cx-c8)}
.bx-mentor-num i{font-style:normal;font-size:var(--pl-f4,20px);margin:0 .12em;color:var(--cx-c5);vertical-align:.35em}
.bx-mentor-num-txt{font:700 var(--pl-f2,14px)/1.3 Manrope,system-ui,sans-serif;opacity:.92}
.bx-mentor-cuerpo{display:grid;gap:10px;padding:18px 20px 20px}
.bx-mentor-t{margin:0;font:800 var(--pl-f4-5,20px)/1.1 Manrope,system-ui,sans-serif;letter-spacing:-.02em;color:var(--cx-c10)}
.bx-mentor-frase{margin:0;color:var(--cx-c16);font-size:var(--pl-f3,16px);line-height:1.45}
.bx-mentor .bx-experto{margin-top:6px}
.bx-mentor-duena{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:14px 16px;border-radius:var(--cx-r6);background:linear-gradient(135deg,rgba(245,165,36,.16),rgba(245,165,36,.05));border:1px solid rgba(245,165,36,.4)}
.bx-mentor-duena div{display:grid;gap:2px;min-width:0}
.bx-mentor-duena strong{font:800 var(--pl-f3,16px)/1.2 Manrope,system-ui,sans-serif;color:var(--cx-c10)}
.bx-mentor-duena span{color:var(--cx-c16);font-size:var(--pl-f2,14px)}

/* Panel de Max (L9): la sección de Clientes en su propia página; .p3-aliado trae la rejilla de las tarjetas de marca
   (40 px de logo + texto) y aquí no hay logo, así que va a una columna. */
.bx-panel-max section.p3-aliado{grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;padding:0;margin-top:14px}
.bx-panel-max .p3-alu-toca ul{display:grid;gap:8px;margin:8px 0 12px;padding:0;list-style:none}
.bx-panel-max .p3-alu-toca li{display:flex;gap:8px;align-items:flex-start}

/* ── L10 · Tres lugares (Hoy, Herramientas, Mentorías) y «Más» en hoja ─────────────────────────────────────────────
   Por qué abajo: casi todas las visitas son de celular y la barra queda al alcance del pulgar; el menú de 8 entradas pasa
   a la hoja de «Más». En computadora ya están en la cabecera, así que la barra solo vive hasta 639 px. Otras piezas fijas
   abajo (el aviso de cookies, el botón de misión) se suben con --bx-lugares-alto. Se esconde mientras se escribe en la
   barra del buscador para dejarle sitio al teclado. */
.bx-lugares{display:none}
@media (max-width:639px){
  :root{--bx-lugares-alto:calc(64px + env(safe-area-inset-bottom,0px))}
  .bx-lugares{position:fixed;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:45;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:4px;border-radius:var(--cx-r1);background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 var(--cx-c6),0 0 0 1px rgba(110,118,132,.16),0 14px 30px -12px rgba(20,24,32,.35);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
  .bx-lugar{display:grid;justify-items:center;align-content:center;gap:3px;min-height:52px;padding:4px 2px;border:0;border-radius:var(--cx-r6);background:transparent;color:var(--cx-c16);font:700 var(--pl-f1,12px)/1.1 Manrope,system-ui,sans-serif;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--cx-t16),color var(--cx-t16)}
  .bx-lugar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .bx-lugar:focus-visible{outline:3px solid var(--cx-c8);outline-offset:1px}
  /* «Buscador», al centro y más visible (Alex, 3-nov-2026): la H en un círculo ámbar. */
  .bx-lugar-h{display:grid;place-items:center;width:34px;height:34px;margin-top:-2px;border-radius:var(--cx-r5);background:var(--pl-degradado,var(--cx-c1));box-shadow:0 6px 14px -6px var(--cx-c1)}
  .bx-lugar-h img{width:16px;height:auto;filter:brightness(0) invert(1)}
  body:has(> #capa-buscar > .b-respuestas[data-vista="inicio"]) .bx-lugar[data-lugar="inicio"],
  body:has(> #capa-buscar > .b-respuestas[data-vista="herramientas"]) .bx-lugar[data-lugar="herramientas"],
  body:has(> #capa-buscar > .b-respuestas:is([data-vista="mentorias"],[data-vista="panel-max"])) .bx-lugar[data-lugar="mentorias"]{background:var(--cx-c10);color:var(--cx-c5)}
  body:has(> #capa-buscar > .b-respuestas[data-vista="inicio"]) .bx-lugar[data-lugar="inicio"] svg,
  body:has(> #capa-buscar > .b-respuestas[data-vista="herramientas"]) .bx-lugar[data-lugar="herramientas"] svg,
  body:has(> #capa-buscar > .b-respuestas:is([data-vista="mentorias"],[data-vista="panel-max"])) .bx-lugar[data-lugar="mentorias"] svg{stroke:var(--cx-c8)}
  body:has(> #capa-buscar > .buscador-original:focus-within) > .bx-lugares{opacity:0;pointer-events:none;transform:translateY(12px)}
  .bx-lugares{transition:opacity var(--cx-t16),transform var(--cx-t16)}
  #capa-buscar .b-respuestas{margin-bottom:calc(24px + var(--bx-lugares-alto))}
  #capa-buscar .aviso-buscador{margin-bottom:var(--bx-lugares-alto)}
  .hm-cookies{bottom:calc(var(--bx-lugares-alto) + 12px)!important}
}
.bx-hoja-lugares{display:grid;gap:8px}
@media (prefers-reduced-motion:reduce){.bx-lugares,.bx-lugar{transition:none}}

/* Controles de 44 px (auditoría externa, ronda 1): los dos botones redondos de la barra que aparece al bajar (al-bajar.js)
   medían 42 px. */
.bx-guardada .bx-guardada-h,.bx-guardada .bx-guardada-ir{min-width:44px;min-height:44px}

/* Mentorías, revisión del director de arte (1-nov-2026): número protagonista, titular grande, 3 líneas con ícono,
   tarjetas de igual alto a 1280 y los conectores de Alex en un desplegable. */
.bx-mentorias .b-asesor-titular{font-size:var(--pl-f6,40px);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.bx-mentor-par{align-items:stretch}
.bx-mentor{display:flex;flex-direction:column;container-type:inline-size}
/* La franja crece con el ancho de la tarjeta: el dibujo de la escena llega al 25.2 % del ancho (y=302 de 1200) y abajo van
   la cifra y su texto (~74 px) con aire; así la cifra nunca pisa el dibujo, de 360 a 1280 (2-nov-2026). */
.bx-mentor-cuerpo{flex:1;align-content:start}
.bx-mentor-franja{min-height:max(clamp(190px,24vw,230px),calc(25.2cqw + 88px));align-items:flex-end;padding:22px 24px}
.bx-mentor-num{font-size:var(--pl-f6,40px);line-height:.82}
.bx-mentor-num-txt{padding-bottom:10px;font-size:var(--pl-f3,16px)}
.bx-mentor-lineas{display:grid;gap:12px;margin:6px 0 4px;padding:0;list-style:none}
.bx-mentor-lineas li{display:flex;gap:12px;align-items:flex-start;font:600 var(--pl-f3,16px)/1.35 Manrope,system-ui,sans-serif;color:var(--cx-c10)}
.bx-mentor-lineas svg{flex:none;width:22px;height:22px;margin-top:-1px;fill:none;stroke:var(--cx-c11);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bx-mentor-mas{margin:0}
.bx-mentor-mas a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--cx-c10);font-weight:700}
.bx-mentor-mas svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.bx-mentor-quien{margin-top:8px;border-top:1px solid rgba(20,24,31,.08);padding-top:6px}
.bx-mentor-quien summary{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;list-style:none;font-size:var(--pl-f2,14px);color:var(--cx-c16)}
.bx-mentor-quien summary::-webkit-details-marker{display:none}
.bx-mentor-quien summary img{flex:none;width:28px;height:28px;object-fit:contain}
.bx-mentor-quien summary strong{color:var(--cx-c10)}
.bx-mentor-quien summary i{margin-left:auto;font-style:normal;font-weight:700;color:var(--cx-c1);white-space:nowrap}
.bx-mentor-quien[open] summary i{opacity:.6}
@media (max-width:420px){.bx-mentor-quien summary{flex-wrap:wrap}.bx-mentor-quien summary i{margin-left:38px}}

/* El botón flotante de misión (Equipo C, mision-flotante.js) se sube sobre la barra de lugares en el celular: a 375 tapaba
   «Más». Respeta su --mf-sube (lo usa para el aviso de cookies): se toma el mayor de los dos. */
@media (max-width:639px){
  body .mf-boton.mf-boton{bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + max(var(--mf-sube,0px),var(--bx-lugares-alto)))}
  body .mf-aviso.mf-aviso{bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + max(var(--mf-sube,0px),var(--bx-lugares-alto)) + 76px)}
}

/* Para el 9 del director de arte (1-nov-2026): el 8 y el 1a1 entran (600 ms, subiendo y creciendo un poco) y los rótulos de
   cada tarjeta van en minúsculas tenues, como la piel nueva. Con «reducir movimiento», quietos. */
.bx-mentor-num{display:inline-block;animation:cx-num var(--cx-t12) cubic-bezier(.22,1,.36,1) var(--cx-t17) both}
.bx-mentor-alex .bx-mentor-num{animation-delay:var(--cx-t18)}
.bx-mentor-num-txt{animation:cx-entra var(--cx-t3) cubic-bezier(.22,1,.36,1) var(--cx-t19) both}
@keyframes cx-num{from{opacity:0;transform:translate3d(0,22px,0) scale(.86)}}
.bx-mentor-cuerpo .eyebrow{text-transform:none;letter-spacing:.01em;font-weight:600;font-size:var(--pl-f2,14px);color:var(--cx-c19)}
@media (prefers-reduced-motion:reduce){.bx-mentor-num,.bx-mentor-num-txt{animation:none}}

/* La barra que aparece al bajar (al-bajar.js), oculta, queda con opacity:0 y scale(.96): sus botones median 42×42 para
   las herramientas que cuentan controles (ronda 1 de H: 42 de 55 vistas), aunque nadie la vea ni la toque. Al terminar su
   salida pasa a visibility:hidden (deja de contar y de ser alcanzable); visible, igual que siempre. */
.bx-guardada:not(.bx-visible){visibility:hidden;transition:opacity var(--bx-t-aparece,var(--cx-t20)) ease,transform var(--bx-t-sube,var(--cx-t5)) cubic-bezier(.22,1,.36,1),visibility var(--cx-t21) linear var(--bx-t-sube,var(--cx-t5))}
.bx-guardada.bx-visible{visibility:visible}

/* Las dos tarjetas de Mentorías miden lo mismo a 1280 (director de arte, 1-nov-2026); la piel nueva (piel.css, va después)
   las alinea al inicio y volvía a dejar un hueco. Aquí, con más especificidad, se estiran. */
.b-respuestas .bx-mentor-par.bx-mentor-par{align-items:stretch}

/* ── Grupo PointCare como red (Equipo F, 1-nov-2026; juicio del director de arte) ─────────────────────────────────────
   Tres nodos con su logo oficial y su color de marca (Hostess ámbar, Vozavía azul, Vértice dorado), unidos por líneas que se
   trazan una vez al llegar. Solo opacity, transform y stroke-dashoffset (CLS 0); con «reducir movimiento», el cuadro final. */
.bx-gr-red{position:relative;isolation:isolate;overflow:hidden;margin:14px 0 4px;border-radius:var(--cx-r1);height:clamp(232px,62vw,260px);background:radial-gradient(70% 60% at 50% 18%,rgba(245,165,36,.30),transparent 62%),radial-gradient(60% 55% at 12% 100%,rgba(79,139,255,.26),transparent 62%),radial-gradient(60% 55% at 88% 100%,rgba(140,128,90,.30),transparent 62%),linear-gradient(160deg,var(--cx-c2) 0%,var(--cx-c3) 62%,var(--cx-c4) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.bx-cx-hero .bx-gr-red{margin:0}
@media (min-width:900px){.bx-cx-hero .bx-gr-red{height:300px}}
.bx-gr-lineas{position:absolute;inset:0;width:100%;height:100%}
.bx-gr-lineas path{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:240;stroke-dashoffset:0;animation:gr-traza var(--cx-t7) var(--cx-t3) cubic-bezier(.22,1,.36,1) both}
.bx-gr-lineas .bx-gr-base{stroke:rgba(255,255,255,.18);stroke-dasharray:4 6;animation:none}
.bx-gr-red ul{list-style:none;margin:0;padding:0}
.bx-gr-nodo{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:var(--cx-c6);transform:translate(-50%,-28px);animation:gr-entra var(--cx-t6) cubic-bezier(.22,1,.36,1) both}
.bx-gr-hostess{left:50%;top:30.7%;animation-delay:var(--cx-t16)}
.bx-gr-vozavia{left:23%;top:69.3%;animation-delay:var(--cx-t3)}
.bx-gr-vertice{left:77%;top:69.3%;animation-delay:var(--cx-t6)}
.bx-gr-logo{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--cx-r3);background:var(--cx-c6);box-shadow:0 0 0 2px var(--cx-c8),0 10px 30px rgba(245,165,36,.35)}
.bx-gr-logo img{width:30px;height:30px;object-fit:contain}
.bx-gr-vozavia .bx-gr-logo{background:var(--cx-c20);box-shadow:0 0 0 2px var(--cx-c21),0 10px 30px rgba(79,139,255,.38)}
.bx-gr-vertice .bx-gr-logo{background:var(--cx-c22);box-shadow:0 0 0 2px var(--cx-c23),0 10px 30px rgba(140,128,90,.4)}
.bx-gr-nodo b{font-size:var(--pl-f2,14px);font-weight:800;line-height:1.1}
.bx-gr-nodo small{font-size:var(--pl-f1,12px);line-height:1.2;color:rgba(255,255,255,.72);white-space:nowrap}
.bx-gr-mas{max-width:46ch;margin:16px 0 0;color:var(--cx-c12);font-size:var(--pl-f3,16px)}
@keyframes gr-traza{from{stroke-dashoffset:240}}
@keyframes gr-entra{from{opacity:0;transform:translate(-50%,-28px) scale(.86)}}
@media (prefers-reduced-motion:reduce){.bx-gr-red *{animation:none!important}}
/* Un titular de 11 palabras (Grupo) un paso abajo en la escala: a 1280 daba 6 renglones junto a la red. */
/* (piel.css fija los titulares en --pl-f6 con !important: aquí se baja un paso, solo este.) */
@media (min-width:900px){body.en-buscar .b-respuestas .bx-vista .bx-cx-hero .bx-cx-largo h1.b-asesor-titular,body.en-buscar .b-respuestas .bx-vista .bx-cx-hero .bx-cx-largo h1.b-asesor-titular span,body.en-buscar .bx-cx-hero .bx-cx-largo h1.b-asesor-titular,body.en-buscar .bx-cx-hero .bx-cx-largo h1.b-asesor-titular span{font-size:var(--pl-f4-5,32px)!important}}
/* Mentorías (director de arte, 1-nov-2026): mientras llegan las fotos de Max y Alex, el bloque de imagen de cada tarjeta trae
   la escena de la casa de su tema (la clase en vivo; la propuesta en la mesa), con un velo hacia la cifra para que se lea.
   Las tarjetas entran al verse (.pl-visto, como el resto de la piel). */
.bx-mentor-franja{position:relative;isolation:isolate;overflow:hidden}
/* 2-nov-2026 (O: mentorías a 10 sin fotos): escenas propias sin siluetas, mentoria-grupo y mentoria-1a1, dibujadas arriba
   de la franja; abajo, el mismo velo en las dos tarjetas: sólido bajo la cifra (64 px) y se desvanece en 20 px más; la escena va pegada arriba y la franja mide 190 px en el
   celular. Así
   ningún texto cruza una línea del dibujo, ni a 375 ni a 1280. */
.bx-mentor-escena{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.bx-mentor-franja::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,color-mix(in srgb,var(--cx-c13) 94%,transparent) 0,color-mix(in srgb,var(--cx-c13) 94%,transparent) 64px,transparent 84px)}
/* El monograma: 44 px en celular y 56 px desde 1024; tinta, iniciales blancas en Archivo 600, anillo de 2 px con el degradado. */
.bx-mono{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border:2px solid transparent;border-radius:var(--cx-r3);background:linear-gradient(var(--cx-c24),var(--cx-c24)) padding-box,var(--pl-degradado) border-box;color:var(--cx-c6);font:600 var(--pl-f3,16px)/1 Archivo,Manrope,system-ui,sans-serif;letter-spacing:-.02em}
@media (min-width:1024px){.bx-mono{width:56px;height:56px;font-size:var(--pl-f4,20px)}}
.bx-mentor-quien-es{display:flex;align-items:center;gap:12px;margin:0}
.bx-mentor-quien summary .bx-mono{width:44px;height:44px;font-size:var(--pl-f3,16px)}
/* Las que ya se ven al llegar entran al pintarse, una tras otra (misma entrada de la piel: pl-entra); las de abajo, al verse.
   Mismo nombre de animación en los dos casos: al quitarse .pl-visto no vuelve a correr. */
.bx-mentorias .bx-mentor:not(.pl-pendiente){animation:pl-entra var(--pl-t-entra) var(--pl-curva) both;animation-delay:calc(var(--i,0) * var(--pl-paso))}
@media (prefers-reduced-motion:reduce){.bx-mentorias .bx-mentor{animation:none!important}}
/* Ajustes del director de arte (1-nov-2026): en la tarjeta de Alex la franja ámbar de la escena quedaba detrás de «tu negocio
   en la mesa»; la escena se recorre hacia arriba a la derecha y el velo se oscurece donde va el texto. La «a» de «1 a 1» en la
   misma línea base, con aire a cada lado (a 1280 se leía «1.1»). */
.bx-mentor-num i{vertical-align:baseline;margin:0 .18em}
@media (min-width:900px){.bx-mentor-num i{font-size:var(--pl-f5,40px)}}

/* ── Proyectos, Aliados y Sectores (Equipo F, 1-nov-2026; juicio del director de arte) ─────────────────────────────── */
/* Proyectos: tres columnas a 1280 con imágenes de la misma proporción, la descripción a 16 px, las herramientas como
   etiquetas (sin contorno, fondo suave, sin flecha) y una sola acción por tarjeta. */
@media (min-width:1024px){.b-respuestas [data-vista=proyectos] .bx-rejilla.bx-rejilla-2{grid-template-columns:repeat(3,minmax(0,1fr))}}
[data-vista=proyectos] .bx-proyecto .bx-ficha-media{aspect-ratio:16/10;height:auto}
[data-vista=proyectos] .bx-proyecto .bx-ficha-media img{width:100%;height:100%;object-fit:cover}
[data-vista=proyectos] .bx-proyecto .bx-ficha-frase,[data-vista=proyectos] .bx-proyecto .bx-ficha-para{font-size:var(--pl-f3,16px)}
.bx-etiquetas{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.bx-etiqueta{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--cx-r5);background:rgba(245,165,36,.14);color:var(--pl-tinta,var(--cx-c10));font:600 var(--pl-f1,12px)/1.3 Manrope,system-ui,sans-serif}
.bx-proyecto-ir{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:8px;color:var(--pl-ambar-texto,var(--cx-c1));font:700 var(--pl-f3,16px)/1 Manrope,system-ui,sans-serif;text-decoration:none}
.bx-proyecto-ir svg{width:16px;height:16px;transition:transform var(--cx-t20) cubic-bezier(.22,1,.36,1)}
.bx-proyecto-ir:hover svg,.bx-proyecto-ir:focus-visible svg{transform:translateX(3px)}

/* Aliados de negocio: el logo oficial sobre el color de marca de cada uno (data-promo), la misma proporción para todos. */
.bx-aliado-marca{position:relative;display:grid!important;place-items:center;aspect-ratio:16/10;height:auto!important;background:var(--cx-c17);color:var(--cx-c10);box-shadow:inset 0 -1px 0 rgba(0,0,0,.06)}
/* Los colores son los de la ficha promocional de cada aliado (promo-aliados.css, medidos en su sitio el 27-oct-2026). */
.bx-aliado-marca[data-promo="azhari"],.b-respuestas .bx-ficha-media.bx-aliado-marca[data-promo="azhari"]{background:var(--cx-al-azhari);color:var(--cx-al-azhari-t)}.bx-aliado-marca[data-promo="el-cortijo"],.b-respuestas .bx-ficha-media.bx-aliado-marca[data-promo="el-cortijo"]{background:var(--cx-al-el-cortijo);color:var(--cx-al-el-cortijo-t)}.bx-aliado-marca[data-promo="vozavia"],.b-respuestas .bx-ficha-media.bx-aliado-marca[data-promo="vozavia"]{background:var(--cx-al-vozavia);color:var(--cx-al-vozavia-t)}.bx-aliado-marca[data-promo="vertice"],.b-respuestas .bx-ficha-media.bx-aliado-marca[data-promo="vertice"]{background:var(--cx-al-vertice);color:var(--cx-al-vertice-t)}.bx-aliado-marca[data-promo="oysters"],.b-respuestas .bx-ficha-media.bx-aliado-marca[data-promo="oysters"]{background:var(--cx-al-oysters);color:var(--cx-al-oysters-t)}.bx-aliado-marca[data-promo="syntex-nutrition"],.b-respuestas .bx-ficha-media.bx-aliado-marca[data-promo="syntex-nutrition"]{background:var(--cx-al-syntex-nutrition);color:var(--cx-al-syntex-nutrition-t)}.bx-aliado-marca[data-promo="ess-packing"],.b-respuestas .bx-ficha-media.bx-aliado-marca[data-promo="ess-packing"]{background:var(--cx-al-ess-packing);color:var(--cx-al-ess-packing-t)}.bx-aliado-marca[data-promo="tapand"],.b-respuestas .bx-ficha-media.bx-aliado-marca[data-promo="tapand"]{background:var(--cx-al-tapand);color:var(--cx-al-tapand-t)}.bx-aliado-marca[data-promo="grupobildim"],.b-respuestas .bx-ficha-media.bx-aliado-marca[data-promo="grupobildim"]{background:var(--cx-al-grupobildim);color:var(--cx-al-grupobildim-t)}.bx-aliado-marca[data-promo="binoqular"],.b-respuestas .bx-ficha-media.bx-aliado-marca[data-promo="binoqular"]{background:var(--cx-al-binoqular);color:var(--cx-al-binoqular-t)}
.bx-ficha-media.bx-aliado-marca img,.vh-media.bx-aliado-marca img{position:static;inset:auto;width:auto;height:auto;max-width:70%;max-height:46%;object-fit:contain;transform:none}
.bx-aliado-marca .bx-promo-marca{font-size:var(--pl-f4,20px);text-align:center}
.bx-aliado-ir,.b-respuestas .bx-ficha-ir.bx-aliado-ir{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--pl-ambar-texto,var(--cx-c1));font-weight:700}
.bx-aliado-ir svg{width:16px;height:16px}
/* La tecnología, después y compacta: rejilla de 4 × 2 con logo y nombre, sin descripción (la hoja de cada una sí la trae). */
.bx-tec-rejilla{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bx-tec-rejilla .p3-con,.b-respuestas .bx-tec-rejilla .p3-con{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;min-height:88px;padding:12px 4px;text-align:center}
.bx-tec-rejilla .p3-con-txt{min-width:0;max-width:100%}
.bx-tec-rejilla .p3-con-txt strong{display:block;overflow-wrap:anywhere}
.bx-tec-rejilla .p3-con-txt{align-items:center}
.bx-tec-rejilla .p3-con-txt small{display:none}
.bx-tec-rejilla .p3-con-txt strong{font-size:var(--pl-f1,12px);line-height:1.2}

/* Elige tu sector: a 1280, cuatro columnas con la descripción a 16 px (con cinco salía a ~12 px). */
@media (min-width:1024px){.b-respuestas [data-vista=sectores] .bx-rejilla.bx-rejilla-sectores{grid-template-columns:repeat(4,minmax(0,1fr))}}
[data-vista=sectores] .bx-ficha-frase{font-size:var(--pl-f3,16px)}
/* Dos logos que no son horizontales y gruesos: Grupo Bildim es vertical (ícono y nombre) y Binoqular, de trazo fino; se dejan
   más grandes para que se lean (director de arte, 1-nov-2026). */
.b-respuestas .bx-ficha-media.bx-aliado-marca[data-promo="grupobildim"] img,.vh-media.bx-aliado-marca[data-promo="grupobildim"] img{max-width:36%;max-height:none}
.b-respuestas .bx-ficha-media.bx-aliado-marca[data-promo="binoqular"] img,.vh-media.bx-aliado-marca[data-promo="binoqular"] img{max-width:86%;max-height:none}