/* ==========================================================================
   Atramo Arquitectura — theme (fictional brand, demo). Slug: tramo-arquitectura
   Minimal and editorial: off-white page, hairline rules, a 12-column asymmetric
   hero, a large irregular project grid of drawn placeholders, square buttons,
   underline-only form fields and a light footer. One accent (ochre) used sparingly.
   Fonts: Instrument Serif 400 (+ italic) for display, Manrope 300/500 for text.
   ========================================================================== */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-500-normal.woff2") format("woff2");
}
/* Metric-matched fallbacks: vertical metrics read from the woff2 files, widths calibrated
   in Chromium against Liberation Serif / Liberation Sans (metric-compatible with Times New
   Roman / Arial) on the page's own headings and body copy. */
@font-face {
  font-family: "Instrument Fallback";
  font-style: normal;
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Noto Serif");
  size-adjust: 84%;
  ascent-override: 117.8%;
  descent-override: 36.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Fallback";
  font-style: italic;
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("Noto Serif Italic");
  size-adjust: 89.5%;
  ascent-override: 110.6%;
  descent-override: 34.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Roboto"), local("Helvetica");
  size-adjust: 100.3%;
  ascent-override: 106.3%;
  descent-override: 29.9%;
  line-gap-override: 0%;
}

:root {
  /* Brand palette (as briefed). Concrete grey and ochre fail AA as text on off-white:
     grey is used for hairlines/shapes (3.12:1, UI only), ochre for fills and as a
     button background with ink text. Text uses the "ink" shades below. */
  --tramo-offwhite: #f7f6f2;
  --tramo-ink: #111111;
  --tramo-concrete: #8c8c88;
  --tramo-ochre: #d4a017;

  --tramo-concrete-ink: #666662;   /* muted text: 5.33:1 on off-white, 5.77:1 on white */
  --tramo-ochre-ink: #876510;      /* ochre text on off-white: 4.98:1 */
  --tramo-paper: #efede6;          /* placeholder surfaces */
  --tramo-mist: #bfbfba;           /* muted text on ink: 10.23:1 */

  --color-bg: var(--tramo-offwhite);
  --color-surface: #fbfaf7;
  --color-text: var(--tramo-ink);              /* 17.46:1 on off-white */
  --color-text-muted: var(--tramo-concrete-ink);
  --color-border: #dcdad3;
  --color-border-strong: var(--tramo-concrete); /* hairlines / UI 3.12:1 */
  --color-accent: var(--tramo-ink);            /* buttons: off-white on ink 17.46:1 */
  --color-accent-ink: var(--tramo-ink);
  --color-on-accent: var(--tramo-offwhite);

  --color-dark-bg: var(--tramo-ink);
  --color-dark-surface: #1c1c1b;
  --color-dark-text: var(--tramo-offwhite);
  --color-dark-muted: var(--tramo-mist);
  --color-dark-border: #2e2e2c;

  --font-display: "Instrument Serif", "Instrument Fallback", "Times New Roman", serif;
  --font-body: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --text-base: 1.0625rem;
  --leading-normal: 1.7;

  --section-space: clamp(5rem, 3rem + 8vw, 11rem);
  --button-size: 0.875rem;
  --button-weight: 500;
  --button-tracking: 0.04em;
  --button-transform: none;
  --button-radius: 0;
  --button-padding: 0.875rem 1.5rem;
  --card-radius: 0;
  --header-bg: var(--tramo-offwhite);
  --header-border: var(--color-border);
  --hero-bg: var(--tramo-offwhite);
  --hero-space: clamp(3rem, 2rem + 5vw, 7rem);
  --footer-bg: var(--tramo-offwhite);
  --footer-text: var(--tramo-concrete-ink);
  --footer-border: var(--tramo-ink);
  --field-radius: 0;
}

/* Dark context (studio section): ochre is text-safe on ink (7.95:1). */
.section--dark {
  --color-accent: var(--tramo-ochre);
  --color-on-accent: var(--tramo-ink);
  --color-accent-ink: var(--tramo-ochre);
}

body {
  font-weight: 300;
}
strong,
b {
  font-weight: 500;
}

/* ---- Typography ---- */
h1, h2, h3 {
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.02;
}
h2 {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
}
h3 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
}
h1 em,
h2 em {
  font-style: italic;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-text);
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
}
.lead {
  font-size: 1.125rem;
  max-width: 30rem;
}
.section__header {
  margin-bottom: var(--space-8);
}

