/*
  Componentes reutilizables de ANYSLS.
  Cabecera, navegación, botones, bloque de identidad de empresa y pie
  de página compartidos. El diseño de secciones específico de la
  página de inicio (héroe, servicios, franjas, producto insignia) vive
  por completo en home.css.
*/

/*
  Cabecera del sitio: presupuesto de altura estricto por franja de
  ancho (bordes incluidos):
    < 768px:    logo 112px de ancho -> 49.3px alto + 8px de padding
                vertical (4px arriba/abajo) + 1px de borde inferior
                + 4px de línea verde superior = 62.3px
    768-1023px: logo 125px -> 55.0px + 8px + 1px + 4px = 68.0px
    >= 1024px:  logo 148px -> 65.1px + 8px + 1px + 4px = 78.1px
  A ese ancho, lo que en realidad determinaba la altura de la fila no
  era el logotipo sino la navegación: el "padding-block" propio de
  cada enlace más el "margin-block-end" heredado de "li" (regla
  general de base.css, pensada para listas verticales) sumaban más
  que el logotipo. Se recorta ese espaciado solo en el bloque de
  escritorio de más abajo.
  La línea verde superior de 4px ("border-top") es un acento
  deliberado y explícitamente presupuestado (+4px exactos sobre cada
  franja anterior) — a diferencia del acento de 3px de una versión muy
  anterior, que sí se había retirado por falta de margen.
  "font-size: 1rem" fija la cabecera al tamaño base con independencia
  del aumento del texto de cuerpo a partir de 1024px (ver base.css):
  ese aumento (16px -> 18px) hacía que los enlaces de navegación ya no
  cupieran en una sola fila exactamente a partir de 1024px. La
  cabecera es interfaz de navegación, no texto de lectura — se
  mantiene estable.
*/
.site-header {
  background: var(--color-background);
  border-top: 4px solid var(--color-brand);
  border-bottom: 1px solid var(--color-border);
  font-size: 1rem;
}

.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-1);
}

/* Logotipo real de la empresa (site/assets/img/anysrv-logo.png) */

.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.wordmark img {
  display: block;
  width: 120px;
  height: auto;
}

/* Botón de navegación móvil (mostrado solo si JavaScript está activo) */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.nav-toggle[aria-expanded="true"] {
  background: var(--color-surface-muted);
  border-color: var(--color-brand);
}

/* Navegación principal */

.primary-nav-wrap {
  flex-basis: 100%;
  border-top: 1px solid var(--color-border);
}

.primary-nav-wrap[hidden] {
  display: none;
}

.primary-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  padding-block: var(--space-2);
  margin: 0;
}

.primary-nav a:not(.btn) {
  display: block;
  padding-block: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast);
}

.primary-nav a:not(.btn):hover {
  color: var(--color-brand);
}

.primary-nav a[aria-current="page"] {
  color: var(--color-brand-dark);
  font-weight: 700;
  border-bottom-color: var(--color-brand);
}

