/* ==========================================================================
   TQMA subsite
   Single stylesheet, loaded only on TQMA screens and scoped to `body.tqma`.
   It sits on top of the theme's main.css (which the subsite still needs for
   the shared footer), so every selector is `tqma-` prefixed and the element
   resets are wrapped in :where() to keep their specificity at zero.
   ========================================================================== */

/* --------------------------------------------------------------- Tokens */
body.tqma {
  --tqma-blue: #041888;
  --tqma-red: #d0103a;
  --tqma-red-bright: #e30a3c;
  --tqma-red-deep: #8e0b24;
  --tqma-crimson: #b90731;
  --tqma-orange: #ffa100;
  --tqma-orange-light: #ffc63f;
  --tqma-gold: #e9a800;
  --tqma-cream: #fff5e5;
  /* Pillar colours. Global rather than section-scoped: the hero, the plate,
     the pyramid, the menus and the three pillar pages all draw on them. */
  --tqma-green: #83bf3a;
  --tqma-pink: #ec1544;
  --tqma-teal: #01524f;
  --tqma-cream-soft: #fffcf8;
  --tqma-ink: #2b2b2b;
  --tqma-muted: #6e6e6e;
  --tqma-white: #fff;

  --tqma-font-display: "bree", "Bree Serif", "Work Sans", sans-serif;
  --tqma-font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tqma-font-script: "Caveat", "Segoe Script", cursive;
  --tqma-font-fredoka: "Fredoka", "Work Sans", sans-serif;
  --tqma-font-quicksand: "Quicksand", "Work Sans", sans-serif;

  --tqma-container: 1360px;
  --tqma-gutter: 24px;
  --tqma-radius: 18px;
  /* The theme header's footprint — its 24px top padding plus the 70px bar.
     Sections that must clear it add this to their own top padding. */
  --tqma-header-h: 94px;
  --tqma-curve: 46px;
}

/* The subsite wears the theme's header with the TQMA logo swapped in. The theme
   prints width="200" height="60" for a logo whose artwork is square-ish; ours is
   a wide lockup, so it is sized by height and left to find its own width. */
body.tqma .header__logo img {
  width: auto;
  height: 60px;
}

/* ---------------------------------------------------------------- Reset */
body.tqma *,
body.tqma *::before,
body.tqma *::after {
  box-sizing: border-box;
}

body.tqma {
  margin: 0;
  font-family: var(--tqma-font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tqma-ink);
  background: var(--tqma-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The element resets below are wrapped in :where() so they carry only type
   specificity. Written as `body.tqma button` they would score higher than a
   single-class component rule and quietly strip the background off every
   .tqma-btn, carousel arrow and hero dot. */
:where(body.tqma) img {
  max-width: 100%;
  height: auto;
  display: block;
}

:where(body.tqma) :is(h1, h2, h3, h4, p, figure, fieldset) {
  margin: 0;
  padding: 0;
}

:where(body.tqma) fieldset {
  border: 0;
}

:where(body.tqma) ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(body.tqma) a {
  color: inherit;
  text-decoration: none;
}

:where(body.tqma) button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

:where(body.tqma) input {
  font: inherit;
}

body.tqma :focus-visible {
  outline: 3px solid var(--tqma-orange);
  outline-offset: 3px;
}

.tqma-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tqma-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--tqma-white);
  color: var(--tqma-red);
  font-weight: 700;
}

.tqma-skip:focus {
  left: 12px;
  top: 12px;
}

/* --------------------------------------------------------------- Layout */
.tqma-container {
  width: 100%;
  max-width: var(--tqma-container);
  margin: 0 auto;
  padding: 0 var(--tqma-gutter);
}

.tqma-section-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}

.tqma-section-head__title {
  font-family: var(--tqma-font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.15;
  font-weight: 700;
  color: var(--tqma-ink);
}

.tqma-section-head__title em {
  font-style: normal;
  color: var(--tqma-red-bright);
}

.tqma-section-head__text {
  margin-top: 16px;
  font-size: clamp(15px, 1.3vw, 19px);
  color: var(--tqma-muted);
}

/* -------------------------------------------------------------- Buttons */
.tqma-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  color: var(--tqma-white);
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.tqma-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.tqma-btn--orange,
.tqma-btn--yellow {
  background: linear-gradient(180deg, #ffb52a 0%, #ff9800 100%);
  box-shadow: 0 4px 12px rgba(255, 152, 0, .35);
}

.tqma-btn--red {
  background: var(--tqma-red);
  box-shadow: 0 6px 18px rgba(208, 16, 58, .3);
}


/* ----------------------------------------------------------------- Hero */
.tqma-hero {
  position: relative;
  background: var(--tqma-blue);
}

/* Fixed band, so the banner reads the same height whatever ratio the uploaded
   artwork happens to have. */
.tqma-hero__slides {
  position: relative;
  aspect-ratio: 1440 / 545;
  overflow: hidden;
}

.tqma-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}

.tqma-hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.tqma-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.tqma-hero__link {
  display: block;
  height: 100%;
}

/* The strip's bottom bulges into the section below. The curve is drawn by the
   pseudo-element so the sliver it uncovers at each edge is the *next* section's
   red rather than the hero's blue backdrop. */
.tqma-hero__strip {
  position: relative;
  z-index: 2;
  background: #e00a3c;
  border-top: 6px solid var(--tqma-gold);
}

.tqma-hero__strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tqma-crimson);
  border-bottom-left-radius: 50% var(--tqma-curve);
  border-bottom-right-radius: 50% var(--tqma-curve);
}

/* Three tracks so the dots sit on the page centre line, not the centre of
   whatever space the badge and claim leave over. */
.tqma-hero__strip-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: 92px;
  padding-bottom: 10px;
}

.tqma-hero__badge {
  justify-self: start;
  padding: 12px 26px;
  font-family: var(--tqma-font-display);
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 700;
  font-style: italic;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tqma-white);
  background: linear-gradient(180deg, #dfa310 0%, #c2870a 100%);
  clip-path: polygon(2% 0, 98% 4%, 100% 96%, 4% 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.tqma-hero__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto;
}

.tqma-hero__dots button {
  width: 15px;
  height: 15px;
  padding: 0;
  border-radius: 999px;
  background: var(--tqma-white);
  opacity: .95;
  transition: width .25s ease;
}

.tqma-hero__dots button.is-active {
  width: 62px;
}

.tqma-hero__claim {
  justify-self: end;
  width: 130px;
}

/* ------------------------------------------------------------ Assistant */
.tqma-assistant {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% 30%, #e30a3c 0%, #c9082f 55%, #ae0629 100%);
  color: var(--tqma-white);
}

.tqma-assistant__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  align-items: end;
  gap: 40px;
  padding-top: 70px;
}

.tqma-assistant__content {
  padding: 20px 0 90px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.tqma-assistant__dots {
  display: block;
  width: 66px;
  height: 14px;
  margin: 0 auto 34px;
  background:
    radial-gradient(circle 7px at 7px 4px, var(--tqma-orange) 98%, transparent 100%),
    radial-gradient(circle 6px at 31px 10px, var(--tqma-orange) 98%, transparent 100%),
    radial-gradient(circle 6px at 52px 8px, var(--tqma-orange) 98%, transparent 100%);
  background-repeat: no-repeat;
}

.tqma-assistant__title {
  font-family: var(--tqma-font-display);
  font-size: clamp(26px, 2.7vw, 38px);
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
  margin-bottom: 34px;
}

.tqma-assistant__interests {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-bottom: 22px;
}

.tqma-interest {
  position: relative;
}

.tqma-interest input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.tqma-interest label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 148px;
  min-height: 138px;
  padding: 18px 12px;
  border: 2px dashed rgba(255, 255, 255, .85);
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.tqma-interest label:hover {
  background: rgba(255, 255, 255, .1);
}

.tqma-interest label img {
  width: auto;
  height: 40px;
}

/* Check badge, shown when the interest is selected. */
.tqma-interest label::after {
  content: "";
  position: absolute;
  top: -13px;
  right: -11px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--tqma-orange);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s ease, transform .2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4.5 4.5L19 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 18px;
  background-position: center;
  background-repeat: no-repeat;
}

.tqma-interest input:checked + label {
  border-style: solid;
  background: rgba(255, 255, 255, .08);
}

.tqma-interest input:checked + label::after {
  opacity: 1;
  transform: scale(1);
}

.tqma-interest input:focus-visible + label {
  outline: 3px solid var(--tqma-orange-light);
  outline-offset: 3px;
}

.tqma-assistant__terms {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

.tqma-assistant__terms input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.tqma-assistant__terms label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  cursor: pointer;
}

.tqma-assistant__terms a {
  text-decoration: underline;
}

.tqma-switch {
  position: relative;
  flex: none;
  width: 48px;
  height: 26px;
  border-radius: 999px;
  background: var(--tqma-white);
  transition: background .2s ease;
}

.tqma-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #c9c9c9;
  transition: transform .2s ease, background .2s ease;
}

.tqma-assistant__terms input:checked + label .tqma-switch::after {
  transform: translateX(22px);
  background: #17a24a;
}

.tqma-assistant__field {
  position: relative;
  background: var(--tqma-white);
  border-radius: 14px;
  padding: 20px 22px 62px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
}

.tqma-assistant__field input {
  width: 100%;
  border: 0;
  font-size: 17px;
  color: var(--tqma-ink);
  background: none;
}

.tqma-assistant__field input::placeholder {
  color: #9b9b9b;
}

.tqma-assistant__field input:focus {
  outline: none;
}

.tqma-assistant__send {
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--tqma-orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 20l18-8L3 4v6l11 2-11 2v6z' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 20px;
  background-position: 51% 50%;
  background-repeat: no-repeat;
  transition: transform .18s ease;
}

.tqma-assistant__send:hover {
  transform: scale(1.08);
}

.tqma-assistant__form.is-locked .tqma-assistant__field {
  opacity: .55;
  pointer-events: none;
}

.tqma-assistant__figure {
  align-self: end;
  justify-self: center;
}

.tqma-assistant__figure img {
  width: auto;
  max-height: 620px;
  margin: 0 auto;
}

/* ------------------------------------------------------------- Products */
.tqma-products {
  padding: clamp(56px, 6vw, 90px) 0 clamp(50px, 5vw, 80px);
  background: var(--tqma-white);
}

.tqma-products .tqma-carousel {
  margin-top: 46px;
}

.tqma-product-card {
  display: block;
}

/* The category terms carry photographs, so the image fills the card. The
   gradient stays as the backdrop for transparent pack shots. */
.tqma-product-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  background: linear-gradient(165deg, #ffe7ab 0%, #ffcc63 45%, #ffab1f 100%);
  overflow: hidden;
}

.tqma-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.tqma-product-card:hover .tqma-product-card__media img {
  transform: scale(1.04);
}

.tqma-product-card__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 18px 22px 18px 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffb52a 0%, #ff9800 100%);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 500;
  color: var(--tqma-white);
}

.tqma-product-card__arrow {
  flex: none;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 999px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 8l8 8m0 0V9m0 7H9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .2s ease;
}

.tqma-product-card:hover .tqma-product-card__arrow {
  transform: translate(2px, 2px);
}

