/* chrome.css — Lo que comparten todas las páginas: header fijo con menú, footer y selector de idioma. */

/* Header — barra fija (oscura) con menú, logo y «Contacto»; se oculta al bajar el scroll y reaparece al subir. Desplegada, se abre en un panel claro:
   una capa de recorte (clip-path) revela el panel hacia abajo desde la altura de la barra, el fondo se desenfoca y las opciones suben una a una. La rejilla
   de puntos (--z-dots) queda por encima de todo, como en el diseño. */
.header__overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-header);
  background: rgb(0 0 0 / .28);
  -webkit-backdrop-filter: blur(var(--menu-blur));
  backdrop-filter: blur(var(--menu-blur));
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease-out), visibility 0s .5s;
}

.header.is-open .header__overlay {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.header__bar {
  position: fixed;
  top: var(--header-top);
  left: 50%;
  z-index: calc(var(--z-header) + 1);
  width: var(--header-w);
  height: var(--header-bar-h);
  translate: -50% 0;
  transition: transform .5s var(--ease-out), opacity .35s var(--ease-out), visibility 0s;
}

.header.is-hidden .header__bar {
  transform: translateY(calc(-100% - var(--header-top) - 1rem));   /* sale hacia arriba */
  opacity: 0;
  visibility: hidden;
  transition: transform .5s var(--ease-out), opacity .35s var(--ease-out), visibility 0s .5s;
}

.header__bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  border-radius: var(--radius-header);
}

.header__bg--bar {
  height: var(--header-bar-h);
  background: var(--color-header-bg);
}

.header__bg--panel {
  top: calc(-1 * var(--panel-bleed-top));   /* móvil: el panel sobresale de la barra hasta los bordes de la pantalla (abierto, sin márgenes); desde 768 px no sobresale */
  right: calc(-1 * var(--panel-bleed-x));
  left: calc(-1 * var(--panel-bleed-x));
  height: var(--panel-h);
  border-radius: var(--panel-radius);
  background: var(--color-header-open-bg);
  opacity: 0;
  clip-path: inset(var(--panel-bleed-top) var(--panel-bleed-x) calc(100% - var(--panel-bleed-top) - var(--header-bar-h)) var(--panel-bleed-x) round var(--radius-header));   /* cerrado: solo el rectángulo de la barra */
  transition: clip-path .6s var(--ease-out), opacity .3s var(--ease-out);
}

.header.is-open .header__bg--panel {
  opacity: 1;
  clip-path: inset(0 0 0 0 round var(--panel-radius));
}

.header__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-bar-h);
  padding-inline: var(--header-pad-x);
}

.header__toggle {
  display: grid;
  place-items: center;
  justify-self: start;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: calc(-1 * (2.75rem - var(--header-lines)) / 2);   /* las rayas, a la altura del relleno de la barra */
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-header-muted);
  cursor: pointer;
  transition: color .4s var(--ease-out);
}

.header__lines {
  display: grid;
  gap: var(--header-lines-gap);
  width: var(--header-lines);
}

.header__lines span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform .45s var(--ease-out), opacity .25s var(--ease-out);
}

.header.is-open .header__lines span:nth-child(1) {
  transform: translateY(calc(var(--header-lines-gap) + 1.5px)) rotate(45deg);   /* las tres rayas pasan a una X */
}

.header.is-open .header__lines span:nth-child(2) {
  opacity: 0;
}

.header.is-open .header__lines span:nth-child(3) {
  transform: translateY(calc(-1 * (var(--header-lines-gap) + 1.5px))) rotate(-45deg);
}

.header__logo {
  display: flex;
  align-items: center;
  width: var(--logo-width);
  min-height: 2.75rem;   /* área táctil ≥ 44 px aunque el logo sea bajo */
}

.header__logo img {
  width: 100%;
  height: auto;
  transition: filter .4s var(--ease-out);
}

.header__contact {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  min-height: 2.75rem;   /* área táctil ≥ 44 px aunque el texto sea pequeño */
  font-size: var(--fs-header);
  font-weight: var(--fw-light);
  color: var(--color-header-muted);
  text-decoration: none;
  transition: color .4s var(--ease-out);
}

/* Desplegado: logo oscuro y «Contacto» más contrastado */
.header.is-open .header__toggle,
.header.is-open .header__contact {
  color: var(--color-header-open-ink);
}

.header.is-open .header__logo img {
  filter: invert(.88);
}

.menu {
  position: absolute;
  top: var(--header-bar-h);
  right: 0;
  left: 0;
  display: grid;
  place-items: center;
  height: calc(var(--header-open-h) - var(--header-bar-h));
  padding-bottom: calc(clamp(2.5rem, 4vw, 5rem) + env(safe-area-inset-bottom, 0px));   /* sitio para el selector de idioma, abajo del todo (y la barra de inicio de iOS) */
  visibility: hidden;
  transition: visibility 0s .5s;
}

.header.is-open .menu {
  visibility: visible;
  transition-delay: 0s;
}

.menu__list {
  display: grid;
  gap: var(--menu-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.menu__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;   /* área táctil ≥ 44 px */
  padding: .2em .4em;
  font-family: var(--font-dot);
  font-size: var(--fs-menu);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-header-open-ink);
  -webkit-text-stroke: .016em currentColor;   /* para que los puntos se lean (como en las etiquetas de las carpetas) */
  opacity: 0;
  transform: translateY(1.5rem);   /* suben de abajo arriba, una tras otra */
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), color .3s var(--ease-out);
}

