/* =========================================================================
   COMPONENTS
   Registrado via wp_enqueue_style en inc/enqueue.php, despues de style.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Botones — feedback en pointer-down, no solo en el resultado (apple-design,
   emil-design-eng). Nunca `transition: all`.
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.85em 1.6em;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-paper);
}
.btn--primary:hover { background: var(--color-accent-soft); }

.btn--ghost-on-ink {
  background: transparent;
  color: var(--color-text-on-ink);
  border-color: var(--color-line-on-ink);
}
.btn--ghost-on-ink:hover { border-color: var(--color-text-on-ink); }

.btn--text {
  padding: 0;
  background: none;
  color: var(--color-accent);
  border-bottom: 1px solid currentColor;
  border-radius: 0;
}
.btn--text:hover { color: var(--color-accent-soft); }

/* -------------------------------------------------------------------------
   Cabecera / navegacion — material translucido sobre el contenido (apple-design 12)
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--color-line);
  transition: transform var(--dur-base) var(--ease-out);
}
/* Mismo estilo de cabecera en todas las paginas (home incluida): antes la
   home tenia una variante oscura (".site-header--on-ink") pensada para
   quedar sobre el video del hero, pero con el video y el logo reales ya
   subidos se veia como un filtro oscuro no deseado sobre la cabecera. */
.site-header--hidden { transform: translateY(-100%); }
/* El material translucido va en un pseudo-elemento, no directamente en
   .site-header: backdrop-filter en un ancestro convierte a ese ancestro en
   el "containing block" de sus descendientes position:fixed (spec CSS), lo
   que rompia el desplegable movil de .primary-nav (quedaba encajado dentro
   de la cabecera de 4.5rem en vez de cubrir toda la pantalla). El pseudo-
   elemento consigue el mismo efecto visual sin ese problema. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(243, 241, 236, 0.78);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2xs);
  min-height: 4.5rem;
}
.site-logo img { max-height: 2.4rem; width: auto; max-width: 100%; }
.site-logo {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  min-width: 0; /* deja que el logo (imagen o texto) se encoja en pantallas muy estrechas en vez de forzar scroll horizontal */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Combinador directo (>) a proposito: asi esta regla nunca compite en
   especificidad con .sub-menu (tambien un <ul>, anidado dos niveles mas
   adentro) — sin esto, .primary-nav ul (clase+tipo) gana siempre a
   .sub-menu (una sola clase) y el desplegable se renderiza en fila. */
.primary-nav > ul { display: flex; gap: var(--space-md); align-items: center; }
.primary-nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  position: relative;
  padding-block: var(--space-3xs);
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transition: right var(--dur-base) var(--ease-out);
}
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after { right: 0; }

/* Desplegable "Areas de practica" — panel solido (no glass), anclado al
   disparador, entra con opacity+translateY desde un estado ya visible. */
.primary-nav li { position: relative; }

.menu-item-has-children > a { padding-right: var(--space-xs); }

.submenu-toggle {
  position: absolute;
  top: 50%; right: -1.6rem;
  transform: translateY(-50%);
  width: 1.6rem; height: 1.6rem;
  padding: 0;
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.submenu-toggle::before {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out);
}
.menu-item-has-children:hover .submenu-toggle::before,
.menu-item-has-children:focus-within .submenu-toggle::before,
.menu-item-has-children.is-open .submenu-toggle::before { transform: rotate(-135deg); }