/* ------------------------------------------------------------------ IMC */
.tqma-imc {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(520px, 52vw, 720px);
  padding: 70px 0;
  background-image: var(--tqma-imc-bg);
  background-size: cover;
  background-position: center;
  border-bottom-left-radius: 50% var(--tqma-curve);
  border-bottom-right-radius: 50% var(--tqma-curve);
  overflow: hidden;
}

.tqma-imc__card {
  width: min(620px, 100%);
  padding: clamp(30px, 3.4vw, 52px) clamp(26px, 3.2vw, 54px) clamp(38px, 4vw, 60px);
  border-radius: 12px 12px 100px 12px;
  background: linear-gradient(155deg, #cf0f38 0%, #a80c2b 55%, #870a20 100%);
  color: var(--tqma-white);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}

.tqma-imc__title {
  font-family: var(--tqma-font-display);
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 700;
  margin-bottom: 20px;
}

.tqma-imc__text {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .94);
  margin-bottom: 34px;
}

.tqma-imc__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: 28px;
}

.tqma-field {
  flex: 1 1 200px;
}

.tqma-field label {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
}

.tqma-field input {
  width: 100%;
  height: 46px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: var(--tqma-white);
  font-size: 15px;
}

.tqma-field input::placeholder {
  color: rgba(255, 255, 255, .65);
}

.tqma-field input:focus {
  outline: none;
  border-color: var(--tqma-white);
  background: rgba(255, 255, 255, .2);
}

.tqma-imc__result {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 600;
  min-height: 24px;
}

.tqma-imc__result b {
  font-size: 22px;
}

/* -------------------------------------------------------------- Recipes */
.tqma-recipes {
  padding: clamp(50px, 5vw, 80px) 0 clamp(56px, 6vw, 90px);
  background: linear-gradient(180deg, var(--tqma-cream-soft) 0%, #ffefd6 100%);
}

.tqma-recipes .tqma-carousel {
  margin-top: 42px;
}

.tqma-recipes__cta {
  margin-top: 44px;
  text-align: center;
}

.tqma-recipe-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--tqma-white);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .09);
  transition: transform .22s ease, box-shadow .22s ease;
}

.tqma-recipe-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .13);
}

.tqma-recipe-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.tqma-recipe-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tqma-recipe-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 20px 24px;
  text-align: center;
}

.tqma-recipe-card__title {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--tqma-ink);
  margin-bottom: 18px;
}

.tqma-recipe-card__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: auto 0 20px;
  padding: 14px 8px;
  border-radius: 10px;
  background: var(--tqma-cream);
}

.tqma-recipe-card__meta li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tqma-recipe-card__meta img {
  width: auto;
  height: 26px;
}

.tqma-recipe-card__meta-label {
  font-size: 12px;
  color: var(--tqma-muted);
}

.tqma-recipe-card__meta-value {
  font-size: 19px;
  font-weight: 600;
  color: var(--tqma-ink);
}

.tqma-recipe-card .tqma-btn {
  width: 100%;
  font-size: 15px;
  padding: 13px 18px;
}

/* ------------------------------------------------------------- Wellness */
.tqma-wellness {
  padding: clamp(56px, 6vw, 92px) 0 clamp(50px, 5vw, 80px);
  background: var(--tqma-white);
}

.tqma-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, clamp(190px, 21vw, 300px));
  gap: 20px;
  margin-top: 44px;
}

/* The Blog tile is the same object as a mosaic card — only its placement
   differs — so the two share every rule below rather than being restyled. */
.tqma-mosaic__card,
.tqma-post-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  min-height: 180px;
  background: #ddd;
}

.tqma-mosaic__card--1 {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.tqma-mosaic__card--2 {
  grid-column: 2;
  grid-row: 1;
}

.tqma-mosaic__card--3 {
  grid-column: 2;
  grid-row: 2;
}

.tqma-mosaic__card--4 {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.tqma-mosaic__image,
.tqma-post-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.tqma-mosaic__card:hover .tqma-mosaic__image,
.tqma-post-card:hover .tqma-post-card__image {
  transform: scale(1.05);
}

.tqma-mosaic__card::after,
.tqma-post-card::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .62) 100%);
}

.tqma-mosaic__title,
.tqma-post-card__title {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 74px;
  bottom: 22px;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 600;
  line-height: 1.22;
  color: var(--tqma-white);
}

.tqma-mosaic__arrow,
.tqma-post-card__arrow {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 20px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background-color: var(--tqma-orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 8l8 8m0 0V9m0 7H9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 22px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .2s ease;
}

.tqma-mosaic__card:hover .tqma-mosaic__arrow,
.tqma-post-card:hover .tqma-post-card__arrow {
  transform: translate(2px, 2px);
}

/* --------------------------------------------------------------- Social */
.tqma-social {
  padding-top: clamp(40px, 4.6vw, 70px);
  background: var(--tqma-white);
}

/* A white wash over the top tenth of the photo so it fades out of the white
   section above instead of starting on a hard edge. */
.tqma-social__scene {
  margin-top: 26px;
  min-height: clamp(260px, 28vw, 420px);
  background-image:
    linear-gradient(to bottom, var(--tqma-white) 0%, rgba(255, 255, 255, 0) 10%),
    var(--tqma-social-bg);
  background-size: 100% 100%, cover;
  background-position: top center, center bottom;
  background-repeat: no-repeat, no-repeat;
}

.tqma-social__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 56px);
  padding: clamp(40px, 5vw, 76px) var(--tqma-gutter) 0;
}

.tqma-social__icon {
  display: block;
  transition: transform .22s ease;
}

.tqma-social__icon img {
  width: clamp(58px, 6vw, 88px);
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .22));
}

.tqma-social__icon:hover {
  transform: translateY(-5px);
}

/* ------------------------------------------------------------- Carousel */
/* The carousel is held to the container width so the track — which is itself
   the scroll container — clips at the container edges. That way exactly
   --tqma-per-view slides show and nothing bleeds into the page gutter.
   .tqma-carousel itself stays unclipped so the arrows can overhang it. */
.tqma-carousel {
  position: relative;
  max-width: var(--tqma-container);
  margin: 0 auto;
  padding: 0 var(--tqma-gutter);
  --tqma-per-view: 3;
  --tqma-gap: 24px;
}

/* Fractional values leave the next slide half-visible, which is how the recipe
   row is drawn in the design.
   `="1"` is intentionally absent from the responsive overrides below: a
   one-up carousel (the plate sampler) stays one-up at every width. */
.tqma-carousel[data-per-view="1"] { --tqma-per-view: 1; }
.tqma-carousel[data-per-view="1.2"] { --tqma-per-view: 1.2; }
.tqma-carousel[data-per-view="2"] { --tqma-per-view: 2; }
.tqma-carousel[data-per-view="3"] { --tqma-per-view: 3; }
.tqma-carousel[data-per-view="3.5"] { --tqma-per-view: 3.5; }
.tqma-carousel[data-per-view="4"] { --tqma-per-view: 4; }

.tqma-carousel__track {
  display: flex;
  gap: var(--tqma-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;

  /* Vertical room for the card shadows, which would otherwise be clipped by
     the scroll container. */
  padding: 8px 0 26px;
}

.tqma-carousel__track::-webkit-scrollbar {
  display: none;
}

/* The track's content box is exactly the container's inner width, so a
   percentage here divides the row the same way the grid above it does. */
.tqma-carousel__slide {
  flex: none;
  scroll-snap-align: start;
  width: calc(
    (100% - var(--tqma-gap) * (var(--tqma-per-view) - 1)) / var(--tqma-per-view)
  );
}

.tqma-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 54px;
  height: 54px;
  margin-top: -27px;
  border-radius: 999px;
  background-color: var(--tqma-white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
  transition: transform .18s ease, opacity .18s ease;
}

.tqma-carousel__arrow:hover {
  transform: scale(1.08);
}

.tqma-carousel__arrow[disabled] {
  opacity: .35;
  cursor: default;
}

.tqma-carousel__arrow--prev {
  left: -6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='%23ffa100' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tqma-carousel__arrow--next {
  right: -6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23ffa100' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Once the container stops being centred, the negative offset would push the
   arrows past the viewport edge, so pin them just inside it. Must come after
   the two rules above — same specificity, so source order decides. */
@media (max-width: 1408px) {
  .tqma-carousel__arrow--prev {
    left: 2px;
  }

  .tqma-carousel__arrow--next {
    right: 2px;
  }
}

.tqma-carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.tqma-carousel__dots button {
  width: 46px;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  background: #e6e6e6;
  transition: background .2s ease;
}

.tqma-carousel__dots button.is-active {
  background: #ec1544;
}

/* ==========================================================================
   Vive bien, vive saludable
   ========================================================================== */

/* ----------------------------------------------------------- VB · hero */
.tqma-vb-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(520px, 46vw, 660px);
  padding: calc(var(--tqma-header-h) + 70px) 0 60px;
  background-image: var(--tqma-vb-hero-bg);
  background-size: cover;
  background-position: center;
}

.tqma-vb-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  align-items: center;
  gap: 40px;
  width: 100%;
}

.tqma-vb-hero__title {
  max-width: 620px;
  font-family: var(--tqma-font-display);
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.14;
  font-weight: 700;
  color: var(--tqma-white);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .3);
}

.tqma-vb-hero__claim {
  display: block;
  margin-top: clamp(30px, 4vw, 70px);
}

.tqma-vb-hero__claim img {
  width: clamp(110px, 11vw, 150px);
  height: auto;
}

.tqma-pillars {
  display: flex;
  flex-direction: column;
  /* Boxes are narrower than the column, so they hug its right edge as in the
     design rather than stretching across it. */
  align-items: flex-end;
  gap: 18px;
}

.tqma-pillar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 200px;
  min-height: 92px;
  padding: 16px 40px 16px 62px;
  border-radius: 14px;
  color: var(--tqma-white);
  font-family: var(--tqma-font-fredoka);
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 600;
  line-height: 1.2;
  transition: transform .2s ease;
}

.tqma-pillar:hover {
  transform: translateX(-4px);
}

.tqma-pillar--green { background: var(--tqma-green); }
.tqma-pillar--orange { background: var(--tqma-orange); }
.tqma-pillar--red { background: var(--tqma-pink); }

/* The badge overhangs the card's left edge, as in the design. */
.tqma-pillar__letter {
  position: absolute;
  left: -34px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border: 3px solid var(--tqma-white);
  border-radius: 999px;
  background: inherit;
  font-family: var(--tqma-font-display);
  font-size: 30px;
  line-height: 1;
}

/* The letters ship as artwork. Sizing by height rather than width keeps the
   three optically level, since each glyph has its own aspect ratio. */
.tqma-pillar__letter img {
  width: auto;
  height: 32px;
}

