/* ==========================================================================
   INNOVOFOOD · components.css
   Peces que es repeteixen entre seccions. Mides en px quan són geometria
   fixa del disseny (píndoles, icones, botons rodons) i en rem quan
   contenen text i han de créixer amb la mida de lletra de l'usuari.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ICONES
   Les icones del sprite pinten amb currentColor.
   -------------------------------------------------------------------------- */
.icon {
  flex: none;
  inline-size: 24px;
  block-size: 24px;
}

/* --------------------------------------------------------------------------
   BOTÓ PRIMARI
   276 × 52 al frame, centrat. Gradient fosc amb bisell interior.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-block-size: 52px;
  padding: var(--space-8) var(--space-32);
  border-radius: var(--radius-lg);
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  line-height: var(--lh-button);
  letter-spacing: var(--ls-none);
  text-align: center;
}

.btn--primary {
  position: relative;
  isolation: isolate;
  inline-size: min(100%, 17.25rem);
  margin-inline: auto;
  background: var(--grad-dark-button);
  box-shadow: var(--shadow-button);
  color: var(--neutral-gray-200);
  -webkit-tap-highlight-color: transparent;
}

/* Microinteracció: en prémer s'encongeix una mica; amb el ratolí o el
   focus, la fletxa avança. El gradient no es pot transicionar: la llum del
   hover és una capa a sobre que canvia d'opacitat. */
.btn {
  transition: scale var(--dur-fast) var(--ease-out);
}

/* Si el botó també entra en fer scroll, s'han de sumar les dues transicions
   (la de base.css les substituiria) */
.js-reveal .btn[data-reveal] {
  transition:
    opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
    translate var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
    scale var(--dur-fast) var(--ease-out);
}

.btn:active {
  scale: 0.97;
}

.btn .icon {
  transition: translate var(--dur-base) var(--ease-out);
}

.btn:focus-visible .icon {
  translate: 4px 0;
}

.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .btn:hover .icon { translate: 4px 0; }
  .btn--primary:hover::after { opacity: 1; }
}

/* --------------------------------------------------------------------------
   EYEBROW · píndola d'etiqueta sobre els titulars
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  block-size: 24px;
  padding-inline: var(--space-12);
  border: 1px solid var(--neutral-white);
  border-radius: var(--radius-full);
  background: var(--grad-pill);
  color: var(--olive-600);
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-medium);
  line-height: var(--lh-xsmall);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

.eyebrow__dot,
.caption__dot {
  flex: none;
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: var(--grad-dark);
}

/* Sobre fosc: píndola plena amb el mateix gradient del fons */
.eyebrow--dark {
  background: var(--grad-dark);
  color: var(--accent-rose);
}

.eyebrow--dark .eyebrow__dot {
  background: var(--accent-rose);
}

/* --------------------------------------------------------------------------
   CAPTION · píndola buida amb la marca
   -------------------------------------------------------------------------- */
.caption {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  block-size: 24px;
  padding-inline: var(--space-12);
  border: 1px solid var(--neutral-white);
  border-radius: var(--radius-full);
  color: var(--olive-600);
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-medium);
  line-height: var(--lh-xsmall);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

.caption .caption__dot {
  background: var(--accent-beige);
}

/* Sobre foto fosca: text i punt en el gradient rosa */
.caption--rose {
  color: var(--accent-rose);
}

.caption--rose .caption__dot {
  background: var(--grad-rose);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .caption--rose > span:last-child {
    background-image: var(--grad-rose);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* --------------------------------------------------------------------------
   CAPÇALERA DE SECCIÓ · eyebrow + titular + entradeta, centrats
   -------------------------------------------------------------------------- */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  max-inline-size: 17.3125rem;               /* 277 */
  margin-inline: auto;
  text-align: center;
}

.section-head__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-heading);
}

.section-head__lead {
  color: var(--text-secondary);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   INDICADOR D'SCROLL · doble xebró gris
   -------------------------------------------------------------------------- */
.scroll-cue {
  display: block;
  inline-size: 24px;
  block-size: 19px;
  margin-inline: auto;
  color: var(--neutral-gray-300);
}

.scroll-cue svg {
  inline-size: 100%;
  block-size: 100%;
}

/* És un enllaç al bloc següent. La zona tàctil fa 44 px sense moure la
   icona; en passar-hi (o amb el focus) s'enfosqueix, o s'aclareix sobre
   fons fosc (--cue-hover).
   Com a control, la icona ha de fer 3:1 amb el fons (WCAG 1.4.11): el gris
   del frame (gray-300) en fa 1,6 sobre l'off-white; el secundari del DS,
   5,1. Sobre el fosc del reto es queda el gris (10:1). */
a.scroll-cue {
  position: relative;
  color: var(--cue-color, var(--text-secondary));
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-base) var(--ease-out);
}