.sub-menu {
  display: block; /* el ul del desplegable no debe heredar el flex de .primary-nav ul */
  position: absolute;
  top: calc(100% + 0.75rem);
  right: -1rem; /* ancla por la derecha y crece hacia la izquierda: "Areas
    de practica" no es el ultimo item del menu, asi que a la derecha hay
    menos sitio que a la izquierda — anclar por la izquierda (como antes)
    hace que el desplegable se salga de la pantalla en escritorios de
    ~1024-1366px cuando el nombre de un area es largo */
  min-width: 18rem;
  max-width: 24rem; /* si un nombre de area es largo ("Responsabilidad Civil
    y Patrimonial"), que el texto haga salto de linea dentro del
    desplegable en vez de ensancharlo hasta salirse de la pantalla */
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-top: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden; /* esquinas limpias: los items no sobresalen del radio */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transform-origin: top right;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
  z-index: 110;
}
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu,
.menu-item-has-children.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.sub-menu li { border: 0; }
.sub-menu li + li { border-top: 1px solid var(--color-line); } /* separadores entre areas */
.sub-menu a {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: background-color var(--dur-fast) var(--ease-standard),
              padding-inline-start var(--dur-base) var(--ease-out);
}
.sub-menu a::after {
  content: "\2192"; /* mismo gesto de flecha que .practice-index__arrow, a menor escala */
  /* .primary-nav a::after (la rayita de subrayado del menu principal) tiene
     la misma especificidad que esta regla, asi que sin resetear aqui estas
     propiedades la flecha heredaba su "position: absolute; left:0;
     right:100%; bottom:-2px; height:1px; background: currentColor" —
     quedaba encogida a un pixel de alto, pegada al borde izquierdo del
     item y fuera del flujo normal, en vez de ir despues del texto. */
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  width: auto;
  height: auto;
  background: none;
  font-family: var(--font-body);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.sub-menu a:hover,
.sub-menu a[aria-current="page"] {
  background: var(--color-stone);
  padding-inline-start: var(--space-md);
}
.sub-menu a:hover::after,
.sub-menu a[aria-current="page"]::after {
  opacity: 1;
  transform: translateX(0);
}

.nav-toggle { display: none; }

@media (max-width: 899px) {
  .primary-nav { position: fixed; inset: 4.5rem 0 0 0; background: var(--color-stone);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
  .primary-nav[data-open="true"] { transform: translateY(0); opacity: 1; visibility: visible; transition-delay: 0s; }
  .primary-nav > ul { flex-direction: column; align-items: flex-start; gap: 0; padding: var(--space-md); }
  .primary-nav li { width: 100%; border-bottom: 1px solid var(--color-line); }
  .primary-nav a { display: block; padding-block: var(--space-sm); font-size: var(--text-lg); }
  .nav-toggle {
    display: inline-flex; flex-direction: column; gap: 5px; background: none; border: 0; padding: var(--space-2xs);
  }
  .nav-toggle span { width: 22px; height: 2px; background: currentColor; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Desplegable en movil: acordeon en el sitio, no panel flotante (el
     hover no existe en tactil, asi que el toggle es lo unico que abre). */
  .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; }
  .menu-item-has-children > a { flex: 1 1 auto; }
  .submenu-toggle { position: static; transform: none; width: 2.75rem; height: 2.75rem; }
  .submenu-toggle::before { margin: 0 auto; }
  .sub-menu {
    position: static;
    flex-basis: 100%;
    opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-base) var(--ease-out);
  }
  .menu-item-has-children.is-open .sub-menu { max-height: 30rem; padding-bottom: var(--space-2xs); }
  .sub-menu a { padding-left: var(--space-md); font-size: var(--text-base); }
}

/* -------------------------------------------------------------------------
   Hero home — video corporativo (PLACEHOLDER hasta recibir el archivo real)
   ------------------------------------------------------------------------- */
.hero-home {
  position: relative;
  min-height: min(46rem, 92vh);
  display: flex;
  align-items: flex-end;
  color: var(--color-text-on-ink);
  overflow: hidden;
  background: var(--color-ink);
}
.hero-home__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-home__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15, 17, 24, 0.92) 0%, rgba(15, 17, 24, 0.35) 55%, rgba(15, 17, 24, 0.15) 100%);
}
.hero-home__content {
  position: relative;
  padding-block: var(--space-xl) var(--space-lg);
  max-width: 46rem;
}
.hero-home__content h1 { color: var(--color-text-on-ink); }
.hero-home__content p.lead { color: var(--color-text-on-ink-muted); margin-top: var(--space-sm); }
.hero-home__actions { display: flex; gap: var(--space-sm); margin-top: var(--space-md); flex-wrap: wrap; }

.hero-home__placeholder-note {
  position: absolute;
  top: var(--space-sm); right: var(--space-sm);
  background: var(--color-accent);
  color: var(--color-paper);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
  z-index: 2;
}

/* -------------------------------------------------------------------------
   Indice de areas de practica — lista editorial a ancho completo, no
   tarjetas de icono+titulo+texto (evita el patron generico).
   ------------------------------------------------------------------------- */
.practice-index__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-top: 1px solid var(--color-line);
  transition: background-color var(--dur-base) var(--ease-standard), padding-inline var(--dur-base) var(--ease-out);
}
.practice-index__item:last-child { border-bottom: 1px solid var(--color-line); }
.practice-index__item:hover,
.practice-index__item:focus-within { background: var(--color-stone-deep); padding-inline: var(--space-sm); }

.practice-index__name {
  grid-column: 1; /* explicito: sin esto, en contenedores estrechos el algoritmo
    de auto-colocacion de grid puede colar la flecha en la columna 1fr y el
    titulo en la columna auto, invirtiendo el orden visual */
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
}
.practice-index__name a::before { content: ""; position: absolute; inset: 0; } /* area de click en toda la fila */
.practice-index__item { position: relative; }

.practice-index__desc { grid-column: 1; color: var(--color-text-muted); max-width: 42ch; margin-top: var(--space-3xs); }