.primary-nav__action {
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.primary-nav__action .btn {
  width: 100%;
}

/*
  Refuerzo explícito y redundante con la regla general ".btn--primary"
  de más abajo: ámbito exclusivo del botón de cliente de la cabecera.
*/
.primary-nav__action .btn--primary,
.primary-nav__action .btn--primary:visited {
  color: var(--color-white);
}

.primary-nav__action .btn--primary:hover,
.primary-nav__action .btn--primary:focus-visible {
  color: var(--color-white);
}

/* Botones */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

/*
  ".btn--primary" y ".btn--primary:visited" repiten "color" con la
  misma especificidad (dos selectores de clase) que las reglas
  "a:visited" y "a:hover" de base.css. Sin esto, un enlace-botón
  visitado u hover hereda el color verde de "a:visited"/"a:hover" en
  lugar del blanco del botón, dejando el texto ilegible sobre fondo
  verde. El mismo patrón se repite para ".btn--on-dark" más abajo.
*/
.btn--primary,
.btn--primary:visited {
  background: var(--color-brand);
  color: var(--color-white);
  border-color: var(--color-brand);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  color: var(--color-white);
}

.btn--secondary {
  background: transparent;
  color: var(--color-brand);
  border-color: var(--color-brand);
}

.btn--secondary:hover {
  background: var(--color-surface-muted);
  color: var(--color-brand-hover);
}

.btn--inverse {
  background: var(--color-white);
  color: var(--color-brand-dark);
  border-color: var(--color-white);
}

.btn--inverse:hover {
  background: var(--color-surface-muted);
}

/*
  Pie de página compartido: fondo azul marino saturado (--color-footer,
  medido directamente del pie de página real de anysls.com — ver
  tokens.css), compacto, cuadrícula de cuatro columnas en escritorio
  (empresa, servicios, clientes, información), apiladas en móvil. El
  foco de teclado invertido para esta superficie oscura vive en
  base.css (".site-footer :focus-visible").
*/

/*
  Pie de página: presupuesto ajustado a propósito.
  "padding-block: var(--space-6) var(--space-4)" = 48px arriba / 24px
  abajo (objetivo: 40-48px arriba, 20-24px abajo). El espaciado entre
  enlaces se reparte entre el "padding-block" del enlace (4px) y el
  margen inferior del "li" (4px): 4+4+4 = 12px entre líneas base
  consecutivas (objetivo: 10-12px). Todo el texto del pie —incluida la
  nota secundaria y la línea de copyright— se fija en 0.9375rem
  (15px), por encima del mínimo de 14px pedido para móvil y del de
  15px pedido para escritorio.
*/

.site-footer {
  margin-top: auto;
  background: var(--color-footer);
  color: var(--color-on-footer-muted);
}

.site-footer a {
  color: var(--color-on-footer);
}

.site-footer a:hover {
  color: var(--color-on-footer-muted);
}

/*
  Fila de contacto del pie: texto breve a la izquierda, botones a la
  derecha. Solo padding-block-start propio (el bloque de navegación
  de más abajo aporta su propio padding-block-start reducido, para
  que no se sumen dos espacios grandes entre ambas filas).
*/
.footer-cta-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-5) var(--space-4);
}

.footer-cta-row__text h2 {
  margin: 0 0 4px 0;
  font-size: 1.0625rem;
  color: var(--color-on-footer);
}

.footer-cta-row__text p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-on-footer-muted);
}

.footer-cta-row__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-cta-row__actions .btn {
  width: 100%;
}

.footer-grid-wrap {
  padding-block: var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-footer-border);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

/*
  El logotipo se coloca directamente sobre el fondo del pie: el
  archivo fuente ya tiene transparencia alfa real (verificado), así
  que no necesita una tarjeta blanca detrás para evitar un fondo
  opaco. Sin recorte de tarjeta, sin sombra, sin borde.
*/
.footer-grid__logo {
  display: block;
  width: 140px;
  height: auto;
}

.footer-grid__legal {
  margin: 6px 0 0 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-on-footer-muted);
}

/*
  Identidad compacta: logotipo y datos de empresa en fila, alineados
  arriba, en vez de apilados — ahorra una cantidad significativa de
  alto en móvil sin perder legibilidad (el logotipo ya no impone su
  propia fila completa).
*/
/*
  Apilado por defecto (igual que la geometría de escritorio ya
  aceptada, sin cambios). La fila de dos columnas lado a lado es un
  requisito específico de móvil (sección B) y vive solo dentro de
  "@media (max-width: 767px)" más abajo — nunca en escritorio.
*/
.footer-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.footer-identity .footer-grid__logo {
  flex: none;
}

.footer-identity .footer-grid__legal {
  margin: 0;
}

/*
  Redes sociales: fila compacta de tres enlaces reales verificados,
  no un widget de terceros — icono SVG local con "currentColor"
  (hereda el color de enlace del pie) dentro de un objetivo táctil de
  44×44px, con el propio icono visible más pequeño (20-22px) centrado
  dentro.
*/
.footer-social {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  margin: var(--space-2) 0 0 0;
  padding: 0;
}

.footer-social li {
  margin-block-end: 0;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--color-on-footer-muted);
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--color-on-footer);
}

.footer-social svg {
  width: 21px;
  height: 21px;
}

.footer-grid__col h2 {
  margin: 0 0 var(--space-2) 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-on-footer);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-grid__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-grid__col li {
  margin-block-end: var(--space-1);
}

.footer-grid__col li:last-child {
  margin-block-end: 0;
}

.footer-grid__col a {
  display: inline-block;
  padding-block: var(--space-1);
  font-size: 0.9375rem;
}

