/* REFINE — base, header and footer.
 * Extracted from prototipo/public/css/styles.css (BASE, header/nav/menu/account-label
 * components, 06 FOOTER, and their MOTION and RESPONSIVE rules). Same selectors, same values.
 *
 * Block theme adjustments (spec theme-base, T5):
 * - No @layer: in WordPress, layered rules lose to every unlayered stylesheet (global styles,
 *   block library, WooCommerce), so the prototype order base → components → footer → motion →
 *   responsive is kept by source order instead.
 * - .site-header, the mobile menu and the skip link make room for the admin bar.
 * - The skip link is the one core prints (.skip-link.screen-reader-text), styled like the prototype.
 * - The footer template part sits flush against the content, as in the prototype.
 * Tokens: tokens.css.
 */

/* Escala del header: 1 arriba de todo, 0.8 al scrollear. Registrada para que se anime. */
@property --nav-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

/* ═════════════════════════ BASE ═════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--refine-beige) var(--bg-primary);
  scrollbar-width: thin;
}

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
strong { font-weight: 700; }

::selection { background: var(--summer-accent); color: var(--refine-ink); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Core skip link (block themes print it before .wp-site-blocks). Core forces
   `position: absolute !important`; at the top of the page it sits where the prototype's
   fixed link does. The `html` prefix outranks core's `.skip-link.screen-reader-text(:focus)`. */
html .skip-link.screen-reader-text,
html .skip-link.screen-reader-text:focus {
  top: calc(var(--space-xs) + var(--wp-admin--admin-bar--height, 0px));
  left: var(--space-xs);
  z-index: 100;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  padding: var(--space-xs) var(--space-sm);
  background: var(--refine-ink);
  color: var(--refine-offwhite);
  font-size: var(--t-sm);
  line-height: 1.55;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}
html .skip-link.screen-reader-text:focus-visible { transform: none; }

.visually-hidden {
  position: absolute !important; /* prototype utility: must win over any positioned rule */
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.noscript-note {
  padding: var(--space-xl) var(--gutter);
  font-family: var(--font-display);
  font-size: var(--fs-heading);
}

/* Block theme: the footer template part follows the content with no block gap
   (core adds `margin-block-start` to every child of .wp-site-blocks). */
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }

/* Block theme: the fixed header floats over the hero by design. Pages without a hero
   ([data-hero], set on the hero section in Fase 3) start the content below the header.
   The admin bar is already handled by core's html margin, so it is not added here. */
.wp-site-blocks > main:not(:has([data-hero])) {
  margin-block-start: 0;
  padding-block-start: calc(var(--header-top) + var(--header-h) + var(--space-md));
}
/* 404 (templates/404.html): simple, like the rest of the site. The same air above and below as
   My Account (spec design-fixes, D1, and the inventory of screens) and the title in the brand's
   display type. Same specificity as the rule above, later, so the padding here wins. */
.wp-site-blocks > main.nf {
  padding-block: calc(var(--header-top) + var(--header-h) + var(--space-2xl)) var(--space-2xl);
}
.nf > * + * { margin-block-start: var(--space-md); }
.nf h1 {
  font-family: var(--font-display);
  font-size: var(--fs-heading);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--track-heading);
}
/* Pages with a hero (Home, Summer): the hero starts at the top edge, under the fixed header,
   so the root block gap must not push it down (spec home-summer, D4). */
.wp-site-blocks > main:has([data-hero]) { margin-block-start: 0; }

/* ═════════════════════════ COMPONENTES ═════════════════════════ */

/* — Logo (SVG, spec content-brand-pass D9) —
   La imagen toma el tamaño del font-size del lugar donde está: la marca es ~2,53:1 y el texto
   «refinelab.» ocupaba ~4,3em de ancho, así que 1,7em de alto da el mismo ancho.
   `img.logo__img` (0,1,1, and base.css loads after WooCommerce's sheets) beats woocommerce-layout.css's
   `.woocommerce-page img { height: auto; max-width: 100% }`: inside the shrink-to-fit `.logo` that
   rule left the logo at 0×0 on every WooCommerce page (checkout, confirmation, My Account; DF-6). */