.practice-index__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: var(--text-xl);
  transform: translateX(0);
  transition: transform var(--dur-base) var(--ease-out);
}
.practice-index__item:hover .practice-index__arrow,
.practice-index__item:focus-within .practice-index__arrow { transform: translateX(6px); }

/* -------------------------------------------------------------------------
   Equipo — retratos editoriales, no iconos
   ------------------------------------------------------------------------- */
.team-grid {
  /* flex, no grid auto-fill: con un unico abogado/a (como ahora mismo)
     auto-fill crea columnas "fantasma" vacias y la ficha real queda
     apretada en la primera, con un hueco raro al lado. Con flex-wrap,
     cada ficha ocupa ~15rem y el conjunto se ve bien con 1, 2 o mas. */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.team-grid .team-card { flex: 0 1 15rem; }
.team-card figure { aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-stone-deep); border-radius: var(--radius-md); }
.team-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.team-card:hover img { transform: scale(1.03); }
.team-card figcaption { margin-top: var(--space-2xs); }
.team-card .name { font-family: var(--font-display); font-size: var(--text-lg); }
.team-card .role { color: var(--color-text-muted); font-size: var(--text-sm); }

/* -------------------------------------------------------------------------
   Ficha ampliada de equipo (pagina "Equipo") — foto + datos + biografia,
   en lista editorial a ancho completo (mismo patron que practice-index y
   specialty-list), no la tarjeta compacta de team-grid: una biografia
   necesita una columna de lectura, no un recuadro pequeno. Funciona igual
   de bien con un solo abogado que con varios (cada uno es una fila mas).
   ------------------------------------------------------------------------- */
.team-profile {
  display: grid;
  grid-template-columns: minmax(0, 14rem) 1fr;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-line);
}
.team-profile:last-child { border-bottom: 1px solid var(--color-line); }
.team-profile__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-stone-deep);
}
.team-profile__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-profile__name { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; }
.team-profile__role { color: var(--color-text-muted); margin-top: var(--space-3xs); }
.team-profile__contact { margin-top: var(--space-xs); display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); }
.team-profile__contact a:hover { color: var(--color-accent); }
.team-profile__bio { margin-top: var(--space-sm); }
.team-profile__bio.blog-empty-state { margin-top: var(--space-sm); }

@media (max-width: 700px) {
  .team-profile { grid-template-columns: 1fr; }
  .team-profile__photo { max-width: 14rem; }
}

/* -------------------------------------------------------------------------
   Reconocimientos — banda simple, sin tarjetas
   ------------------------------------------------------------------------- */
.recognitions { border-top: 1px solid var(--color-line-on-ink); border-bottom: 1px solid var(--color-line-on-ink); }
.recognitions__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  justify-content: space-between;
  padding-block: var(--space-md);
}
.recognitions__item { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text-on-ink-muted); }
.recognitions__item strong { color: var(--color-text-on-ink); font-weight: 500; }

/* -------------------------------------------------------------------------
   Ficha de responsable de area (patron Garrigues/Cuatrecasas)
   ------------------------------------------------------------------------- */
.lawyer-card {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  padding: var(--space-sm);
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}
.lawyer-card__photo { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--color-stone-deep); }
.lawyer-card__name { font-family: var(--font-display); font-size: var(--text-lg); }
.lawyer-card__role { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: 2px; }
.lawyer-card__contact { margin-top: var(--space-2xs); display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); }

/* -------------------------------------------------------------------------
   Pagina de area — hero + especialidades (misma estructura en las 5 areas)
   ------------------------------------------------------------------------- */
.area-hero {
  background: var(--color-ink);
  background-size: cover;
  background-position: center;
  color: var(--color-text-on-ink);
  padding-block: var(--space-xl) var(--space-lg);
} /* si hay imagen de fondo (Personalizador > Marca > Imagen de cabecera),
     el degradado oscuro que la acompana viene ya compuesto en el propio
     "background-image" en linea (ver despacho_area_hero_style_attr() en
     inc/template-helpers.php) — sin imagen, se queda en --color-ink liso */
.area-hero .breadcrumbs { color: var(--color-text-on-ink-muted); }
.area-hero h1 { color: var(--color-text-on-ink); margin-top: var(--space-xs); max-width: 38rem; }
.area-hero p.lead { color: var(--color-text-on-ink-muted); max-width: none; }

.breadcrumbs { font-size: var(--text-sm); }
.breadcrumbs a { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs [aria-hidden] { margin-inline: var(--space-3xs); opacity: 0.6; }

.specialty-list { border-top: 1px solid var(--color-line); }
.specialty-list__item {
  display: grid;
  grid-template-columns: minmax(0, 20rem) 1fr;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-line);
}
.specialty-list__item h3 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 600; }
.specialty-list__item p { color: var(--color-text-muted); }
.specialty-list__item--title-only { grid-template-columns: 1fr; }
@media (max-width: 700px) {
  .specialty-list__item { grid-template-columns: 1fr; gap: var(--space-2xs); }
}

