/* ==============================================
   ILLA Cowork — sections.css
   Layout, componentes, sticky header, responsive
   Prefijo: ill-
   ============================================== */

/* ─── GOOGLE FONTS FALLBACK ─── */
/* Las fuentes se enqueue en functions.php */

/* ============================================
   HEADER GLOBAL — shrink on scroll
   ============================================ */
.ill-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 9999 !important;
  width: 100% !important;
  transition: var(--ill-transition-slow) !important;
}
/* 2026-07-29 — Fix sticky header roto (auditoria-mobile-20260729, hallazgo F1 CRÍTICO):
   #brx-header es el <header> que Bricks genera automáticamente alrededor de la plantilla
   global — mide exactamente lo mismo que su único hijo (.ill-header), sin margen extra,
   así que position:sticky nunca tenía recorrido real para quedarse fijo (top se movía en
   réplica exacta de -scrollY desde el primer píxel, en desktop y en móvil/touch —
   diagnosticado 2026-07-16, confirmado en táctil 2026-07-29). No es un problema de la
   regla sticky en sí (correcta), sino de su containing block sin altura extra.
   Fix: .ill-header pasa a position:fixed (deja de depender de su containing block) y
   #brx-header hace de "hueco" en el flujo normal con la MISMA altura que el header real,
   para que el contenido no salte debajo de él. La altura del hueco se sincroniza con el
   propio estado .scrolled vía :has(), reutilizando las variables que topbar+nav ya usan
   — nada nuevo que mantener por separado ni JS adicional. */
#brx-header {
  height: calc(var(--ill-topbar-h) + var(--ill-nav-h)) !important;
  transition: height 0.4s ease !important;
}
#brx-header:has(.ill-header.scrolled) {
  height: var(--ill-nav-h-scrolled) !important;
}
@media (max-width: 991px) {
  /* Sin topbar en este rango (ver bloque "Mobile header" más abajo, ampliado a 991px
     — hallazgo F5): el header no-scrolleado ya mide solo el nav, 64px. */
  #brx-header { height: 64px !important; }
}

/* Topbar — brxe-container defaults to flex-direction:column, override to row + full width */
.ill-header__topbar {
  background-color: var(--ill-color-bg-alt) !important;
  height: var(--ill-topbar-h) !important;
  overflow: hidden !important;
  transition: height 0.35s ease, opacity 0.35s ease !important;
  width: 100% !important;
  max-width: none !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
align-items: center !important;
gap: 36px !important;
  padding: 0 44px !important;
  box-sizing: border-box !important;
}
.ill-header__topbar-link {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-base) !important;
  font-weight: var(--ill-fw-medium) !important;
color: rgba(23,20,45,0.85) !important;
text-decoration: none !important;
white-space: nowrap !important;
}
.ill-header__topbar-link:hover {
  color: var(--ill-color-accent) !important;
}

/* Nav principal — brxe-container defaults a column + width:1100px, override a row + 100% */
.ill-header__nav {
  background-color: rgba(23,20,45,0.97) !important;
min-height: var(--ill-nav-h) !important;
  display: flex !important;
  align-items: center !important;
  transition: min-height 0.35s ease !important;
  width: 100% !important;
  max-width: none !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  padding: 0 44px !important;
  box-sizing: border-box !important;
}
.ill-header__logo img {
height: 42px !important;
width: auto !important;
margin: 20px 0 !important;
position: relative !important;
z-index: 10001 !important;
}
.ill-header__menu {
  display: flex !important;
  align-items: stretch !important;
  align-self: stretch !important;
  gap: var(--ill-space-lg) !important;
}
/* El <li> de "Oficinas"/"Salas de reuniones" solo tenía el alto de su texto (27px),
   centrado dentro de la franja del nav (82px): entre ese texto y el panel del
   mega-menú quedaba ~27px sin ningún elemento en :hover, así que al bajar el ratón
   en diagonal hacia una card se cruzaba esa zona muerta y el panel se cerraba antes
   de llegar (confirmado paso a paso con Playwright). Se estira solo el <li> (que es
   lo que dispara el :has(li:hover) del panel) al alto completo del nav; el <a> se
   deja con position:relative propio para que el subrayado ::after, que se posiciona
   sobre el ancestro posicionado más cercano, siga anclado al texto y no al <li>
   ahora más alto — sin este relative el subrayado se iría 55px más abajo. */
.ill-header__menu .bricks-nav-menu-wrapper,
.ill-header__menu .bricks-nav-menu {
  height: 100% !important;
}
.ill-header__menu .bricks-nav-menu > li {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}
.ill-header__menu a,
.ill-header__menu .bricks-nav-menu--main a {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-nav) !important;
  font-weight: var(--ill-fw-medium) !important;
  color: var(--ill-color-white) !important;
  text-decoration: none !important;
  position: relative !important;
}
.ill-header__menu a:hover,
.ill-header__menu .bricks-nav-menu--main a:hover {
  color: var(--ill-color-accent) !important;
}
.ill-header__right {
display: flex !important;
align-items: center !important;
gap: 28px !important;
}
.ill-header__lang {
  font-family: var(--ill-font-body) !important;
  font-size: 14px !important;
  font-weight: var(--ill-fw-medium) !important;
  color: var(--ill-color-white) !important;
}
.ill-header__lang-link {
  color: var(--ill-color-white) !important;
  text-decoration: none !important;
  transition: var(--ill-transition) !important;
}
.ill-header__lang-link:hover {
  color: var(--ill-color-accent) !important;
}
.ill-header__lang-current {
  color: var(--ill-color-white) !important;
  font-weight: var(--ill-fw-medium) !important;
}
.ill-header__lang-sep {
  margin: 0 5px !important;
  opacity: 0.5;
}
.ill-header__cta {
  background-color: var(--ill-color-accent) !important;
  color: var(--ill-color-white) !important;
  font-family: var(--ill-font-body) !important;
  font-size: 14px !important;
font-weight: var(--ill-fw-medium) !important;
padding: 11px 26px !important;
border-radius: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: var(--ill-transition) !important;
  letter-spacing: 0 !important;
}
.ill-header__cta:hover {
  background-color: #c7421b !important;
  color: var(--ill-color-white) !important;
}

/* Shrink on scroll */
.ill-header.scrolled .ill-header__topbar {
  height: 0 !important;
  opacity: 0 !important;
}
.ill-header.scrolled .ill-header__nav {
  min-height: var(--ill-nav-h-scrolled) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.25) !important;
}
.ill-header.scrolled .ill-header__logo img {
height: 34px !important;
margin: 0 !important;
}

/* Mobile header — 2026-07-29: rango ampliado de 767px a 991px (auditoria-mobile-20260729,
   hallazgo F5 MEDIO). Antes, entre 768-991px (iPad portrait, móviles en landscape ancho)
   el header cambiaba a la barra de escritorio pero el mega-menú de Oficinas/Salas seguía
   dependiendo de :hover — inexistente en pantalla táctil, así que esos paneles quedaban
   inalcanzables por tap (el enlace de nivel superior sí navegaba directo al hub, aterrizaje
   correcto, pero sin acceso a las sub-secciones del panel). Se opta por la solución que ya
   proponía el propio informe de auditoría: colapsar a menú móvil también en ese rango, en
   vez de construir una interacción de tap-to-open nueva solo para esa franja. */
@media (max-width: 991px) {
  .ill-header__topbar { display: none !important; }
  .ill-header__nav { min-height: 64px !important; }
  .ill-header__menu .bricks-nav-menu-wrapper { display: none !important; }
  .ill-header__lang { display: none !important; }
  .ill-header__cta { display: none !important; }
  /* El hamburguesa salía centrado y pegado arriba: `.ill-header__menu` tiene
     align-items:stretch (necesario para el fix del hover del mega-menú de
     escritorio de esta mañana), que en mobile desalinea verticalmente al
     toggle; y como .ill-header__right está oculto entero en mobile (ES +
     Contactar), el space-between de la fila ya no reserva hueco a la derecha
     y el hamburguesa (único hijo visible de .ill-header__menu) queda flotando
     hacia el centro. Se fuerza a la derecha y centrado verticalmente solo aquí. */
  .ill-header__menu { margin-left: auto !important; align-items: center !important; }
  .bricks-mobile-menu-toggle { align-self: center !important; }
  /* Bricks genera DOS wrappers de menú móvil dentro del mismo contenedor:
     .bricks-nav-menu-wrapper.mobile_landscape (el que se está corrigiendo
     arriba, a pantalla completa debajo del header) y otro nativo distinto,
     .bricks-mobile-menu-wrapper.left (panel lateral de 300px, sin fondo
     propio, posicionado top:0 — se solapaba con el logo por encima del
     header). Ambos responden al mismo toggle. Se oculta el segundo para que
     no quede un panel transparente superpuesto sobre el primero. */
  .bricks-mobile-menu-wrapper.left { display: none !important; }
}
/* Bricks solo oculta su propio toggle nativo y muestra el nav de escritorio por debajo de
   768px (setting interno del elemento nav-menu, no CSS de este tema) — el bloque de arriba
   solo ESTILA esos elementos, no fuerza su visibilidad real. Entre 768-991px hay que forzar
   explícitamente el mismo estado que Bricks aplica de forma nativa por debajo de 768px
   (mismos valores display reales, confirmados con Playwright: toggle=block, nav-menu-wrapper
   desktop=none). */
@media (min-width: 768px) and (max-width: 991px) {
  .bricks-mobile-menu-toggle { display: block !important; }
  .ill-header__menu .bricks-nav-menu-wrapper { display: none !important; }
}
/* 2026-07-29 — hallazgo F3 CRÍTICO: el overlay móvil no daba acceso a "Sobre L'illa & Co."
   / "Noticias" / "Tour Virtual" (solo vivían en el topbar de escritorio, oculto por completo
   ≤991px desde el bloque de arriba). Se añaden como 3 items nuevos al final del propio menú
   WP "Menú Principal" (mismo mecanismo nativo, sin duplicar markup ni tocar Bricks) —
   visibles automáticamente en el overlay móvil/tablet junto a Oficinas/Salas/Servicios,
   heredando el mismo estilo (li > a) ya definido más abajo. En escritorio real (≥992px) se
   ocultan para no alterar la barra de navegación ya aprobada por el cliente — esos 3 siguen
   viviendo solo en el topbar ahí, sin duplicarse. */
@media (min-width: 992px) {
  .ill-header__menu .bricks-nav-menu > li:nth-child(n+4) { display: none !important; }
}
/* Bug de navegación real (2 partes):
   1) La regla de arriba oculta el wrapper del menú SIEMPRE en mobile, sin
      excepción para cuando Bricks lo abre — el botón hamburguesa mostraba el
      overlay oscuro pero los links de navegación nunca aparecían
      (display:none !important ganaba siempre). Bricks añade la clase
      .show-mobile-menu al contenedor del menú al pulsar el toggle.
   2) Una vez visible, el wrapper quedaba position:static — como hermano flex
      del propio botón hamburguesa dentro de un nav con flex-wrap:nowrap, un
      wrapper de ancho completo EMPUJABA al botón fuera del viewport (x=385 en
      pantalla de 375px), dejándolo imposible de volver a pulsar para cerrar.
      Se convierte en overlay fixed, fuera del flujo, con targets táctiles
      generosos (padding vertical amplio, fila entera clicable). 2026-07-29:
      rango ampliado a 991px junto con el resto del bloque "Mobile header"
      (hallazgo F5) — top:64px sigue siendo correcto en todo el rango porque
      el header no-scrolleado mide 64px en todo ≤991px (ver fix de F1). */
@media (max-width: 991px) {
  .ill-header__menu.show-mobile-menu .bricks-nav-menu-wrapper {
    display: block !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--ill-color-dark) !important;
    padding: 8px 24px 24px !important;
    overflow-y: auto !important;
    z-index: 10000 !important;
  }
  .ill-header__menu.show-mobile-menu .bricks-nav-menu {
    display: flex !important;
    flex-direction: column !important;
  }
  /* La regla `li{height:100%}` de más arriba (pensada para el hover del
     mega-menú de escritorio) también alcanzaba aquí: cada <li> se estiraba al
     alto completo del menú y, al encogerse los 3 a la fuerza para caber,
     dejaba huecos enormes entre "Oficinas"/"Salas"/"Servicios". En la lista
     vertical mobile cada item debe medir solo lo que ocupa su propio texto. */
  .ill-header__menu.show-mobile-menu .bricks-nav-menu > li { height: auto !important; }
  .ill-header__menu.show-mobile-menu .bricks-nav-menu > li > a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 18px 4px !important;
    font-size: 19px !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  }
  .ill-header__menu.show-mobile-menu .bricks-nav-menu > li:last-child > a { border-bottom: none !important; }
  /* CTA visible también con el menú abierto: sin esto la única llamada a la
     acción del sitio (Contactar) desaparecía por completo en mobile. El botón
     vive fuera de .ill-header__menu (es hermano en .ill-header__right), así
     que no puede ir dentro del panel por CSS puro — se fija abajo del todo
     mientras el menú está abierto, usando :has() sobre el ancestro común. */
  .ill-header:has(.ill-header__menu.show-mobile-menu) .ill-header__cta {
    display: flex !important;
    position: fixed !important;
    left: 24px !important;
    right: 24px !important;
    bottom: 24px !important;
    justify-content: center !important;
    width: auto !important;
    z-index: 10001 !important;
    padding: 16px 26px !important;
  }
}

/* ============================================
   SECCIÓN 1 — HERO
   ============================================ */
.ill-hero {
  min-height: calc(100vh - 122px) !important;
  background-color: var(--ill-color-dark);
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Overlay oscuro sobre la imagen */
.ill-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(15,12,32,0.35) 0%, rgba(15,12,32,0.55) 50%, rgba(15,12,32,0.45) 100%) !important;
  z-index: 0 !important;
}
.ill-hero__inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: var(--brxw-container-width, 1200px) !important;
  margin: 0 auto !important;
  padding: var(--ill-space-3xl) var(--brxw-section-space-horizontal, 1.5rem) !important;
  box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 18px !important;
}
/* Logo grande centrado en hero */
.ill-hero__logo {
  width: 252px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  display: block !important;
}
.ill-hero__logo img {
  width: 450px !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}
.ill-hero__eyebrow {
  font-family: var(--ill-font-body) !important;
  font-size: 15px !important;
font-weight: var(--ill-fw-semibold) !important;
color: rgba(255,255,255,0.95) !important;
letter-spacing: 4px !important;
text-transform: uppercase !important;
}
.ill-hero__heading {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-3xl) !important;
  font-weight: var(--ill-fw-regular) !important;
  color: var(--ill-color-white) !important;
  line-height: 1.16 !important;
max-width: 900px !important;
  text-align: center !important;
}
/* 2026-07-27: feedback cliente 24/07 — cuerpo de texto bajo el H1 del hero, usado
   por primera vez en Servicios (antes ningún .ill-hero tenía párrafo de cuerpo,
   solo eyebrow + H1). Clase nueva, sin tocar .ill-hero__heading/__eyebrow. */
.ill-hero__body {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-lg) !important;
  color: rgba(255,255,255,0.88) !important;
  line-height: 1.6 !important;
  max-width: 640px !important;
  text-align: center !important;
}
@media (max-width: 767px) {
  .ill-hero { min-height: 75vh !important; }
  .ill-hero__heading { font-size: 32px !important; }
  .ill-hero__body { font-size: var(--ill-fs-body) !important; }
  .ill-hero__logo { max-width: 140px !important; }
  .ill-hero__logo img { max-width: 140px !important; }
}
/* .ill-entorno__inner y .ill-cta__inner son flex column sin min-width:0: por
   defecto un flex item no se encoge por debajo del ancho mínimo de su propio
   contenido (min-width:auto), así que el H2/texto largo forzaba el contenedor
   — y toda la página — más ancho que el viewport en cualquier tamaño de
   pantalla, no solo en mobile. No tenían NINGUNA regla responsive hasta ahora. */
.ill-entorno__inner, .ill-cta__inner { min-width: 0 !important; width: 100% !important; box-sizing: border-box !important; }
.ill-entorno__heading, .ill-entorno__eyebrow, .ill-entorno__btns,
.ill-cta__title, .ill-cta__text { max-width: 100% !important; }
@media (max-width: 767px) {
  .ill-entorno__inner, .ill-cta__inner { padding: 0 24px !important; }
  .ill-entorno__heading { font-size: 32px !important; }
  .ill-cta__title { font-size: 32px !important; }
  .ill-entorno__btns { justify-content: center !important; }
}

