/* Ingenialma · ajustes globales de diseño (Figma «Esta si»). */

/* Flecha de botones y enlaces: Figma «Rectangle 1» (13×13 girado 45°, trazo 2 interior),
 * pintada en 20,4×18,5 px; la caja de 22×20 solo deja margen al trazo. */
:root {
  --brb-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 10h19M11.75 1.75 20 10l-8.25 8.25'/%3E%3C/svg%3E");
}
.brb-button-icon,
.wp-block-button:is(.is-style-brb-arrow, .brb-button-arrow) .wp-block-button__link::after {
  flex-basis: 22px;
  width: 22px;
  height: 20px;
}

/* Franja degradada bajo las portadas (Figma «image 26», 14 px). */
.is-style-ing-franja, .is-style-ing-portada { position: relative; }
.is-style-ing-franja::after, .is-style-ing-portada::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 14px;
  background: linear-gradient(90deg, rgb(220 227 236 / 0.7), #4c9ab9);
  pointer-events: none;
}

/* Flecha diagonal (↗) de los botones de contorno sobre fondo azul. */
.wp-block-button.is-style-ing-flecha-diagonal .wp-block-button__link::after { transform: rotate(-45deg); }

/* Rejillas de receta apiladas en una columna (listas con icono dentro de tarjeta). */
.is-style-ing-apilado.is-style-ing-apilado { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }

/* Cabecera flotante de Figma («Megamenu · Cerrao»): barra de vidrio a 15/18 px del borde, r 20,
 * menú (icono) · logotipo centrado · «Contacto». Se superpone a la portada de cada página. */