/*
  "Servicios" pasó de 5 a 9 enlaces (checkpoint de auditoría final):
  en dos columnas restringidas a partir de 768px para no alargar esa
  columna muy por encima de sus vecinas ("Clientes", "Información");
  en una sola columna apilada por debajo de ese ancho, igual que el
  resto de columnas del pie.
*/
@media (min-width: 768px) {
  .footer-services {
    column-count: 2;
    column-gap: var(--space-4);
  }

  .footer-services li {
    break-inside: avoid;
  }
}

/*
  Franja de copyright: tono oscuro neutro independiente
  (--color-footer-legal), medido directamente de la franja de
  copyright real de anysls.com (ver tokens.css) — más oscuro que el
  cuerpo principal del pie, como en el sitio operativo.
*/
.footer-legal-strip {
  background: var(--color-footer-legal);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block: var(--space-3);
  color: var(--color-on-footer-muted);
  font-size: 0.9375rem;
}

.footer-bottom p {
  margin: 0;
}

/*
  Diseño de escritorio: cabecera y navegación en una sola fila.
  Este umbral es más ancho (1024px) que el resto de la página (768px):
  seis enlaces más el botón de cliente no caben en una sola fila por
  debajo de 1024px incluso con espaciado reducido, y "flex-wrap: wrap"
  en ".primary-nav" producía una segunda fila de navegación. Por
  debajo de 1024px se mantiene el patrón móvil ([Logo][Menú]), que sí
  garantiza una cabecera compacta de una fila. app.js usa el mismo
  umbral (1024px) para decidir cuándo forzar la navegación siempre
  visible — deben mantenerse sincronizados.
*/

@media (min-width: 1024px) {
  .site-header__bar {
    flex-wrap: nowrap;
    gap: var(--space-3);
    padding-block: var(--space-1);
  }

  .wordmark img {
    width: 148px;
  }

  /*
    El "li" de cada enlace hereda "margin-block-end: var(--space-2)"
    de base.css (pensado para listas verticales); en esta fila
    horizontal solo añadía altura sin cumplir ninguna función y era,
    junto al padding del propio enlace, lo que realmente determinaba
    la altura de la cabecera (más que el logotipo).
  */
  .primary-nav li {
    margin-block-end: 0;
  }

  /*
    Cabecera de escritorio en una sola fila: logotipo | navegación
    centrada en el espacio disponible | acción de cliente a la derecha.
    "ul.primary-nav" (flex: 1) reparte y centra los enlaces dentro del
    espacio libre; "primary-nav__action" queda con su tamaño natural al
    final, sin necesidad de "margin-left: auto".
  */
  .primary-nav-wrap {
    flex: 1 1 auto;
    flex-basis: auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    border-top: none;
  }

  .primary-nav {
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding-block: 0;
  }

  .primary-nav a:not(.btn) {
    display: inline-block;
    padding-block: var(--space-1);
  }

  .primary-nav__action {
    flex: 0 0 auto;
    margin-block-start: 0;
    padding-block-start: 0;
    border-top: none;
  }

  .primary-nav__action .btn {
    width: auto;
  }
}

/*
  Solo los dos botones de la fila de contacto del pie pasan a dos
  columnas iguales a partir de 360px — el resto de la fila (texto
  encima, botones debajo) se mantiene igual que en móvil estrecho
  hasta 768px (ver bloque de más abajo). Acotado con "max-width: 767px"
  para que nunca coincida con el bloque de escritorio (>= 768px, más
  abajo) y así no alterar su geometría ya aceptada.
*/
@media (min-width: 360px) and (max-width: 767px) {
  .footer-cta-row__actions {
    flex-direction: row;
    gap: var(--space-2);
  }

  /*
    Relleno horizontal y tamaño de fuente reducidos: a un ancho de
    columna de ~150-170px "Hablar con ventas" no cabe en una sola
    línea con el relleno/tamaño de botón por defecto (24px + 16px),
    lo que empujaba el botón a 69px de alto en vez de los 44px
    mínimos. "white-space: nowrap" evita el ajuste de línea; el
    tamaño reducido asegura que el texto siga cabiendo sin recortarse.
  */
  .footer-cta-row__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--space-1);
    font-size: 0.875rem;
    white-space: nowrap;
  }
}

@media (min-width: 768px) {
  .footer-cta-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .footer-cta-row__actions {
    flex-direction: row;
    flex: none;
  }

  .footer-cta-row__actions .btn {
    width: auto;
  }

  /* Pie de página en cuatro columnas */
  .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .footer-bottom {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
  }
}

