/* ================================================================
   ELIOR ENERGY · LAYOUT GLOBAL
   Estilos de TODAS las páginas públicas: base, encabezado, buscador, menú de categorías, pie y botones. El loader (cargador-pagina.js) lo inyecta en cada página; Inicio lo enlaza
   en su <head>. Lo exclusivo de Inicio vive en inicio/inicio.css y la tarjeta de banner en compartido/banner-tarjeta.css.
   ================================================================ */

/* ================================================================
   ELIOR ENERGY · PÁGINA PRINCIPAL
   Diseño responsive: se adapta a pantalla amplia, zoom, ventana dividida
   y dispositivos móviles sin recortar el contenido de las promociones.
   ================================================================ */

:root {
  /* Los colores de marca vienen de compartido/paleta-global.css (--prussian,
     --prussian-soft, --ink, --muted, --border, --surface, --bg). */
  /* El encabezado forma parte del flujo normal del documento (ni fixed ni sticky): no hay altura que reservar ni variable que sincronizar.
     Los elementos pegajosos de cada página (filtros, resumen, menú de cuenta…) se pegan a este margen superior de la pantalla, porque el
     encabezado ya salió de ella cuando empiezan a pegarse. */
  --sticky-top: 12px;
  color: var(--ink);
}

/* Pie oculto bajo el loader (saltaba al llegar los datos: CLS 0,5–1,4). */
html.tres-preload:not(.tres-revealed) .site-footer { visibility: hidden; }
/* Inicio: bajo el loader no hay nada que ver, así que su contenido queda invisible hasta que empieza el fundido de entrada. El relleno de las secciones (categorías,
   productos…) a mitad de carga no cuenta entonces como salto de layout (con las 12 categorías reales el CLS bruto de Inicio llegaba a 0,15). Mismo recurso que el pie. */
html.tres-preload:not(.tres-revealed) body[data-page="inicio"] main { visibility: hidden; }
/* Catálogo (categorías y «Todos los productos»): igual. Título, filtros y grilla se rellenan con datos reales ya con el loader encima; en móvil el panel
   de filtros (abierto) crecía al llegar las facetas y empujaba los resultados ~380 px (CLS 0,17 en /categoria/*). Lo oculto no se mide. */
html.tres-preload:not(.tres-revealed) [data-catalog-listing] { visibility: hidden; }

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg);
  /* SF Pro se activa de forma nativa en los sistemas Apple. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* PIE AL FONDO (sin position:fixed): el cuerpo es una columna de al menos la altura de la ventana; el contenido crece y empuja el pie cuando la página es corta, y si es larga
   el pie queda al final y se desplaza con ella. El encabezado y el pie los monta cargador-pagina.js como hijos directos del cuerpo. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body > main,
body > .page-shell {
  flex: 1 0 auto;
  width: 100%;
}

body > .site-header,
body > .site-footer {
  flex: 0 0 auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

.container {
  width: min(var(--page-max, 1180px), calc(100% - 48px));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ----------------------- HEADER ----------------------- */
/* EN EL FLUJO del documento (ni fixed ni sticky). Parte AZUL (franja de 28 px + fila de 62 px) con el degradado de la marca y el logo completo a la izquierda; fila de
   CATEGORÍAS (36 px) clara. El lima solo acentúa (botón «Buscar», globo del carrito, foco, subrayado activo). Compacto (≤ 1099 px): botón «Menú» y panel de categorías. */
.site-header {
  position: relative;
  z-index: 220; /* el desplegable del buscador y los submenús cubren el contenido de la página */
  width: 100%;
  min-width: 0;
  color: var(--bg);
}

.site-header__top {
  background: var(--brand-gradient);
}

.site-header__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(14px, 2vw, 24px);
  min-width: 0;
}

.site-header__rows {
  display: grid;
  align-content: center;
  min-width: 0;
}

.utility-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 28px;
  overflow: hidden;
  border-bottom: 1px solid rgb(255 255 255 / 14%);
  color: rgb(255 255 255 / 84%);
  font-size: 12px;
}

.utility-bar nav {
  display: flex;
  gap: 18px;
}