.site-header {
  position: fixed;
  inset: calc(15px + var(--brb-admin-offset, 0px)) 18px auto;
  z-index: 60;
  border: 0;
  background: transparent;
  color: #224553;
}
.brb-header-glass .site-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header .brb-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 70px;
  padding: 10px 30px;
  border: 1px solid rgb(220 227 236 / 0.7);
  border-radius: 20px;
  background: rgb(255 255 255 / 0.55);
  box-shadow: 0 0 30px rgb(212 220 231 / 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.site-header .brb-header-inner > .wp-block-group__inner-container { display: contents; }
.site-header .brb-identity { justify-self: center; }
.site-header .brb-header-actions { justify-self: end; }
.site-header .brb-navigation--primary .brb-desktop-nav { display: none; }
.site-header .brb-navigation--primary .brb-menu-toggle { display: inline-flex; padding: 10px 0; border: 0; color: #224553; }
.site-header .brb-header-cta {
  padding: 15px 25px;
  border: 0;
  border-radius: 63px;
  background: rgb(255 255 255 / 0.2);
  box-shadow: inset 0 0 7px rgb(49 65 88 / 0.2);
  color: #1e3840;
  font-weight: 500;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
}
.site-header .brb-header-cta .brb-button-icon { display: none; }
@media (min-width: 941px) { html:has(> body.admin-bar) { --brb-admin-offset: 32px; } }
@media (max-width: 940px) {
  .site-header { inset-inline: 10px; top: 10px; }
  .site-header .brb-header-inner { min-height: 58px; padding: 6px 16px; }
  .site-header .brb-header-cta { padding: 10px 16px; font-size: 15px; }
}

/* Pie de Figma: logotipo y legales a la izquierda; seis columnas de enlaces en rejilla de tres. */
.ing-footer-top.ing-footer-top { grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); gap: 48px 80px; }
.ing-footer-brand { display: flex; flex-direction: column; gap: 12px; }
.ing-footer-brand .brb-copyright { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.ing-footer-brand .brb-navigation--footer { margin-top: auto; padding-top: 80px; }
.ing-footer-brand .brb-navigation--footer .brb-menu { display: grid; gap: 2px; font-size: 12px; }
.ing-footer-cols.ing-footer-cols { gap: 40px 64px; }
.ing-footer-title.ing-footer-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
  max-width: 234px;
  font: 600 15px/22px Poppins, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ing-footer-list { margin: 0; padding: 0; list-style: none; font: 600 15px/22px Poppins, sans-serif; letter-spacing: 0.04em; }
.ing-footer-col:not(:last-child) .ing-footer-list li::before { content: "- "; }
.ing-footer-list a { color: inherit; text-decoration: none; }
.ing-footer-list a:is(:hover, :focus-visible) { text-decoration: underline; }
@media (max-width: 940px) {
  .ing-footer-top.ing-footer-top { grid-template-columns: minmax(0, 1fr); }
  .ing-footer-brand .brb-navigation--footer { padding-top: 16px; }
}

/* Filas de datos con icono (contacto final). */
/* Icono de La Barba Blocks en filas flexibles: reserva su tamaño (si no, «100 % del padre» lo deja en 0). */
.is-layout-flex > .igb-iconos { flex: 0 0 var(--igb-icon-size, 24px); }

/* Antetítulo de sección (Figma: Poppins 400 16/24, +0,05 em, mayúsculas, #1e3840 al 70 %). */
.brb-eyebrow { font-family: Poppins, sans-serif; font-size: 16px; line-height: 1.5; letter-spacing: 0.05em; text-transform: uppercase; color: rgb(30 56 64 / 0.7); }
.ing-footer-list { font-family: inherit; font-weight: 400; }

/* Megamenú de escritorio (Figma «Desplegao»): panel azul de cuatro columnas con todo el menú desplegado. */
@media (min-width: 941px) {
  .site-header .brb-navigation--primary .brb-menu-toggle .brb-burger { transition: opacity 0.2s; }
  .site-header.ing-mega-abierto .brb-navigation--primary .brb-desktop-nav {
    display: block;
    position: absolute;
    inset: calc(100% + 10px) 0 auto;
    padding: 30px;
    border: 1px solid rgb(220 227 236 / 0.7);
    border-radius: 20px;
    background: rgb(76 155 184 / 0.96);
    box-shadow: 0 0 30px rgb(212 220 231 / 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
  }
  .ing-mega-abierto .brb-desktop-nav .brb-menu { display: block; columns: 4; column-gap: 33px; column-rule: 1px solid rgb(220 227 236 / 0.7); font-size: 19px; }
  .ing-mega-abierto .brb-desktop-nav .brb-menu > li { display: block; break-inside: avoid; padding: 0 0 20px; }
  .ing-mega-abierto .brb-desktop-nav .brb-menu > li:nth-child(4),
  .ing-mega-abierto .brb-desktop-nav .brb-menu > li:nth-child(6),
  .ing-mega-abierto .brb-desktop-nav .brb-menu > li:nth-child(7) { break-before: column; }
  .ing-mega-abierto .brb-desktop-nav .brb-menu > li > a { display: inline-block; padding: 15px 0 10px; color: #fff; font-weight: 700; line-height: 24px; }
  .ing-mega-abierto .brb-desktop-nav .brb-submenu-toggle { display: none; }
  .ing-mega-abierto .brb-desktop-nav .sub-menu {
    position: static; display: block; visibility: visible; opacity: 1; transform: none;
    min-width: 0; margin: 0; padding: 0; border: 0; box-shadow: none; background: none;
  }
  .ing-mega-abierto .brb-desktop-nav .sub-menu a { display: block; padding: 0; color: #fff; font-weight: 300; font-size: 18px; line-height: 29px; background: none; }
  .ing-mega-abierto .brb-desktop-nav a:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 4px; }
}

/* Páginas sin portada (blog, 404, legales, entradas): espacio para la cabecera flotante. */
#main-content:not(:has(.wp-block-cover)) { padding-top: 110px; }
@media (max-width: 940px) { #main-content:not(:has(.wp-block-cover)) { padding-top: 84px; } }

/* Automatización de procesos · listas con punto azul (Figma «Ellipse 2» 9 px #4c9bb8) y beneficios en fila
 * (icono 37 px a la izquierda del título, Figma Frame 111). Clases usadas desde Gutenberg: ing-lista-puntos, ing-beneficio-fila. */
.is-style-ing-puntos { padding-left: 25px; }
.is-style-ing-puntos li::marker { color: #4c9bb8; font-size: 1.1em; }
.is-style-ing-beneficio-fila,
.is-style-ing-beneficio-fila > .wp-block-group__inner-container { flex-direction: row; align-items: center; gap: 24px; text-align: left; }
.is-style-ing-beneficio-fila .brb-icon { flex: 0 0 37px; width: 37px; height: 37px; margin: 0; }

/* Móvil (sin diseño en Figma): legibilidad de portadas y columna larga, pie en una/dos columnas. */
@media (max-width: 781px) {
  .is-style-ing-portada .wp-block-cover__background { opacity: 1; background: linear-gradient(180deg, rgb(255 255 255 / 0.82), rgb(255 255 255 / 0.55)) !important; }
  .ing-footer-cols.ing-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}
@media (max-width: 480px) {
  .ing-footer-cols.ing-footer-cols { grid-template-columns: minmax(0, 1fr); }
  .site-header .brb-header-inner { padding-inline: 12px; }
  .site-header .brb-identity img { max-width: 132px; }
  .site-header .brb-header-cta { padding: 9px 14px; font-size: 14px; }
}

/* Contacto, Casos de éxito, BECAM y Servicios · caja blanca de portada (Figma «Frame 115»): el contenedor de la
 * portada se ajusta al contenido, así que la caja necesita el ancho de Figma (837 px; 943 px en Servicios). */
.is-style-ing-caja-portada { width: min(837px, 100vw); box-sizing: border-box; }
.is-style-ing-caja-portada-ancha { width: min(943px, 100vw); box-sizing: border-box; }

/* Quiénes somos · equipo: tarjeta de foto con nombre, puesto y descripción abajo; en Figma el texto está
 * oculto en reposo (opacidad 0) y aparece al pasar el ratón. Se muestra al enfocar y siempre en pantallas táctiles. */
.is-style-ing-perfil-foto { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.is-style-ing-perfil-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgb(30 56 64 / 0.75)); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.is-style-ing-perfil-foto > .wp-block-group__inner-container { position: relative; width: 100%; opacity: 0; transition: opacity 0.3s ease; }
.is-style-ing-perfil-foto:is(:hover, :focus-within)::before,
.is-style-ing-perfil-foto:is(:hover, :focus-within) > .wp-block-group__inner-container { opacity: 1; }
@media (hover: none) {
  .is-style-ing-perfil-foto::before, .is-style-ing-perfil-foto > .wp-block-group__inner-container { opacity: 1; }
}

/* Caso de éxito BECAM · viñetas (#278ca7) y pasos numerados en círculo de Figma; índice subrayado. */
.is-style-ing-puntos-caso li::marker { color: #278ca7; }
.is-style-ing-pasos { list-style: none; padding-left: 12px; counter-reset: ing-paso; }
.is-style-ing-pasos > li { position: relative; counter-increment: ing-paso; padding-left: 36px; margin-block: 0 20px; }
.is-style-ing-pasos > li::before { content: counter(ing-paso); position: absolute; left: 0; top: 0; width: 27px; height: 27px; border-radius: 50%; background: #278ca7; color: #fff; font: 500 18px/27px "Hanken Grotesk", sans-serif; text-align: center; }
.is-style-ing-indice { list-style: none; padding: 0; display: grid; gap: 15px; }
.is-style-ing-indice a { color: rgb(45 70 79 / 0.78); font-family: Poppins, sans-serif; letter-spacing: -0.03em; }
/* Quiénes somos · equipo: la disposición flexible nativa no usa contenedor interior; se aplica a los hijos. */
.is-style-ing-perfil-foto.is-style-ing-perfil-foto { justify-content: flex-end; }
.is-style-ing-perfil-foto > :not(.wp-block-group__inner-container) { position: relative; opacity: 0; transition: opacity 0.3s ease; }
.is-style-ing-perfil-foto:is(:hover, :focus-within) > * { opacity: 1; }
@media (hover: none) { .is-style-ing-perfil-foto > * { opacity: 1; } }
.is-style-ing-puntos-caso > li { margin-bottom: 10px; }

/* Formularios de Figma («Solicita información»): valores de Figma en las variables del Formulario CF7 configurable
 * (campos de 40 px, relleno 10/16, borde #dce3ec al 70 %, radio 5, texto 15 px #224553, mensaje de 143 px, 15 px entre filas). */
.brb-cf7.brb-cf7 {
  --brb-cf-height: 40px;
  --brb-cf-padding: 10px 16px;
  --brb-cf-line: rgb(220 227 236 / 0.7);
  --brb-cf-radius: 5px;
  --brb-cf-field-bg: #fff;
  --brb-cf-muted: rgb(34 69 83 / 0.7);
}
.brb-cf7.brb-cf7 .wpcf7 { color: #224553; font-size: 15px; font-weight: 400; line-height: 20px; }
.brb-cf7.brb-cf7 .wpcf7 :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]), select) { height: 40px; line-height: 20px; }
.brb-cf7.brb-cf7 .wpcf7 textarea { height: 143px; min-height: 143px; }
.brb-cf7.brb-cf7 .brb-cf-grid { row-gap: 15px; column-gap: 13px; }
.brb-cf7.brb-cf7 .brb-cf-legal { font-weight: 300; color: rgb(34 69 83 / 0.7); }
.brb-cf7.brb-cf7 .wpcf7 :is(input[type=submit], button[type=submit]) { padding: 15px 25px; font-size: 17px; font-weight: 500; line-height: 22px; color: #dce3ec; }

/* R1 · IA-1.1 · Cortes de línea como en Figma: el tema equilibra títulos y párrafos (balance/pretty); Figma corta de forma normal. */
:is(.entry-content, .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6, p, li) { text-wrap: wrap; }

/* R1/R3 · Portada (receta 52): antetítulo y entradilla ocupan el ancho del bloque de texto, como el título (Figma: 590 px por
 * defecto; 680/806 px en Inspección/Visión, control «ancho» de la instancia). El tema los limitaba en caracteres; la variable la pone functions-personalizado.php. */
.is-style-ing-portada .wp-block-cover__inner-container p { max-width: var(--ing-ancho-contenido, 590px); }

/* R1 · Carrusel de soluciones (receta 53): Figma no muestra flechas; en escritorio el carril se recorre arrastrando,
 * con la rueda o con el teclado (el foco desplaza la tarjeta). En móvil se mantienen las flechas del tema. */
@media (min-width: 941px) { :is(.is-style-ing-carrusel, .is-style-ing-carrusel-caso) .brb-slider-controls { display: none; } }
/* R4 · Carrusel superior de BECAM (tira de imágenes): margen lateral de 55 px, el mismo que la descripción y la portada. «Otros casos» conserva el margen del tema. */
@media (min-width: 941px) {
  .brb-section.brb-gallery-section.is-style-ing-carrusel-caso .brb-layout-strip.brb-layout-strip > .wp-block-group__inner-container { padding-inline-start: 55px; scroll-padding-inline-start: 55px; }
  /* Figma «Frame 381»: tarjetas de 401 px, pegadas al título (17 px) */
  .brb-section.brb-slider.is-style-ing-carrusel-caso .brb-slider-track.brb-slider-track { padding-top: 0; }
  .brb-section.brb-slider.is-style-ing-carrusel-caso .brb-slide { flex: 0 0 401px; }
  .brb-section.brb-slider.is-style-ing-carrusel-caso .brb-slide .brb-slide-body.brb-slide-body { padding-inline: 0 !important; }
  .brb-section.brb-slider.is-style-ing-carrusel-caso h2.wp-block-heading.wp-block-heading { margin-bottom: 8px !important; }
}

/* Inicio · Presentación (receta 60 con H1): en Figma el texto mide 856 px y se extiende sobre la columna de la imagen. */
@media (min-width: 1025px) {
  .brb-story .brb-copy:has(h1.brb-title-h1) { width: 856px; max-width: calc(100vw - 172px); position: relative; z-index: 1; }
}
/* Inicio · Expertos en Robótica: autor de las citas en #224553 (Hanken 16/21) como en Figma. */
.brb-split .wp-block-quote cite { color: #224553; opacity: 1; font-size: 16px; line-height: 1.31; }
@media (min-width: 1025px) {
  .brb-story .brb-copy:has(h1.brb-title-h1) p:not(.brb-eyebrow) { max-width: 753px; }
}

/* Servicios y BECAM · «Caja de portada ancha»: texto a 833/755 px como Figma (la portada general limita a 590 px). */
.is-style-ing-portada .is-style-ing-caja-portada-ancha p { max-width: 833px; }
.is-style-ing-portada .is-style-ing-caja-portada-ancha p:not(.brb-eyebrow) { max-width: 755px; }
/* BECAM · galería «Frame 341»: cada imagen con su ancho de Figma (994/798/587/370 px, atributo de anchura de la imagen). */
.brb-gallery-section .brb-layout-strip.brb-layout-strip { grid-auto-columns: max-content; }
.brb-gallery-section .brb-layout-strip > .wp-block-group__inner-container { grid-auto-columns: max-content; }

/* R1 · Imagen «Atenuada» (estilo de bloque): logotipos al 40 % de Figma (Inicio › Colaboradores). */
.wp-block-image.is-style-ing-atenuada img { opacity: 0.4; }

/* R1 · Estilos de grupo para «Imagen y presentación» (recetas 66–68): proporciones de Figma en escritorio. */
@media (min-width: 941px) {
  .brb-split.is-style-ing-texto-ancho,
  .is-style-ing-texto-ancho > .brb-split,
  .is-style-ing-texto-ancho > .wp-block-group__inner-container > .brb-split { grid-template-columns: minmax(0, 680px) minmax(0, 1fr); }
  .brb-split.is-style-ing-desplegable-tarjeta,
  .is-style-ing-desplegable-tarjeta > .brb-split,
  .is-style-ing-desplegable-tarjeta > .wp-block-group__inner-container > .brb-split { grid-template-columns: minmax(0, 464px) minmax(0, 1fr); } /* R6: desplegables a 464 px fijos (Figma Frame 36588) */
}
/* R2 · IA-2.2: el selector del tema (.wp-block-details.is-style-brb-disclosure > summary, 17 px) ganaba; se iguala su especificidad. */
.is-style-ing-desplegable-tarjeta summary, .is-style-ing-desplegable-tarjeta .wp-block-details.is-style-brb-disclosure > summary { font-family: Poppins, sans-serif; font-size: clamp(19px, 1.6vw, 23px); font-weight: 500; line-height: 1.26; letter-spacing: -0.03em; }

/* Consultoría y Manipulado · «Texto ancho» con la imagen a la izquierda: los 680 px son para el texto (segunda columna). */
@media (min-width: 941px) {
  .brb-split.is-style-ing-texto-ancho:has(> .brb-story-media:first-child, > .wp-block-group__inner-container > .brb-story-media:first-child) { grid-template-columns: minmax(0, 1fr) minmax(0, 680px); }
}

/* R2 · U-2.1 · Megamenú: los títulos llevaban la raya del tema (::after) y además el subrayado; queda solo el subrayado. */
@media (min-width: 941px) {
  .ing-mega-abierto .brb-desktop-nav .brb-menu > li > a::after { content: none; }
  .ing-mega-abierto .brb-desktop-nav .brb-menu > li > a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
}

/* R2 · U-2.3 · Inicio › Presentación: la imagen (636×625 en Figma) va pegada al borde derecho y arriba de la sección.
 * R5 · U-5.1: la pinza no se recorta; anclada abajo, pisa siempre 59 px la sección siguiente (a 1440: sección 566, imagen 625, como Figma). */
/* R5 · U-5.4: la pinza va por encima de la franja azul (::after de la sección), y el texto deja aire sobre la franja en tableta. */
.brb-story:has(.brb-copy h1.brb-title-h1) .brb-story-media { position: relative; z-index: 1; }
.brb-story .brb-copy:has(h1.brb-title-h1) { position: relative; z-index: 2; } /* el texto sigue por encima de la pinza */
@media (min-width: 769px) { .brb-story .brb-copy:has(h1.brb-title-h1) { padding-bottom: 40px; } }
@media (min-width: 1025px) {
  .brb-story:has(.brb-copy h1.brb-title-h1) { position: relative; z-index: 2; overflow: visible; min-height: 566px; }
  .brb-story:has(.brb-copy h1.brb-title-h1) .brb-story-media { position: absolute; right: 0; bottom: -59px; width: min(636px, 44vw); }
  .brb-story:has(.brb-copy h1.brb-title-h1) .brb-story-media :is(.wp-block-group__inner-container, figure) { height: 100%; margin: 0; }
  .brb-story:has(.brb-copy h1.brb-title-h1) .brb-story-media img { width: 100%; height: auto; aspect-ratio: 636 / 625; object-fit: cover; }
}

/* R2 · U-2.4 · Tarjetas de sectores: la descripción no se estira (las etiquetas siguen al texto, como en Figma). */
.brb-card--whole .brb-card-description { flex-grow: 0; }
/* R2 · U-2.4 · Tarjetas enlazadas con flecha circular (Inicio › Sectores): la flecha (45 px de Figma) es el enlace
 * de la tarjeta; el tema hace clicable toda la caja («brb-card--whole»). */
.brb-card--whole > .wp-block-image:last-child, .brb-card--whole > .wp-block-group__inner-container > .wp-block-image:last-child { margin-top: auto; align-self: flex-end; }
.brb-card--whole > .wp-block-image:last-child img, .brb-card--whole > .wp-block-group__inner-container > .wp-block-image:last-child img {
  width: 45px; height: 45px; border-radius: 50%; filter: drop-shadow(7px 7px 23px rgb(34 69 83 / 0.1)); transition: transform var(--brb-hover-duration, 0.2s) ease;
}
.brb-linked-card.brb-card--whole { border-radius: 20px; transition: transform var(--brb-hover-duration, 0.2s) ease, box-shadow var(--brb-hover-duration, 0.2s) ease; }
.brb-linked-card.brb-card--whole .brb-card-target::before { border-radius: 20px; }
.brb-linked-card.brb-card--whole:is(:hover, :focus-within) { transform: translateY(-3px); box-shadow: 4px 4px 21px rgb(34 69 83 / 0.18); }
.brb-linked-card.brb-card--whole:is(:hover, :focus-within) .brb-card-target img { transform: translateX(3px); }

/* R2 · U-2.6 · Logotipos sin transparencia; solo los que llevan enlace se atenúan al pasar el ratón. */
/* Tamaños de Figma para «Logotipos grandes» (Inicio › Colaboradores y Clientes): 236 × 72 px, 80 px entre ellos, pie Hanken 16/21. */
.brb-logos--large { --brb-logo-height: 72px; --brb-logo-slot: 236px; --brb-logo-gap: 80px; }
.brb-logos--large .brb-logos-track figcaption { margin-top: 20px; font-size: 16px; line-height: 1.31; color: #224553; }
@media (max-width: 700px) { .brb-logos--large { --brb-logo-height: 56px; --brb-logo-slot: 176px; --brb-logo-gap: 40px; } }
.brb-logos-track a img { transition: opacity var(--brb-hover-duration, 0.2s) ease; }
.brb-logos-track a:is(:hover, :focus-visible) img { opacity: 0.4; }

/* R2 · IA-2.1 · Botones de Figma en todo el sitio: Hanken 500 17/22, relleno 15/25 (52 px de alto). El relleno vertical es la
 * opción del tema «Espacio vertical de los botones» (15); los botones con tamaño propio en el bloque lo conservan. */
.wp-block-button__link { font-size: 17px; font-weight: 500; line-height: 22px; padding-inline: 25px; }
/* Botones de ancho completo de las tarjetas («Ver …»): en Figma son más bajos (49 px, relleno vertical 10 + flecha). */
.wp-block-button__width-100 > .wp-block-button__link { padding-block: 13px; }
/* R3 · Los «Ver …» de tarjeta (ancho completo con flecha) llevan en Figma el texto a la izquierda y la flecha a la derecha
 * (space-between, relleno lateral 43–60 px según la longitud del texto; aquí 50 px, menos en pantallas estrechas). */
.wp-block-button__width-100:is(.brb-button-arrow, .is-style-brb-arrow) > .wp-block-button__link { justify-content: space-between; padding-inline: clamp(20px, 3.5vw, 50px); }
@media (min-width: 1025px) { .wp-block-button__width-100:is(.brb-button-arrow, .is-style-brb-arrow) > .wp-block-button__link { white-space: nowrap; } }
/* R2 · IA-2.3 · Entradilla de sección (Inicio › Sectores): 744 px en Figma; el tema la limita a 60 ch (605 px). */
.brb-section-intro { max-width: 744px; }
.brb-section-intro.has-text-align-center { margin-inline: auto; }

/* R3 · Abierto de R1/R2 «ancho 1345»: en Figma las secciones «Imagen y presentación» de Consultoría y Manipulado
 * (estilo «Texto ancho») usan un lienzo de 1347 px (x 49–1396): texto 530–681 px e imagen de 520 px de alto (600 o 666 px
 * de ancho), hueco 37–42 px. La anchura de la imagen sale de su proporción (control nativo de la instancia).
 * Solo en escritorio ancho; por debajo de 1360 px se mantiene el contenedor general. */
@media (min-width: 1360px) {
  .brb-split.is-style-ing-texto-ancho,
  .is-style-ing-texto-ancho > .brb-split,
  .is-style-ing-texto-ancho > .wp-block-group__inner-container > .brb-split {
    --ing-lienzo: min(1347px, 100vw - 93px);
    width: var(--ing-lienzo); max-width: none !important; margin-inline: calc((100% - var(--ing-lienzo)) / 2) !important;
    grid-template-columns: minmax(0, 1fr) max-content; column-gap: 37px; align-items: center;
  }
  .brb-split.is-style-ing-texto-ancho:has(> .brb-story-media:first-child, > .wp-block-group__inner-container > .brb-story-media:first-child) {
    grid-template-columns: max-content minmax(0, 1fr); column-gap: 42px;
  }
  .is-style-ing-texto-ancho .brb-story-media img { height: 520px; width: auto; max-width: 666px; object-fit: cover; }
  .is-style-ing-texto-ancho .brb-story-media :is(.wp-block-group__inner-container, figure) { margin: 0; }
  .is-style-ing-texto-ancho .brb-copy { max-width: 681px; }
}

/* R3 · Tarjetas con foto (carrusel de soluciones, rejilla de Casos; Figma «Frame 384»): la foto (376 px) desborda el contenido
 * y queda a 12–13 px del borde (relleno de la instancia), pero título, texto y botón van a 28/29 px (344–359 px de ancho). */
.brb-slide.brb-slide--photo.is-style-brb-glass > :is(.brb-slide-body, .wp-block-group__inner-container > .brb-slide-body) { padding-inline: 16px; }

/* R4 · Índice de BECAM: el tema pone a las listas de lectura 10 px de margen y interlineado 1,65 (.brb-prose li); Figma: 22 px de línea y 15 px entre entradas. */
.is-style-ing-indice > li { margin: 0; padding: 0; line-height: 1.22; }
@media (min-width: 1025px) { .is-style-ing-indice a { white-space: nowrap; } }

/* R4 · Desplegables en tarjeta: la tarjeta (grupo) lleva el fondo y el borde de Figma; el desplegable del tema no añade sus líneas
 * superior/inferior y, abierto, la tarjeta pierde el fondo. */
.is-style-ing-desplegable-tarjeta .wp-block-details.is-style-brb-disclosure { border: 0; }
.is-style-ing-desplegable-tarjeta .wp-block-group.has-background:has(.wp-block-details[open]:not(.ing-cerrando)) { background-color: transparent !important; }

/* R5 · U-5.3 · Carriles de logotipos: barra de desplazamiento fina y redondeada en los colores de la marca (solo aparece si no caben).
 * Firefox usa scrollbar-color; Chromium y Safari, las pseudoclases (para ellas se anula el «thin» del tema, que las desactiva). */
.brb-logos { scrollbar-width: thin; scrollbar-color: #4c9bb8 #dce3ec80; }
@supports selector(::-webkit-scrollbar) {
  .brb-logos { scrollbar-width: auto; scrollbar-color: auto; }
  .brb-logos::-webkit-scrollbar { height: 6px; }
  .brb-logos::-webkit-scrollbar-track { margin-inline: 24px; border-radius: 999px; background: #dce3ec80; }
  .brb-logos::-webkit-scrollbar-thumb { border-radius: 999px; background: #4c9bb8; }
  .brb-logos::-webkit-scrollbar-thumb:hover { background: #224553; }
}

/* R5 · U-5.6 · Estilo de grupo «Velo blanco en móvil»: en una columna la foto de fondo queda detrás del texto; un velo claro
 * (82 %) la atenúa para que se lea. En escritorio no cambia nada. */
@media (max-width: 940px) {
  .is-style-ing-velo-movil { position: relative; isolation: isolate; }
  .is-style-ing-velo-movil::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgb(252 252 254 / 0.82); }
}

/* R6 · Listas dentro de los desplegables en tarjeta (Consultoría › Qué analizamos, Manipulado › Qué incluye): el tema aplica
 * interlineado 1,65 y 10 px por elemento (45 px por línea); Figma: Hanken 21/27 sin separación entre líneas. */
.is-style-ing-desplegable-tarjeta .brb-disclosure-body li { margin: 0; line-height: 1.29; }

/* R6 · Formularios CF7: las etiquetas son solo para lectores de pantalla, pero el tema deja 8 px encima de cada campo para la
 * etiqueta visible (paso de 63 px); Figma «Frame 36567»: campos de 40 px a 15 px (paso 55). */
.brb-cf-field .screen-reader-text + .wpcf7-form-control-wrap, .brb-cf-legal .wpcf7-form-control-wrap { margin-top: 0; }

/* R6 · Bandas azules a sangre (receta 54): en Figma todas miden 260 px con el contenido centrado; con el título en una
 * línea la web se quedaba en 219 px. Solo escritorio; en móvil manda el contenido. */
@media (min-width: 1025px) {
  .brb-contact-band-section.has-background[style*="#4893b1"] { min-height: 260px; display: grid; align-content: center; }
  .brb-contact-band-section.has-background[style*="#4893b1"] > .brb-contact-band { width: 100%; }
}
/* R6 · Tarjeta del formulario (Figma «Frame 36568»): 15 px del título a los campos (el flujo daba 24) y la fila legal a 20 px de alto. */
.brb-cf7.brb-cf-style-card > .wp-block-group__inner-container > .wp-block-contact-form-7-contact-form-selector { margin-top: 15px; }
.brb-cf-legal > p, .brb-cf-legal .wpcf7-form-control-wrap, .brb-cf-legal .wpcf7-list-item { display: block; margin: 0; line-height: 20px; }

/* C · encabezados del DOCX: resumen de desplegable publicado como <h3> con el mismo aspecto */
.wp-block-details.is-style-ing-resumen-h3 > summary > h3.ing-resumen-h3 {
	display: inline; margin: 0; padding: 0;
	font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}

/* C · Encabezados según el DOCX (04/11): textos que dejan de ser encabezado conservan su aspecto de título,
 * y textos que pasan a ser encabezado conservan el suyo (antetítulos, entradillas). */
p.brb-title-h1 { font-size: var(--brb-title-1-size); line-height: var(--brb-title-1-line); letter-spacing: var(--brb-title-1-tracking); font-weight: var(--brb-title-1-weight); text-transform: var(--brb-title-1-transform); font-family: var(--brb-title-1-family); margin-top: var(--brb-title-1-before, 0); margin-bottom: var(--brb-title-1-after, 1.25rem); }
p.brb-title-h2 { font-size: var(--brb-title-2-size); line-height: var(--brb-title-2-line); letter-spacing: var(--brb-title-2-tracking); font-weight: var(--brb-title-2-weight); text-transform: var(--brb-title-2-transform); font-family: var(--brb-title-2-family); margin-top: var(--brb-title-2-before, 0); margin-bottom: var(--brb-title-2-after, 1.25rem); }
p.brb-title-h3 { font-size: var(--brb-title-3-size); line-height: var(--brb-title-3-line); letter-spacing: var(--brb-title-3-tracking); font-weight: var(--brb-title-3-weight); text-transform: var(--brb-title-3-transform); font-family: var(--brb-title-3-family); margin-top: var(--brb-title-3-before, 0); margin-bottom: var(--brb-title-3-after, 1.25rem); }
p.is-style-ing-como-titulo { font-family: var(--brb-font-heading); letter-spacing: -0.025em; margin-bottom: 12px; }
.wp-block-heading.brb-eyebrow.brb-eyebrow { letter-spacing: 0.05em; line-height: 1.5; margin-bottom: 1em; }
.wp-block-heading.is-style-ing-aspecto-texto { font-family: var(--brb-font-body); letter-spacing: normal; margin-bottom: 1em; max-width: 753px; }
.brb-cf7 > .wp-block-group__inner-container > h2.wp-block-heading { letter-spacing: -0.025em; margin-bottom: 12px; }
p.wp-block-paragraph:is(.brb-title-h1, .brb-title-h2, .brb-title-h3):is(.brb-title-h1, .brb-title-h2, .brb-title-h3) { margin-bottom: 1.25rem; } /* como h1-h3 del tema */

/* Cuadro de icono (estilo de grupo «Cuadro de icono»): ancho y alto exactos del panel «Cuadro del icono» (por defecto
 * 45 × 45, Figma Beneficios), icono centrado con su «Tamaño» nativo; color y radio del grupo. Gana a .brb-icon (mín. 40 px). */
.wp-block-group.is-style-ing-caja-icono.is-style-ing-caja-icono {
	box-sizing: border-box; width: var(--ing-caja-w, 45px); height: var(--ing-caja-h, 45px);
	min-width: 0; min-height: 0; max-width: none; flex: 0 0 auto; padding: 0;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.wp-block-group.is-style-ing-caja-icono > .wp-block-group__inner-container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.wp-block-group.is-style-ing-caja-icono .wp-block-iconos-gutenberg-iconos { margin: 0; }

/* ==================================================================================================================
 * 05/11 · Efectos de movimiento (Apariencia › Efectos de movimiento; script y ajustes en functions-personalizado.php).
 * Estado oculto solo con html.ing-fx (lo pone el script): sin JS, con «reducir movimiento» o en el editor no se oculta nada.
 * Se usan translate/scale sueltos (no transform) para no pisar los transform propios de cada elemento (hover, centrado…).
 * Al terminar (.ing-fx-fin) se quita la transición para que vuelvan las del propio elemento.
 * ================================================================================================================== */
:root { --ing-fx-d: var(--ing-fx-d-base, 28px); }
@media (max-width: 767px) { :root { --ing-fx-d: calc(var(--ing-fx-d-base, 28px) * 0.6); } }
html.ing-fx-pre main { opacity: 0; }
html.ing-fx [data-ing-fx]:not(.ing-fx-in) { opacity: 0; }
html.ing-fx [data-ing-fx="subir"]:not(.ing-fx-in) { translate: 0 var(--ing-fx-d); }
html.ing-fx [data-ing-fx="bajar"]:not(.ing-fx-in) { translate: 0 calc(var(--ing-fx-d) * -1); }
html.ing-fx [data-ing-fx="izquierda"]:not(.ing-fx-in) { translate: calc(var(--ing-fx-d) * -1.5) 0; }
html.ing-fx [data-ing-fx="derecha"]:not(.ing-fx-in) { translate: calc(var(--ing-fx-d) * 1.5) 0; }
html.ing-fx [data-ing-fx="zoom"]:not(.ing-fx-in) { scale: 0.94; }
html.ing-fx [data-ing-fx="desenfoque"]:not(.ing-fx-in) { filter: blur(10px); translate: 0 calc(var(--ing-fx-d) * 0.5); }
html.ing-fx [data-ing-fx="revelar"]:not(.ing-fx-in) { opacity: 1; clip-path: inset(100% 0 0 0); }
html.ing-fx [data-ing-fx="revelar"]:not(.ing-fx-in) img { scale: 1.14; }
html.ing-fx [data-ing-fx="alejar"]:not(.ing-fx-in) { opacity: 1; scale: 1.1; }
html.ing-fx [data-ing-fx].ing-fx-in:not(.ing-fx-fin) {
	transition: opacity calc(var(--ing-fx-dur) * 0.8) var(--ing-fx-ease) var(--ing-fx-retardo, 0ms),
		translate var(--ing-fx-dur) var(--ing-fx-ease) var(--ing-fx-retardo, 0ms),
		scale var(--ing-fx-dur) var(--ing-fx-ease) var(--ing-fx-retardo, 0ms),
		filter var(--ing-fx-dur) var(--ing-fx-ease) var(--ing-fx-retardo, 0ms),
		clip-path calc(var(--ing-fx-dur) * 1.1) cubic-bezier(.77,0,.18,1) var(--ing-fx-retardo, 0ms);
}
html.ing-fx [data-ing-fx="revelar"].ing-fx-in:not(.ing-fx-fin) img { transition: scale calc(var(--ing-fx-dur) * 1.5) var(--ing-fx-ease) var(--ing-fx-retardo, 0ms); }
html.ing-fx [data-ing-fx="alejar"].ing-fx-in:not(.ing-fx-fin) { transition-duration: calc(var(--ing-fx-dur) * 2); }
@media print { html.ing-fx [data-ing-fx] { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; clip-path: none !important; } }

/* 05/11 · «Desplegables en tarjeta» (Consultoría › Qué analizamos, Manipulado › Qué incluye): una imagen por desplegable,
 * apiladas en la misma celda; la del desplegable abierto entra con fundido y leve alejamiento mientras la anterior se
 * funde (fundido cruzado; vale también para imágenes con transparencia). Sin JS se ve la primera. Apertura y cierre animados por el script. */
.ing-galeria, .ing-galeria > .wp-block-group__inner-container { display: grid; }
.ing-galeria > .wp-block-group__inner-container { grid-area: 1 / 1; }
.ing-galeria > .wp-block-image, .ing-galeria > .wp-block-group__inner-container > .wp-block-image { grid-area: 1 / 1; margin: 0; }
.ing-galeria:not(.ing-galeria--js) .wp-block-image:not(:first-child) { visibility: hidden; opacity: 0; }
.ing-galeria--js .wp-block-image { position: relative; z-index: 0; opacity: 0; visibility: hidden; scale: 1.035;
	transition: opacity calc(var(--ing-gal-dur, 800ms) * 0.9) ease, visibility 0s linear var(--ing-gal-dur, 800ms), scale 0s linear var(--ing-gal-dur, 800ms); }
.ing-galeria--js .wp-block-image.es-activa { z-index: 1; opacity: 1; visibility: visible; scale: 1;
	transition: opacity var(--ing-gal-dur, 800ms) cubic-bezier(.22,1,.36,1), scale calc(var(--ing-gal-dur, 800ms) * 1.6) cubic-bezier(.16,1,.3,1), visibility 0s; }
.ing-galeria--js .wp-block-image img { display: block; }
@media (prefers-reduced-motion: reduce) { .ing-galeria--js .wp-block-image { transition: none !important; scale: 1; } }
.is-style-ing-desplegable-tarjeta .wp-block-group.has-background:has(> .wp-block-details, > .wp-block-group__inner-container > .wp-block-details) { transition: background-color var(--ing-acc-dur, 500ms) ease; }
.is-style-ing-desplegable-tarjeta .wp-block-details.ing-cerrando[open] > summary::after { transform: rotate(90deg); }
/* 05/11 · El margen inferior del contenido (24 px) colapsaba fuera del desplegable: la animación (con overflow oculto) no
 * lo contaba y al terminar la tarjeta crecía de golpe. flow-root lo deja dentro: misma altura en reposo, animación continua. */
.is-style-ing-desplegable-tarjeta .wp-block-details { display: flow-root; }