@import "tokens.css";

/* Hallmark · pre-emit critique: P5 H4 E5 S5 R5 V5
 * genre: modern-minimal · macrostructure: Split Studio
 * theme: custom (Cobalt structure, brand-tuned) — paper oklch(98.5% 0.004 250) · accent oklch(70% 0.13 85)
 * brand gold (sampled from the client's logo) · ink oklch(24% 0.02 258) navy · Space Grotesk/Inter/JetBrains Mono
 * contrast: pass (40–41) · nav: N9 · footer: Ft5 · slop: pass (42–45) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 * enrichment: the client's real logo (globe + ribbon mark) is now the hero's featured visual, replacing the
 *             earlier invented "operations console" mock — real brand art beats a placeholder every time
 * nav: N9 Edge-aligned minimal (Cobalt hairline + blur-on-scroll instead of the genre default N1b — the page is a
 *       single-scroll marketing page, not a multi-destination product, so N9's restraint reads truer to "minimalista"
 *       than a dense three-section bar; hairline + cool paper keep the Cobalt material language)
 * footer: Ft5 Statement
 * H2 Split Diptych knobs: ratio=7/5 · right=logo showcase card · divider=negative-space
 * one graphite band: "Qué hacemos" row 3 (logística) — the page's light → dark → light beat
 * motion primitives (3): page-load reveal stagger · CTA hover-lift · console dot pulse
 * rev.2: rebuilt from the client's own "Sobre Nosotros / Misión / Visión" copy — every claim on the page is
 *        theirs, verbatim or lightly tightened for measure; pricing and stat-strip sections dropped (not
 *        supplied, would have required placeholder numbers the client didn't ask for this round)
 * rev.3: client's real logo (navy + gold globe mark) supplied — accent re-anchored to the logo's sampled gold;
 *        --color-accent-text added (same hue, L50%) for every light-background text/border/icon use, since
 *        bright gold only clears 2.6:1 on paper (needs 3–4.5:1) but 6.4:1 on the dark graphite band
 * rev.4: logo mark now the hero's featured visual (large showcase card); nav + footer use a small icon mark
 *        (favicon.png, self-contained, no baked-in text) beside the actual "Terry's Shop" wordmark text, per
 *        the client's request not to let an image stand in for the written name anywhere on the page
 */

/* ---------------------------------------------------------------- */
/* Base                                                              */
/* ---------------------------------------------------------------- */

html, body { overflow-x: clip; }

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; margin: 0; }
p { margin: 0; }

.wrap {
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

section { padding-block: var(--space-3xl); }

/* Reveal — the whole motion engine */
.reveal { opacity: 0; transform: translateY(10px); }
.reveal.is-in {
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .reveal { opacity: 1; transform: none; animation: none; }
}

/* Focus */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: inherit;
}

::selection { background: var(--color-accent-soft); color: var(--color-ink); }

/* ---------------------------------------------------------------- */
/* Buttons + links                                                   */
/* ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  height: 44px;
  padding-inline: 1.25rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              transform 100ms var(--ease-out),
              opacity var(--dur-short) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--color-accent-hover); transform: translateY(-1.5px); }
}
.btn--primary:active { background: var(--color-accent-active); transform: translateY(1px); }

.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-rule-2);
}
@media (hover: hover) and (pointer: fine) {
  .btn--outline:hover { border-color: var(--color-accent-text); background: var(--color-accent-soft); }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 500;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-rule-2);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.link-arrow:hover { color: var(--color-accent-text); border-color: var(--color-accent-text); }
.link-arrow svg { width: 14px; height: 14px; transition: transform var(--dur-short) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(2px); }

/* ---------------------------------------------------------------- */
/* Nav — N9 Edge-aligned minimal, Cobalt hairline                    */
/* ---------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  background: color-mix(in oklch, var(--color-paper) 88%, transparent);
  backdrop-filter: blur(10px);
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.nav.is-scrolled { border-bottom-color: var(--color-rule); }

.nav__inner {
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

/* Brand lockup — small logo icon (self-contained mark, no baked-in text) + the actual
   "Terry's Shop" wordmark as real text. The client asked that the written name never be
   replaced by an image-only mark, so every appearance pairs icon + text. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}
.brand__icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex: none;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}
.btn__short { display: none; }
@media (max-width: 26rem) {
  .btn__full { display: none; }
  .btn__short { display: inline; }
  .brand__icon { width: 24px; height: 24px; }
}

.wordmark__tag {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  border: 1px solid var(--color-rule-2);
  border-radius: 4px;
  padding: 1px var(--space-2xs);
}

/* ---------------------------------------------------------------- */
/* Hero — H2 Split Diptych                                           */
/* ---------------------------------------------------------------- */