.logo {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
img.logo__img {
  display: block;
  height: 1.7em;
  width: auto;
  max-width: none;
}

/* — Header — */
.site-header {
  --nav-scale: 1;
  position: fixed;
  top: calc(var(--header-top) + var(--wp-admin--admin-bar--height, 0px));
  left: 0;
  right: 0;
  z-index: 50;
  transition: --nav-scale var(--dur-base) var(--ease-out);
}
/* 2026-09-27: la barra es siempre vidrio (velo translúcido + blur fuerte). Ya NO se achica
   al scrollear (el 0.8 dejaba el nav diminuto, pedido del usuario): --nav-scale queda en 1. */
.site-header__bar {
  display: flex;
  align-items: center;
  height: calc(var(--header-h) * var(--nav-scale));
  padding-inline: var(--gutter);
  background: var(--header-bg-scrolled);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

/* 2026-09-27: header más minimal (ref conceptbarre.com): logo más chico, links a 12px
   fijos en peso medio, barra más fina. */
.site-header__logo {
  font-size: calc(clamp(21px, 1.4vw, 27px) * var(--nav-scale));
  color: var(--refine-ink);
}
/* The logo file keeps empty space inside its viewBox: 23.85% of its height above the ink and
   5.65% below (getBBox(), spec content-fixes). Centred as a box, the ink sat ~3px low, ~3px from
   the bottom edge of the bar and ~4px under the centre of the menu text. Moving the image up by
   half the difference centres the ink in the bar (~6.5px of air on each side) without changing
   its size, the bar or anything around it. Header only: the other logos keep the file as is. */
.site-header__logo .logo__img { translate: 0 calc((0.0565 - 0.2385) / 2 * 1.7em); }

.site-nav { margin-left: auto; width: min(53.5vw, 1040px); }
.site-nav__list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-nav__list a,
.account-label,
.menu-toggle {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(12px * var(--nav-scale));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--refine-ink);
}
/* Hover: aparece un punto final, como el de "refinelab." (sin desplazar el texto) */
.site-nav__list a,
.mobile-menu__list a {
  position: relative;
}
.site-nav__list a { display: inline-block; padding-block: 10px; }
/* Desktop: logo y links +10% (2026-09-27). El alto de la barra sube en tokens.css. */
@media (min-width: 1024px) {
  .site-header__logo { font-size: calc(clamp(21px, 1.4vw, 27px) * 0.99 * var(--nav-scale)); } /* +10% y luego -10% */
  .site-nav__list a { font-size: calc(11.88px * var(--nav-scale)); font-weight: 600; } /* 13.2px -10%; 600 de prueba (Mulish carga 400/600/700: el 500 se veía como 400) */
}
/* círculo sólido (no un "." tipográfico) para tener la densidad del punto de "lab." */
.site-nav__list a::after,
.mobile-menu__list a::after {
  content: "";
  position: absolute;
  left: 100%;
  width: var(--nav-dot);
  height: var(--nav-dot);
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: translateX(-0.2em);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.site-nav__list a::after { --nav-dot: 0.27em; margin-left: 0.12em; bottom: calc(10px + 0.4em); }
.mobile-menu__list a::after { --nav-dot: 0.15em; margin-left: 0.08em; bottom: 0.2em; }
.site-nav__list a:hover::after,
.site-nav__list a:focus-visible::after,
.mobile-menu__list a:hover::after,
.mobile-menu__list a:focus-visible::after {
  opacity: 1;
  transform: none;
}

.menu-toggle {
  display: none;
  margin-left: auto;
  min-height: 44px;
  padding-left: var(--space-sm);
  letter-spacing: 0.08em;
}

/* — Menú mobile — */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  /* 2026-09-27, ref conceptbarre.com: lista a la derecha y centrada en vertical, sobre la
     página desenfocada (blur suave + velo beige translúcido) en vez de un fondo opaco. */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: calc(var(--header-top) + var(--header-h) + var(--space-md) + var(--wp-admin--admin-bar--height, 0px)) var(--gutter) var(--space-lg);
  background: color-mix(in srgb, var(--refine-beige) 55%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; }
.mobile-menu__list {
  display: grid;
  justify-items: end;
  gap: 0;
  text-align: right;
}
.mobile-menu__list a {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  /* tamaño de la ref (18px, renglones pegados); el padding da ~28px de área táctil */
  padding-block: 4px;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--refine-ink);
  transform: translateY(8px);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms + 80ms);
}
.mobile-menu.is-open .mobile-menu__list a { transform: none; opacity: 1; }

/* — "Mi cuenta": label flotante inferior, vidrio esmerilado suave (pedido del cliente) — */
.account-label {
  position: fixed;
  left: 50%;
  bottom: clamp(14px, 3.2vh, 34px);
  z-index: 150; /* por encima de los casos de refiners (z-index local hasta 100) */
  display: inline-flex;
  align-items: center;
  /* 2026-09-27: píldora más chica, acorde al concepto minimal (40px → 34px de alto) */
  min-height: 34px;
  padding: 8px 13px; /* lateral 18 → 13px (2026-09-28) */
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 6px 24px -12px var(--glass-shadow);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  translate: -50% 0;
  transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.account-label:hover { background: var(--glass-bg-hover); }
/* con JS: oculto hasta que JS decide mostrarlo (sin JS queda siempre visible) */
.js .account-label:not(.is-visible) { opacity: 0; translate: -50% 16px; pointer-events: none; }

/* ═════════════════════════ 06 FOOTER ═════════════════════════ */
.site-footer {
  position: relative;
  padding: var(--space-2xl) var(--gutter) var(--space-lg);
  background: var(--bg-inverse);
  color: var(--text-inverse);
  /* navegación a la izquierda (cols 1–5), wordmark grande arriba a la derecha (cols 6–12) */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-md);
  align-items: start;
}
.site-footer__grid {
  grid-column: 1 / 6;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-md);
}
.site-footer__heading {
  margin-bottom: var(--space-sm);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  opacity: 0.55;
}
.site-footer__col a {
  display: inline-block;
  padding-block: 4px;
  font-size: var(--t-sm);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 2px) / 0 1px no-repeat;
  transition: background-size var(--dur-fast) var(--ease-out);
}
.site-footer__col a:hover { background-size: 100% 1px; }
/* the address is one long word: if a font or the zoom makes it wider than its column, it breaks
   instead of overflowing (spec content-fixes, D9) */
