/* ==========================================================================
   Gladiatrix · Home v2 «Escaparate técnico» — preview stylesheet
   Blush ground (animated by js/gx-bg.js), teal ink, Shrikhand titles, Karla
   text, every action a pill, prices as the loudest Karla on the page.
   Recipes lifted from the design brief (pills, sticker, tape, scribble,
   review card, press row, mega-menu grammar) and from fav-proto.css.
   Type floor: nothing under 15 px.
   ========================================================================== */

/* 0 · fonts ------------------------------------------------------------- */
@font-face {
  font-family: "Karla";
  src: url("../fonts/Karla-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shrikhand";
  src: url("../fonts/Shrikhand-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 1 · tokens, base --------------------------------------------------------- */
:root, .gx-home {
  --gx-teal: #304f5a;
  --gx-teal-deep: #284f5c;
  --gx-fucsia: #f62dae;
  --gx-fucsia-hover: #d4148f; /* interactive fill only: white on it 4.9:1 */
  --gx-pink: #ffacd8;
  --gx-blush: #ffe4f2;
  --gx-blush-deep: #ffdef1;
  --gx-blush-soft: #fff2f9;
  --gx-disc: #ffcdea;
  --gx-white: #fff;
  --gx-line: rgba(48, 79, 90, .14);
  --gx-line-strong: rgba(48, 79, 90, .35);
  --gx-line-on-teal: rgba(255, 228, 242, .24);
  --gx-wash: rgba(48, 79, 90, .6);
  --gx-wash-strong: rgba(48, 79, 90, .66);
  --gx-ease: cubic-bezier(.2, .8, .2, 1);
  --gx-gutter: clamp(16px, 4vw, 40px);
  --gx-frame-gap: var(--gx-gutter); /* the navbar pill and the hero frame share this side gap, so they are exactly as wide */
  --gx-hero-inset: 34px; /* hero text starts where the first navbar link's text starts */
  --gx-wrap: 1240px;
  --gx-wrap-wide: 1320px;
  --gx-text: 1140px;
  --gx-bleed: clamp(0px, (100vw - 1240px) / 2, 40px); /* how far the two product grids step out of the column */
  --gx-sec: clamp(80px, 10vw, 144px);
  --gx-gap: clamp(112px, 15vh, 200px); /* the air between two sections */
  --gx-r-frame: clamp(20px, 3vw, 32px);
  --gx-r-card: 20px;
  --gx-r-photo: 14px;
  --gx-r-tile: 16px;
  --gx-r-sq: 8px;
  --gx-shadow-card: 0 2px 3px rgba(48, 79, 90, .12), 0 20px 38px rgba(48, 79, 90, .18);
  --gx-shadow-lift: 0 24px 40px -22px rgba(48, 79, 90, .45);
  --gx-shadow-nav: 0 28px 44px -24px rgba(48, 79, 90, .38);
  --gx-shadow-sticker: 0 1px 1px rgba(48, 79, 90, .12), 0 6px 14px rgba(48, 79, 90, .16);
  --gx-sans: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gx-display: "Shrikhand", Georgia, serif;
  --gx-price: 26px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 100px; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: #ffe4f2;
  /* pink, with pale rojo teja and azul índigo drifting through (the WebGL ground in js/gx-bg.js draws the moving version) */
  background-image:
    radial-gradient(64vmax 46vmax at 8% 6%, rgba(246, 171, 147, .62) 0%, transparent 68%),
    radial-gradient(58vmax 50vmax at 96% 34%, rgba(187, 183, 246, .72) 0%, transparent 68%),
    radial-gradient(70vmax 52vmax at 34% 78%, rgba(255, 189, 221, .6) 0%, transparent 70%),
    radial-gradient(50vmax 40vmax at 90% 100%, rgba(246, 171, 147, .5) 0%, transparent 70%);
  background-attachment: fixed;
  color: #304f5a;
  font: 400 17px/1.65 "Karla", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html.gx-lock { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
svg[hidden], body > svg[hidden] { display: none !important; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }

/* the ground: one fixed canvas under everything (js/gx-bg.js), static tile when it cannot run */
.gx-ground { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
html.gx-static .gx-home::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23ffffff' transform='translate(19 40) scale(0.03)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(108 51) scale(0.04)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(170 20) scale(0.09)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(247 50) scale(0.09)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(314 54) scale(0.03)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(445 17) scale(0.05)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(605 39) scale(0.05)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(15 86) scale(0.04)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(167 107) scale(0.06)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(259 113) scale(0.04)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(318 120) scale(0.06)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(371 105) scale(0.04)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(460 86) scale(0.03)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(547 96) scale(0.05)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(616 87) scale(0.03)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(40 157) scale(0.05)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(111 172) scale(0.06)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(192 167) scale(0.09)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(235 167) scale(0.04)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(333 157) scale(0.06)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(403 187) scale(0.09)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(22 229) scale(0.04)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(189 233) scale(0.05)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(248 251) scale(0.05)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(395 255) scale(0.03)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(99 300) scale(0.06)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(197 316) scale(0.03)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(227 318) scale(0.09)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(370 305) scale(0.06)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(600 301) scale(0.06)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(25 373) scale(0.05)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(119 375) scale(0.03)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(232 391) scale(0.03)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(324 371) scale(0.05)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(372 398) scale(0.09)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(520 402) scale(0.04)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(106 455) scale(0.03)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(233 464) scale(0.05)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(481 443) scale(0.03)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(522 457) scale(0.09)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(609 474) scale(0.03)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(29 540) scale(0.04)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(181 513) scale(0.06)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(266 541) scale(0.04)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(322 530) scale(0.04)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(605 516) scale(0.03)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(123 600) scale(0.04)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(161 600) scale(0.09)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(243 586) scale(0.05)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(474 619) scale(0.04)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(532 618) scale(0.04)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3Cpath fill='%23ffffff' transform='translate(614 587) scale(0.06)' d='M50 2C54 35 65 46 98 50 65 54 54 65 50 98 46 65 35 54 2 50 35 46 46 35 50 2Z'/%3E%3C/svg%3E") 0 0 / 640px 640px;
}
@media print { .gx-ground { display: none; } }

.gx-home { position: relative; z-index: 1; overflow-x: clip; }
.gx-home > *, .gx-home main > * { position: relative; z-index: 1; }
.gx-home [class*="gx-"] > .wp-block-group__inner-container { display: contents; }

/* the cursor: the system's own (the user asked for a normal one, with nothing following the mouse); the hand over
   everything that can be clicked */
a, button, .gx-btn, summary, [role="button"], label { cursor: pointer; }

/* focus rings: pink halo + teal line on the light ground, inverted on teal */
.gx-home :focus-visible, .gx-mnav :focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--gx-disc), 0 0 0 5px var(--gx-teal); }
.gx-hero__frame :focus-visible { box-shadow: 0 0 0 3px var(--gx-teal), 0 0 0 5px var(--gx-blush); }

/* visibility trick: only [data-gx-in] hides, only with .gx-js, never for more than 2.5 s */
.gx-js [data-gx-in] { visibility: hidden; }

/* 2 · layout grammar ------------------------------------------------------ */
.gx-wrap { width: 100%; max-width: var(--gx-wrap); margin: 0 auto; padding: 0 var(--gx-gutter); }
.gx-wrap--wide { max-width: var(--gx-wrap-wide); }
.gx-text { width: 100%; max-width: var(--gx-text); margin: 0 auto; padding: 0 var(--gx-gutter); }
.gx-sec { padding: var(--gx-sec) 0; }


.gx-h2 {
  font: 400 clamp(36px, 1.5vw + 26px, 52px)/1.12 var(--gx-display);
  letter-spacing: .5px;
  color: var(--gx-teal);
  text-wrap: balance;
}
.gx-h3 { font: 400 26px/1.15 var(--gx-display); color: var(--gx-teal); }
.gx-sub { max-width: 58ch; margin: 16px 0 0; font: 400 17px/1.65 var(--gx-sans); }
.gx-lead { max-width: 34ch; font: 500 21px/1.5 var(--gx-sans); }
/* no lonely last words: every paragraph avoids ending on a stray word, and the short leads break into even lines */
:where(.gx-home) p { text-wrap: pretty; }
.gx-unisex__lead, .gx-pdv__p, .gx-work__sub, .gx-stat__t, .gx-co__founder, .gx-promise__lead { text-wrap: balance; }
.gx-note { max-width: 62ch; font: 400 15px/1.55 var(--gx-sans); opacity: .85; }
/* a 30 px pill drawn inside a 44 px tap box (the box is what a finger gets) */
.gx-tag {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -7px 0;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--gx-blush);
  font: 800 15px/1 var(--gx-sans);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
}
.gx-tag::before { content: ""; position: absolute; z-index: -1; inset: 7px 0; border-radius: 999px; background: var(--gx-teal); }

/* spec rows */
.gx-spec-rows { margin: 0; padding: 0; }
.gx-spec-rows > div { display: grid; grid-template-columns: 38% 1fr; gap: 16px; padding: 13px 0; border-top: 1px solid var(--gx-line); }
.gx-spec-rows > div:last-child { border-bottom: 1px solid var(--gx-line); }
.gx-spec-rows dt { margin: 0; padding-top: 3px; font: 800 16px/1.3 var(--gx-sans); letter-spacing: 1.4px; text-transform: uppercase; }
.gx-spec-rows dd { margin: 0; font: 700 19px/1.35 var(--gx-sans); }
.gx-num { font: inherit; font-weight: 800; font-variant-numeric: tabular-nums; }
.gx-nowrap { white-space: nowrap; }

/* prices: exactly as the shop prints them */
.gx-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font: 800 var(--gx-price)/1 var(--gx-sans); font-variant-numeric: tabular-nums; color: var(--gx-teal); }
.gx-price bdi { display: inline-block; }
.gx-price small { font: 700 15px/1.2 var(--gx-sans); opacity: .85; }
.gx-price .gx-from { font: 800 15px/1.2 var(--gx-sans); letter-spacing: 1.4px; text-transform: uppercase; opacity: 1; }
.gx-price__old {
  position: relative;
  font: 700 17px/1.2 var(--gx-sans);
  opacity: .85;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / var(--s, 100%) 2px;
}
.gx-price--lg { --gx-price: 28px; }

/* pills */
.gx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 30px;
  border: 1px solid var(--gx-teal);
  border-radius: 999px;
  background: var(--gx-teal);
  color: #fff;
  font: 500 16px/1 var(--gx-sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  line-height: 1.25;
  max-width: 100%;
  transition: background-color .2s linear, color .2s linear, border-color .2s linear, box-shadow .3s var(--gx-ease);
}
.gx-btn--arrow::after { flex: none; }
.gx-btn:hover, .gx-btn:focus-visible { background: var(--gx-fucsia-hover); border-color: var(--gx-fucsia-hover); color: #fff; }
.gx-btn--lg { padding: 22px 34px; font-size: 18px; }
.gx-btn--light { background: var(--gx-blush); border-color: var(--gx-blush); color: var(--gx-teal); }
.gx-btn--outline { background: transparent; color: var(--gx-teal); }
.gx-btn--outline:hover, .gx-btn--outline:focus-visible { background: var(--gx-teal); border-color: var(--gx-teal); color: #fff; }
.gx-btn--outline-blush { background: transparent; border-color: var(--gx-blush); color: var(--gx-blush); }
.gx-btn--outline-blush:hover, .gx-btn--outline-blush:focus-visible { background: var(--gx-blush); border-color: var(--gx-blush); color: var(--gx-teal); }
.gx-btn--arrow::after { content: "\2192"; letter-spacing: 0; transition: transform .25s var(--gx-ease); }
.gx-btn--arrow:hover::after { transform: translateX(4px); }

/* cards */
.gx-card { background: var(--gx-blush-soft); border: 1px solid var(--gx-line); border-radius: var(--gx-r-card); transition: transform .3s var(--gx-ease), box-shadow .3s var(--gx-ease); }
@media (hover: hover) {
  .gx-card:hover, .gx-card:focus-within { transform: translateY(-4px); box-shadow: var(--gx-shadow-lift); }
}

/* interface icons painted in currentColor */
.gx-ico { display: block; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.gx-ico--search { --m: url("../img/ui/search.svg"); }
.gx-ico--account { --m: url("../img/ui/account.svg"); }
.gx-ico--bag { --m: url("../img/ui/bag.svg"); }
.gx-ico--menu { --m: url("../img/ui/menu.svg"); }
.gx-ico--close { --m: url("../img/ui/close.svg"); }
.gx-ico--instagram { --m: url("../img/ui/instagram.svg"); }
.gx-ico--tiktok { --m: url("../img/ui/tiktok.svg"); }
.gx-ico--linkedin { --m: url("../img/ui/linkedin.svg"); }
.gx-ico--pinterest { --m: url("../img/ui/pinterest.svg"); }

/* 3 · navbar píldora ------------------------------------------------------ */
.gx-nav {
  --gx-nav-h: 80px;   /* the user: «con más altura, no mucho más» (was 68) */
  position: sticky;
  top: 12px;
  z-index: 60;
  height: 0;
  display: flex;
  justify-content: center;
  padding: 0 var(--gx-frame-gap);
  pointer-events: none;
}
/* not transparent (the user's choice): the soft pink the navbar takes on hover, when a menu opens, everywhere; the
   letters and icons always in the site's dark green; the hover circles in the menu's pink */
.gx-nav {
  --gx-halo-l: none;
  --gx-halo-r: none;
  --gx-drop-l: none;
  --gx-drop-r: none;
  --gx-ink-l: var(--gx-teal-deep);
  --gx-ink-r: var(--gx-teal-deep);
  --gx-hov-l: var(--gx-disc);
  --gx-hov-r: var(--gx-disc);
  --gx-cnt-bg: var(--gx-teal);
  --gx-cnt-fg: var(--gx-blush);
}
.gx-nav__pill {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  height: var(--gx-nav-h);
  padding: 0 12px 0 20px;
  border: 1px solid var(--gx-line);
  border-radius: 999px;
  background: var(--gx-blush-soft);
  box-shadow: 0 22px 46px -22px rgba(9, 21, 27, .45);
  transition: height .3s var(--gx-ease), box-shadow .3s var(--gx-ease);
}
.gx-nav.is-scrolled { --gx-nav-h: 72px; }
.gx-nav.is-scrolled .gx-nav__pill { box-shadow: 0 16px 32px -22px rgba(9, 21, 27, .45); }
.gx-nav__left { position: relative; z-index: 2; justify-self: start; display: flex; align-items: center; }   /* above the logo's white aura, which reaches the last link on narrow desktops */
.gx-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--gx-ink-l);
  text-shadow: var(--gx-halo-l);
  transition: color .3s ease;
  font: 400 18px/1 var(--gx-display);
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
}
.gx-nav__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 2px;
  border-radius: 2px;
  background: var(--gx-fucsia);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .28s var(--gx-ease);
}
.gx-nav__link:hover::after, .gx-nav__link:focus-visible::after, .gx-nav__link[aria-expanded="true"]::after { transform: scaleX(1); }
.gx-chev { width: 11px; height: 11px; fill: currentColor; transition: transform .28s var(--gx-ease); }
[aria-expanded="true"] > .gx-chev { transform: rotate(180deg); }
.gx-nav__logo { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 44px; padding: 0 4px; line-height: 0; border-radius: 12px; }
.gx-nav__logo img { display: block; width: 80px; height: auto; transition: width .3s var(--gx-ease); }
.gx-nav.is-scrolled .gx-nav__logo img { width: 64px; }
.gx-nav__right { position: relative; z-index: 2; justify-self: end; display: flex; align-items: center; gap: 4px; }
.gx-nav__disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--gx-ink-r);
  filter: var(--gx-drop-r);
  transition: background-color .2s linear, color .3s ease;
}
.gx-nav__burger { color: var(--gx-ink-l); filter: var(--gx-drop-l); }
.gx-nav__disc:hover, .gx-nav__disc[aria-expanded="true"] { background: var(--gx-hov-r); }
.gx-nav__burger:hover, .gx-nav__burger[aria-expanded="true"] { background: var(--gx-hov-l); }
.gx-nav__search .gx-ico { width: 26px; height: 26px; transition: transform .3s var(--gx-ease); }
.gx-nav__search:hover .gx-ico { transform: scale(1.08) rotate(-10deg); }
.gx-nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--gx-ink-r);
  text-shadow: var(--gx-halo-r);
  font: 400 17px/1 var(--gx-display);
  transition: background-color .2s linear, color .3s ease;
}
.gx-nav__lang:hover, .gx-nav__lang[aria-expanded="true"] { background: var(--gx-hov-r); }
.gx-nav__lang .gx-chev { width: 9px; height: 9px; }
.gx-nav__langs {
  position: absolute;
  top: calc(100% + 12px);
  right: 100px;
  min-width: 172px;
  padding: 8px;
  list-style: none;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 44px -24px rgba(48, 79, 90, .6);
  animation: gx-pop .22s var(--gx-ease);
}
.gx-nav__langs[hidden] { display: none; }
.gx-nav__langs a { display: flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 12px; font: 700 16px/1 var(--gx-sans); text-decoration: none; transition: background-color .2s linear, color .2s linear; }
.gx-nav__langs a:hover, .gx-nav__langs a:focus-visible { background: var(--gx-blush-soft); color: var(--gx-fucsia); }
.gx-nav__langs a[aria-current="true"] { background: var(--gx-blush); }
@keyframes gx-pop { from { opacity: 0; transform: translateY(-6px); } }
.gx-nav__count {
  position: absolute;
  top: 5px;
  right: 3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gx-cnt-bg);
  color: var(--gx-cnt-fg);
  font: 800 15px/18px var(--gx-sans);
  text-align: center;
}
.gx-nav__count[hidden] { display: none; }
.gx-nav__burger { display: none; }