a.scroll-cue::before {
  content: '';
  position: absolute;
  inset: -12px -10px -13px;
}

.js-reveal a.scroll-cue[data-reveal] {
  transition:
    opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
    translate var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
    color var(--dur-base) var(--ease-out);
}

a.scroll-cue:focus-visible {
  color: var(--cue-hover, var(--neutral-gray-900));
}

@media (hover: hover) {
  a.scroll-cue:hover {
    color: var(--cue-hover, var(--neutral-gray-900));
  }
}

/* --------------------------------------------------------------------------
   BOTÓ RODÓ (xebró) i RAJOLA D'ICONA
   -------------------------------------------------------------------------- */
.round-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--radius-full);
  background: var(--service-accent, var(--olive-accent));
  color: var(--neutral-white);
}

.round-btn svg {
  inline-size: 16px;
  block-size: 16px;
  transition: rotate var(--dur-slow) var(--ease-out);
}

.round-btn--light {
  background: var(--neutral-white);
  color: #020202;
}

.icon-tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--radius-md);
  background: var(--neutral-white);
  color: var(--neutral-gray-900);
}

/* --------------------------------------------------------------------------
   ETIQUETES
   -------------------------------------------------------------------------- */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.tag {
  display: inline-flex;
  align-items: center;
  block-size: 24px;
  padding-inline: var(--space-12);
  border-radius: var(--radius-full);
  background: var(--neutral-white);
  color: #0E1517;
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-medium);
  line-height: var(--lh-xsmall);
  letter-spacing: var(--ls-label);
  white-space: nowrap;
}

/* Variant de vidre (frame «Assets»): blanc al 16 % i text en gradient rosa.
   El gradient va al <span> de dins: amb background-clip:text a la mateixa
   píndola, el fons blanc també quedaria retallat a la lletra. */
.tag--glass {
  background: rgba(255, 255, 255, 0.16);
  color: var(--accent-rose);
}

/* --------------------------------------------------------------------------
   DECORACIÓ ESCALABLE
   Un llenç de 376 × --decor-h unitats del frame que ocupa tot l'ample de la
   secció. Tot el que hi ha a dins es col·loca amb les coordenades del Figma
   (--x, --y, --d = diàmetre) i escala amb l'amplada: a 320, 376 o 430 px
   la composició és la mateixa. --decor-y el desplaça verticalment, també
   en unitats del frame.
   -------------------------------------------------------------------------- */
.decor {
  --decor-y: 0;
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  aspect-ratio: 376 / var(--decor-h);
  translate: 0 calc(var(--decor-y) / var(--decor-h) * 100%);
  pointer-events: none;
}

.decor__art {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.decor__item {
  position: absolute;
  inset-inline-start: calc(var(--x) / 376 * 100%);
  inset-block-start: calc(var(--y) / var(--decor-h) * 100%);
  inline-size: calc(var(--d) / 376 * 100%);
  aspect-ratio: 1;
}

/* --------------------------------------------------------------------------
   METALL · separadors, corbes, boles i orbes
   Les esferes del Figma estan girades 22,24°: el gir orienta el gradient i
   les ombres interiors, per això es giren aquí també (rotate), no s'hi
   canvia l'angle.
   -------------------------------------------------------------------------- */
.curve__path {
  fill: none;
  stroke: url(#metal-curve);
  stroke-width: 5.05;
  filter: url(#metal-tube);
}

.metal-dot {
  display: block;
  border-radius: 50%;
  background: var(--grad-metal-orb);
  box-shadow: var(--shadow-metal);
  rotate: 22.24deg;
}

/* Bombolla de vidre: només desenfoca el que té darrere i té una llum
   interior des de dalt. --tint li dona el vel fosc del 12 %. */
.glass-bubble {
  display: block;
  border-radius: 50%;
  box-shadow: inset 0 3px 9.2px var(--neutral-white);
  rotate: 22.24deg;
  -webkit-backdrop-filter: blur(2px) saturate(1.4);
  backdrop-filter: blur(2px) saturate(1.4);
}

.glass-bubble--tint {
  background: rgba(24, 25, 20, 0.12);
}

/* Orbe del procés: tres esferes CONCÈNTRIQUES (59, 38 i 22) centrades en
   un quadrat de 76,58. La gran és un halo desenfocat amb el farciment al
   76 %. Al Figma el quadrat («Group 35») retalla el contingut, però aquí el
   retall deixava veure les vores rectes del halo: no es retalla. */
.orb {
  position: relative;
  display: block;
  flex: none;
  inline-size: 76.58px;
  block-size: 76.58px;
}

.orb::before,
.orb::after,
.orb__core {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  background: var(--grad-metal-orb);
  box-shadow: var(--shadow-metal);
  rotate: 22.24deg;
}

.orb::before {
  inline-size: 58.72px;
  block-size: 58.72px;
  background: var(--grad-metal-orb-soft);
  filter: blur(9.45px);
}

.orb__core {
  inline-size: 38.44px;
  block-size: 38.44px;
}

.orb::after {
  inline-size: 21.68px;
  block-size: 21.68px;
}

/* --------------------------------------------------------------------------
   FORMULARI
   -------------------------------------------------------------------------- */
.field {
  display: grid;
  gap: 5px;
}

.field__label {
  color: var(--olive-600);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-label);
}

.field__control {
  position: relative;
}

.field__input {
  display: block;
  inline-size: 100%;
  min-block-size: 40px;
  padding: var(--space-8) var(--space-16);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--neutral-white);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-label);
}

