/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/barlow-condensed-800-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/barlow-condensed-800-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/barlow-condensed-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/barlow-condensed-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/barlow-condensed-800-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/barlow-condensed-800-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/source-serif-4-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/source-serif-4-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/source-serif-4-var-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/source-serif-4-var-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fundiciones Rey v1 — ver DESIGN.md. Movimiento: solo transform, opacity, clip-path y stroke-dashoffset. */

:root {
  --molde: #0E0C0A;
  --hierro: #1A1714;
  --arena: #26211C;
  --ria: #0B2A2C;
  --ceniza: #D9D7D1;
  --on: #F3EFE8;
  --muted: #B4ABA0;
  --muted-ceniza: #4A443D;
  --ink: #0E0C0A;
  --colada: #FF6A00;
  --colada-d: #9E3700;
  --colada-hot: #FFB21A;
  --bronce: #C8884A;

  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --text: "Source Serif 4", Georgia, "Times New Roman", serif;

  --m: clamp(16px, 3.2vw, 48px);
  --sec: clamp(96px, 14vw, 200px);
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --pour: cubic-bezier(0.65, 0, 0.35, 1);
  --hdr: 4.75rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--molde); color-scheme: dark; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; font-family: var(--text); font-size: 1.125rem; line-height: 1.55;
  color: var(--on); overflow-x: clip;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, ul, ol, dl, dd, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button, a, input, select, textarea, .btn { touch-action: manipulation; }
::selection { background: var(--colada); color: var(--ink); }
[id] { scroll-margin-top: 5rem; }
:focus-visible { outline: 3px solid var(--colada); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: fixed; left: var(--m); top: 12px; z-index: 500; padding: .8rem 1.2rem; background: var(--colada); color: var(--ink);
  font-weight: 600; transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Campos: sin JS/fx cada sección pinta el suyo; con fx lo hacen las capas fijas. */
.sec { position: relative; }
.sec[data-tone="molde"] { background: var(--molde); color: var(--on); }
.sec[data-tone="hierro"] { background: var(--hierro); color: var(--on); }
.sec[data-tone="arena"] { background: var(--arena); color: var(--on); }
.sec[data-tone="ria"] { background: var(--ria); color: var(--on); }
.sec[data-tone="ceniza"] { background: var(--ceniza); color: var(--ink); }
.sec[data-tone="colada"] { background: var(--colada); color: var(--ink); }
html.fx .sec { background: transparent; }

.bgs { position: fixed; inset: 0; z-index: -1; display: none; pointer-events: none; }
html.fx .bgs { display: block; }
.bg { position: absolute; inset: 0; opacity: 0; }
.bg-molde { background: var(--molde); opacity: 1; }
.bg-hierro { background: var(--hierro); }
.bg-arena { background: var(--arena); }
.bg-ria { background: var(--ria); }
.bg-ceniza { background: var(--ceniza); }
.bg-colada { background: var(--colada); }

/* Tipos */
h1, h2, h3, .poster {
  font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: .88;
  text-wrap: balance; hyphens: none;
}
em { font-style: italic; }
.poster { font-size: clamp(3.5rem, 11vw, 11rem); }
.sec p, .sec li { hyphens: none; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .95rem 1.7rem; border: 0;
  background: var(--colada); color: var(--ink); font-family: var(--text); font-weight: 600; font-size: 1.0625rem; line-height: 1.1;
  text-decoration: none; cursor: pointer; transition: transform 140ms var(--out), background-color 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn-sm { padding: .7rem 1.2rem; font-size: 1rem; }
.btn-lg { padding: 1.15rem 2.2rem; font-size: 1.125rem; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--on); } }

/* 1. Precarga */
.preload { display: none; }
html.pre .preload {
  position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; justify-content: center;
  padding: var(--m); background: var(--molde); color: var(--on);
}
html.pre { overflow: hidden; }
.pre-num {
  font-family: var(--display); font-style: italic; font-weight: 800; font-size: clamp(8rem, 28vw, 28rem); line-height: .88;
  font-variant-numeric: tabular-nums; color: var(--colada); letter-spacing: -0.01em;
}
.pre-cap { margin-top: 1.25rem; color: var(--muted); }
.pre-skip {
  position: absolute; right: var(--m); bottom: var(--m); min-height: 44px; padding: .7rem 1.2rem; border: 0;
  background: var(--arena); color: var(--on); font-weight: 600; cursor: pointer; z-index: 2;
  transition: transform 140ms var(--out), background-color 200ms ease;
}
.pre-skip:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .pre-skip:hover { background: var(--colada); color: var(--ink); } }
.pre-curtain { position: absolute; inset: 0; z-index: 1; background: var(--colada); clip-path: inset(100% 0 0 0); }