.hero {
  padding-block: var(--space-2xl) var(--space-3xl);
}

.hero-split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-2xl);
  align-items: center;
}

.hero__col h1 {
  font-size: var(--text-display-s);
  overflow-wrap: anywhere;
  min-width: 0;
  max-width: 20ch;
}

.hero__lede {
  margin-top: var(--space-lg);
  max-width: 46ch;
  font-size: var(--text-md);
  color: var(--color-ink-2);
}

.hero__ctas {
  margin-top: var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.hero__note {
  margin-top: var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Hero logo showcase — the client's real artwork, framed like every other card on the
   page (hairline border, radius-md, paper-2 fill) so its own light background reads as
   an intentional mat, not a mismatched image edge. */
.hero__mark {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  padding: var(--space-xl);
  display: grid;
  place-items: center;
}
.hero__mark img {
  width: 100%;
  max-width: 320px;
  height: auto;
}

/* ---------------------------------------------------------------- */
/* Section head — S2 Hanging (no eyebrow/tag)                        */
/* ---------------------------------------------------------------- */

.sec-head { max-width: 48ch; margin-bottom: var(--space-2xl); }
.sec-head h2 { font-size: var(--text-2xl); overflow-wrap: anywhere; min-width: 0; }
.sec-head p { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-md); }

/* ---------------------------------------------------------------- */
/* Benefits — Split Studio alternating diptych rows                  */
/* ---------------------------------------------------------------- */

.benefits { padding-block: var(--space-2xl) var(--space-3xl); }

.b-row {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: var(--space-2xl);
  align-items: center;
  padding-block: var(--space-2xl);
}
.b-row + .b-row { border-top: 1px solid var(--color-rule); }
.b-row--rev .b-row__text { order: 2; }
.b-row__text h3 { font-size: var(--text-xl); max-width: 18ch; overflow-wrap: anywhere; min-width: 0; }
.b-row__text p { margin-top: var(--space-md); color: var(--color-muted); max-width: 48ch; }

.b-row__proof {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  background: var(--color-paper-2);
}

/* proof: verification checklist */
.checklist { display: grid; gap: var(--space-sm); }
.checklist li { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); }
.checklist__mark {
  width: 18px; height: 18px; border-radius: 4px;
  background: var(--color-accent-soft); color: var(--color-accent-text);
  display: grid; place-items: center; flex: none;
}
.checklist__mark svg { width: 11px; height: 11px; }

/* proof: route diagram */
.route { display: flex; align-items: center; gap: var(--space-sm); padding-block: var(--space-sm); }
.route__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-ink); flex: none; }
.route__dot--end { background: var(--color-accent-text); }
.route__line { flex: 1; height: 1px; background: repeating-linear-gradient(to right, var(--color-rule-2) 0 6px, transparent 6px 11px); position: relative; }
.route__labels { display: flex; justify-content: space-between; margin-top: var(--space-xs); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }

/* Graphite band — benefit row 3, the page's one dark beat */
.b-row--dark {
  background: var(--color-graphite);
  color: var(--color-on-graphite);
  border-radius: var(--radius-md);
  padding: var(--space-2xl);
  border-top: none;
}
.b-row--dark .b-row__text h3 { color: var(--color-on-graphite); }
.b-row--dark .b-row__text p { color: var(--color-on-graphite-muted); }
.b-row--dark .b-row__proof { background: var(--color-graphite-2); border-color: var(--color-graphite-rule); }

