/* VERSIÓN B: cálida, luminosa y con volumen (referencia de la CTO: ../marca/referencia_color_profesionalidad.png).
   Luz de mañana por un ventanal, madera clara y mármol, plantas, portátil verde salvia, ciudad desenfocada; texto
   gris pizarra con el acento en salvia. No una paleta plana: capas, sombras suaves, degradados de luz, materia.
   Misma web y mismo contenido que la A: aquí sólo cambian variables, luz y la portada con el portátil.
   Se activa con html.version-b (?version=b, recordado) o sirviendo con herramientas/servir_version_b.py. */

html.version-b {
  --fondo: #f6f1e8;
  --papel: #fffdf8;
  --papel-calido: #f0e7d8;
  --humo: #e8dfcf;
  --tinta: #4a524d;        /* gris pizarra verdoso */
  --tinta-2: #68716b;
  --gris: #98a09a;
  --gris-claro: #c9c4b8;
  --linea: rgba(74, 82, 77, 0.12);
  --linea-fuerte: rgba(74, 82, 77, 0.22);
  --salvia: #86a391;
  --salvia-hondo: #6d8a78;
  --salvia-suave: #e2e9e0;
  --salvia-fondo: #e4ebe2;
  --oro: #cfa54a;
  --oro-tinta: #94741f;
  --oro-claro: #e6cc85;
  --oro-suave: #f4e6c4;
  --claro: #fbf7ef;
  --sombra: 0 30px 70px rgba(96, 78, 46, 0.18), 0 8px 22px rgba(96, 78, 46, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --sombra-lamina: 0 70px 140px rgba(96, 78, 46, 0.3), 0 14px 36px rgba(96, 78, 46, 0.14);
  --radio: 24px;
  --velo-rgb: 92, 84, 70;  /* el velo de las fotos: gris cálido, no verdoso */
}
.version-b body { background: var(--fondo); }
/* La luz de mañana: una mancha cálida arriba a la izquierda y otra fría muy leve a la derecha, en todas las secciones */
.version-b .seccion:not(.con-foto):not(.hero)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 70% at 10% 0%, rgba(255, 236, 200, 0.55), transparent 70%), radial-gradient(40% 50% at 95% 100%, rgba(214, 226, 216, 0.5), transparent 70%); }
.version-b .seccion { isolation: isolate; }
.version-b .seccion-calida { background: linear-gradient(180deg, #f1e8d9, #ede2d0); }
.version-b .seccion-salvia { background: linear-gradient(180deg, #e9eee5, #dfe8e0); }
/* Las piezas y tarjetas: papel con luz arriba, sombra cálida abajo (volumen, no plano) */
.version-b .pieza, .version-b .resena, .version-b .persona, .version-b .libro, .version-b .preguntas details, .version-b .siguiente a, .version-b .guia-tarjeta, .version-b .servicio-avanzado, .version-b .formulario, .version-b .mapa {
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.92), rgba(250, 244, 232, 0.86)); border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 12px 30px rgba(96, 78, 46, 0.1);
}
.version-b .celda { box-shadow: 0 16px 40px rgba(96, 78, 46, 0.16); }
.version-b .celda-tinta { background: linear-gradient(160deg, #7f9c88, #5c6a62); }
.version-b .boton-oro { background: linear-gradient(180deg, #dcb45a, #c69b3c); border-color: #c69b3c; color: #3b3012; box-shadow: 0 10px 24px rgba(198, 155, 60, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.version-b .boton-claro { background: rgba(255, 253, 248, 0.6); }
/* Más transparente (21-oct, la CTO): se ve pasar la página por detrás; el desenfoque de la barra mantiene el menú legible */
.version-b .barra, .version-b.es-portada .barra:not(.cristal), .version-b .es-portada .barra:not(.cristal) { background: rgba(246, 241, 232, 0.38); }
.version-b .barra.cristal { background: rgba(246, 241, 232, 0.66); }
.version-b .antetitulo { color: var(--salvia-hondo); }
.version-b h1 em, .version-b .salvia { color: var(--salvia-hondo); }
.version-b .cab-foto img, .version-b .hero-foto img { filter: saturate(0.95) brightness(1.03); }
.version-b .cab-foto::after { background: linear-gradient(90deg, rgba(246, 241, 232, 0.92) 0%, rgba(246, 241, 232, 0.6) 40%, rgba(var(--velo-rgb), 0.12) 100%), linear-gradient(180deg, rgba(246, 241, 232, 0) 78%, rgba(246, 241, 232, 1) 100%); }
.version-b .con-foto.velo-centro .cab-foto::after { background: linear-gradient(180deg, rgba(246, 241, 232, 0.3) 0%, rgba(246, 241, 232, 0.55) 60%, rgba(246, 241, 232, 1) 100%); }
.version-b .con-foto .bloque-texto { background: rgba(255, 253, 248, 0.72); box-shadow: 0 24px 70px rgba(96, 78, 46, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8); }
.version-b .con-fondo::before { opacity: 0.1; }
.version-b .pie { background: linear-gradient(180deg, #f0e7d8, #e9dfcc); }

/* ---------- La portada de la B: la mañana por el ventanal y el portátil con la Oficina Digital en la pantalla ---------- */
.version-b .hero { padding-bottom: 72px; }
.version-b .hero-velo { background: linear-gradient(90deg, rgba(246, 241, 232, 0.9) 0%, rgba(246, 241, 232, 0.72) 36%, rgba(246, 241, 232, 0.2) 62%, rgba(246, 241, 232, 0.05) 100%), linear-gradient(180deg, rgba(246, 241, 232, 0) 72%, rgba(246, 241, 232, 1) 100%); }
.version-b .hero-texto { color: var(--tinta); text-shadow: none; }
.version-b .hero-texto h1 { color: var(--tinta); }
.version-b .hero-texto h1 em { color: var(--salvia-hondo); }
.version-b .hero-texto .linea { color: var(--tinta-2); }
.version-b .hero-nota { color: var(--tinta-2); }
.version-b .hero-nota a { color: var(--oro-tinta); }
.version-b .boton-cristal { background: rgba(255, 253, 248, 0.6); color: var(--tinta); border-color: rgba(74, 82, 77, 0.2); }
.version-b .logo-grande { filter: none; }
/* El logo vuelve a sus colores sobre el fondo claro */
.version-b .logo-claro .l-r, .version-b .logo-claro text[fill="#9a9d9b"] { fill: #9a9d9b; }
.version-b .logo-claro .l-nombre, .version-b .logo-claro text[fill="#56605b"] { fill: #4a524d; }
.version-b .logo-claro .l-asociados, .version-b .logo-claro text[fill="#7d8580"] { fill: #7d8580; }
.version-b .logo-claro .l-a, .version-b .logo-claro text[fill="#8aaa97"] { fill: #86a391; }
/* «DESDE 1992» en blanco también sobre el fondo claro (lo pidió la CTO): la sombra suave es lo que lo deja leer sobre el crema */
.version-b .logo-claro .l-desde, .version-b .logo-claro .l-desde rect { fill: #fff; }
.version-b .logo-claro .l-desde { filter: drop-shadow(0 1px 1px rgba(60, 52, 38, 0.8)) drop-shadow(0 0 3px rgba(60, 52, 38, 0.35)); }
/* En el pie, «DESDE 1992» sin sombras (la CTO): en blanco con sombra se veía borroso; va en el gris del logo */
.version-b .pie-logo .l-desde, .version-b .pie-logo .l-desde rect { fill: var(--tinta-2); filter: none; }
/* El portátil: tapa verde salvia con marco oscuro fino, la pantalla es el clip; base con bisagra y sombra en la mesa */
.version-b .hero-lamina { perspective: 2000px; padding-bottom: 34px; }
.version-b .hero-lamina .lamina { border-radius: 14px 14px 4px 4px; border: 10px solid #2a2f2c; border-bottom-width: 14px; box-shadow: 0 0 0 2px #7f9c88, 0 50px 90px rgba(60, 52, 38, 0.38), 0 18px 40px rgba(60, 52, 38, 0.2); background: #0e1110; }
.version-b .hero-lamina .lamina::before { content: ""; position: absolute; left: 50%; top: -6px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #0c0f0e; box-shadow: inset 0 0 0 1.5px #3a4541; z-index: 5; }
.version-b .hero-lamina .lamina::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -34px; height: 20px; border-radius: 0 0 16px 16px; background: linear-gradient(180deg, #9fb5a6 0%, #7f9c88 30%, #5f7a69 100%); box-shadow: 0 10px 28px rgba(60, 52, 38, 0.3); z-index: -1; }
.version-b .hero-lamina .lamina .rotulo { background: rgba(255, 253, 248, 0.9); }
@keyframes posa-b { from { opacity: 0; transform: rotateX(14deg) rotateY(-12deg) translateY(40px) scale(0.94); filter: blur(6px); } to { opacity: 1; transform: rotateX(4deg) rotateY(-6deg); filter: none; } }
.js.version-b .hero-lamina .lamina { animation-name: posa-b; }
/* En el móvil la lámina es un teléfono: sin base de portátil, marco más redondo */
.version-b .hero-lamina .lamina.lamina-telefono { border-radius: 30px; border-width: 8px; }
.version-b .hero-lamina .lamina.lamina-telefono::after, .version-b .hero-lamina .lamina.lamina-telefono::before { display: none; }
@media (max-width: 1024px) {
  .version-b .hero-velo { background: linear-gradient(180deg, rgba(246, 241, 232, 0.88) 0%, rgba(246, 241, 232, 0.7) 55%, rgba(246, 241, 232, 1) 100%); }
  .js.version-b .hero-lamina .lamina { animation-name: posa-plana; }
  .version-b .hero-lamina .lamina::after { left: -4%; right: -4%; }
}

/* ---------- Portada con la foto del portátil (21-oct): el clip va DENTRO de su pantalla verde ----------
   La posición exacta la calcula js/pantalla-foto.js; aquí sólo se quita todo lo que
   hacía de portátil dibujado (marco, bisagra, sombras, inclinación) y se fija la foto
   para que no se mueva (si la foto respira, la pantalla se descuadra). */
.version-b .hero.con-pantalla { min-height: min(100svh, 46vw); padding-top: calc(var(--nav-alto) + 16px); }

/* La foto de la portada se funde con el primer bloque (21-oct, la CTO: «que el cambio sea más natural»).
   Medido en la junta: la foto acababa en un beige más oscuro (237 frente al 246 del fondo) y el bloque de
   debajo arrancaba con su brillo cálido a la izquierda. Ahora la foto termina en el --fondo exacto con un
   fundido largo, y el brillo del primer bloque aparece poco a poco en vez de empezar de golpe en la junta. */
.version-b .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: clamp(160px, 20vw, 320px); pointer-events: none; background: linear-gradient(180deg, rgba(246, 241, 232, 0) 0%, rgba(246, 241, 232, 0.55) 45%, rgba(246, 241, 232, 0.9) 75%, var(--fondo) 100%); }
/* En el móvil la sombra del teléfono llega hasta el borde de la foto y se cortaba allí: el fundido va por encima */
@media (max-width: 1024px) { .version-b .hero::after { z-index: 3; height: 150px; } }
.version-b .hero + .seccion::before { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 280px); mask-image: linear-gradient(180deg, transparent 0, #000 280px); }

/* «Nos hemos mudado»: el cuadro a la derecha y el velo sólo por ese lado, para que se vea el despacho
   (21-oct, la CTO: «no se ve el despacho»; probado a la izquierda, lo quiso a la derecha) */
.version-b .con-foto.mudanza .cab-foto::after { background: linear-gradient(270deg, rgba(246, 241, 232, 0.6) 0%, rgba(246, 241, 232, 0.2) 42%, rgba(246, 241, 232, 0) 65%), linear-gradient(180deg, rgba(246, 241, 232, 0) 78%, var(--fondo) 100%), rgba(246, 241, 232, 0.16); }
/* Casi al borde (la CTO: «más a la derecha»): el ancho de la barra, así el cuadro acaba donde «Acceso clientes» */
.mudanza .contenedor.cierre { max-width: none; width: min(var(--ancho-barra), 100% - 2 * var(--gutter)); justify-items: end; }
.mudanza .bloque-texto.cierre { max-width: 500px; margin-inline: 0; justify-items: start; text-align: left; }
.mudanza .cierre .botones { justify-content: flex-start; }
@media (max-width: 720px) { .mudanza .bloque-texto.cierre { max-width: none; } }
/* La foto del despacho, un poco nublada (la CTO: «menos claridad»): desenfoque leve y menos contraste, para que
   se vea el sitio sin que compita con el cuadro. Se amplía un pelo para que el desenfoque no deje borde. */
.version-b .con-foto.mudanza .cab-foto img { filter: blur(1.6px) contrast(0.92) saturate(0.95); transform: scale(1.02); }
/* Las dos fotos se turnan (la CTO: «que pase la otra foto»): 9 s cada una, con un fundido de 1,5 s.
   Con «reducir movimiento» se queda la del despacho. */
.mudanza .cab-foto .mudanza-otra { position: absolute; inset: 0; opacity: 0; animation: mudanza-turno 18s ease-in-out infinite; }
.mudanza .cab-foto .mudanza-otra img { --foto-pos: 50% 50%; }
@keyframes mudanza-turno { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mudanza .cab-foto .mudanza-otra { animation: none; } }
/* Dorado con letra blanca (la CTO, en «Vecinos del CTM»): el dorado de siempre es demasiado claro para el
   blanco, así que éste va un tono más hondo para que se lea */
.version-b .boton-oro.boton-oro-blanco { background: linear-gradient(180deg, #c99d3e, #a9822c); border-color: #a9822c; color: #fff; text-shadow: 0 1px 1px rgba(80, 58, 14, 0.35); }
.version-b .boton-oro.boton-oro-blanco:hover { background: linear-gradient(180deg, #bf9336, #9c7726); color: #fff; }

/* Debajo de «Tu Oficina Digital» sobraba verde (la CTO): menos aire al final, y el salvia se va volviendo el
   beige claro de las opiniones, para que la unión entre las dos secciones no se note */
.version-b .por-que-escena { padding-bottom: clamp(28px, 3vw, 44px); background: linear-gradient(180deg, #e9eee5 0%, #e4ebe2 55%, #f8f1e4 100%); }
.version-b .por-que-escena + #opiniones { padding-top: clamp(40px, 5vw, 72px); }
/* Los brillos de fondo de las dos secciones chocaban en la junta: fuera el de esta (ya tiene la foto) y el de
   las opiniones entra poco a poco desde arriba */
.version-b .por-que-escena::before { display: none; }
.version-b .por-que-escena + #opiniones::before { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 240px); mask-image: linear-gradient(180deg, transparent 0, #000 240px); }

/* Sin corte entre las opiniones y la foto del CTM (la CTO): la sección de la foto lleva de fondo el mismo beige
   en que acaban las opiniones y la foto aparece poco a poco desde arriba; el brillo de abajo de las opiniones,
   que tiraba a verde justo en la junta, se apaga antes de llegar */
.version-b #opiniones + .mudanza { background: #f3e9d7; }
.version-b #opiniones + .mudanza .cab-foto { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 180px); mask-image: linear-gradient(180deg, transparent 0, #000 180px); }
.version-b #opiniones::before { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 240px, #000 calc(100% - 220px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 240px, #000 calc(100% - 220px), transparent 100%); }

/* Cierre de la portada: «¿Qué servicios cubrimos?» con la foto de las herramientas como en la cabecera de
   Asesoría de www.entreasesores.com, que es como le gusta a la CTO (probadas antes: difuminada, más pequeña; no):
   grande, a sangre en los dos tercios de la derecha, enseñando la parte de arriba (la cabeza del martillo),
   nítida, mezclada con el beige (multiply: su blanco desaparece) y velada sólo hacia el texto de la izquierda. */
.version-b .cierre-servicios { position: relative; overflow: hidden; background: #f1e9dc; padding-block: clamp(80px, 10vw, 150px); }
.version-b .cierre-servicios::before { display: none; }
.cierre-servicios-foto { position: absolute; top: 0; bottom: 0; left: 36%; right: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cierre-servicios-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 12%; mix-blend-mode: multiply; transform: scale(1.04); transform-origin: 70% 30%; }
.cierre-servicios-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(241, 233, 220, 0.5) 0, rgba(241, 233, 220, 0) 140px), linear-gradient(90deg, rgba(241, 233, 220, 1) 0%, rgba(241, 233, 220, 0.85) 18%, rgba(241, 233, 220, 0.2) 48%, rgba(241, 233, 220, 0) 100%); }
/* Con los libros no hace falta multiply (no van sobre blanco): la foto tal cual, encuadrada en los libros */
.cierre-libros img { mix-blend-mode: normal; object-position: 88% 50%; transform: none; }
/* Fundida arriba y abajo (la CTO): sin borde con la sección de antes ni con el pie */
.cierre-libros { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 74%, transparent 100%); }
/* El pie va pegado a la última sección en todas las páginas, sin franja de separación ni raya de borde (la CTO) */
.version-b .pie { margin-top: 0; border-top: 0; }
.cierre-servicios-caja { position: relative; z-index: 1; }
.cierre-servicios-texto { display: grid; gap: 16px; justify-items: start; max-width: 520px; }
.cierre-servicios-texto .botones { margin-top: 8px; }
/* En el móvil la foto queda detrás de todo, más velada, para que el texto se lea */
@media (max-width: 900px) {
  .cierre-servicios-foto { left: 0; }
  .cierre-servicios-foto::after { background: linear-gradient(90deg, rgba(241, 233, 220, 0.92) 0%, rgba(241, 233, 220, 0.7) 60%, rgba(241, 233, 220, 0.45) 100%); }
}

/* Página de IA: el cerebro de la cabecera va sin velo (ya es casi del color del fondo; con velo desaparecería) */
.version-b .ia-cabecera .cab-foto::after { display: none; }
/* Apagado (la CTO: «quitarle brillo»): menos color, menos contraste y más transparente sobre el crema */
.version-b .ia-cabecera .cab-foto img { filter: saturate(0.55) contrast(0.82) brightness(1.02); opacity: 0.62; animation: none; }
/* Sin cortes alrededor de «Cómo lo hacemos» (la CTO): la foto del cerebro se desvanece por abajo hacia el crema,
   y la sección de seguridad entra desde el crema hacia el salvia (y vuelve a crema al final), con la caja fuerte
   fundida también arriba y abajo */
.version-b .ia-cabecera { background: var(--fondo); }
.version-b .ia-cabecera .cab-foto { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
.version-b .seccion-salvia.ia-seguridad { background: linear-gradient(180deg, var(--fondo) 0, #e9eee5 220px, #dfe8e0 calc(100% - 220px), var(--fondo) 100%); }
.version-b .seccion.ia-seguridad:not(.con-foto):not(.hero)::before { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%), linear-gradient(180deg, transparent 0, #000 200px, #000 calc(100% - 200px), transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 45%), linear-gradient(180deg, transparent 0, #000 200px, #000 calc(100% - 200px), transparent 100%); mask-composite: intersect; }
/* Las cards de «Así guardamos tus datos», en verde salvia con letra crema (la CTO: «para darle algo de contraste») */
.version-b .ia-seguridad .pieza { background: linear-gradient(160deg, #7f9c88, #627f6d); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 18px 40px rgba(60, 82, 68, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.version-b .ia-seguridad .pieza::before { background: #e8c879; }
.version-b .ia-seguridad .pieza b { color: #fffdf8; }
.version-b .ia-seguridad .pieza span { color: rgba(255, 253, 248, 0.88); }
/* El brillo de fondo de «Cómo lo hacemos» empezaba y acababa en seco y marcaba las dos juntas: se difumina */
.version-b .ia-cabecera + .seccion::before { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 220px, #000 calc(100% - 220px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 220px, #000 calc(100% - 220px), transparent 100%); }
/* En el móvil, el cerebro detrás del texto: velo crema para que se lea */
@media (max-width: 720px) { .version-b .ia-cabecera .cab-foto::after { display: block; background: rgba(246, 241, 232, 0.55); } }
/* «Así guardamos tus datos» con la caja fuerte de fondo, suave. Regla propia: el ::before de las secciones de la
   versión B lleva el brillo de fondo y taparía un fondo sutil normal */
.version-b .seccion.ia-seguridad:not(.con-foto):not(.hero)::before { background: url(/img/fondos/sutil-caja.webp) 75% 50% / cover no-repeat; opacity: 0.16; }
@media (max-width: 760px) { .version-b .seccion.ia-seguridad:not(.con-foto):not(.hero)::before { background-image: url(/img/fondos/sutil-caja-movil.webp); opacity: 0.12; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%); } }

/* Equipo: en el móvil el texto cae encima de los libros de la foto; velo crema más fuerte para que se lea */
@media (max-width: 720px) { .version-b .equipo-cabecera .cab-foto::after { background: linear-gradient(180deg, rgba(246, 241, 232, 0.86) 0%, rgba(246, 241, 232, 0.78) 70%, rgba(246, 241, 232, 1) 100%); } }

/* Equipo, «Más de treinta años»: los remeros detrás, velados en crema sobre todo por arriba, donde va el título */
.version-b .trayectoria .cab-foto::after { background: linear-gradient(180deg, rgba(246, 241, 232, 0.88) 0%, rgba(246, 241, 232, 0.45) 45%, rgba(246, 241, 232, 0.25) 80%, rgba(246, 241, 232, 0.6) 100%); }
.version-b .trayectoria .cab-foto img { animation: none; }

/* Contacto, «Nos hemos mudado»: los camiones del CTM en salvia, casi del color del fondo, que sólo se intuyan.
   Va en el ::before (regla con :not para ganar al brillo de las secciones B) y fundido arriba y abajo */
.version-b .seccion.mudanza-ctm:not(.con-foto):not(.hero)::before { background: url(/img/fondos/ctm-salvia.webp) 50% 60% / cover no-repeat; opacity: 0.5; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 35%, #000 65%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 35%, #000 65%, transparent 100%); }
/* El brillo de fondo de la sección de antes acababa en seco justo encima: se apaga antes de llegar */
.version-b .seccion:has(+ .mudanza-ctm)::before { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 260px), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 260px), transparent 100%); }
/* Sin corte arriba ni abajo (la CTO): el salvia entra desde el crema de la sección anterior y acaba en el beige del pie */
.version-b .seccion-salvia.mudanza-ctm { background: linear-gradient(180deg, var(--fondo) 0%, #e7ede4 32%, #e7ede4 68%, #f0e7d8 100%); }
@media (max-width: 720px) { .version-b .seccion.mudanza-ctm:not(.con-foto):not(.hero)::before { background-image: url(/img/fondos/ctm-salvia-movil.webp); } }

/* «Lo que dicen nuestros clientes», en un beige más claro (la CTO): la arena de siempre pesaba demasiado */
.version-b #opiniones.seccion-arena { background: linear-gradient(180deg, #f8f1e4, #f3e9d7); }
.version-b .hero.con-pantalla .hero-foto img { animation: none; object-position: 100% 50%; }
.version-b .hero.con-pantalla .hero-velo { background: linear-gradient(90deg, rgba(246, 241, 232, 0.88) 0%, rgba(246, 241, 232, 0.66) 30%, rgba(246, 241, 232, 0) 50%), linear-gradient(180deg, rgba(246, 241, 232, 0) 82%, rgba(246, 241, 232, 1) 100%); }
/* El texto del hero, más a la izquierda y más alto (21-oct, la CTO): usa el ancho de la barra, así arranca
   en la misma vertical que el logo, y se sube en vez de quedar centrado en el alto de la foto */
.version-b .hero.con-pantalla .hero-caja { width: min(var(--ancho-barra), 100% - 2 * var(--gutter)); align-self: start; }
.version-b .hero.con-pantalla .hero-texto { align-self: start; padding-top: clamp(8px, 3.5vw, 72px); }
.version-b .hero.con-pantalla .hero-lamina { position: static; perspective: none; padding: 0; }
.version-b .hero.con-pantalla .hero-lamina .lamina { position: absolute; left: 0; top: 0; margin: 0; aspect-ratio: auto; transform-origin: 0 0; border: 0; border-radius: 6px; box-shadow: none; background: #0e1110; animation: none; opacity: 1; filter: none; transition: none; }
.version-b .hero.con-pantalla .hero-lamina .lamina::before, .version-b .hero.con-pantalla .hero-lamina .lamina::after, .version-b .hero.con-pantalla .lamina .rotulo { display: none; }

/* ---------- Qué hacemos con las fotos de la maqueta de la CTO (21-oct) ----------
   Fotos claras y cálidas: el velo de abajo baja a un marrón cálido más denso para que
   el rótulo se lea siempre, y los títulos crecen como en la maqueta. */
.version-b #servicios .celda::after { background: linear-gradient(180deg, rgba(40, 32, 22, 0) 38%, rgba(40, 32, 22, 0.38) 62%, rgba(40, 32, 22, 0.78) 100%); }
.version-b #servicios .celda-texto { left: 24px; right: 24px; bottom: 20px; gap: 6px; text-shadow: 0 1px 3px rgba(20, 16, 10, 0.45); }
.version-b #servicios .celda-texto b { font-size: 32px; }
.version-b #servicios .celda-texto span { font-size: 15px; color: rgba(255, 252, 245, 0.92); }
.version-b #servicios .f-2 .celda-texto { left: 30px; bottom: 28px; }
.version-b #servicios .f-2 .celda-texto b { font-size: 42px; max-width: 20ch; }
.version-b #servicios .f-2 .celda-texto span { font-size: 17px; }
.version-b #servicios .celda-texto .antetitulo { color: #f3d98f; }
.version-b #servicios .celda-texto .antetitulo::before { background: #f3d98f; }
@media (max-width: 640px) { .version-b #servicios .celda-texto b, .version-b #servicios .f-2 .celda-texto b { font-size: 26px; } }
.version-b #opiniones .resena { background: #fff; }

/* Los huecos del formulario, un tono más claros que el papel: se ven dónde escribir sin pesar (la CTO, 21-oct) */
.version-b .campo input, .version-b .campo select, .version-b .campo textarea { background: #fcfaf6; }

/* Las áreas de Mónica son etiquetas, no botones: casi transparentes y sin borde, para que nadie intente pulsarlas (la CTO, 21-oct) */
.version-b .ficha-texto .areas li { background: rgba(255, 253, 248, 0.28); border-color: transparent; color: var(--tinta-2); }

/* LinkedIn de Mónica: el logo suelto junto a los botones, gris y salvia al pasar */
.enlace-linkedin { display: inline-flex; align-items: center; align-self: center; margin-left: 6px; color: #8a918c; transition: color 200ms, transform 200ms; }
.enlace-linkedin svg { width: 34px; height: 34px; fill: currentColor; }
.enlace-linkedin:hover { color: #6d8a78; transform: translateY(-1px); }

/* El cargo de Mónica en gris claro, que no compita con el nombre (la CTO, 21-oct) */
#monica .cargo { color: #9a9f9b; }

/* Inicio: la franja de colaboradores (salvia casi entera; «sin difuminar tanto», la CTO) entra desde el color de la mudanza y sale hacia el del cierre, y el cierre
   acaba en el del pie, para que no se vean bordes entre las tres (la CTO, 21-oct) */
.version-b .seccion-salvia.colaboradores-franja { background: linear-gradient(180deg, var(--fondo) 0%, #e6ede4 14%, #e6ede4 86%, #f1e9dc 100%); }
.version-b .seccion.colaboradores-franja:not(.con-foto):not(.hero)::before { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
/* Sin la franja, el cierre entra directamente desde el crema en que acaba la foto de la mudanza */
.version-b .cierre-servicios { background: linear-gradient(180deg, var(--fondo) 0%, #f1e9dc 30%, #f1e9dc 70%, #f0e7d8 100%); }

/* Inicio, «Nos hemos mudado»: la oficina como neblina blanca, que se intuya pero no se vea (la CTO, 21-oct) */
.version-b .con-foto.mudanza .cab-foto img { filter: none; transform: none; }
.version-b .con-foto.mudanza .cab-foto::after { background: linear-gradient(180deg, rgba(246, 241, 232, 0) 78%, var(--fondo) 100%), rgba(255, 253, 249, 0.62); }

/* Inicio: la oficina y los libros casi se tocan, sin la franja crema entre las dos (la CTO, 21-oct): la oficina se
   funde sólo en su último tramo y los libros empiezan a verse casi desde arriba */
.version-b .con-foto.mudanza .cab-foto::after { background: linear-gradient(180deg, rgba(246, 241, 232, 0) 90%, var(--fondo) 100%), rgba(255, 253, 249, 0.62); }
.cierre-libros { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 74%, transparent 100%); }
.version-b .cierre-servicios { background: linear-gradient(180deg, var(--fondo) 0%, #f1e9dc 12%, #f1e9dc 70%, #f0e7d8 100%); }
.cierre-libros::after { background: linear-gradient(90deg, rgba(241, 233, 220, 1) 0%, rgba(241, 233, 220, 0.85) 18%, rgba(241, 233, 220, 0.2) 48%, rgba(241, 233, 220, 0) 100%); }
.cierre-libros { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0, #000 6%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0, #000 6%, #000 74%, transparent 100%); }
.version-b .con-foto.mudanza .cab-foto::after { background: linear-gradient(180deg, rgba(246, 241, 232, 0) 94%, rgba(246, 241, 232, 0.7) 100%), rgba(255, 253, 249, 0.62); }
/* Las dos fotos se cruzan: el cierre sube 70px sobre la oficina con fondo transparente arriba, y los libros aparecen
   en esos 70px; así no queda ni franja clara ni corte */
.version-b .cierre-servicios { margin-top: -70px; padding-top: calc(clamp(80px, 10vw, 150px) + 70px); background: linear-gradient(180deg, rgba(241, 233, 220, 0) 0, #f1e9dc 70px, #f1e9dc 70%, #f0e7d8 100%); }
.cierre-libros { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 70px, #000 74%, transparent 100%); }
.cierre-libros::after { background: linear-gradient(180deg, rgba(241, 233, 220, 0) 0, rgba(241, 233, 220, 0) 100%), linear-gradient(90deg, rgba(241, 233, 220, 1) 0%, rgba(241, 233, 220, 0.85) 18%, rgba(241, 233, 220, 0.2) 48%, rgba(241, 233, 220, 0) 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px); mask-image: linear-gradient(180deg, transparent 0, #000 70px); }
.version-b .con-foto.mudanza .cab-foto::after { background: rgba(255, 253, 249, 0.62); }
/* En el móvil los libros van detrás del texto: velo crema fuerte para que se lea */
@media (max-width: 900px) { .cierre-libros::after { background: linear-gradient(90deg, rgba(241, 233, 220, 0.9) 0%, rgba(241, 233, 220, 0.72) 60%, rgba(241, 233, 220, 0.5) 100%); } }
/* Colaboraciones: la opinión de Alfonso en blanco, como las de Inicio, para que el logo de DCV no quede en una caja (la CTO) */
.version-b .resena-una .resena { background: #fff; border-color: rgba(86, 96, 91, 0.08); }
/* Los libros de detrás de la opinión: la regla del brillo de B les ganaba y no se veían */
.version-b .seccion.fondo-leyes:not(.con-foto):not(.hero)::before { background: var(--fondo-sutil) center / cover no-repeat; opacity: 0.06; filter: grayscale(0.6); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%); }
/* Un dibujo de trazo grande y entero (no en mosaico): la balanza y el mazo de laboral (CTO, 23-oct), apenas intuidos */
.version-b .seccion.con-fondo.fondo-dibujo:not(.con-foto):not(.hero)::before { background: var(--fondo-sutil) center / 100% auto no-repeat; opacity: 0.05; }
@media (max-width: 760px) { .version-b .seccion.con-fondo.fondo-dibujo:not(.con-foto):not(.hero)::before { opacity: 0.045; } }
/* Lo mismo con los fondos pedidos a propósito: el brillo de B (.seccion::before) les ganaba y la foto no salía.
   Laboral, libros detrás de «Consultoría y defensa» (fondo-visible); banderas y flechas en trazo (fondo-trazo). */
.version-b .seccion.con-fondo.fondo-visible:not(.con-foto):not(.hero)::before { background: var(--fondo-sutil) center / cover no-repeat; opacity: 0.22; }
@media (max-width: 760px) { .version-b .seccion.con-fondo.fondo-visible:not(.con-foto):not(.hero)::before { opacity: 0.16; } }
.version-b .seccion.con-fondo.fondo-trazo:not(.con-foto):not(.hero)::before { background: var(--fondo-sutil) center / 640px auto repeat; opacity: 0.06; }
@media (max-width: 760px) { .version-b .seccion.con-fondo.fondo-trazo:not(.con-foto):not(.hero)::before { background-size: 420px auto; opacity: 0.05; } }
/* Inicio: «Qué hacemos» sube para que desde la primera pantalla se vea que hay algo debajo (la CTO, 21-oct) */
.version-b .hero + .seccion { padding-top: clamp(36px, 4vw, 56px); }
/* Portada: la pantalla del portátil con algo menos de brillo, que no deslumbre sobre la foto (la CTO, 21-oct) */
.version-b .hero video[data-hero] { filter: brightness(0.84) contrast(0.96); }
/* Portada: el texto de arriba un poco más a la derecha (la CTO, 21-oct); en el móvil sigue pegado al margen */
@media (min-width: 1025px) { .version-b .hero.con-pantalla .hero-texto { padding-left: clamp(24px, 3vw, 56px); } }
/* Portada: el rótulo con el que arranca el pase de pantallas del portátil (js/pase-portada.js), en salvia con la
   letra de la web en blanco (la CTO, 21-oct). Va dentro de la lámina, así que se deforma con ella y cae en la pantalla. */
.pase-titulo { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 4px; background: linear-gradient(160deg, #8fab99, #627f6d); color: #fff; font-family: var(--serif, "Cormorant Garamond", serif); text-align: center; opacity: 1; transition: opacity 700ms ease; pointer-events: none; }
.pase-titulo span { font-size: 112px; line-height: 1; font-weight: 500; letter-spacing: 0.01em; }
.pase-titulo b { font-size: 112px; line-height: 1; font-weight: 500; }
.pase-titulo.fuera { opacity: 0; }
@media (max-width: 1024px) { .pase-titulo span, .pase-titulo b { font-size: 64px; } }