/* 2. Cabecera */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 120; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: var(--hdr); padding: 0 max(var(--m), env(safe-area-inset-right)) 0 max(var(--m), env(safe-area-inset-left)); color: var(--on);
  transition: transform 380ms var(--out), color 240ms ease;
}
.site-header.is-hidden { transform: translateY(-110%); }
.site-header:focus-within { transform: none; }
html.menu-open .site-header { transform: none; color: var(--on); }
.logo { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 44px; }
.logo img { width: auto; height: 1.75rem; transition: filter 240ms ease; }
.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.75rem); }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.125rem; text-decoration: none; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--colada); } }
.nav-tools { display: flex; align-items: center; gap: 1.5rem; }
.lang { display: inline-flex; gap: .25rem; font-family: var(--display); font-weight: 700; font-size: 1.125rem; letter-spacing: .02em; }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; text-decoration: none; }
.lang a[aria-current="true"] { color: var(--colada); }
.lang a[aria-disabled="true"] { opacity: .7; cursor: not-allowed; }
.menu-btn {
  position: relative; z-index: 2; display: none; align-items: center; min-height: 44px; padding: .6rem .2rem .6rem .8rem; border: 0;
  background: none; color: inherit; font-weight: 600; cursor: pointer;
}
/* Tinta sobre ceniza y colada */
.site-header.on-ink { color: var(--ink); }
.site-header.on-ink .logo img { filter: brightness(0); }
.site-header.on-ink .nav-links a:hover { color: var(--colada-d); }
.site-header.on-ink .lang a[aria-current="true"] { color: var(--colada-d); }
.site-header.on-colada .lang a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.site-header.on-ink :focus-visible { outline-color: var(--ink); }
.site-header.on-ink.on-ceniza :focus-visible { outline-color: var(--colada-d); }
.site-header.on-colada .btn { background: var(--ink); color: var(--on); }

@media (max-width: 768px) {
  html.js .menu-btn { display: inline-flex; }
  html.js .nav {
    position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2rem;
    padding: 6rem var(--m) var(--m); background: var(--molde); color: var(--on); visibility: hidden; clip-path: inset(0 0 100% 0);
    transition: clip-path 520ms var(--pour), visibility 0s linear 520ms;
  }
  html.js.menu-open .nav { visibility: visible; clip-path: inset(0); transition: clip-path 520ms var(--pour), visibility 0s; }
  html.js .nav-links { flex-direction: column; align-items: flex-start; gap: .25rem; }
  html.js .nav-links a { font-family: var(--display); font-weight: 800; font-size: 3rem; text-transform: uppercase; line-height: 1; }
  html:not(.js) .site-header { position: absolute; height: auto; flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem; }
  html:not(.js) .nav { flex-wrap: wrap; gap: .5rem 1rem; }
  html.menu-open .site-header .logo img { filter: none; }
  html.menu-open .site-header { color: var(--on); }
  html.menu-open .site-header .btn { background: var(--colada); color: var(--ink); }
}

/* 3. Hero */
html.wait .hero-h1, html.wait .hero-media, html.wait .hero-lead, html.wait .hero-actions, html.wait .site-header { opacity: 0; }
.hero { min-height: 100svh; overflow: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 100svh; }
.hero-text { align-self: center; padding: calc(var(--hdr) + 1rem) 1.5rem 2rem var(--m); }
.hero-h1 { font-size: clamp(3.5rem, 8.4vw, 9rem); line-height: .88; text-wrap: balance; }
.hero-h1 em { color: var(--colada); }
.hero-lead { margin-top: clamp(1rem, 2.4svh, 1.75rem); font-size: 1.375rem; line-height: 1.4; max-width: 30rem; }
.hero-actions { margin-top: clamp(1.1rem, 3svh, 2rem); }
.hero-media { align-self: end; margin: var(--hdr) 0 0; height: calc(100svh - var(--hdr)); overflow: hidden; background: var(--hierro); }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%; }

