/* ==========================================================================
   LNY · páginas interiores · PROTOTIPO partake-test (módulos de partakefoods.com/pages/about, estética LNY) (maqueta estática, no es Liquid)

   TOKENS copiados de snippets/css-variables.liquid (origen). Los valores de
   paleta son los `default` de config/settings_schema.json (settings.*).
   Si el theme cambia, esto es lo que hay que resincronizar; el resto del
   archivo solo consume var(--token).

   Explorer: UN solo peso (400). Sin negritas sobre display, sin mayúsculas
   condensadas, sin cursor personalizado (reglas cerradas del proyecto).
   ========================================================================== */

@font-face {
  font-family: 'Explorer';
  src: url('../../../assets/Explorer-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 1. PRIMITIVOS (settings_schema defaults) */
  --color-background: #EFDBB2;       /* crema de marca */
  --color-foreground: #56192B;       /* tinta */
  --color-accent: #651D32;           /* granate */
  --color-highlight: #F8AC67;        /* naranja suave */
  --color-background-alt: #FDFBF7;   /* blanco roto = superficie por defecto */
  --color-cta: #FF894E;              /* naranja CTA */
  --color-cream-soft: #FAF4E8;
  --color-inverse: #ffffff;
  --font-display--family: 'Explorer', ui-sans-serif, system-ui, sans-serif;
  --font-primary--family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --page-width: 1280px;
  --page-margin: 40px;

  /* 2. SEMÁNTICOS (derivados con color-mix, igual que el theme) */
  --color-hairline: color-mix(in srgb, var(--color-accent) 20%, transparent);
  --color-hairline-inverse: color-mix(in srgb, var(--color-background) 25%, transparent);
  --color-on-light-muted: color-mix(in srgb, var(--color-foreground) 72%, var(--color-background));
  --color-text: var(--color-foreground);
  --color-text-inverse: var(--color-background);
  --color-text-muted: var(--color-on-light-muted);
  --color-outline: var(--color-accent);

  /* 3. ESCALAS */
  --shadow-hard: 0 4px 0 var(--color-outline);
  --radius-pill: 999px;
  --radius-sm: 6px;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --spacing-4: .25rem; --spacing-8: .5rem; --spacing-12: .75rem; --spacing-16: 1rem;
  --spacing-24: 1.5rem; --spacing-32: 2rem; --spacing-40: 2.5rem; --spacing-48: 3rem;
  --spacing-64: 4rem; --spacing-80: 5rem; --spacing-96: 6rem; --spacing-120: 7.5rem;
  --font-size-display-xl: clamp(2rem, 1.256rem + 3.05vw, 4rem);
  --font-size-display-lg: clamp(1.75rem, 1.19rem + 2.29vw, 3rem);
  --font-size-display-md: clamp(1.625rem, 1.207rem + 1.71vw, 2.75rem);
  --font-size-body: 1rem;
  --font-size-body-lg: 1.125rem;
  --line-height-display: 1.2;
  --line-height-body: 1.5;
  --font-size-eyebrow: .8125rem;
  --letter-spacing-eyebrow: .14em;
  --border-frame-thin: 4px;
  --border-frame-thick: 8px;

  /* 4. APLICADOS */
  --section-padding-md: clamp(var(--spacing-48), 7vw, var(--spacing-80));
  --section-padding-lg: clamp(var(--spacing-64), 10vw, var(--spacing-120));
  --motion-duration-200: 200ms;
  --motion-duration-600: 600ms;
  --motion-duration-1000: 1000ms;
  --motion-ease-out: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --motion-marquee-duration: 30s;

  /* Solo del prototipo (derivados, no tokens del theme) */
  --gutter: clamp(20px, 4vw, var(--page-margin));
  --ink: var(--color-text);
  --line: var(--color-hairline);
  --mk: var(--color-cta);
  --frame: var(--color-accent);
  --frame-shadow: var(--color-accent);
  --btn-line: var(--color-accent);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-background-alt);
  color: var(--color-text);
  font-family: var(--font-primary--family);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
strong { font-weight: 700; }
/* La palabra destacada (<em> del template) va sobre un rotulador, no en cursiva sola */
em {
  font-style: italic;
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--color-highlight) 75%, transparent) 58%);
  padding-inline: .06em;
}
.sf-accent em, .sf-cta em { background: none; text-decoration: underline; text-decoration-color: var(--mk); text-decoration-thickness: .12em; text-underline-offset: .12em; }
.wrap { max-width: var(--page-width); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: var(--section-padding-lg); }
.sec--md { padding-block: var(--section-padding-md); }
.eyebrow {
  font-size: var(--font-size-eyebrow);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Superficies (equivalen a section-surface del theme) */
.sf-paper  { background: var(--color-background-alt); }
.sf-soft   { background: var(--color-cream-soft); }
.sf-cream  { background: var(--color-background); }
.sf-accent {
  background: var(--color-accent);
  --ink: var(--color-background);
  --line: var(--color-hairline-inverse);
  --frame: var(--color-background);
  --frame-shadow: var(--color-highlight);
  --btn-line: var(--color-background);
  color: var(--ink);
}
.sf-accent .eyebrow { color: color-mix(in srgb, var(--color-background) 78%, var(--color-accent)); }
.sf-cta {
  background: var(--color-cta);
  --mk: var(--color-accent);
  --frame-shadow: var(--color-accent);
}
.sf-cta .eyebrow { color: var(--color-foreground); }

/* ---------- tipografía display ---------- */
.giant {
  font-family: var(--font-display--family);
  font-weight: 400;
  font-size: clamp(3.3rem, 12.4vw, 12rem);
  line-height: .98;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.giant--md { font-size: clamp(2.9rem, 9.4vw, 9rem); }
.giant--sm { font-size: clamp(2.6rem, 8vw, 7rem); }
.giant .ln, .fq__text .ln { display: block; }
.h2 {
  font-family: var(--font-display--family);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 4.25rem);
  line-height: 1.06;
  text-wrap: balance;
}
.h3 { font-family: var(--font-display--family); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.1; }
.lead { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.5; max-width: 40rem; }
.prose p + p { margin-top: 1.1em; }
.prose { max-width: 38rem; }

/* ---------- marcos con sombra dura (page-story) ---------- */
.frame { position: relative; isolation: isolate; }
.frame::after {
  content: ''; position: absolute; z-index: -1;
  inset: var(--spacing-12) var(--spacing-12) calc(var(--spacing-12) * -1) calc(var(--spacing-12) * -1);
  border-radius: var(--fr, var(--radius-lg));
  background: var(--frame-shadow);
}
.frame > img {
  width: 100%; height: 100%; object-fit: cover;
  border: var(--border-frame-thin) solid var(--frame);
  border-radius: var(--fr, var(--radius-lg));
  background: var(--color-cream-soft);
}

/* ---------- cabecera / pie de maqueta ---------- */
.mast { background: var(--color-background); position: relative; z-index: 20; }
.mast__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 14px; }
.mast__brand { font-family: var(--font-display--family); font-size: 1.9rem; text-decoration: none; line-height: 1; color: var(--color-accent); }
.mast__nav { display: flex; gap: 1.4rem; font-size: .95rem; font-weight: 600; }
.mast__nav a { text-decoration: none; padding-block: .3rem; border-bottom: 2px solid transparent; }
.mast__nav a:hover, .mast__nav a[aria-current] { border-bottom-color: var(--color-cta); }
@media (max-width: 989px) { .mast__nav { display: none; } .mast__in { justify-content: center; } }
.foot { background: var(--color-accent); color: var(--color-background); overflow: hidden; padding-top: var(--spacing-64); }
.foot__nav { display: flex; flex-wrap: wrap; gap: .8rem 2rem; font-weight: 600; padding-bottom: var(--spacing-32); }
.foot__nav a { text-decoration: underline; text-underline-offset: 4px; }
.foot__word { font-family: var(--font-display--family); font-size: 12.4vw; line-height: .8; white-space: nowrap; margin: 0 0 .12em; text-align: center; }
.foot__legal { font-size: .8rem; opacity: .8; padding-block: 1rem; }