.header.is-open .menu__link {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 60ms + 160ms), calc(var(--i, 0) * 60ms + 160ms), 0s;
}

a.menu__link:hover {
  color: var(--color-header-open-muted);
}

@media (prefers-reduced-motion: reduce) {
  .header__overlay,
  .header__bar,
  .header__bg--panel,
  .header__lines span,
  .header__logo img,
  .header__toggle,
  .header__contact,
  .menu__link {
    transition: none;
  }
}

/* Con el menú abierto la página no se desplaza (la posición se conserva) */
html.is-menu-open {
  overflow: hidden;
}

/* Selector de idioma del panel del menú: ES | EN abajo del todo. En páginas sin gemela en el otro idioma, esa opción va atenuada y sin enlace. */
.menu__lang {
  position: absolute;
  bottom: clamp(1.25rem, 2.2vw, 2.5rem);
  left: 50%;
  display: flex;
  align-items: center;
  gap: .9em;
  translate: -50% 0;
  font-family: var(--font-dot);
  font-size: var(--fs-header);
  text-transform: uppercase;
  color: var(--color-header-open-ink);
  -webkit-text-stroke: .016em currentColor;
}

.menu__lang-link {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  text-decoration: none;
  color: var(--color-header-open-muted);
}

.menu__lang-link[aria-current="true"] {
  color: var(--color-header-open-ink);
  text-decoration: underline;
  text-underline-offset: .35em;
}

a.menu__lang-link:hover {
  color: var(--color-header-open-ink);
}

.menu__lang-link[aria-disabled="true"] {
  opacity: .4;   /* idioma sin versión de esta página todavía */
  cursor: default;
}

.menu__lang-sep {
  opacity: .5;
}

/* Footer — CTA de cierre, columnas, copyright y el logo «onestic» gigante a todo el ancho pegado al borde inferior. Mismo marcado en todas las páginas. */
.footer {
  position: relative;
  overflow: hidden;
  padding-top: var(--footer-pad-top);
  background: var(--color-bg);
  color: var(--color-text);
}

.footer__inner {
  padding-inline: var(--footer-pad-x);
}

.footer__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.25rem, 2.4vw, 3rem);
}

.footer__cta-title {
  margin: 0;
  font-size: var(--fs-footer-cta);
  font-weight: var(--fw-medium);
  letter-spacing: -.02em;
  line-height: 1.2;
  text-wrap: balance;
}

.footer__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* móvil y tablet: 2 × 2 en el orden del documento (Empresa | Legal, Sedes | Social) */
  gap: var(--space-8) clamp(1.5rem, 2.8vw, 3.5rem);
  margin-top: var(--footer-gap-cols);
}

.footer__title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-footer-title);
  font-weight: var(--fw-medium);
  letter-spacing: -.02em;
  line-height: 1.2;
}

.footer__list {
  display: grid;
  gap: .55em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__link {
  font-size: var(--fs-footer-link);
  line-height: 1.4;
  overflow-wrap: anywhere;
  color: var(--color-footer-muted);
  text-decoration: none;
  transition: color .2s var(--ease-out);
}

a.footer__link:hover {
  color: var(--color-text);
}

@media (pointer: coarse) {
  .footer__list {
    gap: 0;
  }

  .footer__link {
    display: flex;
    align-items: center;
    min-height: 2.75rem;   /* área táctil ≥ 44 px */
  }
}

.footer__copy {
  margin: var(--footer-gap-copy) 0 0;
  font-size: var(--fs-footer-link);
  color: var(--color-footer-muted);
}

.footer__wordmark {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--footer-gap-wordmark);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .footer__columns {
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
  }
}

/* ── Aviso de cookies (cookie-notice.js) ──────────────────────────────────────────────────────────────────
   Tarjeta oscura fija abajo y centrada, en todas las páginas, hasta que se acepta. Sin animación: aparece y desaparece. El botón sigue el patrón de .button
   (contorno fino; con el cursor o el foco, versión clara) y mide ≥ 44 px de alto. */
.cookie-notice {
  position: fixed;
  z-index: var(--z-notice);
  right: var(--notice-gap);
  bottom: var(--notice-gap);
  left: var(--notice-gap);
  max-width: var(--notice-w);
  margin-inline: auto;
  padding: var(--notice-pad);
  border: 1px solid var(--color-notice-border);
  border-radius: var(--radius-notice);
  background: var(--color-notice-bg);
  color: var(--color-text);
  box-shadow: 0 10px 40px rgb(0 0 0 / .35);
}

.cookie-notice__title,
.cookie-notice__text {
  margin: 0;
}

.cookie-notice__title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-notice-title);
  font-weight: var(--fw-semibold);
}

.cookie-notice__text {
  font-size: var(--fs-notice-text);
  line-height: 1.6;
  color: var(--color-notice-text);
}

.cookie-notice__text a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.cookie-notice__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-6);
}

.cookie-notice__button {
  min-width: 12.5rem;
  min-height: 2.75rem;
  padding: .7em 1.25em;
  border: 1px solid var(--color-button-border);
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-notice-text);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.cookie-notice__button:hover,
.cookie-notice__button:focus-visible {
  border-color: var(--color-button-bg);
  background: var(--color-button-bg);
  color: var(--color-button-text);
}

@media (max-width: 767px) {
  .cookie-notice {
    --notice-gap: 1rem;
    --notice-pad: 1.25rem;
  }

  .cookie-notice__button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-notice__button {
    transition: none;
  }
}