@media (max-width: 768px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-media { order: -1; margin-top: var(--hdr); height: 52svh; }
  .hero-text { padding: 1.5rem var(--m) 3rem; }
  .hero-h1 { font-size: clamp(3.5rem, 17vw, 7rem); }
  .hero-lead { font-size: 1.25rem; }
}

/* 4. La colada */
.colada { padding: var(--sec) var(--m); }
.col-head h2 { font-size: clamp(3rem, 6vw, 6.5rem); }
.col-count { display: none; }
.col-list { display: none; }
.col-mid { display: none; }
.col-steps { display: grid; gap: clamp(3rem, 8vw, 6rem); margin-top: 2.5rem; }
.step { display: grid; gap: 1.25rem; }
.step-fig { margin: 0; overflow: hidden; aspect-ratio: 3 / 2; background: var(--hierro); }
.step-fig img { width: 100%; height: 100%; object-fit: cover; }
.step h3 { font-size: clamp(2.25rem, 8vw, 3.5rem); }
.step-n { color: var(--colada); font-style: italic; margin-right: .35em; font-variant-numeric: tabular-nums; }
.step-p { margin-top: .75rem; font-size: 1.375rem; line-height: 1.4; max-width: 36rem; }
.step-temp { margin-top: 1rem; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 2.5rem; line-height: 1; color: var(--colada-hot); font-variant-numeric: tabular-nums; }

html.pin-on .colada { padding: 0; }
html.pin-on .col-pin {
  height: 100svh; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2.2fr) minmax(0, 5.8fr);
  gap: clamp(1rem, 3vw, 3.5rem); padding: calc(var(--hdr) + .5rem) var(--m) 1.75rem; overflow: hidden;
}
html.pin-on .col-head { display: flex; flex-direction: column; min-height: 0; }
html.pin-on .col-head h2 { font-size: clamp(2.75rem, 5.6vw, 6.25rem); }
html.pin-on .col-count {
  display: block; margin-top: .75rem; font-family: var(--display); font-style: italic; font-weight: 800; font-size: clamp(3.5rem, 8vw, 8.5rem);
  line-height: .88; color: var(--colada); font-variant-numeric: tabular-nums;
}
html.pin-on .col-list { display: grid; gap: .5rem; margin-top: auto; padding-top: 1rem; }
html.pin-on .col-list li { font-size: 1.125rem; line-height: 1.25; color: var(--muted); transition: color 200ms ease, transform 240ms var(--out); transform-origin: left center; }
html.pin-on .col-list li.is-on { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.75rem; line-height: 1.05; color: var(--colada); }
html.pin-on .col-mid { display: flex; flex-direction: column; min-height: 0; align-items: center; }
html.pin-on .col-temp {
  font-family: var(--display); font-style: italic; font-weight: 800; font-size: clamp(2.75rem, 4.6vw, 5rem); line-height: .95;
  color: var(--colada-hot); font-variant-numeric: tabular-nums; white-space: nowrap; margin-bottom: .75rem;
}
html.pin-on .col-svg { flex: 1; min-height: 0; width: 100%; }
html.pin-on .col-svg .cs-fill, html.pin-on .col-svg .cs-fill-hot { transform-box: fill-box; transform-origin: 50% 100%; }
html.pin-on .col-steps { margin: 0; gap: 0; display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; align-content: center; }
html.pin-on .step {
  grid-area: 1 / 1; align-content: center; gap: 1.5rem; opacity: 0; visibility: hidden;
  transition: opacity 320ms var(--out), visibility 0s linear 320ms;
}
html.pin-on .step.is-on { opacity: 1; visibility: visible; transition: opacity 320ms var(--out), visibility 0s; }
html.pin-on .step-fig { aspect-ratio: 3 / 2; max-height: 52svh; width: 100%; }
html.pin-on .step-fig img { transform: scale(1.06); transition: transform 900ms var(--out); }
html.pin-on .step.is-on .step-fig img { transform: scale(1); }
html.pin-on .step h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.pin-on .step-p { margin: 0; font-size: 2rem; line-height: 1.25; max-width: 28ch; }
html.pin-on .step-temp { display: none; }
@media (max-width: 1100px) { html.pin-on .step-p { font-size: 1.5rem; } }

