@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans-variable.woff2") format("woff2"), url("assets/fonts/dm-sans-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans-italic-variable.woff2") format("woff2"), url("assets/fonts/dm-sans-italic-variable.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime Sans";
  src: url("assets/fonts/courier-prime-sans-regular.woff2") format("woff2"), url("assets/fonts/courier-prime-sans-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime Sans";
  src: url("assets/fonts/courier-prime-sans-bold.woff2") format("woff2"), url("assets/fonts/courier-prime-sans-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime Sans";
  src: url("assets/fonts/courier-prime-sans-italic.woff2") format("woff2"), url("assets/fonts/courier-prime-sans-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime Sans";
  src: url("assets/fonts/courier-prime-sans-bold-italic.woff2") format("woff2"), url("assets/fonts/courier-prime-sans-bold-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Lovelace Text";
  src: url("assets/fonts/lovelace-text-regular.woff2") format("woff2"), url("assets/fonts/lovelace-text-regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Lovelace Text";
  src: url("assets/fonts/lovelace-text-bold-italic.woff2") format("woff2"), url("assets/fonts/lovelace-text-bold-italic.otf") format("opentype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}
:root {
  /* Paleta de marca aprobada */
  --ink: #071D49;
  --ink-rgb: 7, 29, 73;
  --ink-deep: var(--ink);
  --text-blue: #6183D4;
  --reactive-100: #B4C9FA;
  --reactive-200: #91ACFF;
  --reactive-300: #6189E6;
  --reactive-400: #5082F8;
  --reactive-500: #3140CD;
  --blue: var(--text-blue);
  --sky: var(--reactive-200);
  --sky-bright: var(--reactive-400);
  --mist: #dbe7ff;
  --mist-light: #f2f6ff;
  --green: #83bd58;
  --coral: #f25362;
  --cream: #faf8f3;
  --white: #fff;
  --black: var(--ink);
  --muted: #52658a;
  --line: rgba(var(--ink-rgb), .22);
  --shadow: 0 22px 70px rgba(var(--ink-rgb), .14);
  --serif: "Lovelace Text", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", Arial, sans-serif;
  --mono: "Courier Prime Sans", "Courier New", monospace;
  --wrap: min(1180px, calc(100% - 80px));
  --header-height: 80px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; }
body {
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--ink);
  background: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
dialog { color: var(--ink); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  border: 1.5px solid var(--line);
  border-radius: 0;
  background-color: var(--white);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
  cursor: pointer;
}
input[type="checkbox"]:checked {
  border-color: var(--reactive-500);
  background-color: var(--reactive-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-linecap='square' stroke-linejoin='miter' stroke-width='2'/%3E%3C/svg%3E");
}
input[type="checkbox"]:focus-visible { outline-color: var(--reactive-400); }
.brand-check-svg {
  display: block;
  width: 62%;
  height: 62%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 2;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.04; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; }
h1 em, h2 em { font-style: italic; font-weight: 700; }
::selection { color: var(--white); background: var(--reactive-500); }
:focus-visible { outline: 3px solid var(--reactive-400); outline-offset: 4px; }
button:focus-visible { outline: 0; outline-offset: 0; }

.wrap { width: var(--wrap); margin-inline: auto; }
.section { padding: 104px 0; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ui-chevron {
  display: inline-block;
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border-top: 1.75px solid currentColor;
  border-right: 1.75px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .2s ease;
}
.ui-chevron--down { transform: rotate(135deg); }
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  color: var(--white);
  background: var(--ink);
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }
.eyebrow {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mono-lead { font-family: var(--mono); font-size: .9rem; }

/* Shared header */
.announcement {
  position: relative;
  z-index: 60;
  height: 38px;
  overflow: hidden;
  color: var(--white);
  background: var(--ink);
  font-family: var(--sans);
  font-size: .78rem;
  line-height: 38px;
  white-space: nowrap;
}
.announcement-track {
  display: flex;
  width: max-content;
  gap: 36px;
  padding-left: 28px;
  animation: ticker 30s linear infinite;
}
.announcement-track > span,
.announcement-track > a.announcement-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.announcement-track > a.announcement-item {
  color: inherit;
  text-decoration: none;
  cursor: pointer;   /* sin estilo de enlace: solo el puntero indica que es clicable */
}
.announcement-track i { font-size: 1.08em; font-style: normal; line-height: 1; }
.announcement:hover .announcement-track { animation-play-state: paused; }
.announcement-track b {
  color: var(--white);
  font-size: 1rem;
  font-weight: 700;
}
@keyframes ticker { to { transform: translateX(-50%); } }

.summer-promo {
  position: relative;
  z-index: 61;
  width: 100vw;
  max-width: 100%;
  min-height: 84px;
  overflow: hidden;
  color: var(--ink);
  background: linear-gradient(105deg, var(--reactive-100), var(--reactive-200) 52%, #c8dcff);
  font-family: var(--sans);
}
.summer-promo__inner {
  display: flex;
  min-height: 84px;
  padding-block: 8px;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 20px);
}
.summer-promo__message {
  display: flex;
  align-items: baseline;
  gap: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
.summer-promo__message strong {
  color: var(--white);
  font-size: .86rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.summer-promo__message span { font-size: .9rem; font-weight: 600; }
.summer-countdown {
  display: flex;
  align-items: start;
  gap: 8px;
  perspective: 700px;
  font-variant-numeric: tabular-nums;
}
.summer-countdown__unit {
  display: grid;
  min-width: 54px;
  grid-template-areas: "card" "label";
  justify-items: center;
}
.summer-countdown__unit small {
  grid-area: label;
  margin-top: 5px;
  color: var(--white);
  font-family: var(--sans);
  font-size: .5rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.summer-countdown__unit b {
  position: relative;
  display: grid;
  overflow: hidden;
  min-width: 54px;
  height: 44px;
  padding: 4px 7px 0;
  place-items: center;
  border: 0;
  border-radius: 6px;
  color: var(--ink);
  background:
    linear-gradient(to bottom,
      transparent calc(50% - .5px),
      rgba(255,255,255,.95) calc(50% - .5px) calc(50% + .5px),
      transparent calc(50% + .5px)),
    rgba(255,255,255,.42);
  box-shadow: none;
  font-family: var(--mono);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-shadow: none;
  transform-style: preserve-3d;
}
.summer-countdown__unit b::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: none;
  overflow: hidden;
  padding-top: 4px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background:
    linear-gradient(to bottom,
      transparent calc(50% - .5px),
      rgba(255,255,255,.95) calc(50% - .5px) calc(50% + .5px),
      transparent calc(50% + .5px)),
    rgba(255,255,255,.42);
  clip-path: inset(0 0 50% 0);
  content: attr(data-previous);
  text-align: center;
  text-shadow: none;
  transform-origin: center;
  backface-visibility: hidden;
}
.summer-countdown__unit b[data-previous]::before { display: flex; }
.summer-countdown__unit b::after { display: none; }
.summer-countdown__unit b.is-flipping::before {
  animation: countdown-tab-flip .5s cubic-bezier(.3,.7,.25,1) both;
}
@keyframes countdown-tab-flip {
  0% { transform: rotateX(0); }
  100% { transform: rotateX(-90deg); }
}
.summer-countdown > i {
  display: block;
  height: 44px;
  padding-top: 10px;
  align-self: start;
  color: var(--white);
  font-family: var(--sans);
  font-size: 1.15rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.site-header {
  position: sticky;
  z-index: 55;
  top: 0;
  min-height: var(--header-height);
  border-bottom: 1px solid rgba(var(--ink-rgb), .12);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  font-family: var(--sans);
}
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(1460px, calc(100% - 80px));
  height: var(--header-height);
}
.main-nav { justify-self: start; }
.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-nav a, .nav-drop-button, .nav-drop-toggle {
  display: inline-flex;
  min-height: 46px;
  padding: 0 14px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans);
  font-size: .96rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.main-nav .nav-home-link {
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
}
.nav-home-link svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.nav-split-control { display: inline-flex; align-items: center; }
.nav-split-control .nav-main-link { padding-right: 0; }
.nav-drop-toggle {
  width: 31px;
  padding: 0 10px;
  justify-content: flex-start;
  border-radius: 0;
}
.nav-drop-button { gap: 10px; }
.nav-drop-button[aria-expanded="true"] .ui-chevron--down,
.nav-drop-toggle[aria-expanded="true"] .ui-chevron--down,
.nav-item--dropdown:hover > .nav-drop-button .ui-chevron--down,
.nav-item--dropdown:hover > .nav-split-control .ui-chevron--down { transform: rotate(315deg); }
.main-nav > ul > li:hover > .nav-drop-button,
.main-nav > ul > li:hover > .nav-split-control,
.main-nav > ul > li > a:hover,
.main-nav > ul > li > a:focus-visible,
.main-nav > ul > li > a:active,
.nav-drop-button:focus-visible,
.nav-drop-button:active,
.nav-split-control:focus-within,
.nav-split-control:active,
.nav-split-control.is-current,
.main-nav [aria-current="page"] { color: var(--reactive-500); }
.main-nav .nav-home-link:hover,
.main-nav .nav-home-link:focus-visible,
.main-nav .nav-home-link:active {
  color: var(--ink);
  background: var(--reactive-100);
}
.nav-item--dropdown { position: relative; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: -24px;
  display: grid;
  grid-template-columns: minmax(190px, 1fr);
  min-width: 220px;
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: none;
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  transition: .2s ease;
}
.nav-dropdown::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 11px;
  content: "";
}
.nav-item--dropdown:hover .nav-dropdown,
.nav-item--dropdown.is-open .nav-dropdown { opacity: 1; transform: none; visibility: visible; }
.nav-dropdown > div { padding: 8px 16px; }
.nav-dropdown strong {
  display: block;
  margin: 4px 0 12px;
  color: var(--text-blue);
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.nav-dropdown a {
  display: block;
  min-height: 0;
  margin: 1px -9px;
  padding: 8px 9px;
  border-radius: 0;
  font-size: .82rem;
  font-weight: 500;
  transition: color .2s ease;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible,
.nav-dropdown a:active { color: var(--text-blue); background: transparent; }
.brand {
  display: flex;
  align-items: center;
  justify-self: center;
  min-width: 118px;
}
.brand-logo { display: block; width: 100px; height: 52px; object-fit: contain; }
.site-header .brand {
  width: 178px;
  min-width: 178px;
  height: var(--header-height);
}
.site-header .brand-logo { width: 178px; height: 74px; }
.brand-icon {
  position: relative;
  display: block;
  width: 43px;
  height: 26px;
  border: 3px solid currentColor;
  border-radius: 5px 5px 13px 13px;
}
.brand-icon::before {
  position: absolute;
  top: 4px;
  right: -13px;
  width: 13px;
  height: 12px;
  border: 3px solid currentColor;
  border-left: 0;
  border-radius: 0 12px 12px 0;
  content: "";
}
.brand-icon::after {
  position: absolute;
  top: -9px;
  left: 8px;
  width: 18px;
  height: 6px;
  border-top: 3px solid currentColor;
  border-radius: 50%;
  box-shadow: -20px 8px 0 -7px currentColor;
  content: "";
}
.brand-copy {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: .85;
  text-transform: lowercase;
}
.header-tools {
  display: flex;
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  padding-left: 16px;
  align-items: center;
  justify-self: stretch;
  justify-content: flex-end;
  gap: 12px;
}
.header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}
.language-switcher { position: relative; flex: 0 0 auto; font-family: var(--sans); }
.language-trigger {
  display: inline-flex;
  min-width: 56px;
  height: 48px;
  padding: 0 8px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}
.language-trigger .ui-chevron { position: relative; top: -1px; width: 9px; height: 9px; }
.language-trigger:hover,
.language-trigger:focus-visible,
.language-trigger:active { color: var(--reactive-500); }
.language-switcher.is-open .language-trigger { color: var(--reactive-500); }
.language-switcher.is-open .language-trigger .ui-chevron--down { transform: rotate(315deg); }
.language-options {
  position: absolute;
  z-index: 8;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  min-width: 92px;
  padding: 6px;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow);
}
.language-options[hidden] { display: none; }
.language-options button {
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  text-align: left;
}
.language-options button:hover,
.language-options button:focus-visible { background: var(--reactive-100); }
.language-options button[aria-current="true"] { color: var(--reactive-500); font-weight: 700; }
.icon-button, .menu-button {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transition: background .2s ease, color .2s ease;
}
.icon-button:hover,
.icon-button:focus-visible,
.icon-button:active,
.icon-button[aria-expanded="true"],
.menu-button:hover,
.menu-button:focus-visible,
.menu-button:active,
.menu-button[aria-expanded="true"] { background: var(--reactive-100); }
.icon-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.favorites-button svg { fill: none; stroke: currentColor; shape-rendering: geometricPrecision; }
.icon-button > img { width: 21px; height: 21px; object-fit: contain; }
.cart-count {
  position: absolute;
  top: 1px;
  right: -1px;
  display: grid;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  place-items: center;
  border: 2px solid var(--white);
  border-radius: 20px;
  color: var(--white);
  background: var(--reactive-500);
  font-size: .65rem;
  font-weight: 700;
}
.cart-count[hidden] { display: none; }
.menu-button {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.menu-button span, .menu-button::before, .menu-button::after {
  width: 17px;
  height: 1px;
  background: currentColor;
  content: "";
}
.mobile-menu { display: none; }
.site-header.is-searching .language-switcher { display: none; }

.header-search[hidden] { display: none; }
.header-search {
  width: min(440px, 100%);
  min-width: 0;
  max-width: 440px;
  flex: 1 1 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  animation: header-search-in .2s ease both;
}
@keyframes header-search-in {
  from { opacity: 0; }
}
.header-search__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  gap: 9px;
  font-family: var(--sans);
}
.header-search__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: stretch;
  min-width: 0;
  height: 48px;
  border: 2px solid var(--ink);
  background: var(--white);
}
.header-search__field input {
  width: 100%;
  min-width: 0;
  padding: 0 15px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: .88rem;
  font-weight: 400;
}
.header-search__field input::placeholder { color: rgba(var(--ink-rgb), .55); opacity: 1; }
.header-search__submit {
  display: grid;
  padding: 0;
  place-items: center;
  border: 0;
  color: var(--ink);
  background: transparent;
  transition: background .2s ease;
}
.header-search__submit:hover,
.header-search__submit:focus-visible,
.header-search__submit:active { background: var(--reactive-100); }
.header-search__submit svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
}
.header-search__cancel {
  display: inline-flex;
  min-height: 44px;
  padding: 0 8px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: .88rem;
  font-weight: 500;
  transition: background .2s ease;
}
.header-search__cancel:hover,
.header-search__cancel:focus-visible,
.header-search__cancel:active { background: var(--reactive-100); }

@media (min-width: 951px) and (max-width: 1100px) {
  .header-search__cancel { display: none; }
}

@media (max-width: 950px) {
  .site-header.is-searching .main-nav,
  .site-header.is-searching .header-inner > .brand,
  .site-header.is-searching .menu-button { display: none; }
  .site-header.is-searching .header-tools {
    grid-column: 1 / -1;
    width: 100%;
    padding-left: 0;
    justify-self: stretch;
    gap: 8px;
  }
  .site-header.is-searching .header-search { width: 100%; max-width: none; }
  .site-header.is-searching .search-button,
  .site-header.is-searching .account-button,
  .site-header.is-searching .language-switcher { display: none; }
  .site-header.is-searching .header-search__cancel { display: inline-flex; }
}

/* Buttons and headings */
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.button {
  display: inline-flex;
  min-height: 48px;
  padding: 0 24px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: .84rem;
  font-weight: 700;
  transition: background .2s, color .2s, border-color .2s;
}
.button--primary { color: var(--white); background: var(--ink); }
.button--primary:hover { background: var(--reactive-500); }
.button--light { color: var(--ink); background: var(--white); }
.button--light:hover { color: var(--white); background: var(--reactive-500); }
.button--outline { border-color: var(--ink); background: transparent; }
.button--outline:hover { color: var(--white); background: var(--ink); }
.button--full { width: 100%; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-size: .82rem;
  font-weight: 700;
}
.text-link .ui-chevron { transition: transform .2s; }
.text-link:hover .ui-chevron { transform: translateX(4px) rotate(45deg); }
.text-link--light { color: var(--white); }
.text-button { padding: 0 0 3px; border: 0; border-bottom: 1px solid; background: none; font-size: .78rem; font-weight: 700; }
.section-heading { margin-bottom: 48px; }
.section-heading h2 { margin: 0; font-size: clamp(3rem, 6vw, 5.7rem); }
.section-heading h2 em { color: var(--blue); }
.section-heading--split { display: flex; align-items: end; justify-content: space-between; gap: 64px; }
.section-heading--split > p { max-width: 430px; margin: 0 0 10px; color: var(--muted); }

/* Home */
.home-hero {
  position: relative;
  /* Altura FIJA en escritorio: el banner mantiene siempre la misma altura con
     independencia del ancho de pantalla. La imagen de cada slide se ajusta con
     object-fit: cover centrada horizontalmente (ver .home-hero__banner-media),
     de modo que puede expandirse/recortarse en horizontal pero nunca varía su
     altura. En ≤820px y ≤560px se usan alturas propias (móvil/tablet). */
  width: 100%;
  height: 560px;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: #b8cee8;
}
.home-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .7s ease, visibility .7s ease;
}
.home-hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.home-hero__slide::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(194,216,239,.28) 0%, rgba(205,224,243,.08) 48%, transparent 70%);
  content: "";
  pointer-events: none;
}
.home-hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  padding: clamp(44px, 5vw, 72px) 0 64px;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}
.home-hero__copy > * { max-width: 500px; }
.home-hero__title {
  margin: 0 0 24px;
  color: var(--ink);
  font-size: clamp(4rem, 7.2vw, 6.9rem);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
}
.home-hero__title em { color: var(--white); text-shadow: 0 2px 20px rgba(var(--ink-rgb), .12); }
.home-hero__slide--cold .home-hero__title span,
.home-hero__slide--cold .home-hero__title em { color: var(--reactive-500); text-shadow: none; }
.home-hero__copy > p {
  max-width: 430px;
  margin-bottom: 28px;
  font-family: var(--mono);
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.45;
}
.home-hero__copy > .button {
  min-width: 208px;
  border-color: var(--white);
  color: var(--ink);
  background: var(--white);
  font-family: var(--sans);
}
.home-hero__copy > .button:hover,
.home-hero__copy > .button:focus-visible,
.home-hero__copy > .button:active {
  border-color: var(--ink);
  color: var(--white);
  background: var(--ink);
}
.home-hero__slide--main .home-hero__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
}
.home-hero__slide--main .home-hero__title span,
.home-hero__slide--main .home-hero__title em {
  font-style: italic;
  font-weight: 700;
  white-space: normal;
}
html[lang="es"] .home-hero__slide--main .home-hero__title span,
html[lang="es"] .home-hero__slide--main .home-hero__title em { white-space: nowrap; }
html[lang="en"] .home-hero__slide--main .home-hero__title {
  width: min(760px, 100%);
  max-width: min(760px, 100%);
  font-size: clamp(2.8rem, 5.4vw, 5.4rem);
  text-wrap: balance;
}
.home-hero__slide--main .home-hero__copy > p {
  color: var(--white);
  font-family: var(--mono);
  font-weight: 400;
}
.home-hero__slide--cold .home-hero__copy > p { font-weight: 400; }
.home-hero__slide--cold .home-hero__copy > p strong { font-weight: 700; }
.home-hero__visual {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  background-position: center 57%;
  background-size: cover;
  transform-origin: center;
}
.home-hero__visual--main {
  background-image: url("assets/images/optimized/home-hero-main-1600.webp");
  background-position: center 85%;
  transform: scaleX(-1);
}
.home-hero__visual.home-hero__visual--cold {
  background-image: url("assets/images/optimized/home-hero-cold-1600.webp");
  background-position: center 63%;
}
.hero-pagination {
  position: absolute;
  z-index: 4;
  bottom: 20px;
  left: max(24px, calc((100% - min(1180px, calc(100% - 48px))) / 2));
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity .2s ease;
}
.home-hero:hover .hero-pagination,
.hero-pagination:focus-within { opacity: 1; }
.hero-pagination button {
  width: 34px;
  height: 3px;
  padding: 0;
  border: 0;
  background: rgba(255,255,255,.62);
  transition: width .2s ease, background .2s ease;
}
.hero-pagination button.is-active { width: 52px; background: var(--ink); }

/* Slides de "Banners portada" (gestionados desde el backoffice): imagen a sangre
   completa con enlace opcional y, si el banner lleva contenido, el texto
   superpuesto (Título línea 1/2, Subtítulo y Botón) sobre la imagen. */
.home-hero[hidden] { display: none; }
/* El juego de las tazas solo se muestra a quien ha iniciado sesión (lo enseña app.js). */
.tea-game[hidden] { display: none; }
.home-hero__slide--banner::after { content: none; }
/* Sombreado suave detrás del texto solo cuando el banner tiene contenido. */
.home-hero__slide--banner.has-copy::after { content: ""; }

.home-hero__banner-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.home-hero__banner-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--mist);
}
/* Zona clicable de todo el banner (por debajo del texto superpuesto). */
.home-hero__banner-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}
.home-hero__banner-link:focus-visible { outline: 3px solid var(--reactive-500); outline-offset: -3px; }

/* ---- Flechas del carrusel de portada (2026-09-24) ------------------------------------------
   Pedido del cliente: las MISMAS flechas del carrusel de Best sellers / Novedades, con dos
   diferencias: se enseñan solo cuando el ratón entra en el MARGEN lateral (no por toda la zona) y
   llevan detrás un círculo azul translúcido, porque los banners pueden tener fondos de cualquier
   color y la flecha suelta no se leería.
   Las franjas de margen miden lo que sobra a los lados del contenido (--wrap) y app.js las usa
   como regla para saber si el ratón está dentro. NO capturan el ratón (`pointer-events: none`): el
   enlace del banner ocupa todo el ancho y se comería sus clics, que a 1920 px son 370 px por lado.
   La flecha sí los recibe cuando está visible, que es cuando se puede pulsar.
   Solo en escritorio: a <=820 px se desliza con el dedo y aquí estorban. */
.home-hero__margen {
  position: absolute;
  z-index: 3;                              /* por encima del enlace (1) y del texto (2) */
  top: 0;
  bottom: 0;
  display: flex;
  width: calc((100% - var(--wrap)) / 2);
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
/* Las flechas van ARRIMADAS AL BORDE de la pantalla (2026-09-24): 24 px de aire mientras el
   margen dé para ello, y menos cuando el margen mide justo lo que la flecha (40 px a 1024 y menos),
   para no meterse en el contenido. `calc((100% - var(--wrap)) / 2 - 40px)` es exactamente el
   relleno máximo que deja la flecha fuera del contenido (el ancho del margen menos los 40 px de la
   flecha): si sale negativo o cero, la flecha queda pegada al borde del contenido.
   El tope pasó de 12 a 24 px el mismo día (el cliente pidió el DOBLE de separación). En pantallas
   de 1280 y menos el tope no manda —manda el contenido—, así que ahí el aire sigue siendo el que
   cabe (10 px a 1280, 0 a 1024): doblarlo exigiría pisar el texto. */
.home-hero__margen--anterior {
  left: 0;
  justify-content: flex-start;
  padding-left: clamp(0px, calc((100% - var(--wrap)) / 2 - 40px), 24px);
}
.home-hero__margen--siguiente {
  right: 0;
  justify-content: flex-end;
  padding-right: clamp(0px, calc((100% - var(--wrap)) / 2 - 40px), 24px);
}
/* El prefijo `.home-hero` no es decorativo: las reglas base de `.lta-carrusel__arrow` están más
   abajo en este fichero y, con la misma especificidad, ganarían por orden (le pondrían fondo
   blanco opaco y borde). */
.home-hero .home-hero__arrow {
  width: 40px;
  height: 40px;
  padding: 0;
  /* Azul de marca (--reactive-500, #3140CD) con transparencia: deja pasar el fondo del banner y
     mantiene el chevron blanco legible sobre imágenes claras y oscuras. */
  border: 0;
  background: rgba(49, 64, 205, .45);
  color: var(--white);
  opacity: 0;
  transition: opacity .25s ease, background .2s ease;
}
.home-hero.is-margen-anterior .home-hero__arrow[data-hero-arrow="anterior"],
.home-hero.is-margen-siguiente .home-hero__arrow[data-hero-arrow="siguiente"],
.home-hero .home-hero__arrow:focus-visible { opacity: 1; pointer-events: auto; }
.home-hero .home-hero__arrow:hover { background: rgba(49, 64, 205, .72); }
/* El chevron es un cuadrado con los bordes de arriba y de la derecha, GIRO 45 grados: su caja
   girada mide 18,4 px (13 x raiz de 2) pero la tinta solo ocupa la mitad (9,2 px), asi que el
   dibujo queda descentrado respecto al centro de giro. Sin circulo no se notaba; con circulo,
   si. Medido con captura a 4x: la tinta queda 3,5 px a la izquierda en «anterior» y 4,25 px a la
   derecha en «siguiente». Se corrige moviendo la tinta al centro (la traslacion va ANTES del
   giro, para que sea en horizontal de pantalla y no sobre el eje girado). */
.home-hero .home-hero__arrow .ui-chevron { transform: translateX(-4.25px) rotate(45deg); }
.home-hero .home-hero__arrow .lta-carrusel__chevron--previous { transform: translateX(3.5px) rotate(225deg); }
@media (max-width: 820px) {
  .home-hero__margen { display: none; }
}

/* Texto superpuesto: el texto no interfiere con el enlace del banner, salvo el
   botón, que es el enlace accesible. Cada texto toma su color (PC o móvil) desde
   las variables CSS del slide (--bc1d/--bc1m, etc.); el cambio a los colores de
   móvil ocurre en el mismo punto (820 px) que el cambio de imagen móvil. */
/* El texto de los banners va anclado ARRIBA, no centrado: así el titular empieza siempre a
   la misma altura, tenga el banner dos o tres líneas, y al girar el carrusel el texto no
   salta de sitio (centrado, un bloque más corto quedaba más abajo). El hero fijo
   (--main/--cold) sigue centrado, que ahí el texto es siempre el mismo. */
.home-hero__slide--banner .home-hero__copy { z-index: 2; pointer-events: none; justify-content: flex-start; }
.home-hero__slide--banner .home-hero__copy a,
.home-hero__slide--banner .home-hero__copy .button { pointer-events: auto; }
.home-hero__slide--banner .home-hero__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
}
.home-hero__slide--banner .home-hero__banner-t1,
.home-hero__slide--banner .home-hero__title em.home-hero__banner-t2,
.home-hero__slide--banner .home-hero__banner-t3 {
  color: var(--bc1d, var(--ink));
  font-style: italic;
  font-weight: 700;
  text-shadow: none;
}
.home-hero__slide--banner .home-hero__title em.home-hero__banner-t2 { color: var(--bc2d, var(--ink)); }
.home-hero__slide--banner .home-hero__banner-t3 { color: var(--bc3d, var(--ink)); }
.home-hero__slide--banner .home-hero__copy .home-hero__banner-sub {
  color: var(--bcsd, var(--ink));
  text-shadow: none;
}
/* El color del botón (campo del backoffice) pinta solo el texto; el fondo del
   botón es blanco fijo (hover → fondo tinta, texto blanco), como el hero original. */
.home-hero__slide--banner .home-hero__copy > .button.home-hero__banner-cta {
  color: var(--bcbd, var(--ink));
}
/* Versión móvil: los colores de móvil se aplican al bajar de 820 px. */
@media (max-width: 820px) {
  .home-hero__slide--banner .home-hero__banner-t1,
  .home-hero__slide--banner .home-hero__title em.home-hero__banner-t2,
  .home-hero__slide--banner .home-hero__banner-t3 { color: var(--bc1m, var(--bc1d, var(--ink))); }
  .home-hero__slide--banner .home-hero__title em.home-hero__banner-t2 { color: var(--bc2m, var(--bc2d, var(--ink))); }
  .home-hero__slide--banner .home-hero__banner-t3 { color: var(--bc3m, var(--bc3d, var(--ink))); }
  .home-hero__slide--banner .home-hero__copy .home-hero__banner-sub { color: var(--bcsm, var(--bcsd, var(--ink))); }
  .home-hero__slide--banner .home-hero__copy > .button.home-hero__banner-cta { color: var(--bcbm, var(--bcbd, var(--ink))); }
}

/* El botón del banner invierte su texto al pasar el ratón: como el fondo pasa de
   blanco a tinta, el color del texto (--bcbd, editable en el backoffice) no debe
   quedarse sobre el fondo oscuro. En hover/focus se fuerza el blanco (inversión),
   igual que hace el botón del hero estático. */
.home-hero__slide--banner .home-hero__copy > .button.home-hero__banner-cta:hover,
.home-hero__slide--banner .home-hero__copy > .button.home-hero__banner-cta:focus-visible,
.home-hero__slide--banner .home-hero__copy > .button.home-hero__banner-cta:active {
  color: var(--white);
}

/* Líneas de texto de los banners con contenido: el título ya no hereda el tope de
   500 px de .home-hero__copy > * (que partía "Línea 1" y dejaba el ancho sin usar):
   ocupa todo el ancho disponible del banner y cada una de sus líneas (Línea 1 y
   Línea 2) se muestra sin salto de línea, respetando el mismo margen a izquierda
   y a derecha. */
.home-hero__slide--banner .home-hero__copy > .home-hero__title {
  width: 100%;
  max-width: none;
}
.home-hero__slide--banner .home-hero__title .home-hero__banner-t1,
.home-hero__slide--banner .home-hero__title em.home-hero__banner-t2,
.home-hero__slide--banner .home-hero__title .home-hero__banner-t3 {
  white-space: nowrap;
}

/* ---- Tamaño del texto de los banners (backoffice → "Banners portada") ----
   Cada texto lleva DOS porcentajes sobre el tamaño de siempre de la web: uno para
   PC y otro para móvil, ajustables con los botones − / + del panel. La web los
   recibe como variables CSS del slide (--bs1d… PC / --bs1m… móvil) y aquí se
   multiplican sobre la base de cada texto: el titular escala con 1em (así respeta
   su tamaño fluido, que cambia con el ancho) y el subtítulo y el botón sobre su
   tamaño base. El juego de móvil entra en el mismo punto que el color y la imagen:
   820 px. */
.home-hero__slide--banner .home-hero__banner-t1 { font-size: calc(1em * var(--bs1d, 1)); }
.home-hero__slide--banner .home-hero__title em.home-hero__banner-t2 { font-size: calc(1em * var(--bs2d, 1)); }
.home-hero__slide--banner .home-hero__banner-t3 { font-size: calc(1em * var(--bs3d, 1)); }
.home-hero__slide--banner .home-hero__copy .home-hero__banner-sub { font-size: calc(.86rem * var(--bssd, 1)); }
.home-hero__slide--banner .home-hero__copy > .button.home-hero__banner-cta { font-size: calc(.84rem * var(--bsbd, 1)); }

@media (max-width: 820px) {
  .home-hero__slide--banner .home-hero__banner-t1 { font-size: calc(1em * var(--bs1m, 1)); }
  .home-hero__slide--banner .home-hero__title em.home-hero__banner-t2 { font-size: calc(1em * var(--bs2m, 1)); }
  .home-hero__slide--banner .home-hero__banner-t3 { font-size: calc(1em * var(--bs3m, 1)); }
  .home-hero__slide--banner .home-hero__copy .home-hero__banner-sub { font-size: calc(.86rem * var(--bssm, 1)); }
  .home-hero__slide--banner .home-hero__copy > .button.home-hero__banner-cta { font-size: calc(.84rem * var(--bsbm, 1)); }
}
/* En teléfonos el subtítulo baja de tamaño (igual que en el hero fijo): el
   multiplicador del panel se aplica sobre esa base. */
@media (max-width: 560px) {
  .home-hero__slide--banner .home-hero__copy .home-hero__banner-sub { font-size: calc(.72rem * var(--bssm, 1)); }
}

/* PC panorámico: el texto del banner usa el mismo ancho horizontal que el header
   (el ancho donde vive el icono de la casita), en lugar del contenido estándar
   de 1180 px. Así el margen izquierdo del texto queda alineado con el icono del
   home y el margen derecho es idéntico (mismo hueco a cada lado). */
@media (min-width: 1201px) {
  .home-hero__slide--banner .home-hero__copy.wrap {
    width: min(1460px, calc(100% - 80px));
    max-width: min(1460px, calc(100% - 80px));
  }
}

.promise-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 36px 0;
  color: var(--white);
  background-color: var(--ink);
}
.promise-strip::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(var(--ink-rgb), .16);
  content: "";
  pointer-events: none;
}
.promise-strip__video {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.promise-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.promise-grid article { position: relative; display: flex; padding: 2px 34px; align-items: center; flex-direction: column; text-align: center; }
.promise-grid article + article { border-left: 1px solid rgba(255,255,255,.35); }
.promise-grid .line-icon { display: block; width: 58px; height: 48px; margin: 0 auto 14px; object-fit: contain; filter: brightness(0) invert(1); }
.promise-grid h2 { margin: 0 0 14px; font-size: 1.18rem; font-weight: 400; letter-spacing: -.02em; }
.promise-grid p { width: 100%; max-width: 24ch; min-height: 4.05em; margin: 0 auto; color: rgba(255,255,255,.94); font-family: var(--sans); font-size: .78rem; line-height: 1.35; text-wrap: balance; }
/* Aparición de la tira de compromisos: la marca app.js (.is-revealed) cuando la tira llega a la
   pantalla. La parte de "todavía no" va en el CSS (con la marca que deja el <head> cuando hay
   JS) y NO en JS: si la añadiera app.js al arrancar, las tarjetas se verían un instante y luego
   se desvanecerían — el parpadeo que veía el cliente. Y ojo: esta tira usa su propia clase
   .is-revealed, distinta de la .lta-revelado de la aparición suave de bloques. */
html.lta-reveal-ready .promise-strip .promise-strip__video { opacity: 0; transform: scale(1.025); transition: opacity .75s ease, transform 1.2s cubic-bezier(.22,.7,.2,1); }
html.lta-reveal-ready .promise-strip .promise-grid article {
  border-color: transparent;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .7s cubic-bezier(.22,.7,.2,1), border-color .55s ease;
}
html.lta-reveal-ready .promise-strip .promise-grid .line-icon { opacity: 0; transform: translateY(7px) scale(.92); transition: opacity .45s ease, transform .65s cubic-bezier(.22,.7,.2,1); }
html.lta-reveal-ready .promise-strip.is-revealed .promise-strip__video { opacity: 1; transform: scale(1); }
html.lta-reveal-ready .promise-strip.is-revealed .promise-grid article { border-color: rgba(255,255,255,.35); opacity: 1; transform: none; }
html.lta-reveal-ready .promise-strip.is-revealed .promise-grid .line-icon { opacity: 1; transform: none; }
html.lta-reveal-ready .promise-strip .promise-grid article:nth-child(1),
html.lta-reveal-ready .promise-strip .promise-grid article:nth-child(1) .line-icon { transition-delay: .08s; }
html.lta-reveal-ready .promise-strip .promise-grid article:nth-child(2),
html.lta-reveal-ready .promise-strip .promise-grid article:nth-child(2) .line-icon { transition-delay: .18s; }
html.lta-reveal-ready .promise-strip .promise-grid article:nth-child(3),
html.lta-reveal-ready .promise-strip .promise-grid article:nth-child(3) .line-icon { transition-delay: .28s; }
html.lta-reveal-ready .promise-strip .promise-grid article:nth-child(4),
html.lta-reveal-ready .promise-strip .promise-grid article:nth-child(4) .line-icon { transition-delay: .38s; }
@media (prefers-reduced-motion: reduce) {
  html.lta-reveal-ready .promise-strip .promise-strip__video,
  html.lta-reveal-ready .promise-strip .promise-grid article,
  html.lta-reveal-ready .promise-strip .promise-grid .line-icon { opacity: 1; transform: none; transition: none; }
}

.category-section { padding: 54px 0; background: var(--white); }
.category-carousel-arrow,
.universe-carousel-arrow { display: none; }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.image-card { position: relative; overflow: hidden; background: var(--mist); }
.image-card img { width: 100%; height: 100%; aspect-ratio: 315/244; object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .3s; }
.image-card:nth-child(2) img { object-position: center 37%; }
.image-card::before,
.image-card::after { position: absolute; inset: 0; content: ""; transition: opacity .35s ease; }
.image-card::before { z-index: 1; background: linear-gradient(transparent 38%, rgba(var(--ink-rgb), .88)); }
.image-card::after { z-index: 2; background: var(--reactive-100); opacity: 0; }
.image-card:nth-child(2)::after { background: var(--reactive-200); }
.image-card:nth-child(3)::after { background: var(--reactive-300); }
.image-card:nth-child(4)::after { background: var(--reactive-400); }
.image-card:nth-child(5)::after { background: var(--reactive-500); }
.image-card:nth-child(6)::after { background: var(--ink); }
.image-card__label {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 22px;
  left: 24px;
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: .82;
  text-shadow: 0 2px 16px rgba(var(--ink-rgb), .4);
  transition: opacity .25s ease, transform .35s ease;
}
.image-card__details {
  position: absolute;
  z-index: 4;
  inset: 20px clamp(36px, 4vw, 58px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--white);
  font-family: var(--sans);
  font-size: clamp(.72rem, 1.05vw, .9rem);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .35s ease;
}
.image-card__details small {
  display: inline-flex;
  margin-top: 18px;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1;
}
.image-card:nth-child(-n+4) .image-card__details { color: var(--ink); }
.image-card:hover img { transform: scale(1.045); filter: saturate(1.08); }
.image-card:hover::before,
.image-card:focus-visible::before { opacity: 0; }
.image-card:hover::after,
.image-card:focus-visible::after { opacity: .98; }
.image-card:hover .image-card__label,
.image-card:focus-visible .image-card__label { opacity: 0; transform: translateY(8px); }
.image-card:hover .image-card__details,
.image-card:focus-visible .image-card__details { opacity: 1; transform: none; }

.tea-game {
  overflow: hidden;
  padding-block: 52px;
  color: var(--ink);
  background: var(--white);
}
.tea-game__inner {
  display: grid;
  grid-template-columns: minmax(500px, .88fr) minmax(560px, 1.12fr);
  align-items: center;
  gap: clamp(90px, 8vw, 135px);
}
.tea-game__header .eyebrow {
  margin-bottom: 30px;
  color: var(--reactive-500);
  font-size: .86rem;
  letter-spacing: .16em;
}
.tea-game__header h2 { margin: 0 0 22px; font-size: clamp(3.4rem, 5vw, 5.8rem); line-height: .88; }
.tea-game__header h2 span,
.tea-game__header h2 em { display: block; white-space: nowrap; }
.tea-game__header h2 span { font-family: var(--serif); font-style: normal; font-weight: 700; }
.tea-game__header h2 em { color: var(--reactive-300); }
.tea-game__header > p:last-child { max-width: 58ch; margin: 0; font-size: .96rem; }
.tea-game__stage {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 330px;
  padding: 24px 0 20px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  text-align: center;
}
.tea-game__stage::after {
  display: none;
  content: none;
}
.tea-game__cups {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 660px);
  min-height: 230px;
  margin-inline: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 18px;
}
.tea-game__cup-button {
  position: relative;
  display: grid;
  width: min(100%, 220px);
  min-width: 0;
  min-height: 0;
  padding: 0;
  place-items: center;
  justify-self: center;
  aspect-ratio: 1;
  border: 0;
  border-radius: 20px;
  color: var(--ink);
  background: transparent;
  transition: background .2s ease;
}
.tea-game__cup-button:not(:disabled):hover,
.tea-game__cup-button:not(:disabled):focus-visible { outline: 0; background: rgba(180,201,250,.42); }
.tea-game__cup-button:disabled { cursor: default; }
.tea-game__cup { position: relative; z-index: 2; display: block; width: min(120%, 240px); transform: translateY(-15px); transform-origin: center bottom; transition: transform .55s cubic-bezier(.2,.75,.2,1); }
.tea-game__cup img { display: block; width: 100%; height: auto; transition: opacity .2s ease; }
.tea-game__cup-result { position: absolute; inset: 0; opacity: 0; }
.tea-game__secret {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 12px;
  width: 64px;
  min-width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 50%;
  color: var(--white);
  background: var(--reactive-500);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  opacity: 0;
  transform: translateX(-50%) scale(.7);
  transition: opacity .25s ease, transform .35s ease;
}
.tea-game__secret > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  text-align: center;
}
.tea-game__secret > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-width: 2;
  transform: translate(-50%, -50%);
}
.tea-game__cup-button.is-winner .tea-game__cup,
.tea-game__cup-button.is-loser .tea-game__cup,
.tea-game__cup-button.is-death .tea-game__cup { transform: translateY(-82px) rotate(-3deg); }
.tea-game__cup-button.is-winner .tea-game__secret,
.tea-game__cup-button.is-loser .tea-game__secret,
.tea-game__cup-button.is-death .tea-game__secret { opacity: 1; transform: translateX(-50%); }
.tea-game__cup-button.is-winner .tea-game__secret { background: var(--green); }
.tea-game__cup-button.is-loser .tea-game__secret { background: var(--coral); }
.tea-game__cup-button.is-death .tea-game__secret { background: var(--ink); }
.tea-game__cup-button.is-loser .tea-game__cup { transform: translateY(-78px) rotate(8deg); }
.tea-game__cup-button.is-loser .tea-game__secret,
.tea-game__cup-button.is-death .tea-game__secret { font-size: 1.5rem; line-height: 1; }
.tea-game__cup-button.is-death .tea-game__cup { transform: translateY(-78px) rotate(-5deg); }
.tea-game__cup-button.is-winner .tea-game__cup-normal,
.tea-game__cup-button.is-loser .tea-game__cup-normal,
.tea-game__cup-button.is-death .tea-game__cup-normal { opacity: 0; }
.tea-game__cup-button.is-winner .tea-game__cup-good,
.tea-game__cup-button.is-loser .tea-game__cup-bad { opacity: 1; }
.tea-game__cup-button.is-death .tea-game__cup-toxic { opacity: 1; }
.tea-game__cups.is-shuffling .tea-game__cup-button:nth-child(1) { animation: tea-shuffle-left 1.35s ease-in-out both; }
.tea-game__cups.is-shuffling .tea-game__cup-button:nth-child(2) { animation: tea-shuffle-center 1.35s ease-in-out both; }
.tea-game__cups.is-shuffling .tea-game__cup-button:nth-child(3) { animation: tea-shuffle-right 1.35s ease-in-out both; }
@keyframes tea-shuffle-left {
  0%, 100% { transform: translateX(0); }
  32% { transform: translateX(105%) translateY(-16px); }
  66% { transform: translateX(210%); }
}
@keyframes tea-shuffle-center {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(105%); }
  70% { transform: translateX(-105%) translateY(-12px); }
}
@keyframes tea-shuffle-right {
  0%, 100% { transform: translateX(0); }
  32% { transform: translateX(-210%); }
  66% { transform: translateX(-105%) translateY(-16px); }
}
.tea-game__status {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 48px;
  margin: 18px auto 8px;
  place-items: center;
  align-content: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.4;
  text-align: center;
}
.tea-game__status br { display: none; }
.tea-game__status strong,
.tea-game__status span { display: block; }
.tea-game__status strong { color: var(--reactive-500); font-size: 1rem; letter-spacing: .06em; }
.tea-game__status [data-tea-replay-countdown] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
.tea-game__countdown-time {
  display: inline-block;
  padding: 2px 7px;
  color: var(--reactive-400);
  background: rgba(145,172,255,.14);
  font-size: 1.06em;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.4;
}

.best-sellers { color: var(--white); background: var(--ink); }
body[data-page="home"] .best-sellers {
  padding: clamp(44px, 4vw, 56px) 0 clamp(56px, 4.8vw, 68px);
}
.featured-products-heading { display: grid; margin-bottom: 38px; place-items: center; }
.featured-products-tabs {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(28px, 4vw, 64px);
}
.featured-products-tab {
  position: relative;
  padding: 0 0 12px;
  border: 0;
  color: rgba(255,255,255,.52);
  background: transparent;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 3.6rem);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: color .2s ease;
}
.featured-products-tab::after {
  position: absolute;
  bottom: 7px;
  left: 50%;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: var(--reactive-200);
  content: "";
  opacity: 0;
  transform: translateX(-50%) scaleX(.35);
  transition: opacity .2s ease, transform .2s ease;
}
.featured-products-tab:hover,
.featured-products-tab:focus-visible { color: rgba(255,255,255,.82); }
.featured-products-tab.is-active { color: var(--reactive-200); }
.featured-products-tab.is-active::after { opacity: 1; transform: translateX(-50%) scaleX(1); }
.best-sellers .product-grid--single {
  grid-template-columns: minmax(260px, 31.5%);
  justify-content: center;
}
@media (min-width: 951px) {
  body[data-page="home"] .best-sellers > .wrap { width: min(1320px, calc(100% - 80px)); }
  body[data-page="home"] .best-sellers .product-grid { gap: clamp(28px, 2.2vw, 36px); }
}
.best-sellers .eyebrow,
.best-sellers .section-heading > .text-link,
.universe .eyebrow,
.welcome .eyebrow { display: none; }
.section-heading--inverse { display: flex; align-items: end; justify-content: space-between; }
.section-heading--inverse h2 {
  display: flex;
  align-items: baseline;
  gap: .16em;
  color: var(--white);
  font-size: clamp(4.1rem, 7vw, 7rem);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.section-heading--inverse h2 em,
.section-heading--inverse h2 span { display: block; }
.section-heading--inverse h2 em { color: var(--white); }
.section-heading--inverse h2 span { color: #6183d4; }
.best-sellers .eyebrow { color: var(--sky); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.product-card { position: relative; min-width: 0; }
.product-card__media {
  position: relative;
  display: grid;
  aspect-ratio: 1/1;
  margin-bottom: 20px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--white);
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(var(--product-shift-x, 0), var(--product-shift-y, 0)) scale(1);
  transition: transform .35s ease;
}
.product-card:hover .product-card__media img { transform: translate(var(--product-shift-x, 0), var(--product-shift-y, 0)) scale(1.035); }
.product-card__labels {
  position: absolute;
  top: 12px;
  /* La caja es la de siempre: el margen de 12px por la izquierda y, por la derecha, el hueco del
     botón de favoritos (12 + 34 + 12), que es donde acaba la etiqueta.
     Dentro van DOS cosas en fila: la etiqueta del descuento, que va FIJA en la esquina superior
     izquierda (pedido del cliente, 2026-09-24), y el carril por el que pasan las demás. La fila
     SALTA sola cuando no caben las dos: en un teléfono la tarjeta mide ~177 px y «BEST SELLER»
     necesita 79, así que el carril baja a una segunda fila y nunca se pisan (ver
     `.product-card__labels-giro`). Va por el ancho de la TARJETA, no por el de la ventana: en la
     columna de favoritos las tarjetas son estrechas aunque la ventana sea ancha.
     El margen izquierdo va de relleno y no de posición, para que el recorte del carril quede en el
     borde de la foto (donde estaba) y no 12px antes. */
  left: 0;
  right: 58px;
  z-index: 3;
  display: flex;
  padding-left: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
}
/* El carril del paseo: es el único que recorta —la que entra asoma por su borde derecho, justo a la
   izquierda del corazón, y la que sale se va por su izquierda— y el que decide cuándo baja a la
   segunda fila. Los 120px de `flex-basis` son la frontera: por debajo de eso no caben el descuento
   y una etiqueta larga en la misma fila. */
.product-card__labels-giro {
  position: relative;
  flex: 1 1 120px;
  min-width: 0;
  min-height: 34px;
  overflow: hidden;
}
.product-card__label {
  /* Superpuesta a las demás y pegada al borde derecho de la caja (el hueco del corazón), ARRIBA
     como estaba: la caja mide 34px (lo que medían las dos filas) y si la etiqueta se centrara en
     vertical acabaría 5px más abajo que el corazón.
     Escondida a la derecha: es el punto de partida de la que entra. El paseo lo dirige app.js con la
     API de animaciones. El texto no se parte nunca en dos líneas. */
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  transform: translate(140%, 0);
  display: flex;
  white-space: nowrap;
  min-height: 24px;
  padding: 2px 8px 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: var(--ink);
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
}
/* La que se está viendo: en su sitio y opaca. app.js se la pone a la que entra (al acabar de
   deslizarse) y se la quita a la que sale; las demás se quedan escondidas a la derecha. */
.product-card__label.is-actual { opacity: 1; transform: translate(0, 0); }
/* Las etiquetas que no tocan se quedan con [hidden]: app.js se lo pone a la que sale y se lo quita
   a la que entra. Esta regla es imprescindible, porque el display: flex de la etiqueta le gana al
   [hidden] del navegador (misma especificidad, y la del autor va después). */
.product-card__label[hidden] { display: none; }
.product-card__label--eco {
  color: var(--white);
  background: #83bd58;
}
.product-card__label--new {
  color: var(--white);
  background: var(--reactive-200);
}
/* Best seller: el azul de marca, el mismo del botón "Best sellers" de la tienda. */
.product-card__label--best {
  color: var(--white);
  background: var(--reactive-500);
}
.product-card__label--sale {
  color: var(--white);
  background: var(--coral);
}
/* La etiqueta del DESCUENTO no entra en el paseo: se queda FIJA en la esquina superior izquierda de
   la foto (pedido del cliente, 2026-09-24), siempre visible y sin deslizarse. Las demás siguen
   pasando arriba a la derecha, junto al corazón, como siempre.
   Va después de `.product-card__label` a propósito: misma especificidad, así que gana por orden
   (aquella la deja escondida a la derecha con `opacity: 0` y `translate(140%)`).
   El `left: 12px` es el mismo margen que llevan las etiquetas de arriba (la caja tiene el borde en
   el de la foto y 12px de relleno) y la altura, la de la primera fila: la misma que el corazón. */
.product-card__label--fija {
  position: static;
  opacity: 1;
  transform: none;
}
.quick-add {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  color: var(--white);
  background: var(--ink);
  font-size: 1.35rem;
  transition: background .2s, color .2s;
}
.quick-add:hover { background: var(--reactive-500); }
.quick-add__icon { display: none; }
.favorite-button {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  transition: color .2s ease, transform .2s ease;
}
.favorite-button svg,
.product-favorite-button svg { width: 23px; height: 23px; fill: transparent; stroke: currentColor; stroke-linejoin: round; stroke-width: 1.6; }
.favorite-button:hover,
.favorite-button:focus-visible { color: var(--reactive-400); background: transparent; }
.favorite-button.is-saved { color: var(--reactive-400); background: transparent; }
.favorite-button.is-saved svg,
.product-favorite-button.is-saved svg { fill: currentColor; }
.product-card__topline { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.product-card h3 { margin: 0; font-family: var(--mono); font-size: .88rem; font-weight: 600; line-height: 1.45; }
.product-card h3 .product-eco { color: var(--green); font-style: normal; font-weight: 700; }
.product-card h3 a::after { position: absolute; inset: 0; z-index: 1; content: ""; }
.product-card__title-line {
  display: block;
  /* El nombre del producto se muestra completo (sin puntos suspensivos).
     Solo la descripción (.product-card__meta) usa el truncado con 3 líneas. */
}
.product-card__price { margin: 0; flex: 0 0 auto; font-weight: 700; }
.product-card__price--sale {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 3px;
  color: var(--coral);
}
.product-card__price--sale del {
  font-size: .72em;
  font-weight: 500;
  text-decoration-thickness: 1.5px;
}
.product-card__price--sale strong {
  color: var(--coral);
  font-size: 1em;
}
.product-card__meta {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
  /* Descripción corta: máximo 3 líneas con puntos suspensivos. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__rating { margin-top: 8px; color: var(--blue); font-size: .72rem; }
/* Formato de una combinación (20 pirámides, Granel 115 gr.…): distingue la tarjeta de una
   variante de la de su producto base. */
.product-card__format {
  margin: 2px 0 0;
  font-family: var(--mono, monospace);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.best-sellers .product-card__format { color: var(--sky); }
.best-sellers .product-card h3, .best-sellers .product-card__price { color: var(--white); }
.best-sellers .product-card h3 { font-size: 1.2rem; line-height: 1.3; }
.best-sellers .product-card h3 strong { font-weight: 700; }
.best-sellers .product-card h3 span { font-weight: 400; }
.best-sellers .product-card h3 .product-eco { color: var(--green); font-style: normal; font-weight: 700; }
.best-sellers .product-card__meta {
  min-height: 5.4em;
  margin-top: 16px;
  color: rgba(255,255,255,.88);
  font-family: var(--sans);
  font-size: 1.1rem;
  line-height: 1.35;
  -webkit-hyphens: none;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
}
.best-sellers .product-card__rating { color: var(--sky); }
.best-sellers .product-card__media { aspect-ratio: 1 / 1; margin-bottom: 28px; }
.best-sellers .product-card__price,
.best-sellers .product-card__rating { display: none; }
.best-sellers .favorite-button { display: none; }
.best-sellers .quick-add { top: 12px; right: 12px; bottom: auto; }
.best-sellers .product-card__labels { right: 68px; }
.best-sellers .product-card__label {
  min-height: 27px;
  padding-inline: 9px;
  font-size: .74rem;
}
.best-sellers .quick-add__label { display: none; }
.best-sellers .quick-add__icon {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  line-height: 0;
}
.best-sellers .quick-add__icon svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
}
.best-sellers.shop-featured {
  padding: 48px 0 44px;
}
.shop-featured .featured-products-heading { margin-bottom: 28px; }
.shop-featured .featured-products-tab { font-size: clamp(1.8rem, 3vw, 3rem); }
.best-sellers.shop-featured .product-grid {
  max-width: 1040px;
  gap: 24px;
}
.shop-featured .product-card__media {
  height: auto;
  aspect-ratio: 1 / 1;
  margin-bottom: 16px;
}
.shop-featured .product-card h3 {
  font-size: .95rem;
}
.shop-featured .product-card__meta {
  display: -webkit-box;
  min-height: 0;
  margin-top: 10px;
  overflow: hidden;
  font-size: .88rem;
  line-height: 1.4;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.universe { padding: 72px 0; background: #d8e4ff; }
.universe-layout { display: grid; grid-template-columns: minmax(300px, 330px) minmax(0, 1fr); align-items: stretch; gap: 88px; }
.universe-intro { display: flex; min-width: 0; padding: 4px 0; justify-content: space-between; flex-direction: column; }
.universe-intro h2 { margin: 0; font-size: clamp(3.7rem, 4.4vw, 4.8rem); font-style: italic; font-weight: 700; line-height: .9; }
.universe-intro h2 em { color: var(--blue); }
.universe-intro > p:last-child { max-width: 320px; margin: 0; font-family: var(--sans); font-size: 1.05rem; line-height: 1.45; }
.universe-cards { display: grid; grid-template-columns: repeat(4, 1fr); }
.universe-cards a { position: relative; aspect-ratio: 184/377; overflow: hidden; }
.universe-cards img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .5s; }
.universe-cards a:nth-child(1) img { object-position: 65% center; }
.universe-cards a:nth-child(2) img { object-position: 100% center; }
.universe-cards a:nth-child(3) img { object-position: 52% center; }
.universe-cards a:nth-child(4) img { object-position: center; }
.universe-cards a::before,
.universe-cards a::after { position: absolute; inset: 0; content: ""; transition: opacity .35s ease; }
.universe-cards a::before { z-index: 1; background: linear-gradient(transparent 38%, rgba(var(--ink-rgb), .88)); }
.universe-cards a::after { z-index: 2; background: var(--reactive-100); opacity: 0; }
.universe-cards a:nth-child(2)::after { background: var(--reactive-300); }
.universe-cards a:nth-child(3)::after { background: var(--reactive-500); }
.universe-cards a:nth-child(4)::after { background: var(--ink); }
.universe-card__label { position: absolute; z-index: 3; right: 15px; bottom: 18px; left: 15px; color: var(--white); font-family: var(--serif); font-size: clamp(1.55rem, 2.3vw, 2.35rem); line-height: .86; transition: opacity .25s ease, transform .35s ease; }
.universe-card__label.universe-card__label--soon { font-size: clamp(1.15rem, 1.7vw, 1.7rem); line-height: 1; white-space: nowrap; }
.universe-card__details {
  position: absolute;
  z-index: 4;
  inset: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(.7rem, .9vw, .84rem);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .35s ease;
}
.universe-card__details small { display: block; margin-top: 16px; font-size: .68rem; font-weight: 500; }
.universe-cards a:nth-child(3) .universe-card__details,
.universe-cards a:nth-child(4) .universe-card__details { color: var(--white); }
.universe-cards a:hover img { transform: scale(1.04); }
.universe-cards a:hover::before,
.universe-cards a:focus-visible::before { opacity: 0; }
.universe-cards a:hover::after,
.universe-cards a:focus-visible::after { opacity: .98; }
.universe-cards a:hover .universe-card__label,
.universe-cards a:focus-visible .universe-card__label { opacity: 0; transform: translateY(8px); }
.universe-cards a:hover .universe-card__details,
.universe-cards a:focus-visible .universe-card__details { opacity: 1; transform: none; }

@media (min-width: 1201px) {
  /* La banda «Nuestro Universo» va a lo ancho del espacio disponible, esté en la portada o copiada
     al final de nuestro-universo.html: es la MISMA pieza, así que no puede medir distinto en cada
     página. Antes el ensanchado estaba atado a la portada (`body[data-page="home"]`) y en la otra
     se quedaba con el `--wrap` normal: a 1440 eran 90 px de aire de más a cada lado (1180 de ancho
     frente a 1360). */
  .universe > .wrap { width: min(1560px, calc(100% - 80px)); }
}

.welcome { overflow: hidden; padding: 64px 0 0; }
.welcome-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(390px, .9fr); align-items: end; gap: 20px; }
.welcome-copy { position: relative; z-index: 2; padding-bottom: 64px; }
/* El titular no debe montarse sobre la foto de la fundadora: el tope (5.25rem) y la
   pendiente (5.5vw) estan medidos contra el borde real del recorte en cada ancho. */
.welcome h2 { width: max-content; max-width: none; margin: 0 0 34px; font-size: clamp(3.5rem, calc(6.4vw - 14px), 5.25rem); line-height: .9; }
.welcome-title__intro,
.welcome-title__line { display: block; }
.welcome-title__intro { color: var(--reactive-300); font-style: italic; font-weight: 400; }
.welcome-title__line { white-space: nowrap; }
.welcome h2 strong { color: var(--reactive-300); font-style: italic; font-weight: 700; }
.welcome-title__world { color: var(--ink); font-style: italic; font-weight: 700; }
.welcome-copy__body { max-width: 860px; color: var(--ink); }
.welcome-copy__body p { margin-bottom: 28px; font-size: clamp(.9rem, 1.05vw, 1rem); line-height: 1.55; }
.welcome-copy__body .mono-lead { margin-bottom: 36px; font-family: var(--mono); font-size: clamp(.82rem, .95vw, .94rem); line-height: 1.45; }
.signature {
  display: block;
  width: clamp(360px, 32vw, 489px);
  height: auto;
  margin: 24px 0 0 auto;
  filter: brightness(0) saturate(100%) invert(53%) sepia(40%) saturate(1055%) hue-rotate(186deg) brightness(94%) contrast(90%);
}
.welcome-portrait {
  position: relative;
  margin-bottom: -24px;
  transform: translateY(-24px);
}
.welcome-portrait > img { width: 100%; height: auto; max-height: 690px; object-fit: contain; object-position: bottom; }

@media (min-width: 1051px) {
  body[data-page="home"] .welcome > .wrap,
  body[data-page="home"] .tea-game > .wrap { width: min(1440px, calc(100% - 80px)); }
}

/* Footer */
.newsletter { color: var(--white); background: var(--ink); }
body[data-page="home"] .newsletter { position: relative; z-index: 2; margin-top: -2px; }
.newsletter-inner { display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: clamp(70px, 8vw, 120px); padding: 36px 0 26px; }
.newsletter-heading,
.newsletter-content { min-width: 0; }
.newsletter-heading { text-align: left; }
.newsletter-content {
  display: flex;
  width: 100%;
  align-self: center;
  flex-direction: column;
  justify-content: center;
}
.newsletter h2 { margin: 0; font-size: clamp(3rem, 3.9vw, 3.8rem); line-height: .88; }
.newsletter h2 em { color: var(--sky); }
.newsletter-title__line { display: block; }
.newsletter-title__mobile-extra { display: none; }
.newsletter .eyebrow { margin: 10px 0 0; color: var(--white); font-size: clamp(.9rem, 1.1vw, 1.05rem); letter-spacing: .1em; text-transform: none; }
.newsletter .eyebrow strong { color: var(--sky); font-weight: inherit; }
.newsletter-copy { margin: 0 0 10px; color: var(--white); font-size: clamp(.8rem, 1vw, .94rem); }
.newsletter-form { display: grid; grid-template-columns: minmax(0, 1fr) clamp(170px, 14vw, 206px); gap: 18px; }
.newsletter-form input {
  min-width: 0;
  height: 64px;
  padding: 0 32px;
  border: 0;
  background: var(--white);
  font-size: 1.05rem;
}
.newsletter-form input::placeholder { color: var(--reactive-200); font-style: italic; font-weight: 600; opacity: .82; }
.newsletter-form button {
  min-width: 0;
  min-height: 64px;
  padding-inline: 24px;
  color: var(--ink);
  background: var(--reactive-200);
  font-size: 1.05rem;
  font-weight: 700;
}
.newsletter-form button:hover,
.newsletter-form button:focus-visible {
  color: var(--white);
  background: var(--reactive-500);
}
body[data-page="shop"] .newsletter {
  color: var(--ink);
  border-top: 1px solid rgba(var(--ink-rgb), .12);
  border-bottom: 1px solid rgba(var(--ink-rgb), .12);
  background: var(--mist);
}
body[data-page="shop"] .newsletter h2,
body[data-page="shop"] .newsletter .eyebrow,
body[data-page="shop"] .newsletter-copy {
  color: var(--ink);
}
body[data-page="shop"] .newsletter h2 em,
body[data-page="shop"] .newsletter .eyebrow strong {
  color: var(--reactive-500);
}
body[data-page="shop"] .newsletter-form input {
  color: var(--ink);
  border: 1px solid rgba(var(--ink-rgb), .2);
  background: rgba(255, 255, 255, .9);
}
body[data-page="shop"] .newsletter-form input::placeholder {
  color: var(--text-blue);
}
body[data-page="shop"] .newsletter-form button {
  color: var(--white);
  background: var(--ink);
}
body[data-page="shop"] .newsletter-form button:hover,
body[data-page="shop"] .newsletter-form button:focus-visible {
  color: var(--white);
  background: var(--reactive-500);
}
@media (min-width: 1051px) {
  .newsletter > .wrap { width: min(1440px, calc(100% - 80px)); }
}
.site-footer {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: linear-gradient(90deg, rgba(var(--ink-rgb), .38), rgba(var(--ink-rgb), .13) 56%, rgba(255,255,255,.08)), url("assets/images/optimized/footer-mountains-1800.webp") center 43% / cover;
}
.footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 450px;
  grid-template-columns: minmax(360px, 1.1fr) minmax(270px, .8fr) 1fr;
  gap: clamp(50px, 6vw, 94px);
  padding: 36px 0 42px;
}
.footer-brand {
  width: 360px;
  min-width: 360px;
  height: 122px;
  margin: 0 0 16px -35px;
  justify-self: start;
  color: var(--white);
}
.footer-brand .brand-logo {
  width: 360px;
  height: 122px;
  object-position: left center;
  transition: filter .2s ease;
}
.footer-brand:active .brand-logo {
  filter: brightness(0) saturate(100%) invert(10%) sepia(41%) saturate(2996%) hue-rotate(201deg) brightness(85%) contrast(108%);
}
.footer-col h2 { margin: 0 0 4px; font-family: var(--mono); font-size: 1.35rem; font-weight: 700; letter-spacing: .04em; }
.footer-col p, .footer-col a { font-size: 1.16rem; }
.footer-col p { margin: 0 0 18px; line-height: 1.45; }
.footer-section-title { display: none; }
.footer-desktop-language { display: none; }
.footer-social-block,
.footer-social-icons { display: contents; }
.footer-links { display: flex; padding-top: 128px; flex-direction: column; align-items: flex-start; gap: 18px; }
.footer-links a { font-weight: 600; }
.footer-language-switcher { display: none; }
.footer-mobile-language {
  display: flex;
  margin: 0 0 30px;
  padding: 0;
  gap: 10px;
}
footer .footer-mobile-language { padding: 0; }
.footer-mobile-language button,
.footer-desktop-language__options button {
  min-width: 52px;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.35);
  color: var(--white);
  background: transparent;
  font-family: var(--sans);
  font-weight: 600;
}
.footer-mobile-language button:hover,
.footer-mobile-language button:focus-visible,
.footer-mobile-language button[aria-current="true"],
.footer-desktop-language__options button:hover,
.footer-desktop-language__options button:focus-visible,
.footer-desktop-language__options button[aria-current="true"] {
  border-color: var(--reactive-100);
  outline: 0;
  color: var(--ink);
  background: var(--reactive-100);
}
.footer-language-switcher .language-trigger {
  min-width: 0;
  height: 42px;
  padding: 0;
  justify-content: flex-start;
  gap: 14px;
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 700;
}
.footer-language-switcher .language-trigger .ui-chevron { width: 15px; height: 15px; }
.footer-language-switcher .language-options {
  z-index: 20;
  right: auto;
  left: 0;
}
.footer-language-switcher .language-trigger:hover,
.footer-language-switcher .language-trigger:focus-visible {
  outline: 0;
  color: var(--ink);
}
.footer-language-switcher.is-open .language-trigger { color: var(--ink); }
.footer-language-switcher .language-options button,
.footer-language-switcher .language-options button[aria-current="true"] {
  color: var(--ink);
}
.footer-language-switcher .language-options button:hover,
.footer-language-switcher .language-options button:focus-visible {
  outline: 0;
  color: var(--reactive-500);
  background: transparent;
}
.footer-links a:hover,
.footer-links a:focus-visible,
.footer-links a:active {
  color: var(--ink);
  text-decoration: none;
}
.social-links { display: flex; padding-top: 130px; align-items: flex-end; flex-direction: column; gap: 10px; }
.social-links a { display: grid; width: 58px; height: 58px; place-items: center; }
.social-links img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}
.social-links img,
.home-offer__socials img {
  --social-icon-scale: 1;
  transform: scale(var(--social-icon-scale));
  transform-origin: center;
}
.social-links img[src*="TikTok.svg"],
.social-links img[src*="social-whatsapp.svg"],
.social-links img[src*="social-facebook.svg"],
.home-offer__socials img[src*="TikTok.svg"],
.home-offer__socials img[src*="social-whatsapp.svg"],
.home-offer__socials img[src*="social-facebook.svg"] { --social-icon-scale: 1.06; }
.social-links img[src*="social-linkedin.svg"],
.home-offer__socials img[src*="social-linkedin.svg"] { --social-icon-scale: 1.21; }
.social-links a:focus-visible { outline: 0; }
.social-links a:hover img,
.social-links a:focus-visible img,
.social-links a:active img {
  filter: brightness(0) saturate(100%) invert(76%) sepia(25%) saturate(1544%) hue-rotate(191deg) brightness(104%) contrast(101%);
}
.footer-bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; padding: 18px 0 25px; border-top: 1px solid rgba(255,255,255,.32); font-family: var(--mono); font-size: .62rem; }
.footer-bottom { display: none; }
@media (min-width: 1051px) {
  .site-footer > .wrap { width: min(1440px, calc(100% - 80px)); }
  .footer-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(240px, .72fr) minmax(300px, 1.03fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }
  .footer-section-title {
    display: block;
    margin: 0;
    color: var(--white);
    font-family: var(--mono);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .footer-contact h2 { text-transform: uppercase; }
  .footer-links {
    padding-top: 128px;
    gap: 0;
  }
  .footer-links .footer-mobile-language { display: none; }
  .footer-legal-title { order: 1; }
  .footer-links > a {
    order: 2;
    margin-top: 16px;
  }
  .social-links {
    padding: 128px 0 0;
    align-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 28px clamp(30px, 3vw, 50px);
    transform: none;
  }
  .footer-desktop-language,
  .footer-social-block { display: block; }
  .footer-desktop-language__options,
  .footer-social-icons {
    display: flex;
    margin-top: 11px;
    align-items: center;
    gap: 6px;
  }
  .footer-desktop-language__options { gap: 10px; }
  .footer-social-title {
    margin: 0;
  }
  .social-links a { width: 44px; height: 44px; }
  .social-links img { width: 40px; height: 40px; }
}

/* Privacy policy */
body[data-page="privacy"] .newsletter { display: none; }
.legal-page { color: var(--ink); background: var(--mist-light); }
.legal-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(88px, 9vw, 138px) 0 clamp(76px, 8vw, 120px);
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(var(--ink-rgb), .84), rgba(var(--ink-rgb), .46) 60%, rgba(27, 78, 126, .25)),
    url("assets/images/optimized/contact-mountains-1920.webp") center 56% / cover;
}
.legal-hero::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 76% 15%, rgba(176, 204, 255, .26), transparent 29%);
  content: "";
  pointer-events: none;
}
.legal-hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: clamp(56px, 9vw, 150px);
  align-items: end;
}
.legal-hero__copy { max-width: 820px; }
.legal-hero__copy,
.legal-hero__card { min-width: 0; }
.legal-hero .eyebrow {
  margin-bottom: 23px;
  color: var(--reactive-100);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.legal-hero h1 {
  margin: 0;
  font-size: clamp(3.8rem, 5.8vw, 6rem);
  line-height: .9;
  letter-spacing: -.04em;
}
.legal-hero h1 em { color: var(--reactive-200); }
.legal-hero__copy > p:not(.eyebrow) {
  max-width: 660px;
  margin: 38px 0 0;
  color: rgba(255,255,255,.9);
  font-size: 1.04rem;
  line-height: 1.65;
}
.legal-hero__anchor {
  display: inline-flex;
  margin-top: 32px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255,255,255,.6);
  align-items: center;
  gap: 20px;
  font-size: .78rem;
  font-weight: 700;
}
.legal-hero__anchor:hover,
.legal-hero__anchor:focus-visible { color: var(--reactive-100); }
.legal-hero__card {
  padding: clamp(28px, 3.5vw, 42px);
  border: 1px solid rgba(255,255,255,.34);
  background: rgba(7, 29, 73, .34);
  backdrop-filter: blur(10px);
}
.legal-card__label {
  display: block;
  margin-bottom: 18px;
  color: var(--reactive-100);
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.legal-hero__card strong { display: block; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.4; }
.legal-hero__card strong { overflow-wrap: anywhere; }
.legal-hero__card p { margin: 0 0 18px; color: rgba(255,255,255,.82); font-size: .8rem; line-height: 1.6; }
.legal-hero__card a { color: var(--reactive-100); font-size: .82rem; font-weight: 700; }
.legal-section { padding: clamp(72px, 8vw, 124px) 0 clamp(90px, 10vw, 150px); }
.legal-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 900px);
  gap: clamp(48px, 8vw, 126px);
  align-items: start;
  justify-content: center;
}
.legal-index {
  position: sticky;
  top: 118px;
  padding-top: 10px;
}
.legal-index__eyebrow {
  margin: 0 0 24px;
  color: var(--reactive-500);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.legal-index nav { display: grid; border-top: 1px solid rgba(var(--ink-rgb), .18); }
.legal-index nav a {
  display: grid;
  padding: 17px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), .18);
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: .96rem;
  line-height: 1.4;
}
.legal-index nav a:hover,
.legal-index nav a:focus-visible { color: var(--reactive-500); }
.legal-index nav b { color: var(--reactive-500); font-family: var(--mono); font-size: .68rem; }
.legal-index__help {
  display: grid;
  margin-top: 34px;
  padding: 22px;
  gap: 8px;
  color: var(--white);
  background: var(--ink);
  font-size: .9rem;
}
.legal-index__help a { color: var(--reactive-100); font-size: 1.02rem; font-weight: 700; overflow-wrap: anywhere; }
.legal-document { display: grid; gap: 34px; }
.legal-article {
  scroll-margin-top: 112px;
  padding: clamp(34px, 5vw, 68px);
  border-top: 5px solid var(--reactive-400);
  background: var(--white);
  box-shadow: 0 20px 55px rgba(var(--ink-rgb), .07);
}
.legal-article > header {
  display: grid;
  margin-bottom: clamp(34px, 5vw, 58px);
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: start;
}
.legal-article > header > span {
  padding-top: 9px;
  color: var(--reactive-500);
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.legal-article h2 { max-width: 780px; margin: 0; font-size: clamp(1.75rem, 2.5vw, 2.5rem); line-height: 1.05; }
.legal-article section { scroll-margin-top: 112px; }
.legal-article section + section { margin-top: 42px; padding-top: 40px; border-top: 1px solid rgba(var(--ink-rgb), .13); }
.legal-article h3 { margin: 0 0 17px; font-family: var(--sans); font-size: 1.05rem; line-height: 1.35; }
/* Subtítulos que van EN MEDIO de un apartado (condiciones de venta: "a) Tarjeta", "I) Conformidad"…):
   el h3 base no lleva margen superior porque en privacidad siempre abre la sección. */
.legal-article p + h3,
.legal-article ul + h3 { margin-top: 30px; }
.legal-article p,
.legal-article li { color: var(--text-blue); font-size: .83rem; line-height: 1.72; }
.legal-article p { margin: 0; }
.legal-article p + p { margin-top: 18px; }
.legal-article ul { display: grid; margin: 18px 0 0; padding: 0; gap: 9px; list-style: none; }
/* El párrafo que sigue a una lista necesita el mismo aire que entre párrafos: sin esto queda
   pegado al último punto (se veía en las condiciones de venta, que llevan listas largas). */
.legal-article ul + p,
.legal-article ul + ul { margin-top: 18px; }
.legal-article li { position: relative; padding-left: 25px; }
.legal-article li::before {
  position: absolute;
  top: .72em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--reactive-400);
  content: "";
}
.legal-article a { color: var(--reactive-500); text-decoration: underline; text-underline-offset: 3px; }
.legal-newsletter-note {
  margin: 42px 0;
  padding: clamp(27px, 4vw, 38px);
  color: var(--white);
  background: var(--ink);
}
.legal-newsletter-note .eyebrow { margin: 0 0 10px; color: var(--reactive-200); }
.legal-newsletter-note h3 { margin-bottom: 14px; color: var(--white); font-family: var(--serif); font-size: 2rem; font-weight: 400; }
.legal-newsletter-note p:last-child { color: rgba(255,255,255,.82); }

@media (max-width: 1050px) {
  .legal-hero__layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 45px; }
  .legal-hero h1 { font-size: clamp(4.4rem, 10vw, 7rem); }
  .legal-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 38px; }
}

@media (max-width: 760px) {
  .legal-hero { padding: 70px 0 66px; }
  .legal-hero__layout { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .legal-hero__copy,
  .legal-hero__card {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }
  .legal-hero h1 { font-size: clamp(2.9rem, 12vw, 3.55rem); line-height: .84; }
  .legal-hero__copy > p:not(.eyebrow) { margin-top: 28px; font-size: .9rem; }
  .legal-hero__card { max-width: 520px; }
  .legal-layout { grid-template-columns: 1fr; gap: 40px; }
  .legal-index { position: static; }
  .legal-index nav { grid-template-columns: 1fr; }
  .legal-index__help { display: none; }
  .legal-article { padding: 32px 24px 38px; }
  .legal-article > header { grid-template-columns: 34px 1fr; gap: 10px; }
  .legal-article h2 { font-size: clamp(1.75rem, 6.5vw, 2.4rem); overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  .legal-hero h1 { font-size: clamp(2.8rem, 12vw, 3.15rem); }
  .legal-hero__card { padding: 25px 21px; }
  .legal-section { padding-top: 56px; }
  .legal-article { padding-inline: 20px; }
  .legal-article > header { display: block; }
  .legal-article > header > span { display: block; margin-bottom: 12px; }
  .legal-article h2 { font-size: 1.75rem; }
  .legal-newsletter-note { margin-inline: -8px; }
}

/* Shop */
.shop-hero {
  position: relative;
  overflow: hidden;
  padding: 94px 0 88px;
  background:
    radial-gradient(circle at 82% 35%, rgba(61,183,236,.7), transparent 27%),
    radial-gradient(circle at 56% 95%, rgba(116,195,241,.42), transparent 31%),
    linear-gradient(105deg, #f9fbff 20%, #e1f1ff 58%, #72c4e7 120%);
}
.shop-hero::after {
  position: absolute;
  inset: auto -10% -55% 25%;
  height: 78%;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  filter: blur(20px);
  content: "";
}
.shop-hero__inner { position: relative; z-index: 1; text-align: center; }
.shop-hero h1 { margin: 0 0 20px; font-size: clamp(4.4rem, 8vw, 8rem); }
.shop-hero h1 em { color: var(--blue); }
.shop-hero__inner > p:not(.eyebrow) { max-width: 680px; margin: 0 auto 34px; font-family: var(--mono); font-size: .8rem; }
.category-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.category-pills[hidden] { display: none; }
.category-pills button {
  min-height: 40px;
  padding: 0 17px;
  border: 1px solid rgba(var(--ink-rgb), .28);
  background: rgba(255,255,255,.62);
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
}
.category-pills button:hover { color: var(--white); background: var(--reactive-500); }
.category-pills button.is-active { color: var(--white); background: var(--ink); }
.shop-section { padding-top: 44px; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.shop-toolbar p { margin: 0; font-family: var(--mono); font-size: .74rem; }
.sort-label { display: flex; align-items: center; gap: 10px; font-size: .74rem; }
.sort-label select { min-height: 40px; padding: 0 36px 0 12px; border: 1px solid var(--line); background: var(--white); }
.filter-toggle { display: none; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px; border: 1px solid var(--line); background: var(--white); }
.shop-layout { display: grid; grid-template-columns: 210px 1fr; gap: 48px; padding-top: 34px; }
.filters { align-self: start; }
.filter-mobile-head { display: none; }
.filters fieldset { margin: 0; padding: 0 0 24px; border: 0; }
.filters fieldset + fieldset { padding-top: 22px; border-top: 1px solid var(--line); }
.filters legend { width: 100%; margin-bottom: 15px; font-family: var(--mono); font-size: .71rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.filters label { display: flex; align-items: center; gap: 9px; margin: 8px 0; color: var(--muted); font-size: .78rem; cursor: pointer; }
.filters input { width: 16px; height: 16px; accent-color: var(--ink); }
.catalog-search { position: relative; display: block; margin-bottom: 20px; }
.catalog-search svg { position: absolute; top: 50%; left: 16px; width: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; transform: translateY(-50%); }
.catalog-search input { width: 100%; height: 52px; padding: 0 18px 0 48px; border: 1px solid var(--line); background: var(--mist-light); }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.active-filters:empty { display: none; }
.filter-chip { padding: 6px 10px; border: 0; color: var(--ink); background: var(--mist); font-size: .69rem; }
.catalog-grid { grid-template-columns: repeat(3, 1fr); gap: 46px 22px; }
.catalog-grid .product-card h3 { font-size: .78rem; }
.catalog-grid .product-card__meta { min-height: 38px; }
.empty-state { padding: 90px 20px; text-align: center; }
.empty-state > span { color: var(--sky); font-family: var(--serif); font-size: 4rem; }
.empty-state h2 { margin: 12px 0; font-size: 2.6rem; }
.empty-state p { color: var(--muted); }
.ritual-banner { color: var(--white); background: linear-gradient(120deg, var(--ink) 0%, #3657a9 100%); }
.ritual-banner__inner { position: relative; padding: 78px 0; }
.ritual-banner__inner::after { position: absolute; right: 5%; bottom: 0; width: 250px; height: 170px; border: 1px solid rgba(255,255,255,.25); border-radius: 50% 50% 0 0; content: ""; }
.ritual-banner h2 { margin: 0 0 30px; font-size: clamp(3rem, 5vw, 5rem); }
.ritual-banner h2 em { color: var(--sky); }

/* Catalog composition from the approved design */
.shop-hero {
  min-height: 0;
  padding: 58px 0 70px;
  background: radial-gradient(circle at 84% 82%, rgba(89, 191, 242, .66), transparent 34%), var(--white);
}
.shop-hero--matcha { background: radial-gradient(circle at 74% 92%, rgba(134, 224, 113, .55), transparent 35%), var(--white); }
.shop-hero--cold { background: radial-gradient(circle at 79% 92%, rgba(238, 112, 230, .5), transparent 35%), var(--white); }
.shop-hero::after { display: none; }
.shop-hero h1,
.shop-hero h2 { margin: 0 0 18px; color: var(--ink); font-family: var(--serif); font-size: clamp(4.2rem, 7.5vw, 7rem); font-style: italic; font-weight: 700; line-height: .88; }
.shop-hero__inner > p:not(.eyebrow) { max-width: 690px; margin: 0 auto 26px; color: var(--ink); font-family: var(--mono); font-size: .73rem; font-weight: 700; line-height: 1.35; }
.category-pills { display: flex; max-width: 690px; margin: auto; flex-wrap: wrap; justify-content: center; gap: 10px; }
.category-pills a { min-width: 94px; padding: 9px 14px; color: var(--white); background: var(--ink); font-family: var(--mono); font-size: .65rem; font-weight: 700; text-align: center; text-transform: uppercase; }
.category-pills a:nth-child(3n+1) { background: var(--reactive-200); }
.category-pills a:nth-child(3n+2) { background: var(--reactive-300); }
.category-pills--matcha a:nth-child(1) { background: #82bd59; }
.category-pills--matcha a:nth-child(2) { background: #b0c57a; }
.category-pills--matcha a:nth-child(3) { background: #d2a722; }
.category-pills--matcha a:nth-child(4) { background: #b87845; }
.category-pills--matcha a:nth-child(5) { background: #8a5bc5; }
.category-pills--matcha a:nth-child(6) { background: #e95dc4; }
.category-pills--cold a:nth-child(1) { background: #83bd58; }
.category-pills--cold a:nth-child(2) { background: var(--ink); }
.category-pills--cold a:nth-child(3) { background: #ef5265; }
.category-pills a:hover { background: var(--reactive-500); }
.category-pills a.is-active { background: var(--ink); }
.catalog-section { padding: 62px 0 88px; }
#te-negro { min-height: 955px; }
#matcha { min-height: 815px; }
#te-verde { min-height: 785px; }
.catalog-heading { display: flex; align-items: baseline; gap: 16px; margin-bottom: 38px; }
.catalog-heading h2 { margin: 0; color: var(--text-blue); font-size: clamp(4rem, 7vw, 6.5rem); font-style: normal; font-weight: 700; line-height: .86; }
.catalog-heading--green h2 { color: #83bd58; }
.catalog-heading span { font-family: var(--mono); font-size: .7rem; }
.catalog-layout { display: grid; grid-template-columns: 125px minmax(0, 1fr); gap: 28px; align-items: start; }
.catalog-filters details { border-bottom: 1px solid var(--line); }
.catalog-filters summary { display: flex; padding: 10px 0; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: .59rem; font-weight: 700; list-style: none; text-transform: uppercase; cursor: pointer; }
.catalog-filters summary::-webkit-details-marker { display: none; }
.catalog-filters summary::after { content: "⌄"; }
.catalog-filters details[open] summary::after { transform: rotate(180deg); }
.catalog-filters label { display: flex; align-items: center; gap: 5px; margin: 5px 0; color: var(--ink); font-size: .55rem; }
.catalog-filters label:last-child { margin-bottom: 12px; }
.catalog-filters input { width: 10px; height: 10px; margin: 0; accent-color: var(--reactive-500); }
.catalog-section .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 22px; }
.catalog-section .catalog-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px; }
.catalog-section .product-card__media { aspect-ratio: 1 / 1; margin-bottom: 12px; }
.catalog-section .quick-add { right: 10%; bottom: 0; width: 80%; height: 34px; color: var(--white); background: var(--ink); font-size: .65rem; font-weight: 700; }
.catalog-section .quick-add:hover,
.catalog-section .quick-add:focus-visible { background: var(--reactive-500); }
.catalog-section .product-card h3 { font-family: var(--mono); font-size: .68rem; }
.catalog-section .product-card__price,
.catalog-section .product-card__rating { display: none; }
.catalog-section .product-card__meta { min-height: 0; margin-top: 8px; color: var(--ink); font-size: .59rem; line-height: 1.35; }
.shop-best-sellers { padding: 54px 0 62px; background: var(--reactive-300); }
.shop-best-sellers .section-heading { margin-bottom: 42px; }
.shop-best-sellers .section-heading h2 { color: var(--ink); }
.shop-best-sellers .section-heading h2 em { color: var(--white); }
.shop-best-sellers .section-heading h2 span { color: var(--ink); }
.shop-best-sellers .product-card h3 .product-eco { color: #d9ffb8; }
.shop-search-results { min-height: 520px; background: var(--white); }
.shop-search-results .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shop-hero.shop-hero--search { padding: 26px 0 22px; border-bottom: 1px solid var(--line); background: var(--white); }
.shop-hero--search .shop-hero__inner { text-align: left; }
.shop-hero.shop-hero--search h1 { margin: 0 0 7px; font-family: var(--sans); font-size: .82rem; font-style: normal; font-weight: 700; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; }
.shop-hero.shop-hero--search .shop-hero__inner > p:not(.eyebrow) { max-width: none; margin: 0; font-family: var(--sans); font-size: .7rem; font-weight: 400; }
.shop-search-empty {
  display: grid;
  min-height: 320px;
  padding: 48px 24px;
  place-items: center;
  align-content: center;
  background: var(--mist-light);
  text-align: center;
}
.shop-search-empty h3 { margin: 0 0 8px; font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.5rem); }
.shop-search-empty p { margin: 0 0 24px; color: var(--muted); }

/* Shop experience */
.shop-intro {
  position: relative;
  padding: 82px 0 76px;
  overflow: hidden;
  background: var(--mist-light);
}
.shop-intro::after {
  display: none;
}
.shop-intro__video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.shop-intro__layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  align-items: end;
  gap: clamp(40px, 8vw, 120px);
}
.shop-intro .eyebrow { color: var(--white); font-weight: 700; }
.shop-intro h1 {
  margin: 0;
  max-width: 760px;
  color: var(--white);
  font-size: clamp(3.65rem, 5.4vw, 5.35rem);
  line-height: .92;
}
.shop-intro h1 em { color: var(--white); }
.shop-title-line { display: inline-block; white-space: nowrap; }
.shop-intro__layout > p {
  max-width: 500px;
  margin: 0 0 8px;
  color: var(--white);
  font-size: clamp(.95rem, 1.2vw, 1.08rem);
  line-height: 1.65;
}
.shop-section-heading,
.shop-catalog__head {
  display: flex;
  margin-bottom: 34px;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
}
.shop-section-heading > div,
.shop-catalog__head > div { min-width: 0; }
.shop-section-heading .eyebrow,
.shop-catalog__head .eyebrow { margin-bottom: 10px; color: var(--reactive-500); }
.shop-catalog__head .eyebrow { margin-bottom: 24px; }
.shop-section-heading h2,
.shop-catalog__head h2,
.shop-catalog__head h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  line-height: .95;
}
.shop-section-heading h2 {
  font-size: clamp(2.6rem, 4.2vw, 4.2rem);
  white-space: nowrap;
}
.shop-section-heading > p {
  max-width: 430px;
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.55;
}
.shop-category-overview { padding-block: 72px 82px; background: var(--white); }
.shop-all-button {
  display: flex;
  width: 100%;
  min-height: 78px;
  margin-bottom: 16px;
  padding: 14px 28px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--ink);
  color: var(--white);
  background: var(--ink);
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.shop-all-button__copy {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  text-align: left;
}
.shop-all-button__copy strong {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1;
}
.shop-all-button__arrow {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.8;
}
.shop-all-button:hover,
.shop-all-button:focus-visible {
  border-color: var(--reactive-500);
  outline: 0;
  background: var(--reactive-500);
}
.shop-category-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.shop-category-card {
  position: relative;
  display: grid;
  min-height: 245px;
  padding: 28px;
  grid-template-rows: 1fr auto;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--white);
  text-align: left;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.shop-category-card:hover,
.shop-category-card:focus-visible {
  border-color: var(--reactive-300);
  outline: 0;
}
.shop-category-card.is-active {
  border-color: var(--reactive-500);
  color: var(--white);
  background: var(--reactive-500);
}
.shop-category-card strong {
  align-self: end;
  padding-right: 44px;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.5vw, 2.45rem);
  line-height: 1;
}
.shop-category-card small { max-width: 31ch; margin-top: 14px; color: var(--muted); font-size: .74rem; line-height: 1.45; }
.shop-category-card.is-active small { color: rgba(255,255,255,.78); }
.shop-category-card i {
  position: absolute;
  top: 26px;
  right: 28px;
  font-size: 1.4rem;
  font-style: normal;
}
.shop-category-card--visual {
  overflow: hidden;
  border-color: rgba(255,255,255,.18);
  color: var(--white);
  background-position: center;
  background-size: cover;
  isolation: isolate;
}
.shop-category-card--visual::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(135deg, rgba(7,29,73,.96), rgba(44,74,165,.68));
  content: "";
}
.shop-category-card--visual > * { position: relative; z-index: 1; }
.shop-category-card--visual small,
.shop-category-card--visual.is-active small { color: rgba(255,255,255,.78); }
.shop-category-card--visual:hover::before,
.shop-category-card--visual:focus-visible::before,
.shop-category-card--visual.is-active::before { background: var(--reactive-500); }
.shop-category-card--visual:hover,
.shop-category-card--visual:focus-visible,
.shop-category-card--visual.is-active {
  border-color: var(--reactive-500);
  color: var(--white);
}
.shop-category-card--infusions { background-image: url("assets/images/optimized/category-tea-infusions-1200.webp"); }
.shop-category-card--matcha { background-image: url("assets/images/optimized/category-matcha-lattes-1200.webp"); }
.shop-category-card--cold { background-image: url("assets/images/optimized/category-cold-tea-1200.webp"); }
.shop-category-card--gifts { background-image: url("assets/images/optimized/category-packs-gifts-568.webp"); }
.shop-category-card--accessories { background-image: url("assets/images/optimized/category-accessories-1200.webp"); }
.shop-category-card--exclusive { background-image: url("assets/images/optimized/category-exclusive-1000.webp"); }
@media (min-width: 821px) {
  .image-card:nth-child(2) img { object-position: center 60%; }
  .shop-category-card--cold { background-position: center 66%; }
}
.shop-catalog { padding: 0 0 105px; background: var(--white); scroll-margin-top: 24px; }
.shop-catalog-hero {
  position: relative;
  display: flex;
  height: 230px;
  overflow: hidden;
  align-items: center;
  isolation: isolate;
}
.shop-catalog-hero__video {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.shop-catalog-hero .shop-catalog__head {
  position: relative;
  z-index: 1;
  width: min(var(--wrap), calc(100% - 30px));
  margin-bottom: 0;
}
.shop-catalog-hero .shop-catalog__head .eyebrow,
.shop-catalog-hero .shop-catalog__head h1,
.shop-catalog-hero .shop-catalog__head > p { color: var(--white); }
.shop-catalog-title__query {
  display: inline-block;
  margin-left: .22em;
  font-family: var(--mono);
  font-size: .26em;
  font-style: normal;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .035em;
  vertical-align: .18em;
}
.shop-catalog__head { margin-bottom: 28px; }
.shop-catalog__head > p { margin: 0 0 6px; color: var(--muted); font-family: var(--mono); font-size: .68rem; text-transform: uppercase; }
.shop-category-tabs { margin-bottom: 38px; border: 0; background: transparent; }
.shop-category-tabs > .wrap {
  display: flex;
  padding-block: 14px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.shop-category-tabs__categories,
.shop-category-tabs__special { display: flex; align-items: center; gap: 10px; }
.shop-category-tabs__categories {
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.shop-category-tabs__categories::-webkit-scrollbar { display: none; }
.shop-category-tabs__special { padding-left: 20px; border-left: 1px solid var(--line); }

/* Botones de categoria centrados en el listado. Con "safe", si no caben (ventanas
   estrechas, donde el carril se desplaza) se quedan a la izquierda en vez de recortar
   el primero: centrar a secas deja el arranque inalcanzable al desbordar. */
@media (min-width: 821px) {
  .shop-category-tabs__categories { justify-content: safe center; }
}
.shop-category-tabs button,
/* Las colecciones especiales se visten igual que los botones de categoría de arriba: misma
   tipografía y mismos efectos. Se comparte la regla para que no se desincronicen. */
.shop-special-filters button {
  display: inline-flex;
  height: 42px;
  min-height: 42px;
  padding: 2px 18px 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--white);
  font-family: var(--mono);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.shop-category-tabs button:hover,
.shop-category-tabs button:focus-visible { border-color: var(--reactive-400); outline: 0; }
.shop-category-tabs button.is-active {
  border-color: var(--reactive-500);
  color: var(--white);
  background: var(--reactive-500);
}
.shop-special-filters [data-shop-special="new"] {
  border-color: var(--reactive-200);
  color: var(--reactive-300);
}
.shop-special-filters [data-shop-special="new"].is-active { border-color: var(--reactive-300); background: var(--reactive-300); color: #ffffff; }
.shop-special-filters [data-shop-special="eco"] {
  border-color: #83bd58;
  color: #659f3d;
}
.shop-special-filters [data-shop-special="eco"].is-active { border-color: #83bd58; background: #83bd58; color: #ffffff; }
/* Best sellers: azul de marca. Al seleccionarlo, el texto pasa a blanco para que se lea
   sobre el relleno (con el azul encima del azul no habría contraste). */
.shop-special-filters [data-shop-special="best"] {
  border-color: #3140CD;
  color: #3140CD;
}
.shop-special-filters [data-shop-special="best"].is-active { border-color: #3140CD; background: #3140CD; color: #ffffff; }
/* Colecciones especiales: van apiladas en el lateral, encima del bloque de filtros y con
   su mismo ancho. Antes eran una fila en la barra de categorías. */
.shop-special-filters { display: grid; gap: 8px; margin: 0 0 18px; }
.shop-special-filters button { width: 100%; justify-content: center; background: transparent; }
.shop-catalog-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 54px);
}
.shop-filter-panel {
  position: static;
  max-height: calc(100dvh - var(--header-height) - 48px);
  padding: 0 14px 0 0;
  overflow: auto;
  border: 0;
  background: transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--reactive-200) transparent;
}
.shop-filter-panel::-webkit-scrollbar { width: 6px; }
.shop-filter-panel::-webkit-scrollbar-track { background: transparent; }
.shop-filter-panel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--reactive-200);
}
.shop-filter-panel__head {
  display: flex;
  padding: 0 2px 13px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 0;
}
.shop-filter-panel__head strong {
  color: var(--reactive-500);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.shop-filter-panel__head button {
  padding: 0;
  border: 0;
  color: var(--reactive-500);
  background: transparent;
  font-size: .68rem;
}
.shop-filter-clear__mobile { display: none; }
/* Botón de limpiar fuera de la persiana: solo en móvil (ver media query más abajo). */
.shop-filter-clear-outside { display: none; }
.shop-filter-form {
  padding: 0 2px;
  border: 0;
  background: transparent;
}
.shop-filter-form details { border-bottom: 1px solid var(--line); }
.shop-filter-form details:last-child { border-bottom: 0; }
.shop-filter-form summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .035em;
  list-style: none;
  text-transform: uppercase;
  cursor: pointer;
}
.shop-filter-form summary::-webkit-details-marker { display: none; }
.shop-filter-form summary::after {
  width: 9px;
  height: 9px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  content: "";
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.shop-filter-form details[open] summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.shop-filter-options { padding: 0 0 17px; }
.shop-filter-options label {
  display: flex;
  min-height: 27px;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: .74rem;
  line-height: 1.25;
  cursor: pointer;
}
.shop-filter-options input {
  appearance: none;
  width: 14px;
  height: 14px;
  margin: 0;
  flex: 0 0 auto;
  border: 1px solid var(--reactive-500);
  background: var(--white);
}
.shop-filter-options input:checked {
  border-color: var(--reactive-500);
  background: var(--reactive-500);
  box-shadow: inset 0 0 0 3px var(--white);
}
.shop-filter-options input:focus-visible { outline: 2px solid var(--reactive-200); outline-offset: 2px; }
.shop-filter-toggle {
  display: none;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--white);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
}
.shop-catalog-results { min-width: 0; }
.shop-catalog-results .active-filters { margin: 0 0 20px; }
.shop-catalog-results .filter-chip {
  display: inline-flex;
  min-height: 32px;
  padding: 0 10px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--reactive-200);
  color: var(--ink);
  background: var(--white);
  font-family: var(--mono);
  font-size: .62rem;
}
.shop-catalog-results .filter-chip:hover { border-color: var(--reactive-500); }
.shop-catalog-results .filter-chip span { font-size: 1rem; line-height: 0; }
.shop-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 320px; }
.shop-catalog-grid .product-card__topline {
  display: grid;
  min-height: 3.1rem;
  grid-template-columns: minmax(0, 1fr) minmax(72px, auto);
  align-items: start;
  gap: clamp(12px, 1.5vw, 22px);
}
.shop-catalog-grid .product-card h3 {
  min-width: 0;
  min-height: 2.5em;
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.25vw, 1.28rem);
  font-weight: 700;
  line-height: 1.08;
}
.shop-catalog-grid .product-card h3 a {
  display: grid;
  gap: 2px;
}
.shop-catalog-grid .product-card__price {
  min-width: 72px;
  padding-top: 1px;
  text-align: right;
}
.shop-catalog-grid .product-card__price--sale { padding-top: 0; }
.shop-catalog-grid .quick-add {
  right: 10%;
  bottom: 12px;
  width: 80%;
  height: 36px;
  color: var(--white);
  background: var(--ink);
  font-size: .64rem;
  font-weight: 700;
}
.shop-catalog-grid .quick-add:hover,
.shop-catalog-grid .quick-add:focus-visible { background: var(--reactive-500); }
/* En la tienda (solo PC): el botón "Añadir al carrito" queda oculto hasta pasar el ratón
   por encima de la tarjeta (o enfocarla con teclado). En móvil/táctil se mantiene visible. */
@media (min-width: 821px) {
  body[data-page="shop"] .shop-catalog-grid .quick-add {
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s, background .2s, color .2s;
  }
  body[data-page="shop"] .shop-catalog-grid .product-card:hover .quick-add,
  body[data-page="shop"] .shop-catalog-grid .product-card:focus-within .quick-add {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}
.shop-filter-empty {
  display: grid;
  min-height: 430px;
  padding: 50px 24px;
  grid-column: 1 / -1;
  place-items: center;
  align-content: center;
  border: 0;
  background: var(--white);
  text-align: center;
}
.shop-filter-empty > span { color: var(--reactive-200); font-family: var(--serif); font-size: 4rem; line-height: 1; }
.shop-filter-empty__icon {
  width: 64px;
  height: 64px;
  fill: none;
  stroke: var(--reactive-200);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: .65;
}
.shop-filter-empty__icon .shop-filter-empty__eye { stroke-width: 1.25; }
.shop-filter-empty h3 { margin: 10px 0 8px; font-family: var(--serif); font-size: clamp(2rem, 3vw, 3rem); }
.shop-filter-empty p { max-width: 440px; margin: 0 0 24px; color: var(--muted); }
.shop-intro--search { padding-block: 42px; border-bottom: 1px solid var(--line); background: var(--white); }
.shop-intro--search::after,
.shop-intro--search .shop-intro__video { display: none; }
.shop-intro--search .shop-intro__layout { display: block; }
.shop-intro--search .shop-intro__copy .eyebrow { display: none; }
.shop-intro--search h1 { font-family: var(--sans); font-size: 1rem; font-style: normal; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.shop-intro--search h1,
.shop-intro--search .shop-intro__layout > p { color: var(--ink); }
.shop-intro--search .shop-intro__layout > p { margin-top: 8px; font-size: .78rem; }

/* Product detail */
.breadcrumbs { display: flex; gap: 9px; padding-top: 22px; color: var(--muted); font-family: var(--mono); font-size: .64rem; }
.breadcrumbs a:hover { color: var(--reactive-500); }
.product-mobile-back { display: none; }
.product-detail { padding-top: 48px; }
.product-detail__layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr); gap: 70px; }
.product-gallery__main { position: relative; display: grid; min-height: 580px; place-items: center; border: 1px solid var(--line); background: #fff; }
.product-gallery__main img { width: 100%; height: 100%; max-height: 580px; object-fit: contain; }
.gallery-dots { display: none; justify-content: center; gap: 6px; padding-top: 14px; }
.gallery-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.gallery-dots .is-active { background: var(--ink); }
.product-info { padding-top: 20px; }
.product-info .eyebrow { color: var(--blue); }
.product-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  align-items: start;
  column-gap: 24px;
}
.product-title-row h1 {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: start;
  max-width: 500px;
  margin: 0 0 18px;
  font-size: clamp(2.8rem, 4.6vw, 5.2rem);
}
.product-title-row h1 em { color: var(--green); font-style: normal; font-weight: 700; }
/* En escritorio el precio queda debajo del corazón, alineado al fondo con la
   última línea del nombre del producto. */
.product-price {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
}
.product-price--sale {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 5px;
  color: var(--coral);
}
.product-price--sale del {
  font-size: .72em;
  font-weight: 500;
  text-decoration-thickness: 1.5px;
}
.product-price--sale strong { font-size: 1em; }
.product-favorite-button {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  width: 48px;
  height: 48px;
  padding: 0;
  flex: 0 0 48px;
  place-items: center;
  border: 0;
  color: var(--ink);
  background: transparent;
  transition: color .2s ease;
}
.product-favorite-button:hover,
.product-favorite-button:focus-visible { color: var(--reactive-400); background: transparent; }
.product-favorite-button.is-saved { color: var(--reactive-400); background: transparent; }
.product-description { color: var(--muted); }
.rating-row { display: flex; align-items: center; gap: 8px; margin: 28px 0 22px; font-size: .78rem; }
.rating-row a { text-decoration: underline; }
.stars { color: var(--reactive-400); letter-spacing: 2px; }
.star-half {
  color: transparent;
  background: linear-gradient(90deg, var(--reactive-400) 50%, var(--line) 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.buy-row { display: grid; grid-template-columns: 126px 1fr; gap: 12px; }
.quantity-control { display: grid; grid-template-columns: 38px 1fr 38px; min-height: 50px; border: 1px solid var(--ink); }
.quantity-control button { border: 0; background: transparent; font-size: 1.15rem; }
.quantity-control input { min-width: 0; border: 0; text-align: center; -moz-appearance: textfield; }
.quantity-control input::-webkit-inner-spin-button { display: none; }
.shipping-note { margin: 14px 0 24px; color: var(--muted); font-size: .72rem; }
.shipping-note span { color: var(--green); font-size: .55rem; }
.product-accordions { margin-top: 32px; border-top: 1px solid var(--line); }
.product-accordions details { border-bottom: 1px solid var(--line); }
.product-accordions summary { display: flex; min-height: 52px; padding: 0; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .035em; list-style: none; text-transform: uppercase; cursor: pointer; }
.product-accordions summary::-webkit-details-marker { display: none; }
.product-accordions summary::after {
  width: 9px;
  height: 9px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  content: "";
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.product-accordions details[open] summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.product-accordions details > div { padding: 0 30px 18px 0; color: var(--muted); font-size: .78rem; }
.benefit-band { color: var(--white); background: var(--sky); }
.benefit-band .wrap { display: grid; grid-template-columns: repeat(var(--product-feature-count, 4), 1fr); }
.benefit-band .wrap > span { display: flex; min-height: 62px; align-items: center; justify-content: center; gap: 10px; border-left: 1px solid rgba(255,255,255,.35); }
.benefit-band b { font-size: 1.5rem; }
/* Copia duplicada del carrusel de beneficios: solo visible en móvil. */
.product-feature-icon {
  display: block;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 0;
  border-radius: 50%;
  background: transparent;
}
.product-feature-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ingredients { padding-bottom: 70px; }
.ingredient-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; }
.ingredient-grid--single { grid-template-columns: minmax(0, 760px); }
.ingredient-grid article { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center; }
.ingredient-grid img { width: 200px; height: 148px; object-fit: cover; }
.ingredient-grid h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 1.4rem; font-weight: 500; }
.ingredient-grid h3 em { display: block; font-weight: 500; }
.ingredient-grid p { margin: 0; color: var(--muted); font-size: .78rem; }
.ingredient-orb {
  display: grid;
  width: 200px;
  height: 148px;
  place-items: center;
  color: var(--white);
  background:
    radial-gradient(circle at 72% 24%, rgba(255,255,255,.3), transparent 24%),
    linear-gradient(135deg, color-mix(in srgb, var(--ingredient-color) 76%, white), var(--ingredient-color));
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .16em;
}
.community-section { padding-top: 58px; background: var(--sky); }
.community-head { display: flex; align-items: end; justify-content: space-between; color: var(--white); }
.community-head h2 { display: flex; margin: 0 0 26px; align-items: center; gap: .2em; font-size: clamp(2rem, 4vw, 4rem); }
.community-head h2 > span { transform: translateY(3px); }
.community-instagram-icon { width: .96em; height: .96em; flex: 0 0 auto; object-fit: cover; filter: brightness(0) invert(1); transform: translateY(.01em); }
.community-head p { margin-bottom: 30px; }
.community-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.community-grid figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 9 / 16; border: 0; background: var(--ink); isolation: isolate; }
.community-grid figure::before {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  left: 10px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.88) 0 32%,
    transparent 32% 34%,
    rgba(255,255,255,.88) 34% 66%,
    transparent 66% 68%,
    rgba(255,255,255,.88) 68% 100%
  );
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), .25);
  content: "";
}
.community-grid figure::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--ink-rgb), .48), transparent 20%, transparent 74%, rgba(var(--ink-rgb), .22));
  content: "";
  pointer-events: none;
}
.community-grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--white); }
.community-grid figcaption {
  position: absolute;
  z-index: 3;
  top: 22px;
  left: 14px;
  display: flex;
  padding: 0;
  align-items: center;
  gap: 7px;
  color: var(--white);
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(var(--ink-rgb), .7);
}
.community-grid figcaption::before {
  width: 24px;
  height: 20px;
  flex: 0 0 24px;
  background: url("assets/images/Home/social-instagram.svg") center / cover no-repeat;
  filter: brightness(0) invert(1);
  content: "";
}
.reviews-summary { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--line); font-size: .78rem; }
.reviews-summary p { margin: 0; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding-top: 34px; }
.review-grid[hidden] { display: none; }
.review-grid article { padding: 24px; border: 1px solid var(--line); }
.review-author { margin-bottom: 18px; }
.review-author p { margin: 0; }
.review-author small { display: block; color: var(--blue); font-size: .64rem; }
.review-grid h3 { margin: 9px 0; font-family: var(--mono); font-size: .78rem; }
.review-grid article > p { margin: 0; color: var(--muted); font-size: .74rem; }
.related-products { background: var(--mist-light); }

/* Product composition from the approved design */
.product-detail { padding: 42px 0 64px; }
.product-detail__layout { grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr); gap: 16px; align-items: start; }
.product-gallery {
  display: grid;
  width: min(100%, 614px);
  grid-template-columns: calc(25% - 8.5px) calc(75% - 5.5px);
  gap: 14px;
}
.product-thumbnails {
  display: grid;
  align-self: start;
  max-height: 455px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
}
/* Con exactamente 3 fotos y sin flechas, las filas de las flechas ocultas quedan
   vacías pero sus huecos siguen restando altura: los eliminamos para que el
   carrusel llene toda la columna sin recortar la última foto. */
.product-thumbnails.is-fill { gap: 0; }
.product-thumbnails__viewport { display: grid; overflow: hidden; }
.product-thumbnails__track {
  display: grid;
  gap: 10px;
  align-content: start;
  justify-items: center;
  transition: transform .25s ease;
}
/* Botones de miniatura dentro de la pista desplazable. */
.product-thumbnails__track button { position: relative; width: 100%; max-width: 118px; min-height: 0; height: auto; padding: 0; overflow: hidden; aspect-ratio: 1; border: 1px solid var(--line); background: var(--white); }
.product-thumbnails__track button.is-active { border-color: var(--ink); }
.product-thumbnails__track img { width: 100%; height: 100%; object-fit: cover; }
.product-thumbnails__track button:first-child img { object-fit: contain; }
/* Flechas ↑/↓ para recorrer las miniaturas cuando hay más de 3. */
.product-thumbnails__nav {
  display: grid;
  width: 100%;
  height: 30px;
  min-height: 30px;
  padding: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s ease;
}
.product-thumbnails__nav:hover { background: var(--mist-light); }
.product-thumbnails__nav[hidden] { display: none; }
/* Botones en el límite (sin más fotos en esa dirección): permanecen visibles
   pero deshabilitados y ensombrecidos para indicar que no hay más imágenes. */
.product-thumbnails__nav.is-disabled,
.product-thumbnails__nav:disabled {
  opacity: .35;
  cursor: default;
  color: var(--muted, #888);
}
.product-thumbnails__nav.is-disabled:hover,
.product-thumbnails__nav:disabled:hover { background: var(--white); }
.product-thumbnails__nav:disabled { pointer-events: none; }
.product-thumbnails__nav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.product-gallery__main { width: 100%; max-width: 455px; min-height: 0; aspect-ratio: 1; }
.product-gallery__main img { max-height: none; aspect-ratio: 1; }
.product-thumbnails { grid-column: 1; grid-row: 1; }
.product-gallery__main { grid-column: 2; grid-row: 1; }
/* Lightbox a pantalla completa para la imagen principal del producto */
.product-gallery__main img { cursor: zoom-in; }
.product-lightbox[hidden] { display: none; }
.product-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(4, 18, 40, .96);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
.product-lightbox.is-open { opacity: 1; visibility: visible; }
.product-lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.product-lightbox__frame {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.product-lightbox__frame img {
  display: block;
  max-width: 96vw;
  max-height: 96vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 18px 60px rgba(0,0,0,.5);
}
/* X para cerrar dentro de la imagen, esquina superior derecha.
   Los colores se heredan de .cart-close ("Mi carrito"): X azul, fondo transparente y círculo azul al pasar el ratón. */
.product-lightbox .product-lightbox__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}
/* Flechas pegadas a la imagen ampliada para navegar por las fotos (en bucle).
   Viven dentro de .product-lightbox__frame (que se ajusta al tamaño de la imagen),
   así que siguen a la foto sea cual sea su tamaño/aspecto. */
.product-lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--white);
  background: rgba(255, 255, 255, .14);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .2s ease, color .2s ease;
}
.product-lightbox__nav svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.product-lightbox__nav:hover,
.product-lightbox__nav:focus-visible { background: rgba(255, 255, 255, .3); }
.product-lightbox__nav[hidden] { display: none; }
/* Separadas de la imagen un ancho de botón (48 px): 48 px de vuelo + 48 px del botón. */
.product-lightbox__nav--prev { left: -60px; }
.product-lightbox__nav--next { right: -60px; }
/* En pantallas pequeñas la imagen casi llena el ancho: se meten dentro de la foto. */
@media (max-width: 640px) {
  .product-lightbox__nav--prev { left: 10px; }
  .product-lightbox__nav--next { right: 10px; }
}
body.has-lightbox { overflow: hidden; }
/* Selector de formato (combinaciones) en botones verticales de la misma anchura. */
.product-format-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 2px 0 16px;
}
.product-format-options[hidden] { display: none; }
.product-format-option {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  /* Tipografía igual a la del botón "Añadir al carrito". */
  font-family: "DM Sans", sans-serif;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
/* Al pasar por encima solo se resalta el borde. */
.product-format-option:hover { border-color: var(--ink); }
/* Seleccionado: texto blanco y fondo azul, como el botón "Añadir al carrito". */
.product-format-option.is-active {
  color: var(--white);
  background: var(--ink);
  border-color: var(--ink);
}
.product-variant-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: -2px 0 16px;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .02em;
  color: var(--muted);
}
.product-variant-meta[hidden] { display: none; }
.product-detail-labels {
  /* En la ficha las etiquetas se quedan donde estaban (debajo de la foto, pegadas a la izquierda) y
     también pasan de una en una: la caja las recorta por los dos lados para que se vean entrar y
     salir. */
  position: relative;
  overflow: hidden;
  min-height: 24px;
  grid-column: 2;
  grid-row: 2;
}
.product-detail-labels[hidden] { display: none; }
/* En la ficha no hay corazón al lado: las etiquetas se quedan pegadas a la izquierda. */
.product-detail-labels .product-card__label { right: auto; left: 0; }
/* En la FICHA las etiquetas no bajan a una segunda fila: el descuento se queda fijo arriba a la
   izquierda y el carril de las que pasan va a su lado, a la MISMA altura. El salto de fila sigue
   siendo cosa de las tarjetas del catálogo (ahí las etiquetas son estrechas y sí conviene), por eso
   se limita a la página de producto. (Pedido por Óscar, 2026-09-28: en móvil salían desplazadas.) */
body[data-page="product"] .product-detail-labels .product-card__labels { flex-wrap: nowrap; }
body[data-page="product"] .product-detail-labels .product-card__labels-giro { flex: 1 1 0; min-width: 0; }
.product-info { padding: 0 0 0 16px; }
.product-title-row h1 { margin-bottom: 14px; font-size: calc(clamp(2.5rem, 4vw, 4rem) - 4px); line-height: 1.04; }
.product-title-row h1.product-title--compact { font-size: clamp(2.2rem, 3.5vw, 3.4rem); }
.product-title-row h1.product-title--compact em {
  position: relative;
  top: .18em;
  display: inline-block;
}
.product-price { font-size: 2rem; }
.product-description { color: var(--ink); font-size: .78rem; line-height: 1.35; }
.rating-row { margin: 26px 0 18px; }
.product-accordions summary { min-height: 52px; padding: 0; }
.product-accordions details > div { color: var(--ink); font-size: .68rem; }
.usage-steps { display: grid; grid-template-columns: 1fr; gap: 16px; padding-right: 0 !important; }
.usage-steps span { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 12px; text-align: left; }
.usage-steps b { display: grid; width: 22px; height: 22px; margin: 0; place-items: center; border-radius: 50%; color: var(--white); background: var(--ink); }
.benefit-band { margin: 0 0 0; }
.benefit-band .wrap > span { min-height: 52px; border: 0; font-size: .82rem; }
.benefit-band .wrap > span:last-child { border-right: 0; }
.ingredients { padding: 68px 0 76px; }
.ingredients > .wrap > h2 { margin: 0 0 34px; font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 700; }
.ingredient-grid { gap: 54px; }
.ingredient-grid article { grid-template-columns: 200px 1fr; gap: 12px; }
.ingredient-grid h3 { font-size: 1.25rem; line-height: .9; }
.ingredient-grid p { color: var(--ink); font-size: .68rem; line-height: 1.35; }
.community-section { padding: 0 0 52px; background: var(--white); }
.community-section--without-ingredients { padding-top: 52px; }
.community-section > .wrap {
  width: 100%;
  padding: 28px 22px 20px;
  background: var(--reactive-200);
  box-shadow: 0 0 0 100vmax var(--reactive-200);
  clip-path: inset(0 -100vmax);
}
.community-head h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); }
.community-grid img { height: 100%; }
.community-grid.community-carousel {
  display: block;
  width: 100%;
  overflow: hidden;
}
.community-carousel__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: community-carousel-scroll var(--community-carousel-duration, 40s) linear infinite;
}
.community-carousel__set {
  display: flex;
  gap: 12px;
  padding-right: 12px;
}
.community-grid.community-carousel .community-carousel__set figure {
  width: clamp(230px, 18vw, 286px);
  min-width: 0;
  flex: 0 0 auto;
}
.community-grid.community-carousel:hover .community-carousel__track { animation-play-state: paused; }
@keyframes community-carousel-scroll {
  to { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 560px) {
  .community-grid.community-carousel .community-carousel__set figure { width: min(73vw, 280px); }
}
@media (prefers-reduced-motion: reduce) {
  .community-carousel__track {
    animation: none !important;
    transform: none;
  }
}
.reviews { padding: 36px 0 36px; }
.reviews-summary { padding: 0 0 28px; border: 0; }
.review-grid { padding-top: 0; }
.review-grid article { min-height: 210px; }

/* Contact */
.contact-hero { position: relative; overflow: hidden; padding: 94px 0 70px; color: var(--white); background: linear-gradient(rgba(0,111,183,.28), rgba(var(--ink-rgb), .45)), url("assets/images/optimized/contact-mountains-1920.webp") center / cover; }
.contact-hero::before { position: absolute; inset: 0; background: radial-gradient(circle at 50% 5%, rgba(255,255,255,.25), transparent 35%); content: ""; }
.contact-mountain { display: none; }
.contact-mountain--one { bottom: 20%; opacity: .42; }
.contact-mountain--two { bottom: 0; background: var(--ink); clip-path: polygon(0 55%, 12% 37%, 26% 59%, 41% 40%, 55% 67%, 70% 39%, 83% 57%, 100% 30%, 100% 100%, 0 100%); }
.contact-hero__inner { position: relative; z-index: 1; text-align: center; }
.contact-hero h1 { margin: 0 0 15px; font-size: clamp(5rem, 10vw, 9rem); }
.contact-hero__inner > p:not(.eyebrow) { max-width: 620px; margin: 0 auto 48px; font-family: var(--mono); font-size: .8rem; text-align: center; }
.contact-details { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 820px; margin: 0 auto 50px; text-align: center; }
.contact-details article { padding: 0 24px; }
.contact-details article + article { border-left: 1px solid rgba(255,255,255,.35); }
.contact-details span { color: rgba(255,255,255,.65); font-family: var(--mono); font-size: .65rem; }
.contact-details h2 { margin: 8px 0 10px; font-family: var(--mono); font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-align: center; }
.contact-details p { margin: 0; font-size: .78rem; text-align: center; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; max-width: 970px; margin: auto; padding: 32px; color: var(--white); background: var(--ink); text-align: left; box-shadow: var(--shadow); }
.contact-form__fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.contact-form__fields label:first-child { grid-column: 1/-1; }
.contact-form label { font-size: .7rem; font-weight: 600; }
.contact-form label span { opacity: .6; font-weight: 400; }
.contact-form input, .contact-form textarea { width: 100%; margin-top: 5px; padding: 12px 14px; border: 0; background: var(--white); resize: vertical; }
.message-label { grid-row: span 1; }
.privacy-check { display: flex; align-items: start; gap: 9px; font-size: .68rem; font-weight: 400; }
.privacy-check input { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--reactive-500); }
.privacy-check a { text-decoration: underline; }
.contact-form .button { justify-self: end; }
.contact-faq__layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }
.contact-faq h2 { margin: 0; font-size: clamp(3.5rem, 6vw, 6rem); }
.contact-faq h2 em { color: var(--blue); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; padding: 22px 4px; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: .8rem; font-weight: 600; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 1.2rem; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { padding: 0 38px 20px 4px; color: var(--muted); font-size: .84rem; }

/* Contact composition from the approved design */
.contact-hero { min-height: 1100px; padding: 82px 0 68px; background: linear-gradient(rgba(0, 130, 207, .2), rgba(var(--ink-rgb), .5)), url("assets/images/optimized/contact-mountains-1920.webp") center / cover; }
.contact-hero h1 { margin-bottom: 18px; font-size: clamp(5rem, 9vw, 8rem); }
.contact-hero__inner > p:not(.eyebrow) { max-width: 720px; margin-bottom: 42px; font-size: 1rem; font-weight: 700; }
.contact-details { display: block; max-width: 560px; margin-bottom: 54px; }
.contact-details article { padding: 0; }
.contact-details article + article { margin-top: 30px; border: 0; }
.contact-details h2 { margin: 0 0 14px; font-size: 1.25rem; font-weight: 700; }
.contact-details p { font-size: 1rem; line-height: 1.35; }
.contact-form { max-width: 1150px; padding: 34px 38px 38px; grid-template-columns: 1fr 1fr; gap: 20px 60px; border-radius: 0; background: var(--ink); box-shadow: none; }
.contact-form__fields { align-content: start; }
.contact-form label { font-size: 1rem; font-weight: 400; }
.contact-form input,
.contact-form textarea { margin-top: 8px; border-radius: 0; color: var(--ink); font-size: 1rem; caret-color: var(--ink); }
.contact-form input { height: 56px; padding-inline: 18px; }
.contact-form textarea { display: block; min-height: 166px; padding: 16px 20px; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(var(--ink-rgb), .55); font-style: italic; opacity: .72; }
.contact-form .message-label { position: relative; }
.contact-form .message-label::after {
  position: absolute;
  bottom: -16px;
  left: 42px;
  width: 0;
  height: 0;
  border-top: 16px solid var(--white);
  border-right: 22px solid transparent;
  border-left: 22px solid transparent;
  content: "";
}
.contact-form .button { min-width: 156px; min-height: 48px; padding: 0 24px; grid-column: 2; justify-self: end; font-size: .88rem; font-weight: 700; }

/* Cart and dialogs */
.status-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #f5f5f5 url("assets/images/optimized/poster-status.webp") center / cover;
}
.status-hero__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.status-message {
  position: absolute;
  z-index: 1;
  inset: 25% 0 auto;
  display: grid;
  min-height: 46%;
  padding: 40px;
  place-content: center;
  pointer-events: none;
  color: var(--white);
  background: rgba(var(--ink-rgb), .72);
  text-align: center;
}
.status-message h1 { margin: 0 0 24px; font-size: clamp(4.5rem, 9vw, 8rem); font-style: italic; line-height: .9; }
.status-message p { max-width: 1080px; margin: 0 auto; font-family: var(--mono); font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 700; line-height: 1.45; text-wrap: balance; }

/* ============================================================================
   «Nuestro universo» (nuestro-universo.html)
   ----------------------------------------------------------------------------
   La página son dos capítulos, cada uno con su banda visual a sangre y su texto
   en dos columnas, con el número del capítulo en una tercera columna a la
   izquierda. El 01 abre con el dibujo del puente de Salientes y el titular
   dentro del arco; el 02, con el vídeo del cliente y el titular encima.
   Las medidas salen del mockup (1366 px de ancho): la banda del puente lleva la
   imagen a su tamaño natural, la del vídeo es una franja de 3,2:1 y los
   titulares miden 7,8vw (106 px en el mockup).
   ========================================================================== */

/* La cabecera de la página: el vídeo de la ballena de fondo y el título en tres líneas encima.
   Es una banda ancha y no un 16/9: el alto va con la ventana (55vh) y el título con el ancho
   (9vw), como en el mockup del cliente. */
.universe-hero {
  position: relative;
  display: grid;
  width: 100%;
  height: 55vh;
  min-height: 380px;
  place-items: center;
  overflow: hidden;
  background: var(--ink) url("assets/images/optimized/poster-nuestro-universo.webp") center / cover;
}
.universe-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.universe-hero__title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(4.5rem, 9vw, 8rem);
  font-weight: 400;
  line-height: 1;
  text-align: center;
}
.universe-hero__title > span { display: block; }

/* La banda: la imagen (o el vídeo) a sangre y el texto encima. */
.universe-band { position: relative; width: 100%; isolation: isolate; }
.universe-band__media { display: block; width: 100%; height: 100%; }
.universe-band--puente .universe-band__media { height: auto; }
.universe-band__copy {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  padding-inline: 24px;
  align-content: start;
  justify-items: center;
  text-align: center;
  pointer-events: none;
}
/* El titular va DENTRO del arco: en el mockup el apunte del capítulo empezaba al 38 % del ancho
   (el 58 % del alto de la banda). El relleno en % se mide contra el ANCHO, así que este número va
   atado a la proporción del dibujo (4269x2806): si se cambia la imagen, hay que volver a medirlo.
   El hueco entre el apunte y el titular (3,1vw) también salía del mockup.
   EL APUNTE YA NO ESTÁ (2026-09-23, pedido del cliente: quitar «01 EL ORIGEN» / «02 EL PRESENTE»).
   Ocupaba 18,34 px de alto (`.eyebrow`: .74rem con el interlineado heredado) más su margen de
   clamp(16px, 3.1vw, 46px), así que ese hueco se le suma al relleno con `--hueco-apunte`: el titular
   se queda EXACTAMENTE donde estaba, dentro del arco. Si se quiere que el titular suba a ocupar el
   sitio del apunte, basta con quitar la variable de los tres rellenos. */
.universe-band { --hueco-apunte: calc(18.34px + clamp(16px, 3.1vw, 46px)); }
.universe-band--puente .universe-band__copy { padding-top: calc(38% + var(--hueco-apunte)); }

/* Recorte de la banda del puente (2026-09-23, pedido del cliente): el dibujo trae un blanco
   arriba —unos 45 px hasta que empiezan las hojas— y una franja de agua abajo. Con los márgenes
   negativos la imagen se sale de la banda y `overflow: hidden` la recorta DE VERDAD: así el
   blanco de arriba desaparece en lugar de subir encima del vídeo (que es lo que pasaría con solo
   el margen, porque la banda no recortaba). El titular va DENTRO del arco y su relleno se mide
   desde el borde de la banda, así que se le quitan los mismos 45 px: si no, el recorte lo dejaría
   45 px más abajo respecto al dibujo. En móvil (<= 820 px) NO se aplica nada de esto: ahí manda la
   proporción del dibujo y el titular va encima, sin recorte. */
@media (min-width: 821px) {
  /* Recorta el dibujo con `contain: paint`, NO con `overflow: hidden` (2026-09-23). Las dos cosas
     recortan igual y las dos mantienen el contexto de bloques que hace falta para que los márgenes
     negativos del recorte no se escapen, pero un contenedor con `overflow: hidden` SIGUE SIENDO
     desplazable por código: un `scrollIntoView` sobre el titular (o entrar por un enlace a
     `#universe-historia`, o un «buscar en la página» del navegador) desplazaba el dibujo DENTRO de
     la banda —60 px— y descuadraba el titular del arco. Con `contain: paint` el desplazamiento es
     imposible (medido: scrollTop 0 y el titular clavado). En navegadores anteriores a 2022, que no
     entienden `contain`, simplemente no recorta: se ve el dibujo entero, como antes de ese día. */
  .universe-band--puente { contain: paint; }
  .universe-band--puente .universe-band__media { margin-top: -45px; margin-bottom: -60px; }
  .universe-band--puente .universe-band__copy { padding-top: calc(38% - 45px + var(--hueco-apunte)); }
}
.universe-band__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(2.6rem, 7.8vw, 7.4rem);
  font-weight: 400;
  line-height: 1;
}
.universe-band__title > span { display: block; }
.universe-band__title em { font-style: italic; font-weight: 700; }

/* La banda del vídeo: una franja ancha (3,2:1 en el mockup) con el vídeo recortado a sangre y un
   velo oscuro justo para que el titular blanco se lea sobre cualquier fotograma. */
.universe-band--video { aspect-ratio: 3.2; overflow: hidden; background: var(--ink); }
.universe-band--video .universe-band__media { position: absolute; inset: 0; object-fit: cover; }
.universe-band--video::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: rgba(var(--ink-rgb), .3);
  content: "";
}
/* El titular del video va CENTRADO verticalmente en la franja, y se centra con la retícula
   (`align-content`), no con un relleno calculado a mano. Antes llevaba
   `padding-top: calc(7.5% + var(--hueco-apunte))`, que venía de cuando la banda llevaba encima el
   apunte del capítulo: el relleno en % se mide contra el ANCHO, pero el alto de la banda sale de
   su proporción (3,2:1), así que el desvío cambiaba con el ancho y sólo cuadraba por casualidad a
   1440 y 1280. Medido antes de centrarlo: -100 px (por encima) en móvil, -78 a 600, -38 a 820,
   +47 a 1024, +4 a 1280, +2 a 1440 y -32 a 1920. Ahora el desvío es 0 en todos. */
.universe-band--video .universe-band__copy { z-index: 2; align-content: center; }
.universe-band__title--video { color: var(--white); }

/* La leyenda del puente: la franja azul a sangre con el nombre del puente y la frase del cliente.
   El cliente pidió el DOBLE de alto (2026-09-23). Como el alto es «una línea de texto (1,4em) más
   el relleno de arriba y abajo», se dobla el relleno: media línea más (0,7em = 1,4em / 2) sumada
   al doble del que había (22 px). Así la franja pasa de 43 px a 86 px en 1440 px de ancho, y con
   el texto siempre centrado. Atado a la em para que aguante si cambia el tamaño de letra. */
.universe-caption {
  margin: 0;
  padding: calc(.7em + 22px) 24px;
  color: var(--white);
  background: #85A5EF;   /* el azul del mockup */
  font-family: var(--sans);
  font-size: clamp(.78rem, 1.05vw, .95rem);
  line-height: 1.4;
  text-align: center;
}

/* El texto de cada capítulo: [número] [columna] [columna]. El bloque no llega al borde derecho
   del contenedor —en el mockup quedan ~200 px de aire—: es la retícula editorial del diseño. */
/* El texto de cada capítulo lleva el MISMO aire arriba y abajo (2026-09-23, pedido del cliente):
   antes solo tenía relleno arriba, así que la última línea del capítulo 01 quedaba pegada a la
   banda del vídeo de las flores. El capítulo 02 no cambia: es `:last-of-type` y conserva su aire
   mayor de abajo (la regla de abajo tiene más especificidad y gana). */
.universe-chapter { padding: clamp(48px, 6vw, 92px) 0; }
.universe-chapter:last-of-type { padding-bottom: clamp(64px, 8vw, 120px); }
.universe-chapter__columns {
  display: grid;
  max-width: 1000px;
  /* La primera columna nunca se queda más estrecha que el apunte del capítulo ("01 EL ORIGEN"
     se partía en dos líneas): minmax(max-content, …) le da justo lo que mide el texto. */
  grid-template-columns: minmax(max-content, .34fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 7vw, 96px);
  align-items: start;
}
.universe-chapter__eyebrow { margin: 7px 0 0; color: var(--reactive-400); }
.universe-chapter__number { margin-right: 8px; font-weight: 700; }
.universe-chapter__col { font-size: 1.05rem; line-height: 1.65; }
/* El párrafo normal lleva 20 px de aire abajo. Las frases azules quedan FUERA de estas dos reglas
   (`:not`, 2026-09-23): si no, `.universe-chapter__col p` gana por especificidad y el destacado se
   queda con 0/20 px mientras la cita lleva 28/28. Sacándolas de aquí, las dos usan el mismo margen
   de la regla de abajo, tanto en escritorio como en móvil. */
.universe-chapter__col p:not(.universe-chapter__highlight) { margin: 0 0 20px; }
.universe-chapter__col p:not(.universe-chapter__highlight):last-child { margin-bottom: 0; }

/* Las frases que el cliente destaca: la serif azul de la casa, más grande que el cuerpo. Las
   citadas llevan comillas puestas por CSS para no meterlas en el diccionario de traducciones.
   TODAS las frases azules van iguales (2026-09-23, pedido del cliente): las destacadas también en
   cursiva y con comillas, como la primera del capítulo 01. Antes las destacadas se diferenciaban en
   dos cosas: iban rectas (`font-style: normal`) y sin comillas. */
.universe-chapter__quote,
.universe-chapter__highlight {
  margin: 28px 0;
  color: var(--reactive-400);
  font-family: var(--serif);
  /* Dos puntos tipográficos (2 pt = 2,67 px) menos, pedido del cliente (2026-09-24). Se resta al
     clamp en vez de reescribir sus tres números para que la rebaja sea exactamente la misma en
     todos los anchos: el tamaño es fluido (1,75vw), así que un valor fijo no equivaldría a «dos
     puntos menos» en todas las pantallas. Deja 19,7 px a 1280 de ancho (eran 22,4) y 17,3 a 1024
     (eran 20). Si algún día se quiere la rebaja en píxeles, es cambiar `2pt` por `2px`. */
  font-size: calc(clamp(1.25rem, 1.75vw, 1.65rem) - 2pt);
  font-style: italic;
  font-weight: 700;
  line-height: 1.2;
}
.universe-chapter__quote::before,
.universe-chapter__highlight::before { content: "\201C"; }
.universe-chapter__quote::after,
.universe-chapter__highlight::after { content: "\201D"; }
.universe-chapter__fuerte { font-weight: 700; }

/* ---- «Ecología y sostenibilidad» (2026-09-24) -----------------------------------------------
   El contenido viene de la web antigua (archivo.lateterazul.com/ecologia-sostenibilidad/), sin su
   cabecera ni su pie. La banda de vídeo de arriba usa LA MISMA clase que la de «Tradición e
   Innovación» (`.universe-band--video`), así que hereda su estilo tal cual: a sangre, proporción
   3,2:1, velo oscuro y titular blanco encima; no hay nada que repetir aquí.
   El reparto de la rejilla es el del archivo (`grid-ibx--cols-3 grid-ibx--sm-cols-2
   grid-ibx--xs-cols-1`): 3 columnas en escritorio, 2 en tableta y 1 en móvil. */
.universe-compromiso { padding-top: clamp(52px, 6.5vw, 96px); }
.universe-compromiso__intro { max-width: 780px; margin: 0 auto; text-align: center; }
.universe-compromiso__title {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.01em;
}
.universe-compromiso__title em { font-style: italic; font-weight: 700; }
.universe-compromiso__lead { margin: 0; color: rgba(var(--ink-rgb), .82); font-size: 1.05rem; line-height: 1.65; }
.universe-compromiso__grid {
  display: grid;
  max-width: 1100px;
  margin: clamp(46px, 6vw, 80px) auto 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(34px, 4.4vw, 62px) clamp(24px, 3.4vw, 48px);
}
.universe-compromiso__item { text-align: center; }
/* Los iconos miden muy distinto de ancho (de 107 a 253 px) y todos 150 de alto: se meten en la
   misma caja con `object-fit: contain` para que la rejilla quede regular. La caja no pasa de 72 px
   de alto para que a 2x (retina) no haya que ampliar el original, que mide 150. */
.universe-compromiso__icon { display: block; width: 132px; height: 72px; margin: 0 auto 18px; object-fit: contain; }
.universe-compromiso__item h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 1.16rem; font-weight: 700; line-height: 1.2; }
.universe-compromiso__item p { max-width: 32ch; margin: 0 auto; color: rgba(var(--ink-rgb), .78); font-size: .92rem; line-height: 1.5; text-wrap: pretty; }
@media (max-width: 820px) {
  .universe-compromiso__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  /* En móvil la rejilla se convierte en un carrusel de un icono por pantalla, con el MISMO
     comportamiento que la tira de compromisos de la portada (pedido del cliente): carril con
     scroll nativo e imán, y el avance automático lo pone app.js (`carruselMovil`, la misma pieza
     para las dos). `width: 100%` anula el ancho de `.wrap` para que el carril llegue a los bordes;
     el aire lateral va en cada tarjeta. */
  .universe-compromiso__grid {
    display: flex;
    width: 100%;
    max-width: none;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }
  .universe-compromiso__grid::-webkit-scrollbar { display: none; }
  .universe-compromiso__item {
    display: flex;
    min-width: 100%;
    padding-inline: 15px;
    flex: 0 0 100%;
    flex-direction: column;
    justify-content: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .universe-compromiso__icon { width: 116px; height: 64px; }
}


.page-overlay { position: fixed; z-index: 99; inset: 0; border: 0; background: rgba(var(--ink-rgb), .48); opacity: 0; visibility: hidden; transition: .25s; }
.page-overlay.is-visible { opacity: 1; visibility: visible; }
.cart-drawer {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  display: flex;
  width: min(460px, 100%);
  height: 100dvh;
  padding: 28px;
  flex-direction: column;
  background: var(--white);
  box-shadow: var(--shadow);
  transform: translateX(102%);
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
}
.cart-drawer.is-open { transform: none; }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.cart-head h2 { margin: 0; font-size: 2.2rem; }
.cart-close, .dialog-close {
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  transition: color .2s ease, background .2s ease;
}
.cart-close:hover,
.cart-close:focus-visible,
.cart-close:active,
.dialog-close:hover,
.dialog-close:focus-visible,
.dialog-close:active { color: var(--ink); background: var(--reactive-100); }
.cart-items { flex: 1; overflow: auto; }
.cart-empty { display: grid; height: 100%; min-height: 260px; place-items: center; align-content: center; text-align: center; }
.cart-empty__sad { display: grid; width: 58px; height: 58px; margin-bottom: 24px; place-items: center; }
.cart-empty__sad svg { width: 58px; height: 58px; fill: none; stroke: var(--reactive-200); stroke-linecap: round; stroke-linejoin: round; stroke-width: .8; }
.cart-empty__sad .cart-empty__eye { stroke-width: 1.25; }
.cart-empty h3 { margin: 4px 0 8px; font-family: var(--serif); font-size: 2rem; }
.cart-empty p { max-width: 260px; color: var(--muted); font-size: .8rem; }
.cart-empty .cart-prize-ready { color: var(--reactive-500); font-weight: 700; }
/* Opciones para regalo: botón al final de la lista del carrito y su diálogo. */
.cart-gift {
  display: flex; width: 100%; margin-top: 16px; padding: 12px 14px;
  align-items: center; justify-content: center; gap: 10px;
  border: 1px dashed var(--line); background: var(--mist-light);
  font-family: inherit; font-size: .78rem; color: var(--ink); cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.cart-gift:hover { border-color: var(--reactive-500); background: var(--white); }
.cart-gift__icon { display: grid; place-items: center; }
.cart-gift__icon svg { width: 18px; height: 18px; fill: none; stroke: var(--reactive-500); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.gift-intro { margin: 0 0 14px; color: var(--muted); font-size: .8rem; }
.gift-option-block { display: grid; gap: 8px; }
.gift-note { display: grid; gap: 6px; padding: 0 14px 14px; border: 1px solid var(--line); border-top: 0; background: var(--mist-light); }
.gift-note[hidden] { display: none; }
.gift-note label { font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.gift-note label small { text-transform: none; letter-spacing: 0; }
.gift-note textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); background: var(--white);
  font-family: inherit; font-size: .82rem; line-height: 1.45; resize: vertical;
}
.cart-item__note { margin: 6px 0 0; color: var(--reactive-500); font-size: .68rem; font-style: italic; }
.gift-options { display: grid; gap: 8px; margin-bottom: 16px; }
.gift-option {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); background: var(--white); cursor: pointer;
}
/* Foto principal del producto (la misma que en el carrito y en la tienda). */
.gift-option__image {
  width: 56px; height: 56px; flex: none; object-fit: contain;
  border: 1px solid var(--line); background: var(--white);
}
.gift-option:hover { border-color: var(--reactive-200); }
.gift-option input { width: 18px; height: 18px; accent-color: var(--reactive-500); cursor: pointer; }
.gift-option__text { display: grid; gap: 2px; }
.gift-option__name { font-family: var(--mono); font-size: .76rem; }
.gift-option__text small { color: var(--muted); font-size: .68rem; }
.gift-option__price { font-size: .8rem; }
.gift-add { width: 100%; }
.cart-item { display: grid; grid-template-columns: 90px 1fr auto; gap: 15px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cart-item img { width: 90px; height: 90px; object-fit: contain; border: 1px solid var(--line); background: var(--white); }
.cart-item h3 { margin: 0 0 5px; font-family: var(--mono); font-size: .74rem; line-height: 1.35; }
.cart-item__meta { margin: 0 0 10px; color: var(--muted); font-size: .65rem; }
.mini-quantity { display: inline-grid; grid-template-columns: 26px 28px 26px; border: 1px solid var(--line); }
.mini-quantity button { height: 27px; padding: 0; border: 0; background: transparent; }
.mini-quantity span { display: grid; place-items: center; font-size: .7rem; }
/* La columna del precio y los iconos mide lo mismo que la foto (90 px) y empieza arriba: así los
   iconos quedan pegados a la parte inferior de la foto. */
.cart-item__side { display: flex; align-items: flex-end; flex-direction: column; justify-content: space-between; align-self: start; height: 90px; font-size: .78rem; }
.cart-item__actions { display: flex; align-items: center; gap: 6px; }
/* Iconos del carrito (favorito y papelera): sin recuadro, en gris y con el corazón marcado en coral
   cuando el producto ya está en favoritos. */
.cart-icon-btn { display: grid; width: 26px; height: 26px; padding: 0; place-items: center; border: 0; border-radius: 999px; color: var(--muted); background: none; cursor: pointer; transition: color .18s, background .18s; }
.cart-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.cart-icon-btn:hover { color: var(--ink); background: var(--mist-light); }
.cart-icon-btn.is-active { color: var(--coral); }
.cart-icon-btn.is-active svg { fill: currentColor; }
.cart-footer { padding-top: 20px; border-top: 1px solid var(--line); }
/* Cómo continuar en el paso 1 del checkout: cuenta nueva (destacada), entrar e invitado. */
.checkout-account { margin: 0 0 18px; }
.checkout-account__title { margin: 0; font-family: var(--serif); font-size: 1.5rem; }
.checkout-account__sub { margin: 4px 0 14px; color: var(--muted); font-size: .78rem; }
/* La tarjeta del descuento, tal como la aprobó Óscar: panel azul claro, el «20 % al registrarte»
   enorme en cursiva y el botón a todo lo ancho. Las ventajas de debajo se mantienen discretas. */
.account-card { display: block; padding: 22px 20px 18px; border: 1px solid var(--ink); background: var(--mist); color: var(--ink); text-align: center; }
.account-card__claim { margin: 0; font-family: var(--serif); font-size: clamp(2.5rem, 9.5vw, 4.2rem); font-style: italic; font-weight: 700; line-height: 1; }
.account-card__claim em { font-style: italic; }
.account-card__sub { margin: 10px 0 16px; color: var(--muted); font-size: .92rem; }
.account-card__cta { width: 100%; }
.account-card__perks { margin: 12px 0 0; color: var(--reactive-500); font-size: .7rem; font-weight: 700; }
/* La X del diálogo: simple y oscura, sin el círculo de los diálogos de la casa. */
.account-close { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.account-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.account-row .button { flex: none; }
.account-row__text { color: var(--muted); font-size: .74rem; }
.account-guest { margin-top: 14px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: .78rem; text-decoration: underline; cursor: pointer; }
.account-guest:hover { color: var(--ink); }
/* Relleno igual a los cuatro lados (Oscar: el margen del área blanca no era homogéneo). */
#checkout-account-dialog .dialog-inner { display: block; padding: 26px; }
#checkout-account-dialog .checkout-account { margin: 0; }
#checkout-account-dialog .checkout-account > * { margin-inline: 0; }
#checkout-account-dialog .checkout-account__title { margin: 0; }
#checkout-account-dialog .checkout-account__sub { margin: 4px 0 16px; }
#account-dialog .account-row { margin-bottom: 0; }
/* Frase de envío gratis del carrito, encima del subtotal. El texto lo edita el backoffice. */
.cart-free-shipping { margin: 0 0 12px; color: var(--green, #2f9e5f); font-size: .72rem; font-weight: 700; text-align: center; }
.shipping-progress { margin-bottom: 18px; }
.shipping-progress > div { height: 4px; overflow: hidden; background: var(--mist); }
.shipping-progress > div span { display: block; width: 0; height: 100%; background: var(--green); transition: width .3s; }
.shipping-progress p { margin: 7px 0 0; color: var(--muted); font-size: .68rem; }
/* IVA que llevan dentro los importes del carrito y del checkout (por tipo y por envío). */
.cart-taxes { margin: 0 0 16px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.cart-taxes__head { margin: 0 0 6px; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cart-taxes__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.cart-taxes__list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .74rem; color: var(--muted); }
.cart-taxes__list li strong { flex: none; color: var(--ink); }
.cart-taxes__note { margin: 0; font-size: .72rem; color: var(--muted); }
/* En el resumen del checkout el fondo es azul oscuro: el bloque va en claro, como los totales. */
/* Con aire hasta la barra del envío gratuito: si no, se pegan (la barra no lleva margen arriba). */
.checkout-summary .cart-taxes { margin: 14px 0 18px; border-color: rgba(255,255,255,.25); }
.checkout-summary .cart-taxes__head { color: rgba(255,255,255,.7); }
.checkout-summary .cart-taxes__list li { color: rgba(255,255,255,.75); }
.checkout-summary .cart-taxes__list li strong { color: var(--white); }
.checkout-summary .cart-taxes__note { color: rgba(255,255,255,.75); }
.cart-total { display: flex; justify-content: space-between; margin-bottom: 16px; }
.cart-total strong { font-size: 1.15rem; }
.cart-prize {
  display: flex;
  margin: -6px 0 14px;
  justify-content: space-between;
  color: var(--reactive-500);
  font-size: .76rem;
  font-weight: 700;
}
.cart-total--final { padding-top: 13px; border-top: 1px solid var(--line); }
.cart-footer .button { width: 100%; }
.cart-footer small { display: block; margin-top: 10px; color: var(--muted); font-size: .62rem; text-align: center; }
.modal-dialog { width: min(520px, calc(100% - 30px)); padding: 0; border: 0; color: var(--ink); box-shadow: var(--shadow); }
.modal-dialog::backdrop, .success-dialog::backdrop { background: rgba(var(--ink-rgb), .58); backdrop-filter: blur(3px); }
.dialog-inner { position: relative; padding: 48px; }
.dialog-close { position: absolute; top: 16px; right: 16px; }
/* El aspa de cerrar va pegada a la esquina: el antetítulo le reserva su hueco para que el
   texto no le pase por debajo (en móvil se juntaban las dos últimas letras). */
.dialog-inner > .eyebrow { padding-right: 44px; color: var(--reactive-400); font-weight: 700; }
.dialog-inner h2 { margin-bottom: 12px; font-family: var(--serif); font-size: 2.8rem; font-style: italic; font-weight: 700; }
.dialog-inner > p { color: var(--muted); font-size: .82rem; }
.login-form { display: grid; gap: 14px; margin-top: 24px; }
.login-form label { font-size: .72rem; font-weight: 600; }
.login-form input { width: 100%; height: 46px; margin-top: 5px; padding: 0 12px; border: 1px solid var(--line); }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 48px !important; }
.password-field > button { position: absolute; top: calc(50% + 2.5px); right: 4px; display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: var(--ink); background: transparent; transform: translateY(-50%); }
.password-field > button:hover,
.password-field > button[aria-pressed="true"] { color: var(--ink); background: transparent; }
.password-field > button:focus-visible { outline: 1px solid var(--ink); outline-offset: 1px; background: transparent; }
.password-field > button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.password-eye--open { display: none; }
.password-eye--closed { display: inline; }
.password-field > button[aria-pressed="true"] .password-eye--open { display: inline; }
.password-field > button[aria-pressed="true"] .password-eye--closed { display: none; }
.forgot-password-link { width: max-content; margin: -3px 0 4px auto; padding: 0; border: 0; color: var(--reactive-500); background: transparent; font-size: .7rem; font-weight: 700; }
.forgot-password-link:hover,
.forgot-password-link:focus-visible { color: var(--ink); }
.password-recovery-dialog .eyebrow { color: var(--ink); }
.password-recovery-dialog h2 { color: var(--reactive-300); line-height: .98; }
.password-recovery-dialog [data-password-recovery-form-view] > p:not(.eyebrow) {
  color: var(--ink);
  font-family: var(--sans);
}
.password-recovery-form { display: grid; margin-top: 28px; gap: 22px; }
.password-recovery-form label { color: var(--ink); font-family: var(--sans); font-size: .72rem; font-weight: 700; }
.password-recovery-form input { width: 100%; height: 48px; margin-top: 7px; padding: 0 13px; border: 1px solid var(--line); }
.password-recovery-form input:focus { border-color: var(--reactive-400); outline: 0; }
.password-recovery-success > span { display: grid; width: 58px; height: 58px; margin-bottom: 24px; place-items: center; border-radius: 50%; color: var(--white); background: var(--green); }
.password-recovery-success h2 { font-size: clamp(2rem, 7vw, 2.5rem); line-height: 1; text-wrap: balance; }
.password-recovery-success h2 em { display: inline-block; color: var(--reactive-300); white-space: nowrap; }
.password-recovery-success > p:not(.eyebrow) { margin-bottom: 26px; color: var(--ink); font-family: var(--sans); font-size: .82rem; }
.account-register { display: grid; margin-top: 24px; padding-top: 20px; gap: 10px; border-top: 1px solid var(--line); text-align: center; }
.account-register span { color: var(--muted); font-size: .74rem; }
.account-register .button { min-height: 46px; border-color: var(--ink); }
/* Registration */
.register-page { background: var(--mist-light); }
.register-section { padding: 82px 0; }
.register-layout {
  display: grid;
  min-height: 720px;
  grid-template-columns: minmax(340px, .82fr) minmax(520px, 1.18fr);
  box-shadow: var(--shadow);
}
.register-intro {
  position: relative;
  display: flex;
  overflow: hidden;
  padding: clamp(54px, 6vw, 86px);
  justify-content: flex-start;
  flex-direction: column;
  color: var(--white);
  background:
    linear-gradient(145deg, rgba(var(--ink-rgb), .92), rgba(49,64,205,.72)),
    url("assets/images/optimized/contact-mountains-1920.webp") center / cover;
}
.register-intro > * { width: 100%; transform: translateX(-8px); }
.register-intro .eyebrow { color: var(--reactive-100); font-weight: 700; }
.register-intro h1 { margin: 18px 0 12px; font-size: clamp(3.8rem, 5.2vw, 5.4rem); line-height: .86; }
.register-intro h1 em { color: var(--reactive-200); }
.register-intro > p:not(.eyebrow) { max-width: 38ch; font-size: 1rem; line-height: 1.55; }
.register-intro ul { display: grid; margin: 38px 0 0; padding: 0; gap: 15px; list-style: none; }
.register-intro li { position: relative; padding-left: 25px; font-size: .84rem; }
.register-intro li::before {
  position: absolute;
  top: .18em;
  left: 0;
  width: 15px;
  height: 15px;
  background: var(--reactive-100);
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-linecap='square' stroke-linejoin='miter' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-linecap='square' stroke-linejoin='miter' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.register-form { display: flex; padding: clamp(54px, 6vw, 86px); justify-content: flex-start; flex-direction: column; background: var(--white); }
.register-form > .eyebrow { color: var(--reactive-400); font-weight: 700; }
.register-form h2 { margin: 0 0 34px; font-size: clamp(3.6rem, 5vw, 5.2rem); font-style: italic; font-weight: 700; }
.register-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.register-form label { color: var(--ink); font-size: .74rem; font-weight: 600; }
.register-form__wide { grid-column: 1 / -1; }
.register-form input:not([type="checkbox"]) { width: 100%; height: 50px; margin-top: 7px; padding: 0 14px; border: 1px solid var(--line); background: var(--white); }
.register-form input:focus { border-color: var(--reactive-400); outline: 0; }
.register-form label small { display: block; margin-top: 5px; color: var(--muted); font-size: .62rem; font-weight: 400; }
/* Aviso del país de entrega en el checkout: solo se entrega en España (el catálogo de países
   tiene todos, pero las tarifas son de España). */
.checkout-country-hint { display: block; margin-top: 6px; color: var(--coral); font-size: .68rem; font-weight: 600; line-height: 1.35; }
/* Mismo caso: display:block gana al [hidden], así que el aviso se veía siempre. */
.checkout-country-hint[hidden] { display: none; }
.password-strength { display: block; height: 4px; margin-top: 8px; overflow: hidden; background: var(--mist-light); }
.password-strength i { display: block; width: 0; height: 100%; background: var(--coral); transition: width .25s, background .25s; }
.password-strength[data-level="1"] i { width: 20%; }
.password-strength[data-level="2"] i { width: 40%; }
.password-strength[data-level="3"] i { width: 60%; background: #e5a33d; }
.password-strength[data-level="4"] i { width: 80%; background: var(--reactive-300); }
.password-strength[data-level="5"] i { width: 100%; background: var(--green); }
.register-form .password-strength__label { margin-top: 7px; color: var(--ink); font-weight: 700; }
.password-requirements { display: flex; margin-top: 10px; flex-wrap: wrap; gap: 6px 12px; }
.register-form .password-requirements small { position: relative; margin: 0; padding-left: 13px; }
.password-requirements small::before { position: absolute; left: 0; content: "○"; }
.password-requirements small.is-valid { color: var(--reactive-500); font-weight: 700; }
.password-requirements small.is-valid::before {
  top: 1px;
  width: 12px;
  height: 12px;
  background: var(--reactive-500);
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-linecap='square' stroke-linejoin='miter' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-linecap='square' stroke-linejoin='miter' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.register-form .password-match { min-height: 14px; color: var(--coral); font-weight: 700; }
.register-form .password-match.is-valid { color: var(--green); }
.register-consent { margin: 26px 0 22px; }
.register-form > .button { min-height: 54px; }
.register-login { margin: 22px 0 0; color: var(--muted); font-size: .76rem; text-align: center; }
.register-login button { padding: 0; border: 0; color: var(--reactive-500); background: transparent; font-weight: 700; }
.register-login button:hover,
.register-login button:focus-visible { color: var(--ink); }

/* Alta en tres pasos: correo → código → datos */
.register-panel { display: grid; }
.register-step__hint { margin: -18px 0 26px; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.register-step__email { margin: -20px 0 26px; color: var(--muted); font-size: .78rem; }
.register-step__email strong { color: var(--ink); }
.register-step__change { padding: 0; border: 0; color: var(--reactive-500); background: transparent; font-size: .72rem; font-weight: 700; text-decoration: underline; }
.register-form input.register-code-field { width: 100%; height: 64px; margin: 0 0 12px; padding: 0 14px; border: 1px solid var(--line); background: var(--white); font-family: var(--mono); font-size: 1.6rem; letter-spacing: .3em; text-align: center; }
.register-form input.register-code-field:focus { border-color: var(--reactive-400); outline: 0; }
.register-step .verification-error { display: block; margin: 0 0 14px; }
.register-step .verification-resend { margin-top: 8px; }
.password-reset-layout { grid-template-columns: minmax(0, .95fr) minmax(360px, .78fr); }
.password-reset-page .register-intro h1 { max-width: 560px; font-size: clamp(3.15rem, 4.3vw, 4.35rem); line-height: .92; }
.password-reset-page .register-form h2 { margin-bottom: 28px; font-size: clamp(2.25rem, 3.25vw, 3.05rem); line-height: .98; }
.password-reset-page .password-strength__label { line-height: 1.18; }
.password-reset-form .register-form__grid { grid-template-columns: 1fr; }
.reset-code-hint { display: block; margin-top: .35rem; opacity: .72; font-size: .82rem; line-height: 1.3; }
.reset-code-hint.is-valid { opacity: 1; }

/* Customer account and order tracking */
.account-page { background: var(--mist-light); }
.account-hero { padding: clamp(28px, 3vw, 38px) 0 clamp(26px, 2.8vw, 36px); color: var(--white); background: var(--ink); }
.account-hero > .wrap { width: var(--wrap); margin-inline: auto; }
.account-hero .eyebrow { margin-bottom: 9px; color: var(--reactive-200); font-size: .62rem; font-weight: 700; }
.account-hero h1 { max-width: 760px; margin: 0; font-size: clamp(2.7rem, 4vw, 4.15rem); line-height: .94; }
.account-hero h1 em { color: var(--reactive-200); }
.account-section { padding: clamp(58px, 7vw, 105px) 0; }
.account-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(48px, 7vw, 112px); align-items: start; }
.account-menu {
  position: sticky;
  top: calc(var(--header-height) + 28px);
  display: grid;
  max-height: calc(100dvh - var(--header-height) - 56px);
  overflow: auto;
  align-self: start;
}
.account-menu__title { margin: 0; padding: 10px 4px 22px; font-family: var(--mono); font-size: 2rem; font-weight: 700; letter-spacing: .04em; line-height: 1; text-transform: uppercase; }
.account-mobile-dashboard { display: none; }
.account-mobile-back { display: none; }
.account-menu button,
.account-menu a { position: relative; padding: 20px 6px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; font-size: .96rem; font-weight: 600; text-align: left; }
.account-menu button::after { position: absolute; top: 50%; right: 6px; width: 9px; height: 9px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; content: ""; transform: translateY(-50%) rotate(45deg); }
.account-menu button.is-active::after { transform: translateY(-65%) rotate(135deg); }
.account-menu button:hover,
.account-menu button:focus-visible,
.account-menu button.is-active,
.account-menu a:hover,
.account-menu a:focus-visible { color: var(--reactive-400); }
.account-menu button.is-active { font-weight: 700; }
.account-menu__actions {
  display: grid;
  margin-top: 28px;
  padding: 0;
  /* "Cerrar sesión" y "Eliminar cuenta" van apilados: con `gap` 0 quedaban pegados.
     Se separa solo en vertical (en horizontal, en la barra de móvil, van juntos). */
  row-gap: 10px;
  column-gap: 0;
  border: 0;
  background: transparent;
}
.account-menu__actions [data-account-logout],
.account-menu__actions .account-delete-trigger {
  display: flex;
  width: 100%;
  min-height: 28px;
  padding: 2px 6px;
  align-items: center;
  border: 0;
  line-height: 1.2;
  text-align: left;
}
.account-menu .account-delete-trigger {
  border-bottom: 0;
  color: var(--coral);
}
.account-menu .account-delete-trigger::after { display: none; }
.account-menu .account-delete-trigger:hover,
.account-menu .account-delete-trigger:focus-visible { color: #b93636; }
.account-content { min-width: 0; }
.account-view > .eyebrow { margin-bottom: 14px; color: var(--reactive-500); font-weight: 700; }
.account-view > h2,
.tracking-head h2 { margin: 0 0 clamp(32px, 5vw, 54px); font-size: clamp(3.1rem, 5vw, 5rem); line-height: .92; }
.account-view > h2 em,
.tracking-head h2 em { color: var(--reactive-300); }
.account-content .account-view > h2,
.account-content .tracking-head h2 { font-size: clamp(1.9rem, 5.2vw, 4rem); }
.account-content .account-view > h2,
.account-content .tracking-head h2 { white-space: nowrap; }
.account-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.account-summary-grid button { display: grid; min-height: 210px; padding: 28px; border: 0; color: var(--ink); background: var(--white); text-align: left; transition: color .2s, background .2s; }
.account-summary-grid button:hover,
.account-summary-grid button:focus-visible { color: var(--white); background: var(--ink); }
.account-summary-grid strong { font-family: var(--serif); font-size: 4.2rem; font-style: italic; line-height: 1; }
.account-summary-grid span { margin-top: auto; font-size: 1.08rem; font-weight: 700; }
.account-summary-grid small { margin-top: 5px; opacity: .72; }
.account-favorites { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px 22px; }
.account-favorites .product-card { display: flex; flex-direction: column; }
.account-favorites .product-card__media { aspect-ratio: 1; margin-bottom: 15px; }
.account-favorites .product-card h3 { font-size: .76rem; }
.account-favorites .product-card__meta { min-height: 42px; }
.account-favorites .product-card__rating { margin-bottom: 22px; }
.account-favorite-add {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  min-height: 44px;
  margin: auto 0 0;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Newsletter en "Mis datos": estado + casilla para darse de alta o de baja */
.account-newsletter { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
/* La etiqueta y el valor van uno encima de otro (antes lo hacía la regla genérica de `.account-details p`,
   que ahora solo afecta a las filas del resumen). Con 6px de hueco («Newsletter» y «No suscrito») quedaban
   demasiado juntas: el cliente pidió separarlas. */
.account-newsletter p { display: grid; margin: 0 0 12px; gap: 10px; }
.account-newsletter__toggle { display: flex; gap: 10px; align-items: flex-start; font-size: .78rem; line-height: 1.45; cursor: pointer; }
.account-newsletter__toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--reactive-500); }
.account-newsletter small { display: block; margin-top: 8px; color: var(--muted); font-size: .68rem; line-height: 1.45; }

.account-favorites-empty {
  display: grid;
  min-height: 340px;
  padding: 48px 24px;
  grid-column: 1 / -1;
  place-items: center;
  align-content: center;
  background: var(--white);
  text-align: center;
}
.account-favorites-empty > svg {
  display: block;
  width: 50px;
  height: 50px;
  margin-bottom: 14px;
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  shape-rendering: geometricPrecision;
}
.account-favorites-empty > svg path {
  transform: scale(.88);
  transform-box: fill-box;
  transform-origin: center;
}
.account-favorites-empty p { margin-bottom: 24px; color: var(--muted); font-size: .8rem; }
.account-orders { display: grid; gap: 22px; }
.account-orders-empty {
  display: grid;
  min-height: 340px;
  padding: 48px 24px;
  place-items: center;
  align-content: center;
  background: var(--white);
  text-align: center;
}
.account-orders-empty > svg {
  display: block;
  width: 50px;
  height: 50px;
  margin-bottom: 14px;
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}
.account-orders-empty p { margin-bottom: 24px; color: var(--muted); font-size: .8rem; }
.account-order { padding: clamp(22px, 3vw, 34px); background: var(--white); }
.account-order > header { display: flex; padding-bottom: 20px; border-bottom: 1px solid var(--line); align-items: center; justify-content: space-between; gap: 20px; }
.account-order > header div { display: grid; gap: 5px; }
.account-order > header small,
.account-order dt,
.tracking-delivery small { color: var(--muted); font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.account-order > header strong { font-family: var(--mono); font-size: .82rem; }
.account-order__status { padding: 9px 13px; color: var(--ink); background: var(--reactive-100); font-size: .69rem; font-weight: 700; }
.account-order__status.status--preparing,
.tracking-head__status.status--preparing { background: var(--mist); }
.account-order__status.status--transit,
.tracking-head__status.status--transit { background: var(--reactive-100); }
.account-order__status.status--delivered,
.tracking-head__status.status--delivered { color: var(--white); background: var(--green); }
.account-order__status.status--failed,
.tracking-head__status.status--failed { color: var(--white); background: var(--coral); }
.account-order__status.status--cancelled,
.tracking-head__status.status--cancelled { color: var(--white); background: var(--muted); }
.account-order__body { display: grid; padding: 26px 0; grid-template-columns: minmax(0, 1fr) auto; gap: 35px; align-items: center; }
.account-order__products { display: flex; flex-wrap: wrap; gap: 18px; }
.account-order__product { display: grid; min-width: min(100%, 238px); grid-template-columns: 84px 1fr; gap: 13px; align-items: center; }
.account-order__product img { width: 84px; height: 84px; object-fit: contain; border: 1px solid var(--line); background: var(--white); }
.account-order__product strong { display: block; font-family: var(--mono); font-size: .68rem; line-height: 1.35; }
.account-order__product small { display: block; margin-top: 7px; color: var(--muted); font-size: .65rem; }
.account-order dl { display: flex; margin: 0; gap: 32px; }
.account-order dl div { display: grid; gap: 7px; }
.account-order dd { margin: 0; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.account-order > footer { display: flex; align-items: center; gap: 24px; }
.account-order > footer .button { min-height: 48px; }
.account-order > footer a { font-size: .75rem; font-weight: 700; }
.account-order > footer a:hover { color: var(--reactive-400); }
.account-back { margin: 0 0 40px; padding: 0; border: 0; color: var(--ink); background: transparent; font-size: .75rem; font-weight: 700; }
.account-back span { margin-right: 8px; font-size: 1.05rem; }
.account-back:hover,
.account-back:focus-visible { color: var(--reactive-400); }
.tracking-head { display: flex; margin-bottom: 30px; align-items: end; justify-content: space-between; gap: 25px; }
.tracking-head h2 { margin-bottom: 28px; }
.tracking-head p { margin: 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.tracking-head__status { display: inline-block; margin-top: 24px; padding: 11px 16px; color: var(--ink); background: var(--reactive-100); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.tracking-delivery { display: grid; margin-bottom: 54px; padding: 27px 30px; grid-template-columns: repeat(3, 1fr); gap: 25px; color: var(--white); background: var(--ink); }
.tracking-delivery p { display: grid; margin: 0; gap: 8px; }
.tracking-delivery small { color: var(--reactive-200); font-size: .75rem; }
.tracking-delivery strong { font-size: .78rem; }
.tracking-steps { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(4, 1fr); list-style: none; }
.tracking-steps li { position: relative; display: grid; padding-top: 37px; gap: 12px; }
.tracking-steps li::before { position: absolute; top: 8px; left: 50%; width: 100%; height: 2px; background: var(--line); content: ""; }
.tracking-steps li::after {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--reactive-400);
  content: "";
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}
.tracking-steps li:last-child::before,
.tracking-steps li:last-child::after { display: none; }
.tracking-steps li.is-line-complete::after { animation: tracking-line-draw .55s linear calc(.36s + var(--step-delay)) forwards; }
.tracking-steps li i {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  width: 18px;
  height: 18px;
  border: 2px solid var(--line);
  border-radius: 50%;
  opacity: 0;
  background: var(--mist-light);
  scale: .55;
  transform: translateX(-50%);
  animation: tracking-dot-in .46s cubic-bezier(.2,.8,.2,1.18) calc(.08s + var(--step-delay)) forwards;
}
.tracking-steps li.is-complete i { border-color: var(--reactive-400); background: var(--reactive-400); }
.tracking-steps li.is-current i { box-shadow: 0 0 0 7px var(--reactive-100); }
.tracking-steps li.is-current i,
.tracking-steps li.is-failed i { top: -5px; width: 28px; height: 28px; }
.tracking-steps li:last-child.is-current i {
  display: grid;
  place-items: center;
  border-color: var(--green);
  color: var(--white);
  background: var(--green);
  box-shadow: 0 0 0 7px rgba(131,189,88,.22);
  animation:
    tracking-dot-in .46s cubic-bezier(.2,.8,.2,1.18) calc(.08s + var(--step-delay)) forwards,
    tracking-delivered-pulse 1.9s ease-in-out calc(.75s + var(--step-delay)) infinite;
}
.tracking-steps li:last-child.is-current i svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: square; stroke-linejoin: miter; stroke-width: 2; }
.tracking-steps li.is-failed i { display: grid; place-items: center; border-color: var(--coral); color: var(--white); background: var(--coral); box-shadow: 0 0 0 7px rgba(242,83,98,.18); }
.tracking-steps li.is-failed i svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: square; stroke-width: 2; }
.tracking-steps li.is-failed strong { color: var(--coral); }
.tracking-steps div {
  max-width: 165px;
  margin: 0 auto;
  opacity: 0;
  text-align: center;
  transform: translateY(8px);
  animation: tracking-copy-in .48s ease calc(.2s + var(--step-delay)) forwards;
}
.tracking-steps strong,
.tracking-steps span { display: block; }
.tracking-steps strong { font-size: .75rem; }
.tracking-steps span { margin-top: 7px; color: var(--muted); font-size: .66rem; line-height: 1.4; }
@keyframes tracking-line-draw {
  0% { opacity: .35; transform: scaleX(0); }
  65% { opacity: 1; }
  100% { opacity: 1; transform: scaleX(1); }
}
@keyframes tracking-dot-in {
  0% { opacity: 0; scale: .55; }
  72% { opacity: 1; scale: 1.16; }
  100% { opacity: 1; scale: 1; }
}
@keyframes tracking-copy-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tracking-delivered-pulse {
  0%, 100% { box-shadow: 0 0 0 7px rgba(131,189,88,.22); }
  50% { box-shadow: 0 0 0 12px rgba(131,189,88,0); }
}
.tracking-help { display: flex; margin-top: 60px; padding-top: 20px; border-top: 1px solid var(--line); align-items: center; justify-content: space-between; gap: 20px; font-size: .76rem; }
.tracking-help a { color: var(--reactive-500); font-weight: 700; }
.account-details { max-width: 660px; padding: 32px; background: var(--white); }
/* La raya va solo bajo las cuatro filas del resumen (Nombre, Correo, envío y facturación). La regla
   era genérica (todo `p` de la tarjeta) y pintaba rayas sueltas debajo del texto de ayuda de «Mis
   direcciones», dentro de cada dirección guardada, bajo el aviso de vacío, bajo el error del
   formulario y dentro del bloque de la newsletter. La única raya que se queda en ese bloque es la
   del propio bloque de la newsletter, que es la que lo separa de las direcciones. */
[data-account-details-view] > p { display: grid; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line); gap: 6px; }
.account-details span { color: var(--muted); font-size: .66rem; }
.account-details strong { font-size: .82rem; }
.account-details .button { margin-top: 28px; }
.account-edit-form { display: grid; gap: 32px; }
.account-edit-form[hidden] { display: none; }
.account-edit-form fieldset { margin: 0; padding: 0 0 30px; border: 0; border-bottom: 1px solid var(--line); }
.account-edit-form legend { margin-bottom: 20px; padding: 0; font-family: var(--serif); font-size: 1.7rem; }
.account-copy-address {
  display: flex;
  width: 100%;
  margin: 20px 0 0;
  padding: 14px 16px;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--mist-light);
  text-align: left;
  transition: border-color .2s, background-color .2s;
}
.account-copy-address:hover,
.account-copy-address:focus-visible { border-color: var(--reactive-400); outline: 0; }
.account-copy-address[aria-pressed="true"] { border-color: var(--reactive-300); background: var(--reactive-100); }
.account-details .account-copy-address__check {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border: 1px solid var(--reactive-300);
  color: transparent;
  background: var(--white);
  font-size: .75rem;
  font-weight: 700;
}
.account-details .account-copy-address[aria-pressed="true"] .account-copy-address__check {
  border-color: var(--reactive-400);
  color: var(--white);
  background: var(--reactive-400);
  box-shadow: none;
}
.account-details .account-copy-address__text { display: grid; color: var(--ink); gap: 3px; }
.account-copy-address__text strong { font-size: .72rem; }
.account-copy-address__text small { color: var(--muted); font-size: .64rem; font-weight: 400; }
.account-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.account-edit-grid label { color: var(--ink); font-size: .7rem; font-weight: 600; }
/* Los desplegables (País, Provincia) van con el mismo alto, margen y borde que los campos de texto.
   La regla era solo para `input`, así que el `select` se quedaba con su aspecto nativo: 18px de alto,
   sin margen y pegado a su etiqueta. */
.account-edit-grid input,
/* El color y el tamaño se fijan aquí porque el control de Provincia se inyecta dentro de un `span`, y
   la regla de los rótulos del resumen (`.account-details span`) lo dejaba más pequeño y en gris. */
.account-edit-grid select { width: 100%; height: 48px; margin-top: 7px; padding: 0 13px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: .7rem; }
.account-edit-grid input:focus,
.account-edit-grid select:focus { border-color: var(--reactive-400); outline: 3px solid var(--reactive-100); }
.account-edit-grid input[readonly] { color: var(--muted); background: var(--mist-light); cursor: default; }
.account-edit-hint { display: block; margin-top: 6px; color: var(--muted); font-size: .68rem; font-weight: 400; }

/* ---- Libro de direcciones de "Mis datos" ---- */
/* Sin raya encima: el bloque ya se separa de lo de arriba por el aire, y la única raya de esta
   zona es la que separa las direcciones del bloque de la newsletter. */
.account-addresses { margin-top: 26px; padding-top: 4px; }
.account-addresses[hidden] { display: none; }
.account-addresses__title { margin: 0 0 6px; font-family: var(--serif); font-size: 1.4rem; }
.account-addresses__hint { display: block; margin: 0 0 14px; color: var(--muted); font-size: .78rem; }
.account-addresses__empty { display: block; margin: 0 0 12px; color: var(--muted); font-size: .82rem; }
.account-addresses__empty[hidden] { display: none; }
.account-addresses__list { display: grid; gap: 12px; margin: 0 0 14px; padding: 0; list-style: none; }
.account-address { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.account-address__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.account-address__label { font-size: .92rem; }
.account-address__badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.account-address__badge { padding: 2px 9px; border-radius: 999px; background: var(--mist); color: var(--ink); font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.account-address__badge--shipping { background: var(--reactive-100); }
.account-address__badge--billing { background: #e4f4ea; color: #14663c; }
.account-address__text { display: block; margin: 0 0 10px; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.account-address__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-address__action { padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); font-family: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; }
.account-address__action:hover { background: var(--mist-light); border-color: var(--reactive-400); }
.account-address__action--danger { color: var(--coral); border-color: rgba(242,83,98,.45); }
.account-address__action--danger:hover { background: #fef1f0; }
.account-address__action[disabled] { opacity: .5; cursor: default; }
.account-address-form { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--mist-light); }
.account-address-form[hidden] { display: none; }
.account-address-form__error { min-height: 18px; margin: 10px 0 0; color: var(--coral); font-size: .78rem; }

/* Selector de dirección guardada en el checkout (solo con más de una dirección) */
.checkout-saved-address { width: 100%; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--mist-light); color: var(--ink); font-family: inherit; font-size: .85rem; cursor: pointer; }
.checkout-saved-address:focus { border-color: var(--reactive-400); outline: 3px solid var(--reactive-100); }

/* Municipios del código postal cuando hay más de uno que elegir */
.postal-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.postal-suggestions[hidden] { display: none; }
.postal-suggestions__hint { color: var(--muted); font-size: .72rem; }
.postal-suggestion { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-family: inherit; font-size: .75rem; cursor: pointer; }
.postal-suggestion:hover { background: var(--mist-light); border-color: var(--reactive-400); }
.postal-suggestion.is-current { background: var(--ink); border-color: var(--ink); color: var(--white); }
.account-edit-wide { grid-column: 1 / -1; }
.account-edit-actions { display: flex; align-items: center; gap: 12px; }
.account-edit-actions .button { margin-top: 0; }
.account-password-form .account-edit-actions { margin-top: 18px; }
.register-success form { margin-top: 30px; }
.register-success .eyebrow { margin-top: 0; }
.register-success h2 { margin-top: 16px; text-align: center; }
.register-success h2 em { display: block; text-align: center; }
.verification-mark { display: grid; width: 72px; height: 72px; margin: 0 auto 28px; place-items: center; border-radius: 50%; color: var(--white); background: var(--ink); }
.verification-mark svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-linecap: square; stroke-linejoin: miter; stroke-width: 1.8; }
.verification-form { display: grid; gap: 12px; }
.verification-form input {
  width: min(100%, 250px);
  height: 58px;
  margin: 0 auto;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: var(--white);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .42em;
  text-align: center;
}
.verification-form input:focus { border-color: var(--ink); outline: 0; }
.verification-error { min-height: 16px; color: var(--coral); font-size: .68rem; font-weight: 700; }
.verification-demo { display: none; padding: 9px 12px; color: var(--muted); background: var(--mist-light); font-size: .65rem; }
.verification-resend { justify-self: center; padding: 3px; border: 0; color: var(--reactive-500); background: transparent; font-size: .72rem; font-weight: 700; }
.verification-resend:hover,
.verification-resend:focus-visible { color: var(--ink); }
.account-delete-confirm { background: var(--coral); }
.account-delete-confirm:hover,
.account-delete-confirm:focus-visible { background: #b93636; }
.toast-region { position: fixed; z-index: 150; right: 22px; bottom: 22px; display: grid; gap: 8px; }
.toast { max-width: 360px; padding: 14px 18px; color: var(--white); background: var(--ink); box-shadow: var(--shadow); font-size: .78rem; animation: toast-in .3s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

/* "Pop Up inicio" (backoffice): cartel de imagen que se abre al entrar en la portada,
   antes que el de suscripción. La imagen la sube el backoffice (una para PC y otra para
   móvil) y puede ser de cualquier tamaño: aquí se centra y se escala sola para no salirse
   de la pantalla, sin recortar ni deformar (ancho y alto automáticos, así manda la
   proporción de la imagen). Se cierra al hacer clic en cualquier parte (lo lleva app.js)
   o con la X de la esquina. */
.startup-popup-dialog {
  /* fit-content (no `auto`): con los dos inset a 0 y margen automático, así queda
     centrada; con `auto` la caja se estira a todo el ancho y la imagen se va a la
     izquierda. */
  width: fit-content;
  height: fit-content;
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--ink);
}
.startup-popup-dialog[open] { display: block; animation: startup-popup-in .28s ease both; }
.startup-popup-dialog:focus { outline: 0; }
.startup-popup-dialog::backdrop {
  background: rgba(var(--ink-rgb), .72);
  backdrop-filter: blur(5px);
}
.startup-popup__media { display: block; }
/* Sin borde ni sombra: el cartel es la imagen tal cual (y sin aspa de cierre: se cierra
   con un clic en cualquier parte). En PC no se redimensiona salvo que no quepa: el único
   límite es la propia pantalla, así que una imagen más pequeña se ve a su tamaño. */
.startup-popup__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 100dvh;
  animation: startup-popup-zoom .32s ease both;
}
@media (max-width: 820px) {
  /* En móvil sí se deja aire a los lados y arriba/abajo, como estaba. */
  .startup-popup__img { max-width: 92vw; max-height: 86dvh; }
}
@keyframes startup-popup-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes startup-popup-zoom {
  from { transform: scale(.97); }
  to { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .startup-popup-dialog[open],
  .startup-popup__img { animation: none; }
}

.home-offer-dialog {
  width: min(940px, calc(100% - 40px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  padding: 0;
  overflow: hidden;
  grid-template-columns: minmax(320px, .9fr) minmax(0, 1.35fr);
  border: 0;
  border-radius: 22px;
  color: var(--ink);
  background: transparent;
  box-shadow: 0 30px 100px rgba(var(--ink-rgb), .32);
}
.home-offer-dialog[open] { display: grid; }
.home-offer-dialog:focus { outline: 0; }
.home-offer-dialog::backdrop {
  background: rgba(var(--ink-rgb), .64);
  backdrop-filter: blur(5px);
}
.home-offer__visual { min-height: 520px; overflow: hidden; background: var(--mist); }
.home-offer__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.home-offer__content {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 54px 58px 42px;
  justify-content: center;
  flex-direction: column;
  border-radius: 0 22px 22px 0;
  background: var(--white);
}
.home-offer__close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
  line-height: 1;
}
.home-offer__close:hover,
.home-offer__close:focus-visible,
.home-offer__close:active {
  outline: 0;
  color: var(--ink);
  background: var(--reactive-100);
}
.home-offer__eyebrow {
  margin: 0 74px 20px 0;
  color: var(--reactive-300);
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.home-offer-dialog h2 {
  max-width: 540px;
  margin: 0 40px 20px 0;
  font-size: clamp(2.65rem, 3.5vw, 3.6rem);
  line-height: .92;
}
.home-offer-dialog h2 span,
.home-offer-dialog h2 em { display: block; white-space: nowrap; }
.home-offer-dialog h2 em {
  margin-top: 14px;
  color: var(--reactive-300);
  font-family: "Lovelace Text", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
}
.home-offer__copy {
  max-width: 540px;
  margin: 0 0 32px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}
.home-offer__copy strong { color: var(--reactive-300); font-style: normal; font-weight: 700; }
.home-offer__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  min-height: 62px;
  margin-bottom: 26px;
  background: var(--mist-light);
}
.home-offer__form input {
  min-width: 0;
  padding: 0 22px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: .92rem;
}
.home-offer__form input::placeholder { color: var(--muted); opacity: .72; }
.home-offer__form:focus-within { box-shadow: inset 0 0 0 2px var(--reactive-200); }
.home-offer__form button {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 7px 7px 7px 3px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
}
.home-offer__close svg,
.home-offer__form button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.home-offer__form button:hover,
.home-offer__form button:focus-visible,
.home-offer__form button:active {
  outline: 0;
  color: var(--ink);
  background: var(--reactive-100);
}
.home-offer__success {
  margin: 0 0 26px;
  padding: 18px 22px;
  color: var(--ink);
  background: var(--mist-light);
}
.home-offer__success strong,
.home-offer__success span { display: block; }
.home-offer__success strong { margin-bottom: 4px; font-family: var(--serif); font-size: 1.35rem; }
.home-offer__success b { color: var(--reactive-500); font-family: var(--mono); letter-spacing: .08em; }
.home-offer__socials { display: flex; align-items: center; gap: 16px; }
.home-offer__socials a { display: grid; width: 42px; height: 42px; place-items: center; }
.home-offer__socials img { width: 36px; height: 36px; object-fit: contain; }
.home-offer__socials a:focus-visible { outline: 0; }
.home-offer__socials a:hover img,
.home-offer__socials a:focus-visible img,
.home-offer__socials a:active img {
  filter: brightness(0) saturate(100%) invert(53%) sepia(40%) saturate(1055%) hue-rotate(186deg) brightness(94%) contrast(90%);
}
@media (max-width: 700px) {
  .home-offer-dialog {
    width: calc(100% - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    grid-template-columns: 1fr;
    border-radius: 16px;
  }
  .home-offer__visual { height: 322px; min-height: 322px; }
  .home-offer__visual img { object-position: center 39%; }
  .home-offer__content { padding: 34px 24px 26px; border-radius: 0 0 16px 16px; }
  .home-offer__close { top: 12px; right: 12px; width: 44px; height: 44px; }
  .home-offer__eyebrow { margin-right: 52px; font-size: .575rem; }
  .home-offer-dialog h2 { margin-right: 22px; font-size: clamp(2.25rem, 10vw, 3.1rem); }
  .home-offer__copy { margin-bottom: 24px; font-size: .88rem; }
  .home-offer__form { min-height: 56px; margin-bottom: 20px; grid-template-columns: minmax(0, 1fr) 52px; }
  .home-offer__form input { padding-inline: 15px; font-size: .8rem; }
  .home-offer__form button { width: 44px; height: 44px; margin: 6px 6px 6px 2px; }
}
@media (max-width: 420px) {
  .home-offer__visual { height: 266px; min-height: 266px; }
  .home-offer__content { padding: 28px 20px 22px; }
  .home-offer-dialog h2 { margin-bottom: 15px; font-size: 2.15rem; }
  .home-offer__copy { margin-bottom: 18px; }
  .home-offer__socials { gap: 11px; }
}

/* Checkout */
.checkout-page { background: var(--mist-light); }
.checkout-header {
  position: sticky;
  z-index: 80;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(390px, .82fr);
  width: 100%;
  height: 96px;
  align-items: center;
  border-bottom: 1px solid rgba(var(--ink-rgb), .08);
  background: rgba(242, 246, 255, .96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.checkout-header__actions { display: flex; margin-right: 24px; align-items: center; justify-self: end; gap: 22px; }
.brand--checkout {
  width: 170px;
  min-width: 170px;
  height: 96px;
  margin-left: max(24px, calc((100% - 680px) / 2));
  justify-self: start;
}
.brand--checkout .brand-logo { width: 170px; height: 78px; }
.checkout-header .text-link {
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--reactive-400);
}
.checkout-header .text-link:hover,
.checkout-header .text-link:focus-visible { color: var(--reactive-500); }
.checkout-shell { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(390px, .82fr); min-height: calc(100vh - 96px); }
.checkout-form-area { width: min(680px, calc(100% - 48px)); margin: 0 auto; padding: 48px 0 90px; }
.checkout-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 54px; color: var(--muted); font-family: var(--mono); font-size: .64rem; text-transform: uppercase; }
.checkout-progress i { width: 54px; height: 1px; background: var(--line); }
.checkout-progress .is-active { color: var(--ink); font-weight: 600; }
.checkout-form-area h1 { margin: 0 0 24px; font-size: clamp(2.2rem, 7vw, 4.7rem); white-space: nowrap; }
.checkout-form-area h1 em { color: var(--blue); }
.demo-notice { margin-bottom: 35px; padding: 13px 16px; border-left: 3px solid var(--sky); background: var(--mist); font-size: .73rem; }
.checkout-fieldset { margin: 0 0 40px; padding: 0; border: 0; }
.checkout-fieldset legend {
  display: grid;
  height: 30px;
  width: 100%;
  margin-bottom: 20px;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: stretch;
  gap: 13px;
  font-family: var(--mono);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 1;
  text-transform: uppercase;
}
.checkout-fieldset legend .checkout-step-number {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--ink);
  font-family: var(--sans);
  font-size: .75rem;
  line-height: 1;
  letter-spacing: 0;
}
.checkout-step-title {
  display: flex;
  height: 30px;
  align-items: center;
  line-height: 1;
}
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-grid__wide { grid-column: 1/-1; }
.form-grid label, .coupon-field { font-size: .7rem; font-weight: 600; }
.form-grid input, .form-grid select { width: 100%; height: 48px; margin-top: 6px; padding: 0 13px; border: 1px solid var(--line); background: var(--white); }
.checkout-copy-address {
  display: flex;
  width: 100%;
  margin: 20px 0 0;
  padding: 14px 16px;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--white);
  text-align: left;
  transition: border-color .2s, background-color .2s;
}
.checkout-copy-address:hover,
.checkout-copy-address:focus-visible { border-color: var(--reactive-400); outline: 0; }
.checkout-copy-address[aria-pressed="true"] { border-color: var(--reactive-300); background: var(--reactive-100); }
.checkout-copy-address__check {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border: 1px solid var(--reactive-300);
  color: transparent;
  background: var(--white);
  font-size: .75rem;
  font-weight: 700;
}
.checkout-copy-address[aria-pressed="true"] .checkout-copy-address__check {
  border-color: var(--reactive-400);
  color: var(--white);
  background: var(--reactive-400);
  box-shadow: none;
}
.checkout-copy-address__text { display: grid; color: var(--ink); gap: 2px; }
.checkout-copy-address__text strong { font-size: .72rem; }
.checkout-copy-address__text small { color: var(--muted); font-size: .64rem; font-weight: 400; }
.form-grid input[readonly],
.form-grid select.is-readonly { color: var(--muted); background: var(--mist); cursor: default; }
.form-grid select.is-readonly { pointer-events: none; }
.choice-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); background: var(--white); cursor: pointer; }
.choice-card + .choice-card { margin-top: 10px; }
.choice-card:has(input:checked) { border-color: var(--ink); box-shadow: inset 3px 0 var(--ink); }
.choice-card input { width: 17px; height: 17px; accent-color: var(--ink); }
.choice-card span { display: flex; flex-direction: column; }
.choice-card strong { font-size: .78rem; }
.choice-card small { color: var(--muted); font-size: .68rem; }
.choice-card b { font-size: .78rem; }
.shipping-choice-intro { margin: -4px 0 16px; color: var(--muted); font-size: .7rem; }
.choice-card--shipping { min-height: 94px; grid-template-columns: auto 62px minmax(0, 1fr) auto; }
.shipping-carrier-mark {
  position: relative;
  display: block !important;
  width: 58px;
  height: 44px;
  overflow: hidden;
}
.shipping-carrier-mark img {
  /* El icono, ENTERO dentro de su caja. Antes iba sin límite de tamaño dentro de un contenedor con
     overflow:hidden, asi que todo lo que pasara de 58 px se cortaba por los lados: el camion salia
     sin morro ni trasera (lo cazo Oscar). Con contain entra completo, sea cuadrado o apaisado. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  transform: none;
  object-fit: contain;
}
.shipping-method-copy { gap: 3px; }
/* «Portes gratis a partir de X €» de cada tarifa del checkout (importe «Envío gratuito a partir
   de (€)» del backoffice). Va en el azul de marca y en negrita: es el único renglón de la tarjeta
   además del nombre. (Aquí había antes una regla para el distintivo «El más rápido», que se quitó
   junto con el resto de los datos escritos a mano por transportista.) */
.shipping-method-copy .shipping-method-free { margin-top: 1px; color: var(--ink); font-size: .66rem; font-weight: 700; }
.choice-card .shipping-method-price { display: flex; align-items: flex-end; flex-direction: column; white-space: nowrap; }
.shipping-method-price > span { font-size: .8rem; }
.shipping-method-price small { margin-top: 2px; font-size: .56rem; font-weight: 400; }
.payment-choice-intro { margin: -4px 0 16px; color: var(--muted); font-size: .7rem; }
/* Paso 5 del checkout: una tarjeta por forma de pago, con su radio y sus iconos. */
/* Paso 5 del checkout: las cajas son las MISMAS que las de los transportistas (.choice-card),
   con su esquina viva: solo se añade lo propio de los iconos. */
.payment-choice { display: grid; gap: 10px; margin-top: 12px; }
/* La caja es la de los transportistas (.choice-card), pero con sus columnas: radio, iconos y
   (si la hay) la explicación. Sin esto, los iconos caían en la columna elástica y el texto del
   contraembolso se iba al extremo derecho. */
.choice-card--payment { grid-template-columns: auto auto minmax(0, 1fr); }
/* Los logos de las plataformas a 60 px y los dos iconos dibujados (tarjeta y contraembolso) a 40,
   como estaban. La caja tiene ALTURA FIJA de 60: manda la caja, no el icono. */
.payment-choice__icons { display: flex; align-items: center; gap: 16px; height: 60px; /* La caja abarca su contenido: antes medía 62 px y los logos se salían de ella. */ width: max-content; min-width: max-content; }
.payment-choice__icons > * { flex: none; }
/* Todos los iconos de las dos formas de pago, 5 px más arriba (lo pidió Óscar: ópticamente
   quedaban bajos). Se usa transform y no margen para que la caja NO cambie de alto:
   para subir o bajar más, cambiad ese -5px. */
.payment-choice__icons > * { transform: translateY(-5px); }
.payment-choice__icons svg { width: 40px; height: 40px; flex: none; }
.payment-choice__icons img { height: 60px; width: auto; flex: none; }

/* En móvil la fila no cabe: se quita PayPal (el «…» ya dice que hay más) y se aprieta el hueco. */
@media (max-width: 700px) {
  .payment-choice__icons { gap: 10px; }
  .payment-choice__icons img[src*="LOGO_PAYPAL"] { display: none; }
}
.payment-choice__more { color: var(--muted); font-weight: 700; letter-spacing: .1em; }
.payment-choice__copy { display: grid; gap: 2px; }
.payment-choice__copy strong { font-size: .95rem; }
.payment-choice__copy small { color: var(--muted); font-size: .74rem; }
/* Métodos de pago disponibles: aquí solo se INFORMAN (la elección se hace en la página segura de
   Stripe, que es la que cobra), así que no llevan botones ni radios como antes. */
.payment-methods { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.payment-methods li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 92px;
  padding: 12px 10px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--muted);
  font-size: .68rem;
  text-align: center;
}
.payment-methods img { width: 44px; height: 44px; max-width: none; object-fit: contain; }
.payment-methods svg {
  width: 30px;
  height: 30px;
  margin-block: 7px;
  fill: none;
  stroke: var(--reactive-500);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}
.payment-secure-note { margin: 14px 0 0; color: var(--muted); font-size: .68rem; }
.choice-card--payment {
  height: 88px;
  grid-template-columns: auto 62px minmax(0, 1fr);
  align-items: center;
}
.choice-card--payment > input {
  position: relative;
  top: -3px;
  margin: 0;
  align-self: center;
  justify-self: center;
}
.payment-method-icon {
  position: relative;
  top: -3px;
  display: grid !important;
  width: 56px;
  height: 56px;
  align-self: center;
  justify-self: center;
  place-items: center;
}
.payment-method-icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: var(--reactive-500);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}
.payment-method-icon img { max-width: none; object-fit: contain; }
.payment-method-icon--bizum img,
.payment-method-icon--apple img,
.payment-method-icon--google img { width: 62px; height: 62px; }
.payment-method-icon--bizum img { transform: translateY(-5px); }
.payment-method-icon--apple img,
.payment-method-icon--google img { transform: translateY(-3px); }
.payment-method-icon--paypal img { width: 56px; height: 56px; }
.payment-method-copy {
  position: relative;
  top: -3px;
  height: 100%;
  align-self: stretch;
  justify-content: center;
  gap: 4px;
  text-align: left;
}
.payment-method-copy strong { font-size: .78rem; line-height: 1.35; }
.payment-method-copy small { font-size: .66rem; }
.choice-card--disabled { cursor: default; opacity: .72; }
.checkout-consent { margin-bottom: 18px; }
.secure-note { margin: 12px 0 0; color: var(--muted); font-size: .64rem; text-align: center; }
.checkout-summary { padding: 58px; background: var(--ink); color: var(--white); }
.checkout-summary__inner { position: sticky; top: 50px; max-width: 520px; }
.checkout-summary h2 { margin-bottom: 28px; font-size: 2.8rem; }
.checkout-items { max-height: 430px; overflow: auto; }
.checkout-item { display: grid; grid-template-columns: 70px 1fr auto; gap: 14px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.checkout-item img { width: 70px; height: 70px; object-fit: contain; border: 1px solid rgba(255,255,255,.35); background: var(--white); }
.checkout-item h3 { margin: 5px 0; font-family: var(--mono); font-size: .7rem; }
.checkout-item small { color: rgba(255,255,255,.62); font-size: .62rem; }
.checkout-item strong { font-size: .75rem; }
.checkout-empty { padding: 50px 0; color: rgba(255,255,255,.7); font-size: .8rem; text-align: center; }
.coupon-field { display: block; margin: 28px 0; }
.coupon-session-note { margin: -16px 0 24px; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.coupon-session-note a { color: inherit; text-decoration: underline; }
.coupon-field > span { display: flex; margin-top: 7px; }
.coupon-field input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 0; color: var(--ink); background: var(--white); }
.coupon-field input::placeholder { color: rgba(var(--ink-rgb), .48); opacity: 1; }
.coupon-field input:focus { outline: 3px solid var(--reactive-200); outline-offset: 0; }
.coupon-field button { min-width: 90px; border: 0; color: var(--white); background: var(--reactive-500); font-size: .7rem; font-weight: 700; }
.coupon-field.is-locked > span:last-child { opacity: .55; }
.coupon-field.is-locked input,
.coupon-field.is-locked button { cursor: not-allowed; }
.coupon-field button:not(:disabled):hover,
.coupon-field button:not(:disabled):focus-visible { background: var(--ink); }
.order-totals { padding-top: 10px; border-top: 1px solid rgba(255,255,255,.25); }
.order-totals p { display: flex; justify-content: space-between; margin: 12px 0; font-size: .74rem; }
/* Ojo: .order-totals p pone display:flex, que gana al [hidden] del navegador. Sin esta regla, la
   línea del descuento se ve aunque no haya descuento (con "−0,00 €"). */
.order-totals p[hidden] { display: none; }
.order-total { padding-top: 15px; border-top: 1px solid rgba(255,255,255,.25); font-size: 1rem !important; }
.checkout-shipping-progress > div { background: rgba(255,255,255,.2); }
.checkout-shipping-progress p { color: rgba(255,255,255,.65); }
.success-dialog { width: min(550px, calc(100% - 30px)); padding: 50px; border: 0; color: var(--ink); text-align: center; box-shadow: var(--shadow); }
.success-mark { display: grid; width: 62px; height: 62px; margin: 0 auto 24px; place-items: center; border-radius: 50%; color: var(--white); background: var(--reactive-400); }
.success-dialog h2 { color: var(--ink); font-size: 3rem; }
.success-dialog h2 em { color: var(--blue); }
.success-dialog > p:not(.eyebrow) { color: var(--muted); font-size: .8rem; }
.register-success > div > p { color: var(--ink); }
.register-success > div > p strong { color: var(--ink); }
.order-reference { padding: 10px; background: var(--mist-light); font-family: var(--mono); }

@media (max-width: 1050px) {
  :root { --wrap: min(100% - 36px, 920px); }
  .header-inner { width: calc(100% - 36px); }
  .main-nav > ul { gap: 2px; }
  .main-nav a, .nav-drop-button { padding-inline: 8px; gap: 8px; font-size: .84rem; }
  .main-nav .nav-home-link { width: 48px; padding: 0; }
  .nav-split-control .nav-main-link { padding-right: 0; }
  .nav-drop-toggle { width: 27px; padding-inline: 8px; }
  .language-trigger { gap: 8px; }
  .site-header .brand { width: 146px; min-width: 146px; }
  .site-header .brand-logo { width: 146px; }
  .product-grid, .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .best-sellers .product-grid { grid-template-columns: repeat(3, 1fr); }
  .home-hero__visual { width: 100%; opacity: 1; }
  .universe-layout { grid-template-columns: 1fr; }
  .universe-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  .universe-intro h2 { margin: 0; }
  .universe-intro > p:last-child { justify-self: end; max-width: 320px; }
  .product-detail__layout { gap: 36px; }
  .product-gallery__main { min-height: 0; }
  .ingredient-grid article { grid-template-columns: 150px 1fr; }
  .ingredient-grid img, .ingredient-orb { width: 150px; height: 130px; }
  .checkout-summary { padding: 45px 30px; }
}

@media (max-width: 820px) {
  :root { --header-height: 72px; --wrap: calc(100% - 30px); }
  .section { padding: 76px 0; }
  .summer-promo { min-height: 58px; }
  .summer-promo__inner { min-height: 58px; gap: 16px; }
  .summer-promo__message { align-items: flex-start; flex-direction: column; gap: 2px; white-space: normal; }
  .summer-promo__message strong { font-size: .72rem; }
  .summer-promo__message span { font-size: .74rem; }
  .summer-countdown__unit { min-width: 38px; }
  .summer-countdown__unit b { min-width: 38px; height: 31px; padding-inline: 3px; font-size: 1rem; }
  .summer-countdown__unit small { font-size: .4rem; }
  .summer-countdown > i { height: 31px; padding-top: 6px; font-size: .85rem; }
  .announcement { height: 26px; line-height: 26px; }
  .main-nav, .account-button,
  .header-actions > .language-switcher { display: none; }
  .header-inner { width: calc(100% - 30px); grid-template-columns: 1fr auto 1fr; }
  .menu-button { display: flex; justify-self: start; }
  .site-header .brand { width: 128px; min-width: 128px; }
  .site-header .brand-logo { width: 128px; height: 64px; }
  .header-search { padding: 0; }
  .header-search__form { gap: 10px; }
  .mobile-menu {
    position: fixed;
    z-index: 101;
    top: 0;
    left: 0;
    display: flex;
    width: min(390px, 90%);
    height: 100dvh;
    padding: 28px;
    overflow-y: auto;
    flex-direction: column;
    overscroll-behavior: contain;
    color: var(--white);
    background: var(--ink);
    transform: translateX(-102%);
    transition: transform .3s;
  }
  .mobile-menu.is-open { transform: none; }
  .mobile-menu__head { display: flex; align-items: center; justify-content: space-between; min-height: 62px; }
  .mobile-menu__head .brand {
    width: 184px;
    min-width: 184px;
    height: 88px;
    margin-left: -14px;
    justify-self: start;
    color: var(--white);
  }
  .mobile-menu__head .brand-logo { width: 184px; height: 88px; }
  .mobile-menu__close {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    color: var(--white);
    background: transparent;
    font-size: 1.4rem;
  }
  .mobile-menu__close:hover,
  .mobile-menu__close:focus-visible,
  .mobile-menu__close:active { border-color: var(--reactive-100); color: var(--ink); background: var(--reactive-100); }
  .mobile-menu__nav { margin: 18px 0 auto; font-family: var(--sans); }
  .mobile-menu__nav details,
  .mobile-menu__home,
  .mobile-menu__account,
  .mobile-menu__item,
  .mobile-menu__contact { border-bottom: 1px solid rgba(255,255,255,.2); }
  .mobile-menu__home,
  .mobile-menu__account {
    display: flex;
    width: 100%;
    min-height: 58px;
    padding: 0 14px;
    align-items: center;
    gap: 14px;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    color: inherit;
    background: transparent;
    font-size: 1.08rem;
    font-weight: 500;
    text-align: left;
  }
  .mobile-menu__account { color: var(--reactive-100); }
  .mobile-menu__home svg,
  .mobile-menu__account svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
  }
  .mobile-menu__nav summary,
  .mobile-menu__contact {
    display: flex;
    min-height: 58px;
    padding: 0 14px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    font-family: var(--sans);
    font-size: 1.08rem;
    font-weight: 500;
    list-style: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
  }
  .mobile-menu__nav summary::-webkit-details-marker { display: none; }
  .mobile-menu__nav summary:hover,
  .mobile-menu__nav summary:focus-visible,
  .mobile-menu__nav summary:active,
  .mobile-menu__nav details[open] > summary,
  .mobile-menu__home:hover,
  .mobile-menu__home:focus-visible,
  .mobile-menu__home:active,
  .mobile-menu__home[aria-current="page"],
  .mobile-menu__account:hover,
  .mobile-menu__account:focus-visible,
  .mobile-menu__account:active,
  .mobile-menu__account[aria-current="page"],
  .mobile-menu__contact:hover,
  .mobile-menu__contact:focus-visible,
  .mobile-menu__contact:active { color: var(--reactive-100); background: transparent; }
  .mobile-menu__nav details[open] > summary .ui-chevron--down { transform: rotate(315deg); }
  .mobile-menu__split { display: flex; align-items: center; }
  .mobile-menu__primary {
    display: flex;
    min-height: 58px;
    padding: 0 14px;
    flex: 1;
    align-items: center;
    font-family: var(--sans);
    font-size: 1.08rem;
    font-weight: 500;
  }
  .mobile-menu__submenu-toggle {
    display: grid;
    width: 58px;
    min-height: 58px;
    padding: 0;
    place-items: center;
    border: 0;
    color: inherit;
    background: transparent;
  }
  .mobile-menu__primary:hover,
  .mobile-menu__primary:focus-visible,
  .mobile-menu__primary:active,
  .mobile-menu__submenu-toggle:hover,
  .mobile-menu__submenu-toggle:focus-visible,
  .mobile-menu__submenu-toggle:active,
  .mobile-menu__submenu-toggle[aria-expanded="true"] { color: var(--reactive-100); }
  .mobile-menu__submenu-toggle[aria-expanded="true"] .ui-chevron--down { transform: rotate(315deg); }
  .mobile-menu__submenu { padding: 7px 0 14px; }
  .mobile-menu__submenu a {
    display: block;
    padding: 9px 16px 9px 28px;
    color: rgba(255,255,255,.84);
    font-family: var(--sans);
    font-size: .88rem;
  }
  .mobile-menu__submenu a:hover,
  .mobile-menu__submenu a:focus-visible,
  .mobile-menu__submenu a:active { color: var(--reactive-100); background: transparent; }
  .mobile-language {
    display: flex;
    padding: 22px 14px 0;
    gap: 10px;
  }
  .mobile-language button {
    min-width: 52px;
    min-height: 44px;
    border: 1px solid rgba(255,255,255,.35);
    color: var(--white);
    background: transparent;
    font-family: var(--sans);
    font-weight: 600;
  }
  .mobile-language button:hover,
  .mobile-language button:focus-visible,
  .mobile-language button[aria-current="true"] { border-color: var(--reactive-100); color: var(--ink); background: var(--reactive-100); }
  .home-hero { height: 620px; min-height: 620px; background: var(--mist); }
  .home-hero__slide::after { background: linear-gradient(90deg, rgba(202,222,242,.34), rgba(215,230,246,.05) 70%); }
  .home-hero__visual { inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 1; background-position: center; mix-blend-mode: normal; }
  .home-hero__copy { height: 100%; min-height: 0; padding: 52px 0 72px; }
  .home-hero__title { font-size: clamp(4rem, 13vw, 6.5rem); }
  .hero-pagination { bottom: 18px; left: 15px; }
  .promise-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
  .promise-grid article:nth-child(3) { border-left: 0; }
  .section-heading--split { align-items: start; flex-direction: column; gap: 20px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .tea-game { padding-block: 52px; }
  .tea-game__inner { grid-template-columns: 1fr; gap: 38px; }
  .tea-game__header { text-align: center; }
  .tea-game__header > p:last-child { margin-inline: auto; }
  .tea-game__stage { width: min(100%, 720px); margin-inline: auto; }
  .product-grid, .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 38px 16px; }
  .universe-intro { display: block; }
  .universe-intro h2 { margin-bottom: 26px; }
  .universe-cards { overflow-x: auto; grid-template-columns: repeat(4, minmax(180px, 1fr)); }
  .welcome { padding-top: 56px; }
  .welcome-layout { grid-template-columns: 1fr; }
  .welcome-copy { padding-bottom: 0; }
  .welcome h2 { font-size: clamp(3.5rem, 10vw, 5rem); }
  .signature { width: min(300px, 70vw); margin-right: auto; }
  .welcome-portrait { max-width: 520px; margin: 0 auto -16px; transform: translateY(-16px); }
  .newsletter-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-inner { min-height: 0; grid-template-columns: 1.15fr .85fr; gap: 36px; padding: 38px 0; }
  .footer-contact { grid-row: 1 / 3; }
  .footer-brand { width: 190px; min-width: 190px; height: 90px; }
  .footer-brand .brand-logo { width: 190px; height: 90px; }
  .footer-col h2 { font-size: 1.08rem; }
  .footer-col p, .footer-col a { font-size: .92rem; }
  .footer-links { grid-column: 2; grid-row: 1; padding-top: 70px; }
  .social-links { grid-column: 2; grid-row: 2; padding-top: 10px; align-items: flex-start; flex-direction: row; }
  .shop-layout { grid-template-columns: 1fr; }
  .filter-toggle { display: flex; }
  .filters { position: fixed; z-index: 110; inset: 0 auto 0 0; width: min(360px, 90%); padding: 26px; overflow: auto; background: var(--white); box-shadow: var(--shadow); transform: translateX(-103%); transition: transform .3s; }
  .filters.is-open { transform: none; }
  .filter-mobile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
  .filter-close { width: 40px; height: 40px; border: 1px solid var(--line); background: var(--white); font-size: 1.4rem; }
  .product-detail__layout { grid-template-columns: 1fr; }
  .product-gallery__main { min-height: 0; }
  .benefit-band .wrap { grid-template-columns: repeat(2, 1fr); }
  .benefit-band .wrap > span:nth-child(3) { border-top: 1px solid rgba(255,255,255,.35); }
  .benefit-band .wrap > span:nth-child(4) { border-top: 1px solid rgba(255,255,255,.35); }
  .benefit-band .wrap > span:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .benefit-band .wrap > span:last-child { border-right: 0; }
  .ingredient-grid { grid-template-columns: 1fr; }
  .community-grid { grid-template-columns: repeat(2, 1fr); }
  .review-grid { overflow-x: auto; grid-template-columns: repeat(3, minmax(280px, 1fr)); }
  .contact-details { grid-template-columns: 1fr; gap: 25px; }
  .contact-details article + article { border-left: 0; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-form .button { grid-column: 1; }
  .contact-faq__layout { grid-template-columns: 1fr; gap: 45px; }
  .checkout-shell { grid-template-columns: 1fr; }
  .checkout-header { display: flex; padding-inline: 24px; justify-content: space-between; }
  .brand--checkout { margin-left: 0; }
  .checkout-header__actions { margin-right: 0; }
  .checkout-summary { grid-row: 1; }
  .checkout-summary__inner { position: static; max-width: none; }
  .checkout-items { max-height: 250px; }
}

@media (max-width: 560px) {
  :root { --wrap: calc(100% - 24px); }
  body { font-size: 15px; }
  .section { padding: 62px 0; }
  .header-inner { width: calc(100% - 20px); }
  .summer-promo { min-height: 64px; }
  .summer-promo__inner {
    position: relative;
    display: block;
    width: calc(100vw - 20px);
    min-height: 64px;
    padding-block: 7px;
  }
  .summer-promo__message { width: calc(100% - 150px); min-width: 0; }
  .summer-promo__message strong { font-size: .66rem; }
  .summer-promo__message span { font-size: .69rem; }
  .summer-promo__message span { max-width: 17ch; }
  .summer-countdown { position: absolute; top: 7px; right: 0; width: 142px; justify-content: flex-end; gap: 1px; }
  .summer-countdown__unit { min-width: 31px; }
  .summer-countdown__unit b { min-width: 31px; height: 27px; padding-inline: 2px; font-size: .84rem; }
  .summer-countdown__unit small { font-size: .36rem; }
  .summer-countdown > i { width: 3px; height: 27px; padding-top: 5px; font-size: .68rem; text-align: center; }
  .header-actions { gap: 0; }
  .language-trigger { min-width: 46px; padding-inline: 5px; gap: 5px; font-size: .76rem; }
  .icon-button, .menu-button, .cart-close, .dialog-close { width: 44px; height: 44px; }
  .icon-button svg { width: 22px; height: 22px; }
  .site-header .brand { width: 116px; min-width: 116px; }
  .site-header .brand-logo { width: 116px; height: 60px; }
  .brand { min-width: 94px; }
  .brand-icon { width: 36px; height: 23px; }
  .header-search { padding: 0; }
  .header-search__form { gap: 10px; }
  .header-search__field { grid-template-columns: minmax(0, 1fr) 46px; height: 48px; }
  .header-search__field input { padding: 0 15px; font-size: .9rem; }
  .header-search__submit svg { width: 24px; height: 24px; }
  .header-search__cancel { min-height: 44px; padding: 0 6px; font-size: .88rem; }
  .home-hero { height: 620px; min-height: 620px; touch-action: pan-y; }
  .home-hero__visual { height: 100%; min-height: 0; background-position: center; }
  .home-hero__visual--main { background-position: center 82%; transform: none; }
  .home-hero__visual.home-hero__visual--cold { background-position: center 40%; }
  .home-hero__copy { height: 100%; min-height: 0; padding: 44px 0 72px; }
  .home-hero__slide--main .home-hero__copy {
    padding-left: 14px;
    transform: translateY(-94px);
  }
  .home-hero__slide--cold .home-hero__copy {
    padding-left: 14px;
    transform: translateY(-94px);
  }
  .home-hero__title { max-width: 90%; font-size: clamp(3.5rem, 15.5vw, 5.25rem); }
  .home-hero__slide--main .home-hero__title,
  .home-hero__slide--cold .home-hero__title {
    font-size: clamp(3.15rem, 13.5vw, 4.6rem);
  }
  .home-hero__slide--main .home-hero__title { line-height: .84; }
  html[lang="en"] .home-hero__slide--main .home-hero__title {
    width: 100%;
    max-width: 100%;
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: .9;
  }
  .home-hero__slide--cold .home-hero__title { line-height: .96; }
  .home-hero__slide--main .home-hero__title em { color: var(--reactive-300); text-shadow: none; }
  .home-hero__copy > p { max-width: 72%; font-size: .72rem; }
  .home-hero__slide--main .home-hero__copy > p { max-width: 100%; color: var(--ink); }
  .home-hero__slide--main .home-hero__copy > p span { display: block; }
  .home-hero__copy > .button { min-width: 166px; min-height: 44px; }
  .hero-pagination { opacity: 1; }
  /* Contenido de los banners de portada en móvil: titular proporcionado y
     subtítulo que no se desborde. */
  .home-hero__slide--banner .home-hero__title {
    max-width: 92%;
    font-size: clamp(3rem, 13.5vw, 4.4rem);
    /* Más interlineado entre "Línea 1" y "Línea 2" del título en móvil (solo teléfonos). */
    line-height: 1.05;
  }
  .home-hero__slide--banner .home-hero__copy > p { max-width: 92%; }
  /* El texto del banner ya va anclado arriba (no centrado), así que en móvil solo se
     corrige el margen izquierdo. Antes llevaba un translateY(-130px) para subir el bloque
     cuando iba centrado: con el anclaje arriba, eso lo sacaría por encima del banner. */
  .home-hero__slide--banner .home-hero__copy { padding-left: 4px; }
  .button-row { align-items: start; flex-direction: column; }
  .promise-strip { padding: 12px 0; }
  .promise-grid {
    display: flex;
    width: 100%;
    overflow-x: auto;
    gap: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }
  .promise-grid::-webkit-scrollbar { display: none; }
  .promise-grid article {
    min-width: 100%;
    min-height: 166px;
    padding: 2px 16px;
    flex: 0 0 100%;
    justify-content: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .promise-grid .line-icon { width: 44px; height: 36px; margin-bottom: 8px; }
  .promise-grid h2 { margin-bottom: 8px; font-size: clamp(1.55rem, 7vw, 1.8rem); }
  .promise-grid p { max-width: 32ch; min-height: 0; font-size: .82rem; line-height: 1.35; }
  .promise-grid article + article { padding-top: 10px; border-top: 0; border-left: 0; }
  .best-sellers .product-card h3 { font-size: .9rem; }
  .best-sellers .product-card__meta { min-height: 0; margin-top: 8px; font-size: .78rem; text-align: left; }
  .best-sellers .product-card__media { margin-bottom: 16px; }
  .featured-products-heading { margin-bottom: 30px; }
  .featured-products-tabs { width: 100%; gap: 22px; }
  .featured-products-tab { font-size: clamp(1.55rem, 7vw, 2.3rem); }
  .best-sellers .product-grid--single { grid-template-columns: minmax(0, 72%); }
  .category-section { position: relative; margin-bottom: 0; padding: 22px 0; }
  .category-grid {
    display: flex;
    width: var(--wrap);
    padding-inline: 10px;
    overflow-x: auto;
    gap: 12px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }
  .category-grid::-webkit-scrollbar { display: none; }
  .category-carousel-arrow,
  .universe-carousel-arrow {
    position: absolute;
    z-index: 5;
    top: 50%;
    display: grid;
    width: 44px;
    height: 56px;
    padding: 0;
    place-items: center;
    border: 0;
    color: var(--white);
    background: transparent;
    box-shadow: none;
    transform: translateY(-50%);
  }
  .category-carousel-arrow .ui-chevron,
  .universe-carousel-arrow .ui-chevron {
    width: 16px;
    height: 16px;
    border-width: 3px;
    filter: drop-shadow(0 1px 2px rgba(var(--ink-rgb), .65));
  }
  .category-carousel-arrow--previous { left: calc((100% - var(--wrap)) / 2 + 16px); }
  .category-carousel-arrow--next { right: calc((100% - var(--wrap)) / 2 + 16px); animation: category-arrow-pulse 1.8s ease-in-out infinite; }
  .category-carousel-arrow--previous .ui-chevron { transform: rotate(225deg); }
  .image-card {
    min-width: 100%;
    flex: 0 0 100%;
    aspect-ratio: 5 / 4;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .image-card.is-mobile-revealed::before { opacity: 0; }
  .image-card.is-mobile-revealed::after { opacity: .98; }
  .image-card.is-mobile-revealed .image-card__label { opacity: 0; transform: translateY(8px); }
  .image-card.is-mobile-revealed .image-card__details { opacity: 1; transform: none; }
  .image-card:nth-child(2) img { object-position: center 56%; }
  .image-card__label { font-size: clamp(2.15rem, 10vw, 2.7rem); }
  @keyframes category-arrow-pulse {
    50% { transform: translateY(-50%) translateX(3px); }
  }
  .section-heading h2 { font-size: 3.4rem; }
  .section-heading--inverse { align-items: start; flex-direction: column; gap: 30px; }
  .product-grid, .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
  .product-card__media { margin-bottom: 13px; }
  .product-card h3 { font-size: .68rem; }
  .product-card__topline { display: block; }
  .product-card__price { margin-top: 6px; font-size: .8rem; }
  .product-card__meta { display: none; }
  .quick-add { right: 8px; bottom: 8px; width: 38px; height: 38px; }
  .product-card__labels { top: 12px; right: 52px; }
  /* 5px y no 6: a 320 px la tarjeta mide 142 y el carril de la segunda fila se queda en 78, con
     «BEST SELLER» en 79. Con 5 px cabe entero. */
  /* Un pelín más pequeñas y más juntas: en un iPhone 16 el carril mide 71,3 px y «BEST SELLER»
     necesitaba 79, así que se comía la «B» por la izquierda (Óscar, 2026-09-28). */
  .product-card__label { min-height: 22px; padding-inline: 4px; font-size: .54rem; letter-spacing: .04em; }
  /* En MÓVIL el descuento y las etiquetas que pasan van en la MISMA fila y a la misma altura.
     El carril pedía 120px de base: con el descuento al lado no cabía en los 123px de la caja y
     bajaba a una segunda fila, 28px más abajo (lo cazó Óscar, 2026-09-28). Se queda con lo que
     sobra; si una etiqueta es más larga que ese hueco, la recorta el propio carril. */
  .product-card__labels { flex-wrap: nowrap; }
  .product-card__labels-giro { flex: 1 1 0; min-width: 0; }
  .best-sellers .quick-add { top: 8px; right: 8px; }
  .best-sellers .product-card__labels { top: 8px; right: 52px; }
  .best-sellers .product-card__label { min-height: 24px; padding-inline: 7px; font-size: .62rem; }
  .tea-game__header h2 { font-size: clamp(3rem, 14vw, 4.4rem); }
  .tea-game__header { position: relative; z-index: 2; transform: translateY(22px); }
  .tea-game__inner { gap: 8px; }
  .tea-game { padding: 48px 0 18px; }
  .tea-game__stage { min-height: 250px; margin-top: 22px; padding: 0 10px 12px; border-radius: 0; transition: margin-top .4s cubic-bezier(.2,.75,.2,1); }
  .tea-game__stage:has(.tea-game__cup-button:is(.is-winner, .is-loser, .is-death)) { margin-top: 54px; }
  .tea-game__stage::after { right: 14px; bottom: 96px; left: 14px; }
  .tea-game__cups { gap: 2px; min-height: 150px; }
  .tea-game__cup-button { width: min(100%, 150px); min-height: 0; padding: 0; }
  .tea-game__cup { width: min(118%, 150px); transform: translateY(-10px); }
  .tea-game__cup-button.is-winner .tea-game__cup,
  .tea-game__cup-button.is-loser .tea-game__cup,
  .tea-game__cup-button.is-death .tea-game__cup { transform: translateY(-68px) rotate(-3deg); }
  .tea-game__cup-button.is-loser .tea-game__cup { transform: translateY(-64px) rotate(8deg); }
  .tea-game__cup-button.is-death .tea-game__cup { transform: translateY(-64px) rotate(-5deg); }
  .tea-game__secret { bottom: 8px; width: 52px; min-width: 52px; height: 52px; font-size: .76rem; }
  .tea-game__secret > svg { width: 27px; height: 27px; }
  .tea-game__cup-button.is-loser .tea-game__secret,
  .tea-game__cup-button.is-death .tea-game__secret { font-size: 1.25rem; }
  .tea-game__status { padding-inline: 12px; font-size: .72rem; }
  .universe { padding: 48px 0 54px; }
  .universe-layout { gap: 38px; }
  .universe-intro { padding-inline: 10px; text-align: center; }
  .universe-intro h2 {
    margin-bottom: 20px;
    font-size: clamp(3.3rem, 14vw, 4rem);
    line-height: .86;
  }
  .universe-intro > p:last-child {
    width: 100%;
    max-width: 35ch;
    margin: 0 auto;
    justify-self: auto;
    font-size: .92rem;
    line-height: 1.5;
  }
  .universe-cards {
    display: flex;
    width: 100%;
    padding-inline: 10px;
    overflow-x: auto;
    gap: 12px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }
  .universe-carousel {
    position: relative;
    min-width: 0;
  }
  .universe-carousel-arrow--previous { left: 16px; }
  .universe-carousel-arrow--next { right: 16px; animation: category-arrow-pulse 1.8s ease-in-out infinite; }
  .universe-carousel-arrow--previous .ui-chevron { transform: rotate(225deg); }
  .universe-cards::-webkit-scrollbar { display: none; }
  .universe-cards a {
    min-width: 0;
    flex: 0 0 100%;
    aspect-ratio: 5 / 4;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .universe-cards a:nth-child(1) img { object-position: 65% 72%; }
  .universe-cards a:nth-child(2) img { object-position: 100% 76%; }
  .universe-cards a:nth-child(3) img { object-position: 52% 86%; }
  .universe-cards a:nth-child(4) img { object-position: center; }
  .universe-cards a.is-mobile-revealed::before { opacity: 0; }
  .universe-cards a.is-mobile-revealed::after { opacity: .98; }
  .universe-cards a.is-mobile-revealed .universe-card__label { opacity: 0; transform: translateY(8px); }
  .universe-cards a.is-mobile-revealed .universe-card__details { opacity: 1; transform: none; }
  .universe-card__details { padding-inline: 18px; font-size: 1.16rem; line-height: 1.38; }
  .universe-card__details small { margin-top: 18px; font-size: .94rem; }
  .universe-card__label {
    right: 20px;
    bottom: 20px;
    left: 20px;
    font-size: clamp(2.1rem, 10vw, 2.65rem);
  }
  .welcome { padding: 52px 0 0; }
  .welcome-layout { gap: 0; }
  .welcome-copy { min-width: 0; padding-inline: 10px; }
  .welcome h2 {
    width: 100%;
    max-width: 100%;
    margin-bottom: 28px;
    font-size: clamp(2.45rem, 9.5vw, 2.85rem);
    line-height: .92;
    text-align: center;
  }
  .welcome-title__line { white-space: normal; }
  .welcome-title__world { white-space: nowrap; }
  .welcome-copy__body { width: 100%; max-width: 100%; }
  .welcome-copy__body p {
    margin-bottom: 24px;
    font-size: .92rem;
    line-height: 1.58;
    text-align: justify;
    text-align-last: left;
    -webkit-hyphens: none;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
  }
  .welcome-copy__body .mono-lead {
    margin-bottom: 30px;
    font-size: .78rem;
    line-height: 1.55;
    -webkit-hyphens: none;
    hyphens: none;
  }
  .signature { position: relative; z-index: 2; width: min(280px, 72vw); margin: 20px auto 0; transform: translateY(24px); }
  .welcome-portrait { width: 78%; max-width: 340px; margin: 18px auto -1px; transform: none; }
  body[data-page="home"] .newsletter { padding-inline: 0; overflow: hidden; }
  body[data-page="home"] .newsletter-inner {
    width: calc(100% - 24px);
    margin-inline: auto;
    gap: 8px;
    padding: 38px 0 34px;
  }
  body[data-page="home"] .newsletter h2 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(1.95rem, 8.5vw, 2.3rem);
    line-height: .9;
    text-align: center;
  }
  body[data-page="home"] .newsletter-title__line { white-space: nowrap; }
  body[data-page="home"] .newsletter-title__mobile-extra { display: inline; }
  body[data-page="home"] .newsletter-title__desktop-extra { display: none; }
  body[data-page="home"] .newsletter .eyebrow {
    display: none;
  }
  body[data-page="home"] .newsletter-copy {
    margin-bottom: 10px;
    font-size: .76rem;
    line-height: 1.45;
    text-align: center;
  }
  body[data-page="home"] .newsletter-form { gap: 12px; }
  body[data-page="home"] .newsletter-form input,
  body[data-page="home"] .newsletter-form button {
    height: 56px;
    min-height: 56px;
  }
  body[data-page="home"] .newsletter-form input { padding-inline: 22px; font-size: .95rem; text-align: center; }
  body[data-page="home"] .newsletter-form button { font-size: .96rem; }
  .newsletter-form { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; padding: 32px 0; }
  .footer-contact { grid-row: auto; }
  .footer-links { padding-top: 10px; }
  .footer-language-switcher { display: none; }
  .footer-mobile-language { display: flex; margin: 0 0 22px; padding: 0; }
  .social-links { grid-column: 1; grid-row: auto; padding-top: 4px; align-items: start; flex-direction: row; justify-content: start; }
  .social-links a { width: 42px; height: 42px; }
  .social-links img { width: 38px; height: 38px; }
  .footer-bottom { align-items: start; flex-direction: column; gap: 8px; }
  .shop-hero { padding: 70px 0 65px; }
  .shop-hero h1 { font-size: 4.3rem; }
  .category-pills { justify-content: start; flex-wrap: nowrap; overflow-x: auto; }
  .category-pills button { flex: 0 0 auto; }
  .shop-toolbar { flex-wrap: wrap; gap: 12px; }
  .sort-label { margin-left: auto; }
  .sort-label > select { max-width: 145px; }
  .catalog-search input { font-size: .78rem; }
  .product-gallery__main { min-height: 0; }
  .product-info { padding-top: 0; }
  .product-title-row { display: block; }
  .product-title-row h1 { font-size: 3rem; }
  .product-title-row h1.product-title--compact { font-size: 2.55rem; }
  .product-price { margin: 0 0 20px; }
  .buy-row { grid-template-columns: 105px 1fr; }
  .benefit-band .wrap > span { min-height: 54px; font-size: .75rem; }
  .ingredient-grid article { grid-template-columns: 110px 1fr; gap: 14px; }
  .ingredient-grid img, .ingredient-orb { width: 110px; height: 110px; }
  .community-head { align-items: start; flex-direction: column; }
  .community-grid { display: flex; margin-right: -12px; overflow-x: auto; }
  .community-grid figure { min-width: 73%; }
  .reviews-summary { grid-template-columns: 1fr; }
  .contact-hero { padding-top: 70px; }
  .contact-hero h1 { font-size: 5rem; }
  .contact-form { padding: 22px; }
  .contact-form__fields { grid-template-columns: 1fr; }
  .contact-form__fields label:first-child { grid-column: auto; }
  .contact-form .button { width: 100%; }
  .cart-drawer { padding: 20px; }
  /* Los dos iconos de la línea (favorito y papelera) con el dedo: botones grandes y bien separados
     para no pulsar uno por otro. */
  .cart-item { gap: 10px; }
  .cart-item__actions { gap: 16px; }
  .cart-icon-btn { width: 40px; height: 40px; }
  .cart-icon-btn svg { width: 21px; height: 21px; }
  .dialog-inner { padding: 40px 24px 28px; }
  .checkout-header { height: 82px; padding-inline: 14px; }
  .checkout-header__actions { gap: 10px; }
  .checkout-header .brand { width: 116px; min-width: 116px; height: 82px; }
  .checkout-header .brand-logo { width: 116px; height: 64px; }
  .checkout-header .text-link { gap: 6px; font-size: .7rem; }
  .checkout-form-area { width: calc(100% - 28px); }
  .checkout-summary { padding: 36px 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid__wide { grid-column: auto; }
  .checkout-progress { gap: 8px; }
  .checkout-progress i { width: 20px; }
  .success-dialog { padding: 38px 20px; }
}

@media (max-width: 420px) {
  .site-header .language-switcher { display: none; }
  .checkout-header .language-switcher { display: none; }
  .choice-card--shipping { grid-template-columns: auto 48px minmax(0, 1fr) auto; padding: 15px 12px; gap: 9px; }
  .shipping-carrier-mark { width: 46px; }
  .shipping-method-price small { display: none; }
  .choice-card--payment { height: 92px; grid-template-columns: auto 52px minmax(0, 1fr); padding: 15px 12px; gap: 10px; }
  .payment-method-icon { width: 48px; height: 52px; }
  .payment-method-icon--bizum img,
  .payment-method-icon--apple img,
  .payment-method-icon--google img { width: 58px; height: 58px; }
  .payment-method-icon--paypal img { width: 52px; height: 52px; }
}

@media (max-width: 340px) {
  .icon-button, .menu-button, .cart-close, .dialog-close { width: 42px; height: 42px; }
  .site-header .brand { width: 110px; min-width: 110px; }
  .site-header .brand-logo { width: 110px; }
}

@media (min-width: 821px) and (max-width: 1200px) {
  :root { --wrap: calc(100% - 80px); }
  .tea-game__inner { grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); gap: clamp(45px, 6vw, 75px); }
  .tea-game__header h2 { font-size: clamp(3.6rem, 7vw, 4.8rem); }
  .universe-layout { grid-template-columns: 1fr; gap: 36px; }
  .universe-intro { display: grid; padding: 0; grid-template-columns: 1fr 1fr; align-items: end; }
  .universe-intro h2 { margin: 0; }
  .universe-intro > p:last-child { justify-self: end; }
}

@media (max-width: 820px) {
  #te-negro, #matcha, #te-verde { min-height: 0; }
  .shop-search-results .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-filters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; }
  .catalog-section .catalog-grid,
  .catalog-section .catalog-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-gallery { grid-template-columns: calc(25% - 8.5px) calc(75% - 5.5px); }
  .product-thumbnails button { height: auto; }
  .product-gallery__main { min-height: 0; }
  .product-gallery__main img { max-height: none; }
  .product-info { padding-left: 0; }
  .contact-hero { min-height: 0; }
  .contact-form .button { grid-column: 1; }
  .status-hero { min-height: 420px; aspect-ratio: auto; }
  /* «Nuestro universo»: las bandas siguen a sangre (la del puente la manda la proporción del
     dibujo) y el texto pasa a una sola columna, con el apunte del capítulo encima. */
  /* La cabecera del tiburón y la banda del vídeo de las flores miden LO MISMO en móvil (pedido del
     cliente, 2026-09-23): van en la misma regla, con el mismo 46vh y el mismo mínimo, para que no
     se puedan separar. El `aspect-ratio: auto` anula la franja de escritorio (3,2:1): con el alto
     puesto, la proporción sobra. */
  .universe-hero, .universe-band--video { height: 46vh; min-height: 320px; aspect-ratio: auto; }
  .universe-hero__title { font-size: clamp(2.4rem, 12vw, 4.4rem); }
  .universe-band--puente .universe-band__copy { padding-top: calc(36% + var(--hueco-apunte)); }
  .universe-band__title { font-size: clamp(1.9rem, 7.8vw, 4rem); }
  /* La franja azul, el doble de alta también aquí: mismo cálculo que en escritorio, con el
     relleno de móvil (10 px → 20 px). En los móviles estrechos el texto ocupa dos líneas, así
     que crece un poco menos del doble (55 → 93 px a 390 px de ancho). */
  .universe-caption { padding: calc(.7em + 20px) 18px; }
  .universe-chapter { padding: 40px 0; }
  .universe-chapter:last-of-type { padding-bottom: 72px; }
  .universe-chapter__columns { max-width: none; grid-template-columns: 1fr; gap: 18px; }
  .universe-chapter__eyebrow { margin-top: 0; }
  /* Las frases azules, centradas en móvil (2026-09-23, pedido del cliente). En escritorio siguen
     alineadas a la izquierda. Las comillas de CSS van pegadas al texto, así que el cierre no se
     separa de la última palabra al centrar. */
  .universe-chapter__quote,
  .universe-chapter__highlight { margin: 24px 0; font-size: calc(clamp(1.25rem, 5.4vw, 1.7rem) - 2pt); text-align: center; }
  .register-section { padding: 36px 0; }
  .register-layout { min-height: 0; grid-template-columns: 1fr; }
  .register-intro { min-height: 470px; padding: 48px; }
  .register-form { padding: 48px; }
  .account-layout { grid-template-columns: 1fr; gap: 45px; }
  .account-menu { position: static; display: flex; overflow-x: auto; border-top: 0; border-bottom: 1px solid var(--line); }
  .account-menu__title { display: none; }
  .account-menu button,
  .account-menu a { flex: 0 0 auto; padding: 14px 18px; border-bottom: 0; }
  .account-menu button::after { display: none; }
  .account-menu__actions {
    display: flex;
    margin: 0 0 0 14px;
    padding: 0 0 0 14px;
    flex: 0 0 auto;
    align-items: center;
    border: 0;
    border-left: 1px solid var(--line);
    background: transparent;
  }
  .account-menu__actions [data-account-logout],
  .account-menu__actions .account-delete-trigger { padding: 14px 12px; border: 0; }
  .account-order__body { grid-template-columns: 1fr; }
  .tracking-delivery { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body[data-page="product"] .product-mobile-back {
    display: flex;
    min-height: 54px;
    align-items: center;
    background: var(--ink);
  }
  body[data-page="product"] .product-mobile-back a {
    display: flex;
    width: var(--wrap);
    min-height: 54px;
    margin-inline: auto;
    align-items: center;
    gap: 9px;
    color: var(--white);
    font-size: .78rem;
    font-weight: 700;
  }
  body[data-page="product"] .product-mobile-back span {
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1;
  }
  body[data-page="product"] .product-detail { padding-top: 28px; }
  .shop-hero h1, .shop-hero h2 { font-size: 3.7rem; }
  .shop-search-results .catalog-grid { grid-template-columns: 1fr; }
  .category-pills a { flex: 0 0 auto; }
  .catalog-filters { grid-template-columns: 1fr; }
  .catalog-section .catalog-grid,
  .catalog-section .catalog-grid--two { grid-template-columns: 1fr; }
  .catalog-section .product-card__meta { display: block; }
  .product-gallery { grid-template-columns: 1fr; }
  .product-thumbnails {
    height: auto;
    max-height: none;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-row: 2;
  }
  .product-thumbnails__nav { display: none; }
  .product-thumbnails__viewport {
    display: block;
    height: auto !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .product-thumbnails__viewport::-webkit-scrollbar { display: none; }
  .product-thumbnails__track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: stretch;
    transform: none !important;
    transition: none;
  }
  .product-thumbnails__track button { width: auto; max-width: none; height: auto; aspect-ratio: 1; }
  /* Con más de 3 fotos, carrusel horizontal: se ve un trocito de la foto
     siguiente/anterior para que se intuya que hay más. */
  .product-thumbnails.is-many .product-thumbnails__viewport {
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
  }
  .product-thumbnails.is-many .product-thumbnails__track {
    display: flex;
    min-width: 100%;
    padding-right: 14px;
    grid-template-columns: none;
    justify-items: stretch;
  }
  .product-thumbnails.is-many .product-thumbnails__track button {
    flex: 0 0 30%;
    scroll-snap-align: start;
  }
  .usage-steps { grid-template-columns: 1fr; }
  .status-hero { min-height: 390px; }
  .status-message { inset: 22% 0 auto; min-height: 52%; padding: 24px; }
  .status-message h1 { margin-bottom: 18px; font-size: 3.8rem; }
  .status-message p { font-size: 1.05rem; }
  .register-section { padding: 0; }
  .register-section > .wrap { width: 100%; }
  .register-intro { min-height: 390px; padding: 42px 24px; }
  .register-intro > * { transform: translateX(-3px); }
  .register-intro h1 { font-size: clamp(3.5rem, 16vw, 4.3rem); }
  .register-form { padding: 42px 24px; }
  .register-form__grid { grid-template-columns: 1fr; }
  .register-form__wide { grid-column: auto; }
  .account-hero { padding: 26px 0 28px; }
  .account-hero > .wrap { width: var(--wrap); margin-inline: auto; }
  .account-hero h1 { font-size: clamp(2.35rem, 11vw, 3.2rem); }
  .account-section { padding: 40px 0 60px; }
  .account-layout { gap: 34px; }
  .account-menu { margin-inline: -12px; }
  .account-menu button,
  .account-menu a { padding-inline: 12px; font-size: .73rem; }
  .account-view > h2,
  .tracking-head h2 { font-size: 3.2rem; }
  .account-content .tracking-head h2 { font-size: clamp(1.35rem, 6.4vw, 1.8rem); }
  .account-favorites { grid-template-columns: 1fr; gap: 36px; }
  .account-edit-grid { grid-template-columns: 1fr; }
  .account-edit-wide { grid-column: auto; }
  .account-edit-actions { align-items: stretch; flex-direction: column; }
  .account-edit-actions .button { width: 100%; }
  .account-summary-grid { grid-template-columns: 1fr; }
  .account-order > header,
  .account-order > footer,
  .tracking-head,
  .tracking-help { align-items: flex-start; flex-direction: column; }
  .account-order dl { width: 100%; justify-content: space-between; }
  .account-order > footer .button { width: 100%; }
  .tracking-steps { grid-template-columns: 1fr; gap: 0; }
  .tracking-steps li { min-height: 92px; padding: 0 0 30px 48px; }
  .tracking-steps li::before {
    top: 9px;
    left: 8px;
    width: 2px;
    height: 100%;
  }
  .tracking-steps li::after {
    top: 9px;
    left: 8px;
    width: 2px;
    height: 100%;
    transform: scaleY(0);
    transform-origin: center top;
  }
  .tracking-steps li:last-child::before,
  .tracking-steps li:last-child::after { display: none; }
  .tracking-steps li.is-line-complete::after { animation-name: tracking-line-draw-vertical; }
  .tracking-steps li i { top: 0; left: 9px; transform: translateX(-50%); }
  .tracking-steps div { max-width: none; margin: 0; text-align: left; }
}

@keyframes tracking-line-draw-vertical {
  0% { opacity: .35; transform: scaleY(0); }
  65% { opacity: 1; }
  100% { opacity: 1; transform: scaleY(1); }
}

@media (max-width: 820px) {
  .shop-intro { padding-block: 62px; }
  .shop-intro__layout { grid-template-columns: 1fr; align-items: start; gap: 28px; }
  .shop-intro__layout > p { margin: 0; }
  .shop-section-heading,
  .shop-catalog__head { align-items: flex-start; flex-direction: column; gap: 18px; }
  .shop-category-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-category-tabs > .wrap { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .shop-category-tabs > .wrap::-webkit-scrollbar { display: none; }
  .shop-category-tabs__categories,
  .shop-category-tabs__special { flex: 0 0 auto; }
  .shop-catalog-layout { grid-template-columns: 1fr; gap: 18px; }
  .shop-filter-toggle { display: flex; }
  .shop-filter-panel {
    position: static;
    display: none;
    max-height: none;
  }
  .shop-filter-panel.is-open { display: block; }
}

@media (max-width: 560px) {
  .shop-intro { padding: 48px 0 52px; }
  .shop-intro h1 { max-width: 100%; font-size: clamp(2.75rem, 12vw, 3.25rem); overflow-wrap: anywhere; }
  .shop-section-heading h2,
  .shop-catalog__head h2,
  .shop-catalog__head h1 { max-width: 100%; font-size: clamp(2.3rem, 11vw, 3rem); overflow-wrap: anywhere; }
  .shop-section-heading h2 { font-size: clamp(1.75rem, 8.3vw, 2.5rem); white-space: nowrap; }
  .shop-category-overview,
  .shop-catalog { padding-bottom: 58px; }
  .shop-category-overview { padding-block: 58px; }
  .shop-catalog-hero { height: 190px; }
  .shop-all-button {
    min-height: 78px;
    padding: 14px 20px;
  }
  .shop-all-button__copy {
    gap: 6px;
  }
  .shop-all-button__copy strong { font-size: 1.2rem; }
  .shop-category-cards { grid-template-columns: 1fr; }
  .shop-category-card,
  .shop-category-card:last-child { min-height: 210px; }
  .shop-category-card strong { margin-top: 28px; font-size: 2rem; }
  .shop-catalog-grid { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .shop-category-tabs { margin-bottom: 32px; }
  .shop-category-tabs > .wrap {
    width: 100%;
    padding-inline: 15px;
    align-items: stretch;
    flex-direction: column;
    overflow: visible;
  }
  .shop-category-tabs__categories {
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .shop-category-tabs__categories::-webkit-scrollbar { display: none; }
  .shop-category-tabs__special { width: 100%; min-width: 0; padding: 10px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .shop-category-tabs__special button { min-width: 0; padding-inline: 10px; flex: 1 1 50%; }
  .shop-catalog-grid .product-card__topline {
    grid-template-columns: minmax(0, 1fr) minmax(62px, auto);
    gap: 9px;
  }
  .shop-catalog-grid .product-card__price { margin-top: 0; }
}

/* Mobile polish: compact, readable and free of horizontal overflow */
@media (max-width: 560px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .announcement { height: 26px; line-height: 26px; } /* visible en móvil: franja compacta */
  .summer-promo,
  .summer-promo__inner { min-height: 54px; }
  .summer-promo__inner {
    display: grid;
    width: calc(100% - 20px);
    padding-block: 6px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }
  .summer-promo__message {
    width: auto;
    align-items: flex-start;
  }
  .summer-promo__message span { max-width: 15ch; }
  .summer-countdown {
    position: static;
    width: auto;
    min-width: 0;
  }
  .header-tools { padding-left: 0; gap: 0; }
  .header-actions .icon-button { width: 40px; height: 40px; }
  .menu-button { width: 40px; height: 40px; }

  body[data-page="shop"] .shop-intro {
    display: flex;
    min-height: 410px;
    padding: 52px 0;
    align-items: center;
  }
  body[data-page="shop"] .shop-intro__video { object-position: 82% center; }
  body[data-page="shop"] .shop-intro__layout { gap: 22px; }
  body[data-page="shop"] .shop-intro h1 {
    max-width: 100%;
    font-size: clamp(2.55rem, 10.8vw, 2.95rem);
    line-height: .94;
    overflow-wrap: normal;
    text-shadow: 0 2px 16px rgba(var(--ink-rgb), .26);
  }
  body[data-page="shop"] .shop-title-line { white-space: nowrap; }
  body[data-page="shop"] .shop-intro__layout > p {
    max-width: none;
    font-size: .88rem;
    line-height: 1.55;
    text-shadow: 0 1px 10px rgba(var(--ink-rgb), .3);
  }

  body[data-page="shop"] .shop-category-overview { padding-block: 50px; }
  body[data-page="shop"] .shop-catalog { padding: 0 0 50px; }
  body[data-page="shop"] .shop-catalog-hero { height: 180px; }
  body[data-page="shop"] .shop-section-heading { margin-bottom: 44px; }
  body[data-page="shop"] .shop-section-heading h2 {
    max-width: 100%;
    font-size: clamp(2.15rem, 10vw, 2.55rem);
    line-height: .98;
    white-space: normal;
  }
  body[data-page="shop"] .shop-section-heading > p {
    font-size: .82rem;
    line-height: 1.5;
  }
  body[data-page="shop"] .shop-category-cards { grid-template-columns: 1fr; }
  body[data-page="shop"] .shop-category-card,
  body[data-page="shop"] .shop-category-card:last-child {
    min-width: 100%;
    min-height: 220px;
  }
  body[data-page="shop"] .shop-category-card strong {
    font-size: clamp(1.75rem, 8.8vw, 2.1rem);
  }
  body[data-page="shop"] .shop-category-tabs__categories {
    scroll-padding-inline: 15px;
    scroll-snap-type: x proximity;
  }
  body[data-page="shop"] .shop-category-tabs__categories button { scroll-snap-align: start; }

  body[data-page="shop"] .shop-catalog__head { margin-bottom: 22px; }
  body[data-page="shop"] .shop-catalog__head h2,
  body[data-page="shop"] .shop-catalog__head h1 {
    font-size: clamp(2.65rem, 13vw, 3.25rem);
    line-height: .95;
  }
  body[data-page="shop"] .shop-catalog-title__query {
    display: block;
    margin: 12px 0 0;
    font-size: .3em;
    line-height: 1.35;
    vertical-align: baseline;
  }
  body[data-page="shop"] .shop-filter-toggle {
    min-height: 50px;
    border-color: var(--reactive-200);
  }
  body[data-page="shop"] .shop-filter-panel.is-open { padding: 14px 2px 4px; }
  body[data-page="shop"] .shop-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 12px;
  }
  body[data-page="shop"] .shop-catalog-grid .product-card__media { margin-bottom: 11px; }
  body[data-page="shop"] .shop-catalog-grid .quick-add {
    top: 8px;
    right: 8px;
    bottom: auto;
    width: 40px;
    height: 40px;
    font-size: 0;           /* oculta el texto "Añadir al carrito" */
    color: var(--white);
    background: var(--ink);
    border-radius: 0;       /* esquinas cuadradas */
  }
  body[data-page="shop"] .shop-catalog-grid .quick-add__label { display: none; }
  body[data-page="shop"] .shop-catalog-grid .quick-add__icon {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    line-height: 0;
  }
  body[data-page="shop"] .shop-catalog-grid .quick-add__icon svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.7;
  }
  /* El icono de favoritos se coloca debajo del precio, alineado por abajo
     con la fila de estrellas de valoración (al fondo de la tarjeta). */
  body[data-page="shop"] .shop-catalog-grid .favorite-button {
    top: auto;
    right: 8px;
    bottom: 0;
  }
  body[data-page="shop"] .shop-catalog-grid .product-card h3 {
    min-height: 2.25em;
    font-size: clamp(.86rem, 4vw, 1rem);
    line-height: 1.08;
  }
  body[data-page="shop"] .shop-catalog-grid .product-card__price {
    min-width: 58px;
    margin-top: 0;
    font-size: .76rem;
  }

  .best-sellers.shop-featured {
    padding: 40px 0 38px;
    overflow: hidden;
  }
  .shop-featured .featured-products-heading { margin-bottom: 24px; }
  .shop-featured .featured-products-tabs {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 12px;
  }
  .shop-featured .featured-products-tab {
    min-width: 0;
    padding-bottom: 11px;
    font-size: clamp(1.45rem, 7.3vw, 1.8rem);
    text-align: center;
  }
  .shop-featured .product-grid {
    display: flex;
    max-width: none;
    padding: 0 calc((100% - min(72vw, 320px)) / 2) 8px;
    overflow-x: auto;
    gap: 14px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc((100% - min(72vw, 320px)) / 2);
    scrollbar-width: none;
  }
  .shop-featured .product-grid::-webkit-scrollbar { display: none; }
  .shop-featured .product-card {
    min-width: 0;
    flex: 0 0 min(72vw, 320px);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .shop-featured .product-card h3 { font-size: .82rem; }
  .shop-featured .product-card__meta { font-size: .76rem; }

  body[data-page="shop"] .newsletter { overflow: hidden; }
  body[data-page="shop"] .newsletter-inner {
    gap: 24px;
    padding: 34px 0 32px;
  }
  body[data-page="shop"] .newsletter h2 {
    max-width: 100%;
    font-size: clamp(2.1rem, 9.6vw, 2.3rem);
    line-height: .92;
  }
  body[data-page="shop"] .newsletter .eyebrow {
    font-size: .72rem;
    line-height: 1.5;
    letter-spacing: .07em;
  }
  body[data-page="shop"] .newsletter-copy {
    margin-bottom: 10px;
    font-size: .82rem;
    line-height: 1.5;
  }
  body[data-page="shop"] .newsletter-form { gap: 12px; }
  body[data-page="shop"] .newsletter-form input,
  body[data-page="shop"] .newsletter-form button {
    min-height: 56px;
    height: 56px;
  }

  .footer-inner {
    width: calc(100% - 40px);
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 28px 0 30px;
  }
  .footer-contact,
  .footer-links,
  .social-links {
    min-width: 0;
    grid-column: 1;
    grid-row: auto;
  }
  .footer-brand {
    width: 154px;
    min-width: 154px;
    height: 82px;
    margin: 0 auto 20px;
    justify-self: center;
  }
  .footer-brand .brand-logo {
    width: 154px;
    height: 82px;
    object-position: center;
  }
  .footer-contact { text-align: center; }
  .footer-col h2 {
    margin-bottom: 5px;
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .footer-col p,
  .footer-col a { font-size: .9rem; }
  .footer-col p {
    max-width: 34ch;
    margin: 0 auto 17px;
    line-height: 1.5;
  }
  .footer-links {
    display: flex;
    margin-top: 10px;
    padding: 24px 0 22px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,.38);
    border-bottom: 1px solid rgba(255,255,255,.38);
    text-align: center;
  }
  .footer-mobile-language {
    width: 100%;
    flex: 0 0 100%;
    margin: 0 auto 7px;
    justify-content: center;
  }
  .footer-links > a {
    display: flex;
    min-height: 38px;
    padding-inline: 4px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    font-size: clamp(.68rem, 3vw, .76rem);
    letter-spacing: -.01em;
    line-height: 1.25;
    white-space: nowrap;
  }
  .footer-links > a + a::before {
    margin-right: 5px;
    color: var(--white);
    content: "●";
    font-size: .72em;
  }
  html[lang="es"] .footer-links > a:last-child { margin-top: -8px; }
  .social-links {
    padding-top: 22px;
    justify-content: center;
    gap: 13px;
  }
  .social-links a {
    width: 44px;
    height: 44px;
  }
  .social-links img {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body[data-page="shop"] .shop-intro { background: var(--reactive-500); }
  body[data-page="shop"] .shop-intro__video { display: none; }
}

/* Smaller source files for compact screens; the crop remains controlled by the existing layout. */
@media (max-width: 820px) {
  .home-hero__visual--main { background-image: url("assets/images/optimized/home-hero-main-900.webp"); }
  .home-hero__visual.home-hero__visual--cold { background-image: url("assets/images/optimized/home-hero-cold-900.webp"); }
  .site-footer {
    background-image:
      linear-gradient(90deg, rgba(var(--ink-rgb), .38), rgba(var(--ink-rgb), .13) 56%, rgba(255,255,255,.08)),
      url("assets/images/optimized/footer-mountains-900.webp");
  }
  .shop-category-card--infusions { background-image: url("assets/images/optimized/category-tea-infusions-600.webp"); }
  .shop-category-card--matcha { background-image: url("assets/images/optimized/category-matcha-lattes-600.webp"); }
  .shop-category-card--cold { background-image: url("assets/images/optimized/category-cold-tea-600.webp"); }
  .shop-category-card--accessories { background-image: url("assets/images/optimized/category-accessories-600.webp"); }
  .shop-category-card--exclusive { background-image: url("assets/images/optimized/category-exclusive-500.webp"); }
  .contact-hero {
    background-image:
      linear-gradient(rgba(0, 130, 207, .2), rgba(var(--ink-rgb), .5)),
      url("assets/images/optimized/contact-mountains-960.webp");
  }
  .register-intro {
    background-image:
      linear-gradient(145deg, rgba(var(--ink-rgb), .92), rgba(49,64,205,.72)),
      url("assets/images/optimized/contact-mountains-960.webp");
  }
}

@media (max-width: 560px) {
  .home-hero__visual--main { background-image: url("assets/images/optimized/home-hero-main-mobile-900.webp"); }
  .home-hero__visual.home-hero__visual--cold { background-image: url("assets/images/optimized/home-hero-cold-mobile-900.webp"); }
  .site-footer {
    background-image:
      linear-gradient(180deg, rgba(var(--ink-rgb), .18), rgba(var(--ink-rgb), .5)),
      url("assets/images/optimized/footer-mountains-900.webp");
    background-position: 58% center;
  }
}

/* Product ingredients: an editorial, interactive ingredient presentation. */
.ingredients {
  position: relative;
  overflow: hidden;
  padding: clamp(76px, 8vw, 122px) 0;
  background:
    radial-gradient(circle at 8% 8%, rgba(139,166,255,.18), transparent 25%),
    linear-gradient(180deg, #f8f9ff, var(--white));
}
.ingredients > .wrap { position: relative; z-index: 1; }
.ingredients-heading {
  display: grid;
  margin-bottom: clamp(30px, 4vw, 54px);
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
  align-items: end;
  gap: 48px;
}
.ingredients .ingredients-heading .eyebrow {
  margin: 0 0 12px;
  color: var(--reactive-500);
}
.ingredients .ingredients-heading h2 {
  margin: 0;
  font-size: clamp(3.4rem, 6vw, 6.3rem);
  font-weight: 700;
  line-height: .84;
}
.ingredients-heading > p {
  max-width: 39ch;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.6;
}
.ingredient-tabs[hidden] { display: none; }
.ingredient-tabs {
  display: flex;
  margin: 0 0 18px;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ingredient-tabs::-webkit-scrollbar { display: none; }
.ingredient-tabs button {
  display: inline-flex;
  height: 52px;
  min-height: 52px;
  padding: 2px 22px 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--white);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.ingredient-tabs button:hover,
.ingredient-tabs button:focus-visible {
  border-color: var(--reactive-400);
  outline: 0;
}
.ingredient-tabs button[aria-selected="true"] {
  border-color: var(--reactive-500);
  color: var(--white);
  background: var(--reactive-500);
}
.ingredient-grid,
.ingredient-grid--single { display: block; }
.ingredient-card {
  --ingredient-x: 50%;
  --ingredient-y: 50%;
  position: relative;
  display: grid;
  min-height: clamp(450px, 46vw, 590px);
  overflow: hidden;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  color: var(--white);
  background: var(--ink);
  box-shadow: 0 28px 70px rgba(var(--ink-rgb), .16);
}
.ingredient-card[hidden] { display: none; }
.ingredient-card::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(
    circle at var(--ingredient-x) var(--ingredient-y),
    rgba(225,235,255,.22) 0%,
    rgba(139,166,255,.26) 13%,
    rgba(139,166,255,.1) 23%,
    transparent 35%
  );
  content: "";
  pointer-events: none;
}
.ingredient-card.is-active { animation: ingredient-card-reveal .62s cubic-bezier(.2,.75,.2,1) both; }
.ingredient-card__visual {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  overflow: hidden;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--ingredient-color) 76%, white), var(--ingredient-color) 45%, color-mix(in srgb, var(--ingredient-color) 58%, var(--ink)));
}
.ingredient-card__visual::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(180deg, rgba(var(--ink-rgb), .05), rgba(var(--ink-rgb), .25));
  content: "";
  pointer-events: none;
}
.ingredient-card__visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.015);
  transition: transform 1.1s cubic-bezier(.2,.75,.2,1);
}
.ingredient-card:hover .ingredient-card__visual > img { transform: scale(1.055); }
.ingredient-card__number,
.ingredient-card__visual-label {
  position: absolute;
  z-index: 3;
  color: var(--white);
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ingredient-card__number { top: 28px; left: 30px; font-size: .72rem; }
.ingredient-card__visual-label { right: 28px; bottom: 25px; font-size: .58rem; }
.ingredient-orb {
  position: relative;
  display: grid;
  width: min(66%, 350px);
  height: auto;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  color: var(--white);
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,.45), transparent 12%),
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.12), transparent 55%);
  box-shadow: inset 0 0 0 20px rgba(255,255,255,.06), 0 28px 80px rgba(var(--ink-rgb), .22);
}
.ingredient-orb::before,
.ingredient-orb::after {
  position: absolute;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 50%;
  content: "";
}
.ingredient-orb::before { inset: -12%; }
.ingredient-orb::after { inset: 18%; }
.ingredient-orb i {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: clamp(1.15rem, 2.2vw, 1.8rem);
  font-style: normal;
  font-weight: 700;
  letter-spacing: .2em;
}
.ingredient-card__copy {
  position: relative;
  z-index: 2;
  display: flex;
  padding: clamp(46px, 6vw, 84px);
  justify-content: center;
  flex-direction: column;
}
.ingredient-grid .ingredient-card__copy .ingredient-card__kicker {
  margin: 0 0 26px;
  color: var(--reactive-100);
  font-family: var(--mono);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ingredient-grid .ingredient-card h3 {
  margin: 0;
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(3rem, 5vw, 5.4rem);
  font-weight: 500;
  line-height: .84;
}
.ingredient-grid .ingredient-card h3 em {
  display: block;
  margin-top: 18px;
  color: var(--reactive-100);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.65rem);
  font-weight: 500;
  line-height: 1;
}
.ingredient-grid .ingredient-card__copy > p:not(.ingredient-card__kicker) {
  max-width: 45ch;
  margin: 30px 0 0;
  color: rgba(255,255,255,.8);
  font-size: .88rem;
  line-height: 1.7;
}
.ingredient-card__rule {
  width: 72px;
  height: 1px;
  margin: 35px 0 18px;
  background: var(--reactive-100);
}
.ingredient-card__copy small {
  color: rgba(255,255,255,.55);
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
@keyframes ingredient-card-reveal {
  from { opacity: 0; transform: translateY(18px) scale(.992); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 820px) {
  .ingredients { padding: 68px 0 76px; }
  .ingredients-heading {
    display: block;
    margin-bottom: 30px;
  }
  .ingredients .ingredients-heading h2 { font-size: clamp(3.25rem, 14vw, 4.6rem); }
  .ingredients-heading > p { margin-top: 24px; font-size: .82rem; }
  .ingredient-card {
    min-height: 0;
    grid-template-columns: 1fr;
  }
  .ingredient-card__visual { min-height: 0; aspect-ratio: 1.05 / 1; }
  .ingredient-card__copy { min-height: 360px; padding: 42px 28px 48px; }
  .ingredient-grid .ingredient-card h3 { font-size: clamp(3rem, 14vw, 4.4rem); }
  .ingredient-grid .ingredient-card h3 em { font-size: 1.18rem; }
  .ingredient-grid .ingredient-card__copy > p:not(.ingredient-card__kicker) { margin-top: 24px; font-size: .82rem; }
  .ingredient-orb { width: min(62%, 260px); }
}

@media (prefers-reduced-motion: reduce) {
  .ingredient-card.is-active { animation: none; }
  .ingredient-card__visual > img { transition: none; }
}

/* Full-bleed ingredient slides: photography first, information over the image. */
.ingredient-card--full {
  --ingredient-content-inset: 30px;
  display: block;
  min-height: 0;
  aspect-ratio: 16 / 8.2;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--ingredient-color);
  box-shadow: 0 30px 80px rgba(var(--ink-rgb), .2);
  isolation: isolate;
}
.ingredient-card--full[hidden] { display: none; }
.ingredient-card--full::after { z-index: 4; opacity: calc(var(--ingredient-glow, 1) * .72); }
.ingredient-card--full .ingredient-card__visual {
  position: absolute;
  inset: 0;
  display: block;
  background:
    radial-gradient(circle at 72% 34%, color-mix(in srgb, var(--ingredient-color) 68%, white), transparent 30%),
    linear-gradient(135deg, var(--ingredient-color), color-mix(in srgb, var(--ingredient-color) 58%, var(--ink)));
}
.ingredient-card--full .ingredient-card__visual::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--ink-rgb), .8) 0%, rgba(var(--ink-rgb), .46) 32%, rgba(var(--ink-rgb), .08) 58%, transparent 72%),
    linear-gradient(0deg, rgba(var(--ink-rgb), .66) 0%, rgba(var(--ink-rgb), .28) 32%, transparent 65%);
  content: "";
  pointer-events: none;
}
.ingredient-card--full .ingredient-card__visual::after {
  z-index: 3;
  border: 0;
  background: none;
}
.ingredient-card--full .ingredient-card__visual > img,
.ingredient-card--full .ingredient-card__visual > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ingredient-card--full .ingredient-card__visual > img {
  animation: none;
  transform: none;
  transition: none;
  will-change: auto;
}
.ingredient-card--full:hover .ingredient-card__visual > img { transform: none; }
.ingredient-card--full .ingredient-card__visual > video { display: block; }
.ingredient-card--full .ingredient-orb {
  position: absolute;
  top: 50%;
  right: 10%;
  width: min(34%, 360px);
  border-color: rgba(255,255,255,.48);
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.5), transparent 14%),
    linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 52%, rgba(var(--ink-rgb), .08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -20px 45px rgba(var(--ink-rgb), .08),
    0 30px 90px rgba(var(--ink-rgb), .2);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  transform: translateY(-50%);
  transition: transform .5s cubic-bezier(.2,.75,.2,1), box-shadow .5s ease;
}
.ingredient-card--full:hover .ingredient-orb { transform: translateY(-50%) scale(1.025); }
.ingredient-card--full .ingredient-card__copy {
  position: absolute;
  z-index: 5;
  bottom: 0;
  left: 0;
  display: block;
  width: min(680px, 62%);
  min-height: 0;
  padding: clamp(38px, 5vw, 72px) var(--ingredient-content-inset) 76px;
}
.ingredient-grid .ingredient-card--full .ingredient-card__copy .ingredient-card__kicker {
  margin: 0 0 32px;
  color: var(--reactive-100);
}
.ingredient-grid .ingredient-card--full h3 {
  margin: 0;
  color: var(--white);
  font-size: clamp(3.8rem, 7vw, 7.2rem);
  font-style: italic;
  font-weight: 500;
  line-height: .76;
}
.ingredient-grid .ingredient-card--full.ingredient-card--long-name h3 {
  max-width: 10ch;
  font-size: clamp(3.2rem, 5.4vw, 5.6rem);
  line-height: .84;
}
.ingredient-grid .ingredient-card--full .ingredient-card__copy > em {
  display: block;
  margin-top: 18px;
  color: rgba(255,255,255,.82);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  font-weight: 500;
  line-height: 1;
}
.ingredient-grid .ingredient-card--full .ingredient-card__copy > p:not(.ingredient-card__kicker) {
  max-width: 47ch;
  margin-top: 22px;
  color: rgba(255,255,255,.88);
  font-size: .88rem;
  line-height: 1.62;
}
.ingredient-card--full .ingredient-card__rule { margin: 25px 0 14px; }
.ingredient-card--full .ingredient-card__copy small {
  position: absolute;
  bottom: var(--ingredient-content-inset);
  left: var(--ingredient-content-inset);
  max-width: calc(50% - var(--ingredient-content-inset) - 18px);
  color: rgba(255,255,255,.68);
  line-height: 1.35;
  white-space: nowrap;
}
.ingredient-card--full .ingredient-card__number {
  z-index: 5;
  top: var(--ingredient-content-inset);
  left: var(--ingredient-content-inset);
}
.ingredient-card--full .ingredient-card__visual-label {
  z-index: 5;
  right: var(--ingredient-content-inset);
  bottom: var(--ingredient-content-inset);
  max-width: calc(50% - var(--ingredient-content-inset) - 18px);
  line-height: 1.35;
  text-align: right;
}

@media (max-width: 820px) {
  .ingredient-card--full {
    --ingredient-content-inset: 26px;
    min-height: 640px;
    aspect-ratio: auto;
  }
  .ingredient-card--full .ingredient-card__visual::before {
    background:
      linear-gradient(0deg, rgba(var(--ink-rgb), .82) 0%, rgba(var(--ink-rgb), .46) 38%, rgba(var(--ink-rgb), .08) 68%, transparent 82%),
      linear-gradient(90deg, rgba(var(--ink-rgb), .14), transparent 58%);
  }
  .ingredient-card--full .ingredient-card__visual > img,
  .ingredient-card--full .ingredient-card__visual > video { object-position: center; }
  .ingredient-card--full .ingredient-orb {
    top: 31%;
    right: 50%;
    width: min(56%, 260px);
    transform: translate(50%, -50%);
  }
  .ingredient-card--full:hover .ingredient-orb { transform: translate(50%, -50%); }
  .ingredient-card--full .ingredient-card__copy {
    right: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 34px var(--ingredient-content-inset) 76px;
  }
  .ingredient-grid .ingredient-card--full h3 {
    font-size: clamp(3.35rem, 15vw, 5rem);
    line-height: .8;
  }
  .ingredient-grid .ingredient-card--full.ingredient-card--long-name h3 {
    max-width: 11ch;
    font-size: clamp(2.9rem, 12.5vw, 4.2rem);
    line-height: .86;
  }
  .ingredient-grid .ingredient-card--full .ingredient-card__copy > em { margin-top: 14px; font-size: 1.08rem; }
  .ingredient-grid .ingredient-card--full .ingredient-card__copy > p:not(.ingredient-card__kicker) { margin-top: 18px; font-size: .8rem; }
  .ingredient-card--full .ingredient-card__copy small {
    max-width: calc(100% - 52px);
    font-size: .52rem;
    letter-spacing: .035em;
  }
  .ingredient-card--full .ingredient-card__visual-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ingredient-card--full .ingredient-card__visual > img {
    animation: none;
    transform: none;
  }
}

/* Compact order history: summary first, products and actions on demand. */
.account-orders {
  width: min(100%, 900px);
  margin-inline: auto;
  gap: 20px;
}
.account-order {
  padding: 0;
  border: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.account-order[open] {
  border-color: rgba(var(--ink-rgb), .1);
  box-shadow: 0 18px 44px rgba(var(--ink-rgb), .07);
}
.account-order__summary {
  display: grid;
  min-height: 112px;
  padding: clamp(20px, 2.4vw, 28px);
  grid-template-columns: minmax(170px, 1fr) minmax(250px, .9fr) 174px 18px;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  list-style: none;
  cursor: pointer;
}
.account-order__summary::-webkit-details-marker { display: none; }
.account-order__summary:hover .account-order__identity > strong,
.account-order__summary:focus-visible .account-order__identity > strong { color: var(--reactive-500); }
.account-order__summary:focus-visible { outline: 3px solid var(--reactive-200); outline-offset: -3px; }
.account-order__identity {
  display: grid;
  min-width: 0;
  gap: 7px;
}
.account-order__identity > small,
.account-order__summary dt {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.account-order__identity > strong {
  font-family: var(--mono);
  font-size: .82rem;
  transition: color .2s ease;
}
.account-order__identity > span {
  color: var(--muted);
  font-size: .66rem;
}
.account-order__summary dl {
  display: grid;
  width: 100%;
  margin: 0;
  grid-template-columns: minmax(150px, 1fr) 90px;
  align-items: start;
  gap: clamp(18px, 2vw, 30px);
}
.account-order__summary dl div { display: grid; grid-template-rows: auto auto; align-content: start; gap: 7px; }
.account-order__summary dd { margin: 0; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.account-order__summary .account-order__status {
  display: inline-flex;
  width: 174px;
  min-height: 44px;
  padding-inline: 12px;
  align-items: center;
  justify-content: center;
  justify-self: end;
  white-space: nowrap;
  text-align: center;
}
.account-order__chevron {
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .28s ease;
}
.account-order[open] .account-order__chevron { transform: rotate(225deg) translate(-1px, -1px); }
.account-order__content {
  padding: 0 clamp(24px, 3vw, 34px) clamp(26px, 3vw, 36px);
  border-top: 1px solid var(--line);
  animation: account-order-reveal .3s ease both;
}
.account-order__content .account-order__body {
  display: block;
  padding: 26px 0;
}
.account-order__content > footer {
  display: flex;
  align-items: center;
  gap: 24px;
}
.account-order__content > footer .button { min-height: 48px; }
.account-reorder-button {
  padding: 10px 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-size: .75rem;
  font-weight: 700;
}
.account-reorder-button:hover,
.account-reorder-button:focus-visible { color: var(--reactive-400); }
@keyframes account-order-reveal {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1200px) {
  .account-order__summary {
    grid-template-columns: minmax(0, 1fr) 174px 18px;
  }
  .account-order__summary dl {
    padding-top: 18px;
    grid-column: 1 / -1;
    grid-row: 2;
    border-top: 1px solid var(--line);
  }
  .account-order__summary .account-order__status { grid-column: 2; grid-row: 1; }
  .account-order__chevron { grid-column: 3; grid-row: 1; }
}

@media (max-width: 820px) {
  .account-orders { width: calc(100% - 12px); }
  .account-order__summary {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 174px 18px;
    gap: 18px;
  }
  .account-order__summary dl {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: minmax(150px, 1fr) 90px;
    justify-content: space-between;
  }
  .account-order__summary .account-order__status { grid-column: 2; grid-row: 1; }
  .account-order__chevron { grid-column: 3; grid-row: 1; }
}

@media (max-width: 560px) {
  .account-order__summary {
    padding: 22px 18px;
    grid-template-columns: minmax(0, 1fr) 18px;
  }
  .account-order__summary .account-order__status {
    width: max-content;
    min-height: 44px;
    grid-column: 1;
    grid-row: 2;
  }
  .account-order__summary dl {
    padding-top: 16px;
    grid-column: 1 / -1;
    grid-row: 3;
    border-top: 1px solid var(--line);
  }
  .account-order__chevron { grid-column: 2; grid-row: 1; }
  .account-order__content { padding-inline: 18px; }
  .account-order__content .account-order__products { display: grid; }
  .account-order__content > footer { align-items: stretch; flex-direction: column; gap: 16px; }
  .account-order__content > footer .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .account-order__content { animation: none; }
  .account-order,
  .account-order__chevron { transition: none; }
}

/* One consistent newsletter composition across every mobile page. */
@media (max-width: 560px) {
  body[data-page="shop"] .shop-category-card--cold { background-position: center 72%; }
  body[data-page="shop"] .shop-category-tabs {
    margin-bottom: 24px;
    background: var(--white);
  }
  body[data-page="shop"] .shop-category-tabs > .wrap {
    padding-block: 12px 16px;
    gap: 12px;
  }
  body[data-page="shop"] .shop-category-tabs__categories {
    width: 100%;
    padding: 0 28px 6px 0;
    gap: 8px;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 0 28px;
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 91%, transparent 100%);
  }
  body[data-page="shop"] .shop-category-tabs__categories button {
    height: 44px;
    min-height: 44px;
    padding-inline: 14px;
    scroll-snap-align: start;
    font-size: .59rem;
  }
  body[data-page="shop"] .shop-category-tabs__categories button:first-child {
    position: sticky;
    z-index: 2;
    left: 0;
    box-shadow: 10px 0 14px var(--white);
  }
  body[data-page="shop"] .shop-category-tabs__special {
    padding-top: 12px;
    gap: 8px;
  }
  body[data-page="shop"] .shop-category-tabs__special button {
    height: 44px;
    min-height: 44px;
    font-size: .59rem;
  }
  body[data-page="shop"] .shop-filter-toggle {
    min-height: 54px;
    padding-inline: 16px;
    background: var(--white);
    font-size: .68rem;
  }
  body[data-page="product"] .product-gallery__main {
    grid-column: 1;
    grid-row: 1;
  }
  body[data-page="product"] .product-thumbnails {
    grid-column: 1;
    grid-row: 2;
  }
  body[data-page="product"] .product-detail-labels {
    min-height: 24px;
    grid-column: 1;
    grid-row: 3;
    margin-top: 2px;
  }
  body[data-page="product"] .product-title-row {
    display: grid;
    margin-bottom: 20px;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: center;
    gap: 0 12px;
  }
  body[data-page="product"] .product-title-row h1 { grid-column: 1 / -1; grid-row: 1; }
  body[data-page="product"] .product-price {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    margin: 0;
  }
  body[data-page="product"] .product-favorite-button {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: end;
  }
  body[data-page="product"] .product-price {
    font-size: 1.55rem;
    line-height: 1.1;
  }
  body[data-page="product"] .product-price--sale {
    align-items: baseline;
    justify-content: flex-start;
    flex-direction: row;
    gap: 10px;
  }
  body[data-page="product"] .benefit-band .wrap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body[data-page="product"] .benefit-band .wrap > span {
    min-width: 0;
    min-height: 58px;
    padding: 4px;
    gap: 5px;
    border-top: 0;
    font-size: .62rem;
    white-space: nowrap;
  }
  body[data-page="product"] .benefit-band .wrap > span:last-child:nth-child(odd) { grid-column: auto; }
  body[data-page="product"] .product-feature-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
  body[data-page="product"] #ingredients-title { line-height: 1.02; }
  body[data-page="product"] .ingredients {
    padding-bottom: 20px;
    background: var(--white);
  }
  body[data-page="product"] .ingredient-card--full {
    --ingredient-content-inset: 24px;
    min-height: 500px;
    background: var(--ink);
    box-shadow: none;
  }
  body[data-page="product"] .ingredient-card--full .ingredient-card__visual {
    aspect-ratio: auto;
  }
  body[data-page="product"] .ingredient-card--full .ingredient-card__visual::before {
    background:
      linear-gradient(0deg, rgba(var(--ink-rgb), .96) 0%, rgba(var(--ink-rgb), .78) 34%, rgba(var(--ink-rgb), .4) 58%, rgba(var(--ink-rgb), .1) 78%, transparent 92%),
      linear-gradient(90deg, rgba(var(--ink-rgb), .3), transparent 72%);
  }
  body[data-page="product"] .ingredient-card--full .ingredient-card__copy {
    padding: 26px var(--ingredient-content-inset) 62px;
  }
  body[data-page="product"] .ingredient-grid .ingredient-card--full .ingredient-card__copy .ingredient-card__kicker {
    margin-bottom: 18px;
  }
  body[data-page="product"] .ingredient-grid .ingredient-card--full h3 {
    max-width: 100%;
    font-size: clamp(2.5rem, 11vw, 3.2rem);
    line-height: .88;
  }
  body[data-page="product"] .ingredient-grid .ingredient-card--full.ingredient-card--long-name h3 {
    max-width: 100%;
    font-size: clamp(2.2rem, 9.5vw, 2.85rem);
    line-height: .92;
  }
  body[data-page="product"] .ingredient-grid .ingredient-card--full .ingredient-card__copy > p:not(.ingredient-card__kicker) {
    margin-top: 14px;
    font-size: .76rem;
    line-height: 1.5;
  }
  body[data-page="product"] .community-head h2 {
    width: 100%;
    padding-right: 8px;
    font-size: clamp(1.48rem, 6.45vw, 1.72rem);
    white-space: nowrap;
  }
  body[data-page="product"] .community-head h2 > span { white-space: nowrap; }
  body[data-page="product"] .community-section { padding-top: 28px; }
  body[data-page="product"] .reviews { padding-top: 24px; }
  body[data-page="account"].account-mobile-section-open .account-hero { display: none; }
  body[data-page="account"].account-mobile-section-open .account-section { padding-top: 0; }
  body[data-page="account"] .account-hero {
    padding: 24px 0 26px;
  }
  body[data-page="account"] .account-hero h1 {
    font-size: clamp(2.25rem, 10vw, 2.85rem);
  }
  body[data-page="account"] .account-section {
    padding: 18px 0 52px;
    background: var(--white);
  }
  body[data-page="account"] .account-layout { gap: 30px; }
  body[data-page="account"] .account-menu {
    position: static;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  body[data-page="account"] .account-mobile-dashboard {
    display: block;
    margin: 0 0 30px;
  }
  body[data-page="account"] .account-mobile-dashboard h2 {
    margin: 0 0 14px;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1;
  }
  body[data-page="account"] .account-mobile-dashboard__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  body[data-page="account"] .account-mobile-dashboard__grid button {
    display: flex;
    width: 100%;
    min-height: 104px;
    min-width: 0;
    padding: 12px;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    border: 0;
    color: var(--ink);
    background: var(--reactive-100);
    text-align: left;
  }
  body[data-page="account"] .account-mobile-dashboard__grid button::after {
    position: absolute;
    right: 14px;
    bottom: 16px;
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: "";
    transform: rotate(45deg);
  }
  body[data-page="account"] .account-mobile-dashboard__grid strong {
    font-family: var(--serif);
    max-width: 100%;
    font-size: 3rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1;
  }
  body[data-page="account"] .account-mobile-dashboard__grid span {
    font-size: .7rem;
    font-weight: 700;
  }
  body[data-page="account"] .account-menu > [data-account-view]::after {
    position: absolute;
    top: 50%;
    right: 18px;
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: "";
    transform: translateY(-50%) rotate(45deg);
  }
  body[data-page="account"] .account-menu > [data-account-view] {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 0 48px 0 17px;
    align-items: center;
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    background: transparent;
    font-size: .76rem;
    line-height: 1.2;
    text-align: left;
  }
  body[data-page="account"] .account-menu > [data-account-view]::after {
    width: 8px;
    height: 8px;
  }
  body[data-page="account"] .account-menu > [data-account-view].is-active {
    color: var(--ink);
    background: transparent;
  }
  body[data-page="account"] .account-menu > [data-account-view="summary"] { display: none; }
  body[data-page="account"] .account-menu__actions {
    display: flex;
    margin: 18px 0 0;
    padding: 0;
    align-items: stretch;
    flex-direction: column;
    /* Apilados otra vez en móvil: mismo aire que en el lateral de escritorio. */
    row-gap: 10px;
    border: 0;
    background: transparent;
  }
  body[data-page="account"] .account-menu__actions [data-account-logout],
  body[data-page="account"] .account-menu__actions .account-delete-trigger {
    width: 100%;
    min-height: 28px;
    padding: 2px 17px;
    flex: none;
    border: 0;
    background: transparent;
    font-size: .76rem;
    font-weight: 600;
  }
  body[data-page="account"] .account-content { width: 100%; }
  body[data-page="account"] .account-view > .eyebrow {
    margin-bottom: 10px;
    font-size: .65rem;
  }
  body[data-page="account"] .account-content .account-view > h2 {
    margin-bottom: 26px;
    font-size: clamp(2.15rem, 10vw, 2.65rem);
    line-height: .92;
    white-space: normal;
  }
  body[data-page="account"] .account-content .account-view > h2 em { white-space: nowrap; }
  body[data-page="account"] .account-orders {
    width: 100%;
    gap: 14px;
  }
  body[data-page="account"] .account-order {
    border: 1px solid rgba(var(--ink-rgb), .1);
    box-shadow: 0 8px 24px rgba(var(--ink-rgb), .045);
  }
  body[data-page="account"] .account-order__summary {
    min-height: 0;
    padding: 18px;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 14px 10px;
  }
  body[data-page="account"] .account-order__identity {
    gap: 6px;
  }
  body[data-page="account"] .account-order__identity > small,
  body[data-page="account"] .account-order__summary dt {
    font-size: .56rem;
    letter-spacing: .12em;
  }
  body[data-page="account"] .account-order__identity > strong { font-size: .78rem; }
  body[data-page="account"] .account-order__identity > span { font-size: .66rem; }
  body[data-page="account"] .account-order__chevron {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }
  body[data-page="account"] .account-order__summary .account-order__status {
    width: max-content;
    min-height: 34px;
    padding-inline: 11px;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    font-size: .65rem;
  }
  body[data-page="account"] .account-order__summary dl {
    width: 100%;
    padding: 14px 0 0;
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    border-top: 1px solid var(--line);
  }
  body[data-page="account"] .account-order__summary dl div:last-child { text-align: right; }
  body[data-page="account"] .account-order__summary dd { font-size: .72rem; }
  body[data-page="account"] .account-order__content { padding: 0 18px 22px; }
  body[data-page="account"] .account-order__content .account-order__body { padding: 20px 0; }
  body[data-page="account"] .account-order__products { gap: 12px; }
  body[data-page="account"] .account-order__product {
    min-width: 0;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 12px;
  }
  body[data-page="account"] .account-order__product img {
    width: 68px;
    height: 68px;
  }
  body[data-page="account"] .account-layout:not(.is-mobile-section-open) .account-content { display: none; }
  body[data-page="account"] .account-layout.is-mobile-section-open .account-menu { display: none; }
  body[data-page="account"] .account-mobile-back {
    display: inline-flex;
    width: calc(100% + 24px);
    min-height: 54px;
    margin: 0 -12px 24px;
    padding: 0 12px;
    align-items: center;
    gap: 9px;
    border: 0;
    color: var(--white);
    background: var(--ink);
    font-size: .78rem;
    font-weight: 700;
  }
  body[data-page="account"] .account-mobile-back span {
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1;
  }
  body[data-page="account"] .account-tracking > .account-back { display: none; }
  body[data-page="account"] .tracking-steps {
    padding: 6px 6px 0 16px;
  }
  body[data-page="account"] .tracking-steps li {
    min-height: 96px;
    padding: 0 0 32px 56px;
  }
  body[data-page="account"] .tracking-steps li::before,
  body[data-page="account"] .tracking-steps li::after { left: 12px; }
  body[data-page="account"] .tracking-steps li i { left: 13px; }
  body[data-page="account"] .tracking-steps li:last-child {
    min-height: 64px;
    padding-bottom: 0;
  }
  body[data-page="account"] .tracking-help {
    margin-top: 24px;
    padding-top: 18px;
    gap: 14px;
  }

  body[data-page="shop"] .shop-catalog-hero {
    height: 260px;
    padding-block: 28px;
    align-items: center;
  }
  body[data-page="shop"] .shop-catalog-hero .shop-catalog__head {
    width: calc(100% - 32px);
    margin: 0 auto;
    gap: 16px;
    justify-content: center;
  }
  body[data-page="shop"] .shop-catalog-hero .shop-catalog__head > div { width: 100%; }
  body[data-page="shop"] .shop-catalog-hero .shop-catalog__head .eyebrow {
    margin: 0 0 14px;
    font-size: .66rem;
    line-height: 1.2;
  }
  body[data-page="shop"] .shop-catalog-hero .shop-catalog__head h1 {
    margin: 0;
    font-size: clamp(2.6rem, 12vw, 3.15rem);
    line-height: .92;
  }
  body[data-page="shop"] .shop-catalog-hero .shop-catalog-title__query {
    margin-top: 14px;
    font-size: .34em;
    line-height: 1.35;
  }
  body[data-page="shop"] .shop-catalog-hero .shop-catalog__head > p {
    margin: 0;
    font-size: .65rem;
    line-height: 1.3;
  }

  body[data-page="contact"] .contact-hero {
    min-height: 0;
    padding: 46px 0 38px;
    background-image:
      linear-gradient(rgba(0, 130, 207, .2), rgba(var(--ink-rgb), .5)),
      url("assets/images/optimized/contact-mountains-1920.webp");
    background-position: 54% center;
  }
  body[data-page="contact"] .contact-hero__inner { width: calc(100% - 28px); }
  body[data-page="contact"] .contact-hero h1 {
    margin-bottom: 16px;
    font-size: clamp(3.65rem, 17vw, 4.6rem);
    line-height: .9;
  }
  body[data-page="contact"] .contact-hero__inner > p:not(.eyebrow) {
    max-width: 34ch;
    margin: 0 auto 30px;
    font-family: var(--sans);
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.5;
  }
  body[data-page="contact"] .contact-details {
    display: flex;
    width: 100%;
    max-width: none;
    margin: 0 auto 28px;
    flex-direction: column;
    gap: 28px;
  }
  body[data-page="contact"] .contact-details article {
    display: flex;
    min-width: 0;
    min-height: 0;
    padding: 0 12px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 0;
    background: transparent;
  }
  body[data-page="contact"] .contact-details article:first-child {
    min-height: 0;
    grid-column: auto;
    border-bottom: 0;
  }
  body[data-page="contact"] .contact-details article + article {
    margin-top: 0;
    border-left: 0;
  }
  body[data-page="contact"] .contact-details article:nth-child(3) { border-left: 0; }
  body[data-page="contact"] .contact-details h2 {
    margin: 0 0 9px;
    font-size: .72rem;
    letter-spacing: .13em;
    text-transform: uppercase;
  }
  body[data-page="contact"] .contact-details p {
    font-size: .78rem;
    line-height: 1.45;
  }
  body[data-page="contact"] .contact-details a { overflow-wrap: anywhere; }
  body[data-page="contact"] .contact-form {
    width: 100%;
    padding: 20px;
    gap: 16px;
    border: 1px solid rgba(255,255,255,.18);
  }
  body[data-page="contact"] .contact-form__fields { gap: 13px; }
  body[data-page="contact"] .contact-form label { font-size: .78rem; }
  body[data-page="contact"] .contact-form input {
    height: 52px;
    margin-top: 6px;
    font-size: .9rem;
  }
  body[data-page="contact"] .contact-form textarea {
    min-height: 132px;
    margin-top: 6px;
    font-size: .9rem;
  }
  body[data-page="contact"] .contact-form .message-label::after { display: none; }
  body[data-page="contact"] .contact-form .button { min-height: 52px; }

  .status-hero {
    height: clamp(480px, 68svh, 620px);
    min-height: 0;
    max-height: none;
  }
  .status-hero__video { object-position: center; }
  .status-message {
    inset: 50% 0 auto;
    width: 100%;
    min-height: 44%;
    padding: 28px 20px;
    transform: translateY(-50%);
  }
  .status-message h1 {
    max-width: 100%;
    margin: 0 auto 18px;
    font-size: clamp(2.55rem, 12vw, 3.4rem);
    line-height: .9;
    text-align: center;
    text-wrap: balance;
  }
  .status-message p {
    max-width: 32ch;
    font-size: .92rem;
    line-height: 1.45;
    text-align: center;
  }
  body[data-page] .newsletter {
    padding-inline: 0;
    overflow: hidden;
    color: var(--white);
    border: 0;
    background: var(--ink);
  }
  body[data-page] .newsletter-inner {
    width: calc(100% - 24px);
    margin-inline: auto;
    gap: 8px;
    padding: 38px 0 34px;
  }
  body[data-page] .newsletter-heading,
  body[data-page] .newsletter-content { text-align: center; }
  body[data-page] .newsletter h2 {
    width: 100%;
    max-width: 100%;
    color: var(--white);
    font-size: clamp(1.95rem, 8.5vw, 2.3rem);
    line-height: .9;
    text-align: center;
  }
  body[data-page] .newsletter h2 em { color: var(--reactive-200); }
  body[data-page] .newsletter-title__line { white-space: nowrap; }
  body[data-page] .newsletter-title__line + .newsletter-title__line { margin-top: 5px; }
  body[data-page] .newsletter-title__mobile-extra { display: inline; }
  body[data-page] .newsletter-title__desktop-extra { display: none; }
  body[data-page] .newsletter .eyebrow { display: none; }
  body[data-page] .newsletter-copy {
    margin-bottom: 10px;
    color: var(--white);
    font-size: .76rem;
    line-height: 1.45;
    text-align: center;
  }
  body[data-page] .newsletter-form { gap: 12px; }
  body[data-page] .newsletter-form input,
body[data-page] .newsletter-form button {
    height: 56px;
    min-height: 56px;
  }
  body[data-page] .newsletter-form input {
    padding-inline: 22px;
    color: var(--ink);
    border: 0;
    background: var(--white);
    font-size: .95rem;
    text-align: center;
  }
  body[data-page] .newsletter-form input::placeholder { color: var(--reactive-200); }
  body[data-page] .newsletter-form button {
    color: var(--ink);
    background: var(--reactive-200);
    font-size: .96rem;
  }
}

/* Mobile catalog controls: every category stays visible without horizontal scrolling. */
@media (max-width: 560px) {
  body[data-page="shop"] .shop-category-tabs { margin-bottom: 18px; }
  body[data-page="shop"] .shop-category-tabs > .wrap {
    width: var(--wrap);
    padding: 14px 0 4px;
    gap: 0;
  }
  body[data-page="shop"] .shop-category-tabs__categories {
    display: grid;
    width: 100%;
    padding: 0;
    overflow: visible;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    scroll-snap-type: none;
    touch-action: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  body[data-page="shop"] .shop-category-tabs__categories button {
    position: static;
    width: 100%;
    height: auto;
    min-height: 48px;
    padding: 7px 9px 5px;
    white-space: normal;
    box-shadow: none;
    font-size: .58rem;
    line-height: 1.25;
  }
  body[data-page="shop"] .shop-category-tabs__categories button:first-child {
    position: static;
    left: auto;
    grid-column: 1 / -1;
    box-shadow: none;
  }
  body[data-page="shop"] .shop-category-tabs__special { display: none; }
  body[data-page="shop"] .shop-catalog-layout { gap: 12px; }
  body[data-page="shop"] .shop-filter-toggle {
    min-height: 54px;
    margin: 0;
    padding-inline: 2px;
    justify-content: flex-start;
    gap: 10px;
    border: 0;
    color: var(--reactive-500);
    font-size: .7rem;
  }
  body[data-page="shop"] .shop-filter-toggle__chevron {
    width: 9px;
    height: 9px;
    margin: -3px 0 0;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
  }
  body[data-page="shop"] .shop-filter-toggle[aria-expanded="true"] .shop-filter-toggle__chevron {
    transform: rotate(225deg) translate(-1px, -1px);
  }
  body[data-page="shop"] .shop-filter-toggle[aria-expanded="true"] { min-height: 38px; }
  body[data-page="shop"] .shop-filter-panel.is-open {
    margin-top: -12px;
    padding: 0 2px 4px;
    overflow: visible;
  }
  /* El panel reservaba franja para su propia barra de scroll (scrollbar-gutter: stable y una
     barra de 6px), y al desplegar o cerrar la persiana se veía esa banda grisácea al
     repintarse. En móvil el panel no necesita scroll propio: lo hace la página. */
  body[data-page="shop"] .shop-filter-panel {
    scrollbar-gutter: auto;
    scrollbar-width: none;
  }
  body[data-page="shop"] .shop-filter-panel::-webkit-scrollbar { display: none; }
  /* En móvil la cabecera no ocupa sitio: "Limpiar todo" se coloca sobre la fila del botón
     Filtro y se alinea con él. El anclaje es el contenedor del panel (no un desplazamiento
     a ojo), así que sigue alineado aunque cambie la altura del botón. */
  body[data-page="shop"] .shop-catalog-layout { position: relative; }
  body[data-page="shop"] .shop-filter-panel__head {
    position: static;
    height: 0;
    padding: 0;
  }
  body[data-page="shop"] .shop-filter-panel__head strong { display: none; }
  body[data-page="shop"] .shop-filter-panel__head button {
    position: absolute;
    top: 0;
    right: 0;
    height: 38px;              /* la misma altura que el botón Filtro en móvil, para centrarlo */
    display: inline-flex;
    align-items: center;
  }
  /* El de dentro sobra en móvil: el de fuera siempre está visible y hace lo mismo. */
  body[data-page="shop"] .shop-filter-panel__head { display: none; }
  body[data-page="shop"] .shop-filter-clear-outside {
    position: absolute;
    top: 0;
    right: 0;
    height: 54px;              /* el botón Filtro mide 54px con la persiana cerrada… */
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--reactive-500);
    font-family: inherit;
    font-size: .68rem;
    cursor: pointer;
  }
  /* …y 38px cuando la persiana está abierta: el botón de limpiar lo sigue para no descuadrarse. */
  body[data-page="shop"] .shop-filter-toggle[aria-expanded="true"] + .shop-filter-clear-outside { height: 38px; }
  body[data-page="shop"] .shop-filter-clear__desktop { display: none; }
  body[data-page="shop"] .shop-filter-clear__mobile { display: inline; }
  body[data-page="shop"] .shop-filter-form summary { min-height: 46px; }
  body[data-page="shop"] .shop-special-filters--mobile {
    display: grid;
    margin: 14px 0 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  body[data-page="shop"] .shop-special-filters--mobile button {
    display: flex;
    min-width: 0;
    min-height: 48px;
    padding: 6px 10px 4px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--white);
    font-family: var(--mono);
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  body[data-page="shop"] .shop-special-filters [data-shop-special="new"] {
    border-color: var(--reactive-200);
    color: var(--reactive-300);
  }
  body[data-page="shop"] .shop-special-filters [data-shop-special="new"].is-active {
    border-color: var(--reactive-300);
    color: var(--white);
    background: var(--reactive-300);
  }
  body[data-page="shop"] .shop-special-filters [data-shop-special="eco"] {
    border-color: var(--green);
    color: #659f3d;
  }
  body[data-page="shop"] .shop-special-filters [data-shop-special="eco"].is-active {
    color: var(--white);
    background: var(--green);
  }
}
/* Carrusel de la banda de beneficios: 1 icono a la vez, centrado, con fade,
   texto e icono al doble de tamaño. Aplica en PC, tablet y móvil. */
body[data-page="product"] .benefit-band .wrap {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  grid-template-columns: none;
}
body[data-page="product"] .benefit-band .wrap > span {
  display: none;
}
body[data-page="product"] .benefit-band .wrap > span.is-active {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-width: 0;
  min-height: 58px;
  padding: 10px 14px;
  gap: 10px;
  border: 0;
  font-size: 1.24rem;
  text-align: center;
  white-space: normal;
  animation: benefit-fade .5s ease;
}
body[data-page="product"] .benefit-band .product-feature-icon {
  width: 60px;
  height: 60px;
  flex-basis: 60px;
}
@keyframes benefit-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body[data-page="product"] .benefit-band .wrap > span.is-active { animation: none; }
}

/* Reseñas movidas bajo la banda de iconos: el aire hasta "Ingredientes clave"
   se reduce a la mitad (antes sumaba el padding-bottom de reseñas + el
   padding-top editorial completo de la sección de ingredientes). */
body[data-page="product"] .reviews + .ingredients { padding-top: clamp(38px, 4vw, 61px); }
@media (max-width: 820px) {
  body[data-page="product"] .reviews + .ingredients { padding-top: 34px; }
}

/* Producto y tienda: la sección "Tu comunidad azul" y la banda "Subscríbete
   a nuestra Newsletter" van pegadas, sin espacio en blanco entre ambas. */
body[data-page="product"] .community-section,
body[data-page="shop"] .community-section {
  padding-bottom: 0;
  margin-bottom: 0;
}


/* Tienda: espacio entre las tarjetas de categorías y las reseñas (ahora justo
   debajo) reducido a la mitad. La separación era la suma del padding-bottom de
   la sección de tarjetas + el padding-top de reseñas; se parte cada uno por 2
   en cada breakpoint. */
body[data-page="shop"] .shop-category-overview { padding-bottom: 41px; } /* antes 82 */
body[data-page="shop"] .reviews { padding-top: 18px; }                   /* antes 36 */
@media (max-width: 820px) {
  body[data-page="shop"] .shop-category-overview { padding-bottom: 38px; } /* antes 76 */
  body[data-page="shop"] .reviews { padding-top: 38px; }                   /* antes 76 */
}
@media (max-width: 560px) {
  body[data-page="shop"] .shop-category-overview { padding-bottom: 25px; } /* antes 50 */
  body[data-page="shop"] .reviews { padding-top: 31px; }                   /* antes 62 */
}


/* Producto: la sección de opiniones se centra verticalmente entre la banda del
   carrusel de iconos (arriba) e "Ingredientes clave" (abajo), con el mismo
   espacio a ambos lados. Se sube un poco la separación respecto al carrusel y
   se recorta la de abajo para que ambas coincidan. */
body[data-page="product"] .reviews {
  padding-block: clamp(40px, 5vw, 56px);
}
body[data-page="product"] .reviews + .ingredients {
  padding-top: 0;
}


/* Carrusel: lo usan el tarjetero de opiniones (ficha de producto) y la selección de la portada.
   Muestra 3 tarjetas a la vez (2 en tablet, 1 en móvil), avanza una cada 3 s y vuelve a empezar
   al llegar a la última (set original + copia, para que el bucle no dé un salto). El ancho de
   cada tarjeta lo calcula app.js; la separación sale de --lta-carrusel-gap. */
.lta-carrusel { display: block; }
.lta-carrusel__viewport { overflow: hidden; }
.lta-carrusel__track {
  display: flex;
  width: max-content;
  will-change: transform;
  transition: transform .62s cubic-bezier(.2,.75,.2,1);
}
.lta-carrusel__set {
  display: flex;
  gap: var(--lta-carrusel-gap, 30px);
  padding-right: var(--lta-carrusel-gap, 30px);
}
.lta-carrusel__set > * {
  flex: 0 0 auto;
  min-width: 0;
  box-sizing: border-box;
}
.review-grid.lta-carrusel { padding-top: 0; }
/* Flechas a los lados de los carruseles que van "a lo ancho": la selección de la portada y del
   listado (Best sellers / Novedades) y el tarjetero de opiniones de la ficha de producto.
   Van FUERA del contenido (en el margen de la página, para no taparlo), centradas en la altura de
   lo que se ve —en la portada el centro de la FOTO, que app.js mide y deja en
   --lta-carrusel-centro-foto; en las opiniones, que no tienen foto, el centro de la tarjeta— y sin
   círculo: solo la flechita, que es el chevron del menú.
   Solo en escritorio: por debajo de 820px el nav se oculta y se desliza con el dedo. */
.best-sellers .lta-carrusel,
.review-grid.lta-carrusel { position: relative; }
.best-sellers .lta-carrusel__nav,
.review-grid.lta-carrusel .lta-carrusel__nav {
  position: absolute;
  z-index: 4;
  top: var(--lta-carrusel-centro-foto, 50%);
  right: 0;
  left: 0;
  height: 0;
  margin: 0;
  /* El hueco entre las dos flechas no debe tapar las tarjetas: solo los botones reciben clics. */
  pointer-events: none;
}
.best-sellers .lta-carrusel__arrow,
.review-grid.lta-carrusel .lta-carrusel__arrow {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translateY(-50%);
  pointer-events: auto;
}
/* 6px de aire hasta la tarjeta y los 30px de la flecha caben en el margen de la página (40px). */
.best-sellers .lta-carrusel__arrow:first-child,
.review-grid.lta-carrusel .lta-carrusel__arrow:first-child { right: calc(100% + 6px); }
.best-sellers .lta-carrusel__arrow:last-child,
.review-grid.lta-carrusel .lta-carrusel__arrow:last-child { left: calc(100% + 6px); }
.best-sellers .lta-carrusel__arrow .ui-chevron,
.review-grid.lta-carrusel .lta-carrusel__arrow .ui-chevron { width: 17px; height: 17px; border-width: 3px; }
/* Color: la portada va sobre el azul de la sección (flecha en blanco) y las opiniones sobre blanco
   (flecha en azul de tinta). Los botones del sitio no llevan contorno de foco, así que el propio
   cambio de color es el aviso al enfocar. */
.best-sellers .lta-carrusel__arrow { color: var(--white); }
.best-sellers .lta-carrusel__arrow:hover,
.best-sellers .lta-carrusel__arrow:focus-visible { color: var(--sky); }
.review-grid.lta-carrusel .lta-carrusel__arrow { color: var(--ink); }
.review-grid.lta-carrusel .lta-carrusel__arrow:hover,
.review-grid.lta-carrusel .lta-carrusel__arrow:focus-visible { color: var(--reactive-400); }


/* Producto: la sección "Ingredientes clave" usa fondo blanco también en
   escritorio/tablet (en móvil ya era blanco), sin el degradado de color. */
body[data-page="product"] .ingredients {
  background: var(--white);
}


/* ---- Reseñas: vacío y diálogo público de alta ---- */
.reviews-empty {
  margin: 0;
  padding: 42px 24px;
  grid-column: 1 / -1;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
  font-size: .86rem;
  background: var(--mist-light);
}
#review-dialog .review-form__rating { margin: 4px 0 14px; }
.review-form__label { display: block; margin-bottom: 8px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.review-form__stars { display: flex; gap: 4px; font-size: 2rem; line-height: 1; }
.review-form__stars button {
  padding: 0; border: 0; background: none; color: var(--line);
  font-size: inherit; line-height: 1; cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
.review-form__stars button:hover { color: var(--reactive-400); }
.review-form__stars button.is-active { color: var(--reactive-400); transform: translateY(-2px); }
.review-form__field { display: block; margin: 12px 0; font-size: .8rem; font-weight: 600; color: var(--muted); }
#review-dialog input[type="text"],
#review-dialog textarea {
  display: block; width: 100%; margin-top: 6px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); background: var(--white);
  font-family: var(--sans); font-size: .95rem; font-weight: 400;
}
#review-dialog input[type="text"]:focus,
#review-dialog textarea:focus { outline: 2px solid var(--reactive-400); outline-offset: 1px; border-color: transparent; }
#review-dialog textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.review-form__check { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: .85rem; color: var(--ink); cursor: pointer; }
.review-form__check input { width: 18px; height: 18px; accent-color: var(--reactive-500); }
.review-form__hint { margin: 4px 0 0; color: var(--muted); font-size: .74rem; }
.review-form__err { margin: 8px 0 0; color: var(--coral); font-size: .8rem; min-height: 16px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
@media (max-width: 560px) {
  #review-dialog .dialog-inner { padding: 36px 22px; }
  .review-form__stars { font-size: 1.7rem; }
}

/* En móvil las pestañas destacadas ("Best sellers" y "Novedades", en la portada y en el
   listado) repartían el ancho en dos mitades iguales: cada texto quedaba centrado en su
   mitad y entre los dos se veía un hueco enorme. Ahora van juntas y centradas, con un hueco
   corto, y con más cuerpo (los 18,7 px de antes se quedaban pequeños). Ojo al subir la
   fuente: "New arrivals" en inglés es el texto más largo; si no cabe, se sale del ancho. */
@media (max-width: 560px) {
  .featured-products-tabs { gap: 12px; }
  .shop-featured .featured-products-tabs {
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 28px;
  }
  .featured-products-tab { font-size: clamp(1.2rem, 6vw, 1.65rem); }
  .shop-featured .featured-products-tab { font-size: clamp(1.2rem, 6vw, 1.65rem); }
}


/* Flechas del carrusel: en escritorio se pasa a mano (y el avance automático se para al pasar
   por encima); en pantallas estrechas estorban, porque ahí se desliza con el dedo. */
.lta-carrusel__nav { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
.lta-carrusel__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--ink);
  font-family: inherit; font-size: 1.35rem; line-height: 1;
  cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.lta-carrusel__arrow:hover,
.lta-carrusel__arrow:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--white); }
/* La flechita es el mismo chevron del menú superior (el de «Tienda»); la de atrás es la misma girada. */
.lta-carrusel__arrow .ui-chevron { width: 13px; height: 13px; border-width: 2.5px; }
.lta-carrusel__chevron--previous { transform: rotate(225deg); }
@media (max-width: 820px) {
  .lta-carrusel__nav { display: none; }
  /* Deslizamiento con el dedo, con la tarjeta encajando al soltar. */
  .review-grid {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 78%);
    grid-template-columns: none;
    overflow-x: auto; padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .review-grid article { scroll-snap-align: start; }
}

/* Aviso de cabecera del descuento de primera compra: es el que ven los visitantes SIN sesión en
   el hueco de la promoción de categoría. No lleva contador, así que la frase puede usar todo el
   ancho (el carril de la promoción reserva 150px para el reloj en móvil) y no se corta en
   columnas de 15ch, que con una frase larga dejaban el texto en seis líneas. */
.summer-promo--registro .summer-promo__message {
  width: 100%;
  min-width: 0;
  justify-content: center;
}
.summer-promo--registro .summer-promo__message span { max-width: none; }
@media (max-width: 820px) {
  /* En móvil el mensaje va en COLUMNA con `align-items: flex-start`, que es lo que necesita el
     contador regresivo (etiqueta y reloj pegados a la izquierda). Este aviso no lleva reloj, así
     que sin esta línea el texto se quedaba a la izquierda: medido, la etiqueta «PROMOCIÓN» caía
     355 px a la izquierda del centro de la franja a 820 de ancho y 149 px a 390 (pedido del
     cliente, 2026-09-24: centrar todo el texto). `text-align` hace falta además de `align-items`
     porque cuando la frase ocupa dos líneas (a 360 px) la caja es del ancho de la franja y las
     líneas se alinean por `text-align`, no por `align-items`. */
  .summer-promo--registro .summer-promo__message { width: 100%; align-items: center; text-align: center; }
  .summer-promo--registro .summer-promo__message span { font-size: .78rem; line-height: 1.25; }
}

@media (max-width: 560px) {
  /* La retícula de ≤560 px reserva una segunda columna a la derecha para el reloj del contador
     regresivo (el `auto` de `minmax(0, 1fr) auto`). Este aviso no lleva reloj: la columna se queda
     vacía pero su `gap` de 8 px se descuenta igual, así que el mensaje medía 362 px en vez de 370 y
     el texto caía 4 px a la izquierda.
     Se arregla dejando UNA sola columna, y no con `display: block` (que fue el primer intento y
     estaba mal): `align-items: center` es una propiedad de la retícula, así que al quitar la
     retícula el texto dejaba de centrarse en vertical y se quedaba pegado arriba (medido: 6 px
     arriba y 17,7 abajo, un desvío de -5,9 px que se veía a simple vista). Con una columna se
     arreglan los dos ejes a la vez: el mensaje ocupa todo el ancho y la retícula lo centra. */
  .summer-promo--registro .summer-promo__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
  }
}

/* ---- Aparición suave de los bloques (fade al cargar) -------------------------------
   El <head> de cada página marca el documento con .lta-reveal-ready (solo si hay JS), así
   que los bloques con data-reveal empiezan ocultos YA desde el primer pintado: no hay
   parpadeo. app.js los revela en cuanto están a la vista (los que ya se ven al cargar y
   los que llegan al hacer scroll), con un fundido corto y un ascenso mínimo de 8 px: es
   lo que evita que cada bloque aparezca "de golpe" cuando responde la API.
   Sin JS no se oculta nada, y con "reducir movimiento" tampoco: se ve todo de inmediato. */
html.lta-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(8px);
}
html.lta-reveal-ready [data-reveal].lta-revelado {
  animation: lta-reveal-in .45s cubic-bezier(.22,.7,.2,1) both;
}
@keyframes lta-reveal-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* La banda del puente de «Nuestro universo» no arranca OCULTA sino APENAS VISIBLE, y su
   aparición dura 3 s en vez de 0,45 s (pedido del cliente, 2026-09-24: quiere que el dibujo
   se intuya desde el principio y que entre con mucha más suavidad).
   Lleva animación propia a propósito: `lta-reveal-in` empieza en opacity 0 y la comparten
   TODOS los bloques de la web (tarjetas, cabecera, pie, capítulos), así que tocar sus
   fotogramas cambiaría media tienda. El valor de arranque está en un solo sitio
   (`.1` abajo y en el `from`), para poder ajustarlo sin buscar más. */
html.lta-reveal-ready .universe-band--puente[data-reveal] { opacity: .1; }
html.lta-reveal-ready .universe-band--puente[data-reveal].lta-revelado {
  /* La curva es ease-in-out, NO la cubic-bezier(.22,.7,.2,1) del resto de la web: aquella es
     de arranque rápido y con 3 s el fundido se acababa en el primer segundo (medido: a los
     1,5 s ya estaba en 0,97 de opacidad y los otros 1,5 s no se veían). Esta reparte la
     aparición por todo el tiempo, que es lo que se pidió. Medido con la página en marcha:
     0,10 al arrancar, 0,22 a los 0,75 s, 0,56 a los 1,5 s, 0,89 a los 2,25 s y 1,00 a los 3 s. */
  animation: lta-reveal-in-puente 3s cubic-bezier(.42, 0, .58, 1) both;
}
@keyframes lta-reveal-in-puente {
  from { opacity: .1; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
/* Las tarjetas de una rejilla entran escalonadas (50 ms cada una, la última a 1/4 s): así
   se lee como una entrada y no como un parpadeo. */
html.lta-reveal-ready .product-card[data-reveal].lta-revelado:nth-child(2) { animation-delay: .05s; }
html.lta-reveal-ready .product-card[data-reveal].lta-revelado:nth-child(3) { animation-delay: .1s; }
html.lta-reveal-ready .product-card[data-reveal].lta-revelado:nth-child(4) { animation-delay: .15s; }
html.lta-reveal-ready .product-card[data-reveal].lta-revelado:nth-child(5) { animation-delay: .2s; }
html.lta-reveal-ready .product-card[data-reveal].lta-revelado:nth-child(6) { animation-delay: .25s; }
html.lta-reveal-ready .product-card[data-reveal].lta-revelado:nth-child(n+7) { animation-delay: .3s; }
/* Las fotos entran solas al decodificarse: es donde más se nota el salto al bajar. */
html.lta-reveal-ready img.lta-fade { opacity: 0; transition: opacity .4s ease; }
html.lta-reveal-ready img.lta-fade.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  /* Va con .is-revealed incluido: si no, la regla de la animación (que es más específica)
     seguiría ganando y habría fundido aunque el visitante haya pedido no ver movimiento. */
  html.lta-reveal-ready [data-reveal],
  html.lta-reveal-ready [data-reveal].lta-revelado { opacity: 1; transform: none; animation: none; }
  /* La banda del puente tiene su propio arranque (apenas visible) y su selector es MÁS
     específico que el de arriba: sin nombrarla aquí se quedaría al 10 % con «reducir
     movimiento», que es justo lo contrario de lo que pide el visitante. */
  html.lta-reveal-ready .universe-band--puente[data-reveal],
  html.lta-reveal-ready .universe-band--puente[data-reveal].lta-revelado { opacity: 1; transform: none; animation: none; }
  html.lta-reveal-ready img.lta-fade { opacity: 1; transition: none; }
}

/* ---- Huecos reservados mientras app.js monta la página ----------------------------
   La cabecera (franja de arriba + cabecera) y el banner de portada los pinta app.js cuando
   tiene los datos. Sin reservar su sitio, la página daba un salto al aparecer: todo lo de
   abajo (las tarjetas del bloque siguiente) se iba de la pantalla de golpe. Se reserva con
   la altura real medida de cada tramo; cuando el aviso de cabecera va a salir (lo dice la
   API, antes de pintar) se reserva también su trozo, así que el pintado encaja sin mover
   nada. Los valores salen de medir la web: 38 + 81 px de cabecera en escritorio, 26 + 73
   por debajo de 820 px, y el aviso mide 84 / 58 / 54 px según el tramo. */
[data-site-header]:empty {
  min-height: 119px;
  /* Cuando se sabe que habrá aviso, el hueco crece: se hace deslizando en vez de dar un salto. */
  transition: min-height .25s ease;
}
[data-site-header]:empty.lta-con-aviso { min-height: 203px; }
@media (max-width: 820px) {
  [data-site-header]:empty { min-height: 99px; }
  [data-site-header]:empty.lta-con-aviso { min-height: 157px; }
}
@media (max-width: 560px) {
  [data-site-header]:empty.lta-con-aviso { min-height: 153px; }
}
/* El hueco del banner de portada se reserva desde el primer momento (app.js →
   reservarHuecoHeroe): se mantiene la altura del hero y se esconde su contenido, que todavía
   no existe. Antes aparecía de golpe y empujaba 560 px todo lo de abajo. */
.home-hero.is-esperando { visibility: hidden; }
/* Y el hueco del banner se reserva desde el PRIMER PINTADO (no cuando arranca app.js): el
   elemento viene oculto en el HTML y esto le mantiene la altura sin enseñar nada. Cuando app.js
   sabe que no hay banners le pone .is-descartado y el hueco se cierra. */
.home-hero[hidden]:not(.is-descartado) { display: block; visibility: hidden; }

/* Visibilidad del botón del banner por versión (panel → «Botón» → casillas PC / móvil).
   El corte es el de los banners: 820 px, el mismo que cambia imagen, color y tamaño. Va al final
   del fichero para no pelearse con las reglas responsive que hay más arriba. */
@media (min-width: 821px) {
  .home-hero__banner-cta[data-show-desktop="0"] { display: none; }
}
@media (max-width: 820px) {
  .home-hero__banner-cta[data-show-mobile="0"] { display: none; }
}

/* ============================================================================
   PANTALLAS BAJAS: el héroe de la portada entra entero
   ----------------------------------------------------------------------------
   Un portátil de 1080p con Windows al 150 % tiene un viewport de 1280x594 px CSS
   (1536x744 al 125 %, 1366x620 en un 768p). Ahí la cabecera se lleva 203 px
   —franja de promoción 84 + marquesina 38 + cabecera 81— y el héroe medía 560 px
   fijos: el texto del banner acababa por debajo del pliegue (33 px en el de
   «¡Estrenamos tienda online!») y había que hacer scroll para leer el subtítulo.
   Aquí el héroe se acorta y su texto se ajusta para que el mensaje completo
   —título, subtítulo y botón— se lea nada más llegar.
   Solo entra por ALTURA y a partir de 821 px de ancho: de 820 para abajo mandan
   las reglas de móvil/tableta, que ya tienen sus propias alturas. En pantallas
   altas (900 px o más) no cambia absolutamente nada. */
@media (min-width: 821px) and (max-height: 780px) {
  /* Cabecera compacta: la franja (84 px) y la marquesina (38) se llevaban 203 px con el
     héroe, un tercio de un portátil. Bajan a 58 y 28 sin recortar nada: el contador mide
     45 px (caja de 34 + rótulo) y el texto de la marquesina, 12,5 px en una línea de 28. */
  .summer-promo,
  .summer-promo__inner { min-height: 58px; }
  .summer-promo__inner { padding-block: 6px; }
  .summer-countdown__unit b { height: 34px; font-size: 1.15rem; }
  .summer-countdown > i { height: 34px; padding-top: 8px; font-size: .95rem; }
  .summer-countdown__unit small { margin-top: 3px; }
  .announcement { height: 28px; line-height: 28px; }

  /* Y la cabecera blanca del menú: de 80 a 62 px, con el logo de 74 a 52. La variable es la
     que manda (la usan la propia cabecera, el buscador y el desplegable de «Tienda»); lo más
     alto que lleva dentro son 48 px —botón de inicio, selector de idioma, iconos—, así que a 62
     les quedan 7 px de aire arriba y abajo. El ancho del bloque del logo (178 px) se queda: con
     «contain» la imagen se ajusta sola por altura y el hueco es el mismo que ya había. */
  :root { --header-height: 62px; }
  .site-header .brand-logo { height: 52px; }
  /* El hueco que se reserva mientras app.js monta la cabecera tiene que medir lo mismo que
     ella, o la página pega un salto al pintarse (es justo lo que evita la reserva): eran
     119 / 203 px (38 + 81) y ahora son 91 / 149 (28 + 63). */
  [data-site-header]:empty { min-height: 91px; }
  [data-site-header]:empty.lta-con-aviso { min-height: 149px; }

  /* La cabecera del checkout (página propia, sin menú) lleva el mismo logo sobre banda clara.
     Y TODA la página del pago va a dos tercios: es la pantalla donde más aprieta la altura
     (el formulario entero no cabe de ninguna manera) y el cliente pidió reducirla entera.
     Con `zoom: 2 / 3` se reduce todo de una vez —texto, campos, botones, rellenos y anchos
     fijos— sin dejar ninguna regla a medias, que es justo el riesgo de ir declaración por
     declaración. `zoom` es estándar y lo entienden Edge, Chrome, Safari y Firefox 126+; donde
     no se entienda, la página se ve como siempre (no se rompe). */
  body[data-page="checkout"] .checkout-header,
  body[data-page="checkout"] .checkout-shell { zoom: 75%; }   /* 3/4; ojo: «3 / 4» a secas NO es CSS válido y se ignora en silencio */

  /* Y el carrito lateral («Tu carrito», el panel blanco), igual: a 3/4. Aquí la altura sigue
     siendo la de la pantalla (es una persiana, no una página: `height: 100dvh` se mide en px
     del zoom, así que sigue llegando arriba y abajo), pero todo lo de dentro —título, líneas,
     subtotal y el botón de tramitar— baja a 3/4 y el panel se estrecha con ellos (460 → 345). */
  .cart-drawer { zoom: 75%; height: calc(100dvh / .75); }

  /* Los dos popups, más pequeños. El cartel de inicio se comía la pantalla entera (100dvh) y el
     de suscripción llegaba a 554 px de 594 —y encima le sobraban 10 px que se recortaban—.
     Ahora el cartel deja aire alrededor y el de suscripción encoge su contenido para caber
     entero sin scroll. */
  .startup-popup__img { max-width: 86vw; max-height: 82dvh; }
  .home-offer-dialog { width: min(800px, calc(100% - 48px)); max-height: calc(100dvh - 96px); grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); }
  /* La columna de la foto son 376 px de ancho y la imagen es vertical: su alto natural (564)
     estiraba la fila entera y el diálogo se recortaba. Sacándola del flujo, la fila la manda
     el texto y la foto se ajusta a lo que quede (cover). */
  .home-offer__visual { position: relative; min-height: 0; }
  .home-offer__visual img { position: absolute; inset: 0; }
  .home-offer__content { padding: 34px 40px 28px; }
  .home-offer__close { top: 14px; right: 14px; }
  .home-offer__eyebrow { margin-bottom: 12px; }
  .home-offer-dialog h2 { margin-bottom: 14px; font-size: clamp(2.1rem, 2.8vw, 2.8rem); }
  .home-offer-dialog h2 em { margin-top: 8px; }
  .home-offer__copy { margin-bottom: 20px; font-size: .92rem; }
  .home-offer__form { min-height: 52px; margin-bottom: 18px; }
  .home-offer__socials a { width: 36px; height: 36px; }
  .home-offer__socials img { width: 30px; height: 30px; }

  /* Pie de página: a la mitad, todo. El pie mide 484 px (casi una pantalla entera de 594) y
     es el último bloque, así que se reduce a escala 1/2: marca 360x122 → 180x61, titulares
     21,6 → 10,8 px, textos y enlaces 18,56 → 9,28 px, iconos de redes 44 → 22, botones de
     idioma 52x44 → 26x22, y rellenos y separaciones a la mitad (verificado: el pie queda en
     ~242 px). Ojo: el texto se queda en 9,3 px CSS; si algún día se quiere legible pero más
     pequeño, subir a 2/3 en vez de 1/2. */
  .footer-inner { min-height: 0; padding: 18px 0 21px; gap: clamp(16px, 2vw, 36px); }
  .footer-brand { width: 180px; min-width: 180px; height: 61px; margin: 0 0 8px -18px; }
  .footer-brand .brand-logo { width: 180px; height: 61px; }
  /* Los TEXTOS del pie van a dos tercios, no a la mitad (a 1/2 quedaban en 9,3 px, demasiado
     pequeños: el cliente prefirió 2/3). Los titulares acompañan para no perder la jerarquía:
     21,6 → 14,4 px y 18,56 → 12,37 px. Lo demás (marca, iconos, botones, huecos) sigue a 1/2. */
  .footer-col h2,
  .footer-section-title { font-size: calc(1.35rem * 2 / 3); }
  .footer-col p, .footer-col a { font-size: calc(1.16rem * 2 / 3); }
  .footer-col p { margin-bottom: 9px; }
  .footer-links { padding-top: 64px; }
  .footer-links > a { margin-top: 8px; }
  .social-links { padding-top: 64px; gap: 14px clamp(15px, 1.5vw, 25px); }
  .social-links a { width: 22px; height: 22px; }
  .social-links img { width: 20px; height: 20px; }
  .footer-desktop-language__options,
  .footer-social-icons { margin-top: 5px; gap: 3px; }
  .footer-desktop-language__options { gap: 5px; }
  .footer-desktop-language__options button { min-width: 26px; min-height: 22px; font-size: calc(1.16rem * 2 / 3); }

  /* Banda de Newsletter, que va justo encima del pie: a dos tercios (pedido por el cliente),
     para que el final de la página quede coherente. Todo a 2/3: relleno 36/26 → 24/17, título
     clamp(3rem,3.9vw,3.8rem) → clamp(2rem,2.6vw,2.53rem), textos y formulario en la misma
     proporción (campo y botón de 64 → 43 px de alto). */
  .newsletter-inner { padding: 24px 0 17px; gap: clamp(46px, 5.3vw, 80px); }
  .newsletter h2 { font-size: clamp(2rem, 2.6vw, 2.53rem); }
  .newsletter .eyebrow { margin-top: 7px; font-size: clamp(.6rem, .73vw, .7rem); }
  .newsletter-copy { margin-bottom: 7px; font-size: clamp(.53rem, .67vw, .63rem); }
  .newsletter-form { grid-template-columns: minmax(0, 1fr) clamp(113px, 9.3vw, 137px); gap: 12px; }
  .newsletter-form input { height: 43px; padding: 0 21px; font-size: .7rem; }
  .newsletter-form button { min-height: 43px; padding-inline: 16px; font-size: .7rem; }

  /* Cabeceras de las páginas interiores: el mismo contenido con menos aire. Son bloques que
     solo se miran de paso y en un portátil bajo se comen la primera pantalla entera. */
  .shop-catalog-hero { height: 186px; }                 /* «Toda la tienda»: era 230 */
  .shop-intro { padding: 54px 0 50px; }                 /* tienda: era 82 / 76 */
  .contact-hero { min-height: 0; padding: 58px 0 48px; } /* contacto: era min-height 1100 y 82 / 68 */
  .contact-hero h1 { font-size: clamp(3.6rem, 6.4vw, 6rem); }   /* era clamp(5rem, 9vw, 8rem) */
  /* «Nuestro universo»: la banda del vídeo, más baja (una franja de 4,2:1) para que no se coma
     la pantalla, y el titular un tercio más pequeño que en el paso de arriba (106 → 71 px a
     1280 de ancho: 7,8vw × 2/3 = 5,2vw). La banda del puente no se toca: la manda la proporción
     del dibujo y el titular va dentro del arco, que escala con ella. */
  .universe-hero { height: 46vh; min-height: 300px; }
  /* Un tercio menos que en el paso de arriba (106 → 71 px a 1280 de ancho): 7,8vw × 2/3 = 5,2vw. */
  .universe-hero__title { font-size: clamp(2.2rem, 4.4vw, 4rem); }
  .universe-band--video { aspect-ratio: 4.2; }
  .universe-band__title { font-size: clamp(1.8rem, 5.2vw, 4.6rem); }

  /* Y el héroe, más corto y con el texto ajustado para que el mensaje entre entero. */
  .home-hero { height: 470px; }
  .home-hero__copy { padding: clamp(26px, 3vw, 40px) 0 30px; }
  .home-hero__title { margin-bottom: 18px; font-size: clamp(3rem, 5.4vw, 5rem); }
}

/* A 320 px —el mínimo que soporta la web— la tarjeta mide 142 px y el carril del paseo se queda en
   76, mientras que «BEST SELLER» mide 79 (69 de texto + 10 de relleno): se recortaba 3 px. Con 4 px
   de relleno y algo menos de tracking (0,04em) entra entero. Solo pasa en este ancho. */
@media (max-width: 340px) {
  .product-card__label { padding-inline: 4px; letter-spacing: .04em; }
}

/* Flechas de los carruseles de móvil (los que llevan `data-carrusel-movil`): las crea app.js en
   `carruselMovil`. Llevan la pastilla azul de la casa porque van sobre fotos y fondos claros. */
/* Ocultas por defecto: en escritorio no hay carrusel y salian como dos botones sueltos. Solo se ven
   en el bloque de móvil de abajo. */
.carrusel-movil__arrow { display: none; }
@media (max-width: 560px) {
  .carrusel-movil { position: relative; }
  .carrusel-movil__arrow {
    position: absolute;
    z-index: 5;
    top: 50%;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 0;
    /* Sin círculo ni fondo: sobre el blanco de los sellos quedan mejor así (lo pidió Óscar). */
    background: none;
    transform: translateY(-50%);
    cursor: pointer;
  }
  .carrusel-movil__arrow--previous { left: 6px; }
  .carrusel-movil__arrow--next { right: 6px; }
  /* El avance automático y el imán siguen en la rejilla; el marco solo sirve de referencia. */
  .carrusel-movil > [data-carrusel-movil] { margin-inline: 0; }
  .carrusel-movil__arrow .ui-chevron { width: 15px; height: 15px; border-width: 3px; border-color: var(--reactive-500); filter: drop-shadow(0 1px 2px rgba(255, 255, 255, .95)); }
  .carrusel-movil__arrow--previous .ui-chevron { transform: rotate(225deg); }
}

/* Diálogo de cuenta del CARRITO (el del checkout es otro): dos botones iguales que el «Registrarse»
   del otro diálogo, uno debajo del otro y a lo ancho, con la frase encima. */
.cart-account .dialog-inner { display: grid; gap: 0; }
.cart-account__text { margin: 0 0 18px; color: var(--muted); font-size: .84rem; text-align: center; }
.cart-account__actions { display: grid; gap: 12px; }
.cart-account__actions .button { width: 100%; }
/* La frase del descuento, pegada a su botón; y el enlace de invitado, más abajo y con el mismo aspecto
   que el del diálogo del checkout (misma clase .account-guest). */
.cart-account__offer { margin: 10px 0 0; color: var(--muted); font-size: .8rem; text-align: center; }
.cart-account .account-guest { margin-top: 24px; }

/* Los dos botones del diálogo del checkout, uno debajo del otro y a lo ancho (mismo estilo que el
   «Registrarse» de antes: button--primary). */
.account-actions { display: grid; gap: 12px; margin-top: 4px; }
.account-actions .button { width: 100%; }

/* El sello 10 (Certificación FSC) queda solo en su fila: se centra para que la rejilla no se
   desequilibre. Con tres columnas, la 2 es la del medio. */
.universe-compromiso__grid > :last-child { grid-column: 2 / -2; justify-self: center; }

/* Lista de ingredientes clave del backoffice: una fila por ingrediente con el estado de sus datos. */
.ki-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--mist);
  background: #fff; font: inherit; font-size: .88rem; text-align: left; cursor: pointer;
}
.ki-fila:last-child { border-bottom: 0; }
.ki-fila:hover { background: #f6f8fc; }
.ki-fila.is-active { background: var(--mist); font-weight: 600; }
.ki-fila__marcas { display: flex; gap: 6px; }
.ki-marca {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  background: #eef1f7; color: #b6bdcb; flex: none;
}
.ki-marca svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* La T de la descripción, en la serif de la casa */
.ki-marca__te { font-family: var(--serif), Georgia, serif; font-size: .95rem; line-height: 1; margin-top: -.06em; }
.ki-marca--si { background: #e3f4e8; color: #1f7a3d; }

/* La nota del descuento de registro, en el diálogo de la cuenta: la OFERTA manda y la caducidad es
   la letra pequeña.
   OJO CON LA ESPECIFICIDAD (2026-10-02): la regla `.account-register span` (0,1,1) gana a
   `.promo-remate` (0,1,0), así que el <span> del remate heredaba `.74rem` y salía MÁS GRANDE que la
   oferta (11,84 px frente a 9,7 px) — justo al revés de lo que se entiende al leerlo (lo vio Óscar).
   De ahí que el remate se ajuste aquí, con una regla más específica, en vez de tocar la genérica. */
.account-register__nota { display: block; font-style: normal; font-size: 1em; color: var(--muted, #5b6478); }
.account-register__nota .promo-remate { font-size: .8em; font-weight: 400; opacity: .8; }

/* El remate de caducidad del descuento, en su propio renglón. */
.promo-remate { display: block; font-size: .86em; font-weight: 400; opacity: .85; }