/* proof: shipment status stepper */
.stepper { display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-md); position: relative; padding-bottom: var(--space-lg); }
.step:last-child { padding-bottom: 0; }
.step__node { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--color-graphite-rule); background: var(--color-graphite); display: grid; place-items: center; z-index: 1; }
.step__node::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-on-graphite-muted); }
.step.is-active .step__node { border-color: var(--color-accent); }
.step.is-active .step__node::after { background: var(--color-accent); }
.step:not(:last-child)::before {
  content: ""; position: absolute; left: 9px; top: 20px; width: 2px; height: calc(100% - 20px);
  background: var(--color-graphite-rule);
}
.step__label { font-size: var(--text-sm); padding-top: 1px; }
.step__label strong { display: block; font-weight: 500; color: var(--color-on-graphite); }
.step__label span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-on-graphite-muted); }

/* ---------------------------------------------------------------- */
/* Chip row — proof for "Diversificación de catálogo"                */
/* ---------------------------------------------------------------- */

.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.chip {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-2);
  background: var(--color-paper);
  border: 1px solid var(--color-rule-2);
  border-radius: 999px;
  padding: var(--space-2xs) var(--space-md);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- */
/* Catálogo — F1 Bento grid, mixed spans (not a uniform icon-tile 3-col) */
/* ---------------------------------------------------------------- */

.cat { padding-block: var(--space-2xl) var(--space-3xl); }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.cat-tile {
  grid-column: span 1;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cat-tile:hover { border-color: var(--color-accent-text); background: var(--color-accent-soft); transform: translateY(-2px); }
}

.cat-icon {
  width: 22px; height: 22px;
  flex: none;
  color: var(--color-ink-2);
  transition: color var(--dur-short) var(--ease-out);
}
.cat-tile:hover .cat-icon { color: var(--color-accent-text); }

.cat-tile__name { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }

/* CTA tile spans the full row width — it's the 13th tile after 12 equal-size
   categories (a clean 4-column × 3-row grid), so it reads as a closing banner
   rather than an odd tile trailing off a half-empty last row. */
.cat-tile--cta {
  grid-column: 1 / -1;
  justify-content: center;
  background: var(--color-graphite);
  border-color: var(--color-graphite-rule);
}
.cat-tile--cta .cat-tile__name { color: var(--color-on-graphite); }
.cat-tile--cta .cat-icon { color: var(--color-accent); }
.cat-tile--cta:focus-visible { outline-color: var(--color-focus-on-dark); }
@media (hover: hover) and (pointer: fine) {
  .cat-tile--cta:hover { border-color: var(--color-accent); background: var(--color-graphite-2); transform: translateY(-2px); }
}

.cat-note { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.cat-note strong { color: var(--color-ink-2); font-weight: 500; }

/* ---------------------------------------------------------------- */
/* Proyección internacional — light section, route diagram reused    */
/* ---------------------------------------------------------------- */

.intl {
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.intl-grid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: var(--space-2xl);
  align-items: center;
}
.intl__proof {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-paper-2);
}

/* ---------------------------------------------------------------- */
/* Reasons — "Por qué ser socio comercial" (stacked, no eyebrows)    */
/* ---------------------------------------------------------------- */

.reasons { display: grid; }
.reason {
  padding-block: var(--space-xl);
  border-top: 1px solid var(--color-rule);
  display: grid;
  gap: var(--space-sm);
}
.reason h3 { font-size: var(--text-lg); max-width: 34ch; overflow-wrap: anywhere; min-width: 0; }
.reason p { color: var(--color-muted); max-width: 60ch; }

/* ---------------------------------------------------------------- */
/* Misión y visión                                                   */
/* ---------------------------------------------------------------- */

.mv-lede { max-width: 60ch; color: var(--color-ink-2); font-size: var(--text-md); margin-bottom: var(--space-2xl); }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
.mv-card { padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.mv-card__label { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent-text); }
.mv-card p { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 48ch; }