/* 5. Sectores */
.sectores { padding: var(--sec) var(--m); }
.sectores .poster { margin-bottom: clamp(2rem, 5vw, 4.5rem); }
.sec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 2.4vw, 32px); }
.sector { display: block; text-decoration: none; }
.sector-fig { display: block; aspect-ratio: 1; overflow: hidden; background: var(--arena); }
.sector-fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 260ms var(--out); }
.sector h3 { margin-top: 1rem; font-size: clamp(2rem, 3vw, 3rem); transition: color 200ms ease; }
.sector-p { display: block; margin-top: .5rem; color: var(--muted); font-size: 1.0625rem; max-width: 34ch; }
@media (hover: hover) and (pointer: fine) {
  .sector:hover .sector-fig img { transform: scale(1.04); }
  .sector:hover h3 { color: var(--colada); }
}
.sector:focus-visible .sector-fig img { transform: scale(1.04); }
.sector:focus-visible h3 { color: var(--colada); }
.sector:focus-visible { outline-offset: 6px; }
@media (max-width: 1024px) { .sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sec-grid { grid-template-columns: minmax(0, 1fr); } }

/* 6. Piezas y materiales */
.materiales { padding: var(--sec) var(--m); }
.materiales .poster { margin-bottom: clamp(2rem, 5vw, 4.5rem); }
.mat-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.mat-fig img { width: 100%; height: auto; mix-blend-mode: multiply; }
.mat-fig figcaption { margin-top: 1rem; color: var(--muted-ceniza); font-size: .9375rem; max-width: 40ch; }
.mat-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mat-table th, .mat-table td { padding: .9rem 1rem; text-align: left; vertical-align: top; font-weight: 400; line-height: 1.35; }
.mat-table thead th { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 1.375rem; padding-bottom: 1rem; }
.mat-table tbody th { font-weight: 600; }
.mat-table tbody tr:nth-child(even) { background: #CFCCC5; }
.mat-table tbody tr { transition: background-color 200ms ease; }
.mat-table tbody tr:hover, .mat-table tbody tr:focus-within { background: #C9C5BD; }
.mat-table tr.is-bronce th, .mat-table tr.is-bronce td { color: var(--colada-d); }
.mat-table tr.is-bronce th::before { content: ""; display: inline-block; width: .75rem; height: .75rem; margin-right: .6rem; background: var(--bronce); }
@media (max-width: 900px) {
  .mat-grid { grid-template-columns: minmax(0, 1fr); }
  .mat-fig { max-width: 420px; }
}
@media (max-width: 768px) {
  .mat-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mat-table, .mat-table tbody, .mat-table tr, .mat-table th, .mat-table td { display: block; }
  .mat-table tbody tr { padding: .85rem 1rem; margin-bottom: .5rem; }
  .mat-table tbody tr:nth-child(odd) { background: #D9D7D1; }
  .mat-table tbody th, .mat-table td { padding: .15rem 0; }
  .mat-table tbody th { font-size: 1.25rem; }
  .mat-table td::before { content: attr(data-label) ": "; color: var(--muted-ceniza); }
}

/* 7. Calidad */
.calidad { padding: var(--sec) var(--m); }
.cal-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.cal-lead { margin-top: 1.5rem; font-size: 1.375rem; max-width: 40ch; }
.cal-list { margin-top: clamp(2rem, 4vw, 3.5rem); columns: 2; column-gap: 2rem; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 2rem; line-height: 1.15; }
.cal-list li { break-inside: avoid; padding: .3rem 0; }
.cal-cert { max-width: 36ch; }
.cal-fig { margin-top: 2rem; max-width: 480px; }
.cal-fig img { width: 100%; height: auto; }
@media (max-width: 900px) { .cal-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .cal-list { columns: 1; } }

/* 8. Dos plantas */
.plantas { padding: 0 0 var(--sec); }
.pl-photo { margin: 0; }
.pl-photo img { width: 100%; height: clamp(240px, 42vw, 640px); object-fit: cover; object-position: 50% 40%; }
.pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); padding: clamp(3rem, 7vw, 6rem) var(--m) 0; }
.plant h3 { font-size: clamp(2.5rem, 5vw, 5rem); }
.stats { display: flex; flex-wrap: wrap; gap: 1rem clamp(1.25rem, 3vw, 3rem); margin-top: 2rem; }
.stats div { display: flex; flex-direction: column-reverse; }
.stats dd { font-family: var(--display); font-style: italic; font-weight: 800; font-size: clamp(2.25rem, 4.2vw, 4.5rem); line-height: .95; color: var(--colada); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats dt { color: var(--muted); font-size: 1rem; margin-top: .35rem; }
.pl-note { padding: 2rem var(--m) 0; color: var(--muted); font-size: .9375rem; }
@media (max-width: 768px) { .pl-grid { grid-template-columns: minmax(0, 1fr); } }

/* 9. I+D y economía circular */
.idea { padding: var(--sec) var(--m); }
.idea-words { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 4.4vw, 4rem); line-height: .98; letter-spacing: -.005em; max-width: 24ch; text-wrap: balance; }
.idea-words .w { display: inline-block; }
.idea-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(3rem, 7vw, 6rem); }
.idea-cols h3 { font-size: clamp(2rem, 3vw, 3rem); color: var(--colada); }
.idea-cols p { margin-top: .75rem; max-width: 46ch; }
@media (max-width: 768px) { .idea-cols { grid-template-columns: minmax(0, 1fr); } }