/* the panels hang under the pill; backdrop behind them */
.gx-nav__panel {
  pointer-events: auto;
  position: absolute;
  top: calc(var(--gx-nav-h) + 8px);
  left: 50%;
  width: calc(100% - 2 * var(--gx-frame-gap));
  padding: 32px 36px 28px;
  background: var(--gx-blush-soft);
  border: 1px solid var(--gx-line);
  border-radius: 26px;
  box-shadow: var(--gx-shadow-nav);
  transform: translateX(-50%);
  animation: gx-panel-in .28s var(--gx-ease);
}
.gx-nav__panel[hidden] { display: none; }
@keyframes gx-panel-in { from { opacity: 0; transform: translate(-50%, -6px); } }
/* the two menu panels (Tienda, Sobre nosotras): a full-width sheet that drops from the top edge of the screen, with
   the navbar row inside it (the pill turns transparent while it is open), no photos. Tienda is a little taller than
   Sobre nosotras because it has more to show. They open on hover (see nav() in gx-home.js). */
.gx-nav__pill { position: relative; z-index: 2; }
.gx-nav.has-panel { --gx-halo-l: none; --gx-halo-r: none; --gx-drop-l: none; --gx-drop-r: none; --gx-ink-l: var(--gx-teal); --gx-ink-r: var(--gx-teal); --gx-hov-l: var(--gx-disc); --gx-hov-r: var(--gx-disc); --gx-cnt-bg: var(--gx-teal); --gx-cnt-fg: var(--gx-blush); }
.gx-nav.has-panel .gx-nav__pill { background: var(--gx-blush-soft); border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.gx-nav.has-panel .gx-nav__pill::before, .gx-nav.has-panel .gx-nav__pill::after { display: none; }
.gx-nav__panel--menu {
  z-index: 1;
  left: 0;
  right: 0;
  top: -12px; /* the header sticks 12px below the top edge: the sheet starts at the top edge itself */
  width: auto;
  padding: calc(12px + var(--gx-nav-h) + 34px) calc(var(--gx-frame-gap) + 34px) 48px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-top: 0;
  border-radius: 0 0 var(--gx-r-frame) var(--gx-r-frame);
  /* the navbar's own pink, not transparent */
  background: var(--gx-blush-soft);
  box-shadow: 0 44px 80px -40px rgba(9, 21, 27, .45);
  transform: none;
  animation: gx-menu-in .28s var(--gx-ease);
  /* never taller than the screen: on a short one (a big phone on its side gets this navbar) the sheet scrolls */
  max-height: 100vh;
  max-height: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.gx-nav__panel--menu > * { position: relative; }
@keyframes gx-menu-in { from { opacity: 0; transform: translateY(-14px); } }
.gx-panel__grid { display: grid; grid-template-columns: minmax(230px, 1.05fr) repeat(3, minmax(0, 1fr)); gap: 28px 64px; }
.gx-panel__grid > * { animation: gx-item-in .4s var(--gx-ease) both; }
.gx-panel__grid > :nth-child(2) { animation-delay: 40ms; }
.gx-panel__grid > :nth-child(3) { animation-delay: 80ms; }
.gx-panel__grid > :nth-child(4) { animation-delay: 120ms; }
@keyframes gx-item-in { from { opacity: 0; transform: translateY(8px); } }
.gx-panel__intro { align-self: start; }
.gx-panel__kicker { margin: 0 0 14px; font: 800 16px/1.2 var(--gx-sans); letter-spacing: 2px; text-transform: uppercase; opacity: .7; }
.gx-panel__lead { max-width: 20ch; margin: 0 0 22px; font: 800 24px/1.25 var(--gx-sans); text-wrap: balance; }
.gx-panel__title { white-space: nowrap; margin: 0 0 18px; padding: 0 0 14px; border-bottom: 2px solid var(--gx-disc); font: 400 20px/1.2 var(--gx-display); letter-spacing: .3px; }
.gx-panel__links { list-style: none; }
.gx-panel__links a { display: inline-flex; align-items: center; gap: 14px; padding: 9px 0; font: 700 17px/1.3 var(--gx-sans); text-decoration: none; transition: color .2s linear, transform .25s var(--gx-ease); }
.gx-panel__links a:hover, .gx-panel__links a:focus-visible { color: var(--gx-fucsia-hover); transform: translateX(4px); }
.gx-panel__links img { width: 40px; height: 40px; }
.gx-panel__links--icons a { padding: 6px 0; }
.gx-panel__all { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 0; font: 800 16px/1.2 var(--gx-sans); letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--gx-fucsia); transition: color .2s linear, gap .25s var(--gx-ease); }
.gx-panel__all:hover, .gx-panel__all:focus-visible { color: var(--gx-fucsia-hover); gap: 16px; }
.gx-panel__level {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  padding: 16px 18px 18px;
  border: 1px solid rgba(48, 79, 90, .2);
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  transition: transform .25s var(--gx-ease), box-shadow .3s var(--gx-ease);
}
.gx-panel__level strong { font: 800 17px/1.2 var(--gx-sans); }
.gx-panel__level span { font: 400 16px/1.4 var(--gx-sans); opacity: .85; }
.gx-panel__level:hover, .gx-panel__level:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(48, 79, 90, .45); }
.gx-nav__panel--search { max-width: 720px; padding: 24px; }
.gx-nav__panel--search form { display: flex; gap: 10px; }
.gx-nav__panel--search input {
  flex: 1;
  height: 54px;
  padding: 0 22px;
  border: 1px solid var(--gx-line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--gx-teal);
  font: 500 17px/1 var(--gx-sans);
  -webkit-appearance: none;
  appearance: none;
}
.gx-nav__panel--search input::placeholder { color: rgba(48, 79, 90, .6); }
.gx-nav__panel--search button { padding: 0 28px; border: 0; border-radius: 999px; background: var(--gx-teal); color: #fff; font: 500 16px/1 var(--gx-sans); letter-spacing: 2px; text-transform: uppercase; transition: background-color .2s linear; }
.gx-nav__panel--search button:hover { background: var(--gx-fucsia-hover); }
.gx-nav__backdrop { position: fixed; inset: 0; z-index: -1; background: rgba(48, 79, 90, .16); pointer-events: auto; animation: gx-fade .25s ease; }
.gx-nav__backdrop[hidden] { display: none; }
@keyframes gx-fade { from { opacity: 0; } }

/* 4 · hero ----------------------------------------------------------------
   Minimal and full screen: the six photos of the original animated hero take turns (js/gx-home.js · heroSlides:
   a long cross-fade and a very slow push-in), edge to edge and top to bottom, and the navbar pill floats inside them.
   The title is set in Shrikhand, the footer's typeface, like every section title; the rest is Karla 800. One slogan,
   bottom-left, that rolls in letter by letter; one button. */
.gx-hero { padding: 0; }
.gx-hero__frame {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--gx-teal);
  color: #fff;
}
.gx-hero__media, .gx-hero__wash { position: absolute; inset: 0; }
/* the photos get their own stacking level: whatever z-index the script gives them while they cross-fade stays inside it,
   so the dark wash below (level 1) and the words (level 2) are always above every photo */
