/*
  Hardman Soluciones — base.css
  Reset, tipografía base, utilidades, cabecera y pie de página.
  Requiere tokens.css cargado antes.
  Índice: 1.Reset 2.Base 3.Utilidades 4.Botones 5.Cabecera 6.Pie
*/

/* ===== 1. RESET MÍNIMO ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
/* clip (no hidden): evita la barra fantasma del menú móvil fuera de pantalla,
   sin crear un contenedor de scroll nuevo (mantiene el sticky intacto) */
html { overflow-x: clip; }
img, svg, picture, video { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
:target { scroll-margin-top: var(--header-h); }

/* ===== 2. BASE ===== */
html { scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  font-family: var(--fuente);
  background: var(--fondo);
  color: var(--texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.bloquear-scroll { overflow: hidden; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; }
h1 { font-size: clamp(2.25rem, 1.55rem + 2.8vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem); }
h3 { font-size: 1.375rem; font-weight: 500; }
h4 { font-size: 1.125rem; font-weight: 500; }
p { color: var(--texto-suave); }
p + p { margin-top: var(--space-4); }
strong, b { font-weight: 700; color: var(--texto); }

a { transition: color .2s ease; }
a:hover { color: var(--texto-suave); }

:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; }

/* ===== 3. UTILIDADES ===== */
.contenedor {
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (max-width: 480px) {
  .contenedor { padding-inline: var(--space-4); }
}
main { display: block; }

/* oculto visualmente, disponible para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.saltar-enlace {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  background: var(--texto);
  color: var(--fondo);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radio);
  font-weight: 500;
  z-index: 100;
  transition: top .2s ease;
}
.saltar-enlace:focus { top: var(--space-4); }

/* ===== 4. BOTONES ===== */
.boton {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 26px;
  border: 1px solid var(--texto);
  border-radius: var(--radio);
  color: var(--texto);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.boton:hover, .boton:focus-visible {
  background: var(--texto);
  color: var(--fondo);
}
.boton--relleno {
  background: var(--texto);
  color: var(--fondo);
}
.boton--relleno:hover, .boton--relleno:focus-visible {
  background: var(--gris-claro);
  color: var(--fondo);
}

/* ===== 5. CABECERA ===== */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.cabecera__interior {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.cabecera__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.cabecera__logo-img { height: 38px; width: auto; }
.cabecera__logo-texto {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .01em;
}
.cabecera__logo-texto em {
  font-style: normal;
  font-weight: 400;
  color: var(--texto-suave);
}

.cabecera__nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.cabecera__nav a {
  font-size: .95rem;
  font-weight: 500;
  color: var(--texto-suave);
}
.cabecera__nav a:hover, .cabecera__nav a:focus-visible { color: var(--texto); }

.cabecera__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.cabecera__toggle-barra {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--texto);
  transition: transform .25s ease, opacity .25s ease;
}
.cabecera__toggle[aria-expanded="true"] .cabecera__toggle-barra:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cabecera__toggle[aria-expanded="true"] .cabecera__toggle-barra:nth-child(2) { opacity: 0; }
.cabecera__toggle[aria-expanded="true"] .cabecera__toggle-barra:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .cabecera__toggle { display: flex; }
  /* Sin desenfoque en móvil: un backdrop-filter convierte a la cabecera en el
     bloque contenedor de sus hijos fijos, y el panel del menú (position: fixed)
     mediría solo lo que ella en vez de toda la pantalla. El fondo opaco
     mantiene la cabecera legible sin ese efecto. */
  .cabecera {
    background: var(--fondo);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .cabecera__nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--fondo);
    padding: var(--space-7) var(--space-5);
    transform: translateX(100%);
    /* visibility oculta el menú cerrado también para teclado y lectores */
    visibility: hidden;
    transition: transform .3s ease, visibility .3s ease;
    overflow-y: auto;
  }
  .cabecera__nav--abierta { transform: translateX(0); visibility: visible; }
  .cabecera__nav ul { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .cabecera__nav a { font-size: 1.25rem; }
}

/* ===== 6. PIE DE PÁGINA ===== */
.pie { background: #000; border-top: 1px solid rgba(255, 255, 255, .08); }
.pie__interior {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-7);
  padding-block: var(--space-8) var(--space-7);
}
@media (max-width: 860px) {
  .pie__interior { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .pie__interior { grid-template-columns: 1fr; gap: var(--space-6); }
}
.pie__logo { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.pie__logo img { height: 40px; width: auto; }
.pie__logo span { font-weight: 700; }
.pie__marca p { font-size: .9rem; max-width: 32ch; }
.pie__titulo {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gris-medio);
  margin-bottom: var(--space-4);
}
.pie__columna ul { display: flex; flex-direction: column; gap: var(--space-3); }
.pie__columna a { font-size: .9rem; color: var(--texto-suave); }
.pie__columna a:hover, .pie__columna a:focus-visible { color: var(--texto); }
.pie__redes { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.pie__redes a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--linea);
  border-radius: 50%;
}
.pie__redes a:hover, .pie__redes a:focus-visible { border-color: var(--texto); }
.pie__redes svg { width: 18px; height: 18px; }
.pie__legal {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-block: var(--space-5);
  font-size: .82rem;
  color: var(--texto-suave);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  justify-content: space-between;
}
.pie__legal a { color: var(--texto); text-decoration: underline; }
.pie__legal a:hover, .pie__legal a:focus-visible { color: var(--texto-suave); }

/* Tablas de las páginas legales */
.pagina-legal table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: .95em;
}

.pagina-legal th,
.pagina-legal td {
  border: 1px solid var(--linea);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.pagina-legal th {
  color: var(--gris-claro);
  font-weight: 600;
}