/* Entre Asesores, web pública v2 · páginas de la segunda Fable: Oficina Digital, Email, Agenda y Seguridad.
   Hereda :root, la tipografía Outfit, .boton, .respiro y .linea-seccion de css/estilo.css; no redefine nada de allí.
   Todo lo propio va con prefijo .b- para no chocar con la portada ni con las páginas de la primera Fable.
   Idea: cada página cuenta su bloque como el anuncio (una cabecera distinta, respiros, láminas que se posan y a las
   que la cámara se acerca despacio), sobre papel claro con un color mate por página (arena, salvia, azul, terracota). */

/* ---------- Página: aire bajo la barra fija y anclas que no quedan tapadas ---------- */
.b-pagina { background: var(--fondo); }
.b-pagina main { overflow: clip; }
.b-pagina section[id], .b-pagina [id].b-ancla { scroll-margin-top: calc(var(--nav-alto) + var(--nav-margen) + 8px); }
.b-contenedor { width: min(var(--ancho), 100% - 2 * var(--gutter)); margin-inline: auto; }
.b-tracked { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gris); }
.b-indice { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 12px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--oro-tinta); }
.b-indice::before { content: ""; width: 22px; height: 1px; background: var(--oro-mate); }
.b-seccion { position: relative; padding: clamp(72px, 9vw, 136px) 0; }
.b-seccion + .b-seccion { padding-top: 0; }
.b-seccion.b-banda { padding-top: clamp(72px, 9vw, 136px); }
.b-texto { max-width: 46ch; }
.b-texto .respiro { font-size: clamp(30px, 3vw, 46px); }
.b-texto .linea-seccion { margin-top: 14px; }
/* Cortes de línea (12-oct): mismas reglas que en estilo.css para las piezas propias de estas páginas. El índice de
   cada sección se parte parejo («Del correo a la / ficha del trabajador») y los pies de foto, la nota de la cabecera
   de Oficina Digital, el pie de los cuatro servicios y la frase del cierre no dejan una palabra sola al final. */
.b-indice { text-wrap: balance; }
.b-rotulo, .b-nota, .b-siguiente span, .b-abanico-nota, .b-servicios li small, .b-sello, .b-hoja figcaption, .b-fecha { text-wrap: balance; }