.tqma-pillar__arrow {
  position: absolute;
  right: 16px;
  bottom: 12px;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 8l8 8m0 0V9m0 7H9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%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 24 24'%3E%3Cpath d='M8 8l8 8m0 0V9m0 7H9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------------------------------------------------- VB · plato ideal */
.tqma-plate {
  padding: clamp(50px, 5.5vw, 88px) 0 clamp(40px, 4vw, 64px);
  background: var(--tqma-white);
}

/* The sky sits behind the first section under the hero, on Vive bien and on the
   three pillars alike. The artwork already fades to white at its foot, so it
   needs no gradient of its own — it just stops, over a white ground. */
body.tqma--vive-bien .tqma-plate,
body.tqma--pilar .tqma-pilar-reasons {
  background: url("../img/pronaca-sky-1.jpg") no-repeat top center / 100% auto var(--tqma-white);
}

.tqma-plate__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 2vw, 34px);
  margin-top: clamp(28px, 3vw, 48px);
}

.tqma-plate__col {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.tqma-plate__col--right {
  justify-content: center;
}

.tqma-plate__claim {
  display: block;
}

.tqma-plate__claim img {
  width: clamp(150px, 15vw, 210px);
  height: auto;
}

.tqma-plate__stage {
  text-align: center;
}

.tqma-plate__image {
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
}

.tqma-plate__hint {
  margin-top: 10px;
  font-family: var(--tqma-font-script);
  font-size: clamp(21px, 1.9vw, 27px);
  line-height: 1.2;
  color: #b6b6b6;
}

.tqma-plate-card {
  padding: clamp(20px, 2vw, 30px) clamp(20px, 2.2vw, 34px);
  border-radius: 20px;
  color: var(--tqma-white);
  font-family: var(--tqma-font-fredoka);
}

.tqma-plate-card--red { background: var(--tqma-pink); }
.tqma-plate-card--orange { background: var(--tqma-orange); }
.tqma-plate-card--green { background: var(--tqma-green); }

.tqma-plate-card__title {
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 600;
  margin-bottom: 10px;
}

.tqma-plate-card__body {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.tqma-plate-card__value {
  font-family: var(--tqma-font-quicksand);
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1;
  font-weight: 700;
}

.tqma-plate-card__value span {
  font-size: .42em;
  margin-left: 4px;
}

.tqma-plate-card__text {
  flex: 1 1 160px;
  font-size: 14px;
  line-height: 1.35;
}

/* ------------------------------------------- VB · grupos de alimentos */
.tqma-pyramid {
  position: relative;
  padding: clamp(50px, 5.5vw, 90px) 0 clamp(40px, 4.5vw, 70px);
  background: linear-gradient(180deg, var(--tqma-cream-soft) 0%, #fff3e0 100%);
  overflow: hidden;
}

/* The row is given the design's height rather than being sized by the buttons
   alone: the figure is scaled from it, and a short row would leave her too
   small to reach the buttons she is meant to sit behind. */
.tqma-pyramid__layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: end;
  gap: clamp(16px, 2vw, 32px);
  min-height: clamp(540px, 60vw, 860px);
  margin-top: clamp(24px, 3vw, 44px);
}

/* She is taken out of flow and anchored to the section itself, so she runs to
   the section's bottom edge and is cropped there rather than sizing the row.
   She sits on the base layer, letting the buttons overlap her. */
.tqma-pyramid__figure {
  position: absolute;
  z-index: 0;
  left: max(
    var(--tqma-gutter),
    calc((100% - var(--tqma-container)) / 2 + var(--tqma-gutter))
  );
  top: clamp(40px, 6vw, 96px);
  bottom: 0;
  pointer-events: none;
}

.tqma-pyramid__figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  /* Taller than the space available, so the section crops her mid-calf. */
  height: calc(100% + 110px);
  max-height: none;

  /* The figure is out of flow and so has no width of its own; without this the
     reset's `max-width: 100%` would resolve to 0 and collapse her. */
  max-width: none;
}

/* The heading is static content, which a positioned element paints over, so it
   needs its own layer to stay in front of her. */
.tqma-pyramid .tqma-section-head {
  position: relative;
  z-index: 1;
}

/* The figure is out of flow, so the remaining items are placed explicitly —
   otherwise they would slide into the first column. */
.tqma-pyramid__controls {
  grid-column: 2;
}

.tqma-pyramid__stage {
  grid-column: 3;
}

.tqma-pyramid__controls,
.tqma-pyramid__stage {
  position: relative;
  z-index: 1;
}

.tqma-pyramid__controls {
  align-self: start;
  padding-top: clamp(20px, 3vw, 48px);
}

.tqma-pyramid__buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 16px;
}

.tqma-food-btn {
  position: relative;
  min-height: 96px;
  padding: 36px 16px 16px;
  border-radius: 16px;
  color: var(--tqma-white);
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.tqma-food-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.tqma-food-btn.is-active {
  box-shadow: 0 0 0 3px var(--tqma-white), 0 0 0 6px currentColor;
}

/* The food icon straddles the top edge of its button. */
.tqma-food-btn__icon {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 58px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .18));
  transition: transform .2s ease;
}

.tqma-food-btn:hover .tqma-food-btn__icon {
  transform: translateX(-50%) scale(1.08);
}

.tqma-food-btn__label {
  display: block;
}