/* 10. Historia */
.historia { padding: var(--sec) var(--m); overflow: clip; }
.his-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 3vw, 3rem); perspective: 900px; }
.his-y { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(4rem, 14vw, 14rem); line-height: .88; color: var(--colada); font-variant-numeric: tabular-nums; }
.his-line { display: block; height: 8px; background: var(--colada); transform-origin: left center; }
.his-phrase { margin-top: clamp(2rem, 5vw, 4rem); font-size: clamp(1.5rem, 2.6vw, 2.5rem); line-height: 1.25; max-width: 28ch; }
@media (max-width: 768px) {
  .his-row { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 1rem; }
  .his-line { width: 8px; height: 7rem; transform-origin: center top; margin-left: .5rem; }
}

/* 11. Contacto */
.contacto { padding: var(--sec) var(--m); color: var(--ink); }
.contacto :focus-visible { outline-color: var(--ink); }
.con-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contacto h2 { font-size: clamp(3.5rem, 8vw, 8.5rem); color: var(--ink); }
.con-lead { margin-top: 1.5rem; font-size: 1.5rem; }
.con-lines { margin-top: 2rem; display: grid; gap: .5rem; justify-items: start; font-size: 2rem; line-height: 1.2; }
.con-lines a { display: inline-block; min-height: 44px; text-underline-offset: 6px; text-decoration-thickness: 2px; overflow-wrap: anywhere; }
.form-block { background: var(--ink); color: var(--on); padding: clamp(1.25rem, 3vw, 2.5rem); }
.form-block :focus-visible { outline-color: var(--colada); }
.field { display: grid; gap: .4rem; margin-bottom: 1.25rem; min-width: 0; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.field label { font-size: 1.0625rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .75rem .9rem; border: 0; background: var(--arena); color: var(--on); font-size: 1.0625rem;
  appearance: none; -webkit-appearance: none; font-family: var(--text);
}
.field select { padding-right: 2.5rem; background-repeat: no-repeat; background-position: right .9rem center; background-size: .9rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23F3EFE8'/%3E%3C/svg%3E"); }
.field textarea { resize: vertical; min-height: 7.5rem; }
.field input[type="file"] { padding: .6rem .9rem; }
.field input[type="file"]::file-selector-button { margin-right: 1rem; padding: .5rem 1rem; border: 0; background: var(--colada); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.field [aria-invalid="true"] { outline: 3px solid var(--colada); outline-offset: 0; }
.err { color: var(--colada); font-size: 1rem; }
.hint { color: var(--muted); font-size: .9375rem; }
.form-note { margin-top: 1rem; min-height: 1.55em; color: var(--on); }
@media (max-width: 900px) { .con-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; } .con-lines { font-size: 1.5rem; } }

/* 12. Pie */
.foot { padding: clamp(3rem, 7vw, 6rem) var(--m) 2rem; overflow: clip; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2.5rem; }
.foot-row a { text-underline-offset: 5px; }
.foot-legal { display: flex; gap: 1.5rem; }
.foot-legal a, .foot-row > a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-big {
  display: block; margin: clamp(2rem, 5vw, 4rem) 0 0; white-space: nowrap; overflow: clip; font-family: var(--display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: .9; font-size: 13vw; color: var(--arena);
}
.foot-note { margin-top: 1.5rem; font-size: .9375rem; color: var(--muted); max-width: 70ch; }
@media (hover: hover) and (pointer: fine) { .foot-row a:hover { color: var(--colada); } }

/* Movimiento reducido: sin recorrido, todo visible */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}