.utility-bar a {
  /* Objetivo táctil mínimo de 24 px (WCAG 2.5.8) sin cambiar la fila, que mide 28 px fijos: el enlace crece dentro de ella. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  transition: color 150ms ease;
}

/* «Saltar al contenido»: invisible hasta que el teclado le da el foco; entonces aparece sobre el encabezado. */
.skip-link {
  position: absolute;
  top: -64px;
  left: 12px;
  z-index: 2000;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--prussian);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 10px;
  outline: 3px solid var(--lime);
  outline-offset: 2px;
}

/* El destino del enlace recibe el foco por programa: sin contorno propio (no es un control). */
main:focus,
[data-page-content]:focus {
  outline: none;
}

.utility-bar a:hover,
.utility-bar a:focus-visible {
  color: var(--lime);
}

/* El foco del teclado no depende solo del color: contorno lima visible (el primer Tab de cada página llega al logo y después a estos enlaces). */
.utility-bar a:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
  border-radius: 3px;
}

.main-header {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  grid-template-areas: "search actions";
  align-items: center;
  gap: clamp(14px, 2.2vw, 28px);
  min-height: 62px;
  min-width: 0;
  padding-block: 10px;
}

.menu-toggle {
  display: none;
  grid-area: menu;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--bg);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.menu-toggle:hover,
.site-header[data-menu-open] .menu-toggle {
  background: rgb(255 255 255 / 12%);
}

.menu-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-width: 2;
}

/* LOGO PRINCIPAL: Logo_Elior_Energy_Completo (emblema + «ELIOR ENERGY»), recortado a su contenido: WebP de 200 px nativos para 70 px de ancho (≈ 3×). Ocupa las dos filas
   azules a la izquierda. El archivo lo define compartido/datos-legales.js (marca.logo) y lo genera scripts/make-logo-assets.mjs. */
.brand {
  display: flex;
  align-items: center;
  align-self: stretch;
  color: var(--bg);
}

.brand:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 6px;
}

.brand img {
  display: block;
  width: auto;
  height: 90px;
  aspect-ratio: 200 / 258;
  object-fit: contain;
}

.search-form {
  position: relative;
  display: flex;
  grid-area: search;
  height: 40px;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--bg);
}

.search-form:focus-within {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgb(193 255 0 / 30%);
}

.search-form__icon {
  display: grid;
  width: 38px;
  place-items: center;
  color: var(--prussian-soft);
  font-size: 19px;
}

.search-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
}

.search-form button {
  margin: 3px;
  border: 1px solid var(--lime-edge);
  border-radius: var(--radius-sm);
  padding: 0 18px;
  background: var(--lime-fill);
  color: #14240a;
  font-size: 13.5px;
  font-weight: 750;
  cursor: pointer;
}

.search-form button:hover {
  background: var(--lime-fill-hover);
}

.search-results {
  position: absolute;
  z-index: 160;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: none;
  overflow: auto;
  max-height: min(460px, 66vh);
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: 0 16px 34px rgb(0 49 83 / 20%);
  color: var(--ink);
}