/* ============================================
   SECCIÓN 2 — ENTORNO
   ============================================ */
.ill-entorno {
min-height: 620px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding: 60px 0 !important;
background-color: var(--ill-color-darkest) !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
}
.ill-entorno::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15,12,32,0.42) !important;
  z-index: 0 !important;
}
.ill-entorno__inner {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 22px !important;
max-width: 900px !important;
  margin: 0 auto !important;
}
.ill-entorno__eyebrow {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-base) !important;
  font-weight: var(--ill-fw-semibold) !important;
  color: var(--ill-color-white) !important;
  letter-spacing: 3px !important;
text-transform: uppercase !important;
opacity: 1 !important;
  text-align: center !important;
}
.ill-entorno__heading {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-2xl) !important;
  font-weight: var(--ill-fw-regular) !important;
  color: var(--ill-color-white) !important;
  line-height: 1.12 !important;
  text-align: center !important;
}
.ill-entorno__btns {
display: flex !important;
gap: 14px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}
.ill-entorno__btn-map {
  display: inline-flex !important;
  align-items: center !important;
  background-color: var(--ill-color-white) !important;
  color: var(--ill-color-dark) !important;
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-base) !important;
  font-weight: var(--ill-fw-semibold) !important;
  letter-spacing: 1.5px !important;
text-transform: uppercase !important;
padding: 16px 34px !important;
border-radius: 0 !important;
  text-decoration: none !important;
  transition: var(--ill-transition) !important;
}
.ill-entorno__btn-map:hover {
  background-color: var(--ill-color-bg-alt) !important;
  color: var(--ill-color-dark) !important;
}
.ill-entorno__btn-tour {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--ill-color-dark) !important;
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-base) !important;
  font-weight: var(--ill-fw-semibold) !important;
  letter-spacing: 1.5px !important;
text-transform: uppercase !important;
text-decoration: none !important;
padding: 14px 30px !important;
border-radius: 0 !important;
  color: var(--ill-color-white) !important;
  transition: var(--ill-transition) !important;
}
.ill-entorno__btn-tour::before {
content: '' !important;
display: inline-block !important;
width: 7px !important;
height: 7px !important;
border-radius: 50% !important;
background: var(--ill-color-accent) !important;
}
.ill-entorno__btn-tour:hover { opacity: 0.8 !important; color: var(--ill-color-white) !important; }
/* 2026-07-29 — hallazgo F10 MENOR: "Ver dónde estamos" / "Haz el Tour 360º" heredan
   var(--ill-fs-base)=13px — por debajo del mínimo de 15px pedido para móvil. Override
   puntual solo en estos 2 botones (no se toca el token global, lo usan otros 24 selectores
   con distinto propósito), solo en móvil/tablet. */
@media (max-width: 991px) {
  .ill-entorno__btn-map, .ill-entorno__btn-tour { font-size: 15px !important; }
}

@media (max-width: 767px) {
  .ill-entorno { padding: var(--ill-space-xl) 0 !important; }
  .ill-entorno__heading { font-size: 32px !important; }
  .ill-entorno__btns { flex-direction: column !important; align-items: flex-start !important; }
}

/* ============================================
   SECCIÓN 3 — PORTFOLIO PRODUCTOS
   ============================================ */
.ill-portfolio {
padding: 88px 0 40px !important;
background-color: var(--ill-color-bg) !important;
}
.ill-portfolio__inner {
display: flex !important;
flex-direction: column !important;
gap: 84px !important;
max-width: 1360px !important;
width: 100% !important;
padding: 0 40px !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
.ill-portfolio__header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
gap: 14px !important;
}
.ill-portfolio__eyebrow {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-base) !important;
  font-weight: var(--ill-fw-semibold) !important;
  color: var(--ill-color-accent) !important;
  letter-spacing: 2.5px !important;
text-transform: uppercase !important;
text-align: center !important;
}
.ill-portfolio__title {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-xl) !important;
  font-weight: var(--ill-fw-regular) !important;
  color: var(--ill-color-heading) !important;
  line-height: 1.2 !important;
  text-align: center !important;
}
.ill-portfolio__subtitle {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-body) !important;
  color: var(--ill-color-text-muted) !important;
  text-align: center !important;
}
/* Grid compacto: 1px gaps → background del grid actúa como línea de separación */
.ill-portfolio__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
gap: 0 !important;
background-color: transparent !important;
border: none !important;
}
.ill-product-card {
background-color: #fff !important;
border: 1px solid #DBDBD6 !important;
margin: -1px 0 0 -1px !important;
border-radius: 0 !important;
overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: background-color 0.2s ease !important;
  box-shadow: none !important;
}
.ill-product-card:hover {
  background-color: #fafafa !important;
  box-shadow: none !important;
  transform: none !important;
}
/* 2026-07-29 — hallazgo F2 CRÍTICO (auditoria-mobile-20260729): Bricks renderiza el
   elemento imagen como <img> directo (sin wrapper) cuando no es un enlace propio — mismo
   patrón ya corregido en Noticias/Certificados/A Mida (ver sus comentarios respectivos),
   nunca aplicado aquí. Las reglas de object-fit apuntaban a ".ill-product-card__image img",
   un <img> anidado que no existe en el DOM real, así que el navegador caía en el object-fit
   por defecto (fill) y deformaba las 4 fotos que no coincidían de casualidad con el aspect
   ratio de la card — medido hasta un 38% de desviación en Oficina a medida. Todo va ahora
   sobre la propia ".ill-product-card__image", que ES el <img>. */
.ill-product-card__image {
  aspect-ratio: 426/232 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background-color: var(--ill-color-bg-alt) !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}
.ill-product-card:hover .ill-product-card__image {
  transform: scale(1.04) !important;
}
.ill-product-card__body {
  padding: 28px 24px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex: 1 !important;
  align-items: center !important;
  text-align: center !important;
}
.ill-product-card__title {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-card) !important;
  font-weight: var(--ill-fw-medium) !important;
  color: var(--ill-color-dark) !important;
  line-height: 1.25 !important;
}
.ill-product-card__text {
  font-family: var(--ill-font-body) !important;
  font-size: 13.5px !important;
  color: var(--ill-color-card-text) !important;
line-height: 1.48 !important;
max-width: 330px !important;
margin: 0 auto !important;
}
.ill-portfolio__dossier {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  background-color: var(--ill-color-accent) !important;
  color: var(--ill-color-white) !important;
  font-family: var(--ill-font-body) !important;
  font-size: 14.5px !important;
font-weight: var(--ill-fw-semibold) !important;
letter-spacing: 0.5px !important;
  padding: 16px 34px !important;
border-radius: 0 !important;
  text-decoration: none !important;
  transition: var(--ill-transition) !important;
}
.ill-portfolio__dossier:hover {
  background-color: #c7421b !important;
  color: var(--ill-color-white) !important;
}
@media (max-width: 767px) {
  .ill-portfolio__grid { grid-template-columns: 1fr !important; }
  .ill-portfolio { padding: var(--ill-space-xl) 0 !important; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .ill-portfolio__grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================
   SECCIÓN 4 — ABOUT / BARCELONA
   ============================================ */
.ill-about {
  padding: var(--ill-space-3xl) 0 !important;
  background-color: var(--ill-color-bg-alt) !important;
}
.ill-about__inner {
  display: grid !important;
grid-template-columns: minmax(0, 440px) 1fr !important;
gap: 80px !important;
align-items: start !important;
max-width: 1360px !important;
width: 100% !important;
padding: 0 40px !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
/* Columna izquierda */
.ill-about__left {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
.ill-about__eyebrow {
  font-family: var(--ill-font-body) !important;
  font-size: 12px !important;
font-weight: var(--ill-fw-semibold) !important;
color: var(--ill-color-accent) !important;
letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
}
.ill-about__title {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-xl) !important;
  font-weight: var(--ill-fw-medium) !important;
  color: var(--ill-color-heading) !important;
  line-height: 1.2 !important;
}
.ill-about__text {
  font-family: var(--ill-font-body) !important;
  font-size: 15.5px !important;
color: var(--ill-color-text) !important;
line-height: 1.65 !important;
max-width: 420px !important;
}
.ill-about__link {
  display: inline-flex !important;
  align-items: center !important;
font-family: var(--ill-font-body) !important;
font-size: 12.5px !important;
font-weight: var(--ill-fw-semibold) !important;
color: var(--ill-color-dark) !important;
letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-bottom: none !important;
width: fit-content !important;
padding-bottom: 2px !important;
  transition: var(--ill-transition) !important;
}
.ill-about__link:hover {
  color: var(--ill-color-accent) !important;
  border-color: var(--ill-color-accent) !important;
}

/* Columna derecha — Accordion */
.ill-about__right {
  display: flex !important;
  flex-direction: column !important;
}
.ill-about__accordion .accordion-item {
  border-top: 1px solid var(--ill-color-separator) !important;
}
.ill-about__accordion .accordion-item:last-child {
  border-bottom: 1px solid var(--ill-color-separator) !important;
}
.ill-about__accordion .accordion-title-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 0 !important;
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-accordion) !important;
  font-weight: var(--ill-fw-medium) !important;
  color: var(--ill-color-heading) !important;
  cursor: pointer !important;
  background: transparent !important;
}
/* El signo + que Bricks usa como toggle */
.ill-about__accordion .accordion-title-wrapper::after {
  content: '+' !important;
  font-family: var(--ill-font-heading) !important;
  font-size: 24px !important;
  color: var(--ill-color-accent) !important;
  transition: transform 0.25s ease !important;
  flex-shrink: 0 !important;
}
.ill-about__accordion .accordion-item.open .accordion-title-wrapper::after {
  content: '–' !important;
}
.ill-about__accordion .accordion-content-wrapper {
  padding: 0 0 20px !important;
font-family: var(--ill-font-body) !important;
font-size: 14px !important;
color: var(--ill-color-text) !important;
line-height: 1.5 !important;
}

@media (max-width: 991px) {
  .ill-about__inner { grid-template-columns: 1fr !important; gap: var(--ill-space-xl) !important; }
}

/* ============================================
   SECCIÓN 5 — CTA CONOCER ESPACIOS
   ============================================ */
.ill-cta {
min-height: 600px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding: 60px 0 !important;
background-color: var(--ill-color-darkest) !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
}
.ill-cta::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15,12,32,0.5) !important;
  z-index: 0 !important;
}
.ill-cta__inner {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 22px !important;
max-width: 1000px !important;
  margin: 0 auto !important;
}
.ill-cta__title {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-3xl) !important;
  font-weight: var(--ill-fw-regular) !important;
  color: var(--ill-color-white) !important;
  line-height: 1.15 !important;
}
.ill-cta__text {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-nav) !important;
  color: rgba(255,255,255,0.85) !important;
line-height: 1.5 !important;
}
.ill-cta__btn {
  display: inline-flex !important;
  align-items: center !important;
  background-color: var(--ill-color-accent) !important;
  color: var(--ill-color-white) !important;
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-body) !important;
  font-weight: var(--ill-fw-semibold) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 17px 38px !important;
border-radius: 0 !important;
  text-decoration: none !important;
  transition: var(--ill-transition) !important;
}
.ill-cta__btn:hover {
  background-color: #c7421b !important;
  color: var(--ill-color-white) !important;
}
@media (max-width: 767px) {
  .ill-cta__title { font-size: 32px !important; }
  .ill-cta__btn { width: 100% !important; justify-content: center !important; }
}

/* ============================================
   FOOTER GLOBAL
   ============================================ */
.ill-footer {
  background-color: var(--ill-color-darkest) !important;
  width: 100% !important;
  overflow-x: hidden !important;
}
.ill-footer__map {
  width: 100% !important;
  height: 300px !important;
  overflow: hidden !important;
}
.ill-footer__map iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block !important;
  filter: grayscale(30%) contrast(1.1) !important;
}
.ill-footer__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr) !important;
gap: 48px !important;
padding: 64px 40px !important;
max-width: 1360px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
.ill-footer__col {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
.ill-footer__col-heading {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-xs) !important;
  font-weight: var(--ill-fw-semibold) !important;
  color: var(--ill-color-accent) !important;
  letter-spacing: 2px !important;
text-transform: uppercase !important;
margin-bottom: 4px !important;
}
.ill-footer__address {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-base) !important;
  color: rgba(255,255,255,0.65) !important;
line-height: 1.7 !important;
}
.ill-footer__nav-link {
  font-family: var(--ill-font-body) !important;
  font-size: 13.5px !important;
color: rgba(255,255,255,0.72) !important;
text-decoration: none !important;
transition: var(--ill-transition) !important;
}
.ill-footer__nav-link:hover {
  color: var(--ill-color-accent) !important;
}
/* 2026-07-29 — hallazgos F6 MEDIO + F10 MENOR (auditoria-mobile-20260729): 23px de alto
   (por debajo del mínimo táctil de 44px) y 13.5px de fuente (por debajo del mínimo de 15px
   pedido para móvil) — solo el ÚNICO acceso a Noticias/Sobre/Tour Virtual en móvil tras el
   fix de F3, así que conviene que sean cómodos de tocar. display:inline-block + padding
   vertical amplían el área de toque sin depender de tocar el `gap` del contenedor (que
   sigue dando aire visual entre enlaces). Solo en móvil/tablet — en desktop el footer
   aprobado por el cliente no cambia. */
@media (max-width: 991px) {
  .ill-footer__nav-link {
    font-size: 15px !important;
    display: inline-block !important;
    padding: 12px 0 !important;
  }
}
.ill-footer__dossier {
  display: inline-flex !important;
  align-items: center !important;
  background-color: var(--ill-color-accent) !important;
  color: var(--ill-color-white) !important;
  font-family: var(--ill-font-body) !important;
  font-size: 13.5px !important;
  font-weight: var(--ill-fw-semibold) !important;
  letter-spacing: 0.05em !important;
  padding: 14px 26px !important;
border-radius: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: var(--ill-transition) !important;
  margin-top: var(--ill-space-sm) !important;
}
.ill-footer__dossier:hover {
  background-color: #c7421b !important;
  color: var(--ill-color-white) !important;
}
/* 2026-07-29 — hallazgo F10 MENOR: 13.5px por debajo del mínimo de 15px pedido para móvil.
   El padding ya existente (14px 26px) deja el botón de sobra táctil, así que aquí solo hace
   falta el tamaño de fuente. Solo en móvil/tablet. */
@media (max-width: 991px) {
  .ill-footer__dossier { font-size: 15px !important; }
}
.ill-footer__bottom {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 26px 40px 40px !important;
max-width: 1360px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  /* 2026-08-31: separacion minima garantizada entre copyright y selector cuando
     el space-between deja de tener holgura (copyright largo / viewport estrecho).
     El media query de 767px de mas abajo lo baja a 8px en la version apilada. */
  gap: 24px !important;
}
.ill-footer__copyright,
.ill-footer__langs {
  font-family: var(--ill-font-body) !important;
  font-size: 12px !important;
color: rgba(255,255,255,0.45) !important;
}
.ill-footer__langs { letter-spacing: 0.05em !important; }

/* 2026-08-31 — BARRA INFERIOR DEL FOOTER: copyright izq + selector der en UNA fila.
   Bug real medido (Playwright, 1440px, los 3 idiomas): los dos hijos flex se repartian
   TODO el ancho de la barra (copyright 98,3px / selector 1181,7px = 1280px justos), asi
   que el `justify-content: space-between` no tenia holgura que distribuir y quedaba inerte:
   el copyright, aplastado a su min-content, rompia en 2 lineas, y el selector — con su texto
   alineado a la izquierda dentro de una caja de 1181px — dejaba el hueco enorme a la derecha.
   `flex-basis: auto` resolvia contra `width: auto`, que en este contexto NO da max-content;
   fijar `width: max-content` (78,2px medidos) devuelve a cada item su tamano real y el
   space-between vuelve a funcionar. Se mantiene el patron !important del bloque (defaults
   de Bricks), el padding 26/40/40 y el breakpoint de 767px. */