.tqma-food-btn--frutas { background: #ff4040; }
.tqma-food-btn--vegetales { background: #3c9718; }
.tqma-food-btn--proteinas { background: #b47c42; }
.tqma-food-btn--lacteos { background: #f2a500; }
.tqma-food-btn--grasas { background: #c8b405; }
.tqma-food-btn--cereales { background: #e07f0d; }

/* The illustration hangs from the top of the row, dropped slightly so it sits
   below the heading rather than level with it. */
.tqma-pyramid__stage {
  align-self: start;
  margin-top: clamp(24px, 3.5vw, 60px);
  text-align: center;
}

.tqma-pyramid__image {
  width: 100%;
  max-width: 620px;
  height: auto;
  margin-inline: auto;
}

.tqma-pyramid__claim {
  display: block;
  margin-top: 6px;
}

.tqma-pyramid__claim img {
  width: clamp(240px, 26vw, 380px);
  height: auto;
  margin-inline: auto;
}

.tqma-pyramid__note {
  max-width: 420px;
  margin: 26px 0 0 auto;
  padding: clamp(18px, 2vw, 28px);
  border-radius: 18px;
  background: var(--tqma-white);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .09);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.45;
  text-align: center;
}

.tqma-pyramid__note p {
  margin: 0;
}

/* --------------------------------------------------- VB · menús diarios */
.tqma-menus {
  padding: clamp(50px, 5.5vw, 90px) 0 clamp(44px, 4.5vw, 72px);
  background: var(--tqma-white);
}

.tqma-carousel--menus {
  margin-top: clamp(46px, 5vw, 74px);
}

/* Room for the day tab, which straddles the top edge of each card. */
.tqma-carousel--menus .tqma-carousel__track {
  padding-top: 32px;
}

.tqma-menu-card {
  position: relative;
  padding: 40px 16px 26px;
  border-radius: 20px;
}

/* One tint per day. Lunes, martes and miércoles are the design's own values;
   the remaining four continue the same construction — a saturated tab over a
   pale card — because the design only draws the first three. The old
   colour-named modifiers stay as aliases for anything already set in ACF. */
.tqma-menu-card--lunes,
.tqma-menu-card--blue { background: #c7ebff; }

.tqma-menu-card--martes,
.tqma-menu-card--green { background: #c5f6b1; }

.tqma-menu-card--miercoles,
.tqma-menu-card--amber { background: #f6e2b1; }

.tqma-menu-card--jueves { background: #ffe0c2; }
.tqma-menu-card--viernes { background: #ffd2db; }
.tqma-menu-card--sabado { background: #bfede7; }
.tqma-menu-card--domingo { background: #dfd5f6; }

/* The day sits on a tab that straddles the top edge of the card. */
.tqma-menu-card__tab {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  padding: 11px 26px;
  border-radius: 999px;
  color: var(--tqma-white);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.tqma-menu-card--lunes .tqma-menu-card__tab,
.tqma-menu-card--blue .tqma-menu-card__tab { background: #00a4ff; }

.tqma-menu-card--martes .tqma-menu-card__tab,
.tqma-menu-card--green .tqma-menu-card__tab { background: #7acd57; }

.tqma-menu-card--miercoles .tqma-menu-card__tab,
.tqma-menu-card--amber .tqma-menu-card__tab { background: #dba418; }

.tqma-menu-card--jueves .tqma-menu-card__tab { background: #ff8a2b; }
.tqma-menu-card--viernes .tqma-menu-card__tab { background: #ec1544; }
.tqma-menu-card--sabado .tqma-menu-card__tab { background: #16a79a; }
.tqma-menu-card--domingo .tqma-menu-card__tab { background: #8a6bd1; }

.tqma-menu-card__media {
  aspect-ratio: 16 / 11;
  border-radius: 12px;
  overflow: hidden;
}

.tqma-menu-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tqma-menu-card__meals {
  margin: 18px 0 0;
  padding: 22px 20px;
  border-radius: 14px;
  background: var(--tqma-white);
}

.tqma-menu-card__meals > div {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr;
  gap: 6px 14px;
}

.tqma-menu-card__meals > div + div {
  margin-top: 14px;
}

.tqma-menu-card__meals dt {
  font-size: 15px;
  font-weight: 700;
}

.tqma-menu-card__meals dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
}

.tqma-menu-card__link {
  position: absolute;
  inset: 0;
  border-radius: 20px;
}

/* Three tracks so the button sits on the page centre line, with the claim
   floating to its left rather than shifting it off-centre. */
.tqma-menus__footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 50px);
  margin-top: clamp(34px, 4vw, 60px);
}

.tqma-menus__claim {
  justify-self: end;
}

.tqma-menus__claim img {
  width: clamp(190px, 21vw, 300px);
  height: auto;
}

/* ==========================================================================
   Recetas (archive)
   ========================================================================== */

/* Shared with the Blog hero so the two red bands cannot drift apart. */
.tqma-rec-hero,
.tqma-blog-hero {
  padding: calc(var(--tqma-header-h) + 56px) 0 clamp(46px, 5vw, 74px);
  background: var(--tqma-red);
  color: var(--tqma-white);
  text-align: center;
  border-bottom-left-radius: 50% var(--tqma-curve);
  border-bottom-right-radius: 50% var(--tqma-curve);
}

.tqma-rec-hero__title {
  font-family: var(--tqma-font-display);
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.15;
  font-weight: 700;
}

.tqma-rec-hero__subtitle {
  margin-top: 14px;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 600;
}

/* ---------------------------------------------------- Recetas · filters */
.tqma-rec-filters {
  padding: clamp(28px, 3.4vw, 52px) 0 clamp(20px, 2.4vw, 34px);
  background: var(--tqma-cream);
}

.tqma-rec-filters__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(10px, 1.4vw, 20px);
}

.tqma-rec-filters__bar.is-loading {
  opacity: .6;
  pointer-events: none;
}

.tqma-select {
  position: relative;
  flex: 0 1 auto;
}

.tqma-select select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 176px;
  height: 60px;
  padding: 0 52px 0 26px;
  border: 0;
  border-radius: 999px;
  background-color: #f7d9a6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3Cpath d='M8 10.5l4 4 4-4' fill='none' stroke='%237a5a1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 32px;
  color: #7a5a1e;
  font-size: 17px;
  cursor: pointer;
}

.tqma-select select:focus-visible {
  outline: 3px solid var(--tqma-orange);
  outline-offset: 2px;
}

.tqma-rec-search {
  position: relative;
  flex: 1 1 320px;
  display: flex;
  align-items: center;
  height: 60px;
  padding-left: 26px;
  border-radius: 999px;
  background: var(--tqma-white);
}

.tqma-rec-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 17px;
  color: var(--tqma-ink);
}

.tqma-rec-search input::placeholder {
  color: #b3b3b3;
}

.tqma-rec-search input:focus {
  outline: none;
}

.tqma-rec-search .tqma-btn {
  flex: none;
  height: 100%;
  padding: 0 34px;
  font-size: 17px;
  box-shadow: none;
}

.tqma-rec-search .tqma-btn:hover {
  transform: none;
}

/* ------------------------------------------------------- Recetas · rows */
.tqma-rec-rows {
  padding: clamp(24px, 3vw, 44px) 0 clamp(50px, 5.5vw, 88px);
  background: linear-gradient(180deg, var(--tqma-cream) 0%, var(--tqma-cream-soft) 55%, var(--tqma-white) 100%);
}

.tqma-rec-row + .tqma-rec-row {
  margin-top: clamp(34px, 4vw, 60px);
}

.tqma-rec-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: clamp(18px, 2vw, 30px);
}

.tqma-rec-row__title {
  font-family: var(--tqma-font-display);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
  font-weight: 700;
  color: var(--tqma-ink);
}

.tqma-rec-row__title em {
  font-style: normal;
  color: var(--tqma-red);
}

.tqma-rec-row__link {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--tqma-ink);
  text-decoration: none;
  white-space: nowrap;
}

.tqma-rec-row__link:hover {
  color: var(--tqma-red);
  text-decoration: underline;
}

.tqma-rec-rows__cta {
  margin-top: clamp(36px, 4vw, 62px);
  text-align: center;
}

/* ---------------------------------------------------- Recetas · results */
.tqma-rec-results__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: clamp(18px, 2vw, 30px);
}

.tqma-rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(18px, 2vw, 28px);
}

.tqma-rec-grid:empty::after {
  content: "No encontramos recetas con esos filtros.";
  color: var(--tqma-muted);
}

/* ==========================================================================
   Receta (single)
   ========================================================================== */

body.tqma--receta {
  --tqma-tan: #f8d59f;
  --tqma-facts: #fff1d9;
  --tqma-panel: #f7f7f7;
  --tqma-box: #e5e5e5;
}

.tqma-receta-hero {
  padding: calc(var(--tqma-header-h) + 34px) 0 clamp(40px, 4vw, 64px);
  background: var(--tqma-white);
}

/* ------------------------------------------------------ Receta · regresar */
.tqma-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(22px, 2.6vw, 38px);
  font-size: 17px;
  font-weight: 600;
  color: var(--tqma-red);
}

.tqma-back__icon {
  width: 22px;
  height: 22px;
  transition: transform .18s ease;
}

.tqma-back:hover .tqma-back__icon {
  transform: translateX(-4px);
}

/* ---------------------------------------------------------- Receta · hero */
.tqma-receta-hero__layout {
  display: grid;
  grid-template-columns: 1.32fr 1fr;
  gap: clamp(28px, 4vw, 62px);
}

/* A column so the share row can sit level with the bottom of the photo, as it
   does in the design, however short the title runs. */
.tqma-receta-hero__info {
  display: flex;
  flex-direction: column;
}

.tqma-receta-hero__media {
  border-radius: var(--tqma-radius);
  overflow: hidden;
}

.tqma-receta-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.tqma-receta-hero__pill {
  align-self: flex-start;
  padding: 9px 22px;
  border-radius: 999px;
  background: var(--tqma-tan);
  font-size: 15px;
  font-weight: 600;
  color: #59431c;
}

.tqma-receta-hero__title {
  margin-top: clamp(18px, 2vw, 30px);
  font-family: var(--tqma-font-display);
  font-size: clamp(28px, 2.9vw, 40px);
  line-height: 1.18;
  font-weight: 700;
  color: var(--tqma-ink);
}

/* --------------------------------------------------------- Receta · facts */
.tqma-receta-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: clamp(20px, 2.4vw, 34px);
  margin-bottom: clamp(22px, 2.4vw, 34px);
  padding: 26px 28px;
  border-radius: 14px;
  background: var(--tqma-facts);
}

.tqma-receta-facts__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.tqma-receta-facts__icon {
  width: auto;
  height: 30px;
  margin-bottom: 4px;
}

.tqma-receta-facts__label {
  font-size: 14px;
  line-height: 1.3;
  color: var(--tqma-muted);
}

.tqma-receta-facts__value {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 600;
  color: var(--tqma-ink);
}

/* ------------------------------------------------- Receta · share/download */
.tqma-receta-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: auto;
  padding-top: clamp(20px, 2.2vw, 30px);
  border-top: 1px solid var(--tqma-orange);
}

.tqma-share {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tqma-share__label {
  font-size: 16px;
  color: var(--tqma-ink);
}

.tqma-share__list {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tqma-share__link {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--tqma-orange);
  border-radius: 50%;
  color: var(--tqma-orange);
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.tqma-share__link svg {
  width: 19px;
  height: 19px;
}

.tqma-share__link:hover {
  background: var(--tqma-orange);
  color: var(--tqma-white);
  transform: translateY(-2px);
}

.tqma-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--tqma-panel);
  font-size: 16px;
  color: var(--tqma-ink);
  transition: background-color .18s ease;
}

.tqma-download:hover {
  background: #e8e8e8;
}

.tqma-download__icon {
  width: 20px;
  height: 20px;
  color: var(--tqma-ink);
}

/* -------------------------------------------- Receta · ingredients + steps */
.tqma-receta-body {
  padding: clamp(30px, 3.4vw, 52px) 0 clamp(50px, 5vw, 82px);
  background: var(--tqma-white);
}

.tqma-receta-body__layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(28px, 3.4vw, 54px);
  align-items: start;
}

.tqma-receta-heading {
  font-family: var(--tqma-font-display);
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: 700;
  color: var(--tqma-red);
}

.tqma-ingredients__list {
  margin-top: clamp(18px, 2vw, 28px);
  display: grid;
  gap: 14px;
}

.tqma-ingredients__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  cursor: pointer;
}

.tqma-ingredients__box {
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 6px;
  background: var(--tqma-box);
  transition: background-color .18s ease;
}

.tqma-ingredients__item input:checked ~ .tqma-ingredients__box {
  background: var(--tqma-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L19 7'/%3E%3C/svg%3E") center/15px no-repeat;
}

.tqma-ingredients__item input:focus-visible ~ .tqma-ingredients__box {
  outline: 2px solid var(--tqma-red);
  outline-offset: 2px;
}

.tqma-ingredients__text {
  font-size: 17px;
  line-height: 1.45;
  color: var(--tqma-ink);
  transition: color .18s ease;
}

.tqma-ingredients__item input:checked ~ .tqma-ingredients__text {
  color: var(--tqma-muted);
  text-decoration: line-through;
}

/* Ingredients may link to the Toledano product they use. */
.tqma-ingredients__text a {
  font-weight: 600;
  color: var(--tqma-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tqma-ingredients__text a::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 7px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%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 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.tqma-steps {
  padding: clamp(26px, 3vw, 46px) clamp(22px, 2.8vw, 44px);
  border-radius: 24px;
  background: var(--tqma-panel);
}

.tqma-steps__list {
  margin: clamp(18px, 2vw, 28px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 22px;
}

.tqma-steps__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
}

.tqma-steps__num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tqma-red);
  font-size: 15px;
  font-weight: 600;
  color: var(--tqma-white);
}

.tqma-steps__title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 4px;
}

.tqma-steps__text {
  padding-top: 3px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--tqma-ink);
}

.tqma-steps__text p {
  margin: 0;
}

.tqma-steps__text p + p {
  margin-top: 10px;
}

/* ------------------------------------------------------- Receta · related */
.tqma-related {
  padding: clamp(30px, 3.4vw, 52px) 0 clamp(50px, 5vw, 80px);
  background: var(--tqma-white);
}

.tqma-related .tqma-carousel {
  margin-top: clamp(22px, 2.4vw, 34px);
}

/* ==========================================================================
   Blog
   ========================================================================== */

body.tqma--blog {
  --tqma-cream-warm: #fff3de;
  /* The badge is sized from its width; height and overhang follow from the
     artwork's aspect ratio so the hero can reserve room for it. */
  --tqma-badge-w: 155px;
  --tqma-badge-h: calc(var(--tqma-badge-w) / 1.571);
  --tqma-badge-drop: calc(var(--tqma-badge-h) * .33);
}

/* ------------------------------------------------------------ Blog · hero */
/* Padding, colour and curve come from the shared .tqma-rec-hero rule; only the
   stacking context is Blog-specific, so the badge can hang over the curve. */
.tqma-blog-hero {
  position: relative;
  z-index: 1;
  /* Enough room below the subtitle for the part of the badge that sits inside
     the band, whatever size the badge is scaled to. */
  padding-bottom: calc(var(--tqma-badge-h) - var(--tqma-badge-drop) + clamp(16px, 1.6vw, 24px));
}

.tqma-blog-hero__title {
  font-family: var(--tqma-font-display);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.15;
  font-weight: 700;
}

.tqma-blog-hero__title em {
  font-style: normal;
  color: var(--tqma-cream);
}

.tqma-blog-hero__subtitle {
  margin-top: 14px;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 600;
}

/* Straddles the curve: two thirds on the red, one third on the cream. */
.tqma-blog-hero__badge {
  position: absolute;
  left: 50%;
  bottom: calc(var(--tqma-badge-drop) * -1);
  transform: translateX(-50%);
  width: var(--tqma-badge-w);
  line-height: 0;
}

.tqma-blog-hero__badge img {
  width: 100%;
  height: auto;
}

/* ----------------------------------------------------------- Blog · grids */
.tqma-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(24px, 2.6vw, 40px);
}

.tqma-post-card {
  aspect-ratio: 4 / 5;
  min-height: 0;
}

.tqma-blog-featured {
  /* The badge's overhang is added on, so it does not eat into the gap above
     the heading. */
  padding: calc(clamp(40px, 4.4vw, 70px) + var(--tqma-badge-drop)) 0 clamp(40px, 4.4vw, 68px);
  background: linear-gradient(180deg, var(--tqma-cream-warm) 0%, var(--tqma-white) 100%);
}

/* ----------------------------------------------------------- Blog · filtros */
/* The bar the pillar planners land on. Same controls as the Recetas filter bar,
   but a plain GET form — the filtered Blog is a real, shareable URL. */
.tqma-blog-filters {
  padding: clamp(24px, 2.6vw, 40px) 0 0;
  background: var(--tqma-white);
}

.tqma-blog-filters__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
}

.tqma-blog-filters__label {
  margin-right: 4px;
  font-family: var(--tqma-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--tqma-ink);
}

.tqma-blog-filters__count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--tqma-red);
  color: var(--tqma-white);
  font-size: 13px;
  font-weight: 700;
}

.tqma-blog-filters__clear {
  font-size: 15px;
  color: var(--tqma-muted);
  text-decoration: underline;
}