.search-results.is-open {
  display: grid;
  animation: search-results-enter 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Grupos del autocompletar: Productos, Categorías y Marcas. */
.search-group + .search-group {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.search-group__title {
  margin: 4px 10px 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.search-result--category,
.search-result--subcategory,
.search-result--brand {
  min-height: 44px;
}

.search-result--all {
  margin-top: 4px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  color: var(--prussian);
  font-weight: 700;
}

.search-result {
  display: flex;
  align-items: center;
  min-height: 52px;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.search-result:hover,
.search-result:focus-visible,
.search-result.is-active {
  background: var(--surface);
  color: var(--prussian-soft);
  outline: none;
}

.search-result:hover .search-result__arrow,
.search-result:focus-visible .search-result__arrow,
.search-result.is-active .search-result__arrow { transform: translateX(3px); }

.search-result > span:not(.search-result__media) {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.search-result b {
  display: block;
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result__media {
  flex: none;
  overflow: hidden;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.search-result__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.search-result__meta {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result__price {
  color: var(--prussian-soft);
  font-size: 13px;
  font-weight: 700;
}

.search-result__arrow {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  color: var(--prussian-soft);
  transition: transform 160ms ease;
}

.search-results__empty { margin: 0; padding: 14px 12px; color: var(--muted); font-size: 13px; }

.account-actions {
  --acct-pad: 9px;
  --acct-icon: 22px;
  display: flex;
  grid-area: actions;
  align-items: center;
  gap: 4px;
}

.account-actions a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 var(--acct-pad);
  border-radius: var(--radius-md);
  color: rgb(255 255 255 / 92%);
  font-size: 12.5px;
  white-space: nowrap;
}

.account-actions a:hover {
  background: rgb(255 255 255 / 10%);
}

.account-actions img {
  width: var(--acct-icon);
  height: var(--acct-icon);
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.account-actions b {
  font-weight: 650;
}

/* Indicador compacto de productos añadidos al carrito: sobre la esquina del ícono, con o sin la etiqueta al lado. */
.cart-count-badge {
  position: absolute;
  top: 1px;
  left: calc(var(--acct-pad) + var(--acct-icon) - 9px);
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  place-items: center;
  border: 2px solid #034470;
  border-radius: 999px;
  background: var(--lime);
  color: #142000;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.cart-count-badge[hidden] { display: none; }

/* Navegación de categorías: una fila fina CLARA (azul suave de la marca) bajo la parte azul; el subrayado lima del enlace activo es su único acento.
   El menú sigue siendo dinámico (lo dibuja cargador-pagina.js desde la API). */
.category-nav {
  position: relative;
  z-index: 80;
  width: 100%;
  min-width: 0;
  min-height: 36px; /* una fila: el menú llega por la API y no debe hacer crecer el encabezado */
  border-bottom: 1px solid var(--border);
  background: var(--tint-blue);
  box-shadow: 0 10px 18px -16px rgb(0 49 83 / 60%);
  color: var(--prussian);
}

.category-nav__content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow: visible;
}

.category-nav__extra,
.menu-panel__head,
.menu-panel__search,
.menu-panel__account,
.menu-panel__title,
.menu-backdrop,
.category-nav__toggle {
  display: none;
}

.menu-panel__body {
  display: contents;
}

.category-nav__item {
  position: relative;
  flex: 0 0 auto;
}

.category-nav__item > a {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 9px 12px;
  box-shadow: inset 0 -3px 0 transparent;
  color: var(--prussian);
  font-size: 13px;
  font-weight: 650;
  line-height: 18px;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.category-nav__item:hover > a,
.category-nav__item:focus-within > a,
.category-nav__item:hover > .category-nav__more,
.category-nav__item:focus-within > .category-nav__more {
  background: rgb(0 49 83 / 6%);
  box-shadow: inset 0 -3px 0 var(--lime-edge);
  color: var(--prussian);
}

.category-nav__item > a:focus-visible,
.category-nav__more:focus-visible {
  outline: 2px solid var(--azure-bright);
  outline-offset: -2px;
}

/* «Más»: lo que no cabe en la fila de una línea (con 12 categorías la fila se partía en dos y el encabezado crecía). */
.category-nav__more {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  border: 0;
  background: none;
  box-shadow: inset 0 -3px 0 transparent;
  color: var(--prussian);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 18px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.category-nav__more::after {
  width: 6px;
  height: 6px;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  content: "";
  transform: translateY(-2px) rotate(45deg);
}

/* Menú editorial, sobrio y suave: aparece solo con hover o foco de teclado. Tarjeta clara sobre la fila azul, con filete verde arriba. */
.category-submenu {
  position: absolute;
  z-index: 100;
  top: 100%;
  left: var(--submenu-offset, 0px);
  box-sizing: border-box;
  width: min(480px, calc(100vw - 24px));
  min-width: min(250px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  padding: 9px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--lime-edge);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--bg);
  box-shadow: 0 14px 28px rgb(0 49 83 / 18%);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-7px);
  transition: opacity 170ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 170ms ease;
  visibility: hidden;
}

.category-nav__item:hover .category-submenu,
.category-nav__item:focus-within .category-submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.category-submenu ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-submenu li {
  min-width: 0;
}

.category-submenu a {
  display: block;
  min-width: 0;
  padding: 9px 11px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, padding-left 160ms ease;
}

.category-submenu a:hover,
.category-submenu a:focus-visible {
  padding-left: 15px;
  background: var(--surface);
  color: var(--prussian-soft);
  outline: none;
}
.eyebrow {
  margin: 0 0 12px;
  color: var(--prussian-soft);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Botones del sitio: la jerarquía de acciones es verde lima (la acción principal), contorno azul (secundaria) y azul sólido (acción sobre fondo claro).
   Alto de 40 px (48 px en pantallas táctiles); el ícono, si lo hay, acompaña al texto. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control-md, 40px);
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 10px);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.button svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.button:focus-visible {
  outline: 3px solid var(--prussian-soft);
  outline-offset: 2px;
}

.button--primary {
  border-color: var(--lime-edge);
  background: var(--lime-fill);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 50%), 0 6px 14px -8px rgb(98 140 0 / 70%);
  color: #14240a;
}

.button--primary:hover {
  background: var(--lime-fill-hover);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 40%), 0 8px 16px -8px rgb(98 140 0 / 80%);
}

.button--primary:active {
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 16%);
  transform: translateY(1px);
}

.button--secondary {
  border-color: var(--prussian);
  background: transparent;
  color: var(--prussian);
}

.button--secondary:hover {
  background: var(--prussian);
  color: var(--bg);
}

@media (pointer: coarse) {
  .button {
    min-height: var(--control-lg, 48px);
  }
}

/* ----------------------- FOOTER ----------------------- */
/* Del MISMO azul que el encabezado (--brand-gradient), con las esquinas superiores redondeadas y un hilo lima arriba: deja de ser un bloque. Compacto (~300 px en escritorio):
   marca con el logo completo, eslogan y redes de cada color; cuatro grupos de enlaces y una barra inferior con los datos de la empresa. El verde lima solo aparece en el hilo
   superior, en la raya bajo cada título de grupo, en el subrayado al pasar el cursor y en el foco del teclado. Lo monta cargador-pagina.js (footerMarkup). */
.site-footer {
  position: relative;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 26px 26px 0 0;
  background: var(--brand-gradient);
  color: rgb(255 255 255 / 84%);
}

.site-footer::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--lime) 0%, rgb(193 255 0 / 0%) 55%);
  content: "";
}

.site-footer__main {
  display: grid;
  grid-template-columns: 1.7fr repeat(4, minmax(0, 1fr));
  gap: 22px 28px;
  padding-block: 30px 24px;
}

.site-footer__brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0 18px;
}