.ill-footer__copyright,
.ill-footer__langs {
  flex: 0 0 auto !important;
  width: max-content !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

/* Estado del idioma activo vs. inactivos. Los <span>/<a> del shortcode illa_lang_switcher
   llevan las clases .ill-header__lang-* (compartidas con el selector del header), que asignan
   `color:#fff` DIRECTAMENTE al hijo — un color heredado desde .ill-footer__langs nunca gana a
   uno asignado al propio elemento, ni con !important (misma trampa de cascada que el <span
   class="text"> del boton de Salas, 2026-07-07). Por eso hay que apuntar al hijo, y scoped a
   .ill-footer__langs para no tocar el selector del header. */
.ill-footer__langs .ill-header__lang-current {
  color: var(--ill-color-white) !important;
  font-weight: var(--ill-fw-semibold) !important;
}
.ill-footer__langs .ill-header__lang-link {
  color: rgba(255,255,255,0.45) !important;
  font-weight: var(--ill-fw-regular) !important;
}
.ill-footer__langs .ill-header__lang-link:hover,
.ill-footer__langs .ill-header__lang-link:focus-visible {
  color: var(--ill-color-white) !important;
}

/* .ill-footer__col es flex column e item del grid __inner: sin min-width:0
   no se encoge por debajo del ancho de su contenido (dirección, links, botón
   dossier), forzando el grid entero — y la página — más ancho que el viewport
   incluso ya en 2 columnas. */
.ill-footer__col { min-width: 0 !important; }
.ill-footer__address, .ill-footer__nav-link, .ill-footer__dossier,
.ill-footer__certs, .ill-footer__col-heading { max-width: 100% !important; }
@media (max-width: 767px) {
  /* minmax(0,1fr), no solo 1fr: un track "1fr" a secas sigue sin poder
     encogerse por debajo del min-content de su columna más ancha (mismo tipo
     de trampa que min-width:auto) — por eso .ill-footer__inner medía 1100px
     de ancho pese a estar ya en grid de 2 columnas, y al ser hermano flex del
     mapa dentro de .ill-footer (column, align-items:center), ese ancho
     fantasma descentraba también el mapa (lo empujaba a la derecha en vez de
     verse a ancho completo). */
  .ill-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: var(--ill-space-lg) !important;
    padding: var(--ill-space-lg) 24px !important;
  }
  .ill-footer__col--brand { grid-column: 1 / -1 !important; }
  .ill-footer__bottom { flex-direction: column !important; gap: 8px !important; }
}
@media (max-width: 480px) {
  .ill-footer__inner { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SALAS DE REUNIONES — Landing page
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── HERO ─────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════════
   SALAS DE REUNIONES — ill-sr-* (tipografía en px / var(--ill-fs-*))
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── HERO ──────────────────────────────────────────────────────────────────── */
:where(.ill-sr-hero) {
  position: relative;
  min-height: calc(100vh - 108px);
  background-size: cover !important;
  background-position: center !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}
:where(.ill-sr-hero)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(23,19,44,0.72);
  z-index: 0;
}
/* 2026-07-15: fallback para heroes .ill-sr-hero sin foto de fondo (p.ej. Index Oficinas) —
   mismo patrón que Contacto/Oficina Virtual, fondo sólido en vez de imagen */
.ill-sr-hero--solid { background-color: var(--ill-color-dark); }
/* 2026-07-22: feedback cliente — el overlay fijo de .72 (pensado para la foto real de
   Salas) tapaba casi entera la foto-render de A Mida ("bájala para que se vea como en
   Salas"). Modificador SOLO para A Mida (amdher1) — Salas (.ill-sr-hero a secas) no se
   toca. Primer intento (alpha 0.42-0.50, calculado contra la luminancia MEDIA
   muestreada de la foto) resultó insuficiente: esta foto en concreto no es uniforme
   —tiene zonas mucho más claras (pared de cristal, techo) que la media— y en esas
   zonas el contraste real bajaba a ~3:1, por debajo de AA. Corregido con dos capas:
   (1) overlay algo más alto que el primer intento (0.55-0.62, sigue siendo bastante
   más claro que el 0.72 original — la foto se ve claramente más) + (2) text-shadow
   en los propios textos del hero (ver más abajo), que da contraste garantizado
   pegado al propio glifo con independencia del brillo puntual de la foto detrás —
   más robusto que afinar un único porcentaje de overlay contra una foto no uniforme. */
.ill-sr-hero--soft-overlay::before {
  background: linear-gradient(180deg, rgba(23,19,44,0.55) 0%, rgba(23,19,44,0.62) 45%, rgba(23,19,44,0.58) 100%) !important;
}
.ill-sr-hero--soft-overlay :where(.ill-sr-hero__eyebrow),
.ill-sr-hero--soft-overlay :where(.ill-sr-hero__heading),
.ill-sr-hero--soft-overlay :where(.ill-sr-hero__text),
.ill-sr-hero--soft-overlay :where(.ill-sr-hero__closing) {
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 14px rgba(0,0,0,0.55) !important;
}
/* 2026-07-27: feedback cliente 24/07 — "texto sobre la imagen de cabecera" se veía
   pequeño vs Salas. .ill-sr-hero__text es clase COMPARTIDA con Salas (mismo tamaño
   en ambas hasta ahora) — override SOLO para A Mida vía el modificador --soft-overlay
   (único hero que lo usa), Salas queda intacto. */
.ill-sr-hero--soft-overlay .ill-sr-hero__text {
  font-size: var(--ill-fs-lg) !important;
}
:where(.ill-sr-hero__inner) {
  position: relative;
  z-index: 1;
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 80px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: var(--ill-space-md) !important;
}
:where(.ill-sr-hero__eyebrow) {
  font-size: var(--ill-fs-base) !important;
  font-family: var(--ill-font-body) !important;
  letter-spacing: 0.14em !important;
  color: var(--ill-color-accent) !important;
  text-transform: uppercase !important;
}
:where(.ill-sr-hero__heading) {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-3xl) !important;
  color: #fff !important;
  line-height: 1.12 !important;
}
:where(.ill-sr-hero__text) {
  font-size: var(--ill-fs-body) !important;
  color: rgba(255,255,255,0.82) !important;
  max-width: 580px !important;
  line-height: 1.65 !important;
}
/* 2026-07-27: feedback cliente 24/07 (A Mida) — frase de cierre de la entradilla
   ("Todo lo que necesitas para trabajar, sin inversión inicial") separada en su
   propio elemento para que quepa en UNA línea: fuera del max-width:580px del
   párrafo y con más peso (semibold, blanco pleno vs 0.82 alpha del cuerpo). */
:where(.ill-sr-hero__closing) {
  display: block !important;
  font-size: var(--ill-fs-lg) !important;
  font-weight: var(--ill-fw-semibold) !important;
  color: #fff !important;
  max-width: 700px !important;
  line-height: 1.4 !important;
  margin-top: 2px !important;
}
:where(.ill-sr-hero__btn) {
  background: var(--ill-color-accent) !important;
  color: #fff !important;
  border-radius: 3px !important;
  padding: 14px 36px !important;
  font-family: var(--ill-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin-top: var(--ill-space-xs) !important;
}
:where(.ill-sr-hero__meta) {
  /* 2026-07-15: línea de bullets bajo el botón "Reservar sala", según ILLA-CC-aprobado.pdf */
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-base) !important;
  color: rgba(255,255,255,0.75) !important;
  margin-top: var(--ill-space-sm) !important;
}
:where(.ill-sr-hero__stats) {
  display: flex !important;
  gap: 40px !important;
  margin-top: var(--ill-space-md) !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  padding-top: var(--ill-space-md) !important;
  border-top: 1px solid rgba(255,255,255,0.15) !important;
  width: 100% !important;
}
:where(.ill-sr-hero__stat) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}
:where(.ill-sr-hero__stat-num) {
  font-family: var(--ill-font-heading) !important;
  font-size: 20px !important;
  color: #fff !important;
  font-weight: 700 !important;
}
:where(.ill-sr-hero__stat-lbl) {
  font-size: var(--ill-fs-sm) !important;
  color: rgba(255,255,255,0.6) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* ─── SALAS GRID ────────────────────────────────────────────────────────────── */
:where(.ill-sr-list) {
  background: #fff !important;
  padding: 80px 0 !important;
}
:where(.ill-sr-list__inner) {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ill-space-xl) !important;
}
:where(.ill-sr-list__header) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: var(--ill-space-sm) !important;
  max-width: 700px !important;
  margin: 0 auto !important;
}
:where(.ill-sr-list__eyebrow) {
  font-size: var(--ill-fs-base) !important;
  font-family: var(--ill-font-body) !important;
  letter-spacing: 0.14em !important;
  color: var(--ill-color-accent) !important;
  text-transform: uppercase !important;
}
:where(.ill-sr-list__title) {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-xl) !important;
  color: var(--ill-color-heading) !important;
  line-height: 1.15 !important;
}
:where(.ill-sr-list__subtitle) {
  color: #555 !important;
  font-size: var(--ill-fs-body) !important;
  line-height: 1.65 !important;
}
:where(.ill-sr-list__grid) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1px !important;
  background-color: rgba(0,0,0,0.10) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
}
/* 2026-07-15: Index Oficinas tiene 4 cards, no 6 — 3 columnas dejaba un hueco vacío en la
   2ª fila (4 no es múltiplo de 3). 2 columnas = 2 filas completas de 2. */
:where(.ill-sr-list__grid--2col) { grid-template-columns: repeat(2, 1fr) !important; }
@media (max-width: 767px) {
  :where(.ill-sr-list__grid--2col) { grid-template-columns: 1fr !important; }
}
/* 2026-07-16: Oficinas pasó de 4 a 5 productos (Oficina virtual) — 2 columnas con 5 ítems
   impares deja un hueco vacío en la 2ª fila (mismo problema que ya documentó la sesión del
   07-15 al pasar de 6 a 4). En vez de una 3ª columna a medias, la 5ª card ocupa el ancho
   completo como franja horizontal — coherente con ser el único producto con página propia. */
.ill-sr-card--wide { grid-column: 1 / -1 !important; }
@media (min-width: 768px) {
  /* grid en vez de flex-row: eyebrow+título agrupados en la 1ª columna (2 filas),
     texto y botón ocupan su propia columna centrados verticalmente sobre ambas filas */
  .ill-sr-card--wide .ill-sr-card__body {
    display: grid !important;
    grid-template-columns: minmax(200px, 280px) 1fr auto !important;
    column-gap: 24px !important;
    row-gap: 2px !important;
    align-items: center !important;
  }
  .ill-sr-card--wide .ill-sr-card__eyebrow { grid-column: 1 !important; grid-row: 1 !important; }
  .ill-sr-card--wide .ill-sr-card__title { grid-column: 1 !important; grid-row: 2 !important; min-height: 0 !important; }
  .ill-sr-card--wide .ill-sr-card__text { grid-column: 2 !important; grid-row: 1 / 3 !important; flex: none !important; }
  .ill-sr-card--wide .ill-sr-card__link { grid-column: 3 !important; grid-row: 1 / 3 !important; margin-top: 0 !important; white-space: nowrap !important; }
}
:where(.ill-sr-card) {
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  overflow: hidden !important;
}
:where(.ill-sr-card__image) {
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
  display: block !important;
}
:where(.ill-sr-card__body) {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 20px 20px 24px !important;
  flex: 1 !important;
  align-items: flex-start !important;
}
:where(.ill-sr-card__eyebrow) {
  font-size: var(--ill-fs-base) !important;
  letter-spacing: 0.12em !important;
  color: var(--ill-color-accent) !important;
  text-transform: uppercase !important;
  font-family: var(--ill-font-body) !important;
}
:where(.ill-sr-card__title) {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-card) !important;
  color: var(--ill-color-heading) !important;
  line-height: 1.2 !important;
}
:where(.ill-sr-card__text) {
  font-size: 13.5px !important;
  color: #555 !important;
  line-height: 1.6 !important;
  flex: 1 !important;
}
:where(.ill-sr-card__link) {
  font-size: var(--ill-fs-base) !important;
  color: var(--ill-color-accent) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  background: none !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
  border-radius: 0 !important;
  margin-top: 4px !important;
  display: inline-block !important;
}
/* 2026-07-20: CTA secundario dentro de una card (p.ej. "Ver página completa →" en Oficina a
   medida, jerarquía hub→spoke) — mismo estilo de texto-link que el primario pero en gris
   neutro para no competir visualmente con el "Contactar →" naranja de la misma card. */
:where(.ill-sr-card__link--secondary) {
  color: var(--ill-color-text-muted) !important;
  margin-top: 0 !important;
}
:where(.ill-sr-card__link--secondary):hover {
  color: var(--ill-color-accent) !important;
}
/* 2026-07-29 — hallazgo F10 MENOR: "Contactar →" / "Ver página completa →" / "Reservar →" /
   "Descargar →" heredan var(--ill-fs-base)=13px — por debajo del mínimo de 15px pedido para
   móvil. Sin :where() para ganar por especificidad a la regla base. Solo en móvil/tablet. */
@media (max-width: 991px) {
  .ill-sr-card__link { font-size: 15px !important; }
}
/* 2026-07-16: lista de modalidades dentro de una card (p.ej. "Pases y bonos" — Pase mensual /
   Bono 5 días / Pase diario), mismo patrón visual que .ill-sr-map__list pero en claro (card blanca). */
:where(.ill-sr-card__list) {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 6px !important;
}
:where(.ill-sr-card__list-item) {
  font-size: 13px !important;
  color: #555 !important;
  padding-left: 16px !important;
  position: relative !important;
  line-height: 1.5 !important;
}
:where(.ill-sr-card__list-item)::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--ill-color-accent);
  font-size: 8px;
  top: 4px;
}
:where(.ill-sr-card--dossier) {
  /* 2026-07-15: naranja de acento según ILLA-CC-aprobado.pdf (antes era var(--ill-color-dark), navy) */
  background: var(--ill-color-accent) !important;
  justify-content: center !important;
  min-height: 200px !important;
}
:where(.ill-sr-card--dossier .ill-sr-card__body) {
  align-items: flex-start !important;
  text-align: left !important;
  justify-content: center !important;
}
:where(.ill-sr-card--dossier .ill-sr-card__eyebrow) {
  color: rgba(255,255,255,0.85) !important;
}
:where(.ill-sr-card--dossier .ill-sr-card__title) {
  color: #fff !important;
  font-size: var(--ill-fs-card) !important;
}
:where(.ill-sr-card--dossier .ill-sr-card__text) { color: rgba(255,255,255,0.7) !important; }
:where(.ill-sr-card--dossier .ill-sr-card__link--dossier) {
  /* 2026-07-15: antes era un botón sólido (pensado para tarjeta navy); en el PDF aprobado,
     con la tarjeta ya naranja, es un link de texto blanco simple, como "Reservar →" del resto */
  background: none !important;
  color: #fff !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: var(--ill-fs-base) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-top: 4px !important;
}
:where(.ill-sr-list__dossier) {
  align-self: center !important;
  background: transparent !important;
  color: var(--ill-color-accent) !important;
  border: 2px solid var(--ill-color-accent) !important;
  border-radius: 3px !important;
  padding: 12px 28px !important;
  font-size: 14px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* ─── QUÉ INCLUYE ───────────────────────────────────────────────────────────── */
:where(.ill-sr-features) {
  background: var(--ill-color-bg-alt) !important;
  padding: 80px 0 !important;
}
:where(.ill-sr-features__inner) {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ill-space-xl) !important;
  align-items: center !important;
  text-align: center !important;
}
:where(.ill-sr-features__eyebrow) {
  font-size: var(--ill-fs-base) !important;
  letter-spacing: 0.14em !important;
  color: var(--ill-color-accent) !important;
  text-transform: uppercase !important;
  font-family: var(--ill-font-body) !important;
}
:where(.ill-sr-features__title) {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-xl) !important;
  color: var(--ill-color-heading) !important;
  line-height: 1.2 !important;
}
:where(.ill-sr-features__grid) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--ill-space-lg) !important;
  width: 100% !important;
  text-align: left !important;
}
:where(.ill-sr-feature) {
  background: #fff !important;
  padding: 28px 24px !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
:where(.ill-sr-feature__title) {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-nav) !important;
  font-weight: 700 !important;
  color: var(--ill-color-heading) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  /* 2026-07-15/07-27: min-height reserva 2 líneas para que el grid quede uniforme aunque
     el título ocupe 1 o 2 líneas (la ALTURA reservada no cambia con align-items — sigue
     siendo fija — así que el arranque del párrafo de debajo, que es hermano de este
     título en un flex column, no se ve afectado por el valor de align-items). */
  line-height: 1.3 !important;
  min-height: calc(1.3em * 2) !important;
}
/* 2026-07-15: viñeta cuadrada naranja antes de cada título, según ILLA-CC-aprobado.pdf (antes no había ninguna) */
.ill-sr-feature__title::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--ill-color-accent);
  flex-shrink: 0;
  /* 2026-07-27: feedback cliente 27/07 — el punto no quedaba a la altura de la PRIMERA
     línea del título (con align-items:flex-end anterior, el punto se anclaba siempre
     al BORDE INFERIOR de la caja reservada de 2 líneas — coincidía con la última línea
     en títulos de 2 líneas, quedando muy desplazado hacia abajo respecto a la primera).
     Cambiado el contenedor a align-items:flex-start (ambos, punto y texto, arrancan
     arriba — la primera línea siempre está en el mismo sitio, ocupe el título 1 o 2
     líneas) + este margin-top para centrar visualmente el cuadrado de 9px contra la
     altura de línea real (~19px) de la primera línea, en vez de quedar pegado al
     borde superior. Verificado con medición real de bounding boxes (Playwright) en
     A Mida (Ventajas/Diferencias) y Salas (Qué incluye), títulos de 1 y 2 líneas. */
  margin-top: 5px;
}
:where(.ill-sr-feature__text) {
  font-size: 13.5px !important;
  color: #666 !important;
  line-height: 1.6 !important;
}
:where(.ill-sr-features__note) {
  background: rgba(229,80,38,0.08) !important;
  border-left: 3px solid var(--ill-color-accent) !important;
  padding: 14px 20px !important;
  text-align: left !important;
  font-size: var(--ill-fs-md) !important;
  color: var(--ill-color-heading) !important;
  width: 100% !important;
}

/* ─── PROCESO ──────────────────────────────────────────────────────────────── */
:where(.ill-sr-process) {
  background: #fff !important;
  padding: 80px 0 !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important;
}
:where(.ill-sr-process__inner) {
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ill-space-xl) !important;
  align-items: center !important;
  text-align: center !important;
}
:where(.ill-sr-process__eyebrow) {
  font-size: var(--ill-fs-base) !important;
  letter-spacing: 0.14em !important;
  color: var(--ill-color-accent) !important;
  text-transform: uppercase !important;
  font-family: var(--ill-font-body) !important;
}
:where(.ill-sr-process__title) {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-xl) !important;
  color: var(--ill-color-heading) !important;
}
:where(.ill-sr-process__grid) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--ill-space-xl) !important;
  width: 100% !important;
}
:where(.ill-sr-step) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 12px !important;
  padding: 0 16px !important;
  position: relative !important;
}
:where(.ill-sr-step:not(:last-child))::after {
  content: '';
  position: absolute;
  top: 22px;
  right: -30px;
  width: 24px;
  height: 2px;
  background: rgba(229,80,38,0.3);
}
:where(.ill-sr-step__num) {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--ill-color-accent) !important;
  color: #fff !important;
  font-family: var(--ill-font-heading) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
:where(.ill-sr-step__title) {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-nav) !important;
  font-weight: 700 !important;
  color: var(--ill-color-heading) !important;
}
:where(.ill-sr-step__text) {
  font-size: 13.5px !important;
  color: #666 !important;
  line-height: 1.65 !important;
}

/* ─── MAPA ──────────────────────────────────────────────────────────────────── */
:where(.ill-sr-map) {
  background: var(--ill-color-bg-alt) !important;
  padding: 0 !important;
  overflow: hidden !important;
}
:where(.ill-sr-map__inner) {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  min-height: 420px !important;
}
:where(.ill-sr-map__map) {
  min-height: 420px !important;
  overflow: hidden !important;
}
:where(.ill-sr-map__map iframe) {
  width: 100% !important;
  height: 100% !important;
  min-height: 420px !important;
  display: block !important;
  border: 0 !important;
}
:where(.ill-sr-map__info) {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ill-space-md) !important;
  padding: 60px 56px !important;
  justify-content: center !important;
  background: var(--ill-color-dark) !important;
}
:where(.ill-sr-map__eyebrow) {
  font-size: var(--ill-fs-base) !important;
  letter-spacing: 0.14em !important;
  color: var(--ill-color-accent) !important;
  text-transform: uppercase !important;
  font-family: var(--ill-font-body) !important;
}
:where(.ill-sr-map__title) {
  font-family: var(--ill-font-heading) !important;
  font-size: 30px !important;
  color: #fff !important;
  line-height: 1.2 !important;
}
:where(.ill-sr-map__address) {
  font-size: var(--ill-fs-body) !important;
  color: rgba(255,255,255,0.7) !important;
  line-height: 1.6 !important;
}
:where(.ill-sr-map__list) {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 4px !important;
}
:where(.ill-sr-map__item) {
  font-size: var(--ill-fs-body) !important;
  color: rgba(255,255,255,0.8) !important;
  padding-left: 18px !important;
  position: relative !important;
  line-height: 1.5 !important;
}
:where(.ill-sr-map__item)::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--ill-color-accent);
  font-size: 9px;
  top: 3px;
}

/* ─── CONTACTO ──────────────────────────────────────────────────────────────── */
:where(.ill-sr-contact) {
  background: var(--ill-color-dark) !important;
  padding: 80px 0 !important;
}
:where(.ill-sr-contact__inner) {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: grid !important;
  grid-template-columns: 1fr 1.4fr !important;
  gap: 80px !important;
  align-items: start !important;
}
:where(.ill-sr-contact__left) {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ill-space-md) !important;
}
:where(.ill-sr-contact__eyebrow) {
  font-size: var(--ill-fs-base) !important;
  letter-spacing: 0.14em !important;
  color: var(--ill-color-accent) !important;
  text-transform: uppercase !important;
  font-family: var(--ill-font-body) !important;
}
:where(.ill-sr-contact__title) {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-2xl) !important;
  color: #fff !important;
  line-height: 1.15 !important;
}
:where(.ill-sr-contact__text) {
  font-size: var(--ill-fs-body) !important;
  color: rgba(255,255,255,0.75) !important;
  line-height: 1.65 !important;
}
:where(.ill-sr-contact__phone) {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-card) !important;
  color: #fff !important;
  font-weight: 700 !important;
  margin-top: 8px !important;
}
:where(.ill-sr-contact__email) {
  font-size: var(--ill-fs-body) !important;
  color: rgba(255,255,255,0.6) !important;
}
/* Bricks form en sección oscura */
:where(.ill-sr-contact__right) {
  background: #fff !important;
  border-radius: 0 !important;
  padding: 36px 32px !important;
}
:where(.ill-sr-form .bricks-form-group),
:where(.ill-sr-form .form-group) {
  margin-bottom: 16px !important;
}
:where(.ill-sr-form label) {
  font-size: var(--ill-fs-base) !important;
  font-weight: 600 !important;
  color: var(--ill-color-heading) !important;
  display: block !important;
  margin-bottom: 5px !important;
  font-family: var(--ill-font-body) !important;
}
:where(.ill-sr-form input),
:where(.ill-sr-form textarea),
:where(.ill-sr-form select) {
  border: 1px solid #ddd !important;
  border-radius: 3px !important;
  padding: 10px 14px !important;
  font-size: var(--ill-fs-body) !important;
  width: 100% !important;
  font-family: var(--ill-font-body) !important;
  color: #333 !important;
  background: #fafafa !important;
}
:where(.ill-sr-form input:focus),
:where(.ill-sr-form textarea:focus),
:where(.ill-sr-form select:focus) {
  border-color: var(--ill-color-accent) !important;
  outline: none !important;
  background: #fff !important;
}
:where(.ill-sr-form textarea) { min-height: 100px !important; resize: vertical !important; }
:where(.ill-sr-form .submit-button-wrapper button),
:where(.ill-sr-form .bricks-form-submit) {
  background: var(--ill-color-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 14px 28px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  cursor: pointer !important;
  width: 100% !important;
  font-family: var(--ill-font-body) !important;
}

/* ─── FAQ ───────────────────────────────────────────────────────────────────── */
:where(.ill-sr-faq) {
  background: #fff !important;
  padding: 80px 0 !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important;
}
:where(.ill-sr-faq__inner) {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ill-space-xl) !important;
}
:where(.ill-sr-faq__title) {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-xl) !important;
  color: var(--ill-color-heading) !important;
  text-align: center !important;
}
:where(.ill-sr-faq__accordion .accordion-item) {
  border-bottom: 1px solid rgba(0,0,0,0.10) !important;
}
:where(.ill-sr-faq__accordion .accordion-title-wrapper) {
  padding: 18px 0 !important;
  cursor: pointer !important;
}
:where(.ill-sr-faq__accordion .accordion-title h5) {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-accordion) !important;
  font-weight: var(--ill-fw-medium) !important;
  color: var(--ill-color-heading) !important;
  line-height: 1.3 !important;
}
:where(.ill-sr-faq__accordion .accordion-content-wrapper) {
  padding: 0 0 16px !important;
  font-size: var(--ill-fs-body) !important;
  color: #555 !important;
  line-height: 1.65 !important;
}

/* Misma trampa de min-width:auto que en Home, pero repetida en CADA sección de
   esta landing (hero, listado de salas, features, proceso, contacto, FAQ):
   ningún __inner tenía width:100% explícito (solo max-width, que no fuerza a
   encogerse) y ningún texto/heading tenía max-width, así que el contenido más
   largo de cada sección forzaba esa sección — y la página entera — más ancha
   que el viewport en CUALQUIER tamaño de pantalla, no solo mobile. Confirmado
   con un barrido completo: ~50 elementos afectados en toda la página. */