/* ---- Buttons: square, hairline, arrow ---- */
.button {
  justify-content: space-between;
  gap: var(--space-5);
}
.button::after {
  content: "→";
  font-weight: 300;
  transition: transform var(--duration) var(--ease);
}
.button:hover {
  background: var(--tramo-ochre);
  border-color: var(--tramo-ochre);
  color: var(--tramo-ink);              /* 7.95:1 */
}
.button:hover::after {
  transform: translateX(4px);
}
.button--ghost {
  border-color: var(--tramo-ink);
}
.button--ghost:hover {
  border-color: var(--tramo-ochre);
}
.site-nav .button {
  min-height: 44px;
  padding: 0.5rem 1rem;
}

/* ---- Header ---- */
.site-header__inner {
  min-height: 4.5rem;
}
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.wordmark svg {
  width: 0.875rem;
  height: 0.875rem;
}
.wordmark small {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tramo-concrete-ink);
}
.site-nav a:not(.button) {
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
}
.nav-toggle {
  border-radius: 0;
  border-color: var(--tramo-ink);
}

/* ---- Hero: asymmetric 12-column ---- */
.hero--asym .hero__inner {
  max-width: var(--container);
  margin-inline: auto;
  gap: var(--space-6);
}
.hero--asym .hero__inner > * {
  max-width: none;
}
.hero--asym h1 {
  font-size: clamp(3.25rem, 1.6rem + 7.2vw, 8.25rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
}
.hero__meta {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.hero__aside {
  display: grid;
  gap: var(--space-5);
  align-content: end;
  justify-items: start;
}
.hero__figure {
  display: grid;
  gap: var(--space-3);
}
.hero__figure .ph {
  aspect-ratio: 3 / 2;
}
@media (min-width: 60rem) {
  .hero--asym .hero__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-5);
    row-gap: var(--space-8);
  }
  .hero__meta { grid-column: 1 / 4; padding-top: var(--space-4); }
  .hero__meta .eyebrow { white-space: nowrap; }
  .hero--asym h1 { grid-column: 4 / 13; }
  .hero__aside { grid-column: 1 / 5; grid-row: 2; padding-bottom: var(--space-2); }
  .hero__figure { grid-column: 6 / 13; grid-row: 2; }
}

/* Image captions (the "illustrative image" label is always visible) */
.caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--tramo-ink);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.caption b {
  color: var(--color-text);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---- Projects: irregular editorial grid ---- */
.projects-header {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}
.projects-header .lead {
  align-self: end;
}
@media (min-width: 60rem) {
  .projects-header {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }
}
.projects {
  display: grid;
  gap: var(--space-8) var(--space-5);
}
.project {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.project__img {
  position: relative;
  overflow: hidden;
  background: var(--tramo-paper);
}
.project__img .ph {
  position: absolute;
  inset: 0;
}
/* Fixed aspect ratio per slot: the pipeline crops each picture to the same ratio (see build:picture ratio="…"). */
.project:nth-child(1) .project__img { aspect-ratio: 5 / 4; }
.project:nth-child(2) .project__img { aspect-ratio: 3 / 4; }
.project:nth-child(3) .project__img { aspect-ratio: 1; }
.project:nth-child(4) .project__img { aspect-ratio: 16 / 10; }
.project:nth-child(5) .project__img { aspect-ratio: 16 / 9; }
/* "Illustrative image" label: always visible, solid enough to keep AA contrast over any photo. */
.project__tag {
  position: absolute;
  z-index: 1;
  left: var(--space-3);
  bottom: var(--space-3);
  padding: 0.25rem 0.625rem;
  background: rgb(247 246 242 / 0.94);
  color: var(--tramo-ink);              /* 16.5:1 on the label */
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.project h3 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
}
.project p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
@media (min-width: 48rem) {
  .projects {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .project:nth-child(1) { grid-column: 1 / 8; }
  .project:nth-child(2) { grid-column: 9 / 13; margin-top: 40%; }
  .project:nth-child(3) { grid-column: 2 / 6; }
  .project:nth-child(4) { grid-column: 7 / 13; margin-top: 18%; }
  .project:nth-child(5) { grid-column: 1 / 13; }
  .project:nth-child(5) .project__img { aspect-ratio: 21 / 8; }
}

/* ---- Studio (dark): statement + services as ruled rows ---- */
.studio .statement {
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem);
  line-height: 1.12;
  max-width: 56rem;
  margin-bottom: var(--space-9);
}
.studio .statement em {
  color: var(--tramo-ochre);           /* 7.95:1 on ink */
}
.feature-grid--numbered.rows {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--color-dark-border);
}
.rows .feature {
  grid-template-columns: 3rem 1fr;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-6) 0;
  border-top: 0;
  border-bottom: 1px solid var(--color-dark-border);
  background: none;
}
.rows .feature::before {
  grid-row: span 2;
  font-size: 1.125rem;
  font-style: italic;
  color: var(--tramo-ochre);
}
.rows .feature p {
  color: var(--color-dark-muted);
}
@media (min-width: 60rem) {
  .rows .feature {
    grid-template-columns: 4rem 1fr 1.2fr;
    align-items: baseline;
  }
  .rows .feature::before { grid-row: auto; }
}