/* Ticker */
.ticker { overflow: hidden; border-block: 2px solid var(--line); padding-block: .5em; white-space: nowrap; }
.ticker__track { display: inline-flex; width: max-content; }
.ticker__set { display: inline-flex; align-items: center; flex: none; }
.ticker__set > * { padding-inline: .5em; }
.ticker--big { font-family: var(--font-display--family); font-size: clamp(3rem, 8vw, 7.5rem); line-height: 1.05; }
.ticker__dot { width: .38em; height: .38em; flex: none; background: currentColor; border-radius: 50%; padding: 0 !important; margin-inline: .35em; }
.ticker__flower { width: 1em; height: 1em; flex: none; }
.motion .ticker__track { animation: tick var(--motion-marquee-duration) linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.ticker--static .ticker__track { animation: none !important; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none !important; } .ticker { white-space: normal; } .ticker__track { width: auto; flex-wrap: wrap; } .ticker__set[aria-hidden] { display: none; } }

.hl{background:linear-gradient(color-mix(in srgb,var(--color-highlight) 80%,transparent),color-mix(in srgb,var(--color-highlight) 80%,transparent)) 0 88%/100% .42em no-repeat}

/* ==================== PARTAKE-TEST ==================== */
:root {
  --tilt: 6deg;               /* solo prototipo: inclinación de las fotos del slider */
  --tl-gap: var(--spacing-32);
  --tl-speed: 500ms;          /* = speed de Swiper en Partake */
  --h1-size: var(--font-size-display-xl);
  --h3-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.h1 { font-family: var(--font-display--family); font-weight: 400; font-size: var(--h1-size); line-height: var(--line-height-display); text-wrap: balance; }
:focus-visible { outline: 3px solid var(--color-cta); outline-offset: 3px; }
.ico { display: block; width: 1.5rem; height: 1.5rem; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.ico--l { --m: url('../../../assets/icon-arrow-left.svg'); } .ico--r { --m: url('../../../assets/icon-arrow-right.svg'); }

/* 1 · Banner */
.banner { position: relative; min-height: min(80vh, 46rem); display: grid; align-items: end; color: var(--color-inverse); overflow: hidden; }
.banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, color-mix(in srgb, var(--color-foreground) 88%, transparent), color-mix(in srgb, var(--color-foreground) 30%, transparent) 65%, transparent); }
.banner__in { position: relative; z-index: 2; width: 100%; padding-block: var(--section-padding-md); }
.banner .eyebrow { color: var(--color-highlight); margin-bottom: var(--spacing-12); }
.banner .h1 { max-width: 16ch; }
.banner__sub { margin-top: var(--spacing-16); max-width: 36rem; font-size: var(--font-size-body-lg); }
.ticker { font-family: var(--font-display--family); font-size: var(--font-size-display-md); border-block: 0; padding-block: var(--spacing-8); }
.ticker__flower { width: .9em; height: .9em; margin-inline: .4em; }
.motion .ticker__track { animation-duration: var(--motion-marquee-duration); }