.ill-sr-hero__inner, .ill-sr-features__inner, .ill-sr-process__inner, .ill-sr-faq__inner,
.ill-sr-hero__stats,
.ill-sr-list__inner, .ill-sr-list__header, .ill-sr-list__grid, .ill-sr-card, .ill-sr-card__body,
.ill-sr-features__grid, .ill-sr-feature,
.ill-sr-process__grid, .ill-sr-step,
.ill-sr-contact__inner, .ill-sr-contact__left, .ill-sr-contact__right,
.ill-sr-map__inner, .ill-sr-map__info {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ill-sr-hero__eyebrow, .ill-sr-hero__heading, .ill-sr-hero__text, .ill-sr-hero__meta,
.ill-sr-hero__stat-num, .ill-sr-hero__stat-lbl,
.ill-sr-list__eyebrow, .ill-sr-list__title, .ill-sr-list__subtitle,
.ill-sr-card__text, .ill-sr-card__title, .ill-sr-card__eyebrow,
.ill-sr-features__eyebrow, .ill-sr-features__title, .ill-sr-feature__title, .ill-sr-feature__text,
.ill-sr-process__eyebrow, .ill-sr-process__title, .ill-sr-step__title, .ill-sr-step__text,
.ill-sr-contact__eyebrow, .ill-sr-contact__title, .ill-sr-contact__text,
.ill-sr-faq__title {
  max-width: 100% !important;
}
/* ─── MOBILE SALAS ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Las reglas de escritorio equivalentes llevan !important (grid-template-columns,
     gap, min-height, padding...) — sin !important aquí, el valor de escritorio
     seguía ganando dentro del propio media query mobile y la web desbordaba
     horizontalmente en todo /salas-de-reuniones/ por debajo de 768px. */
  :where(.ill-sr-hero) { min-height: 75vh !important; }
  :where(.ill-sr-hero__heading) { font-size: 32px !important; }
  :where(.ill-sr-hero__stats) { gap: 20px !important; }
  :where(.ill-sr-list__grid) { grid-template-columns: 1fr !important; }
  :where(.ill-sr-list__title) { font-size: 28px !important; }
  :where(.ill-sr-features__grid) { grid-template-columns: 1fr !important; }
  :where(.ill-sr-features__title) { font-size: 28px !important; }
  :where(.ill-sr-process__grid) { grid-template-columns: 1fr !important; gap: var(--ill-space-lg) !important; }
  :where(.ill-sr-process__title) { font-size: 28px !important; }
  :where(.ill-sr-step:not(:last-child))::after { display: none !important; }
  :where(.ill-sr-map__inner) { grid-template-columns: 1fr !important; }
  :where(.ill-sr-map__map) { min-height: 280px !important; }
  /* Bricks core aplica .brxe-map{height:300px} por defecto (no existia con el code element anterior) y gana a nuestro min-height:280px (max(300,280)=300) — override quirurgico por ID para igualar el alto publicado antes de nativizar el mapa (2026-07-16) */
  #brxe-srlmapi1 { height: 420px !important; }
  :where(.ill-sr-map__info) { padding: 40px 24px !important; }
  :where(.ill-sr-map__title) { font-size: 24px !important; }
  :where(.ill-sr-contact__inner) { grid-template-columns: 1fr !important; gap: 40px !important; }
  :where(.ill-sr-contact__right) { padding: 28px 20px !important; }
  :where(.ill-sr-contact__title) { font-size: 32px !important; }
  :where(.ill-sr-faq__title) { font-size: 28px !important; }
  /* Trampa clásica de flex/grid: los items no se encogen por debajo del ancho
     mínimo de su contenido (min-width:auto) salvo que se les diga explícitamente,
     así que un texto largo puede forzar a su contenedor — y a toda la página —
     más ancho que el viewport aunque el grid ya esté en 1 columna. */
  .ill-sr-hero__inner, .ill-sr-list__inner, .ill-sr-hero__stat,
  .ill-sr-card, .ill-sr-card__body, .ill-sr-contact__left {
    min-width: 0 !important;
  }
}
@media (min-width: 768px) and (max-width: 1099px) {
  :where(.ill-sr-list__grid) { grid-template-columns: repeat(2, 1fr) !important; }
  :where(.ill-sr-features__grid) { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ============================================
FIX PIXEL-PERFECT HOME C — 2026-07-02
============================================ */
.ill-entorno__eyebrow { color: rgba(255,255,255,0.92) !important; }
.ill-about__text { margin-top: 40px !important; }
.ill-about__link { margin-top: 32px !important; }
.ill-about__accordion .accordion-item.brx-open .accordion-title-wrapper::after { content: '\2013' !important; }
.ill-about__accordion .accordion-content-wrapper ul { list-style: none !important; padding-left: 0 !important; margin: 0 !important; }
.ill-about__accordion .accordion-content-wrapper li { list-style: none !important; position: relative !important; padding-left: 20px !important; line-height: 1.5 !important; margin-bottom: 9px !important; }
.ill-about__accordion .accordion-content-wrapper li::before { content: '' !important; position: absolute !important; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--ill-color-accent); }
.ill-about__accordion .accordion-content-wrapper strong,
.ill-about__accordion .accordion-content-wrapper b { font-weight: var(--ill-fw-medium) !important; color: #1F1F29 !important; }
.ill-footer__logo img { width: 97px !important; height: 110px !important; object-fit: cover !important; object-position: 50% 12% !important; }
.ill-footer__address p { color: rgba(255,255,255,0.65) !important; font-size: 13px !important; line-height: 1.7 !important; }
/* 2026-07-29 — hallazgo F10 MENOR: 13px por debajo del mínimo de 15px pedido para móvil. */
@media (max-width: 991px) {
  .ill-footer__address p { font-size: 15px !important; }
}
.ill-footer__map { position: relative !important; }
.ill-footer__map-chip { position: absolute; top: 40px; left: 40px; z-index: 3; background: #fff; border-radius: 4px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; box-shadow: 0 2px 10px rgba(0,0,0,0.25); }
.ill-footer__map-chip b { font: 500 12px/1.2 var(--ill-font-body); color: #1A1A1F; }
.ill-footer__map-chip span { font: 500 10px/1.2 var(--ill-font-body); color: var(--ill-color-accent); }
.ill-footer__map-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: rgba(230,80,38,0.30); pointer-events: none; }
.ill-footer__map-pin::after { content: ''; position: absolute; inset: 13px; border-radius: 50%; background: var(--ill-color-accent); }
.ill-footer__socials { position: absolute; left: 44px; bottom: 24px; z-index: 3; display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ill-footer__socials a { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; opacity: 0.9; }
.ill-footer__socials a:hover { opacity: 1; }
/* 2026-07-29 — hallazgo F6 MEDIO (auditoria-mobile-20260729): 26×26px, por debajo del
   mínimo táctil de 44px. Se amplía solo el ÁREA DE TOQUE (el <a>) en móvil/tablet — el
   icono visual sigue midiendo 22px (.icon, ver más abajo), centrado dentro de la caja
   ahora más grande, así que no cambia nada visualmente salvo el hueco de separación. */
@media (max-width: 991px) {
  .ill-footer__socials a { width: 44px; height: 44px; }
  .ill-footer__socials { gap: 2px; }
}
/* 2026-07-16: elemento nativo Bricks "social-icons" — el label de cada icono (accesible,
   viene del campo "label" del repeater) se oculta visualmente sin quitarlo del DOM */
.ill-footer__socials span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
/* 2026-07-16: el color sí llega vía settings nativos (iconColor → Bricks genera
   #brxe-illftsocial1 .icon{color:#fff} automáticamente), pero el setting nativo
   iconSize no generó CSS — tamaño puramente visual, se queda aquí como fallback */
.ill-footer__socials .icon { font-size: 22px; }
/* 2026-07-21: feedback cliente 21/07 — "siguen demasiado pequeños (no se lee el texto
   interno) y sin contexto". illfcert1 sale de illfrow1 (que ahora solo lleva el botón
   dossier) y pasa a vivir en su propio bloque illfcertblk1 (rótulo + fila de sellos),
   hermano de illfrow1 dentro de la columna de marca — así queda alineado a la izquierda
   con el logo/dirección (ya no "empujado a la derecha junto al botón" como en la ronda
   anterior). Tamaño subido de 52 a 96px: BREEAM (176×148 nativo) es el más pequeño de
   los 3 y sigue nítido a 96px (su techo real ronda ~130px antes de notarse suavizado);
   WELL (525×519) y Huella de carbono (420×420) sobran de resolución. 3er sello (Huella
   de carbono, attachment 152, ya usado en /servicios/) incluido — antes solo había 2. */
.ill-footer__certs-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-top: 22px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.ill-footer__certs-label {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-xs) !important;
  font-weight: var(--ill-fw-semibold) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--ill-color-accent) !important;
  max-width: 100% !important;
}
.ill-footer__certs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 28px !important;
  align-items: center !important;
  margin: 0 !important;
}
.ill-footer__certs img {
  height: 96px !important;
  width: auto !important;
  filter: brightness(0) invert(1) !important;
}
@media (max-width: 767px) {
  .ill-footer__certs-block { align-items: center !important; margin-top: var(--ill-space-md) !important; }
  .ill-footer__certs { justify-content: center !important; gap: 22px !important; }
  .ill-footer__certs img { height: 64px !important; }
}
.ill-footer__dossier-row { width: 100%; margin-top: 16px; }
@media (max-width: 480px) {
  .ill-footer__dossier-row { justify-content: flex-start !important; }
}
@media (max-width: 991px) {
.ill-header__logo img { height: 42px !important; margin: 0 !important; }
}

/* centrado cabecera portfolio (Bricks fuerza flex-start en el container) */
.ill-portfolio__inner { align-items: center !important; }
.ill-portfolio__grid { width: 100% !important; }
.ill-portfolio__header { max-width: 900px !important; }

/* === MEGA MENU === */
.ill-mega {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: #EBEBEB; border-top: 2px solid var(--ill-color-accent); box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  z-index: 9998;
  opacity: 0; visibility: hidden;
  transition: opacity 0.15s ease, visibility 0s linear 0.3s;
}
.ill-mega__inner { max-width: 1360px; margin: 0 auto; padding: 56px 40px 64px; display: grid; gap: 28px 28px; }
/* 2026-07-16: 5 productos reales por clúster (Salas: 5 salas; Oficinas: 5 productos) — grid de
   4 columnas fijo, el 5º ítem hace wrap automático a una 2ª fila con las mismas proporciones
   (misma card, misma imagen, mismo tamaño), en vez del banner suelto "sin imagen" de antes. */
.ill-mega--salas .ill-mega__inner,
.ill-mega--oficinas .ill-mega__inner { grid-template-columns: repeat(4, 1fr); row-gap: 40px; }
.ill-mega__card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.ill-mega__card img { width: 100%; aspect-ratio: 300/130; object-fit: cover; border-radius: 2px; display: block; }
.ill-mega__card h4 {
  font-family: var(--ill-font-heading); font-size: 20px; font-weight: 400; color: #1F212E; line-height: 1.2; margin: 0;
  /* 2026-07-15: min-height de 2 líneas + anclado abajo para que la descripción arranque
     en la misma línea base tanto si el título ocupa 1 línea (Hot Desk) como 2 (Oficina a medida) */
  min-height: calc(1.2em * 2);
  display: flex;
  align-items: flex-end;
}
/* 2026-07-15: Bricks renderiza el elemento "text-basic" como <div class="brxe-text-basic">,
   nunca como <p> — el selector .ill-mega__card p no matcheaba nunca y el texto heredaba
   el color naranja de acento del <a> ill-mega__card ancestro (:where(a){color:accent}) */
.ill-mega__card p,
.ill-mega__card .brxe-text-basic { font-family: var(--ill-font-body); font-size: 12.5px; line-height: 1.45; color: #737885; margin: 0; }
.ill-mega__card:hover h4 { color: var(--ill-color-accent); }
/* Apertura por hover (CSS :has). display:block fijo arriba — la visibilidad la
   controla opacity/visibility, no display, precisamente para poder retrasar el
   CIERRE (transition-delay 0.3s en visibility): si el ratón cruza en diagonal
   hacia una card lejana y pasa un instante por una zona sin :hover, el panel
   no se esconde de golpe — queda un margen de 300ms, invisible pero todavía
   "hoverable" (visibility:hidden es lo único que de verdad bloquea el hover;
   no hace falta pointer-events — probado que su transition-delay no se respeta
   igual que el de visibility y el panel quedaba inerte antes de tiempo).
   La apertura es instantánea (transition-delay:0). */
.ill-header:has(li.menu-item-23:hover) .ill-mega--oficinas,
.ill-header:has(li.menu-item-24:hover) .ill-mega--salas,
.ill-mega:hover {
  opacity: 1; visibility: visible;
  transition: opacity 0.12s ease, visibility 0s linear 0s;
}
/* Item activo: link blanco 100% + subrayado coral 2px */
li.menu-item-23, li.menu-item-24 { position: relative; }
.ill-header:has(.ill-mega--oficinas:hover) li.menu-item-23 > a,
li.menu-item-23:hover > a, li.menu-item-24:hover > a { color: #fff !important; }
li.menu-item-23:hover > a::after, li.menu-item-24:hover > a::after { content:''; position:absolute; left:0; right:0; bottom:-8px; height:2px; background: var(--ill-color-accent); }
/* Backdrop oscuro sobre la página (Figma: rgba(15,12,32,0.55)). Mismo esquema
   opacity/visibility con retardo que el panel (ver arriba), para que no
   parpadee suelto durante el margen de gracia del cierre. */
.ill-header::after {
  content:''; position: fixed; inset: 0; background: rgba(15,12,32,0.55); z-index: 9997;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.15s ease, visibility 0s linear 0.3s;
}
.ill-header:has(li.menu-item-23:hover)::after,
.ill-header:has(li.menu-item-24:hover)::after,
.ill-header:has(.ill-mega:hover)::after {
  opacity: 1; visibility: visible;
  transition: opacity 0.12s ease, visibility 0s linear 0s;
}
@media (max-width: 991px) { .ill-mega { display: none !important; } .ill-header::after { display: none !important; } }

/* 2026-07-16: anclas del clúster Salas (/salas-de-reuniones/#sala) y Oficinas (/oficinas/#producto),
   destino de los ítems del mega-menú. scroll-margin-top = altura máxima real del header sticky
   (topbar 40px + nav 82px = 122px sin scroll; el nav scrolled son solo 60px, pero se usa el valor
   sin-scroll por ser el caso más desfavorable) + 24px de aire, para que el título de la sección
   quede siempre visible bajo el header, nunca tapado. En mobile no hay topbar (header fijo 64px). */
/* 2026-09-01 (B3): la lista de 10 IDs anterior solo cubria los destinos del mega-menu de
   julio. Las otras 9 anclas del sitio (#tour, #about, #mapa, #soluciones, #salas,
   #planos-interactivos, #contacto-salas, #ov-contacto, #amd-contacto) tenian
   scroll-margin-top:0 y aterrizaban TAPADAS por el header fijo (medido: rect.top ~ -60px).
   scroll-padding-top en el contenedor de scroll aplica a TODAS las anclas, presentes y
   futuras, incluidas las del footer global y las que viven dentro de elementos code, sin
   mantener listas de IDs. Se conservan los mismos valores 146/88 ya usados, asi que los 10
   anclas del mega-menu que ya funcionaban no cambian de aterrizaje.
   (Probado 84px = 60 de header + 24 de aire: NO basta, quedan gap -38 por un reajuste
   tardio de layout de ~62px en desktop, iframe del mapa + swap de webfonts.) */
html { scroll-behavior: smooth; scroll-padding-top: 146px; }
@media (max-width: 991px) {
  html { scroll-padding-top: 88px; }
}

/* Botón "Solicitar disponibilidad" (form landing salas): el texto real vive en un
   <span class="text"> dentro del botón; :where(span) en style.css le asigna color
   directo (gris), y un color heredado del botón nunca gana a uno asignado directo
   al propio span, así que hay que apuntar al span explícitamente, no solo al botón. */
.ill-sr-form .bricks-form-submit, .ill-sr-form .submit-button-wrapper button, .ill-sr-form button[type="submit"], .ill-sr-form .bricks-form-submit *,
.ill-sr-form button[type="submit"] .text { color: #fff !important; }
.ill-sr-form button[type="submit"] { transition: var(--ill-transition) !important; }
.ill-sr-form button[type="submit"]:hover { background: #c7421b !important; }
.ill-sr-form button[type="submit"]:hover .text { color: #fff !important; }

/* ============================================
   BLOG — SINGLE POST (.ill-post__*)
   Hero reutiliza .ill-hero (ver arriba) con dynamic data:
   fondo = {featured_image}, eyebrow = {post_date}, heading = {post_title}
   ============================================ */
.ill-post__section {
  padding: var(--ill-space-3xl) 0 !important;
  background-color: var(--ill-color-bg) !important;
}
.ill-post__body {
  max-width: 760px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: 0 var(--ill-space-md) !important;
}
.ill-post__content {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
}
.ill-post__content :where(p) {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-body) !important;
  color: var(--ill-color-text) !important;
  line-height: 1.7 !important;
  margin: 0 0 var(--ill-space-md) !important;
  max-width: 100% !important;
}
.ill-post__content :where(h2) {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-card) !important;
  font-weight: var(--ill-fw-medium) !important;
  color: var(--ill-color-heading) !important;
  line-height: 1.3 !important;
  margin: var(--ill-space-lg) 0 var(--ill-space-sm) !important;
  max-width: 100% !important;
}
.ill-post__content :where(h3) {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-lg) !important;
  font-weight: var(--ill-fw-medium) !important;
  color: var(--ill-color-heading) !important;
  line-height: 1.35 !important;
  margin: var(--ill-space-md) 0 var(--ill-space-xs) !important;
  max-width: 100% !important;
}
.ill-post__content :where(ul, ol) {
  color: var(--ill-color-text) !important;
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-body) !important;
  line-height: 1.7 !important;
  margin: 0 0 var(--ill-space-md) !important;
  padding-left: var(--ill-space-md) !important;
  max-width: 100% !important;
}
.ill-post__content :where(a) {
  color: var(--ill-color-accent) !important;
  text-decoration: underline !important;
}
.ill-post__content :where(strong, b) {
  color: var(--ill-color-heading) !important;
  font-weight: var(--ill-fw-semibold) !important;
}
.ill-post__content :where(blockquote) {
  border-left: 3px solid var(--ill-color-accent) !important;
  padding: var(--ill-space-xs) 0 var(--ill-space-xs) var(--ill-space-md) !important;
  margin: 0 0 var(--ill-space-md) !important;
  color: var(--ill-color-text-muted) !important;
  font-style: italic !important;
  max-width: 100% !important;
}
.ill-post__content :where(img) {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  margin: var(--ill-space-md) 0 !important;
}
@media (max-width: 767px) {
  .ill-post__section { padding: var(--ill-space-xl) 0 !important; }
  .ill-post__body { padding: 0 var(--ill-space-sm) !important; }
}

/* ============================================
   BLOG — NOTICIAS ARCHIVE (.ill-noticias__*)
   Hero reutiliza .ill-hero (kicker "Blog" + heading "Novedades y actualidad")
   Grid = query loop nativo de Bricks (hasLoop + query en .ill-noticias__card,
   ver nota en build script — el elemento hasLoop repite TODO el elemento
   sobre el que está declarado, no solo sus hijos, así que hasLoop vive en la
   card, no en el wrapper .ill-noticias__grid)
   ============================================ */
.ill-noticias__section {
  padding: var(--ill-space-3xl) 0 !important;
  background-color: var(--ill-color-bg) !important;
}
.ill-noticias__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--ill-space-md) !important;
  max-width: 1360px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
}
.ill-noticias__card {
  display: flex !important;
  flex-direction: column !important;
  background-color: #fff !important;
  border: 1px solid #DBDBD6 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  text-decoration: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  transition: background-color 0.2s ease !important;
}
.ill-noticias__card:hover {
  background-color: #fafafa !important;
}
.ill-noticias__card-img {
  /* Bricks renderiza el elemento imagen como <img> directo (sin wrapper) cuando
     no es un enlace propio -- las reglas anteriores apuntaban a un <img> anidado
     que no existe, asi que object-fit:cover nunca se aplicaba de verdad y el
     navegador caia en el default fill (deforma). Todo va ahora sobre el propio
     <img>. Bug reportado por Oriol 2026-07-16, verificado en el DOM real. */
  aspect-ratio: 426/232 !important;
  width: 100% !important;
  height: auto !important;
  overflow: hidden !important;
  background-color: var(--ill-color-bg-alt) !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}
.ill-noticias__card:hover .ill-noticias__card-img {
  transform: scale(1.04) !important;
}
.ill-noticias__card-title {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-card) !important;
  font-weight: var(--ill-fw-medium) !important;
  color: var(--ill-color-dark) !important;
  line-height: 1.25 !important;
  padding: var(--ill-space-md) var(--ill-space-md) 0 !important;
  max-width: 100% !important;
}
.ill-noticias__card-excerpt {
  font-family: var(--ill-font-body) !important;
  font-size: 13.5px !important;
  color: var(--ill-color-card-text) !important;
  line-height: 1.48 !important;
  padding: 10px var(--ill-space-md) 0 !important;
  max-width: 100% !important;
}
@media (max-width: 767px) {
  .ill-noticias__section { padding: var(--ill-space-xl) 0 !important; }
  .ill-noticias__grid { grid-template-columns: 1fr !important; padding: 0 var(--ill-space-sm) !important; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .ill-noticias__grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Grid simétrico (2026-07-16): cards de una fila con altura idéntica.
   El mecanismo real es que CADA pieza (imagen, título, excerpt) tiene ya
   una altura fija/clamped — así que todas las cards miden lo mismo de forma
   natural, sin depender de trucos de stretch. align-items:stretch + height:100%
   se añaden igualmente como red de seguridad explícita. ── */
.ill-noticias__grid {
  align-items: stretch !important;
}
.ill-noticias__card {
  height: 100% !important;
}
.ill-noticias__card-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.5em !important; /* 2 líneas a line-height 1.25 */
}
.ill-noticias__card-excerpt {
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 5.92em !important; /* 4 líneas a line-height 1.48 */
}
.ill-noticias__card-more {
  font-family: var(--ill-font-body) !important;
  font-size: 12.5px !important;
  font-weight: var(--ill-fw-semibold) !important;
  color: var(--ill-color-accent) !important;
  letter-spacing: 0.02em !important;
  padding: 8px var(--ill-space-md) var(--ill-space-lg) !important;
  max-width: 100% !important;
}

/* ── Cabecera compacta de Noticias (2026-07-16, petición directa del cliente):
   modificador .ill-hero--compact SOLO afecta a Noticias — .ill-hero base
   (Home, Servicios, Contacto, Entorno, Oficina Virtual, Gracias...) intacto. ── */
.ill-hero--compact {
  min-height: 0 !important;
}
.ill-hero--compact .ill-hero__inner {
  padding: 26px var(--brxw-section-space-horizontal, 1.5rem) 20px !important;
  gap: 6px !important;
}
.ill-hero--compact .ill-hero__eyebrow {
  font-size: 11px !important;
  letter-spacing: 3px !important;
}
.ill-hero--compact .ill-hero__heading {
  font-size: 22px !important;
  line-height: 1.2 !important;
}
.ill-hero__breadcrumb {
  order: -1 !important;
  font-family: var(--ill-font-body) !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.6) !important;
}
.ill-hero__breadcrumb nav,
.ill-hero__breadcrumb p {
  margin: 0 !important;
}
.ill-hero__breadcrumb a {
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important;
}
.ill-hero__breadcrumb a:hover {
  text-decoration: underline !important;
}
.ill-hero__breadcrumb .last {
  color: rgba(255,255,255,0.55) !important;
}
.ill-hero__breadcrumb .separator {
  margin: 0 6px !important;
  color: rgba(255,255,255,0.4) !important;
}
@media (max-width: 767px) {
  .ill-hero--compact { min-height: 0 !important; }
  .ill-hero--compact .ill-hero__inner { padding: 20px var(--ill-space-sm) 16px !important; }
  .ill-hero--compact .ill-hero__heading { font-size: 19px !important; }
}

