/* ==========================================================================
   Lujo — somoslujo.com
   Hoja de estilos única del sitio. Sin build step: se sirve tal cual.
   Fuentes: assets/fonts (self-hosted, subset "latin" únicamente — cubre
   todos los caracteres del español, ver comentario junto a @font-face).
   ========================================================================== */

/* ---- Fuentes (variable fonts: un solo archivo cubre 400 y 600) ---- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/lora-latin.woff2") format("woff2");
}

/* ---- Tokens de diseño ---- */
:root {
  --color-bg: #f3f2f2;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-accent-100: #fff3e4;
  --color-accent-700: #7d5411;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  --ink: #201f1d;
  --brand: #fdb745;

  --font-heading: "Cormorant Garamond", system-ui, sans-serif;
  --font-body: "Lora", system-ui, sans-serif;

  --radius-md: 4px;
}

/* ---- Reset base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  text-wrap: pretty;
}
h1, h2 { margin: 0; font-family: var(--font-heading); }
p { margin: 0; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-700); }
img { display: block; max-width: 100%; }
ol { list-style: none; margin: 0; padding: 0; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* ---- Utilidades ---- */
.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--brand);
  color: var(--ink);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; }

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(72px, 11vw, 168px) clamp(20px, 5vw, 72px);
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--brand);
  text-decoration: none;
  border-radius: var(--radius-md);
}
.btn-cta:hover { color: var(--ink); background: color-mix(in srgb, var(--brand) 85%, white); }

.link-accent {
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--color-accent-700);
}

.section-kicker {
  display: block;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh;
  min-height: 660px;
  overflow: hidden;
  background: var(--ink);
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(24, 23, 21, 0.35) 0%,
    rgba(24, 23, 21, 0.1) 34%,
    rgba(24, 23, 21, 0.28) 66%,
    rgba(24, 23, 21, 0.8) 100%);
  pointer-events: none;
}

.hero__nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: clamp(22px, 3vw, 34px) clamp(20px, 5vw, 72px);
  color: #f6f3ee;
}
.hero__logo { height: clamp(64px, 7.5vw, 104px); width: auto; }
.hero__ig-link {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f6f3ee;
  border-bottom: 1px solid rgba(246, 243, 238, 0.6);
  padding-bottom: 3px;
}
.hero__ig-link:hover { color: var(--brand); border-color: var(--brand); }

.hero__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(40px, 7vw, 96px) clamp(20px, 5vw, 72px) clamp(48px, 7vw, 88px);
}
.hero__title {
  font-weight: 400;
  font-size: clamp(40px, 7.4vw, 112px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #f8f5f0;
  max-width: 17ch;
  pointer-events: none;
}
.hero__title em { font-style: italic; color: var(--brand); }
.hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(28px, 4vw, 44px);
}
.hero__lead {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.65;
  color: rgba(246, 243, 238, 0.9);
  max-width: 46ch;
  pointer-events: none;
}
.hero .btn-cta {
  font-size: 17px;
  padding: 15px 28px;
}

/* ==========================================================================
   Statement 1 — luz
   ========================================================================== */
.statement-1 .section-kicker { margin-bottom: clamp(40px, 6vw, 72px); }
.statement-1__lead {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(30px, 5vw, 76px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 24ch;
}
.statement-1__lead p:nth-child(2) { margin-top: 0.35em; color: color-mix(in srgb, var(--color-text) 42%, transparent); }
.statement-1__lead p:nth-child(3) { margin-top: 0.7em; }
.statement-1__lead em { font-style: italic; color: var(--color-accent); }

.statement-1__quote {
  max-width: 640px;
  margin: clamp(48px, 7vw, 88px) 0 0 auto;
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.3;
}
.statement-1__quote p:last-child { margin-top: 0.2em; color: var(--color-accent); }

/* ==========================================================================
   Statement 2 — oscuro
   ========================================================================== */
.statement-2 { background: var(--ink); color: #f6f3ee; }
.statement-2 .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.statement-2__lead {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.statement-2__lead p:nth-child(2) { margin-top: 0.25em; }
.statement-2__lead p:nth-child(3) { margin-top: 0.5em; color: var(--brand); }
.statement-2__aside { align-self: end; }
.statement-2__aside p:first-child {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  color: rgba(246, 243, 238, 0.72);
}
.statement-2__aside p:last-child {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.2;
  margin-top: 0.4em;
}

/* ==========================================================================
   Proceso
   ========================================================================== */
.proceso .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.proceso__side { position: sticky; top: 40px; }
.proceso__side .section-kicker { margin-bottom: clamp(24px, 3vw, 36px); }
.proceso__heading {
  font-weight: 400;
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: clamp(28px, 4vw, 44px);
  max-width: 14ch;
}
.proceso__image { width: 100%; height: auto; }

.proceso__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 2.6vw, 36px);
  align-items: baseline;
  padding: clamp(22px, 3vw, 32px) 0;
  border-top: 1px solid var(--color-divider);
}
.proceso__item:last-child { border-bottom: 1px solid var(--color-divider); }
.proceso__num {
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.8vw, 24px);
  color: var(--color-accent);
  font-feature-settings: "tnum" 1;
}
.proceso__text {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.proceso__item--accent .proceso__text { color: var(--color-accent); }

/* ==========================================================================
   Frase ámbar
   ========================================================================== */
.quote-section { background: var(--brand); color: var(--ink); overflow: hidden; }
.quote-section .container { text-align: center; }
.quote-section__logo {
  width: min(300px, 60%);
  height: auto;
  margin: 0 auto clamp(40px, 6vw, 72px);
}
.quote-section__text {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(40px, 8vw, 120px);
  line-height: 1;
  letter-spacing: -0.025em;
}
.quote-section__text em { font-style: italic; display: block; margin-top: 0.1em; }

/* ==========================================================================
   Clientes
   ========================================================================== */
.clientes__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.clientes__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.clientes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.client-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 36px);
  min-height: 260px;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: border-color 0.3s, background 0.3s;
}
.client-card:hover, .client-card:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent-100);
}
.client-card__logo {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.client-card__logo img { width: auto; max-height: 72px; }
.client-card__logo img.is-large { max-height: 108px; }
.client-card__logo img.is-wide { width: 100%; height: auto; max-height: 96px; }
.client-card__name {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.client-card__handle {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.client-card--placeholder {
  justify-content: center;
  gap: 14px;
  min-height: 260px;
  padding: clamp(24px, 3vw, 32px);
  border: 1px dashed var(--color-divider);
  border-radius: var(--radius-md);
}
.client-card--placeholder p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

@media (max-width: 640px) {
  .client-card__logo { height: 150px; }
  .client-card__logo img { max-height: 108px; }
  .client-card__logo img.is-large { max-height: 150px; }
  .client-card__logo img.is-wide { max-height: 150px; }
}

/* ==========================================================================
   CTA final + footer
   ========================================================================== */
.cta-final { background: var(--ink); color: #f6f3ee; }
.cta-final .section-kicker { color: var(--brand); margin-bottom: clamp(40px, 6vw, 72px); }
.cta-final__heading {
  font-weight: 400;
  font-size: clamp(34px, 6vw, 92px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.cta-final__heading em { font-style: italic; color: var(--brand); }
.cta-final .hero__row { margin-top: clamp(48px, 7vw, 88px); }
.cta-final .btn-cta { font-size: clamp(18px, 1.6vw, 22px); padding: 16px 32px; }
.cta-final .link-accent { color: rgba(246, 243, 238, 0.75); }

.site-footer {
  background: var(--ink);
  color: #f6f3ee;
  border-top: 1px solid rgba(246, 243, 238, 0.14);
}
.site-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 5vw, 72px);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-size: 13px;
  color: rgba(246, 243, 238, 0.55);
}
.site-footer__brand {
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--brand);
}
.site-footer__brand sup { font-size: 0.5em; vertical-align: super; }

/* ==========================================================================
   Responsive — hero / proceso en mobile
   ========================================================================== */
@media (max-width: 820px) {
  .proceso__side { position: static; }
  .hero { min-height: 0; height: auto; min-height: 88svh; }
  .hero__inner { position: static; padding-top: clamp(120px, 26vw, 180px); }
  .hero__bg { position: absolute; }
}

@supports (height: 100svh) {
  .hero { height: 100svh; }
}