.tqma-blog-filters__clear:hover {
  color: var(--tqma-red);
}

.tqma-rec-results__note {
  margin: -6px 0 clamp(14px, 1.6vw, 22px);
  font-size: 16px;
  color: var(--tqma-muted);
}

.tqma-blog-latest__empty {
  margin-top: 14px;
  font-size: 16px;
  color: var(--tqma-muted);
}

.tqma-blog-latest__empty a {
  color: var(--tqma-red);
  text-decoration: underline;
}

.tqma-blog-latest {
  padding: clamp(30px, 3.4vw, 52px) 0 clamp(50px, 5vw, 84px);
  background: var(--tqma-white);
}

.tqma-blog-latest__more {
  margin-top: clamp(32px, 3.6vw, 54px);
  text-align: center;
}

.tqma-blog-latest__more .tqma-btn.is-loading {
  opacity: .6;
  pointer-events: none;
}

/* ==========================================================================
   Pilar (Alimentarse bien · Hacer actividad física · Vivir en armonía)
   ========================================================================== */

body.tqma--pilar {
  --tqma-lime: #94c31c;
  --tqma-lime-soft: #ddfc8c;
  --tqma-sky: #edf8fe;
  --tqma-source-blue: #36a5ff;

  /* Accent, overridden per pillar below. Every accented rule reads this one
     custom property, so a new pillar is three declarations, not a restyle. */
  --tqma-accent: var(--tqma-lime);
  --tqma-accent-soft: var(--tqma-lime-soft);
}

body.tqma--pilar.tqma-pilar--actividad {
  --tqma-accent: var(--tqma-orange);
  --tqma-accent-soft: #ffc088;
}

body.tqma--pilar.tqma-pilar--armonia {
  --tqma-accent: var(--tqma-pink);
  --tqma-accent-soft: #ffb6b7;
}

.tqma-btn--accent {
  background: var(--tqma-lime);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
}

/* ----------------------------------------------------------- Pilar · hero */
.tqma-pilar-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(480px, 42vw, 620px);
  padding: calc(var(--tqma-header-h) + 54px) 0 56px;
  /* Colour under the photo so the white headline stays readable before the
     bundled artwork is in place. */
  background-color: #4a6b3a;
  background-image: var(--tqma-vb-hero-bg);
  background-size: cover;
  background-position: center;
}

.tqma-pilar-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
  align-items: center;
  gap: 40px;
  width: 100%;
}

.tqma-crumbs {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(16px, 2vw, 28px);
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--tqma-white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

.tqma-crumbs a:hover {
  text-decoration: underline;
}

.tqma-crumbs__sep {
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .8;
}

.tqma-pilar-hero__title {
  max-width: 640px;
  font-family: var(--tqma-font-display);
  font-size: clamp(30px, 3.8vw, 54px);
  line-height: 1.12;
  font-weight: 700;
  color: var(--tqma-white);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .32);
}

/* The handwritten note ships as artwork — circle, lettering and arrow in one
   piece, one file per pillar colour. */
.tqma-pilar-hero__claim {
  display: block;
  width: clamp(112px, 11vw, 152px);
  margin-top: clamp(20px, 2.6vw, 40px);
  transition: transform .2s ease;
}

.tqma-pilar-hero__claim:hover {
  transform: translateY(3px);
}

.tqma-pilar-hero__claim img {
  width: 100%;
  height: auto;
}

/* Boxes are the hero pillars, but here they double as navigation: the page you
   are on stays solid and the other two sink into the photograph. Width comes
   from .tqma-pillar so the two heroes stay identical. */

/* Two classes deep on purpose: the solid `.tqma-pillar--green` and friends are
   single-class `background` shorthands declared later, and would otherwise
   reset the tint back to none. */
.tqma-pillar.tqma-pillar--ghost {
  background-color: transparent;
  background-image: linear-gradient(var(--tqma-ghost-tint), var(--tqma-ghost-tint));
  backdrop-filter: blur(2px);
}

.tqma-pillar--green.tqma-pillar--ghost { --tqma-ghost-tint: rgba(131, 191, 58, .62); }
.tqma-pillar--gold.tqma-pillar--ghost { --tqma-ghost-tint: rgba(233, 168, 0, .62); }
.tqma-pillar--orange.tqma-pillar--ghost { --tqma-ghost-tint: rgba(255, 161, 0, .62); }
.tqma-pillar--red.tqma-pillar--ghost { --tqma-ghost-tint: rgba(236, 21, 68, .58); }

.tqma-pillar--gold { background: var(--tqma-gold); }

.tqma-pillar--active {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}

/* -------------------------------------------------------- Pilar · razones */
.tqma-pilar-reasons {
  padding: clamp(46px, 5vw, 84px) 0 clamp(40px, 4.4vw, 70px);
  background: linear-gradient(180deg, var(--tqma-sky) 0%, var(--tqma-white) 62%);
}

.tqma-reason-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 32px);
  margin-top: clamp(28px, 3.2vw, 46px);
}

.tqma-reason {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background: var(--tqma-white);
  box-shadow: 0 10px 28px rgba(31, 68, 92, .12);
}

.tqma-reason__media {
  aspect-ratio: 5 / 4;
  overflow: hidden;
}

.tqma-reason__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Centred rather than top-aligned: the cards stretch to a common height, and
   with no button pinned to the bottom edge a short card would otherwise trail
   dead space below its text. */
.tqma-reason__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 28px) clamp(24px, 2.6vw, 34px);
  text-align: center;
}

/* The reasons cards stay lime on all three pillars — only the accent-tinted
   pieces (claim circle, mosaic frame, hero box) change colour. */
.tqma-reason__title {
  font-family: var(--tqma-font-display);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 700;
  color: var(--tqma-lime);
}

.tqma-reason__text {
  margin-top: 12px;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.45;
  color: var(--tqma-ink);
}

/* -------------------------------------------------------- Pilar · fuentes */
.tqma-sources {
  padding: clamp(40px, 4.4vw, 72px) 0 clamp(34px, 3.6vw, 58px);
  background: var(--tqma-white);
}

.tqma-sources__head {
  position: relative;
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
}

/* Artwork, not type — each note carries its own arrow. */
.tqma-sources__claim img {
  width: 100%;
  height: auto;
}

.tqma-sources__claim--a {
  position: absolute;
  right: calc(100% + 12px);
  top: -10px;
  width: clamp(150px, 15vw, 210px);
}

.tqma-sources__claim--b {
  display: block;
  width: clamp(130px, 13vw, 180px);
  margin: 18px 0 0 auto;
}

.tqma-sources__layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(26px, 3vw, 44px);
}

/* Without this the grid item takes its max-content width from the carousel
   track and the whole page scrolls sideways instead of the track. */
.tqma-sources__panels {
  min-width: 0;
}

.tqma-sources__tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Vertical tabs: the label is rotated, the pill is not. */
.tqma-source-tab {
  display: grid;
  place-items: center;
  width: 52px;
  flex: 1;
  min-height: 150px;
  border-radius: 14px;
  color: var(--tqma-white);
  font-size: 15px;
  font-weight: 600;
  opacity: .55;
  transition: opacity .2s ease;
}

.tqma-source-tab span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.tqma-source-tab[aria-selected="true"] {
  opacity: 1;
}

.tqma-source-tab--blue { background: var(--tqma-source-blue); }
.tqma-source-tab--green { background: var(--tqma-lime); }
.tqma-source-tab--gold { background: var(--tqma-gold); }
.tqma-source-tab--red { background: var(--tqma-pink); }

.tqma-carousel--sources {
  max-width: none;
  padding: 0;
}

.tqma-source-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: #ddd;
}

.tqma-source-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.tqma-source-card:hover .tqma-source-card__image {
  transform: scale(1.05);
}

.tqma-source-card::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 100%);
}

.tqma-source-card__title {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 58px;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--tqma-white);
  text-align: center;
}

.tqma-source-card__arrow {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 20px;
  width: 20px;
  height: 20px;
  background: var(--tqma-white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 8l8 8m0 0V9m0 7H9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%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 24 24'%3E%3Cpath d='M8 8l8 8m0 0V9m0 7H9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Pill pagination, wider than the dot pagination used elsewhere. */
.tqma-carousel--sources .tqma-carousel__dots,
.tqma-carousel--music .tqma-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(20px, 2.2vw, 32px);
}

.tqma-carousel--sources .tqma-carousel__dots button,
.tqma-carousel--music .tqma-carousel__dots button {
  width: 62px;
  height: 8px;
  border-radius: 999px;
  background: #ebebeb;
  transition: background-color .2s ease;
}

.tqma-carousel--sources .tqma-carousel__dots button.is-active,
.tqma-carousel--music .tqma-carousel__dots button.is-active {
  background: var(--tqma-red-bright);
}

/* -------------------------------------------------------- Pilar · rutinas */
.tqma-routines {
  padding: clamp(40px, 4.4vw, 72px) 0 clamp(34px, 3.6vw, 58px);
  background: var(--tqma-white);
}

.tqma-routine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 34px);
  margin-top: clamp(28px, 3.2vw, 46px);
}

.tqma-routine {
  display: flex;
  flex-direction: column;
  /* Without this the grid column takes its width from the step track's
     max-content and the page scrolls sideways instead of the track. */
  min-width: 0;
  padding: clamp(14px, 1.4vw, 20px) clamp(14px, 1.4vw, 20px) clamp(24px, 2.6vw, 34px);
  border-radius: 22px;
  background: var(--tqma-white);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .10);
}

/* The card's photo area is its own carousel. The base rule centres carousels
   with `margin: 0 auto`, and an auto cross-axis margin stops a flex item from
   stretching — which let the track size this one to max-content. */
.tqma-carousel--steps {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

.tqma-step {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: #ddd;
}

.tqma-step__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tqma-step::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 100%);
}

.tqma-step__body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 20px;
  color: var(--tqma-white);
  text-align: center;
}

.tqma-step__title {
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 500;
}

.tqma-step__text {
  margin-top: 8px;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.35;
}

.tqma-carousel--steps .tqma-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.tqma-carousel--steps .tqma-carousel__dots button {
  width: 34px;
  height: 7px;
  border-radius: 999px;
  background: #ebebeb;
  transition: background-color .2s ease;
}

.tqma-carousel--steps .tqma-carousel__dots button.is-active {
  background: var(--tqma-red-bright);
}

.tqma-routine__body {
  margin-top: clamp(14px, 1.6vw, 22px);
  text-align: center;
}

.tqma-routine__title {
  font-family: var(--tqma-font-display);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 700;
  line-height: 1.18;
  color: var(--tqma-ink);
}

.tqma-routine__text {
  margin-top: 12px;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.45;
  color: var(--tqma-ink);
}

/* --------------------------------------------------- Pilar · planificador */
.tqma-planner {
  padding: clamp(34px, 3.6vw, 60px) 0 clamp(40px, 4.4vw, 70px);
  background: var(--tqma-white);
}

.tqma-planner__scene {
  position: relative;
  display: flex;
  justify-content: flex-end;
  min-height: clamp(380px, 38vw, 560px);
  padding: clamp(20px, 2.6vw, 40px);
  border-radius: 24px;
  overflow: hidden;
  background-image: var(--tqma-planner-bg);
  background-size: cover;
  background-position: center;
  background-color: #6f7a3f;
}