/* ---- Process: hairline columns ---- */
.process__step {
  border-top: 1px solid var(--tramo-ink);
  align-content: start;
}
.process__step::before {
  font-style: italic;
  font-size: 3rem;
  color: var(--tramo-ink);
}
.process__step h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ---- Social proof placeholder ---- */
.placeholder-block {
  border: 1px solid var(--tramo-concrete);
  border-radius: 0;
  text-align: left;
  padding: var(--space-6);
  border-left: 4px solid var(--tramo-ochre);
  background: var(--color-bg);
}
.placeholder-block__label {
  color: var(--tramo-ink);
}

/* ---- FAQ ---- */
.faq,
.faq details,
.faq--columns details:nth-child(-n + 2) {
  border-color: var(--tramo-ink);
}
.faq summary {
  font-size: 1.375rem;
  font-weight: 400;
}
.faq summary::after {
  content: "↓";
  font-weight: 300;
  color: var(--tramo-ink);
  transition: transform var(--duration) var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(180deg);
}

/* ---- Contact: underline fields ---- */
.contact h2 {
  font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem);
}
.contact__details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}
.contact__details dt {
  font-weight: 500;
}
.contact__details dd {
  margin: 0;
  color: var(--color-text-muted);
}
.contact-form--light {
  --field-bg: transparent;
  --field-border: var(--tramo-concrete-ink);   /* 5.33:1 on off-white (UI) */
}
.contact-form--light .field input,
.contact-form--light .field textarea {
  padding-inline: 0;
  border-width: 0 0 1px;
}
.contact-form--light .field input:focus-visible,
.contact-form--light .field textarea:focus-visible {
  border-color: var(--tramo-ink);
}
.field label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---- Footer: light ---- */
.site-footer a:hover {
  color: var(--tramo-ink);
}

/* ---- Studio: statement beside a material detail ---- */
.studio__intro {
  display: grid;
  gap: var(--space-7);
  margin-bottom: var(--space-9);
}
.studio__intro .statement {
  margin-bottom: 0;
}
.studio__figure {
  max-width: 22rem;
}
.studio__figure .ph-frame {
  position: relative;
}
.studio__figure .ph {
  aspect-ratio: 4 / 5;
}
@media (min-width: 60rem) {
  .studio__intro {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-5);
    align-items: end;
  }
  .studio__intro .statement { grid-column: 1 / 8; }
  .studio__figure { grid-column: 9 / 13; max-width: none; }
}

/* ==========================================================================
   Premium tuning for this landing (applies only with "premium": true)
   ========================================================================== */
[data-premium] {
  --selection-bg: var(--tramo-ochre);
  --selection-text: var(--tramo-ink);   /* 7.95:1 */
  --footer-border: var(--color-border);
}
[data-premium] .hero--asym h1 {
  letter-spacing: -0.03em;
  line-height: 0.92;
}
[data-premium] h2 {
  font-size: clamp(2.5rem, 1.5rem + 3.8vw, 4.75rem);
  letter-spacing: -0.025em;
  line-height: 1;
}
[data-premium] .contact h2 {
  font-size: clamp(2.75rem, 1.5rem + 4.8vw, 5.75rem);
}
[data-premium] h3 {
  letter-spacing: -0.01em;
}
[data-premium] .projects-header > div {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}
[data-premium] .studio > .container > .eyebrow {
  margin-bottom: var(--space-5);
}
[data-premium] .lead {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.6;
}
[data-premium] .studio .statement {
  font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3rem);
  letter-spacing: -0.015em;
  line-height: 1.14;
}
[data-premium] .rows .feature h3 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
}
[data-premium] .project h3 {
  letter-spacing: -0.01em;
}
[data-premium] .caption {
  border-top-color: var(--color-border-strong);
}
[data-premium] .process__step {
  border-top-color: var(--color-border-strong);
}
[data-premium] .faq,
[data-premium] .faq details,
[data-premium] .faq--columns details:nth-child(-n + 2) {
  border-color: var(--color-border-strong);
}
[data-premium] .faq summary {
  padding-block: var(--space-5);
  transition: color var(--duration) var(--ease);
}
[data-premium] .faq summary:hover {
  color: var(--tramo-concrete-ink);
}
[data-premium] .placeholder-block {
  border-color: var(--color-border-strong);
}
[data-premium] .site-footer__inner {
  padding-block: var(--space-6);
  align-items: baseline;
}

/* The eyebrow inherits --color-text (ink), which is invisible on the dark studio section. */
.section--dark .eyebrow {
  color: var(--color-dark-text);   /* 17.46:1 on ink */
}

/* Generated by scripts/images.mjs: image placeholders (dominant colour + 24px WebP). */
.ph-tramo-01-fachada{background-color:#958e86;background-image:url(data:image/webp;base64,UklGRp4AAABXRUJQVlA4IJIAAACQBACdASoYABAAPu1iqU2ppaQiMAgBMB2JYwCdACPtzxrxjunriCLleiSBx+AA9jeqYl7nQwc6U1o5SyoJbMUeWf12Gd6QKDKPVt20PeLHbaCYRu2sIolucF50IBNVRGITaKEU9mE9kvP6G3qm5/uJnxF9awwUbLnCH9H7TChwFdNu2UkmahnDdAxDg/lp/VCcAA==)}
.ph-tramo-02-patio{background-color:#97897a;background-image:url(data:image/webp;base64,UklGRq4AAABXRUJQVlA4IKIAAAAQBQCdASoYABMAPu1sqlGppaOiqAqpMB2JZQDLLA9qBqybOt0eHUvJciu3p5A/k6NAAPl27BynC1ZdjbIFTKem7iYPN7K/EYOSK+e5Ax86Pe+ts15OIZfdsWJ3YEJoliU12R+oFqj+XXqaM69S2zEwj8GqSbQNNOwe6i/z8wMK39LBj4iKhBi4eIMYuwpqyC0I/Z1GXwHyxaUCB8jRE94AAAA=)}
.ph-tramo-03-escalera{background-color:#947f6b;background-image:url(data:image/webp;base64,UklGRsYAAABXRUJQVlA4ILoAAAAwBQCdASoYACAAPu1qrlCppaQiqAqpMB2JQACiABt8jz3uhvmLl1NaRwtsnkBReGJGAAD+nvkBdaVZoqHeb6j55WGC3wYeaHXxEeHgBjsgusQri+ztuFvLh/PepnZaeNFWi9HoAJtfB395yg5PI+nh4QnOQAYo1P7p4w9TGu2gq+fgi4bkXXdtpr4OVJIqrBrSZYUoRjEU7F+Zv+rjjWRBgRpMjENG0T7Q0nq/ZcFSN8O0VN3AcUgAAAA=)}
.ph-tramo-04-pabellon{background-color:#a39789;background-image:url(data:image/webp;base64,UklGRsgAAABXRUJQVlA4ILwAAADwBACdASoYABgAPu1qqVAppiOiqA1RMB2JZQDImAqWceYIvAhWBqbAf//iKOJ6EQAA/j+4XJ5skbw/cg3Fx7/UzSlyVsdE1nvScEWOGIrgBOrO4f/4EX3BH2d7NGG9asQebWnNti0QQRUn/GDQMezhbqwtvCACEFn0r4dVtqgImGqO+wckzt98y6DAtscyke9gAHJIzWDks2ChajRqirGOFsRKYre+qHfTvHdQl1IXvow+JBFERymDoQpAAA==)}
.ph-tramo-05-hilera{background-color:#aaa095;background-image:url(data:image/webp;base64,UklGRqgAAABXRUJQVlA4IJwAAAAQBACdASoYAA8APu1iqU2ppaOiMAgBMB2JZQCdABtxBnw7c8susT0yAAD+4KYs4en2mQepYBaSZyqBTNsTm6jYguYvsNmzSToufXbYoAgbnvxq4fQdoZ95bQwMPp9fB83MJQ7SK0SW3BfZs6mQ3IpesaU7g+SJumOHZD8vKOdscnht/Sp0WaK4UumpQvWTE0eOFTsSxXC9Cmn2AAA=)}
.ph-tramo-06-nave{background-color:#857463;background-image:url(data:image/webp;base64,UklGRn4AAABXRUJQVlA4IHIAAADwAwCdASoYAAkAPu1iqk4ppaQiMAgBMB2JZQCdACBq21NAmcwdagyAAOJ68nNSJBhZbqv2SlZWT2n02dSfie39FNDeE3tXrO61l4qUPM7IMlvnFMMj41eJVF1xhRMgQ9nKkITAzElh9MCLB4yk8MO0MgA=)}
.ph-tramo-07-material{background-color:#987e65;background-image:url(data:image/webp;base64,UklGRqwAAABXRUJQVlA4IKAAAADQBQCdASoYAB4APu1qq1EppaOiqAqpMB2JYwCdM5KEAA/C0BaQrM7TzQmRKyvp1fhsCZ6QAj4AAPz2JqqU7uU/CD8EebPbUNJuBeLRuW2z8sW9YWwHmh4RO3869WyNXbma8vwmRvkfwxPpHsQITj4mvpAUbOIUZxqa5YkjRnnW5yEB15zwbcYGuwCPa/jvmjMYJy9Qp4rWiLJIuwLhKAAA)}