/* -------------------------------------------------------------------------
   Dimension internacional — seccion breve y transversal de la home (no
   comparte markup con el indice de areas: no es una area mas, es un
   mensaje aparte sobre el alcance de toda la practica).
   ------------------------------------------------------------------------- */
.international-block {
  border-top: 2px solid var(--color-accent);
  padding-top: var(--space-md);
}
.international-block--sin-imagen { max-width: 48rem; }
.international-block:not(.international-block--sin-imagen) {
  display: grid;
  grid-template-columns: minmax(0, 22rem) 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.international-block__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}
@media (max-width: 700px) {
  .international-block:not(.international-block--sin-imagen) { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Rejillas de dos columnas (equipo en home, contenido+aside en pagina de
   area, datos+formulario en contacto) — una sola columna en movil/tablet
   estrecha para que nada se apriete ni desborde.
   ------------------------------------------------------------------------- */
.home-equipo-grid,
.area-content-grid,
.contact-grid {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}
.home-equipo-grid,
.contact-grid { grid-template-columns: 1fr 1fr; }
.area-content-grid { grid-template-columns: 2fr 1fr; }
.area-content-grid__aside { display: flex; flex-direction: column; gap: var(--space-md); }

@media (max-width: 860px) {
  .home-equipo-grid,
  .area-content-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   Formulario de contacto — estados completos (focus, error, disabled)
   ------------------------------------------------------------------------- */
.contact-form { background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-md); }
.form-row { margin-bottom: var(--space-sm); }
.form-row label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-3xs); }
.form-row .required { color: var(--color-accent); }
.form-row input,
.form-row textarea,
.form-row select {
  width: 100%;
  padding: 0.75em 0.9em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-stone);
  transition: border-color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus { background: var(--color-paper); border-color: var(--color-ink); outline: none; }
.form-row input:disabled,
.form-row textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.form-row.has-error input,
.form-row.has-error textarea { border-color: var(--color-accent); }
.form-row .error-message { color: var(--color-accent); font-size: var(--text-xs); margin-top: var(--space-3xs); }
.form-consent { font-size: var(--text-xs); color: var(--color-text-muted); display: flex; gap: var(--space-2xs); align-items: flex-start; }
.form-status { margin-top: var(--space-sm); font-size: var(--text-sm); }
.form-status[data-state="success"] { color: #2f6b3a; }
.form-status[data-state="error"] { color: var(--color-accent); }

/* -------------------------------------------------------------------------
   Blog teaser (home) y listado de blog — deshabilitado hasta que haya
   contenido real (ver front-page.php / archive.php)
   ------------------------------------------------------------------------- */
.blog-teaser { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-md); }
.blog-teaser__item { border-top: 1px solid var(--color-line); padding-top: var(--space-sm); }
.blog-teaser__date { font-size: var(--text-xs); color: var(--color-text-muted); }
.blog-teaser__title { font-family: var(--font-display); font-size: var(--text-lg); margin-top: var(--space-3xs); }
.blog-empty-state { border: 1px dashed var(--color-line); border-radius: var(--radius-md); padding: var(--space-lg); text-align: center; color: var(--color-text-muted); }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer { background: var(--color-ink); color: var(--color-text-on-ink-muted); padding-block: var(--space-lg) var(--space-md); }
.site-footer a:hover { color: var(--color-text-on-ink); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-line-on-ink); }
.footer-grid h4 { color: var(--color-text-on-ink); margin-bottom: var(--space-2xs); }
.footer-logo { margin-bottom: var(--space-2xs); line-height: 0; }
.footer-logo .custom-logo-link { display: inline-block; }
.footer-logo img {
  display: inline-block;
  max-height: 1.6rem !important; /* mas reducido que el logo de la cabecera
    (2.4rem); !important porque el atributo width/height que WordPress pone
    en el <img> del custom-logo puede ganarle a un max-height normal si
    algun plugin de optimizacion de imagenes vuelve a imprimir ese ancho
    como estilo en linea */
  width: auto !important;
  height: auto;
  max-width: 100%;
}
.footer-grid ul li { margin-bottom: var(--space-3xs); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: space-between; padding-top: var(--space-sm); font-size: var(--text-xs); }

/* -------------------------------------------------------------------------
   Estados de foco y carga generales
   ------------------------------------------------------------------------- */
.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.is-loading::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 1.1em; height: 1.1em;
  margin: -0.55em 0 0 -0.55em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--color-paper);
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }