/* ============================================================
   Yasme Pinta — landing de encargos (layout)
   Shared by index.html (ES) + en.html (EN).
   Centered / contained gallery layout. Light neutral background.
   Color/type tokens from colors_and_type.css.
   ============================================================ */
:root {
  --paper: #fbf9f4;        /* primary light neutral surface (per design brief) */
  --container: 1200px;     /* centered, contained — not full-bleed */
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
html, body { min-height: 100%; }
img { max-width: 100%; display: block; }

/* Whole-page warmth: lighter neutral + a felt-not-seen dot grain (item 11) */
body {
  margin: 0;
  background-color: var(--paper);
  background-image: radial-gradient(circle,
    color-mix(in oklab, var(--ink) 5%, transparent) 1px, transparent 1.5px);
  background-size: 24px 24px;
  color: var(--ink);
}

/* Centered container with generous lateral margins */
.container { max-width: var(--container); margin: 0 auto; padding: 0 48px; }

/* ---- Header + anchor nav ----------------------------------- */
.lp-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
.lp-bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; gap: 24px;
}
.lp-header .logo img { height: 32px; width: auto; }
.lp-nav { display: flex; align-items: center; gap: 26px; }
.lp-nav-links { display: flex; align-items: center; gap: 16px;
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; }
.lp-nav-links a { color: var(--ink-2); background-image: none; }
.lp-nav-links a:hover { color: var(--ink); }
.lp-nav-links .sep { color: var(--ink-3); opacity: 0.5; }

/* Language toggle — segmented pill control (works on light surfaces) */
.lp-lang { display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-body); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; }
.lp-lang .sep { display: none; }
.lp-lang a, .lp-lang .is-on {
  display: inline-block; padding: 4px 9px; line-height: 1;
  border-radius: var(--radius-pill); background-image: none; }
.lp-lang a { color: var(--ink-3);
  transition: background-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft); }
.lp-lang a:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 7%, transparent); }
.lp-lang .is-on { color: var(--paper); background: var(--blue); font-weight: 700; }

/* ---- Buttons ----------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-button); letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  border-radius: var(--radius-2); cursor: pointer;
  padding: 15px 28px; border: 1.5px solid transparent;
  background-image: none;
  transition: background-color var(--dur-base) var(--ease-painterly),
              color var(--dur-base) var(--ease-painterly),
              border-color var(--dur-base) var(--ease-painterly);
}
.btn .arr { font-family: var(--font-display); font-style: italic; font-weight: 400; }
.btn-primary { background: var(--blue); color: var(--cream); border-color: var(--blue); }
/* artisanal-gold CTA — reads strong on the navy band */
.btn-gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
/* rest state clean; hover reveals a faint gold-stroke texture */
.btn-primary:hover, .btn-gold:hover {
  color: var(--ink);
  background-color: color-mix(in oklab, var(--gold) 90%, var(--ink));
  border-color: color-mix(in oklab, var(--gold) 90%, var(--ink));
  background-image: var(--tx-gold-stroke);
  background-size: cover; background-position: center;
  background-blend-mode: soft-light;
}
.btn-primary { /* keep primary's rest fill blue, not gold */ }
.btn-xl { font-size: 16px; padding: 20px 44px; letter-spacing: 0.06em; }

/* Quiet secondary text link (B1, kept) */
.lp-textlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-body-s); letter-spacing: var(--tracking-button);
  color: var(--fg-muted);
}
.lp-textlink:hover { color: var(--ink); }
.lp-textlink .arr { font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 16px; line-height: 1; }

/* Shared bits */
.pill {
  display: inline-block; padding: 7px 16px; border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--cream) 55%, var(--paper));
  border: 1px solid var(--border);
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ochre);
}
.gold-stroke {
  display: block; width: 168px; height: 20px;
  background: var(--tx-gold-stroke) no-repeat center / contain;
}
.eyebrow { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ochre); }