/* ---------------------------------------------------------------- */
/* Final CTA                                                         */
/* ---------------------------------------------------------------- */

/* Photo background — client-supplied trade-route image. A dark scrim (linear gradient)
   sits over the whole photo so the heading and contact links stay legible regardless of
   what's underneath, plus a tighter radial patch in the bottom-right corner, where the
   source photo carries a third-party "Global Trade Partners" watermark unrelated to this
   brand — the patch reads as an intentional vignette rather than a crop artifact. */
.cta-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cta-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(ellipse 260px 200px at 95% 98%, oklch(16% 0.014 260 / 0.98) 0%, oklch(16% 0.014 260 / 0.98) 45%, transparent 100%),
    linear-gradient(115deg, oklch(16% 0.014 260 / 0.90) 0%, oklch(16% 0.014 260 / 0.78) 45%, oklch(16% 0.014 260 / 0.62) 100%),
    url("assets/cta-bg.jpg");
  background-size: cover;
  background-position: center;
}
.cta-strip__inner {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: center;
  gap: var(--space-xl);
  padding-block: var(--space-3xl);
}
.cta-strip h2 {
  font-size: var(--text-2xl);
  max-width: 16ch;
  overflow-wrap: anywhere;
  min-width: 0;
  color: var(--color-on-graphite);
}
.cta-strip__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}
.cta-strip__actions .btn:focus-visible { outline-color: var(--color-focus-on-dark); }

/* Direct contact channels — email + phone, listed plainly beside the CTA button
   rather than folded into it, so both stay legible and independently clickable. */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-on-graphite);
  font-size: var(--text-sm);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.contact-list a:hover,
.contact-list a:focus-visible {
  color: var(--color-accent);
  border-bottom-color: currentColor;
}
.contact-list a:focus-visible { outline-color: var(--color-focus-on-dark); }
.contact-list svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--color-on-graphite-muted);
}

/* ---------------------------------------------------------------- */
/* Footer — Ft5 Statement                                            */
/* ---------------------------------------------------------------- */

.foot-stmt {
  border-top: 1px solid var(--color-rule);
  padding: var(--space-2xl) 0 var(--space-xl);
}
.foot-stmt__line {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 24ch;
  overflow-wrap: anywhere;
  min-width: 0;
}
.foot-stmt__meta {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.foot-stmt__links { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.foot-stmt__links a { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.foot-stmt__links a:hover { color: var(--color-accent-text); }
.foot-stmt__copy { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }

/* ---------------------------------------------------------------- */
/* Responsive                                                        */
/* ---------------------------------------------------------------- */

@media (max-width: 60rem) {
  .hero-split { grid-template-columns: 1fr; }
  .hero__col h1 { max-width: 22ch; }
  .b-row, .b-row--rev .b-row__text { grid-template-columns: 1fr; }
  .b-row { grid-template-columns: 1fr; }
  .b-row--rev .b-row__text { order: 0; }
  .cta-strip__inner { grid-template-columns: 1fr; }
  .intl-grid { grid-template-columns: 1fr; }
  .mv-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40rem) {
  section { padding-block: var(--space-2xl); }
  .hero { padding-block: var(--space-2xl) var(--space-xl); }
  .hero__col h1 { font-size: var(--text-display-s); max-width: 100%; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn, .hero__ctas .link-arrow { width: 100%; justify-content: center; text-align: center; }
  .b-row--dark { padding: var(--space-lg); }
  .cta-strip h2 { font-size: var(--text-xl); max-width: 100%; }
  .cta-strip__actions { width: 100%; }
  .cta-strip__actions .btn { width: 100%; justify-content: center; }
  .intl__proof { padding: var(--space-lg) var(--space-md); }
  .cat-grid { grid-template-columns: 1fr; }
  .cat-tile { padding: var(--space-md); }
}

/* Buttons / links never wrap to a second line */
.btn, .link-arrow, .wordmark, .foot-stmt__links a { white-space: nowrap; }