.site-footer__email { max-width: 100%; overflow-wrap: anywhere; }

.site-footer__brand {
  grid-column: 6 / -1;
  grid-row: 1;
  justify-self: end;
  display: grid;
  justify-items: end;
  /* Con el padding del wordmark compensando su desborde, este gap ES el aire que se ve. */
  gap: clamp(8px, 0.65vw, 12px);
}
.site-footer__tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  opacity: 0.7;
}
.site-footer__tagline strong { font-weight: 700; }
.site-footer__wordmark {
  display: flex;
  font-size: calc(clamp(64px, 8.6vw, 172px) * var(--type-display));
  line-height: 1;
}
.site-footer__legal {
  grid-column: 1 / -1;
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline-inverse);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  opacity: 0.6;
}
.site-footer__cookies a { text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 767px) {
  /* En pantallas chicas el aviso va en su propia línea: pegado al copyright se cortaba a mitad de frase. */
  .site-footer__cookies { display: block; margin-top: var(--space-xs); }
}
@media (min-width: 768px) {
  /* Copyright a la izquierda y aviso de cookies contra el borde derecho (Fran). */
  .site-footer__legal { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); }
}

/* ═════════════════════════ MOTION ═════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mobile-menu, .mobile-menu__list a, .site-header { transition: none; }
  .mobile-menu__list a { transform: none; }
}

/* ═════════════════════════ RESPONSIVE ═════════════════════════ */

/* ≤1023 — tablet y mobile */
@media (max-width: 1023px) {
  .site-nav { display: none; }
  /* 10px: más minimal (pedido 2026-09-27 para "Cerrar"; el mismo botón dice "Menú", va igual para no saltar de tamaño) */
  /* "Menú"/"Cerrar" en IBM Plex Mono, como la lista del menú mobile (pedido 2026-09-27) */
  /* Menú abierto: la barra pierde su vidrio propio y el logo + "Cerrar" quedan flotando
     sobre el blur del menú, como una sola capa (2026-09-27). */
  .site-header__bar { transition: background-color var(--dur-base) var(--ease-out); }
  .site-header:has([data-menu-toggle][aria-expanded="true"]) .site-header__bar {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .menu-toggle { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: calc(11px * var(--nav-scale)); } /* 11px = 10px +10% */
  /* En responsive "Mi cuenta" vive dentro del menú, no como label flotante */
  .account-label { display: none; }

  /* Footer */
  .site-footer { grid-template-columns: minmax(0, 1fr); }
  /* El bloque de marca sigue pegado al margen izquierdo, pero la bajada se alinea al borde
     derecho del wordmark (como en desktop) en vez de colgar de la "r". */
  .site-footer__brand { grid-column: 1; grid-row: 1; justify-self: start; justify-items: end; }
  .site-footer__wordmark { font-size: calc(clamp(56px, 15vw, 150px) * var(--type-display)); }
  .site-footer__grid { grid-column: 1; grid-row: 2; margin-top: var(--space-xl); row-gap: var(--space-lg); }
}

/* ≤767 — mobile */
@media (max-width: 767px) {
  /* Footer mobile: Navegación | Social arriba, Legal abajo a la izquierda */
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__col:nth-child(1) { grid-column: 1; grid-row: 1; }
  .site-footer__col:nth-child(2) { grid-column: 2; grid-row: 1; }
  .site-footer__col:nth-child(3) { grid-column: 1; grid-row: 2; }
}

/* ═════════════════════════ CABECERA Y PIE MÍNIMOS ═════════════════════════
   Checkout y página de campaña (spec summer-subscribe, D9): solo el logo arriba y el pie legal.
   Antes vivían en checkout.css; se mueven acá, no se duplican. */
.co-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--gutter);
  border-bottom: 1px solid var(--summer-line);
}
.co-header .logo { font-size: clamp(22px, 1.6vw, 30px); }
.co-footer { padding: var(--space-lg) var(--gutter); border-top: 1px solid var(--summer-line); font-size: 13px; color: var(--summer-ink-soft); }
.co-footer a { color: inherit; }
.co-footer a:hover,
.co-footer a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }