/* Arcolor · estilos comunes a las tres páginas */

/* lo que lleva el atributo hidden queda oculto aunque su style="" diga display: flex */
[hidden] { display: none !important; }

/* tipografías (archivos en ../fuentes/). Inter es una fuente variable: un solo archivo trae
   todos los pesos, del 400 al 700. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fuentes/inter.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fuentes/ibm-plex-mono-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fuentes/ibm-plex-mono-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* colores de la marca y grises que se repiten en las tres páginas */
:root {
  --tinta: #1A1A1A;          /* texto principal, botones */
  --tinta-hover: #333333;    /* botón con el mouse encima */
  --texto: #4D4D4D;          /* texto de menú y secundario */
  --texto-suave: #666666;    /* bajadas y párrafos */
  --borde: #E6E6E6;
  --fondo: #FFFFFF;
  --fondo-suave: #F5F5F7;    /* fondo de secciones grises */
  --oscuro: #131316;         /* pie y bloques oscuros */
  --pie-texto: #A0A0AB;
  --pie-claro: #F4F4F6;
  --pie-tenue: #6F6F7A;
  --pie-linea: #2A2A31;
  --ancho-maximo: 1280px;
}

/* base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, sans-serif; color: var(--tinta); background: var(--fondo); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
button { font-family: 'Inter', system-ui, sans-serif; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
}

/* contenedor de toda la página */
.pagina { min-height: 100vh; background: var(--fondo); }
/* texto que leen los lectores de pantalla pero no se ve */
.solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* botón principal (negro) */
.boton { display: inline-flex; align-items: center; padding: 12px 20px; background: var(--tinta); color: #FFFFFF; font-size: 14px; line-height: 20px; font-weight: 500; border-radius: 8px; }
.boton:hover { background: var(--tinta-hover); }
.boton-con-icono { gap: 8px; padding-left: 18px; }
.boton-con-icono svg { flex-shrink: 0; }

/* ---------- encabezado ---------- */
.encabezado { position: sticky; top: 0; z-index: 50; height: 64px; background: var(--fondo); border-bottom: 1px solid transparent; transition: border-color 160ms ease; }
.encabezado.con-linea { border-bottom-color: var(--borde); }   /* js/comun.js, al bajar */
.encabezado-barra { position: relative; max-width: var(--ancho-maximo); margin: 0 auto; height: 100%; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

/* logo (en el encabezado y en el pie) */
.marca { display: flex; align-items: center; flex-shrink: 0; }
/* logo nuevo, apilado (fotos/logo-arcolor.svg; en el pie, la versión blanca) */
.marca-logo { display: block; width: auto; height: 44px; flex-shrink: 0; }

.nav-principal { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 100%; display: flex; align-items: center; gap: 32px; }
.nav-link { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; font-weight: 500; color: var(--texto); }
.nav-link:hover { color: var(--tinta); }
.nav-link[aria-current="page"] { color: var(--tinta); border-bottom: 2px solid var(--tinta); }
.encabezado-acciones { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* botón de menú (solo en celular) y menú desplegable */
.boton-menu { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid var(--borde); border-radius: 8px; cursor: pointer; }
.boton-menu-icono { display: block; width: 18px; height: 12px; position: relative; }
.boton-menu-icono span { position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--tinta); }
.boton-menu-icono span:nth-child(1) { top: 0; }
.boton-menu-icono span:nth-child(2) { top: 5px; }
.boton-menu-icono span:nth-child(3) { top: 10px; }
.menu-movil-lista { border-top: 1px solid var(--borde); background: var(--fondo); padding: 8px 24px 16px; }
.menu-movil-lista a { display: block; padding: 12px 0; font-size: 15px; font-weight: 500; color: var(--tinta); border-bottom: 1px solid #F0F0F0; }
.menu-movil-lista a:last-child { border-bottom: 0; }
.menu-movil-amplio a { padding: 14px 0; }

@media (max-width: 767px) {
  .nav-principal, .encabezado-cta { display: none; }
  .boton-menu { display: inline-flex; }
  /* sin JavaScript el botón no podría abrir el menú: se muestra el menú abierto, dentro del
     encabezado (que deja de quedar fijo arriba para no tapar la página) */
  html:not(.js) .encabezado { position: static; height: auto; }
  html:not(.js) .encabezado-barra { height: 64px; }
  html:not(.js) .boton-menu { display: none; }
}
/* con JavaScript el menú de celular arranca cerrado y lo abre js/comun.js (clase "abierto") */
.js [data-menu-movil]:not(.abierto) { display: none; }
@media (min-width: 768px) {
  [data-menu-movil] { display: none; }
}

/* ---------- pie ---------- */
.pie { background: var(--oscuro); color: var(--pie-texto); }
.pie-franja { display: flex; height: 8px; }
.pie-franja span { flex: 1; }
/* los 15 colores de línea de la carta, en orden */
.pie-franja span:nth-child(1) { background: #F5C518; }
.pie-franja span:nth-child(2) { background: #E0A82E; }
.pie-franja span:nth-child(3) { background: #E8820C; }
.pie-franja span:nth-child(4) { background: #E35B2B; }
.pie-franja span:nth-child(5) { background: #C81E1E; }
.pie-franja span:nth-child(6) { background: #D42F33; }
.pie-franja span:nth-child(7) { background: #D4537E; }
.pie-franja span:nth-child(8) { background: #1E4F9C; }
.pie-franja span:nth-child(9) { background: #2AA9C4; }
.pie-franja span:nth-child(10) { background: #6B3FA0; }
.pie-franja span:nth-child(11) { background: #2E9E4F; }
.pie-franja span:nth-child(12) { background: #1B6B4A; }
.pie-franja span:nth-child(13) { background: #9E9E9E; }
.pie-franja span:nth-child(14) { background: #D8C4A0; }
.pie-franja span:nth-child(15) { background: #6B4A2B; }
.pie-contenido { max-width: var(--ancho-maximo); margin: 0 auto; padding: 64px 24px 32px; }
.pie-columnas { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
.pie .marca-logo { height: 64px; }
.pie-lema { margin: 16px 0 0; max-width: 300px; font-size: 14px; line-height: 20px; color: var(--pie-texto); }
.pie-boton { display: inline-flex; align-items: center; margin-top: 24px; padding: 11px 19px; border: 1px solid #3A3A44; color: var(--pie-claro); font-size: 14px; line-height: 20px; font-weight: 500; border-radius: 8px; }
.pie-boton:hover { background: #1C1C21; }
.pie-titulo { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--pie-claro); margin-bottom: 16px; }
.pie-lista { display: flex; flex-direction: column; gap: 12px; }
.pie-link { font-size: 14px; line-height: 20px; color: var(--pie-texto); width: fit-content; }
.pie-link:hover { color: var(--pie-claro); }
.pie-telefono { font-variant-numeric: tabular-nums; }
.pie-dato { font-size: 14px; line-height: 20px; color: var(--pie-tenue); }
.pie-rrhh { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--pie-linea); }
.pie-rrhh-titulo { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--pie-claro); margin-bottom: 8px; }
.pie-separador { height: 1px; background: var(--pie-linea); margin-top: 48px; }
.pie-legal { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; font-size: 12px; line-height: 16px; color: var(--pie-tenue); }
/* en el inicio, la dirección y el pie legal van un tono más claro */
.pie-claro .pie-dato, .pie-claro .pie-legal { color: var(--pie-texto); }

@media (max-width: 767px) {
  .pie-columnas { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 639px) {
  .pie-legal { flex-direction: column; align-items: flex-start; gap: 12px; }
}