.tqma-planner__panel {
  width: min(560px, 100%);
  padding: clamp(24px, 2.8vw, 42px);
  border-radius: 20px;
  /* The panel is a wash over the photo rather than a solid card. */
  background: linear-gradient(150deg, rgba(148, 165, 42, .88) 0%, rgba(186, 152, 68, .86) 100%);
  backdrop-filter: blur(3px);
  color: var(--tqma-white);
}

.tqma-planner__title {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.15;
}

.tqma-planner__group {
  margin-top: clamp(18px, 2vw, 28px);
}

.tqma-planner__legend {
  padding: 0;
  margin-bottom: 12px;
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 600;
}

.tqma-planner__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tqma-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 999px;
  font-size: 15px;
  color: var(--tqma-white);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

.tqma-chip:hover {
  background: rgba(255, 255, 255, .22);
}

.tqma-planner__chips input:checked + .tqma-chip {
  background: var(--tqma-white);
  color: #4a4718;
  font-weight: 600;
}

.tqma-planner__chips input:focus-visible + .tqma-chip {
  outline: 2px solid var(--tqma-white);
  outline-offset: 2px;
}

/* ------------------------------------------------ Pilar · planner · range */
.tqma-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 18px;
  row-gap: 6px;
}

.tqma-range__input {
  grid-column: 1;
  width: 100%;
  height: 4px;
  margin: 8px 0;
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
  /* Filled to the thumb, track beyond it — one gradient, no extra element. */
  background: linear-gradient(
    to right,
    var(--tqma-white) 0 var(--tqma-range-pct, 50%),
    rgba(255, 255, 255, .45) var(--tqma-range-pct, 50%) 100%
  );
  cursor: pointer;
}

.tqma-range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--tqma-white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  cursor: pointer;
}

.tqma-range__input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--tqma-white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  cursor: pointer;
}

.tqma-range__input:focus-visible {
  outline: 2px solid var(--tqma-white);
  outline-offset: 6px;
}

.tqma-range__value {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  font-size: 19px;
}

.tqma-range__min,
.tqma-range__max {
  grid-row: 2;
  font-size: 14px;
}

.tqma-range__min {
  grid-column: 1;
  justify-self: start;
}

.tqma-range__max {
  grid-column: 1;
  justify-self: end;
}

.tqma-planner__submit {
  margin-top: clamp(20px, 2.2vw, 30px);
  background: #fc1f1f;
}

.tqma-planner__submit[disabled] {
  background: rgba(255, 255, 255, .2);
  box-shadow: none;
  color: rgba(255, 255, 255, .55);
  cursor: not-allowed;
  transform: none;
}

/* --------------------------------------------------------- Pilar · temas */
/* The skyline runs along the foot of the section, with the cards clear of it —
   which is what the bottom padding buys. Sizing the panorama by width would
   make it far taller than the band, so it is cropped to a set height instead,
   anchored to the waterline. Same treatment as the Redes scene, including the
   white wash that fades its top edge into the section above. */
.tqma-pilar-topics {
  position: relative;
  padding: clamp(40px, 4.4vw, 74px) 0 clamp(170px, 22vw, 330px);
  background: var(--tqma-white);
}

.tqma-pilar-topics::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(170px, 22vw, 330px);
  background-image:
    linear-gradient(to bottom, var(--tqma-white) 0%, rgba(255, 255, 255, 0) 24%),
    url("../img/bg-skyline.jpg");
  background-size: 100% 100%, cover;
  background-position: top center, center bottom;
  background-repeat: no-repeat, no-repeat;
  pointer-events: none;
}

/* The section's own content has to sit over the band. */
.tqma-pilar-topics > * {
  position: relative;
  z-index: 1;
}

/* The heading is centred on the page; the note floats beside it out of flow so
   it cannot pull the title off-centre. */
.tqma-pilar-topics__head {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

/* In flow by default so it can never overhang a narrow window. */
.tqma-pilar-topics__claim {
  display: block;
  width: clamp(170px, 17vw, 240px);
  margin: 14px auto 0;
}

/* Only floated out beside the heading once the margins are wide enough to
   hold it — 780px of heading plus two 240px notes plus breathing room. */
@media (min-width: 1320px) {
  .tqma-pilar-topics__claim {
    position: absolute;
    left: calc(100% + 24px);
    top: 50%;
    width: 240px;
    margin: 0;
    transform: translateY(-50%);
  }
}

.tqma-pilar-topics__claim img {
  width: 100%;
  height: auto;
}

/* The framed variant of the mosaic: accent border plus a category pill. */
.tqma-mosaic--framed {
  margin-top: clamp(26px, 3vw, 44px);
}

.tqma-mosaic--framed .tqma-mosaic__card {
  border: 6px solid var(--tqma-accent-soft);
  border-radius: 20px;
}

.tqma-mosaic__pill {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--tqma-white);
  font-size: 13px;
  font-weight: 500;
  color: var(--tqma-ink);
}

.tqma-mosaic__card--1 .tqma-mosaic__pill {
  right: auto;
  left: 16px;
}

/* -------------------------------------------------------- Pilar · música */
.tqma-music {
  background: var(--tqma-white);
}

/* Full-bleed band: the colour runs to both edges, so the room below the
   carousel is the panel's own padding rather than white space under it. It sits
   flush against the white section above — the negative pull it used to carry
   was there to tuck it under the Redes photograph, which now follows it. */
.tqma-music__panel {
  position: relative;
  padding: clamp(30px, 3.4vw, 56px) 0 clamp(52px, 5.4vw, 88px);
  background: linear-gradient(180deg, var(--tqma-cream-soft) 0%, #ffe6ae 100%);
}

.tqma-music__head {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.tqma-music__claim {
  position: absolute;
  right: calc(100% + 24px);
  top: -8px;
  width: 160px;
  font-family: var(--tqma-font-script);
  font-size: clamp(17px, 1.6vw, 23px);
  line-height: 1.15;
  color: var(--tqma-lime);
  text-align: left;
}

/* The artwork carries its own handwriting and arrow, so it drops the script
   font and sits a little wider than the text version it replaces. */
.tqma-music__claim--image {
  width: clamp(150px, 15vw, 205px);
  top: -18px;
  right: calc(100% + 10px);
}

.tqma-music__claim--image img {
  width: 100%;
  height: auto;
}

.tqma-carousel--music {
  max-width: none;
  padding: 0;
  margin-top: clamp(24px, 2.8vw, 40px);
}

.tqma-music__embed {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 14px;
}

/* ==========================================================================
   Chat (Chef Toledano)
   ========================================================================== */

body.tqma--chat {
  --tqma-chat-tint: #eff5fb;
  --tqma-chat-line: #b7cfe6;
  --tqma-chat-amber: #f99b00;
  --tqma-ink-dark: #2d2d2d;
}

/* The amber wash sits behind the floating header, as in the design. */
.tqma-chat {
  padding: calc(var(--tqma-header-h) + 34px) 0 clamp(30px, 3.4vw, 56px);
  background: linear-gradient(180deg, #ffac1f 0%, #ffd68a 34%, var(--tqma-white) 62%);
}

.tqma-chat__layout {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 40px);
  align-items: start;
}

/* ------------------------------------------------------------ Chat · side */
.tqma-chat__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.tqma-chat__back,
.tqma-chat__new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 22px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}

.tqma-chat__back {
  background: var(--tqma-white);
  color: var(--tqma-ink);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .1);
}

.tqma-chat__new {
  background: var(--tqma-chat-amber);
  color: var(--tqma-white);
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(249, 155, 0, .32);
}

.tqma-chat__back-icon,
.tqma-chat__new-icon {
  width: 19px;
  height: 19px;
  flex: none;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.tqma-chat__back-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
}

.tqma-chat__new-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}

.tqma-chat__legal {
  padding: 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--tqma-muted);
  text-align: center;
}

.tqma-chat__legal a {
  color: inherit;
  text-decoration: underline;
}

.tqma-chat__save {
  margin-top: clamp(20px, 3vw, 46px);
  padding: clamp(20px, 2.2vw, 30px) clamp(16px, 1.8vw, 24px);
  border-radius: 16px;
  background: var(--tqma-chat-tint);
  text-align: center;
}

.tqma-chat__save p {
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.45;
}

.tqma-chat__save .tqma-btn {
  width: 100%;
  font-size: 16px;
}

.tqma-chat__save .tqma-btn + .tqma-btn {
  margin-top: 12px;
}

.tqma-btn--dark {
  background: var(--tqma-ink-dark);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}

.tqma-btn--ghost {
  gap: 10px;
  background: var(--tqma-white);
  color: var(--tqma-ink);
  border: 1px solid #dcdcdc;
}

/* ------------------------------------------------------------ Chat · main */
.tqma-chat__main {
  display: flex;
  flex-direction: column;
  /* Without this the prompt row's max-content width sets the column and the
     whole page scrolls sideways instead of the row. */
  min-width: 0;
  min-height: clamp(520px, 58vh, 720px);
}

.tqma-chat__title {
  font-family: var(--tqma-font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 700;
}

.tqma-chat__intro {
  margin-top: 8px;
  font-size: clamp(14px, 1.2vw, 17px);
  color: var(--tqma-ink);
}

.tqma-chat__prompts {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(14px, 1.8vw, 24px);
  padding-bottom: clamp(14px, 1.8vw, 24px);
  border-bottom: 1px solid #e6e6e6;
}

.tqma-chat__prompt-track {
  display: flex;
  gap: 10px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.tqma-chat__prompt-track::-webkit-scrollbar {
  display: none;
}

.tqma-chat__prompt {
  flex: none;
  padding: 11px 20px;
  border: 1px solid var(--tqma-chat-line);
  border-radius: 999px;
  background: var(--tqma-chat-tint);
  font-size: 14px;
  white-space: nowrap;
  transition: background-color .18s ease;
}

.tqma-chat__prompt:hover {
  background: #e2edf7;
}

.tqma-chat__prompt-next {
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--tqma-chat-line);
  border-radius: 50%;
  background: var(--tqma-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2b2b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/18px no-repeat;
}

/* ---------------------------------------------------------- Chat · thread */
.tqma-chat__thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(18px, 2.2vw, 30px) 0;
  overflow-y: auto;
}

.tqma-msg {
  display: flex;
  gap: 14px;
  max-width: 76%;
}

.tqma-msg--me {
  align-self: flex-end;
}

.tqma-msg--me .tqma-msg__body {
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--tqma-chat-tint);
}

.tqma-msg__avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.tqma-msg__body {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.5;
}

.tqma-msg__links {
  margin-top: 10px;
  display: grid;
  gap: 4px;
}