/* ── Cabecera clara de Noticias (2026-07-20, feedback cliente 18/07):
   "la franja azul oscuro se funde con el menú azul" — .ill-hero--light sustituye el
   navy (var(--ill-color-dark)) por el gris del design system (var(--ill-color-bg-alt))
   con textos en navy. SOLO Noticias (nthro1) — sin foto de fondo, por eso navy-sobre-gris
   funciona ahí sin overlay. Single-Post (sghro1) SIEMPRE tiene foto real de fondo
   ({featured_image}) y usaba este mismo modificador hasta el 2026-07-21: navy sobre una
   foto arbitraria es ilegible según el brillo de cada foto — ver .ill-hero--photo-scrim
   más abajo, que sustituye a --light en sghro1. .ill-hero base (Home, Servicios, Contacto,
   Entorno, Oficina Virtual, Gracias...) intacto. Altura compacta de Noticias
   (.ill-hero--compact) sin tocar — ambos modificadores conviven. */
.ill-hero--light {
  background-color: var(--ill-color-bg-alt) !important;
}
.ill-hero--light::before {
  background: none !important;
}
.ill-hero--light .ill-hero__eyebrow {
  color: var(--ill-color-dark) !important;
}
.ill-hero--light .ill-hero__heading {
  color: var(--ill-color-dark) !important;
}
.ill-hero--light .ill-hero__breadcrumb {
  color: rgba(23,20,45,0.6) !important;
}
.ill-hero--light .ill-hero__breadcrumb a {
  color: rgba(23,20,45,0.85) !important;
}
.ill-hero--light .ill-hero__breadcrumb .last {
  color: rgba(23,20,45,0.55) !important;
}
.ill-hero--light .ill-hero__breadcrumb .separator {
  color: rgba(23,20,45,0.4) !important;
}

/* ── Overlay reforzado para heroes CON foto de fondo real (2026-07-21, feedback cliente
   21/07): el título de los posts individuales se perdía sobre la imagen (texto navy de
   --light, sin overlay, directamente sobre una foto arbitraria). Fix: overlay oscuro fijo
   con alpha ≥0.83 en todos sus stops — calculado para garantizar ≥4.5:1 de contraste con
   texto blanco incluso en el peor caso (foto casi blanca, luminancia ~0.9): con alpha 0.83,
   luminancia efectiva ≈0.17 → contraste ≈4.7:1. Con foto más media (interior típico) el
   margen es aún mayor. También reduce el alto del hero de ~100vh a uno moderado tipo
   editorial: las fotos reales rehosteadas de este proyecto rondan 700-1000px de ancho
   nativo (fuente de origen, no reescalables sin nueva foto) y estirarlas casi a pantalla
   completa acentuaba el aspecto borroso/pixelado — un hero más contenido reduce ese
   estiramiento y además el propio overlay oscuro (necesario para el contraste) enmascara
   gran parte de la suavidad restante. */
.ill-hero--photo-scrim {
  min-height: 460px !important;
}
.ill-hero--photo-scrim::before {
  background: linear-gradient(180deg, rgba(15,12,32,0.83) 0%, rgba(15,12,32,0.88) 45%, rgba(15,12,32,0.85) 100%) !important;
}
@media (max-width: 767px) {
  .ill-hero--photo-scrim { min-height: 320px !important; }
}

/* 2026-07-27: feedback cliente 27/07 — overlay de Servicios (0.83-0.88, calibrado
   para el peor caso de foto-de-blog casi blanca) "apenas deja ver la foto". Modificador
   propio SOLO para Servicios (sv0001) en vez de tocar .ill-hero--photo-scrim compartido
   con Single-Post (sghro1) — las fotos de blog son de origen variable/baja resolución
   y necesitan ese overlay oscuro para garantizar contraste; la foto de Servicios es
   profesional y de luminancia media-baja (medida: avg 0.41, p90 0.62), admite un
   overlay más claro. Mismo criterio que el hero de A Mida (.ill-sr-hero--soft-overlay):
   overlay más ligero (0.55-0.62, igual que A Mida) + text-shadow en los textos para
   garantizar legibilidad con independencia del brillo puntual de la foto detrás. */
.ill-hero--photo-scrim-soft::before {
  background: linear-gradient(180deg, rgba(15,12,32,0.55) 0%, rgba(15,12,32,0.62) 45%, rgba(15,12,32,0.58) 100%) !important;
}
.ill-hero--photo-scrim-soft :where(.ill-hero__eyebrow),
.ill-hero--photo-scrim-soft :where(.ill-hero__heading),
.ill-hero--photo-scrim-soft :where(.ill-hero__body) {
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 14px rgba(0,0,0,0.55) !important;
}

/* 2026-07-27: feedback cliente 27/07 (Oficina Virtual, punto 4b) — "unifica los
   textos de la cabecera a la izquierda". Modificador propio, SOLO para el hero de
   Oficina Virtual (ovhro1) — .ill-hero base (Home/Contacto/Entorno/Gracias...) y
   .ill-hero__inner siguen centrados, sin tocar. */
.ill-hero--left .ill-hero__inner {
  align-items: flex-start !important;
  text-align: left !important;
}
.ill-hero--left .ill-hero__heading,
.ill-hero--left .ill-hero__eyebrow,
.ill-hero--left .ill-hero__body {
  text-align: left !important;
}

/* ============================================
   GRACIAS — página de confirmación (.ill-gracias__*)
   Hero reutiliza .ill-hero (sin imagen en fuente -> fondo
   sólido var(--ill-color-dark) vía fallback ya existente en .ill-hero)
   Termina reutilizando .ill-cta global.
   ============================================ */
.ill-gracias__content {
  padding: var(--ill-space-3xl) 0 !important;
  background-color: var(--ill-color-bg) !important;
  display: flex !important;
  justify-content: center !important;
}
.ill-gracias__inner {
  max-width: 640px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: 0 var(--ill-space-md) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: var(--ill-space-md) !important;
}
.ill-gracias__text {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-lg) !important;
  color: var(--ill-color-text) !important;
  line-height: 1.6 !important;
  max-width: 100% !important;
}
.ill-gracias__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--ill-color-accent) !important;
  color: var(--ill-color-white) !important;
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-body) !important;
  font-weight: var(--ill-fw-semibold) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 17px 38px !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  transition: var(--ill-transition) !important;
  margin-top: var(--ill-space-sm) !important;
  max-width: 100% !important;
}
.ill-gracias__btn:hover {
  background-color: #c7421b !important;
  color: var(--ill-color-white) !important;
}
@media (max-width: 767px) {
  .ill-gracias__content { padding: var(--ill-space-xl) 0 !important; }
  .ill-gracias__inner { padding: 0 var(--ill-space-sm) !important; min-width: 0 !important; }
  .ill-gracias__text { font-size: var(--ill-fs-body) !important; }
  .ill-gracias__btn { width: 100% !important; }
}

/* ============================================
   PÁGINA — ENTORNO (/entorno/)
   ============================================ */
.ill-envpg__intro {
  padding: var(--ill-space-3xl) 0 !important;
  background-color: var(--ill-color-bg) !important;
}
.ill-envpg__intro-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 480px) 1fr !important;
  gap: 80px !important;
  align-items: center !important;
  max-width: 1360px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 40px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
.ill-envpg__intro-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.ill-envpg__intro-eyebrow {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-base) !important;
  font-weight: var(--ill-fw-semibold) !important;
  color: var(--ill-color-accent) !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  max-width: 100% !important;
}
.ill-envpg__intro-heading {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-xl) !important;
  font-weight: var(--ill-fw-regular) !important;
  color: var(--ill-color-heading) !important;
  line-height: 1.2 !important;
  max-width: 100% !important;
}
.ill-envpg__intro-body {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-body) !important;
  color: var(--ill-color-text) !important;
  line-height: 1.6 !important;
  max-width: 100% !important;
}
.ill-envpg__intro-image {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  aspect-ratio: 4/3 !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}
@media (max-width: 767px) {
  .ill-envpg__intro { padding: var(--ill-space-xl) 0 !important; }
  .ill-envpg__intro-inner { grid-template-columns: 1fr !important; gap: var(--ill-space-lg) !important; padding: 0 var(--ill-space-sm) !important; }
  .ill-envpg__intro-heading { font-size: 32px !important; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .ill-envpg__intro-inner { grid-template-columns: 1fr !important; gap: var(--ill-space-lg) !important; }
}

.ill-envpg__features {
  padding: var(--ill-space-3xl) 0 !important;
  background-color: var(--ill-color-bg-alt) !important;
}
.ill-envpg__features-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ill-space-3xl) !important;
  max-width: 1360px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 40px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
.ill-envpg__feature {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 64px !important;
  align-items: center !important;
  min-width: 0 !important;
  width: 100% !important;
}
.ill-envpg__feature--reverse .ill-envpg__feature-media {
  order: 2 !important;
}
.ill-envpg__feature--reverse .ill-envpg__feature-content {
  order: 1 !important;
}
.ill-envpg__feature-media {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  aspect-ratio: 4/3 !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}
.ill-envpg__feature-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.ill-envpg__feature-heading {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-card) !important;
  font-weight: var(--ill-fw-medium) !important;
  color: var(--ill-color-heading) !important;
  line-height: 1.25 !important;
  max-width: 100% !important;
}
.ill-envpg__feature-text {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-body) !important;
  color: var(--ill-color-text) !important;
  line-height: 1.6 !important;
  max-width: 100% !important;
}
@media (max-width: 767px) {
  .ill-envpg__features { padding: var(--ill-space-xl) 0 !important; }
  .ill-envpg__features-inner { padding: 0 var(--ill-space-sm) !important; gap: var(--ill-space-xl) !important; }
  .ill-envpg__feature { grid-template-columns: 1fr !important; gap: var(--ill-space-sm) !important; }
  .ill-envpg__feature--reverse .ill-envpg__feature-media { order: initial !important; }
  .ill-envpg__feature--reverse .ill-envpg__feature-content { order: initial !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SERVICIOS — Página /servicios/ (ill-servicios__*)
   Hero + CTA reutilizan .ill-hero / .ill-cta globales (sin CSS nuevo aquí)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── Header de sección compartido (eyebrow + title [+ lead]) ────────────────── */
.ill-servicios__header,
.ill-servicios__certs-header {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ill-space-sm) !important;
  max-width: 760px !important;
  min-width: 0 !important;
  width: 100% !important;
}
.ill-servicios__eyebrow {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-base) !important;
  font-weight: var(--ill-fw-semibold) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ill-color-accent) !important;
  max-width: 100% !important;
}
.ill-servicios__title {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-xl) !important;
  font-weight: var(--ill-fw-regular) !important;
  color: var(--ill-color-heading) !important;
  line-height: 1.2 !important;
  max-width: 100% !important;
}
.ill-servicios__lead {
  font-family: var(--ill-font-body) !important;
  /* 2026-09-01: feedback 01/09 punto B4 — unificar TAMANO con el resto de secciones
     del sitio (.ill-sr-*). Solo el tamano; el font-weight medium (500) del 27-07,
     pedido por el cliente por 'tipografia demasiado light', se conserva. */
  font-size: var(--ill-fs-body) !important;   /* era --ill-fs-lg (18px) -> 15px, = .ill-sr-list__subtitle */
  color: var(--ill-color-text) !important;
  line-height: 1.6 !important;
  max-width: 100% !important;
  /* 2026-07-27: feedback cliente 24/07 — "tipografía demasiado light vs la web
     actual". Override de SECCIÓN, no se toca --ill-fw-regular (global, usado por
     todos los H2/lead del sitio). Un punto por encima del regular por defecto. */
  font-weight: var(--ill-fw-medium) !important;
}

/* ─── Inner containers (trampa min-width:auto — aplicado a TODOS de entrada) ── */
.ill-servicios__spaces-inner,
.ill-servicios__amenities-inner,
.ill-servicios__certs-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ill-space-xl) !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ─── SECCIÓN A — Variedad de espacios colaborativos ──────────────────────────── */
.ill-servicios__spaces {
  background: var(--ill-color-bg) !important;
  padding: var(--ill-space-3xl) 0 !important;
}
/* 2026-07-21: feedback cliente 21/07 — "me gusta más lo que tenemos actualmente":
   clonada la sección real de producción (lillacoworking.com/servicios/), que NO es un
   grid de cards sino 7 franjas alternadas (foto real a un lado, icono+título+texto al
   otro, zigzag). Sustituye el .ill-servicios__grid/__item de card-grid (sin fotos) por
   este mismo patrón ya usado y aprobado en /entorno/ (.ill-envpg__feature), con clases
   propias para no acoplar ambas páginas. De paso corregido un bug de contenido real de
   la migración: el párrafo de "Zona con mini-golf" vivía por error en el lead de sección
   (sv0010) y el item 1 se había quedado sin su propio texto — restaurado cada uno en su
   sitio con el texto real de producción. */
.ill-servicios__features-list {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ill-space-3xl) !important;
  width: 100% !important;
  min-width: 0 !important;
}
.ill-servicios__feature {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 56px !important;
  align-items: center !important;
  min-width: 0 !important;
  width: 100% !important;
}
.ill-servicios__feature--reverse .ill-servicios__feature-media {
  order: 2 !important;
}
.ill-servicios__feature--reverse .ill-servicios__feature-content {
  order: 1 !important;
}
.ill-servicios__feature-media {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}
.ill-servicios__feature-content {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ill-space-xs) !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.ill-servicios__feature-icon {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  object-position: left center !important;
  margin-bottom: 4px !important;
}
.ill-servicios__feature-title {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-nav) !important;   /* 2026-09-01 B4: era --ill-fs-lg (18px) -> 16px, = .ill-sr-feature__title */
  /* 2026-07-27: feedback cliente 24/07 — override de sección, --ill-fw-regular (global,
     compartido por todos los H2 del sitio) no se toca. Un punto por encima: regular→medium. */
  font-weight: var(--ill-fw-medium) !important;
  color: var(--ill-color-heading) !important;
  max-width: 100% !important;
}
.ill-servicios__feature-text {
  font-family: var(--ill-font-body) !important;
  font-size: 13.5px !important;   /* 2026-09-01 B4: era --ill-fs-md (14px) -> 13.5px, = .ill-sr-feature__text */
  color: var(--ill-color-text) !important;
  line-height: 1.6 !important;
  max-width: 100% !important;
  font-weight: var(--ill-fw-medium) !important;
}
@media (max-width: 767px) {
  .ill-servicios__feature {
    grid-template-columns: 1fr !important;
    gap: var(--ill-space-sm) !important;
  }
  .ill-servicios__feature--reverse .ill-servicios__feature-media,
  .ill-servicios__feature--reverse .ill-servicios__feature-content {
    order: initial !important;
  }
  .ill-servicios__features-list { gap: var(--ill-space-xl) !important; }
}