.gx-hero__media { z-index: 0; }
/* the original GIF's animation as a video, over its own first frame (a photo, on screen at once); the video only shows
   once it really plays (js/gx-home.js · heroVideo), so there is never a blank frame */
.gx-hero__poster, .gx-hero__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.gx-hero__img, .gx-hero__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.gx-hero__video { opacity: 0; transition: opacity .25s linear; pointer-events: none; }
.gx-hero__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gx-hero__video { display: none; } }
/* darker where the words are (left and bottom), lighter on the right so the photos still show */
.gx-hero__wash {
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(27, 48, 56, .62) 0%, rgba(27, 48, 56, 0) 62%),
    linear-gradient(90deg, rgba(27, 48, 56, .78) 0%, rgba(48, 79, 90, .56) 46%, rgba(48, 79, 90, .34) 100%);
  pointer-events: none;
}
/* the text starts under the first navbar link's text (pill gap + the link's own padding) */
.gx-hero__copy { position: relative; z-index: 2; padding: 120px calc(var(--gx-frame-gap) + var(--gx-hero-inset)) calc(var(--gx-hero-inset) + 22px + env(safe-area-inset-bottom, 0px)); font-family: var(--gx-sans); font-weight: 800; }
.gx-hero__title { margin: 0 0 26px; font: 400 clamp(34px, 5vw, 104px)/1.04 var(--gx-display); letter-spacing: 0; text-transform: none; color: #fff; }
/* every slogan sits in the same grid cell, bottom-aligned: the lead and the button never move when the slogan changes */
.gx-slogans { display: grid; align-items: end; justify-items: start; }
.gx-slogan { grid-area: 1 / 1; visibility: hidden; text-wrap: balance; }
.gx-slogan.is-on { visibility: visible; }
/* word = a mask; letter = a fixed-width slot (its width is measured once, so scrambling never shifts the line) */
/* (room below for the descenders and a little at the sides for the slant of Shrikhand; the negative margins take it back, so the line does not move) */
.gx-hw { position: relative; display: inline-block; white-space: nowrap; overflow: clip; padding: .2em .12em .32em; margin: -.2em -.12em -.32em; }
.gx-hc { display: inline-block; will-change: transform; }
.gx-hero__lead { max-width: 38ch; margin: 0 0 30px; font: 800 clamp(16px, .5vw + 12px, 21px)/1.45 var(--gx-sans); color: #fff; text-shadow: 0 1px 14px rgba(20, 38, 45, .5); text-wrap: balance; }
.gx-hero__actions { display: flex; }
/* the button is liquid glass too, with no pink: a frosted lens with a bright edge that lights up under the pointer
   (the hero's button and any .gx-btn--glass over a photo or a dark wash) */
@property --gx-glint { syntax: "<number>"; inherits: false; initial-value: 0; }
.gx-hero__actions .gx-btn, .gx-btn--glass {
  position: relative;
  isolation: isolate;
  padding: 20px 30px;
  font: 800 16px/1 var(--gx-sans);
  letter-spacing: 1.6px;
  color: #fff8fb;
  text-shadow: 0 1px 10px rgba(9, 21, 27, .4);
  border: 1px solid rgba(255, 255, 255, .5);
  background-color: rgba(9, 22, 28, .3);
  background-image:
    radial-gradient(150px 76px at var(--gx-px, 50%) var(--gx-py, 50%), rgba(255, 255, 255, calc(var(--gx-glint) * .2)), rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05));
  -webkit-backdrop-filter: blur(22px) saturate(1.8) brightness(1.1);
  backdrop-filter: blur(22px) saturate(1.8) brightness(1.1);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .8),
    inset 0 -1px 2px rgba(255, 255, 255, .22),
    inset 0 0 24px rgba(255, 255, 255, .14),
    0 18px 38px -18px rgba(9, 21, 27, .65);
  transition: --gx-glint .35s ease, border-color .25s ease, box-shadow .3s var(--gx-ease), background-color .25s ease, transform .25s var(--gx-ease);
}
@media (max-width: 767px) { .gx-hero__actions .gx-btn, .gx-btn--glass { background-color: rgba(9, 22, 28, .38); } .gx-hero__actions .gx-btn:hover, .gx-btn--glass:hover, .gx-hero__actions .gx-btn:focus-visible, .gx-btn--glass:focus-visible { background-color: rgba(9, 22, 28, .34); } }
.gx-hero__actions .gx-btn::before, .gx-btn--glass::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(112deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .22) 100%); }
.gx-hero__actions .gx-btn:hover, .gx-btn--glass:hover, .gx-hero__actions .gx-btn:focus-visible, .gx-btn--glass:focus-visible {
  --gx-glint: 1;
  color: #fff;
  border-color: rgba(255, 255, 255, .85);
  background-color: rgba(9, 22, 28, .26);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -1px 2px rgba(255, 255, 255, .28), inset 0 0 28px rgba(255, 255, 255, .2), 0 22px 44px -18px rgba(9, 21, 27, .7);
}
@media (max-width: 921px) {
  :root, .gx-home { --gx-hero-inset: 26px; }
  .gx-hero__title { font-size: clamp(34px, 7.4vw, 72px); }
}
@media (max-width: 767px) {
  .gx-hero__wash { background: linear-gradient(0deg, rgba(27, 48, 56, .88) 0%, rgba(38, 64, 73, .62) 50%, rgba(48, 79, 90, .3) 100%); }
  .gx-hero__title { font-size: clamp(31px, 8.6vw, 52px); margin-bottom: 22px; }
  .gx-hero__copy { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 544px) { :root, .gx-home { --gx-frame-gap: 12px; --gx-hero-inset: 22px; } }

/* 6 · sections shared ----------------------------------------------------- */

/* 02 · catálogo por categorías ------------------------------------------ */
/* Full width (as wide as the navbar), on the web's own ground. One glass tab per category, stuck under the navbar while
   you scroll; under it EVERY product of that category as a small card: photo, name, the price big. Compact but airy:
   6 columns on a laptop, 2 on a phone, nothing under 17px. The cards are plain translucent white without a backdrop
   blur (up to 22 at a time would be heavy over the WebGL ground). Packs live only in their own tab. */
.gx-cats { padding: var(--gx-gap) 0 0; }
.gx-cats__wrap { width: 100%; margin: 0 auto; padding: 0 var(--gx-frame-gap, var(--gx-gutter)); }
/* header: one left-aligned stack (title, then one sentence), so the eye reads it in one go on any width */
/* the minimum: the title, the tabs, the cards and one footnote */
.gx-cats__head { margin-bottom: clamp(36px, 5vh, 60px); }
.gx-cats__h { font: 400 clamp(30px, 2.4vw + 14px, 60px)/1.1 var(--gx-display); letter-spacing: 0; text-transform: none; color: var(--gx-teal); text-wrap: balance; }

.gx-cats__tabs { position: sticky; top: 84px; z-index: 30; display: flex; gap: 4px; padding: 5px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gx-cats__tabs::-webkit-scrollbar { display: none; }
/* transparent liquid glass, the same material as the cards: a very strong blur, a bright edge, almost no colour of its own */
.gx-cats__tabs.gx-glass {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .18) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .38));
  border: 0;
  -webkit-backdrop-filter: blur(42px) saturate(1.6) brightness(1.08);
  backdrop-filter: blur(42px) saturate(1.6) brightness(1.08);
  box-shadow: 0 18px 34px -24px rgba(48, 79, 90, .4);
}
.gx-cats__tabs button {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 8px clamp(14px, 1.6vw, 28px);
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--gx-teal-deep);
  font: 800 16px/1.1 var(--gx-sans);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .3s ease, box-shadow .3s ease;
}
/* the chosen tab is a see-through capsule (a breath of the site's green in the glass, no white, no edge line); the hover is barely there */
.gx-cats__tabs button:hover { background: rgba(48, 79, 90, .045); }
.gx-cats__tabs button[aria-selected="true"] { background: rgba(48, 79, 90, .1); box-shadow: none; }
/* a bar wider than the screen scrolls sideways (phones, tablets, a narrow window): a soft fade and a small arrow at
   each end where more tabs are hidden, so «Niñas» or «Ropa» are never missed; the arrow slides the bar. Added by
   js/gx-home.js · tabs, and shown only while there is more to see that way. */
.gx-cats__more {
  position: sticky;
  z-index: 1;
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  width: 72px;
  margin-block: -5px;          /* the full height of the bar, over its 5 px padding (the bar's rounded ends clip it) */
  color: var(--gx-teal-deep);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s linear, visibility 0s linear .2s;
}
/* pinned to the very edge of the bar (over its 5 px padding); 72 px wide, pulled back by its width plus the bar's 4 px
   gap, so it takes no room of its own */