.tqma-msg__links a {
  color: var(--tqma-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------- Chat · composer */
.tqma-chat__composer {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: auto;
  padding: 6px 6px 6px 26px;
  border: 2px solid var(--tqma-red);
  border-radius: 999px;
  background: var(--tqma-white);
}

.tqma-chat__composer input {
  flex: 1;
  min-width: 0;
  height: 50px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  color: var(--tqma-ink);
}

.tqma-chat__composer input:focus {
  outline: none;
}

.tqma-chat__send {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--tqma-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M3.4 20.4 21 12 3.4 3.6 3.4 10l12 2-12 2z'/%3E%3C/svg%3E") center/20px no-repeat;
}

/* ==========================================================================
   Chat · sign in / sign up dialogs
   ========================================================================== */

.tqma-auth {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* The artwork arrives already blurred and toned, so over it the scrim only has
   to hold the panel's contrast. With no artwork the whole declaration drops out
   and the heavier colour plus a live blur of the page stands in for it. */
.tqma-auth__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(40, 30, 20, .45);
  background-image:
    linear-gradient(rgba(28, 20, 12, .28), rgba(28, 20, 12, .28)),
    var(--tqma-auth-bg);
  background-size: cover;
  background-position: center;
  backdrop-filter: blur(6px);
}

body.tqma-auth-open {
  overflow: hidden;
}

.tqma-auth__logo {
  position: absolute;
  top: 26px;
  left: 34px;
  width: 130px;
}

.tqma-auth__logo img {
  width: 100%;
  height: auto;
}

.tqma-auth__close {
  position: absolute;
  top: 30px;
  right: 34px;
  width: 34px;
  height: 34px;
  background: var(--tqma-white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%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 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat;
}

.tqma-auth__panel {
  position: relative;
  width: min(430px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border-radius: 18px;
  background: var(--tqma-white);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}

.tqma-auth__title {
  padding: 22px 28px;
  border-radius: 18px 18px 0 0;
  background: var(--tqma-red);
  font-family: var(--tqma-font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--tqma-white);
}

.tqma-auth__body {
  padding: 24px 28px 28px;
}

.tqma-auth__hero {
  width: calc(100% + 56px);
  margin: -24px -28px 0;
  max-width: none;
}

.tqma-auth__lead {
  padding: 20px 0 4px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.tqma-auth__actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.tqma-auth__actions .tqma-btn {
  flex: 1;
  padding: 13px 18px;
  font-size: 15px;
}

.tqma-auth__forgot {
  display: block;
  margin-top: 16px;
  padding: 13px 18px;
  border: 1px solid #f0c674;
  border-radius: 999px;
  background: #fffaf0;
  font-size: 14px;
  text-align: center;
}

.tqma-auth__status {
  margin-top: 12px;
  min-height: 1.2em;
  font-size: 13px;
  color: var(--tqma-muted);
}

.tqma-auth__status.is-error {
  color: var(--tqma-red);
}

/* -------------------------------------------------------------- Fields */
.tqma-field {
  margin-bottom: 16px;
}

.tqma-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
}

.tqma-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.tqma-field__control {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #dfe3e8;
  border-radius: 999px;
  background: var(--tqma-white);
  transition: border-color .18s ease;
}

.tqma-field__control:focus-within {
  border-color: var(--tqma-orange);
}

.tqma-field__control input,
.tqma-field__control select {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--tqma-ink);
}

.tqma-field__control input:focus,
.tqma-field__control select:focus {
  outline: none;
}

.tqma-field__control input::placeholder {
  color: #9aa3ab;
}

/* Leading glyphs, drawn rather than shipped as files. */
.tqma-field__control--user::before,
.tqma-field__control--lock::before,
.tqma-field__control--at::before {
  content: "";
  width: 17px;
  height: 17px;
  margin-left: 16px;
  flex: none;
  background: #9aa3ab;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.tqma-field__control--user::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}

.tqma-field__control--lock::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

.tqma-field__control--at::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-3.6 7.2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-3.6 7.2'/%3E%3C/svg%3E");
}

.tqma-field__control--prefix::before {
  content: attr(data-prefix);
  margin-left: 16px;
  flex: none;
  font-size: 15px;
  color: var(--tqma-ink);
}

.tqma-field__control--select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
}

.tqma-field__control--select::after {
  content: "";
  position: absolute;
  right: 16px;
  width: 15px;
  height: 15px;
  pointer-events: none;
  background: var(--tqma-red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%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 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}

.tqma-field__reveal {
  width: 22px;
  height: 22px;
  margin-right: 16px;
  flex: none;
  background: #9aa3ab;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%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 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}

.tqma-field__reveal.is-on {
  background: var(--tqma-red);
}

.tqma-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.45;
}

.tqma-check input {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: var(--tqma-red);
}

.tqma-check a {
  text-decoration: underline;
}

/* ----------------------------------------------------------- Responsive */
/* The overrides below repeat the attribute selectors so they keep the same
   specificity as the declarations above and actually win. */
@media (max-width: 1180px) {
  .tqma-carousel[data-per-view="3.5"],
  .tqma-carousel[data-per-view="4"] {
    --tqma-per-view: 3;
  }
}


@media (max-width: 1024px) {
  body.tqma {
    --tqma-curve: 34px;
  }

  .tqma-assistant__inner {
    grid-template-columns: 1fr;
    padding-top: 50px;
  }

  .tqma-assistant__figure {
    display: none;
  }

  .tqma-carousel,
  .tqma-carousel[data-per-view="2"],
  .tqma-carousel[data-per-view="3"],
  .tqma-carousel[data-per-view="3.5"],
  .tqma-carousel[data-per-view="4"] {
    --tqma-per-view: 2;
  }

  .tqma-carousel__arrow {
    display: none;
  }

  /* --- Vive bien --- */
  .tqma-vb-hero__inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  /* Single column below this width, so the boxes span it again instead of
     staying pinned narrow at the right. */
  .tqma-pillars {
    padding-left: 34px;
    align-items: stretch;
  }

  .tqma-pillar {
    max-width: none;
  }

  .tqma-plate__layout {
    grid-template-columns: 1fr;
  }

  .tqma-plate__col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
  }

  .tqma-plate__claim {
    display: none;
  }

  .tqma-plate__stage {
    order: -1;
  }

  /* No figure below this width, so the row no longer needs her height. */
  .tqma-pyramid__layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .tqma-pyramid__figure {
    display: none;
  }

  .tqma-pyramid__controls,
  .tqma-pyramid__stage {
    grid-column: 1;
  }

  .tqma-pyramid__controls {
    padding-top: 0;
  }

  .tqma-pyramid__note {
    max-width: none;
    margin-inline: 0;
  }

  /* --- Receta --- */
  .tqma-receta-hero__layout,
  .tqma-receta-body__layout {
    grid-template-columns: 1fr;
  }

  /* --- Blog --- */
  .tqma-post-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Chat --- */
  .tqma-chat__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The sign-in prompt reads as a footnote once the column is full width. */
  .tqma-chat__save {
    margin-top: 6px;
  }

  /* --- Pilar --- */
  .tqma-pilar-hero__inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .tqma-pillars--nav {
    align-items: stretch;
    padding-left: 34px;
  }

  .tqma-reason-grid,
  .tqma-routine-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tqma-planner__scene {
    justify-content: stretch;
  }

  .tqma-planner__panel {
    width: 100%;
  }

  .tqma-sources__claim--a,
  .tqma-music__claim {
    position: static;
    width: auto;
    margin: 0 auto 12px;
    text-align: center;
  }

  .tqma-music__claim--image {
    display: block;
    width: min(205px, 60%);
  }

}

@media (max-width: 767px) {
  body.tqma {
    --tqma-gutter: 18px;
    --tqma-curve: 24px;
  }

  .tqma-hero__slides {
    aspect-ratio: 4 / 5;
  }

  .tqma-hero__strip-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
    padding-top: 16px;
    padding-bottom: 20px;
  }

  .tqma-hero__badge {
    justify-self: center;
  }

  .tqma-hero__claim {
    display: none;
  }

  .tqma-interest label {
    width: 128px;
    min-height: 118px;
    font-size: 14px;
  }

  /* A sliver of the next card signals that the row scrolls, which matters on
     mobile where the arrows are hidden. */
  .tqma-carousel,
  .tqma-carousel[data-per-view="2"],
  .tqma-carousel[data-per-view="3"],
  .tqma-carousel[data-per-view="3.5"],
  .tqma-carousel[data-per-view="4"] {
    --tqma-per-view: 1.2;
    --tqma-gap: 16px;
  }

  /* --- Vive bien --- */
  .tqma-vb-hero {
    padding-top: calc(var(--tqma-header-h) + 40px);
  }

  .tqma-pillar {
    min-height: 78px;
    padding: 14px 30px 14px 52px;
  }

  .tqma-pillar__letter {
    left: -26px;
    width: 54px;
    height: 54px;
    font-size: 24px;
  }

  .tqma-pyramid__buttons {
    gap: 12px;
  }

  .tqma-food-btn {
    min-height: 78px;
  }

  .tqma-menu-card__meals > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .tqma-menus__footer {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 22px;
  }

  .tqma-menus__claim {
    justify-self: center;
  }

  /* --- Recetas --- */
  .tqma-rec-filters__bar {
    gap: 10px;
  }

  .tqma-select {
    flex: 1 1 calc(50% - 5px);
  }

  .tqma-select select {
    min-width: 0;
    width: 100%;
    height: 52px;
    padding: 0 44px 0 18px;
    font-size: 15px;
    background-size: 26px;
  }

  .tqma-rec-search {
    flex: 1 1 100%;
    height: 52px;
    padding-left: 18px;
  }

  .tqma-rec-search input {
    font-size: 15px;
  }

  .tqma-rec-search .tqma-btn {
    padding: 0 22px;
    font-size: 15px;
  }

  .tqma-rec-row__head,
  .tqma-rec-results__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .tqma-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .tqma-mosaic__card {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 220px;
  }

  /* --- Receta --- */
  .tqma-receta-facts {
    padding: 20px 18px;
    gap: 6px;
  }

  .tqma-receta-facts__icon {
    height: 24px;
  }

  .tqma-receta-facts__label {
    font-size: 12px;
  }

  .tqma-receta-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .tqma-download {
    justify-content: center;
  }

  .tqma-steps {
    padding: 24px 18px;
  }

  /* --- Blog --- */
  body.tqma--blog {
    --tqma-badge-w: 118px;
  }

  .tqma-post-grid {
    grid-template-columns: 1fr;
  }

  .tqma-post-card {
    aspect-ratio: 3 / 2;
  }

  /* --- Chat --- */
  .tqma-msg {
    max-width: 92%;
  }

  .tqma-field-row {
    grid-template-columns: 1fr;
  }

  .tqma-auth__actions {
    flex-direction: column-reverse;
  }

  .tqma-auth__logo {
    width: 96px;
    top: 16px;
    left: 18px;
  }

  .tqma-auth__close {
    top: 18px;
    right: 18px;
  }

  /* --- Pilar --- */
  .tqma-reason-grid,
  .tqma-routine-grid {
    grid-template-columns: 1fr;
  }

  .tqma-range__value {
    width: 46px;
    height: 46px;
    font-size: 17px;
  }

  /* Horizontal tabs once the row no longer has width to spare. */
  .tqma-sources__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* A playlist embed is unreadable at a fraction of a phone's width. */
  .tqma-carousel--music,
  .tqma-carousel--music[data-per-view="3"] {
    --tqma-per-view: 1;
  }

  .tqma-sources__tabs {
    flex-direction: row;
  }

  .tqma-source-tab {
    width: auto;
    min-height: 0;
    padding: 12px 18px;
  }

  .tqma-source-tab span {
    writing-mode: horizontal-tb;
    transform: none;
  }

  .tqma-planner__scene {
    padding: 14px;
  }

  .tqma-planner__panel {
    padding: 22px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tqma *,
  body.tqma *::before,
  body.tqma *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- Print */
/* The recipe single's "Descargar" button prints the page when no file is
   attached, so the printed sheet is trimmed to the recipe itself. */
@media print {
  body.tqma--receta .header,
  body.tqma--receta .tqma-skip,
  body.tqma--receta .tqma-back,
  body.tqma--receta .tqma-receta-hero__actions,
  body.tqma--receta .tqma-related,
  body.tqma--receta .tqma-social,
  body.tqma--receta .footer {
    display: none !important;
  }

  body.tqma--receta .tqma-receta-hero {
    padding-top: 0;
  }

  body.tqma--receta .tqma-receta-body__layout,
  body.tqma--receta .tqma-receta-hero__layout {
    display: block;
  }

  body.tqma--receta .tqma-receta-hero__media {
    max-width: 380px;
    margin-bottom: 18px;
  }

  body.tqma--receta .tqma-steps,
  body.tqma--receta .tqma-ingredients {
    break-inside: avoid;
  }

  body.tqma--receta .tqma-ingredients {
    margin-bottom: 24px;
  }
}

/* ==========================================================================
   Proteína — the nine protein screens (page-proteina.php)
   Built from the site's own tokens rather than copied pixel for pixel, so the
   screens read as part of TQMA while carrying the reference's content.
   ========================================================================== */

.tqma-protein-hero {
  padding: calc(var(--tqma-header-h) + clamp(24px, 3vw, 48px)) 0 clamp(30px, 3.4vw, 54px);
  background: var(--tqma-cream-soft);
}

.tqma-protein-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tqma-muted);
}

.tqma-protein-hero__back-arrow {
  width: 14px;
  height: 14px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  /* Optically centred: the glyph's mass sits right of its box. */
  margin-left: 3px;
}

.tqma-protein-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
  margin-top: clamp(18px, 2vw, 30px);
}