.field__input::placeholder {
  color: var(--text-secondary);
  opacity: 1;
}

/* Les icones queden a 16 px de la vora dreta; el text no hi passa per sota */
.field__control:has(.field__icon) .field__input {
  padding-inline-end: calc(var(--space-16) * 2 + 16px);
}

.field__icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--space-16);
  inline-size: 16px;
  block-size: 16px;
  color: var(--text-secondary);
  translate: 0 -50%;
  pointer-events: none;
}

.field__select {
  appearance: none;
  cursor: pointer;
}

/* Mentre no s'ha triat res, el select es veu com un placeholder */
.field__select:has(option[value='']:checked) {
  color: var(--text-secondary);
}

.field__icon--select {
  color: #020202;
}

.field__textarea {
  min-block-size: 152px;
  resize: vertical;
}

/* Casella: 20 × 20, cantonada de 5 px. La vora del Figma (gris al 40 %)
   dona 1.9:1 sobre blanc i WCAG 1.4.11 en demana 3:1 per identificar el
   control: es fa servir el text secundari, 5.5:1. */
.check {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.check__input {
  appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  border: 1px solid var(--text-secondary);
  border-radius: var(--radius-sm);
  background: var(--neutral-white);
  cursor: pointer;
}

.check__input::before {
  content: '';
  inline-size: 10px;
  block-size: 6px;
  border-inline-start: 1.6px solid var(--neutral-white);
  border-block-end: 1.6px solid var(--neutral-white);
  rotate: -45deg;
  translate: 0 -1px;
  opacity: 0;
}

.check__input:checked {
  border-color: var(--olive-600);
  background: var(--olive-600);
}

.check__input:checked::before {
  opacity: 1;
}

.check__label {
  color: var(--text-primary);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
}

.check__label a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* --------------------------------------------------------------------------
   ENLLAÇOS · el subratllat creix des de l'esquerra (hover i focus)
   Als enllaços amb text en gradient el currentColor és transparent: el
   subratllat agafa --link-line.
   -------------------------------------------------------------------------- */
.site-footer__nav a,
.site-menu__list a,
.site-footer__contact a,
.site-footer__legal-links a {
  position: relative;
}

.site-footer__nav a::after,
.site-menu__list a::after,
.site-footer__contact a::after,
.site-footer__legal-links a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: var(--link-line, currentColor);
  scale: 0 1;
  transform-origin: left center;
  transition: scale var(--dur-base) var(--ease-out);
}

.site-footer__nav a,
.site-menu__list a {
  --link-line: var(--accent-rose);
}

.site-footer__nav a:focus-visible::after,
.site-menu__list a:focus-visible::after,
.site-footer__contact a:focus-visible::after,
.site-footer__legal-links a:focus-visible::after,
.site-footer__legal-links a[aria-current='page']::after {
  scale: 1 1;
}

@media (hover: hover) {
  .site-footer__nav a:hover::after,
  .site-menu__list a:hover::after,
  .site-footer__contact a:hover::after,
  .site-footer__legal-links a:hover::after {
    scale: 1 1;
  }
}

/* --------------------------------------------------------------------------
   ICONA DE MENÚ · tres línies que es tornen una X en obrir
   Mides de la icona del Figma: línies de 11, 16 i 11 px, traç de 1,6.
   -------------------------------------------------------------------------- */
.menu-icon {
  position: relative;
  display: block;
  inline-size: 24px;
  block-size: 24px;
}