/* ─── SECCIÓN B — Otros servicios (amenities) ─────────────────────────────────── */
.ill-servicios__amenities {
  background: var(--ill-color-bg-alt) !important;
  padding: var(--ill-space-3xl) 0 !important;
}
.ill-servicios__tags {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--ill-space-sm) !important;
  width: 100% !important;
  min-width: 0 !important;
}
.ill-servicios__tag {
  background: var(--ill-color-bg) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 0 !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* 2026-07-20: feedback cliente 18/07 — icono real de producción (icon-wifi.svg, icon-cam.svg...)
   sustituye el punto naranja genérico que había en su lugar. */
.ill-servicios__tag-icon {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}
.ill-servicios__tag-text {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-md) !important;
  color: var(--ill-color-heading) !important;
  font-weight: var(--ill-fw-medium) !important;
  max-width: 100% !important;
}

/* ─── SECCIÓN C — Certificados + Dossier comercial ────────────────────────────── */
.ill-servicios__certs {
  background: var(--ill-color-bg) !important;
  padding: var(--ill-space-3xl) 0 !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important;
}
.ill-servicios__certs-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  align-items: stretch !important;
  gap: var(--ill-space-lg) !important;
  width: 100% !important;
  min-width: 0 !important;
}
.ill-servicios__cert {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: var(--ill-space-xs) !important;
  padding: 36px 28px !important;
  background: var(--ill-color-dark) !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}
.ill-servicios__cert-logo {
  height: 60px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}
.ill-servicios__cert-title {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-md) !important;
  font-weight: var(--ill-fw-semibold) !important;
  color: var(--ill-color-white) !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.ill-servicios__cert-desc {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-base) !important;
  font-weight: var(--ill-fw-regular) !important;
  color: #C9CDD6 !important;
  line-height: 1.5 !important;
  max-width: 100% !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 3em !important;
}

.ill-servicios__dossier {
  margin-top: var(--ill-space-sm) !important;
  padding: var(--ill-space-lg) !important;
  background: var(--ill-color-dark) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ill-space-sm) !important;
  align-items: flex-start !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ill-servicios__dossier-title {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-xl) !important;
  font-weight: var(--ill-fw-regular) !important;
  color: var(--ill-color-white) !important;
  max-width: 100% !important;
}
.ill-servicios__dossier-text {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-body) !important;
  color: rgba(255,255,255,0.85) !important;
  line-height: 1.6 !important;
  max-width: 100% !important;
}
.ill-servicios__dossier-btn {
  display: inline-flex !important;
  align-items: center !important;
  background-color: var(--ill-color-accent) !important;
  color: var(--ill-color-white) !important;
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-md) !important;
  font-weight: var(--ill-fw-semibold) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  border-radius: 3px !important;
  text-decoration: none !important;
  transition: var(--ill-transition) !important;
}
.ill-servicios__dossier-btn:hover {
  background-color: #c7421b !important;
}
.ill-servicios__dossier-btn .text { color: var(--ill-color-white) !important; }

/* ─── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .ill-servicios__tags,
  .ill-servicios__certs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 767px) {
  .ill-servicios__spaces-inner,
  .ill-servicios__amenities-inner,
  .ill-servicios__certs-inner {
    padding: 0 24px !important;
    gap: var(--ill-space-lg) !important;
  }
  .ill-servicios__spaces,
  .ill-servicios__amenities,
  .ill-servicios__certs {
    padding: var(--ill-space-2xl) 0 !important;
  }
  .ill-servicios__tags,
  .ill-servicios__certs-grid {
    grid-template-columns: 1fr !important;
  }
  .ill-servicios__cert {
    padding: 28px 24px !important;
  }
  .ill-servicios__title {
    font-size: 28px !important;
  }
  .ill-servicios__dossier {
    padding: var(--ill-space-md) !important;
  }
  .ill-servicios__dossier-title {
    font-size: 26px !important;
  }
  .ill-servicios__dossier-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}


/* ============================================
   PÁGINA CONTACTO (/contacto/)
   Hero + CTA reutilizan .ill-hero / .ill-cta globales.
   Prefijo secciones propias: ill-contacto__
   ============================================ */

/* Trampa min-width:auto — flex/grid containers no se encogen por defecto */
.ill-contacto__info-inner,
.ill-contacto__form-inner {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ill-contacto__info-left,
.ill-contacto__info-right,
.ill-contacto__form-header,
.ill-contacto__form {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ill-contacto__title,
.ill-contacto__subheading,
.ill-contacto__text,
.ill-contacto__address,
.ill-contacto__form-title,
.ill-contacto__form-subtitle,
.ill-contacto__legal {
  max-width: 100% !important;
}

/* ── Eyebrow reutilizado en info + form header ── */
.ill-contacto__eyebrow {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-base) !important;
  font-weight: var(--ill-fw-semibold) !important;
  color: var(--ill-color-accent) !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
}

/* ── Sección 1 — Datos de contacto + ubicación ── */
.ill-contacto__info {
  padding: var(--ill-space-3xl) 0 !important;
  background-color: var(--ill-color-bg) !important;
}
.ill-contacto__info-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 80px !important;
  align-items: start !important;
  max-width: 1360px !important;
  padding: 0 40px !important;
  margin: 0 auto !important;
}
.ill-contacto__info-left,
.ill-contacto__info-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.ill-contacto__title {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-xl) !important;
  font-weight: var(--ill-fw-medium) !important;
  color: var(--ill-color-heading) !important;
  line-height: 1.2 !important;
}
.ill-contacto__subheading {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-card) !important;
  font-weight: var(--ill-fw-medium) !important;
  color: var(--ill-color-heading) !important;
  line-height: 1.25 !important;
}
.ill-contacto__address {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-lg) !important;
  color: var(--ill-color-text) !important;
  line-height: 1.7 !important;
}
.ill-contacto__address a { color: inherit !important; text-decoration: none !important; }
.ill-contacto__text {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-body) !important;
  color: var(--ill-color-text) !important;
  line-height: 1.65 !important;
}
@media (max-width: 991px) {
  .ill-contacto__info-inner { grid-template-columns: 1fr !important; gap: var(--ill-space-xl) !important; }
}
@media (max-width: 767px) {
  .ill-contacto__info { padding: var(--ill-space-xl) 0 !important; }
  .ill-contacto__info-inner { padding: 0 var(--ill-space-sm) !important; }
}

/* ── Sección 2 — Formulario ── */
.ill-contacto__form-section {
  padding: var(--ill-space-3xl) 0 !important;
  background-color: var(--ill-color-bg-alt) !important;
}
.ill-contacto__form-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ill-space-lg) !important;
  max-width: 720px !important;
  padding: 0 40px !important;
  margin: 0 auto !important;
}
.ill-contacto__form-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 14px !important;
}
.ill-contacto__form-title {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-xl) !important;
  font-weight: var(--ill-fw-regular) !important;
  color: var(--ill-color-heading) !important;
  line-height: 1.2 !important;
  text-align: center !important;
}
.ill-contacto__form-subtitle {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-body) !important;
  color: var(--ill-color-text-muted) !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

/* Formulario nativo Bricks — mismo patrón que .ill-sr-form (Salas), prefijo propio */
:where(.ill-contacto__form .bricks-form-group),
:where(.ill-contacto__form .form-group) {
  margin-bottom: 16px !important;
}
:where(.ill-contacto__form label) {
  font-size: var(--ill-fs-base) !important;
  font-weight: 600 !important;
  color: var(--ill-color-heading) !important;
  display: block !important;
  margin-bottom: 6px !important;
}
:where(.ill-contacto__form input),
:where(.ill-contacto__form textarea),
:where(.ill-contacto__form select) {
  border: 1px solid #ddd !important;
  border-radius: 3px !important;
  padding: 12px 14px !important;
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-body) !important;
  color: var(--ill-color-text) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background-color: #fff !important;
}
:where(.ill-contacto__form input:focus),
:where(.ill-contacto__form textarea:focus),
:where(.ill-contacto__form select:focus) {
  border-color: var(--ill-color-accent) !important;
  outline: none !important;
}
:where(.ill-contacto__form textarea) { min-height: 100px !important; resize: vertical !important; }
:where(.ill-contacto__form .submit-button-wrapper button),
:where(.ill-contacto__form .bricks-form-submit) {
  background: var(--ill-color-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 34px !important;
  font-family: var(--ill-font-body) !important;
  font-size: 14.5px !important;
  font-weight: var(--ill-fw-semibold) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  width: 100% !important;
}
/* El texto real vive en <span class="text"> — :where(span){color:...} de style.css
   asigna color directo al span, gana sobre el color heredado del botón (gotcha ya
   documentado en el proyecto: cascada, no especificidad). Hay que apuntar al span. */
.ill-contacto__form .bricks-form-submit,
.ill-contacto__form .submit-button-wrapper button,
.ill-contacto__form button[type="submit"],
.ill-contacto__form .bricks-form-submit *,
.ill-contacto__form button[type="submit"] .text { color: #fff !important; }
.ill-contacto__form button[type="submit"] { transition: var(--ill-transition) !important; }
.ill-contacto__form button[type="submit"]:hover { background: #c7421b !important; }
.ill-contacto__form button[type="submit"]:hover .text { color: #fff !important; }

.ill-contacto__legal {
  font-family: var(--ill-font-body) !important;
  font-size: 12px !important;
  color: var(--ill-color-text-muted) !important;
  line-height: 1.6 !important;
  text-align: center !important;
}
.ill-contacto__legal a {
  color: var(--ill-color-text-muted) !important;
  text-decoration: underline !important;
}
.ill-contacto__legal a:hover { color: var(--ill-color-accent) !important; }
/* 2026-07-29 — hallazgo F10 MENOR: 12px, por debajo del mínimo de 15px pedido para móvil.
   Se sube solo a 13px (no 15) porque es el texto legal/GDPR — una subida moderada mejora
   la legibilidad sin igualar el peso visual del cuerpo de texto principal. Solo móvil/tablet. */
@media (max-width: 991px) {
  .ill-contacto__legal { font-size: 13px !important; }
}

/* 2026-07-29 — hallazgo F4 CRÍTICO (auditoria-mobile-20260729): los campos de ambos
   formularios (Contacto y Salas) usan var(--ill-fs-body) = 15px — por debajo del umbral de
   16px que evita el zoom automático de iOS Safari al enfocar un input. Se sube a 16px SOLO
   en móvil/tablet (selector sin :where(), gana por especificidad a la regla base) — en
   desktop no hay zoom automático que evitar, así que se deja el 15px ya aprobado tal cual. */
@media (max-width: 991px) {
  .ill-sr-form input,
  .ill-sr-form textarea,
  .ill-sr-form select,
  .ill-contacto__form input,
  .ill-contacto__form textarea,
  .ill-contacto__form select {
    font-size: 16px !important;
  }
}

@media (max-width: 767px) {
  .ill-contacto__form-section { padding: var(--ill-space-xl) 0 !important; }
  .ill-contacto__form-inner { padding: 0 var(--ill-space-sm) !important; }
  .ill-contacto__form-title { font-size: 28px !important; }
}

/* ============================================
   OFICINA VIRTUAL (/oficina-virtual/) — .ill-oficina-virtual__*
   Hero reutiliza .ill-hero (kicker "Oficina Virtual" + heading real de origen,
   sin logo ni imagen de fondo — las únicas imágenes de la página de origen
   son capturas de tarjetas de precio, no fotografía, no aptas como hero bg).
   CTA final reutiliza .ill-cta (corresponde al H2 "Contactar" del origen).
   ============================================ */
/* Trampa de min-width:auto (recurrente en todo el proyecto): las tarjetas de
   precio y sus listas de features no se encogían por debajo de su contenido,
   forzando la página a 1116px de ancho en mobile pese a que el grid ya estaba
   en 1 columna. */
.ill-oficina-virtual__intro-inner, .ill-oficina-virtual__planes-inner, .ill-oficina-virtual__grid,
.ill-oficina-virtual__card, .ill-oficina-virtual__card-features, .ill-oficina-virtual__card-btn {
  min-width: 0 !important;
}
.ill-oficina-virtual__heading, .ill-oficina-virtual__lede, .ill-oficina-virtual__body,
.ill-oficina-virtual__planes-title, .ill-oficina-virtual__planes-subtitle,
.ill-oficina-virtual__card-name, .ill-oficina-virtual__card-price {
  max-width: 100% !important;
}
.ill-oficina-virtual__intro {
  padding: var(--ill-space-3xl) 0 !important;
  background-color: var(--ill-color-bg) !important;
}
.ill-oficina-virtual__intro-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ill-space-sm) !important;
  max-width: 860px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: 0 var(--ill-space-md) !important;
  /* 2026-07-27: feedback cliente 27/07 — "H1 y subtítulo a la izquierda pero el
     párrafo largo centrado, unifica todo a la izquierda". Cambiado de center a left
     para heading/lede/body por igual (bloque en sí sigue centrado en la página vía
     margin:0 auto, solo cambia la alineación del TEXTO dentro). Clase exclusiva de
     esta página (prefijo .ill-oficina-virtual__), sin impacto en otras páginas. */
  text-align: left !important;
}
.ill-oficina-virtual__heading {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-xl) !important;
  font-weight: var(--ill-fw-regular) !important;
  color: var(--ill-color-heading) !important;
  line-height: 1.2 !important;
  max-width: 100% !important;
}
.ill-oficina-virtual__lede {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-lg) !important;
  font-weight: var(--ill-fw-medium) !important;
  color: var(--ill-color-heading) !important;
  line-height: 1.5 !important;
  max-width: 100% !important;
}
.ill-oficina-virtual__body {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-body) !important;
  color: var(--ill-color-text) !important;
  line-height: 1.7 !important;
  max-width: 100% !important;
}
.ill-oficina-virtual__planes {
  padding: var(--ill-space-3xl) 0 !important;
  background-color: var(--ill-color-bg-alt) !important;
}
.ill-oficina-virtual__planes-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--ill-space-2xl) !important;
  max-width: 1360px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
}
.ill-oficina-virtual__planes-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: var(--ill-space-xs) !important;
  max-width: 700px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.ill-oficina-virtual__planes-title {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-xl) !important;
  font-weight: var(--ill-fw-regular) !important;
  color: var(--ill-color-heading) !important;
  line-height: 1.2 !important;
  max-width: 100% !important;
}
.ill-oficina-virtual__planes-subtitle {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-body) !important;
  color: var(--ill-color-text-muted) !important;
  max-width: 100% !important;
}
.ill-oficina-virtual__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--ill-space-md) !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: stretch !important;
}
.ill-oficina-virtual__card {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ill-space-sm) !important;
  background-color: var(--ill-color-card-bg) !important;
  border: 1px solid var(--ill-color-separator) !important;
  border-radius: 0 !important;
  padding: var(--ill-space-lg) var(--ill-space-md) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.ill-oficina-virtual__card--featured {
  background-color: var(--ill-color-dark) !important;
  border-color: var(--ill-color-dark) !important;
}
.ill-oficina-virtual__card-name {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-card) !important;
  font-weight: var(--ill-fw-regular) !important;
  color: var(--ill-color-heading) !important;
  line-height: 1.2 !important;
  max-width: 100% !important;
}
.ill-oficina-virtual__card--featured .ill-oficina-virtual__card-name {
  color: var(--ill-color-accent) !important;
}
.ill-oficina-virtual__card-price {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-lg) !important;
  font-weight: var(--ill-fw-semibold) !important;
  color: var(--ill-color-heading) !important;
  max-width: 100% !important;
}
.ill-oficina-virtual__card--featured .ill-oficina-virtual__card-price {
  color: var(--ill-color-white) !important;
}
.ill-oficina-virtual__card-features {
  flex: 1 1 auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.ill-oficina-virtual__card-features :where(ul) {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ill-space-sm) !important;
}
.ill-oficina-virtual__card-features :where(li) {
  position: relative !important;
  padding-left: 30px !important;
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-md) !important;
  color: var(--ill-color-text) !important;
  line-height: 1.5 !important;
  max-width: 100% !important;
}
.ill-oficina-virtual__card-features :where(li)::before {
  content: '\2713' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: var(--ill-radius-pill) !important;
  background-color: var(--ill-color-bg-alt) !important;
  color: var(--ill-color-heading) !important;
  font-size: 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.ill-oficina-virtual__card--featured .ill-oficina-virtual__card-features :where(li) {
  color: rgba(255,255,255,0.85) !important;
}
.ill-oficina-virtual__card--featured .ill-oficina-virtual__card-features :where(li)::before {
  background-color: rgba(255,255,255,0.12) !important;
  color: var(--ill-color-white) !important;
}
.ill-oficina-virtual__card-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  background-color: var(--ill-color-accent) !important;
  color: var(--ill-color-white) !important;
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-base) !important;
  font-weight: var(--ill-fw-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-radius: 0 !important;
  padding: 14px var(--ill-space-md) !important;
  text-decoration: none !important;
  transition: var(--ill-transition) !important;
  max-width: 100% !important;
}
.ill-oficina-virtual__card-btn:hover {
  background-color: #c7421b !important;
  color: var(--ill-color-white) !important;
}
@media (max-width: 767px) {
  .ill-oficina-virtual__intro { padding: var(--ill-space-xl) 0 !important; }
  .ill-oficina-virtual__heading { font-size: 32px !important; }
  .ill-oficina-virtual__lede { font-size: var(--ill-fs-body) !important; }
  .ill-oficina-virtual__planes { padding: var(--ill-space-xl) 0 !important; }
  .ill-oficina-virtual__planes-inner { padding: 0 var(--ill-space-sm) !important; gap: var(--ill-space-lg) !important; }
  .ill-oficina-virtual__planes-title { font-size: 32px !important; }
  .ill-oficina-virtual__grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .ill-oficina-virtual__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
}