/*
  Pie de página en móvil (hasta 767px, antes de la cuadrícula de
  cuatro columnas de escritorio): identidad de empresa a ancho
  completo, "Servicios" y "Atención" en dos columnas en la misma fila
  (en vez de dos bloques largos uno debajo de otro) y "Legal" en fila
  compacta con enlaces en línea (ver ".footer-grid__col--legal" más
  abajo) en su propia fila a ancho completo. El resto de ajustes
  (relleno del pie, ancho del logotipo, separador antes de la línea de
  copyright) son correcciones específicas de móvil que no tocan los
  valores ya aceptados en escritorio (>= 768px), que solo se
  sobrescriben explícitamente en el bloque "@media (min-width: 768px)"
  de más abajo.
*/
@media (max-width: 767px) {
  /*
    Fila de dos columnas (logotipo a la izquierda, datos de empresa a
    la derecha, alineados arriba) — requisito específico de móvil
    (sección B). Nunca se aplica en escritorio (>= 768px).
  */
  .footer-identity {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /*
    14px: extremo inferior del rango "14-15px" pedido para este texto
    (sección A), no una reducción por debajo de él. A 15px, "ANYSRV MG
    SOCIEDAD LIMITADA" no cabía en una sola línea dentro de la columna
    de texto junto al logotipo (~195px disponibles), obligando a un
    salto de línea adicional; a 14px sí cabe.
  */
  .footer-grid__legal {
    font-size: 0.875rem;
  }

  .footer-cta-row {
    gap: 0.375rem;
    padding-block: 0.75rem 0.5rem;
  }

  .footer-cta-row__text h2 {
    font-size: 1rem;
  }

  .footer-cta-row__text p {
    margin-block-start: 2px;
  }

  .footer-cta-row__actions {
    gap: 0.5rem;
  }

  .footer-cta-row__actions .btn {
    min-height: 44px;
  }

  .footer-grid-wrap {
    padding-block: 0.5rem 0.5rem;
  }

  .footer-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 0.25rem;
  }

  .footer-grid__logo {
    width: 120px;
  }

  .footer-grid__col--wide {
    grid-column: 1 / -1;
  }

  /*
    Los enlaces del pie heredan el interlineado de párrafo (1.6) del
    cuerpo, pensado para prosa larga, no para una lista compacta de
    navegación: a 15px de fuente eso son 24px por línea (32px con el
    "padding-block" propio del enlace). Se ajusta solo aquí.
  */
  .footer-grid__col h2 {
    margin-block-end: 4px;
  }

  /*
    La causa real del hueco no era la alineación del enlace, sino que
    el propio "li" heredaba el tamaño de fuente/interlineado del
    cuerpo (16px × 1.6 ≈ 26px) para su caja de línea "fantasma" —
    generada por los nodos de texto en blanco entre etiquetas en el
    HTML formateado — con independencia de la altura real de su
    enlace interior (21px). Igualar el tamaño de fuente y el
    interlineado del "li" a los del enlace elimina esa caja fantasma.
    Acotado a móvil para no tocar la geometría de escritorio aceptada.
  */
  .footer-grid__col li {
    font-size: 0.875rem;
    line-height: 1.2;
  }

  .footer-grid__col a {
    padding-block: 2px;
    font-size: 0.875rem;
    line-height: 1.2;
    vertical-align: top;
  }

  .footer-grid__col li {
    margin-block-end: 2px;
  }

  .footer-grid__col li:last-child {
    margin-block-end: 0;
  }

  .footer-grid__col--legal {
    grid-column: 1 / -1;
  }

  .footer-grid__col--legal ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
  }

  .footer-grid__col--legal li:not(:last-child) {
    margin-block-end: 0;
  }

  .footer-bottom {
    gap: 2px;
    padding-block: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
  }
}

/*
  Ancho de logotipo en la franja 768-1023px, expresado como rango
  explícito (no "min-width: 768px" suelto) para no depender del orden
  de aparición frente a la regla de ">= 1024px" de más arriba.
*/
@media (min-width: 768px) and (max-width: 1023px) {
  .wordmark img {
    width: 125px;
  }
}

/* Botón de menú: solo visible si JavaScript está activo */

@media (max-width: 1023px) {
  .js .nav-toggle {
    display: inline-flex;
  }
}

/* Límites de color en modo de alto contraste forzado */

@media (forced-colors: active) {
  .btn,
  .nav-toggle {
    border-color: ButtonText;
  }

  .primary-nav a[aria-current="page"] {
    border-bottom-color: LinkText;
  }
}