.menu-icon span {
  position: absolute;
  inset-inline-start: 4px;
  inline-size: 16px;
  block-size: 1.6px;
  border-radius: 1px;
  background: currentColor;
  transition:
    translate var(--dur-base) var(--ease-out),
    rotate var(--dur-base) var(--ease-out),
    scale var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.menu-icon span:nth-child(1) { inset-block-start: 5.2px; scale: 0.6875 1; }
.menu-icon span:nth-child(2) { inset-block-start: 11.2px; }
.menu-icon span:nth-child(3) { inset-block-start: 17.2px; scale: 0.6875 1; }

[aria-expanded='true'] > .menu-icon span:nth-child(1) { translate: 0 6px; rotate: 45deg; scale: 1; }
[aria-expanded='true'] > .menu-icon span:nth-child(2) { opacity: 0; scale: 0.2 1; }
[aria-expanded='true'] > .menu-icon span:nth-child(3) { translate: 0 -6px; rotate: -45deg; scale: 1; }

/* --------------------------------------------------------------------------
   FORMULARI · estats
   Hover (només amb ratolí), focus (l'anell porpra de tot el lloc), error
   després d'interactuar-hi (vora i missatge) i vàlid (vora oliva i marca
   a l'etiqueta). Sense JavaScript, valida el navegador.
   -------------------------------------------------------------------------- */
.field__input,
.check__input {
  transition:
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .field__input:hover {
    box-shadow: inset 0 0 0 1px var(--border-light);
  }

  .check__input:hover {
    border-color: var(--olive-600);
  }
}

.field.is-valid .field__input {
  box-shadow: inset 0 0 0 1px var(--text-secondary);
}

.field__input[aria-invalid='true'],
.field__input[aria-invalid='true']:hover {
  box-shadow: inset 0 0 0 1.5px var(--color-error);
}

.check__input[aria-invalid='true'] {
  border-color: var(--color-error);
  box-shadow: 0 0 0 1px var(--color-error);
}

/* Marca de camp correcte, al costat de l'etiqueta */
.field__label::after {
  content: '';
  display: inline-block;
  inline-size: 12px;
  block-size: 12px;
  margin-inline-start: var(--space-8);
  vertical-align: -1px;
  background: var(--olive-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%23000' stroke-width='1.6' 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 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  scale: 0.5;
  transition: opacity var(--dur-base) var(--ease-out), scale var(--dur-base) var(--ease-spring);
}

.field.is-valid .field__label::after {
  opacity: 1;
  scale: 1;
}

.field__error,
.check__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--color-error);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
  animation: field-error-in var(--dur-base) var(--ease-out);
}

.field__error[hidden],
.check__error[hidden] {
  display: none;
}

/* Signe d'exclamació: l'error no es comunica només amb el color */
.field__error::before,
.check__error::before {
  content: '!';
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 16px;
  block-size: 16px;
  margin-block-start: 2px;
  border-radius: 50%;
  background: var(--color-error);
  color: var(--neutral-white);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1;
}

@keyframes field-error-in {
  from { opacity: 0; translate: 0 -4px; }
}

.check__input::before {
  transition: opacity var(--dur-fast) var(--ease-out), scale var(--dur-base) var(--ease-spring);
  scale: 0.4;
}

.check__input:checked::before {
  scale: 1;
}

/* Camp trampa de l'antispam: fora de la vista i de l'ordre de tabulació.
   No va amb display:none perquè alguns robots se'l salten. */
.form-trap {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Botó mentre s'envia: «Enviando…», la fletxa batega i no es pot tornar a
   prémer (main.js) */
.contact-form__submit.is-sending {
  cursor: progress;
}

.contact-form__submit.is-sending .icon {
  animation: send-pulse 1s var(--ease-in-out) infinite;
}

@keyframes send-pulse {
  0%, 100% { translate: 0 0; opacity: 1; }
  50% { translate: 4px 0; opacity: 0.4; }
}

/* Resultat de l'enviament. Enviat: crema i tinta del DS, amb la marca de
   camp correcte. Error: blanc amb el vermell dels errors (no és del DS, el
   mateix dels camps). */
.form-status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-lg);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
  animation: field-error-in var(--dur-base) var(--ease-out);
}

.form-status[hidden] {
  display: none;
}

.form-status a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.form-status::before {
  content: '';
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  margin-block-start: 2px;
  border-radius: 50%;
}

.form-status--ok {
  background: var(--bg-cream);
  color: var(--text-primary);
}

.form-status--ok::before {
  background: var(--olive-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3 7 10.6l4.5-5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.form-status--error {
  background: var(--neutral-white);
  box-shadow: inset 0 0 0 1.5px var(--color-error);
  color: var(--color-error);
}

.form-status--error::before {
  content: '!';
  display: grid;
  place-items: center;
  background: var(--color-error);
  color: var(--neutral-white);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1;
}