/* Colores mate por página (muestreados de los banners de la app, en :root) */
.b-arena { background: #f1eadc; }
.b-salvia { background: #e6ebe1; }
.b-azul { background: #e7e9ee; }
.b-terracota { background: #f3e8e1; }
.b-papel { background: var(--papel-calido); }

/* ---------- Lámina: la app como hoja sobre la mesa; se posa con perspectiva suave (como en el anuncio) ---------- */
.b-lamina {
  position: relative; margin: 0; border-radius: var(--radio); overflow: hidden; background: #f3f1ec; aspect-ratio: 16 / 9;
  box-shadow: var(--sombra-lamina), 0 0 0 1px rgba(74, 79, 90, 0.08);
}
.b-lamina > video, .b-lamina > img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
/* La cámara se acerca despacio mientras el clip gira: acercamiento lento de ida y vuelta, nunca brusco */
.b-lamina.b-acerca > video { transform-origin: 50% 20%; animation: b-acercar 18s var(--suave) infinite alternate; }
@keyframes b-acercar { from { transform: scale(1); } to { transform: scale(1.06); } }
.js [data-b-posa] { opacity: 0; transform: perspective(1800px) rotateX(12deg) rotateY(-9deg) translateY(70px) scale(0.92); filter: blur(6px); transition: opacity 900ms var(--suave), transform 1300ms var(--salida), filter 900ms var(--suave); }
.js [data-b-posa].b-puesta { opacity: 1; transform: none; filter: none; }
.js [data-b-entra] { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--suave), transform 900ms var(--salida); }
.js [data-b-entra].b-visto { opacity: 1; transform: none; }
.js [data-b-entra][data-b-tarda="1"] { transition-delay: 150ms; }
.js [data-b-entra][data-b-tarda="2"] { transition-delay: 300ms; }
/* Rótulo pizarra con punto dorado: entra recortado desde la izquierda, como en el vídeo */
.b-rotulo {
  position: absolute; left: 14px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 8px 14px 8px 11px; border-radius: 10px;
  /* Cristal claro, texto gris y punto amarillo (la CTO: nada que parezca negro sobre las pantallas) */
  background: rgba(247, 243, 235, 0.78); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: var(--nav-texto); font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em;
  box-shadow: inset 0 0 0 1px rgba(74, 79, 90, 0.12), 0 8px 22px rgba(50, 38, 12, 0.1);
  clip-path: inset(0 100% 0 0); transition: clip-path 550ms var(--salida) 600ms; white-space: nowrap;
}
.b-rotulo i { width: 8px; height: 8px; border-radius: 50%; background: var(--amarillo); flex: none; }
.b-puesta .b-rotulo, .b-rotulo.b-visible { clip-path: inset(0 0 0 0); }

/* ---------- Filas: texto a un lado, lámina al otro, nunca centrado; la lámina pesa más que el texto ---------- */
.b-fila { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 40px; align-items: center; }
.b-fila > .b-texto { grid-column: 1 / span 4; }
.b-fila > .b-medio { grid-column: 5 / span 8; }
.b-fila.b-inversa > .b-texto { grid-column: 9 / span 4; order: 2; }
.b-fila.b-inversa > .b-medio { grid-column: 1 / span 8; order: 1; }
.b-fila.b-arriba { align-items: start; }
.b-fila.b-arriba > .b-texto { padding-top: 24px; }

/* Entra por tu asesoría: la tarjeta de acceso ocupa un cuarto del ancho de la grabación (1600x900) y el resto era
   blanco. La lámina se recorta a la tarjeta con su aire (x 548-1052, y 150-750 de la grabación, 504x600) y el vídeo
   se coloca a escala detrás: 1600/504 de ancho, desplazado lo que queda fuera. Más estrecha, centrada en su hueco. */
.b-lamina.b-recorte-acceso { aspect-ratio: 504 / 600; width: min(100%, 460px); margin-inline: auto 8%; }
@media (max-width: 900px) { .b-lamina.b-recorte-acceso { margin-inline: auto; } }
/* Agenda, Ponte al Día: su columna es el tercio derecho de la grabación (x 990-1590, y 95-900 de 1600x900);
   el resto repetía Mi Semana y el calendario, que ya salen en la cabecera. Misma técnica que la de acceso. */
.b-lamina.b-recorte-ponte { aspect-ratio: 600 / 805; width: min(100%, 500px); margin-inline: auto 8%; }
.b-lamina.b-recorte-ponte > video { position: absolute; left: -165%; top: -11.8%; width: 266.67%; height: 111.8%; max-width: none; object-fit: fill; }
@media (max-width: 900px) { .b-lamina.b-recorte-ponte { margin-inline: auto; } }
.b-lamina.b-recorte-acceso > video { position: absolute; left: -108.73%; top: -25%; width: 317.46%; height: 150%; max-width: none; object-fit: fill; }
/* Regla de la CTO (13-oct): en ordenador el rótulo va DENTRO de la imagen; en móvil, FUERA, debajo, sin excepciones.
   En acceso, dentro abajo tapaba la línea «Espacio privado para clientes de…»: arriba hay aire sobre la tarjeta. */
.b-lamina.b-recorte-acceso > .b-rotulo { top: 10px; bottom: auto; }

/* Dos láminas: la principal y una segunda, más pequeña, que se le monta encima por una esquina (parallax propio) */
.b-doble { position: relative; padding-bottom: 20%; }
.b-doble > .b-lamina:first-child { width: 82%; }
.b-doble > .b-lamina.b-segunda { position: absolute; right: 0; bottom: 0; width: 56%; z-index: 2; box-shadow: 0 40px 90px rgba(50, 38, 12, 0.2), 0 0 0 1px rgba(74, 79, 90, 0.08); }
/* La segunda, más grande cuando es la que hay que leer (el mensaje a la asesoría en Un botón hasta tu despacho),
   aunque pise un poco más a la principal (lo pidió la socia de la CTO) */
.b-doble.b-grande { padding-bottom: 28%; }
.b-doble.b-grande > .b-lamina.b-segunda { width: 76%; }
.b-doble.b-izquierda > .b-lamina:first-child { margin-left: auto; }
.b-doble.b-izquierda > .b-lamina.b-segunda { right: auto; left: 0; }
/* Cuando la segunda lámina se monta por la izquierda, el rótulo de la principal se va a la derecha para no quedar tapado */
.b-doble.b-izquierda > .b-lamina:first-child > .b-rotulo { left: auto; right: 14px; }

/* Carril: dos láminas en fila, enteras dentro del contenedor. Antes medía 120 % y sangraba por la derecha
   deslizándose al bajar, pero en pantallas medianas la segunda se quedaba cortada: la CTO las quiere enteras. */
.b-carril { display: flex; gap: 28px; width: 100%; }
.b-carril > .b-lamina { flex: 0 0 calc(50% - 14px); }

/* Panorama: la lámina a sangre, de lado a lado, recortada en banda y con paneo lento */
.b-panorama { position: relative; margin: 0; height: clamp(300px, 46vw, 620px); overflow: hidden; border-radius: 0; background: #f3f1ec; box-shadow: inset 0 0 0 1px rgba(74, 79, 90, 0.06); }
.b-panorama > video { position: absolute; left: 0; top: 0; width: 116%; height: auto; min-height: 100%; object-fit: cover; object-position: top left; will-change: transform; }

/* ---------- Cabeceras: una distinta por página ---------- */
.b-cabecera { position: relative; padding: calc(var(--nav-alto) + var(--nav-margen) + clamp(56px, 8vw, 110px)) 0 clamp(40px, 5vw, 72px); }
.b-cabecera .respiro.grande { font-size: clamp(38px, 5vw, 76px); }
.b-cabecera .b-tracked { margin-top: 22px; }
.b-cabecera-acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.b-cabecera .boton-borde { background: rgba(255, 255, 255, 0.55); }

/* Oficina Digital: el DESPUÉS. Dos golpes que llegan con el tiempo del anuncio, luego la lámina de inicio a sangre */
.b-oficina-cab { background: radial-gradient(ellipse 70% 60% at 30% 20%, #fffdf8 0%, #f7f3ea 55%, #f1eadc 100%); }
.b-golpes { display: grid; gap: 6px; }
.b-golpe { margin: 0; }
.js .b-golpe { opacity: 0; transform: translateY(18px); animation: b-golpe 900ms var(--salida) forwards; }
.js .b-golpe:nth-child(2) { animation-delay: 1500ms; }
@keyframes b-golpe { to { opacity: 1; transform: none; } }
.b-oficina-cab .b-cabecera-int { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px; align-items: end; }
.b-oficina-cab .respiro.grande { font-size: clamp(36px, 4.6vw, 68px); }
/* Las palabras golpe no se parten en dos líneas en escritorio: «no bastará.» y «lo que vales.» caen enteras */
@media (min-width: 901px) { .b-oficina-cab .b-golpe em { white-space: nowrap; } }
.b-oficina-cab .b-nota { font-size: clamp(16px, 1.3vw, 19px); color: var(--tinta-2); max-width: 36ch; line-height: 1.5; padding-bottom: 10px; }
.b-oficina-cab .b-nota b { font-weight: 500; color: var(--tinta); }
.b-oficina-cab .b-panorama { margin-top: clamp(40px, 5vw, 72px); border-radius: var(--radio) var(--radio) 0 0; box-shadow: var(--sombra-lamina); }

/* Email: «Todo empieza aquí.» con el carril de botones a la izquierda y el correo grande a la derecha */
.b-email-cab { background: radial-gradient(ellipse 60% 70% at 75% 30%, #fffdf8 0%, var(--papel-calido) 60%, #efe9dd 100%); }
.b-email-cab .b-cabecera-int { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.b-email-cab .b-lamina { transform-origin: 50% 50%; }

/* Agenda: el saludo del día, con la fecha real, y el calendario a la derecha como una hoja de bloc */
.b-agenda-cab { background: radial-gradient(ellipse 60% 60% at 20% 30%, #fffdf8 0%, #f6f3ea 55%, #e9ece6 100%); }
.b-agenda-cab .b-cabecera-int { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.b-hoy { display: block; font-size: clamp(60px, 9vw, 150px); font-weight: 300; letter-spacing: -0.04em; line-height: 0.95; color: var(--tinta); font-variant-numeric: tabular-nums; }
.b-hoy em { font-style: normal; color: var(--amarillo); }
/* Con line-height 0.95 la cola de la «y» sale de su caja y pisaba la etiqueta de debajo («Calendario fiscal y
   novedades del sector», la CTO, 13-oct). En em: crece con la palabra, en escritorio y en móvil. */
.b-hoy { padding-bottom: 0.2em; }
.b-fecha { display: block; margin-top: 12px; font-size: clamp(16px, 1.4vw, 20px); color: var(--tinta-2); }
.b-agenda-cab .respiro { margin-top: 28px; }
.b-hoja { position: relative; margin: 0; padding: 18px 18px 22px; border-radius: 16px; background: #fff; box-shadow: var(--sombra-lamina), 0 0 0 1px rgba(74, 79, 90, 0.08); }
/* Sin la franja dorada de arriba que llevaba: ninguna otra pantalla de la app la tiene (la CTO, 10-oct) */
.b-hoja .b-lamina { box-shadow: none; border-radius: 10px; }
.b-hoja figcaption { margin-top: 14px; font-size: 13.5px; color: var(--gris); display: flex; justify-content: space-between; gap: 12px; }
.b-hoja figcaption b { font-weight: 500; color: var(--tinta-2); }

/* Seguridad: banda salvia con el recinto de Amazon Web Services dibujándose */
.b-seguridad-cab { background: radial-gradient(ellipse 70% 70% at 70% 30%, #eef2ea 0%, #e6ebe1 55%, #dfe5d9 100%); }
.b-seguridad-cab .b-cabecera-int { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; }
.b-sello { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; padding: 10px 16px 10px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px rgba(74, 79, 90, 0.1); font-size: 13.5px; color: var(--tinta-2); }
/* 42 px y letra recta: a 34 px y en cursiva (es un <i>), «27001» tocaba el aro y se leía cortado (la CTO, 12-oct) */
.b-sello i { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--oro-mate); display: inline-grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 600; letter-spacing: 0.04em; color: var(--oro-tinta); line-height: 1; text-align: center; }

/* ---------- El recinto (01c del anuncio): tres asesorías, cada una con su base, dentro del recinto de AWS; la «A» dentro ---------- */
.b-recinto { width: 100%; height: auto; display: block; overflow: visible; }
.b-recinto text { font-family: var(--fuente); }
.b-recinto .b-marco { fill: rgba(255, 255, 255, 0.5); stroke: var(--oro-mate); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.b-recinto .b-marco-etq { font-size: 10.5px; letter-spacing: 0.3em; fill: var(--gris); }
.b-recinto .b-asesoria rect { fill: #fff; stroke: rgba(74, 79, 90, 0.14); }
.b-recinto .b-asesoria .b-nombre { font-size: 14px; font-weight: 500; fill: var(--tinta); }
.b-recinto .b-asesoria .b-base { font-size: 11px; fill: var(--gris); }
.b-recinto .b-asesoria .b-cerrojo { fill: none; stroke: var(--oro-tinta); stroke-width: 1.4; }
.b-recinto .b-hilo { fill: none; stroke: var(--oro-mate); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.b-recinto .b-dato { fill: var(--oro-tinta); }
.b-recinto .b-a { fill: #69696b; }
.b-recinto .b-halo { fill: rgba(205, 180, 108, 0.18); }
.b-recinto .b-fuera rect { fill: none; stroke: var(--gris-claro); stroke-width: 1.2; stroke-dasharray: 5 5; }
.b-recinto .b-fuera text { font-size: 12.5px; fill: var(--gris); }
/* En ordenador el esquema va sobre la foto de fondo y las rayitas en gris claro se perdían (la CTO, 13-oct): gris
   medio y algo más gruesas. En móvil se ven bien y no se tocan. */
.b-recinto:not(.b-recinto-vertical) .b-fuera rect { stroke: var(--gris); stroke-width: 1.4; }
.b-recinto .b-fuera .b-tacha { stroke: var(--terracota-hondo); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
/* Con fondo blanco, como los cuadros de las asesorías: sin él, la línea del recinto cruzaba el sello y «27001» se leía cortado (la CTO, 12-oct) */
.b-recinto .b-iso circle { fill: #fff; stroke: var(--oro-mate); stroke-width: 1.5; }
.b-recinto .b-iso text { font-size: 9px; font-weight: 600; fill: var(--oro-tinta); letter-spacing: 0.04em; }
.js .b-recinto .b-asesoria, .js .b-recinto .b-iso, .js .b-recinto .b-marco-etq, .js .b-recinto .b-a-grupo, .js .b-recinto .b-fuera { opacity: 0; transition: opacity 700ms var(--suave); }
.js .b-recinto .b-marco, .js .b-recinto .b-hilo, .js .b-recinto .b-tacha { transition: stroke-dashoffset 1400ms var(--salida); }
.b-recinto.b-dibujado .b-marco, .b-recinto.b-dibujado .b-hilo, .b-recinto.b-dibujado .b-tacha { stroke-dashoffset: 0; }
.b-recinto.b-dibujado .b-asesoria, .b-recinto.b-dibujado .b-iso, .b-recinto.b-dibujado .b-marco-etq, .b-recinto.b-dibujado .b-a-grupo, .b-recinto.b-dibujado .b-fuera { opacity: 1; }
.b-recinto.b-dibujado .b-asesoria:nth-of-type(1) { transition-delay: 500ms; }
.b-recinto.b-dibujado .b-asesoria:nth-of-type(2) { transition-delay: 700ms; }
.b-recinto.b-dibujado .b-asesoria:nth-of-type(3) { transition-delay: 900ms; }
.b-recinto.b-dibujado .b-iso { transition-delay: 1200ms; }
.b-recinto.b-dibujado .b-a-grupo { transition-delay: 1300ms; }
.b-recinto.b-dibujado .b-hilo { transition-delay: 1500ms; }
.b-recinto.b-dibujado .b-fuera { transition-delay: 1900ms; }
.b-recinto.b-dibujado .b-tacha { transition-delay: 2400ms; }
.b-recinto .b-dato { opacity: 0; }
.b-recinto.b-dibujado .b-dato { opacity: 1; transition: opacity 400ms 2000ms; }

/* ---------- Oficina Digital · piezas propias ----------
   (Sólo pantallas reales de la app sobre las láminas: nada imitado a mano, por regla de la CTO.)
   Lo que le vendes: los cuatro servicios sobre una regla dorada que se dibuja, cada uno con su color mate */
.b-servicios { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 34px; padding-top: 22px; }
.b-servicios::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--oro-mate); transition: width 1600ms var(--salida) 300ms; }
.b-visto .b-servicios::before, .b-servicios.b-visto::before { width: 100%; }
.b-servicios li { position: relative; padding-top: 14px; font-size: 15px; color: var(--tinta-2); line-height: 1.35; }
.b-servicios li::before { content: ""; position: absolute; left: 0; top: -26px; width: 9px; height: 9px; border-radius: 50%; background: var(--color, var(--oro-mate)); }
/* Los puntos se encienden uno tras otro (js/paginas-2.js): el punto crece y late en su color, el nombre toma ese
   color. Al pasar el ratón por un servicio manda el ratón. */
.b-servicios li { cursor: default; }
.b-servicios li::before { transition: transform 450ms var(--salida); }
.b-servicios li b { transition: color 400ms var(--suave); }
.b-servicios li.activo::before { transform: scale(1.45); animation: b-servicio-late 1400ms ease-out infinite; }
.b-servicios li.activo b { color: var(--color, var(--oro-tinta)); }
@keyframes b-servicio-late {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color, var(--oro-mate)) 45%, transparent); }
  100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--color, var(--oro-mate)) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .b-servicios li::before { transition-duration: 450ms !important; }
  .b-servicios li b { transition-duration: 400ms !important; }
  .b-servicios li.activo::before { animation-duration: 1400ms !important; }
}
.b-servicios li b { display: block; font-weight: 500; color: var(--tinta); }
.b-servicios li small { display: block; margin-top: 4px; font-size: 13px; color: var(--gris); }
.b-oficina-cierre { padding: clamp(60px, 7vw, 100px) 0 clamp(80px, 9vw, 130px); }
.b-oficina-cierre .b-contenedor { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.b-oficina-cierre .b-cabecera-acciones { margin-top: 0; justify-content: flex-end; }

/* ---------- Email · piezas propias ---------- */
/* Newsletter por grupos: el abanico de los cuatro grupos de clientes de la app, cada tira con su tono */
.b-abanico { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.b-abanico figure { margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 274 / 757; background: #fff; box-shadow: 0 20px 50px rgba(50, 38, 12, 0.14), 0 0 0 1px rgba(74, 79, 90, 0.08); }
.b-abanico figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-abanico figure:nth-child(1) { transform: translateY(26px); }
.b-abanico figure:nth-child(2) { transform: translateY(0); }
.b-abanico figure:nth-child(3) { transform: translateY(40px); }
.b-abanico figure:nth-child(4) { transform: translateY(12px); }
.b-abanico-nota { margin-top: 54px; font-size: 14px; color: var(--gris); }
.b-abanico-nota b { font-weight: 500; color: var(--tinta-2); }
.b-newsletter { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 56px; align-items: start; }
.b-newsletter .b-texto { grid-column: 1 / -1; }
.b-newsletter .b-doble { padding-bottom: 24%; }
/* (Sin piezas imitadas de la app encima de las láminas: regla de la CTO. Las pantallas de permisos, de la traza de
   la firma y del mensaje al despacho son capturas reales de img/secciones/, hechas con herramientas/capturar_secciones_b.cjs.) */

/* ---------- Cierre de página: una frase, el botón, y el camino al bloque siguiente ---------- */
.b-cierre { padding: clamp(64px, 8vw, 110px) 0; }
.b-cierre .b-contenedor { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 40px; align-items: center; }
.b-cierre .b-cabecera-acciones { margin-top: 0; justify-content: flex-end; }
.b-siguiente { grid-column: 1 / -1; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--linea); display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 14.5px; color: var(--gris); }
.b-siguiente a { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-2); font-weight: 500; transition: color 200ms; }
.b-siguiente a:hover { color: var(--amarillo); }
.b-siguiente a svg { width: 14px; height: 14px; }

/* ---------- Tamaños ---------- */
@media (max-width: 1100px) {
  .b-fila > .b-texto, .b-fila.b-inversa > .b-texto { grid-column: 1 / span 5; }
  .b-fila > .b-medio, .b-fila.b-inversa > .b-medio { grid-column: 6 / span 7; }
  .b-fila.b-inversa > .b-texto { grid-column: 8 / span 5; }
  .b-fila.b-inversa > .b-medio { grid-column: 1 / span 7; }
}
@media (max-width: 900px) {
  .b-fila { display: flex; flex-direction: column; gap: 26px; }
  .b-fila > .b-texto, .b-fila.b-inversa > .b-texto { order: 1; }
  .b-fila > .b-medio, .b-fila.b-inversa > .b-medio { order: 2; width: 100%; }
  .b-fila.b-arriba > .b-texto { padding-top: 0; }
  .b-doble { padding-bottom: 22%; }
  .b-doble > .b-lamina:first-child { width: 90%; }
  .b-doble > .b-lamina.b-segunda { width: 62%; }
  .b-doble.b-grande { padding-bottom: 36%; }
  .b-doble.b-grande > .b-lamina.b-segunda { width: 90%; }
  .b-carril { width: 100%; flex-direction: column; gap: 22px; }
  .b-carril > .b-lamina { flex: none; }
  .b-oficina-cab .b-cabecera-int, .b-email-cab .b-cabecera-int, .b-agenda-cab .b-cabecera-int, .b-seguridad-cab .b-cabecera-int, .b-newsletter, .b-cierre .b-contenedor, .b-oficina-cierre .b-contenedor { grid-template-columns: 1fr; }
  .b-cierre .b-cabecera-acciones, .b-oficina-cierre .b-cabecera-acciones { justify-content: flex-start; }
  .b-cabecera { padding-top: calc(var(--nav-alto) + var(--nav-margen) + 40px); }
  .b-panorama { height: clamp(220px, 60vw, 420px); }
  .b-panorama > video { width: 150%; }
  .b-lamina.b-acerca > video { animation: none; }
  .b-abanico { gap: 8px; }
  .b-abanico-nota { margin-top: 48px; }
  .b-servicios { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
}
@media (max-width: 520px) {
  .b-tracked { letter-spacing: 0.22em; font-size: 11px; }
  .b-hoy { font-size: clamp(56px, 20vw, 90px); }
  .b-doble > .b-lamina.b-segunda { width: 66%; }
  .b-siguiente { flex-direction: column; align-items: flex-start; }
}
/* ---------- Tableta y móvil (10-oct): sólo anchos de 1024 px o menos; el escritorio no cambia ---------- */
@media (max-width: 1024px) {
  /* Lo que le vendes: entre 900 y 1024 px los cuatro servicios cabían en una columna de texto de 5/12 y quedaban
     en tiras de cuatro palabras; por debajo de 900, el punto de la segunda fila caía encima del texto de la
     primera. En dos columnas y con el punto a la izquierda de cada nombre, no se pisa nada. */
  .b-servicios { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 22px; padding-top: 20px; }
  .b-servicios li { padding-top: 0; padding-left: 20px; }
  .b-servicios li::before { top: 6px; }
}
@media (max-width: 640px) {
  .b-seccion { padding: 64px 0; }
  .b-seccion + .b-seccion { padding-top: 0; }
  .b-seccion.b-banda { padding-top: 64px; }
  .b-cabecera { padding: calc(var(--nav-alto) + var(--nav-margen) + 34px) 0 40px; }
  /* Titulares a la medida del ancho: con 30-38 px de mínimo, a 256 px las palabras golpe se partían o se salían */
  .b-texto .respiro { font-size: clamp(24px, 7.4vw, 32px); }
  .b-cabecera .respiro.grande, .b-oficina-cab .respiro.grande { font-size: clamp(27px, calc((100vw - 40px) / 8), 42px); }
  .b-indice { letter-spacing: 0.18em; font-size: 11px; gap: 8px; }
  .b-indice::before { width: 16px; flex: none; }
  .b-fila { gap: 22px; }
  .b-cabecera-acciones { gap: 10px; }
  .b-sello { align-items: center; padding: 8px 14px 8px 8px; font-size: 13px; }
  .b-sello i { flex: none; }

  /* Láminas: el rótulo va DEBAJO de la imagen, como pie de foto, para que la pantalla de la app se vea entera
     (encima tapaba media lámina y se cortaba: «Programas conectados con s…»). Sin excepciones (la CTO, 13-oct). */
  .b-lamina { min-width: 0; }
  .b-lamina { overflow: visible; margin-bottom: 46px; }
  .b-lamina > video, .b-lamina > img { border-radius: inherit; }
  .b-lamina > .b-rotulo,
  .b-doble.b-izquierda > .b-lamina:first-child > .b-rotulo,
  .b-lamina.b-recorte-acceso > .b-rotulo {
    top: calc(100% + 10px); bottom: auto; left: 2px; right: 0; padding: 0; gap: 8px; border-radius: 0;
    background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    white-space: normal; font-size: 13px; line-height: 1.3; color: var(--tinta-2);
  }
  /* Los dos recortes (acceso y Ponte al Día) ponen el vídeo ampliado dentro y antes los recortaba el overflow de la
     lámina, que también se comía el pie de foto. Ahora recorta el propio vídeo con clip-path, con lo que sobresale
     medido sobre el vídeo ampliado, y sin el acercamiento lento, que agrandaría también el recorte. */
  .b-lamina.b-recorte-acceso > video { clip-path: inset(16.667% 34.25% round var(--radio)); animation: none; }
  .b-lamina.b-recorte-ponte > video { clip-path: inset(10.555% 0.626% 0 61.875% round var(--radio)); animation: none; }
  /* Dentro de la hoja de la Agenda el pie de la hoja ya va debajo: el rótulo deja su hueco */
  .b-hoja { padding: 12px 12px 16px; }
  .b-hoja figcaption { flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; }

  /* Parejas de láminas: en móvil, una debajo de otra y enteras. Montadas por una esquina, la segunda tapaba la
     mitad de la principal y su rótulo; aquí el parallax propio (translate) también se quita para que no se pisen. */
  .b-doble, .b-doble.b-grande, .b-newsletter .b-doble { padding-bottom: 0; display: grid; gap: 4px; }
  .b-doble > .b-lamina:first-child, .b-doble.b-izquierda > .b-lamina:first-child { width: 100%; margin-left: 0; }
  .b-doble > .b-lamina.b-segunda, .b-doble.b-grande > .b-lamina.b-segunda, .b-doble.b-izquierda > .b-lamina.b-segunda {
    position: relative; left: auto; right: auto; bottom: auto; width: 100%; translate: none !important;
    box-shadow: var(--sombra-lamina), 0 0 0 1px rgba(74, 79, 90, 0.08);
  }
  .b-carril { gap: 4px; }

  .b-abanico-nota { margin-top: 44px; font-size: 13.5px; }
  /* Lo que le vendes: una columna; la regla dorada pasa a ser un hilo vertical que une los cuatro puntos */
  .b-servicios { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 0; margin-top: 26px; }
  /* Con «ul» delante gana también a la regla de «reducir movimiento» de abajo (width: 100 %), que la CTO tiene
     activada: sin eso el hilo se convertía en un rectángulo dorado */
  ul.b-servicios::before, .b-visto ul.b-servicios::before, ul.b-servicios.b-visto::before { left: 4px; top: 8px; width: 1px; height: 0; transition: height 1600ms var(--salida) 300ms; }
  .b-visto ul.b-servicios::before, ul.b-servicios.b-visto::before { height: calc(100% - 22px); }
  .b-servicios li { padding-left: 22px; }
  .b-servicios li::before { top: 5px; }

  .b-oficina-cierre { padding: 56px 0 72px; }
  .b-cierre { padding: 56px 0; }
  .b-siguiente { margin-top: 18px; }

  /* Seguridad: el esquema del recinto a 640 unidades de ancho dejaba textos de 4-6 px en un móvil. Aquí se cambia
     por la misma escena dibujada en vertical (seguridad.html, .b-recinto-movil): se lee a cualquier ancho. */
  .b-seguridad-cab .b-recinto:not(.b-recinto-vertical) { display: none; }
  .b-recinto-movil[hidden] { display: block; }
  .b-recinto-movil { width: min(100%, 420px); margin-inline: auto; }
  .b-recinto-vertical .b-marco-etq { font-size: 9px; letter-spacing: 0.22em; }
  .b-recinto-vertical .b-asesoria .b-nombre { font-size: 12px; }
  .b-recinto-vertical .b-asesoria .b-base { font-size: 9.5px; }
  .b-recinto-vertical .b-iso text { font-size: 8.5px; }
  .b-recinto-vertical .b-fuera text { font-size: 11.5px; }
}
@media (max-width: 400px) {
  .b-cabecera-acciones .boton { width: 100%; }
  .b-oficina-cierre .b-cabecera-acciones .boton, .b-cierre .b-cabecera-acciones .boton { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-b-posa], .js [data-b-entra], .js .b-golpe { opacity: 1; transform: none; filter: none; animation: none; }
  .b-lamina.b-acerca > video { animation: none; }
  .b-rotulo, .b-recinto .b-marco, .b-recinto .b-hilo, .b-recinto .b-tacha { clip-path: none; stroke-dashoffset: 0; transition: none; }
  .js .b-recinto .b-asesoria, .js .b-recinto .b-iso, .js .b-recinto .b-marco-etq, .js .b-recinto .b-a-grupo, .js .b-recinto .b-fuera, .b-recinto .b-dato { opacity: 1; }
  .b-servicios::before { width: 100%; }
}

/* Etiqueta encima del titular en las cabeceras de Oficina Digital, Correo, Tu día y Seguridad (13-oct, SEO): dice
   lo que se busca («Portal del cliente para asesorías»…), igual que la de Asesoría o Despacho; el titular no cambia */
.etiqueta-cab { display: block; margin-bottom: 14px; }