/* 3 · Timeline (slider) */
.tl__h { margin-top: var(--spacing-8); }
.tl__stage { position: relative; margin-top: var(--spacing-40); }
.tl__track {
  display: flex; gap: var(--tl-gap); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth;
}
.tl__track::-webkit-scrollbar { display: none; }
.tl__track.is-drag { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.tl__slide {
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; grid-template-columns: 1fr minmax(0, 34rem) 1fr; align-items: center; gap: var(--spacing-48);
  padding: var(--spacing-80) var(--spacing-80) var(--spacing-48); min-height: 26rem;
}
.tl__text { text-align: center; font-size: var(--font-size-body-lg); }
.tl__title { font-family: var(--font-display--family); font-weight: 400; font-size: var(--font-size-display-lg); line-height: var(--line-height-display); margin-bottom: var(--spacing-16); color: var(--color-accent); }
.tl__img { max-width: 17rem; width: 100%; }
.tl__img--1 { justify-self: end; transform: rotate(calc(var(--tilt) * -1)); }
.tl__img--2 { justify-self: start; transform: rotate(var(--tilt)) translateY(-15%); }
.tl__img .frame > img { aspect-ratio: 4 / 5; }
.tl__arrow {
  display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; cursor: pointer;
  background: var(--color-cta); color: var(--color-foreground);
  border: 2px solid var(--color-accent); border-radius: 50%; box-shadow: 0 3px 0 var(--color-accent);
  transition: transform var(--motion-duration-200) var(--motion-ease-out), box-shadow var(--motion-duration-200) var(--motion-ease-out), opacity var(--motion-duration-200);
}
.tl__arrow:hover:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--color-accent); }
.tl__arrow:disabled { opacity: .35; cursor: default; }
.tl__stage > .tl__arrow { position: absolute; top: 50%; margin-top: -1.5rem; z-index: 2; }
.tl__stage > .tl__arrow--prev { left: var(--spacing-16); } .tl__stage > .tl__arrow--next { right: var(--spacing-16); }
.tl__arrows-m { display: none; }
.tl__nav { overflow-x: auto; scrollbar-width: none; margin-top: var(--spacing-32); padding-block: var(--spacing-16) var(--spacing-24); scroll-behavior: smooth; }
.tl__nav::-webkit-scrollbar { display: none; }
.tl__rail { position: relative; min-width: max-content; padding-top: var(--spacing-24); padding-inline: var(--gutter); }
.tl__rail::before, .tl__bar { content: ''; position: absolute; top: var(--spacing-8); left: 0; height: 2px; background: var(--color-hairline); width: 100%; }
.tl__bar { background: var(--color-accent); width: 0; transition: width var(--tl-speed) var(--motion-ease-in-out); }
.tl__dot { position: absolute; top: var(--spacing-8); left: 0; width: var(--spacing-16); height: var(--spacing-16); margin: calc(var(--spacing-8) * -1) 0 0 calc(var(--spacing-8) * -1); border-radius: 50%; background: var(--color-accent); transition: left var(--tl-speed) var(--motion-ease-in-out); }
.tl__tabs { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: var(--spacing-24); }
.tl__tab {
  font: 600 var(--font-size-body)/1 var(--font-primary--family); letter-spacing: .04em; cursor: pointer; white-space: nowrap;
  padding: var(--spacing-12) var(--spacing-24); background: var(--color-background-alt); color: var(--color-foreground);
  border: 2px solid var(--color-accent); border-radius: var(--radius-pill); box-shadow: 0 3px 0 var(--color-accent);
  transition: background var(--motion-duration-200), color var(--motion-duration-200), transform var(--motion-duration-200) var(--motion-ease-out);
}
.tl__tab[aria-current="true"] { background: var(--color-accent); color: var(--color-background); transform: translateY(2px); box-shadow: 0 1px 0 var(--color-accent); }
@media (max-width: 989px) {
  .tl__slide { grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "t t"; padding: var(--spacing-40) var(--gutter) var(--spacing-16); gap: var(--spacing-24); min-height: 0; }
  .tl__img--1 { grid-area: a; justify-self: end; } .tl__img--2 { grid-area: b; justify-self: start; transform: rotate(var(--tilt)) translateY(-8%); }
  .tl__text { grid-area: t; }
  .tl__img { max-width: 9.5rem; }
  .tl__stage > .tl__arrow { display: none; }
  .tl__arrows-m { display: flex; justify-content: center; gap: var(--spacing-16); }
}
@media (prefers-reduced-motion: reduce) { .tl__track, .tl__nav { scroll-behavior: auto; } .tl__bar, .tl__dot, .tl__tab, .tl__arrow { transition: none; } }