/* ============================================
   TOUR 360º (Home) — 2026-07-15
   Ancla real para "Haz el Tour 360º" (#tour, ya existía el botón, sin destino)
   y para el topbar "Tour Virtual". Reutiliza el mismo embed de Street View que
   lillacoworking.com/el-coworking/#tour-virtual (misma dirección física real).
   ============================================ */
.ill-tour {
  background: var(--ill-color-bg) !important;
  padding: var(--ill-space-2xl) 0 !important;
}
.ill-tour__inner {
  max-width: 900px !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: var(--ill-space-sm) !important;
}
.ill-tour__eyebrow {
  font-family: var(--ill-font-body) !important;
  font-size: var(--ill-fs-base) !important;
  letter-spacing: 0.14em !important;
  color: var(--ill-color-accent) !important;
  text-transform: uppercase !important;
}
.ill-tour__title {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-xl) !important;
  color: var(--ill-color-heading) !important;
  line-height: 1.2 !important;
  max-width: 100% !important;
  margin: 0 0 var(--ill-space-sm) !important;
}
.ill-tour__frame {
  width: 100% !important;
  min-width: 0 !important;
}
.ill-tour__frame iframe {
  width: 100% !important;
  display: block !important;
  border-radius: 4px !important;
}
@media (max-width: 767px) {
  .ill-tour__frame iframe { height: 320px !important; }
}

/* ============================================
   OFICINA "A MIDA" (/oficinas-a-mida/) — landing con contenido real (2026-07-16)
   Hero/Qué es/Ventajas/Diferencias/Ubicación/Formulario/FAQ/CTA reutilizan
   .ill-sr-* ya existentes (mismo patrón que Salas/Oficinas). Solo 3 piezas
   nuevas: modificador --white (alternar ritmo de fondo), --4 (grid de 4 en
   vez de 3 columnas) y .ill-sr-gallery__* (galería de renders, nueva).
   ============================================ */
.ill-sr-features--white {
  background: #fff !important;
}
:where(.ill-sr-features__grid--4) {
  grid-template-columns: repeat(4, 1fr) !important;
}
:where(.ill-sr-gallery) {
  background: var(--ill-color-bg) !important;
  padding: 80px 0 !important;
}
:where(.ill-sr-gallery__inner) {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ill-space-xl) !important;
  align-items: center !important;
  text-align: center !important;
}
:where(.ill-sr-gallery__eyebrow) {
  font-size: var(--ill-fs-base) !important;
  letter-spacing: 0.14em !important;
  color: var(--ill-color-accent) !important;
  text-transform: uppercase !important;
  font-family: var(--ill-font-body) !important;
}
:where(.ill-sr-gallery__title) {
  font-family: var(--ill-font-heading) !important;
  font-size: var(--ill-fs-xl) !important;
  color: var(--ill-color-heading) !important;
  line-height: 1.2 !important;
}
:where(.ill-sr-gallery__grid) {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--ill-space-md) !important;
  width: 100% !important;
}
/* 2026-07-21: feedback cliente 21/07 — "todas las imágenes al mismo tamaño": el
   elemento Bricks `image` renderiza como <img class="ill-sr-gallery__img"> DIRECTO
   (sin wrapper), así que el selector anidado ".ill-sr-gallery__img img" nunca
   coincidía con nada — mismo patrón de bug ya visto en Noticias/Certificados. Los 4
   renders tienen aspect-ratio nativo distinto (1.49–1.78), de ahí que salieran a
   tamaños visualmente distintos pese al aspect-ratio:4/3 del contenedor (ese sí
   aplicaba, pero object-fit:cover nunca llegaba a la imagen real). */
:where(.ill-sr-gallery__img) {
  width: 100% !important;
  aspect-ratio: 4/3 !important;
  background: #EBEBEB !important;
  overflow: hidden !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
.ill-sr-gallery__inner, .ill-sr-gallery__grid {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ill-sr-gallery__title {
  max-width: 100% !important;
}
/* 2026-07-27: feedback cliente 24/07 — "Más privacidad. Más espacio. Más tuyo." (Diferencias)
   no tenía NINGÚN CSS propio (heredaba el párrafo base, sin peso visual real, de ahí la queja
   "poco peso"). Única instancia de .ill-sr-features__tagline en el sitio — segura de estilar. */
:where(.ill-sr-features__tagline) {
  font-family: var(--ill-font-heading) !important;
  font-size: 26px !important;
  font-weight: var(--ill-fw-medium) !important;
  color: var(--ill-color-accent) !important;
  line-height: 1.3 !important;
  max-width: 700px !important;
}
/* 2026-07-27: feedback cliente 24/07 — bloque "Qué es A Mida" reestructurado en 2 columnas
   (texto | render) para "despesar" la columna única de 4 párrafos con gap xl (64px) entre
   TODOS los elementos (eyebrow, título Y cada párrafo por igual). Nuevo wrapper
   .ill-sr-list__intro-text agrupa eyebrow+título+párrafos con gap propio, más ajustado
   entre párrafos que el xl heredado de .ill-sr-list__inner. */
:where(.ill-sr-list__intro-grid) {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: var(--ill-space-xl) !important;
  align-items: center !important;
  width: 100% !important;
  text-align: left !important;
}
:where(.ill-sr-list__intro-text) {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ill-space-md) !important;
}
:where(.ill-sr-list__intro-img) {
  width: 100% !important;
  aspect-ratio: 4/3 !important;
  background: #EBEBEB !important;
  overflow: hidden !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
.ill-sr-list__intro-grid, .ill-sr-list__intro-text {
  min-width: 0 !important;
  box-sizing: border-box !important;
}
@media (max-width: 767px) {
  :where(.ill-sr-features__grid--4) { grid-template-columns: 1fr !important; }
  :where(.ill-sr-gallery__grid) { grid-template-columns: 1fr !important; }
  :where(.ill-sr-gallery) { padding: var(--ill-space-xl) 0 !important; }
  :where(.ill-sr-list__intro-grid) { grid-template-columns: 1fr !important; }
  :where(.ill-sr-features__tagline) { font-size: 21px !important; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  :where(.ill-sr-features__grid--4) { grid-template-columns: repeat(2, 1fr) !important; }
  :where(.ill-sr-gallery__grid) { grid-template-columns: repeat(2, 1fr) !important; }
}

/* === PLANOS INTERACTIVOS (integración de sección) === */
.ill-planos-section {
  padding: 0 !important;
  min-width: 0 !important;
}
.ill-planos-container {
  max-width: none !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* =========================================================================
   REVISIÓN CLIENTE 28-08-2026 — formato (Fase 2.A del feedback)
   ========================================================================= */

/* CAT-2 · "Ajustar imagen al margen inferior como las otras"
   Causa real (medida en vivo, no a ojo): .ill-product-card__image llevaba
   height:100% y, como flex-item de una card en column, CRECÍA para rellenar
   el hueco que dejaba el texto. Resultado: en la misma fila, las cards con
   texto corto mostraban la foto a 271px y la de texto largo ("Sales de
   reunions", 4 líneas) se quedaba en 231px — la foto terminaba más arriba.
   Fijando la imagen a su aspect-ratio y bloqueando grow/shrink, TODAS las
   fotos del grid miden exactamente igual, en cualquier idioma y sea cual
   sea la longitud del texto. */
.ill-product-card__image {
  height: auto !important;
  flex: 0 0 auto !important;
}

/* EN-3 / CAT-4 · "Move this section to the center of the page"
   La 7ª card (Oficina virtual) quedaba huérfana a la izquierda con dos
   huecos vacíos a su derecha. Se centra en la columna del medio cuando el
   grid está a 3 columnas (>=1100px). A 2 columnas y a 1 columna el flujo
   natural ya es correcto, así que no se toca. */
@media (min-width: 1100px) {
  .ill-portfolio__grid > .ill-product-card:nth-child(7):last-child {
    grid-column: 2 !important;
  }
}

/* Botones naranja · "hay uno distinto" (feedback cliente)
   El MISMO botón ("↓ Descargar dossier comercial") se renderizaba con dos
   formatos distintos según dónde estuviera: 299×57 con fuente 14,5px en la
   parrilla de producto, y 274×51 con fuente 13,5px en el footer. Mismo texto
   y misma función ⇒ mismo formato. Se unifica sobre el patrón de la parrilla
   (el más legible), que cabe de sobra en la columna del footer (405px libres).
   .ill-cta__btn (uppercase) NO se toca: es el CTA primario del PDF aprobado. */
.ill-footer__dossier {
  font-size: 14.5px !important;
  letter-spacing: 0.5px !important;
  padding: 16px 34px !important;
}
@media (max-width: 991px) {
  /* en móvil el nowrap del footer no debe forzar scroll horizontal */
  .ill-footer__dossier { white-space: normal !important; text-align: center !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   2026-08-31 — FIX 3 y FIX 4 del footer (feedback cliente por email)
   Este bloque va AL FINAL del fichero a propósito: tiene que ganar a las reglas
   de .ill-footer__socials (línea ~1882) y .ill-footer__certs-block (~1909), que
   son de rondas anteriores y se dejan intactas para que el rollback sea limpio.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── FIX 3 — Iconos sociales visibles ─────────────────────────────────────────
   Estaban en position:absolute dentro de .ill-footer__map, o sea flotando encima
   del iframe de Google Maps, y con el glifo en blanco (#fff, setting nativo
   iconColor de Bricks). Medido sobre el render real: el 80% de los píxeles bajo
   los iconos tienen luminancia >0.75 → contraste blanco/fondo = 1.31:1, o sea
   invisibles. No vale con oscurecer el glifo: el fondo es un mapa vivo de Google
   (p10 de luminancia = 0.055 por sus propios controles), así que NINGÚN color
   plano garantiza contraste sobre algo que no controlamos. Por eso el elemento
   se ha movido en el JSON de Bricks a illfrow1 (la fila del botón de dossier),
   ya dentro de la banda navy del footer: el blanco actual pasa a ~15.9:1 sobre
   --ill-color-dark y deja de depender de lo que pinte Google. #brxe-illfrow1 ya
   era flex row + space-between (settings nativos), así que queda
   [botón dossier] ......... [IG] [LI] sin tocar nada más. */
.ill-footer__socials {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  flex: 0 0 auto !important;
}
/* El <a> hace de área táctil; el glifo (.icon, 22px) sigue mandando en lo visual. */
.ill-footer__socials a {
  opacity: 0.85 !important;
  transition: opacity var(--ill-transition, 0.25s ease) !important;
}
.ill-footer__socials a:hover,
.ill-footer__socials a:focus-visible { opacity: 1 !important; }

/* ── FIX 4 — Sellos a la derecha, a la altura del botón de dossier ────────────
   illfcertblk1 ha salido de la columna de marca y ahora es item directo del grid
   de .ill-footer__inner. Se coloca en la FILA 1 (la de las 4 columnas), ocupando
   las columnas 3-4, pegado abajo y a la derecha.
   Por qué align-self:end alinea exactamente con el botón y no hace falta ningún
   número mágico: la altura de la fila 1 la fija la columna de marca (la más
   alta), y su borde inferior COINCIDE con el del botón, porque el último hijo de
   esa columna es .ill-footer__dossier-row y esa fila mide exactamente
   botón (57px) + margin-top (16px). Así que el borde inferior del bloque de
   sellos cae sobre el mismo píxel que el del botón, en los 3 idiomas y sea cual
   sea el largo del rótulo. El borde derecho queda alineado con la 4ª columna. */
.ill-footer__certs-block {
  grid-column: 3 / -1 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: end !important;
  align-items: flex-end !important;
  width: auto !important;
  max-width: 100% !important;
  margin-top: 0 !important;
}
.ill-footer__certs-block .ill-footer__certs { justify-content: flex-end !important; }
.ill-footer__certs-block .ill-footer__certs-label { text-align: right !important; }

/* ⚠️ Las 4 columnas del footer se colocan AHORA de forma explícita en la fila 1.
   Es obligatorio, no cosmético: el bloque de sellos es un item con posición
   explícita (fila 1, columnas 3-4), y en CSS Grid los items explícitos se colocan
   ANTES que los automáticos. Sin estas 4 reglas, el auto-placement se encuentra
   las celdas 3 y 4 de la fila 1 ya ocupadas y empuja "Empresa" e "Información" a
   una segunda fila (comprobado en el render real: caían a y=6005, x=80 y x=533).
   Al declarar las 4 columnas explícitamente, todas conviven en la fila 1 y el
   bloque de sellos se superpone a propósito sobre el hueco vacío que dejan las
   columnas 3-4 (su contenido acaba en y≈5812; los sellos empiezan en y≈5830). */
.ill-footer__col--brand     { grid-column: 1 !important; grid-row: 1 !important; }
.ill-footer__col--coworking { grid-column: 2 !important; grid-row: 1 !important; }
.ill-footer__col--empresa   { grid-column: 3 !important; grid-row: 1 !important; }
.ill-footer__col--info      { grid-column: 4 !important; grid-row: 1 !important; }

/* Tablet (768-991px): AQUÍ NO se superponen. Medido barriendo anchos: por encima
   de 992px siempre quedan >=18px de holgura entre el final de las columnas de
   navegación y el inicio del bloque de sellos, pero entre 768 y 991 las columnas
   se estrechan, sus enlaces pasan a dos líneas y la holgura se vuelve NEGATIVA
   (-6 a -32px según el ancho) — o sea, el rótulo se comía el último enlace.
   En ese tramo el bloque baja a su propia fila, alineado a la derecha. */
@media (max-width: 991px) and (min-width: 768px) {
  .ill-footer__certs-block {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    align-self: auto !important;
    justify-self: end !important;
    margin-top: var(--ill-space-md) !important;
  }
}

/* Móvil (<768px el grid pasa a 2 columnas, <480px a 1): el bloque vuelve al flujo
   normal, a ancho completo y centrado — igual que antes de este cambio. */
@media (max-width: 767px) {
  /* Se suelta la colocación explícita: en 2 columnas (y en 1 a <480px) el
     auto-placement vuelve a ser el correcto, con --brand ocupando toda la fila. */
  .ill-footer__col--brand     { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .ill-footer__col--coworking,
  .ill-footer__col--empresa,
  .ill-footer__col--info      { grid-column: auto !important; grid-row: auto !important; }
  .ill-footer__certs-block {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    justify-self: stretch !important;
    align-self: auto !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: var(--ill-space-md) !important;
  }
  .ill-footer__certs-block .ill-footer__certs { justify-content: center !important; }
  .ill-footer__certs-block .ill-footer__certs-label { text-align: center !important; }
  /* La fila del dossier envuelve en móvil (botón 299px + iconos no caben en 327px):
     los iconos caen a una 2ª línea, alineados con el botón. */
  .ill-footer__socials { margin-top: 4px !important; }
}