/* ---- Hero — centered single column ------------------------- */
.hero { padding: 92px 0 84px; text-align: center; }
.hero .container { display: flex; flex-direction: column; align-items: center; }
.hero h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(44px, 5.4vw, 78px); line-height: 1.02;
  letter-spacing: -0.02em; margin: 26px 0 0; color: var(--ink);
  max-width: 16ch; text-wrap: balance;
}
.hero h1 em { font-style: italic; font-weight: 400; }
.hero .gold-stroke { margin: 22px auto 18px; }
.hero-intro {
  font-size: var(--fs-body-l); line-height: 1.6; color: var(--ink-2);
  max-width: 560px; margin: 2px auto 34px;
}
.hero-cta { display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* ---- "Del estudio" — its own section below the hero -------- */
.estudio { padding: 40px 0 84px; }
.estudio .container {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.estudio-num {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 40px; line-height: 1; color: var(--ochre); letter-spacing: -0.03em;
}
.estudio-lead {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3);
  line-height: 1.35; color: var(--ink); margin: 16px 0 0; max-width: 24ch;
}
.estudio-lead .accent { color: var(--ochre); }
.estudio-signed { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.estudio-signed img { height: 42px; width: auto; }
.estudio-signed .label {
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); max-width: 180px;
}
.estudio-art { display: flex; justify-content: flex-end; }
.estudio-art .painting {
  width: 100%; max-width: 440px; aspect-ratio: 5 / 4;
  background: url('assets/textures/multicolor-05.png') center / cover no-repeat;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
}

/* ---- Lower sections — centered ----------------------------- */
.section { padding: 80px 0; text-align: center; }
.section .eyebrow { display: block; }
.section h2 { margin: 14px auto 0; }
.lead {
  font-size: var(--fs-body-l); line-height: 1.7; color: var(--ink-2);
  max-width: 620px; margin: 20px auto 0;
}

.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 980px; margin: 48px auto 0;
}
.step {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  padding: 34px 26px 32px; text-align: center;
}
.step .n {
  position: relative; display: inline-block;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 42px; line-height: 1; color: var(--ochre); letter-spacing: -0.03em;
}
/* small brushstroke accent under each step number (kept) */
.step .n::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -7px; width: 46px; height: 11px;
  background: var(--tx-gold-stroke) no-repeat center / contain;
  opacity: 0.7; pointer-events: none;
}
.step h3 { margin: 16px 0 8px; }
.step p { font-size: var(--fs-body-s); color: var(--ink-2); margin: 0; line-height: 1.6; }

/* Softened "Sobre precios y tiempos" — warm-sand accent card,
   subtle gold detail, no hard border (item 9, kept). */
.note {
  position: relative; max-width: 760px; margin: 56px auto 0;
  padding: 34px 40px 36px; text-align: center;
  background: var(--cream);            /* warm-sand as accent */
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-sm);
}
.note .gold-stroke { width: 96px; height: 14px; margin: 0 auto 14px; opacity: 0.9; }
.note .eyebrow { color: var(--ochre); }
.note p {
  margin: 12px auto 0; color: var(--ink-2); max-width: 600px;
  font-size: var(--fs-body-l); line-height: 1.7;
}

/* ---- Strong brushstroke divider into the dark band (item 10) */
.brush-divider {
  height: 120px; width: 100%;
  background: url('assets/textures/blue-brush-03.png') no-repeat center bottom / cover;
  margin-bottom: -1px; pointer-events: none;
}

/* ---- Dark CTA band — centered single column ---------------- */
.band { position: relative; background: var(--blue); padding: 104px 0 116px; text-align: center; }
.band .grain {
  position: absolute; inset: 0; background-image: var(--tx-canvas);
  mix-blend-mode: overlay; opacity: 0.20; pointer-events: none;
}
.band .container { position: relative; display: flex; flex-direction: column; align-items: center; }
.band .pill {
  background: rgba(231,221,196,0.10); border-color: rgba(231,221,196,0.28); color: var(--gold);
}
.band h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(32px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -0.012em;
  margin: 22px auto 0; color: var(--cream); max-width: 18ch; text-wrap: balance;
}
.band p {
  font-size: var(--fs-body-l); line-height: 1.65; color: rgba(231,221,196,0.82);
  max-width: 560px; margin: 20px auto 34px;
}

/* ---- Footer — light neutral -------------------------------- */
.footer { background: var(--paper); border-top: 1px solid var(--border); padding: 64px 0 44px; color: var(--ink); }
.footer .grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer .brand img { height: 50px; width: auto; margin-bottom: 16px; }
.footer .tag { font-family: var(--font-display); font-style: italic; font-size: 18px;
  color: var(--ink-2); max-width: 320px; margin: 0; }
.footer h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ochre); margin: 0 0 14px; }
.footer .row { font-size: var(--fs-body-s); color: var(--ink-2); margin: 0 0 10px; }
.footer .row a { color: var(--ink); }
.footer .pend { color: var(--ink-3); font-style: italic; }
.footer .fine { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--ink-3);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer .fine .lp-lang a { color: var(--ink-3); }
.footer .fine .lp-lang a:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 7%, transparent); }
.footer .fine .lp-lang .is-on { color: var(--paper); background: var(--blue); }

/* page-load fade */
.fade { animation: lpFade 520ms var(--ease-painterly) both; }
@keyframes lpFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Responsive -------------------------------------------- */
@media (max-width: 900px) {
  .container { padding: 0 24px; }
  .hero { padding: 64px 0 56px; }
  .estudio { padding: 24px 0 56px; }
  .estudio .container { grid-template-columns: 1fr; gap: 32px; }
  .estudio-art { justify-content: center; }
  .estudio-art .painting { max-width: 100%; }
  .section { padding: 56px 0; }
  .steps { grid-template-columns: 1fr; max-width: 420px; gap: 16px; }
  .btn-xl { width: 100%; justify-content: center; padding: 22px 32px; font-size: 17px; }
  .footer .grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 620px) {
  .lp-nav-links { display: none; }   /* keep header clean; toggle stays */
}