.gx-cats__more--prev { left: -5px; margin-right: -76px; justify-content: flex-start; padding-left: 22px; background: linear-gradient(90deg, rgb(255, 250, 253) 48%, rgba(255, 250, 253, 0)); }
.gx-cats__more--next { right: -5px; margin-left: -76px; justify-content: flex-end; padding-right: 22px; background: linear-gradient(270deg, rgb(255, 250, 253) 48%, rgba(255, 250, 253, 0)); }
.gx-cats__more::before { content: ""; width: 10px; height: 10px; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; transform: rotate(45deg); }
.gx-cats__more--prev::before { transform: rotate(-135deg); }
.gx-cats__tabs.has-prev > .gx-cats__more--prev, .gx-cats__tabs.has-next > .gx-cats__more--next { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }

.gx-cats__panel[hidden] { display: none; }
.gx-cats__panels { margin-top: clamp(32px, 4.4vh, 52px); }
.gx-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr)); gap: clamp(20px, 1.9vw, 32px) clamp(14px, 1.4vw, 24px); list-style: none; }
.gx-cats__panel:not([hidden]) .gx-prod { animation: gx-prod-in .5s var(--gx-ease) both; animation-delay: calc(min(var(--i, 0), 11) * 38ms); }
@keyframes gx-prod-in { from { opacity: 0; transform: translateY(12px); } }
.gx-prod {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 22px;
  color: var(--gx-teal);
  /* transparent liquid glass: almost no colour of its own, a very strong blur that lifts the saturation of the ground
     behind it, a bright edge and a diagonal sheen. A touch more white toward the letters keeps them readable. */
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, .18) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .3) 100%);
  border: 0;
  -webkit-backdrop-filter: blur(42px) saturate(2) brightness(1.06);
  backdrop-filter: blur(42px) saturate(2) brightness(1.06);
  box-shadow: 0 22px 40px -26px rgba(48, 79, 90, .45);
  transition: transform .3s var(--gx-ease), box-shadow .3s var(--gx-ease);
}
/* hover: the glass lights up (a white layer under the content fades in) and the card lifts */
.gx-prod::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .16); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
@media (hover: hover) { .gx-prod:hover { transform: translateY(-2px); } .gx-prod:hover::after { opacity: 1; } }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .gx-prod { background: rgba(255, 255, 255, .7); } }
@media (prefers-reduced-transparency: reduce) { .gx-prod { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.gx-prod__pic { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 15px; background: var(--gx-blush-soft); }
.gx-prod__img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 45%); transition: transform .7s var(--gx-ease); }
@media (hover: hover) { .gx-prod:hover .gx-prod__img { transform: scale(1.03); } }
.gx-prod__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px 8px 8px; }
.gx-prod__name { font: 400 clamp(18px, .2vw + 15.4px, 20px)/1.22 var(--gx-display); letter-spacing: .1px; text-wrap: pretty; }
.gx-prod__name a { color: var(--gx-teal); text-decoration: none; }
.gx-prod__name a::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.gx-prod__name a:focus-visible { outline: none; box-shadow: none; }
.gx-prod__name a:focus-visible::after { outline: 3px solid var(--gx-teal); outline-offset: 3px; }
.gx-prod__price { --gx-price: 24px; margin-top: auto; color: var(--gx-teal); }
.gx-prod__price .gx-from { font-size: 17px; }
.gx-prod__price .gx-price__old { font-size: 18px; opacity: 1; }

.gx-cats__outlet { margin-top: clamp(36px, 5vh, 60px); color: var(--gx-teal-deep); font: 500 clamp(17px, .35vw + 13px, 20px)/1.5 var(--gx-sans); }
.gx-cats__outlet a { padding: 12px 0; font-weight: 800; text-underline-offset: 4px; }
.gx-cats__outlet a:hover { color: var(--gx-fucsia-hover); }


/* 03 · ficha técnica ------------------------------------------------------ */
/* ficha técnica: the first full-screen section under the hero. One giant liquid-glass card, as wide as the navbar, on the
   web's own ground (no band, no background photo): the photo on the left, the explanation on the right. The panels
   are liquid glass, the same family as the navbar and the hero button. */
.gx-glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .44));
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: var(--gx-r-card);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 0 26px rgba(255, 255, 255, .2), 0 26px 50px -30px rgba(48, 79, 90, .4);
}
.gx-spec { padding: 0; }
.gx-spec__wrap { width: 100%; max-width: none; margin: 0 auto; padding: 0 var(--gx-frame-gap, var(--gx-gutter)); }
/* the card fills one screen under the navbar (a little more if its content needs it) */
.gx-spec__frame { min-height: 100vh; min-height: 100svh; display: flex; padding: 100px var(--gx-frame-gap) clamp(18px, 3.2vh, 34px); }
.gx-unisex { flex: 1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); overflow: hidden; border-radius: var(--gx-r-frame); }
.gx-unisex__media { position: relative; min-height: 100%; background: rgba(255, 255, 255, .4); }
.gx-unisex__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.gx-unisex__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3.2vw, 56px); }
.gx-unisex__h { margin: 0 0 14px; font: 400 clamp(32px, 2.8vw + 12px, 64px)/1.1 var(--gx-display); letter-spacing: 0; text-transform: none; color: var(--gx-teal); text-wrap: balance; }
.gx-unisex__lead { max-width: 40em; margin: 0 0 clamp(14px, 2.2vh, 24px); font: 500 clamp(17px, .4vw + 11px, 20px)/1.55 var(--gx-sans); }
/* one sentence per line, so the break falls where the reader expects it (each sentence still balances if the column is narrow) */
.gx-unisex__lead span { display: block; }
/* what changes: the standard glove crossed out, then ours */
.gx-unisex__rows > div { grid-template-columns: 34% 1fr; padding: clamp(10px, 1.5vh, 14px) 0; }
.gx-unisex__rows dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font: 500 clamp(17px, .3vw + 12px, 19px)/1.35 var(--gx-sans); }
.gx-unisex__rows .gx-vs__new { font-weight: 800; }
.gx-vs__old { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(246, 45, 174, .75); }
.gx-vs__arrow { color: var(--gx-fucsia-hover); font-weight: 800; }
.gx-unisex__cap { margin: 10px 0 0; font: 500 16px/1.4 var(--gx-sans); }
.gx-unisex__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(14px, 2.4vh, 26px); }

/* the three anatomy numbers */
.gx-stats { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr) minmax(0, 1.05fr); margin-top: clamp(14px, 2.4vh, 26px); list-style: none; border-top: 2px solid var(--gx-teal); }
.gx-stats li { padding: 14px clamp(12px, 1.1vw, 18px) 0; }
.gx-stats li:first-child { padding-left: 0; }
.gx-stats li + li { border-left: 1px solid var(--gx-line-strong); }
.gx-stat__v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .16em; font: 800 clamp(34px, 2.6vw, 48px)/1 var(--gx-sans); letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--gx-teal); }
.gx-stat__x { font-size: .6em; letter-spacing: 0; }
.gx-stat__u { font-size: max(16px, .38em); letter-spacing: .02em; text-transform: uppercase; }
.gx-stat__pre { font-size: max(16px, .32em); letter-spacing: .08em; text-transform: uppercase; }
.gx-stat__k { margin: 8px 0 2px; font: 800 16px/1.3 var(--gx-sans); letter-spacing: 1.4px; text-transform: uppercase; }
.gx-stat__t { font: 500 16px/1.4 var(--gx-sans); }
/* 06 · así trabajamos ------------------------------------------------------- */
/* No card: everything straight on the web's own ground, as wide as the navbar. Headline and links on the left, the photo
   framed on the right; below, the four promises (each with its sticker) and the four facts as the stations of a route
   along which a little parcel travels (js/gx-home.js · work). */
.gx-work { padding: var(--gx-gap) 0; }
.gx-work__wrap { width: 100%; margin: 0 auto; padding: 0 var(--gx-frame-gap, var(--gx-gutter)); }
.gx-work__card { position: relative; }
.gx-work__top { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(28px, 4vw, 72px); align-items: stretch; }
.gx-work__head { display: grid; align-content: center; justify-items: start; gap: clamp(12px, 1.6vh, 18px); padding: clamp(8px, 1vw, 16px) 0; }
.gx-work__kicker { margin: 0; padding: 9px 16px; border-radius: 999px; background: var(--gx-teal); color: #fff; font: 800 16px/1.1 var(--gx-sans); letter-spacing: 1.6px; text-transform: uppercase; }
.gx-work__h { margin: 0; font: 400 clamp(38px, 3.4vw + 12px, 78px)/1.04 var(--gx-display); letter-spacing: 0; text-transform: none; color: var(--gx-teal); text-wrap: balance; }
.gx-work__sub { margin: 0; max-width: 34ch; color: var(--gx-teal-deep); font: 500 clamp(19px, .5vw + 14px, 24px)/1.45 var(--gx-sans); }
.gx-work__pills { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 0; }
.gx-work__pills .gx-btn { padding: 16px 24px; font-size: 16px; letter-spacing: 1.4px; white-space: nowrap; }
.gx-work__media { position: relative; min-height: 420px; margin: 0; overflow: hidden; border-radius: calc(var(--gx-r-card) + 4px); box-shadow: 0 30px 50px -28px rgba(48, 79, 90, .55); }
.gx-work__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 64%; }

.gx-work__body { padding: clamp(64px, 9vh, 112px) 0 0; }
.gx-work__promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(22px, 2.6vw, 48px); margin: 0; padding: clamp(40px, 5.4vh, 64px) 0 0; list-style: none; border-top: 1px solid var(--gx-line-strong); }
.gx-promise { display: flex; flex-direction: column; }
.gx-promise__badge { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 0 26px 6px; overflow: hidden; border-radius: 50%; background: var(--gx-blush); box-shadow: 0 0 0 5px #fff, 0 14px 26px -12px rgba(24, 43, 50, .45); transform: rotate(var(--r, -4deg)); }
.gx-promise__badge img { width: 100%; height: 100%; object-fit: cover; }
.gx-promise__t { margin: 0 0 14px; font: 800 clamp(20px, .6vw + 13px, 24px)/1.2 var(--gx-sans); letter-spacing: -.005em; text-wrap: balance; }
.gx-promise__lead { margin: 0; max-width: 36ch; color: var(--gx-teal-deep); font: 500 18px/1.55 var(--gx-sans); }

.gx-work__route { --route-pt: clamp(34px, 4.6vh, 52px); position: relative; margin-top: clamp(56px, 8vh, 96px); padding-top: var(--route-pt); border-top: 1px solid var(--gx-line-strong); }
.gx-facts { --gap: clamp(22px, 2.6vw, 48px); position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--gap); margin: 0; padding: 0; list-style: none; }
.gx-facts::before { content: ""; position: absolute; top: 10px; left: 12px; width: calc((100% + var(--gap)) * .75); border-top: 4px dotted rgba(48, 79, 90, .45); }
.gx-fact { position: relative; padding-top: 52px; }
.gx-fact::before { content: ""; position: absolute; top: 0; left: 0; width: 24px; height: 24px; box-sizing: border-box; border: 5px solid var(--gx-teal); border-radius: 50%; background: #fff; }
.gx-fact__v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 0 0 10px; color: var(--gx-teal); }
.gx-fact__v b { font: 800 clamp(42px, 2.4vw + 16px, 64px)/1 var(--gx-sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.gx-fact__v small { font: 800 clamp(19px, .5vw + 13px, 23px)/1.1 var(--gx-sans); letter-spacing: -.005em; }
.gx-fact__k { margin: 0 0 8px; font: 800 17px/1.3 var(--gx-sans); letter-spacing: 1.5px; text-transform: uppercase; }
.gx-fact__t { margin: 0; max-width: 34ch; color: var(--gx-teal-deep); font: 500 18px/1.55 var(--gx-sans); }
.gx-route__parcel { position: absolute; z-index: 2; top: calc(var(--route-pt) - 16px); left: -16px; width: 56px; height: 56px; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(24, 43, 50, .3)); }
.gx-route__parcel img { display: block; width: 100%; height: auto; }

/* 07 · reseñas --------------------------------------------------------------- */
/* Six reviews, ONE design: the same transparent liquid-glass card (the catalogue's material) for all of them, the same
   parts in the same order (stars, quote, who, how we know). No photo. */
.gx-reviews { padding: 0 0 var(--gx-gap); }
.gx-reviews__wrap { width: 100%; margin: 0 auto; padding: 0 var(--gx-frame-gap, var(--gx-gutter)); }
.gx-reviews__h { margin: 0 0 clamp(36px, 5vh, 60px); font: 400 clamp(30px, 2.4vw + 14px, 60px)/1.1 var(--gx-display); letter-spacing: 0; text-transform: none; color: var(--gx-teal); text-wrap: balance; }
.gx-reviews__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2vw, 32px); margin: 0; padding: 0; list-style: none; }
.gx-review {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2vw, 32px);
  border-radius: 22px;
  color: var(--gx-teal);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, .18) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .3) 100%);
  -webkit-backdrop-filter: blur(42px) saturate(2) brightness(1.06);
  backdrop-filter: blur(42px) saturate(2) brightness(1.06);
  box-shadow: 0 22px 40px -26px rgba(48, 79, 90, .45);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .gx-review { background: rgba(255, 255, 255, .7); } }
@media (prefers-reduced-transparency: reduce) { .gx-review { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.gx-review__stars { margin: 0 0 16px; color: var(--gx-fucsia); font-size: 21px; line-height: 1; letter-spacing: 3px; }
.gx-review__stars span[aria-hidden] { display: inline-block; }
.gx-review__q { flex: 1; margin: 0 0 22px; color: var(--gx-teal-deep); font: 500 clamp(18px, .3vw + 13px, 20px)/1.6 var(--gx-sans); }
.gx-review__who { display: grid; gap: 2px; margin: 0; font: 800 18px/1.3 var(--gx-sans); }
.gx-review__who a { padding: 11px 0; margin: -5px 0; color: var(--gx-teal); font-weight: 500; font-size: 17px; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color .2s linear; }
.gx-review__who a:hover { color: var(--gx-fucsia-hover); }
.gx-review__tag { margin: 6px 0 0; color: var(--gx-teal-deep); font: 800 16px/1.3 var(--gx-sans); letter-spacing: 1.2px; text-transform: uppercase; }

/* 08 · punto de venta -------------------------------------------------------- */
/* Straight on the web's own ground (no green band, no background photo): text on the left, the photo of the display as a
   tilted print on the right. */
.gx-pdv { padding: 0 0 var(--gx-gap); }
.gx-pdv__wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 72px); align-items: center; width: 100%; margin: 0 auto; padding: 0 var(--gx-frame-gap, var(--gx-gutter)); }
.gx-pdv__h { margin: 0 0 clamp(16px, 2.4vh, 24px); font: 400 clamp(30px, 2.4vw + 14px, 60px)/1.1 var(--gx-display); letter-spacing: 0; text-transform: none; color: var(--gx-teal); text-wrap: balance; }
.gx-pdv__p { max-width: 52ch; margin: 0; color: var(--gx-teal-deep); font: 500 clamp(18px, .35vw + 13px, 21px)/1.55 var(--gx-sans); }
.gx-pdv__cities { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(20px, 3vh, 30px) 0; padding: 0; list-style: none; }
.gx-pdv__cities li { padding: 10px 18px; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .46)); color: var(--gx-teal-deep); font: 800 16px/1.2 var(--gx-sans); letter-spacing: 1.3px; text-transform: uppercase; }
.gx-pdv__actions { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 0; }
.gx-pdv__actions .gx-btn { padding: 16px 24px; font-size: 16px; letter-spacing: 1.4px; white-space: nowrap; }
.gx-pdv__card { justify-self: center; width: min(320px, 100%); margin: 0; padding: 12px 12px 16px; border-radius: var(--gx-r-card); background: rgba(255, 255, 255, .7); color: var(--gx-teal); box-shadow: 0 30px 50px -26px rgba(48, 79, 90, .55); transform: rotate(2deg); }
.gx-pdv__card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: calc(var(--gx-r-card) - 6px); }
.gx-pdv__card figcaption { margin: 14px 4px 0; font: 800 16px/1.3 var(--gx-sans); letter-spacing: 1.2px; text-transform: uppercase; }

/* 09 · la empresa ------------------------------------------------------------- */
/* Small and quick to read: four big figures, the logos, one line about the founder. On the web's own ground. */
.gx-co { padding: 0 0 var(--gx-gap); }
.gx-co__wrap { width: 100%; margin: 0 auto; padding: 0 var(--gx-frame-gap, var(--gx-gutter)); }
/* two figures (2026-10-11: boxeadoras and the award), each as wide as its words, side by side from the left */
.gx-co__stats { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: start; margin: 0; padding: 0; list-style: none; }
.gx-co__stats li { padding: 4px clamp(18px, 2.4vw, 40px); border-left: 1px solid var(--gx-line-strong); }
.gx-co__stats li:first-child { padding-left: 0; border-left: 0; }
.gx-co__v { display: flex; align-items: baseline; gap: 8px; font: 800 clamp(44px, 3.4vw + 12px, 76px)/1 var(--gx-sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--gx-teal); }
.gx-co__star { color: var(--gx-fucsia); font-size: .5em; font-style: normal; letter-spacing: 0; transform: translateY(-.2em); }
/* the award as the organisers' own badge (gold star, «Ganador Gold»), about as tall as the figure beside it; it
   shrinks with its column on a phone */
.gx-co__li--badge { display: flex; align-items: center; }
.gx-co__badge { display: block; width: 250px; max-width: 100%; height: auto; margin-inline: auto; }
@media (max-width: 767px) { .gx-co__badge { width: 200px; } }
.gx-co__k { display: block; margin-top: 12px; font: 800 17px/1.3 var(--gx-sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--gx-teal-deep); }
.gx-co__stats small { display: block; margin-top: 4px; font: 500 17px/1.4 var(--gx-sans); color: var(--gx-teal-deep); }
.gx-co__logos { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); margin-top: clamp(44px, 6vh, 72px); padding-top: clamp(28px, 4vh, 40px); border-top: 1px solid var(--gx-line-strong); }
.gx-co__label { margin: 0 0 18px; font: 800 16px/1.3 var(--gx-sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--gx-teal-deep); }
.gx-co__press, .gx-co__partners { display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(28px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.gx-co__press a, .gx-co__partners a, .gx-co__partners span { display: block; padding: 8px 0; line-height: 0; }
/* a finger's 44 px on every logo link, without moving the rows */
.gx-co__press a { display: flex; align-items: center; min-height: 44px; }
.gx-co__partners a, .gx-co__partners span { padding: 10px 0; margin: -2px 0; }
.gx-co__press img { width: var(--w, auto); max-width: 100%; height: auto; transition: transform .3s var(--gx-ease), opacity .3s ease; }
.gx-co__partners img { width: auto; height: 24px; transition: transform .3s var(--gx-ease), opacity .3s ease; }
@media (hover: hover) { .gx-co__press a:hover img, .gx-co__partners a:hover img { transform: translateY(-2px); opacity: .75; } }
.gx-co__founder { margin: clamp(32px, 4.4vh, 52px) 0 0; color: var(--gx-teal-deep); font: 500 clamp(17px, .3vw + 12px, 19px)/1.55 var(--gx-sans); }
.gx-co__founder a { padding: 12px 0; color: var(--gx-teal); font-weight: 800; text-underline-offset: 4px; }
.gx-co__founder a:hover { color: var(--gx-fucsia-hover); }

/* 10 · mobile drawer ------------------------------------------------------ */
.gx-mnav {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: var(--gx-blush);
  color: var(--gx-teal);
  font: 400 16px/1.3 var(--gx-sans);
  transform: translateX(100%);
  transition: transform .36s var(--gx-ease);
}
.gx-mnav[hidden] { display: none; }
.gx-mnav.is-open { transform: none; }
@media (min-width: 922px) { .gx-mnav { display: none !important; } }
.gx-mnav a { text-decoration: none; }
.gx-mnav ul { list-style: none; }
.gx-mnav__bar { flex: none; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; height: 68px; padding: 0 10px; border-bottom: 1px solid var(--gx-line); }
.gx-mnav__logo { grid-column: 2; justify-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 2px 0; line-height: 0; }
.gx-mnav__logo img { width: 56px; height: auto; }
.gx-mnav__icon { grid-column: 3; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--gx-teal); }
.gx-mnav__icon:hover { background: var(--gx-disc); }
.gx-mnav__viewport { position: relative; flex: 1; overflow: hidden; }
.gx-mnav__panel { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 20px 40px; }
.gx-mnav.is-open .gx-mnav__panel > * { animation: gx-mnav-in .45s var(--gx-ease) both; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
@keyframes gx-mnav-in { from { opacity: 0; transform: translateY(12px); } }
.gx-mnav__search { position: relative; margin: 0; }
.gx-mnav__search input { width: 100%; height: 52px; padding: 0 58px 0 20px; border: 1px solid rgba(48, 79, 90, .35); border-radius: 999px; background: #fff; color: var(--gx-teal); font: 500 16px/1 var(--gx-sans); -webkit-appearance: none; appearance: none; }
.gx-mnav__search input::placeholder { color: rgba(48, 79, 90, .6); opacity: 1; }
.gx-mnav__search button { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--gx-teal); color: #fff; }
.gx-mnav__search .gx-ico { width: 20px; height: 20px; }
.gx-mnav__group { margin-top: 28px; }
.gx-mnav__label { margin: 0 0 14px; padding: 0 0 10px; border-bottom: 2px solid var(--gx-disc); font: 400 20px/1.3 var(--gx-display); letter-spacing: .3px; }
.gx-mnav__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gx-mnav__tiles > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.gx-mnav__tile { display: block; height: 100%; padding: 8px 8px 12px; border-radius: 18px; background: #fff; box-shadow: 0 10px 22px -16px rgba(48, 79, 90, .5); text-align: center; transition: transform .2s var(--gx-ease); }
.gx-mnav__tile:active { transform: scale(.97); }
.gx-mnav__tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; background: var(--gx-blush-soft); }
.gx-mnav__tiles > li:last-child:nth-child(odd) img { aspect-ratio: 2.2 / 1; }
.gx-mnav__tile span { display: block; margin-top: 10px; font: 400 20px/1.2 var(--gx-display); letter-spacing: .3px; }
.gx-mnav__rows li a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 4px; border-bottom: 1px solid var(--gx-line); font: 800 17px/1.25 var(--gx-sans); letter-spacing: .05em; text-transform: uppercase; }
.gx-mnav__rows img { width: 40px; height: 40px; }
.gx-mnav__rows li a::after { content: ""; width: 8px; height: 8px; margin: 0 4px 0 auto; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: .5; }
.gx-mnav__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gx-mnav__card { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 16px; border: 1px solid rgba(48, 79, 90, .2); border-radius: 16px; background: var(--gx-blush-soft); }
.gx-mnav__card strong { font: 800 16px/1.2 var(--gx-sans); }
.gx-mnav__card span { font: 400 16px/1.35 var(--gx-sans); opacity: .85; }
.gx-mnav__all { width: 100%; margin-top: 24px; }
.gx-mnav__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--gx-line); }
.gx-mnav__foot > a { padding: 14px 0; font: 700 16px/1 var(--gx-sans); }
.gx-mnav__langs { display: flex; gap: 6px; margin-left: auto; }
.gx-mnav__langs a { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border: 1px solid rgba(48, 79, 90, .3); border-radius: 999px; font: 800 16px/1 var(--gx-sans); letter-spacing: 1px; }
.gx-mnav__langs a[aria-current="true"] { background: var(--gx-teal); border-color: var(--gx-teal); color: #fff; }
.gx-mnav__social { display: flex; justify-content: center; gap: 12px; width: 100%; margin-top: 8px; }
.gx-mnav__social a { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(48, 79, 90, .3); border-radius: 50%; }
.gx-mnav__social .gx-ico { width: 20px; height: 20px; }

/* 11 · responsive --------------------------------------------------------- */
@media (max-width: 1200px) {
}
@media (max-width: 921px) {
  .gx-nav { top: 10px; }
  .gx-nav__pill { --gx-nav-h: 68px; padding: 0 6px; }
  .gx-nav.is-scrolled .gx-nav__pill { --gx-nav-h: 68px; }
  .gx-nav__left, .gx-nav__lang, .gx-nav__langs, .gx-nav__account, .gx-nav__panel, .gx-nav__backdrop { display: none !important; }
  .gx-nav__burger { display: grid; justify-self: start; }
  .gx-nav__logo { justify-self: center; }
  .gx-nav__logo img, .gx-nav.is-scrolled .gx-nav__logo img { width: 56px; }
  .gx-nav__right { justify-self: end; gap: 0; }
  .gx-h3 { font-size: 24px; }
  .gx-lead { font-size: 19px; }
  /* preview-only: 44 px rows on the approved footer (carry into gx-footer.css) */
  .gx-home .gx-footer__col a, .gx-home .gx-footer__col span { min-width: 44px; padding: 11.5px 0; }
  .gx-home .gx-footer__btn { padding: 14.5px 22px; }
}
@media (max-width: 767px) {
}
@media (max-width: 544px) {
  .gx-price { --gx-price: 24px; }
  .gx-price--lg { --gx-price: 24px; }
  .gx-btn { padding: 16px 24px; letter-spacing: 1.6px; }
  .gx-btn--lg { padding: 20px 28px; }
  .gx-spec-rows > div { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
  .gx-btn--lg { width: 100%; }
  .gx-btn--arrow { display: block; width: fit-content; }
  .gx-btn--arrow::after { margin-left: 10px; }
  .gx-mnav__all { width: 100%; }
  .gx-mnav__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* preview-only: 44 px hit boxes on the approved footer's small links (carry into gx-footer.css) */
.gx-home .gx-footer__bottom nav a { padding: 11px 0; margin: -11px 0; }
.gx-home .gx-footer__orgs a { padding: 12px 0; margin: -12px 0; }
.gx-home .gx-footer__card li a { padding: 13px 0; }
/* home only: the footer as wide as the navbar and every section (the user: «el footer full width»); its band already
   runs edge to edge, now its content does too, with the same side gap as the navbar */
.gx-home .gx-footer__inner { max-width: none; padding-left: var(--gx-frame-gap); padding-right: var(--gx-frame-gap); }
/* home only: the three organisations already sit, larger, in the company sheet (the plugin keeps them in the footer on every other page) */
.gx-home .gx-footer__orgs { display: none; }
/* home only: no footer text under 16 px (the user's rule; carry into gx-footer.css), and a finger's 44 px on the
   footer's links on a touch screen wide enough for the desktop footer (a tablet on its side) */
.gx-home .gx-footer__btn { font-size: 16px; }
.gx-home .gx-footer__bottom { font-size: 16px; }
@media (pointer: coarse) and (min-width: 922px) {
  .gx-home .gx-footer__col a, .gx-home .gx-footer__col span { min-width: 44px; padding: 11.5px 0; }
}

/* 12 · reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gx-home *, .gx-home *::before, .gx-home *::after, .gx-mnav, .gx-mnav * { transition: none !important; animation: none !important; }
  .gx-price__old { --s: 100%; }
}


/* ficha técnica, smaller screens */
@media (max-width: 1100px) {
  .gx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gx-spec__frame { min-height: 0; padding-top: 96px; }
  .gx-unisex { grid-template-columns: minmax(0, 1fr); }
  .gx-unisex__media { min-height: 0; aspect-ratio: 16 / 10; }
  .gx-unisex__media img { object-position: 50% 28%; }
}
@media (max-width: 767px) {
  .gx-spec__frame { padding-top: 88px; }
  .gx-unisex__media { aspect-ratio: 4 / 3; }
  .gx-unisex__rows > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .gx-stats { grid-template-columns: minmax(0, 1fr); }
  .gx-stats li, .gx-stats li:first-child { padding: 16px 0 14px; }
  .gx-stats li + li { border-left: 0; border-top: 1px solid var(--gx-line-strong); }
  .gx-stat__v { font-size: 44px; }
  .gx-seg { display: flex; width: 100%; }
  .gx-seg button { flex: 1; padding: 8px 16px; }
}


/* catálogo por categorías, smaller screens: the tab bar scrolls sideways; 2 product columns on a phone */
@media (max-width: 1100px) {
  .gx-cats__tabs button { flex: 0 0 auto; }
}
@media (max-width: 921px) { .gx-cats__tabs { top: 82px; } }
@media (max-width: 767px) {
  .gx-cats__tabs button { min-height: 48px; padding-inline: 16px; }
  .gx-cats__tabs.gx-glass { background: linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .66)); -webkit-backdrop-filter: blur(26px) saturate(1.2) brightness(1.1); backdrop-filter: blur(26px) saturate(1.2) brightness(1.1); }
  .gx-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .gx-prod { padding: 8px; border-radius: 20px; }
  .gx-prod { -webkit-backdrop-filter: blur(26px) saturate(1.9) brightness(1.06); backdrop-filter: blur(26px) saturate(1.9) brightness(1.06); }   /* lighter blur on phones: less work for the GPU */
  .gx-prod__pic { border-radius: 13px; }
  .gx-prod__name a::after { border-radius: 20px; }
  .gx-prod__body { gap: 10px; padding: 12px 6px 6px; }
}
@media (prefers-reduced-motion: reduce) { .gx-cats__panel:not([hidden]) .gx-prod { animation: none; } }

/* así trabajamos, smaller screens */
@media (max-width: 1100px) {
  .gx-work__promises { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px clamp(22px, 3vw, 40px); }
  .gx-work__route { --route-pt: 0px; padding-top: clamp(28px, 4vh, 36px); }
  .gx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(22px, 3vw, 40px); }
  .gx-facts::before, .gx-fact::before, .gx-route__parcel { display: none; }
  .gx-fact { padding-top: 0; }
}
@media (max-width: 921px) {
  .gx-work__top { grid-template-columns: minmax(0, 1fr); }
  .gx-work__media { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
  .gx-work__media { aspect-ratio: 4 / 3; }
  .gx-work__promises { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .gx-facts { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .gx-work__pills { display: grid; }
  .gx-work__pills .gx-btn { justify-content: center; white-space: normal; text-align: center; }
}

/* reseñas, smaller screens */
@media (max-width: 1100px) { .gx-reviews__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .gx-reviews__list { grid-template-columns: minmax(0, 1fr); } }

/* punto de venta y empresa, smaller screens */
@media (max-width: 1100px) {
  .gx-pdv__wrap { grid-template-columns: minmax(0, 1fr); }
  .gx-pdv__card { justify-self: start; width: min(300px, 100%); }
  .gx-co__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .gx-co__stats li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .gx-co__logos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .gx-pdv__actions { display: grid; }
  .gx-pdv__actions .gx-btn { justify-content: center; white-space: normal; text-align: center; }
  .gx-co__v { font-size: clamp(40px, 12vw, 56px); }
  .gx-co__stats li { padding-left: 16px; padding-right: 8px; }
}
@media (max-width: 420px) { .gx-co__k { letter-spacing: 1.1px; font-size: 16px; } }

/* 13 · phones and tablets (the user: «hazlo mobile responsive 100%») ------------------------------------------ */
/* phones: the hero is exactly one screen, or a little more if its words need it (never cut) */
@media (max-width: 767px) {
  .gx-hero__frame { height: auto; min-height: 100vh; min-height: 100svh; }
  .gx-hero__copy { padding-top: 96px; }
}
/* the hero button stays on one line from 360 px up (16 px letters; a little less padding and letter spacing) */
@media (max-width: 544px) { .gx-hero__actions .gx-btn { padding: 18px 22px; letter-spacing: 1.2px; } }
@media (max-width: 374px) { .gx-hero__actions .gx-btn { padding-inline: 18px; letter-spacing: 1px; } .gx-hero__actions .gx-btn--arrow::after { margin-left: 8px; } }
/* the phone menu: on a wide one (a phone on its side, a tablet) the five product photos go in one row, square,
   instead of two huge columns */
@media (min-width: 640px) {
  .gx-mnav__tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gx-mnav__tiles > li:last-child:nth-child(odd) { grid-column: auto; }
  .gx-mnav__tile img, .gx-mnav__tiles > li:last-child:nth-child(odd) img { aspect-ratio: 1 / 1; }
  .gx-mnav__tile span { font-size: 18px; }
}
/* the desktop menu sheets on a narrow screen (922-1100 px: a big phone or a tablet on its side): closer columns, so the
   «Según tu nivel» cards keep their words inside, and «Ver todos los productos» may take two lines */
@media (max-width: 1100px) {
  .gx-panel__grid { gap: 28px 32px; }
  .gx-panel__all { white-space: normal; }
}
/* tablets: the point-of-sale text and its photo side by side, as on a computer (alone under the text the photo left
   half the width empty) */
@media (min-width: 768px) and (max-width: 1100px) {
  .gx-pdv__wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .gx-pdv__card { justify-self: center; }
}
/* a phone on its side (a short screen): the hero fits in one screen with its words and its button, the navbar and
   the catalogue's tab bar take less height, and the big photos are never taller than the screen */
@media (orientation: landscape) and (max-height: 540px) {
  .gx-nav { top: 8px; }
  .gx-nav, .gx-nav.is-scrolled, .gx-nav__pill, .gx-nav.is-scrolled .gx-nav__pill { --gx-nav-h: 58px; }
  .gx-mnav__bar { height: 58px; }   /* the phone menu's bar as tall as the navbar: the logo stays put when it opens */
  .gx-nav__logo img, .gx-nav.is-scrolled .gx-nav__logo img { width: 58px; }
  .gx-hero__frame { height: auto; min-height: 100vh; min-height: 100svh; }
  .gx-hero__copy { padding-top: 76px; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
  .gx-hero__title { font-size: clamp(28px, 10.5vh, 46px); font-size: clamp(28px, 10.5svh, 46px); margin-bottom: 14px; }
  .gx-hero__lead { margin-bottom: 18px; }
  .gx-hero__actions .gx-btn { padding: 16px 26px; }
  .gx-cats__tabs { top: 68px; }
  .gx-cats__tabs button { min-height: 44px; }
  .gx-cats__tabs.gx-glass { background: linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .66)); -webkit-backdrop-filter: blur(26px) saturate(1.2) brightness(1.1); backdrop-filter: blur(26px) saturate(1.2) brightness(1.1); }
  .gx-spec__frame { padding-top: 76px; }
  .gx-unisex__media { aspect-ratio: auto; height: 70vh; height: 70svh; }
  .gx-work__media { aspect-ratio: auto; height: 72vh; height: 72svh; }
  .gx-pdv__card { width: min(300px, 100%, 52vh); width: min(300px, 100%, 52svh); }
}

/* 14 · phones: everything centred, and the catalogue's categories as a grid (the user: «en mobile: ¿y que esté todo
   más centrado? … y las categorías de catálogo en vertical con columnas») ---------------------------------------- */
@media (max-width: 767px) {
  /* hero: the slogan, the line under it and the button in the middle */
  .gx-hero__copy { text-align: center; }
  .gx-slogans { justify-items: center; }
  .gx-hero__lead { margin-inline: auto; }
  .gx-hero__actions { justify-content: center; }

  /* ficha técnica */
  .gx-unisex__body { text-align: center; }
  .gx-unisex__lead { margin-inline: auto; }
  .gx-unisex__rows dd { justify-content: center; }
  .gx-stat__v { justify-content: center; }
  .gx-unisex__actions { justify-content: center; }
  /* each comparison row and each figure is a band of its own: a soft pink block with room around it, no lines (the
     user: «se mezcla visualmente, separa cada franja correctamente»); a wider gap between the two groups */
  .gx-unisex__rows { display: grid; gap: 10px; }
  .gx-unisex__rows > div, .gx-unisex__rows > div:last-child { padding: 14px 16px; border: 0; border-radius: 18px; background: rgba(255, 228, 242, .72); }
  .gx-stats { gap: 10px; margin-top: 26px; border-top: 0; }
  .gx-stats li, .gx-stats li:first-child, .gx-stats li + li { padding: 18px 16px 16px; border: 0; border-radius: 18px; background: rgba(255, 228, 242, .72); }
  .gx-unisex__cap { margin-top: 14px; }

  /* catalogue: the title, each card's name and price, the footnote */
  .gx-cats__h, .gx-cats__outlet, .gx-prod__body { text-align: center; }
  .gx-prod__price { justify-content: center; }
  /* the categories: all of them in sight. «Guantes» alone on the first row (the user: «pon guantes como primera y única
     columna, el resto en 2»), the rest two by two (a last one left alone takes the whole row). The bar no longer
     scrolls sideways (so no arrows) nor sticks under the navbar: four rows would cover too much of the screen */
  .gx-cats__tabs { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 28px; overflow: visible; }
  .gx-cats__tabs button { min-height: 52px; padding: 8px 12px; white-space: normal; text-align: center; line-height: 1.2; }
  .gx-cats__tabs button:first-of-type, .gx-cats__tabs button:last-of-type:nth-of-type(even) { grid-column: 1 / -1; }
  .gx-cats__more { display: none; }

  /* así trabajamos */
  .gx-work__head { justify-items: center; text-align: center; }
  .gx-work__pills { justify-items: center; }
  .gx-promise { align-items: center; text-align: center; }
  .gx-promise__badge { margin: 0 0 26px; }

  /* reseñas */
  .gx-reviews__h, .gx-review { text-align: center; }
  .gx-review__who { justify-items: center; }

  /* punto de venta */
  .gx-pdv__copy { text-align: center; }
  .gx-pdv__p { margin-inline: auto; }
  .gx-pdv__cities { justify-content: center; }
  .gx-pdv__actions { justify-items: center; }
  .gx-pdv__card { justify-self: center; text-align: center; }

  /* la empresa */
  .gx-co__stats li, .gx-co__stats li:nth-child(odd) { padding-inline: 10px; text-align: center; }
  .gx-co__v { justify-content: center; }
  .gx-co__logos, .gx-co__founder { text-align: center; }
  .gx-co__press, .gx-co__partners { justify-content: center; }
  /* the logos: each group («Han hablado de nosotras», «Formamos parte de») in its own soft pink band like the ficha's,
     with room between the two (the user: «lo mismo, se mezcla mucho también»); no line above them */
  .gx-co__logos { gap: 12px; padding-top: 0; border-top: 0; }
  .gx-co__group { padding: 20px 12px 14px; border-radius: 18px; background: rgba(255, 228, 242, .72); }
  .gx-co__label { margin-bottom: 10px; }
  /* the logos two by two on every phone, each pair centred (the user: «3 + 1, ¿no es mejor 2 + 2?»); an odd last one
     alone in the middle; they shrink a little on a narrow phone rather than wrap */
  .gx-co__press, .gx-co__partners { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-items: center; align-items: center; gap: 8px clamp(24px, 8vw, 48px); }
  .gx-co__partners li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .gx-co__partners img { max-width: 100%; height: auto; max-height: 24px; }

  /* the footer (home only, like the other footer overrides) */
  .gx-home .gx-footer__top { align-items: center; text-align: center; }
  .gx-home .gx-footer__aside { align-items: center; }
  .gx-home .gx-footer__social { justify-content: center; }
  .gx-home .gx-footer__col > summary { justify-content: center; gap: 10px; }
  .gx-home .gx-footer__col ul, .gx-home .gx-footer__card { text-align: center; }
  .gx-home .gx-footer__bottom { align-items: center; text-align: center; }
  .gx-home .gx-footer__bottom nav { justify-content: center; }
}

/* 15 · the phone menu's last block, in order (the user: «en menú está desorganizado») ----------------------------- */
/* «Mi cuenta» as an outline button the width of the menu, with its icon; under it the four languages and the four
   networks, each a centred row of the same 46 px circles (they were left, right and centre, in two sizes) */
/* (no line of its own on top: the last menu row above already ends with one) */
.gx-mnav__foot { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 16px; padding-top: 0; border-top: 0; }
.gx-mnav__foot > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid var(--gx-teal);
  border-radius: 999px;
  color: var(--gx-teal);
  font: 700 16px/1 var(--gx-sans);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  transition: background-color .2s linear, color .2s linear;
}
.gx-mnav__foot > a::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("../img/ui/account.svg") center / contain no-repeat; mask: url("../img/ui/account.svg") center / contain no-repeat; }
.gx-mnav__foot > a:hover, .gx-mnav__foot > a:focus-visible { background: var(--gx-teal); color: #fff; }
.gx-mnav__langs { justify-content: center; gap: 12px; margin: 0; }
.gx-mnav__langs a { width: 46px; min-width: 0; height: 46px; padding: 0; }
.gx-mnav__social { margin: 0; }

/* 16 · kitsch, 2026-10-01 (the user's changes) ------------------------------------------------------------------ */
/* the navbar: a plain bar the whole width of the screen, at the very top, no rounded ends and no gap at the sides
   («que no sea una pill, que empiece desde arriba, sin padding a los lados»). Its links and icons line up with the
   sections' edges; the menus still drop down from it on hover, as a sheet that starts at the top edge */
.gx-nav, .gx-nav.is-scrolled { top: 0; padding: 0; }
.gx-nav__pill { border: 0; border-bottom: 1px solid var(--gx-line); border-radius: 0; padding: 0 calc(var(--gx-frame-gap) - 12px); box-shadow: 0 12px 28px -22px rgba(9, 21, 27, .4); }
.gx-nav.is-scrolled .gx-nav__pill { box-shadow: 0 12px 28px -20px rgba(9, 21, 27, .45); }
.gx-nav__panel--menu { top: 0; padding-top: calc(var(--gx-nav-h) + 34px); }
@media (max-width: 921px) { .gx-nav { top: 0; } .gx-nav__pill { padding: 0 max(6px, calc(var(--gx-frame-gap) - 12px)); } }
@media (orientation: landscape) and (max-height: 540px) { .gx-nav { top: 0; } }

/* the hero: the slogan, the line under it and the button in the middle of the photo, the slogan and the button
   smaller («el texto título de la hero, centrado y letra más pequeña; el botón también»). With the words in the middle,
   the dark veil is even instead of darker on the left and at the bottom */
.gx-hero__frame { align-items: center; }
.gx-hero__copy { justify-self: center; width: 100%; max-width: 1080px; text-align: center; padding: calc(var(--gx-nav-h, 80px) + 40px) calc(var(--gx-frame-gap) + 24px) 64px; }
.gx-slogans { justify-items: center; }
.gx-hero__title { margin-bottom: 20px; font-size: clamp(32px, 3.2vw + 8px, 60px); }
.gx-hero__lead { margin: 0 auto 26px; }
.gx-hero__actions { justify-content: center; }
.gx-hero__actions .gx-btn { padding: 15px 24px; letter-spacing: 1.4px; }
.gx-hero__wash { background: radial-gradient(ellipse 72% 62% at 50% 52%, rgba(24, 44, 52, .74) 0%, rgba(27, 48, 56, .58) 60%, rgba(27, 48, 56, .46) 100%); }   /* a little darker since 2026-10-11: the ring photo is bright behind the words */
@media (max-width: 921px) { .gx-hero__title { font-size: clamp(30px, 4.6vw + 6px, 44px); } }
@media (max-width: 767px) {
  .gx-hero__title { font-size: clamp(28px, 7.2vw, 38px); margin-bottom: 18px; }
  .gx-hero__copy { padding: calc(var(--gx-nav-h, 68px) + 36px) calc(var(--gx-frame-gap) + 18px) 56px; }
  .gx-hero__wash { background: radial-gradient(ellipse 95% 60% at 50% 52%, rgba(24, 44, 52, .78) 0%, rgba(27, 48, 56, .62) 65%, rgba(27, 48, 56, .5) 100%); }
}
@media (max-width: 374px) { .gx-hero__actions .gx-btn { padding-inline: 16px; letter-spacing: 1px; } }
@media (orientation: landscape) and (max-height: 540px) {
  .gx-hero__copy { padding: calc(var(--gx-nav-h, 58px) + 14px) calc(var(--gx-frame-gap) + 24px) 18px; }
  .gx-hero__title { font-size: clamp(26px, 9vh, 40px); font-size: clamp(26px, 9svh, 40px); margin-bottom: 12px; }
  .gx-hero__lead { margin-bottom: 16px; }
}

/* the catalogue's categories no longer stick under the navbar: as the bar comes up to the navbar it fades out, so the
   two never overlap («al hacer scroll, el menú de categorías que se desvanezca»; js/gx-home.js · fadeUnderNav) */
.gx-cats__tabs { position: relative; top: auto; transition: opacity .12s linear; }

/* «Así trabajamos» is omitted: the reviews keep their distance from the catalogue */
.gx-cats + .gx-reviews { padding-top: var(--gx-gap); }

/* the ficha's photo (2026-10-11, the user's pick): a boxer on a bench closing the pink glove at her wrist, a portrait
   photo. On a computer the tall column shows almost all of it; where the box is wide (tablet, phone) the crop keeps
   her face and the glove */
.gx-unisex__media img { object-position: 50% 45%; }
@media (max-width: 1100px) { .gx-unisex__media img { object-position: 50% 32%; } }
@media (orientation: landscape) and (max-height: 540px) { .gx-unisex__media img { object-position: 50% 20%; } }   /* a short, wide box: her face first */
@media (orientation: landscape) and (max-height: 540px) { .gx-unisex__media { height: 85vh; height: 85svh; } }

/* the navbar's words in Karla («en el menú navbar letra Karla»): the two menus, Artículos and the language */
.gx-nav__link { font: 800 20px/1 var(--gx-sans); letter-spacing: .005em; }
.gx-nav__lang { font: 800 18px/1 var(--gx-sans); }
/* (a narrow computer or a tablet on its side, 922-1099 px: a little smaller and closer, so the links never reach the logo) */
@media (min-width: 922px) and (max-width: 1099px) {
  .gx-nav__link { padding: 0 9px; font-size: 18px; }
  .gx-nav__link::after { left: 9px; right: 9px; }
  .gx-nav__lang { padding: 0 10px; font-size: 17px; }
}

/* 17 · 2026-10-11: the hero is one still photo, the sparring in the ring («pongamos esta foto de fondo en hero en vez
   del gif»). On a computer the whole photo, the heads kept in view; on a phone or a tablet held upright its own crop
   (the boxer on the left, whole) */
.gx-hero__img { object-position: 50% 35%; }
/* portrait screens (phone, tablet upright) get their own photo, the two boxers on the ring apron wrapping their hands (2026-10-11: «en la hero, solo para mobile»); both stay in view */
@media (max-aspect-ratio: 1/1) { .gx-hero__img { object-position: 50% 50%; } }

/* 18 · 2026-10-11: the ficha's three concepts rewritten from the user's text are longer than the old ones. From a
   tablet up, each row reads in two lines on purpose: the standard glove crossed out, and under it the arrow with ours
   (the arrow no longer hangs at the end of a line); the label column a little narrower, so ours has room */
@media (min-width: 768px) {
  .gx-unisex__rows > div { grid-template-columns: 27% 1fr; }
  .gx-unisex__rows dd { gap: 3px 10px; }
  .gx-unisex__rows .gx-vs__old { flex: 0 0 100%; }
  .gx-unisex__rows .gx-vs__new { flex: 1 1 0; min-width: 0; }
}

/* 19 · 2026-10-11: two photos of the gym between the catalogue and the reviews («crea una sección con estas dos fotos
   antes de las reviews, que sea responsive»). Side by side, as wide as the navbar, framed like the other photos; one
   under the other on a phone. Both are portrait photos: shown a little less tall (4:5) and never taller than the
   screen, the faces kept in view */
.gx-duo { padding: var(--gx-gap) 0 0; }
.gx-duo__wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); width: 100%; margin: 0 auto; padding: 0 var(--gx-frame-gap, var(--gx-gutter)); }
.gx-duo__item { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; max-height: 86vh; max-height: 86svh; border-radius: var(--gx-r-card); background: rgba(255, 255, 255, .4); box-shadow: 0 30px 50px -28px rgba(48, 79, 90, .55); }
.gx-duo__item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.gx-duo__item:nth-child(2) img { object-position: 50% 60%; }
.gx-duo + .gx-reviews { padding-top: var(--gx-gap); }
@media (max-width: 767px) {
  .gx-duo__wrap { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .gx-duo__item { aspect-ratio: auto; height: 86vh; height: 86svh; }
}

/* 20 · 2026-10-11: the shipping and returns line at the very top, above the navbar, as a band that moves sideways
   («que vaya rotando horizontalmente, y que se lea mejor»; then «fondo naranja, letras con luminosidad de fondo, algo
   fantasioso»): a deep orange with a warm light drifting slowly across it, the words in Karla 800 at 16 px, cream and
   lit up (a soft glow around every letter, a sparkle between the three messages). The same three messages four times
   in a row sliding left without a seam (the track moves by exactly two copies, then starts again; js/gx-home.js · strip
   sets the speed from the real width); it pauses under the pointer, and stands still (one copy, centred) for whoever
   prefers no motion. The navbar sticks to the top once the band has scrolled away, as on the rest of the site */
:root, .gx-home { --gx-strip-h: 40px; }
.gx-strip {
  position: relative;
  z-index: 61;
  display: flex;
  align-items: center;
  height: var(--gx-strip-h);
  margin: 0;
  overflow: hidden;
  /* the site's dark green again (the user, 2026-10-11: «la franja que vuelva a fondo verde»), the words in blush */
  background: var(--gx-teal-deep);
  color: var(--gx-blush);
  font: 800 16px/1 var(--gx-sans);
  letter-spacing: .07em;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(255, 228, 242, .55), 0 0 16px rgba(255, 172, 216, .4);
  white-space: nowrap;
}
.gx-strip__track { display: flex; width: max-content; animation: gx-strip 60s linear infinite; }
.gx-strip__copy { display: flex; align-items: center; }
/* (each message and each sparkle is a block of its own, so Weglot translates every message apart and never moves a
   sparkle into the words) */
.gx-strip__msg { white-space: nowrap; }
.gx-strip__sep { margin: 0 1.3em; color: var(--gx-pink); font-style: normal; font-size: 13px; text-shadow: 0 0 8px rgba(255, 172, 216, .9), 0 0 16px rgba(246, 45, 174, .6); }
.gx-strip:hover .gx-strip__track { animation-play-state: paused; }
@keyframes gx-strip { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .gx-strip { height: auto; min-height: var(--gx-strip-h); padding: 10px 16px; white-space: normal; text-align: center; }
  .gx-strip__track { width: 100%; justify-content: center; animation: none; }
  .gx-strip__copy { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: .3em; line-height: 1.4; }
  .gx-strip__msg { white-space: normal; }
  .gx-strip__copy + .gx-strip__copy { display: none; }
  .gx-strip__sep { margin: 0 .6em; }
  .gx-strip__sep:last-child { display: none; }
}
/* the hero still fills the first screen together with the band */
.gx-hero__frame { height: calc(100vh - var(--gx-strip-h)); height: calc(100svh - var(--gx-strip-h)); }
@media (max-width: 767px), (orientation: landscape) and (max-height: 540px) { .gx-hero__frame { height: auto; min-height: calc(100vh - var(--gx-strip-h)); min-height: calc(100svh - var(--gx-strip-h)); } }

/* the hero's button in the brand pink («el botón de encontrar material en tono rosa»): no glass, the site's green
   words on pink, and on hover the fucsia with white words like every other button */
.gx-hero__actions .gx-btn {
  color: var(--gx-teal-deep);
  text-shadow: none;
  border-color: var(--gx-pink);
  background: var(--gx-pink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 18px 38px -18px rgba(9, 21, 27, .55);
}
.gx-hero__actions .gx-btn::before { display: none; }
.gx-hero__actions .gx-btn:hover, .gx-hero__actions .gx-btn:focus-visible { color: #fff; border-color: var(--gx-fucsia-hover); background: var(--gx-fucsia-hover); box-shadow: 0 22px 44px -18px rgba(9, 21, 27, .6); }

/* 21 · 2026-10-11: the navbar sits ON the page's ground, like the band, instead of floating over the hero's photo
   («en menú, sin hover, que esté con el fondo del body también»): it takes its own room at the top, the photo starts
   under it, and the band, the navbar and the photo together fill the first screen. At rest it has no colour of its own
   (the moving pink ground shows through); once the page scrolls it turns its soft pink (over the sections the words
   need a ground), as it does under the pointer and with a menu open. Its height no longer shrinks on scroll: it is in
   the flow now, and a change would move the page */
:root, .gx-home { --gx-bar-h: 80px; }
@media (max-width: 921px) { :root, .gx-home { --gx-bar-h: 68px; } }
@media (orientation: landscape) and (max-height: 540px) { :root, .gx-home { --gx-bar-h: 58px; } }
.gx-nav { height: var(--gx-bar-h); }
.gx-nav.is-scrolled { --gx-nav-h: var(--gx-bar-h); }
.gx-nav__pill { background: transparent; box-shadow: none; transition: height .3s var(--gx-ease), box-shadow .3s var(--gx-ease); }
/* scrolled: still the page's ground, not a pink band («que se integre con el fondo salvo hover»): a light, see-through
   veil of the same pink with a strong blur, so what passes under it fades away and the words keep reading */
.gx-nav.is-scrolled .gx-nav__pill { background: rgba(255, 238, 247, .62); -webkit-backdrop-filter: blur(20px) saturate(1.25); backdrop-filter: blur(20px) saturate(1.25); box-shadow: 0 12px 26px -24px rgba(9, 21, 27, .3); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .gx-nav.is-scrolled .gx-nav__pill { background: rgba(255, 238, 247, .94); } }
/* the pointer alone does not colour it («solo rosa al usar el desplegable»); with a menu open the row and its sheet are
   one piece: the same pink, no line and no shadow between them, and neither fades in («que no se note la transición») */
.gx-nav.has-panel .gx-nav__pill { background: var(--gx-blush-soft); box-shadow: none; border-bottom-color: transparent; transition: none; }
.gx-nav__panel--menu { animation: none; }
/* the band and the navbar are one block on the ground: no line between them */
.gx-strip { border-bottom: 0; }
/* the hero under both, filling the rest of the first screen; its words centred in what is left */
.gx-hero__frame { height: calc(100vh - var(--gx-strip-h) - var(--gx-bar-h)); height: calc(100svh - var(--gx-strip-h) - var(--gx-bar-h)); }
.gx-hero__copy { padding-top: 56px; padding-bottom: 56px; }
@media (max-width: 767px), (orientation: landscape) and (max-height: 540px) {
  .gx-hero__frame { height: auto; min-height: calc(100vh - var(--gx-strip-h) - var(--gx-bar-h)); min-height: calc(100svh - var(--gx-strip-h) - var(--gx-bar-h)); }
}
@media (max-width: 767px) { .gx-hero__copy { padding-top: 44px; padding-bottom: 44px; } }
@media (orientation: landscape) and (max-height: 540px) { .gx-hero__copy { padding-top: 16px; padding-bottom: 16px; } }

/* 22 · 2026-10-12: the phone menu on the desktop menu's lighter pink («el fondo ha de ser rosa como en desktop, que es
   más clarito»): the soft pink of the Tienda and Sobre nosotras sheets instead of the page's pink. Its two level cards
   were that soft pink already; on it they go white, like the desktop sheet's own cards */
.gx-mnav { background: var(--gx-blush-soft); }
.gx-mnav__card { background: #fff; }