.site-footer__logo {
  display: block;
  grid-row: 1 / span 2;
}

.site-footer__logo:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 6px;
}

.site-footer__logo img {
  display: block;
  width: auto;
  height: 104px;
  aspect-ratio: 200 / 258;
}

.site-footer__brand p {
  max-width: 36ch;
  margin: 2px 0 12px;
  color: rgb(255 255 255 / 80%);
  font-size: 13px;
  line-height: 1.5;
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

/* Redes con el color de su marca (ver [data-network] más abajo): fichas redondas pequeñas con el ícono blanco, sin chillar sobre el azul. */
.site-footer__social a {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: 50%;
  background: var(--network-fill, rgb(255 255 255 / 12%));
  color: #fff;
  box-shadow: 0 6px 14px -8px rgb(0 0 0 / 65%);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.site-footer__social a:hover {
  box-shadow: 0 10px 18px -8px var(--network, rgb(0 0 0 / 65%));
  transform: translateY(-2px);
}

/* Identidad de cada red (la usan el pie y Contacto): --network-fill es el relleno de su ficha y --network el color de su resplandor y de su borde al pasar el cursor. */
[data-network="instagram"] {
  --network: #dd2a7b;
  --network-fill: linear-gradient(135deg, #feda75 0%, #fa7e1e 26%, #d62976 56%, #962fbf 82%, #4f5bd5 100%);
}

[data-network="facebook"] {
  --network: #1877f2;
  --network-fill: #1877f2;
}

[data-network="tiktok"] {
  --network: #fe2c55;
  --network-fill: #111;
}

[data-network="tiktok"] svg {
  filter: drop-shadow(1px 1px 0 #fe2c55) drop-shadow(-1px -1px 0 #25f4ee);
}

[data-network="linkedin"] {
  --network: #0a66c2;
  --network-fill: #0a66c2;
}

.site-footer nav h2 {
  margin: 2px 0 10px;
  color: var(--bg);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.site-footer nav h2::after {
  display: block;
  width: 22px;
  height: 2px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--lime);
  content: "";
}

.site-footer nav a,
.site-footer__link-button {
  display: block;
  margin: 0;
  /* 13 px × 1,35 = 17,55 px + 2 × 3,25 px = 24,05 px: el objetivo táctil mínimo de WCAG 2.5.8 (con 3 px medía 23,55). */
  padding: 3.25px 0;
  color: rgb(255 255 255 / 78%);
  font-size: 13px;
  line-height: 1.35;
  transition: color 160ms ease;
}

.site-footer nav a:hover,
.site-footer__link-button:hover {
  color: var(--bg);
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-underline-offset: 3px;
}

.site-footer__link-button {
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  /* `font: inherit` también reinicia el interlineado: sin esto el botón de cookies medía 22 px (los enlaces, 24). */
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.site-footer a:focus-visible,
.site-footer__link-button:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 3px;
}

.site-footer__bar {
  background: rgb(0 20 36 / 38%);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  padding-block: 12px;
  color: rgb(255 255 255 / 80%);
  font-size: 12px;
  line-height: 1.5;
}

.site-footer__bottom p {
  margin: 0;
}

.site-footer__bottom a {
  display: inline;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 40%);
  text-underline-offset: 3px;
}

.site-footer__bottom a:hover {
  color: var(--bg);
  text-decoration-color: var(--lime);
}

/* Un número de teléfono nunca se parte entre dos líneas. */
.site-footer__bottom a[href^="tel:"] {
  white-space: nowrap;
}

/* ---------------------- RESPONSIVE --------------------- */
/* Compacto (tablet y móvil): el menú de categorías pasa a un panel que abre el botón «Menú» (sin JavaScript de scroll, sin fijar nada). */
@media (max-width: 1099px) {
  .main-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "menu search actions";
    gap: 12px;
  }
  .menu-toggle {
    display: inline-flex;
  }
  .account-actions {
    --acct-pad: 10px;
    gap: 2px;
  }
  .account-actions a {
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  /* Solo el ícono a la vista; el texto sigue ahí para lectores de pantalla. */
  .account-actions b {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  /* ---- Panel «Menú» (tablet y celular): cajón lateral con secciones ----
     Cabecera azul de la marca (logo + cerrar) · búsqueda · Mi cuenta y Mi carrito como tarjetas · categorías con acordeón · accesos de ayuda como tarjetas.
     Está FUERA del flujo (position: fixed): abrirlo no empuja ni redibuja la página; un fondo oscuro la separa y el desplazamiento de atrás se bloquea. */
  .category-nav {
    position: fixed;
    z-index: 2;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    width: min(392px, 92vw);
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0 22px 22px 0;
    background: var(--bg);
    box-shadow: 0 0 44px rgb(0 31 53 / 38%);
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 280ms;
  }
  .site-header[data-menu-open] .category-nav {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }
  .menu-backdrop {
    position: fixed;
    z-index: 1;
    inset: 0;
    display: block;
    background: rgb(0 22 38 / 56%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms ease, visibility 0s linear 240ms;
  }
  .site-header[data-menu-open] .menu-backdrop {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  html.menu-lock,
  html.menu-lock body {
    overflow: hidden;
  }

  .menu-panel__head {
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 18px;
    background: var(--brand-gradient);
    color: var(--bg);
  }
  .menu-panel__brand {
    display: flex;
    flex: none;
    align-items: center;
    border-radius: 8px;
  }
  .menu-panel__brand img {
    display: block;
    width: auto;
    height: 54px;
    aspect-ratio: 200 / 258;
    object-fit: contain;
  }
  .menu-panel__heading {
    flex: 1;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .menu-panel__close {
    display: grid;
    flex: none;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: 12px;
    background: rgb(255 255 255 / 8%);
    color: var(--bg);
    cursor: pointer;
    transition: background-color 150ms ease;
  }
  .menu-panel__close:hover {
    background: rgb(255 255 255 / 18%);
  }
  .menu-panel__brand:focus-visible,
  .menu-panel__close:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
  }

  .menu-panel__body {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 16px 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg);
    /* Barra de desplazamiento de la marca (delgada, azul Prusia sobre un riel azul claro) en vez de la gris del sistema. */
    scrollbar-width: thin;
    scrollbar-color: var(--prussian-soft) var(--tint-blue);
  }
  .menu-panel__body::-webkit-scrollbar {
    width: 10px;
  }
  .menu-panel__body::-webkit-scrollbar-track {
    background: var(--tint-blue);
    border-radius: 999px;
  }
  .menu-panel__body::-webkit-scrollbar-thumb {
    background: var(--prussian-soft);
    border: 2px solid var(--tint-blue);
    border-radius: 999px;
  }
  .menu-panel__body::-webkit-scrollbar-thumb:hover {
    background: var(--prussian);
  }
  /* Con el menú abierto hay UN solo buscador: el del encabezado se oculta (conserva su espacio: nada se mueve) y deja de ser enfocable. El del menú es el activo. */
  .site-header[data-menu-open] .main-header .search-form {
    visibility: hidden;
  }
  .menu-panel__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 5px 0 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--prussian-soft);
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }
  .menu-panel__search:focus-within {
    border-color: var(--azure-bright);
    box-shadow: 0 0 0 3px rgb(31 147 207 / 18%);
  }
  .menu-panel__search svg {
    flex: none;
  }
  .menu-panel__search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 16px;
  }
  .menu-panel__search button {
    flex: none;
    height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: var(--lime);
    color: var(--prussian);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  .menu-panel__account {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
  }
  .menu-panel__account a,
  .category-nav__extra a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--tint-blue);
    color: var(--prussian);
    font-size: 14.5px;
    font-weight: 650;
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
  }
  .menu-panel__account a svg,
  .category-nav__extra a svg {
    flex: none;
    color: var(--azure-bright);
  }
  .menu-panel__account a:hover,
  .category-nav__extra a:hover {
    border-color: var(--azure-bright);
    background: #e6f1f8;
  }
  .menu-panel__account a:focus-visible,
  .category-nav__extra a:focus-visible,
  .menu-panel__search button:focus-visible {
    outline: 2px solid var(--azure-bright);
    outline-offset: 2px;
  }
  .menu-panel__account .cart-count-badge {
    position: static;
    margin-left: auto;
  }

  .menu-panel__title {
    display: block;
    margin: 22px 4px 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Categorías: una lista limpia; las que tienen subcategorías se despliegan como acordeón dentro del panel. */
  .category-nav__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 2px;
    width: auto;
    margin: 0;
    padding: 0;
  }
  .category-nav__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-radius: 12px;
    transition: background-color 150ms ease;
  }
  .category-nav__item > a {
    grid-column: 1;
    justify-content: flex-start;
    min-height: 48px;
    padding: 10px 12px;
    box-shadow: none;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.3;
  }
  .category-nav__item:hover > a,
  .category-nav__item:focus-within > a {
    background: rgb(0 49 83 / 6%);
    box-shadow: none;
  }
  .category-nav__toggle {
    display: grid;
    grid-column: 2;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--prussian-soft);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
  }
  .category-nav__toggle:hover {
    background: rgb(0 49 83 / 8%);
  }
  .category-nav__toggle:focus-visible {
    outline: 2px solid var(--azure-bright);
    outline-offset: -2px;
  }
  .category-nav__toggle svg {
    transition: transform 220ms ease;
  }
  .category-nav__item[data-open] {
    background: var(--tint-blue);
  }
  .category-nav__item[data-open] .category-nav__toggle {
    color: var(--prussian);
  }
  .category-nav__item[data-open] .category-nav__toggle svg {
    transform: rotate(180deg);
  }
  .category-nav__item > .category-submenu,
  .category-nav__item--more {
    display: none;
  }
  /* Acordeón: el submenú de escritorio (flotante) se vuelve una lista dentro del panel, con filete de acento a la izquierda. */
  .category-nav__item[data-open] > .category-submenu {
    position: static;
    display: block;
    grid-column: 1 / -1;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0 12px 10px 18px;
    padding: 2px 0 2px 12px;
    border: 0;
    border-left: 2px solid var(--lime-edge);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
    transition: none;
  }
  .category-nav__item[data-open] .category-submenu ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .category-nav__item[data-open] .category-submenu a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 14px;
  }
  .category-nav__item[data-open] .category-submenu a:hover,
  .category-nav__item[data-open] .category-submenu a:focus-visible {
    padding-left: 10px;
    background: rgb(255 255 255 / 70%);
  }

  /* Accesos de ayuda: cuatro tarjetas (2 × 2). */
  .category-nav__extra {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .category-nav__extra a {
    font-size: 14px;
  }

  .site-footer__main {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

/* Tableta: la marca pasa a UNA fila (logo, eslogan y redes) sobre los cuatro grupos, en vez de ocupar un bloque alto. */
@media (min-width: 681px) and (max-width: 1099px) {
  .site-footer__logo img {
    height: 88px;
  }
  .site-footer__brand {
    padding-bottom: 14px;
    border-bottom: 1px solid rgb(255 255 255 / 14%);
  }
  .site-footer__brand p {
    max-width: none;
  }
}

@media (max-width: 680px) {
  .container {
    width: min(100% - 28px, var(--page-max, 1180px));
  }
  .utility-bar {
    display: none;
  }
  .main-header {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "menu actions" "search search";
    gap: 8px 10px;
    padding-block: 8px 10px;
  }
  .account-actions {
    justify-self: end;
  }
  .brand img {
    height: 88px;
  }
  .search-form {
    height: 42px;
  }
  .search-form button {
    padding: 0 14px;
  }
  .site-footer {
    border-radius: 20px 20px 0 0;
  }
  .site-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
    padding-block: 24px 16px;
  }
  .site-footer__logo img {
    height: 88px;
  }
  .site-footer__brand p {
    max-width: none;
  }
  .site-footer nav a,
  .site-footer__link-button {
    padding-block: 4px;
  }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 360px) {
  .site-footer__main {
    grid-template-columns: 1fr;
  }
}

@media print {
  .site-footer {
    display: none;
  }
}

/* ------------------- TÍTULOS Y ENCABEZADOS DE PÁGINA ------------------- */
/* Título de página único del sitio: azul Prusia → azul de marca → verde fresco (--title-gradient) a la medida del texto, ESTÁTICO; sin soporte de recorte de fondo queda azul Prusia
   sólido. Tamaño de la escala común (--title-page, 30 → 44 px). Todos los títulos principales van CENTRADOS con el mismo filete verde (.page-title, .legal-hero, .quote-page,
   .about-hero, .catalog-heading, .cart-page__intro, .brand-hero): el degradado obliga a que la caja mida «fit-content», así que se centra con margin-inline:auto. El contenido funcional
   (formularios, tablas, descripciones) conserva su alineación. Inicio usa .title-gradient-text (inicio.css). */
.page-title {
  margin: 0;
  color: var(--prussian);
  font-size: var(--title-page);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .page-title,
  .legal-hero h1,
  .quote-page h1,
  .about-hero h1 {
    width: fit-content;
    max-width: 100%;
    background-image: var(--title-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* Degradado ANIMADO del título (azul Prusia → azul Elior → verde Elior): el color fluye siempre en el mismo sentido y SOLO si la persona no pidió reducir el movimiento (con
   prefers-reduced-motion queda el degradado estático). La baldosa (--title-gradient-flow) es cíclica y mide el doble del título; desplazarla de 0 % a 200 % mueve el color exactamente una
   baldosa, así que el bucle (14 s) no se nota. 168 pasos = 12 repintados por segundo (medido con la CPU 4× más lenta: 20 pasos/s costaban ≈ 65–90 ms/s). El costo lo mide
   scripts/qa/verify-title-gradient.mjs; si una medición lo encarece, se baja la intensidad o se borra este bloque (el degradado base no depende de él). */
@media (prefers-reduced-motion: no-preference) {
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .page-title,
    .legal-hero h1,
    .quote-page h1,
    .about-hero h1 {
      background-image: var(--title-gradient-flow);
      background-size: 200% 100%;
      animation: title-gradient-drift 14s steps(168, end) infinite;
    }
  }
}

@keyframes title-gradient-drift {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}

.page-hero {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding-block: 28px 18px;
  text-align: center;
}

.page-title {
  margin-inline: auto;
  text-align: center;
}

.page-title::after,
.legal-hero h1::after,
.quote-page h1::after,
.about-hero h1::after {
  display: block;
  width: 44px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 2px;
  background: var(--lime);
  content: "";
}


.page-hero__lead {
  max-width: var(--measure);
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .category-nav,
  .menu-backdrop,
  .category-nav__toggle svg {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

@media (max-width: 680px) {
  .page-hero {
    padding-block: 20px 14px;
  }
  .page-hero__lead {
    font-size: 15px;
  }
}

@keyframes search-results-enter {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}