/* 4 · Split panel */
.panel { display: grid; grid-template-columns: minmax(0, .8fr) 1.2fr; gap: var(--spacing-64); align-items: center; background: var(--color-highlight); color: var(--color-foreground); border-radius: var(--radius-lg); padding: var(--spacing-64); }
.panel__ph { max-width: 22rem; justify-self: center; width: 100%; --frame-shadow: var(--color-accent); }
.panel__txt .h2 { margin-bottom: var(--spacing-24); }
.panel .hl { background-image: linear-gradient(var(--color-background), var(--color-background)); }
.panel .prose { max-width: 36rem; }
@media (max-width: 989px) { .panel { grid-template-columns: 1fr; padding: var(--spacing-40) var(--spacing-24); gap: var(--spacing-48); } }

/* 5 · Equipo */
.team__h { margin-bottom: var(--spacing-48); margin-top: var(--spacing-8); }
.team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-48) var(--spacing-32); }
.tm__name { font-family: var(--font-display--family); font-weight: 400; font-size: var(--h3-size); line-height: var(--line-height-display); margin-top: var(--spacing-24); }
.tm__role { font-weight: 600; color: var(--color-text-muted); }
.tm__fav { margin-top: var(--spacing-8); font-size: var(--font-size-body); }
.tm__fav span { display: block; font-size: var(--font-size-eyebrow); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
@media (max-width: 989px) { .team { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 749px) { .team { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-40) var(--spacing-16); }  .tm__fav { font-size: .875rem; } }