.tqma-protein-hero__title {
  font-family: var(--tqma-font-display);
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.1;
  font-weight: 700;
  color: var(--tqma-red-bright);
}

.tqma-protein-hero__text {
  margin-top: 18px;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--tqma-ink);
}

.tqma-protein-hero__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* The USDA / COLAPA credits. Small, grey and never competing with the data they
   qualify — but present, because the figures are only trustworthy with them. */
.tqma-protein-source {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--tqma-muted);
}

/* ---------------------------------------------------- Proteína · porciones */
.tqma-protein-portions {
  padding: clamp(34px, 3.8vw, 64px) 0;
  text-align: center;
}

.tqma-protein-portions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(22px, 2.4vw, 38px);
}

.tqma-portion-card {
  padding: clamp(20px, 2.2vw, 30px) 18px;
  border: 1px solid #c9c9c9;
  border-radius: 12px;
  background: var(--tqma-white);
}

.tqma-portion-card__unit {
  font-family: var(--tqma-font-display);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 700;
  color: var(--tqma-red-bright);
}

.tqma-portion-card__grams {
  margin-top: 8px;
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--tqma-ink);
}

.tqma-protein-portions__note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--tqma-muted);
}

.tqma-protein-portions__info {
  max-width: 760px;
  margin: 14px auto 0;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.5;
  color: var(--tqma-ink);
}

/* -------------------------------------------------- Proteína · aminoácidos */
.tqma-protein-amino {
  padding: clamp(34px, 3.8vw, 64px) 0;
  background: var(--tqma-cream);
}

.tqma-protein-amino__head {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.tqma-protein-amino__text {
  margin-top: 16px;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--tqma-ink);
}

.tqma-protein-amino__layout {
  display: grid;
  /* minmax(0,…) on the carousel column: without it the track's content sets a
     floor and the whole grid overflows. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: center;
  gap: clamp(20px, 2.6vw, 46px);
  margin-top: clamp(24px, 2.8vw, 44px);
}

/* Everywhere else a carousel is its own container: it carries the page's
   max-width, gutter and centring margin. Here it sits inside a container
   already, as a grid item, so all three have to be given back.
   The margin is the one that actually bites. An auto inline margin cancels a
   grid item's default stretch, so the carousel stopped filling its column and
   sized to its own content instead — 1352px inside an 854px column. Resetting
   the margin restores the stretch; `width: 100%` and `min-width: 0` hold it
   there regardless. */
.tqma-carousel--amino {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.tqma-amino-card {
  height: 100%;
  padding: clamp(18px, 2vw, 26px);
  border-radius: 14px;
  background: var(--tqma-white);
}

.tqma-amino-card__name {
  font-family: var(--tqma-font-display);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 700;
  color: var(--tqma-blue);
}

.tqma-amino-card__text {
  margin-top: 10px;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.45;
  color: var(--tqma-ink);
}

.tqma-protein-amino__media {
  min-width: 0;
}

.tqma-protein-amino__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--tqma-radius);
}

.tqma-protein-amino__media figcaption {
  margin-top: 12px;
  font-family: var(--tqma-font-display);
  font-size: clamp(15px, 1.3vw, 18px);
  text-align: center;
  color: var(--tqma-ink);
}

/* ---------------------------------------------------- Proteína · vitaminas */
.tqma-protein-vitamins {
  padding: clamp(34px, 3.8vw, 64px) 0;
  text-align: center;
}

.tqma-protein-vitamins__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: center;
  gap: clamp(20px, 2.6vw, 46px);
  margin-top: clamp(24px, 2.8vw, 44px);
  text-align: left;
}

.tqma-protein-vitamins__panel-set {
  min-width: 0;
}

.tqma-protein-vitamins__tabs {
  display: flex;
  gap: 10px;
  margin-bottom: clamp(16px, 1.8vw, 26px);
}

.tqma-protein-vitamins__tab {
  padding: 10px 22px;
  border: 1px solid var(--tqma-blue);
  border-radius: 999px;
  font-family: var(--tqma-font-display);
  font-size: clamp(14px, 1.2vw, 17px);
  color: var(--tqma-blue);
  background: transparent;
  cursor: pointer;
}

.tqma-protein-vitamins__tab[aria-selected="true"] {
  color: var(--tqma-white);
  background: var(--tqma-blue);
}

.tqma-nutrient-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tqma-nutrient {
  padding: clamp(16px, 1.8vw, 24px);
  border: 1px solid #c9c9c9;
  border-radius: 12px;
  background: var(--tqma-white);
}

.tqma-nutrient__name {
  font-family: var(--tqma-font-display);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 700;
  color: var(--tqma-red-bright);
}

.tqma-nutrient__pair {
  margin-top: 8px;
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--tqma-ink);
}

.tqma-nutrient__label {
  color: var(--tqma-muted);
}

.tqma-nutrient__value {
  font-weight: 600;
}

.tqma-protein-vitamins__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--tqma-radius);
}

/* ------------------------------------------------------ Proteína · recetas */
.tqma-protein-recipes {
  padding: clamp(34px, 3.8vw, 64px) 0;
  background: var(--tqma-cream-soft);
}

.tqma-protein-recipes__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  max-width: none;
  text-align: left;
}

.tqma-protein-recipes__all {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--tqma-red-bright);
}

/* The grid itself is the Recetas archive's, reused rather than restyled — only
   the gap to the heading above it is particular to this screen. */
.tqma-protein-recipes .tqma-rec-grid {
  margin-top: clamp(20px, 2.2vw, 34px);
}

/* ----------------------------------------------------- Proteína · opciones */
.tqma-protein-options {
  padding: clamp(34px, 3.8vw, 64px) 0 clamp(44px, 4.6vw, 76px);
}

.tqma-protein-options__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 1.8vw, 28px);
  margin-top: clamp(22px, 2.4vw, 38px);
}

.tqma-protein-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: clamp(16px, 1.8vw, 24px);
  border-radius: var(--tqma-radius);
  background: var(--tqma-white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  text-align: center;
}

/* Portrait, because the artwork is. These are the same 3:5 photographs the
   Alimentarse bien carousel uses, and a short landscape crop of one reads as a
   texture swatch rather than as a dish — 3:4 keeps the plate in frame while
   staying short enough for a three-up row. */
.tqma-protein-option__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
}

.tqma-protein-option__label {
  margin-top: clamp(12px, 1.4vw, 18px);
  font-family: var(--tqma-font-display);
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 700;
  color: var(--tqma-ink);
}

.tqma-protein-option__cta {
  margin-top: 8px;
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 600;
  color: var(--tqma-red-bright);
}

/* Stacking: the two-column layouts fold before their cards get too narrow to
   read, which is earlier than the grids' own minmax would force. */
@media (max-width: 900px) {
  .tqma-protein-hero__layout,
  .tqma-protein-amino__layout,
  .tqma-protein-vitamins__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .tqma-protein-hero__media,
  .tqma-protein-amino__media,
  .tqma-protein-vitamins__media {
    order: -1;
    max-width: 420px;
    margin: 0 auto;
  }

  .tqma-protein-recipes__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ==========================================================================
   Borrowed · the main home's "Recetas para alimentarte bien" block
   (parts/shared/main-recipes.php)
   The block's markup and styles are the theme's and are left alone. These
   rules only cover the one state the theme never designed for.
   ========================================================================== */

/* The theme lays the three cards out as a flex row with a 70px gap and lets
   each card shrink freely, then relies on slick to turn that row into a
   carousel below 480px. Two things leave the row un-slicked on a narrow
   screen anyway:

   - slick's "unslick" breakpoint is one-way. Load the page wider than 480px —
     a desktop window narrowed afterwards, a phone rotated to landscape and
     back — and slick tears itself down and never comes back.
   - between 480px and a tablet's width the theme un-slicks on purpose, and
     three cards plus 140px of gap measured 177px each at 800px, 47px at 410px.

   So below the width where three cards stop fitting at a readable size, an
   un-slicked grid becomes a swipeable row of full-size cards instead. The
   :not(.slick-initialized) guard keeps these rules off the grid whenever slick
   is doing the job itself. */
@media (max-width: 991px) {
  body.tqma .recipes-quad__grid:not(.slick-initialized) {
    justify-content: flex-start;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    /* Room for the card shadows, which the scroll container would clip. */
    padding-block: 6px 12px;
  }

  body.tqma .recipes-quad__grid:not(.slick-initialized)::-webkit-scrollbar {
    display: none;
  }

  /* 279px is the card width slick gives it on the main home's mobile layout;
     the 80% cap keeps the next card peeking in on the narrowest phones, which
     is what says "swipe". */
  body.tqma .recipes-quad__grid:not(.slick-initialized) .recipe-card {
    flex: 0 0 min(279px, 80%);
    max-width: none;
    margin: 0;
    scroll-snap-align: start;
    /* The theme's entrance slides each card up 160px as it fades in. Inside a
       scroll container that travel is clipped, so only the fade is kept. */
    transform: none;
  }
}