/* Block y Cia S.A.C.I. · demo "La cara de la barra" (dirección A)
   Campo acero claro, tinta azul petróleo, rojo solo en la acción. Switzer 400/500. Esquinas cuadradas;
   lo único redondo es la cara de la barra (códigos de color, avatares, círculo del panel). */

@font-face { font-family: "Switzer"; src: url("/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --campo: #EEF2F4;
  --superficie: #DCE4E9;
  --t1: #E3E9ED;
  --t2: #D2DCE2;
  --t3: #C6D3DA;
  --tinta: #0B2533;
  --tenue: #45555F;
  --azul: #004868;
  --azul-claro: #B9CCD7;
  --rojo: #C8191F;
  --blanco: #FFFFFF;

  --f-small: clamp(14px, 0.84rem + 0.1vw, 15px);
  --f-body: clamp(17px, 1rem + 0.3vw, 19px);
  --f-ui: 17px;
  --f-lead: clamp(20px, 1rem + .4vw, 22px);
  --f-sub: clamp(24px, 1rem + 1.3vw, 34px);
  --f-head: clamp(28px, 1.4rem + 2vw, 44px);
  --f-display: clamp(34px, 4.3vw, 72px);
  --f-cifra: clamp(120px, 17vw, 280px);

  --m: clamp(16px, 2.2vw, 32px);
  --gap: clamp(8px, 1.4vw, 20px);
  --sec: clamp(96px, 11vw, 176px);
  --cab: 76px;
  --e-sal: cubic-bezier(.2, .7, .1, 1);
}
@media (max-width: 699px) { :root { --cab: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cab) + 16px); }
body {
  margin: 0; background: var(--campo); color: var(--tinta);
  font-family: "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--f-body); line-height: 1.5; letter-spacing: -0.01em; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: .18em; }
button { font: inherit; color: inherit; }
::selection { background: var(--azul); color: var(--blanco); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: var(--m); top: -60px; z-index: 100; background: var(--azul); color: var(--blanco); padding: 12px 16px; }
.saltar:focus { top: 8px; }
.tab, .t-num, .res__grado, .tabla, .t-cifra, .calc__resultado, .franja__datos, .teja__grados { font-variant-numeric: tabular-nums; }

/* ---------- tipografía ---------- */
.t-display { font-size: var(--f-display); font-weight: 400; line-height: 1.04; letter-spacing: -0.035em; }
.t-display span { display: block; }
.t-head { font-size: var(--f-head); font-weight: 400; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.t-cifra { font-size: var(--f-cifra); font-weight: 400; line-height: .8; letter-spacing: -0.055em; }
.t-cuerpo { font-size: var(--f-body); }
.t-entrada { font-size: var(--f-sub); line-height: 1.32; letter-spacing: -0.02em; }
@media (max-width: 699px) { .t-entrada { font-size: var(--f-lead); } }

/* ---------- grilla ---------- */
.grilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-inline: var(--m); }
.seccion { padding-block: var(--sec); }

/* ---------- botones y enlaces ---------- */
.botones { display: flex; flex-wrap: wrap; gap: 12px; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
  font-weight: 500; font-size: var(--f-ui); letter-spacing: -0.005em; text-decoration: none; border: 0; border-radius: 0;
  cursor: pointer; transition: transform 100ms ease-out, background-color 160ms ease-out; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; user-select: none;
}
.boton:active, .boton.is-presionado { transform: scale(.97); }
.boton--rojo { background: var(--rojo); color: var(--blanco); }
.boton--rojo:hover { background: #AE141A; }
.boton--azul { background: var(--azul); color: var(--blanco); }
.boton--azul:hover { background: #003A55; }
.boton--claro { background: var(--blanco); color: var(--azul); }
.boton--claro:hover { background: var(--campo); }
.boton--ancho { display: flex; width: 100%; }
.boton--chico { min-height: 44px; padding: 0 18px; font-size: var(--f-ui); }
@media (max-width: 699px) { .boton { min-height: 56px; } .boton--chico { min-height: 48px; } }
.enlace { color: var(--azul); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; background: none; border: 0; padding: 0; cursor: pointer; }
.enlace:hover { text-decoration-thickness: 2px; }
.enlace:disabled { color: var(--tenue); cursor: default; text-decoration: none; }

/* ---------- cabecera ---------- */
.cab { position: sticky; top: 0; z-index: 50; background: var(--campo); transition: background-color 240ms ease-out; }
.cab.is-fija { background: var(--superficie); }
.cab__barra { height: var(--cab); display: flex; align-items: center; gap: 24px; padding-inline: var(--m); }
.cab__logo { flex: none; display: block; }
.cab__logo img { height: 44px; width: auto; }
.cab__nav { flex: 1; display: flex; justify-content: center; }
.cab__nav ul { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.cab__nav a { color: var(--tinta); text-decoration: none; font-size: var(--f-ui); padding: 10px 0; display: inline-block; position: relative; transition: transform 100ms ease-out; }
.cab__nav a:hover { color: var(--azul); }
.cab__nav a[aria-current="page"] { color: var(--azul); font-weight: 500; }
.cab__nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px; background: var(--azul); }
.cab__nav a:active { transform: scale(.97); }
.cab__acciones { display: flex; align-items: center; gap: 20px; flex: none; }
.cab__tel { color: var(--tinta); text-decoration: none; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cab__tel:hover { color: var(--azul); text-decoration: underline; }
.cab__cotizar { min-height: 46px; padding: 0 22px; }
.cab__menu { display: none; min-height: 44px; padding: 0 16px; background: var(--tinta); color: var(--blanco); border: 0; font-weight: 500; cursor: pointer; transition: transform 100ms ease-out; touch-action: manipulation; }
.cab__menu:active { transform: scale(.97); }
@media (max-width: 1099px) {
  .cab__nav, .cab__tel { display: none; }
  .cab__barra { justify-content: space-between; }
  .cab__menu { display: inline-flex; align-items: center; }
}
@media (max-width: 699px) {
  .cab__logo img { height: 34px; }
  .cab__cotizar { display: none; }
}

/* ---------- menú celular: hoja azul desde arriba ---------- */
.menu { position: fixed; inset: 0; z-index: 80; }
.menu[hidden] { display: none; }
.menu__hoja {
  position: absolute; inset: 0; background: var(--azul); color: var(--blanco); display: flex; flex-direction: column;
  padding: 0 var(--m) calc(24px + env(safe-area-inset-bottom)); transform: translate3d(0, -100%, 0); will-change: transform;
  touch-action: none; overscroll-behavior: contain;
}
.menu__arriba { height: var(--cab); display: flex; align-items: center; justify-content: space-between; }
.menu__arriba img { height: 34px; width: auto; }
.menu__cerrar { min-height: 44px; padding: 0 16px; background: var(--blanco); color: var(--azul); border: 0; font-weight: 500; cursor: pointer; transition: transform 100ms ease-out; }
.menu__cerrar:active { transform: scale(.97); }
.menu__lista { margin-top: 32px; display: grid; gap: 4px; }
.menu__lista a { display: block; padding: 10px 0; color: var(--blanco); text-decoration: none; font-size: var(--f-sub); letter-spacing: -0.02em; line-height: 1.2; transition: transform 100ms ease-out; transform-origin: left center; }
.menu__lista a:active { transform: scale(.97); }
.menu__lista a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.menu__pie { margin-top: auto; display: grid; gap: 16px; }
.menu__tel { color: var(--blanco); font-size: var(--f-lead); font-weight: 500; font-variant-numeric: tabular-nums; }
.menu__asa { position: absolute; left: 50%; bottom: 10px; width: 48px; height: 5px; margin-left: -24px; background: var(--azul-claro); border-radius: 3px; }
.menu :focus-visible { outline-color: var(--blanco); }

/* ---------- barra inferior celular ---------- */
.barra-cel { display: none; }
@media (max-width: 699px) {
  .barra-cel {
    display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding-bottom: env(safe-area-inset-bottom); background: var(--tinta);
  }
  .barra-cel a { display: flex; align-items: center; justify-content: center; min-height: 56px; color: var(--blanco); text-decoration: none; font-weight: 500; transition: transform 100ms ease-out; }
  .barra-cel a:active { transform: scale(.97); }
  .barra-cel__cotizar { background: var(--rojo); }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* ---------- héroe de Inicio ---------- */
.heroe { position: relative; min-height: calc(100svh - var(--cab)); overflow: hidden; display: flex; align-items: center; }
.heroe__texto { position: relative; z-index: 2; padding: clamp(32px, 6vh, 72px) var(--m) clamp(120px, 18vh, 200px); width: min(48vw, 760px); }
.heroe__oracion { margin-top: 32px; max-width: 30em; font-size: var(--f-body); }
.heroe .botones { margin-top: 36px; }
.heroe__objeto { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; }
/* el tramo del video ocupa las filas 10,83 % a 94,65 % de la foto: se sube la foto para que ese tramo cubra el héroe */
.objeto { position: absolute; top: 0; left: 45%; height: 121%; aspect-ratio: 3 / 2; background: var(--blanco); transform: translateY(-10.83%); }
.capa { position: absolute; inset: 0; }
.capa img, .capa video, .capa--base img { width: 100%; height: 100%; object-fit: cover; }
.capa--base { inset: 0; }
.capa--video { top: 10.83%; height: 83.82%; bottom: auto; opacity: 0; transition: opacity 1.6s ease; }
.capa--foto { opacity: 0; transition: opacity 1.6s ease; background: var(--blanco); }
.capa--foto img { object-fit: contain; object-position: 34% 46%; transform: scale(.82); transform-origin: 34% 46%; }
.capa.activa { opacity: 1; }
.capa--video { z-index: 1; } .capa[data-capa="dural"] { z-index: 2; } .capa[data-capa="fleje"] { z-index: 3; }
.heroe__pie { position: absolute; left: var(--m); bottom: 28px; z-index: 2; font-size: var(--f-small); color: var(--tenue); }
.heroe__pie span { position: absolute; left: 0; bottom: 0; white-space: nowrap; opacity: 0; transition: opacity .8s ease; }
.heroe__pie span.activa { opacity: 1; }
@media (max-width: 1099px) and (min-width: 700px) {
  .heroe__texto { width: min(58vw, 640px); }
  .objeto { left: 50%; }
}
@media (max-width: 699px) {
  .heroe { display: block; min-height: 0; }
  .heroe__texto { width: auto; padding: 28px var(--m) 32px; }
  .heroe__texto h1 { font-size: clamp(30px, 8.4vw, 34px); }
  .heroe__oracion { margin-top: 20px; font-size: var(--f-ui); }
  .heroe .botones { margin-top: 24px; }
  .heroe .botones .boton { flex: 1 1 100%; }
  .heroe__objeto { position: relative; inset: auto; height: 44svh; min-height: 280px; background: var(--t2); overflow: hidden; }
  .heroe__objeto { mix-blend-mode: normal; isolation: isolate; }
  .objeto { top: 0; left: -2%; height: 104%; transform: none; mix-blend-mode: multiply; }
  .heroe__pie { top: 12px; bottom: auto; color: var(--tinta); }
  .heroe__pie span { bottom: auto; top: 0; }
}

/* ---------- franja 1925 ---------- */
.franja__foto { position: relative; height: 72svh; min-height: 520px; overflow: hidden; background: #2B3237; }
.franja__img img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.franja__img { position: absolute; inset: 0; }
.franja__img img { position: absolute; inset: 0; }
.franja__capa {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; color: var(--campo);
  padding: clamp(32px, 5vw, 72px) var(--m) 0;
  background: linear-gradient(to top, rgba(8, 14, 18, .72) 0%, rgba(8, 14, 18, .42) 22%, rgba(8, 14, 18, 0) 38%); /* taste-skill-ignore: velo neutro sobre foto, solo el 35 % inferior */
}
.franja__titulo { max-width: 12em; }
.franja__base { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.franja__cifra { line-height: 1; margin-bottom: -.085em; margin-left: -.04em; }
.franja__oracion { max-width: 24em; padding-bottom: clamp(28px, 3vw, 48px); font-size: var(--f-body); }
.franja__datos { padding-top: clamp(40px, 5vw, 72px); row-gap: 28px; }
.franja__datos li { grid-column: span 4; }
@media (max-width: 1099px) and (min-width: 700px) { .franja__datos li { grid-column: span 6; } .franja__datos li:last-child { grid-column: 1 / -1; } }
.franja__datos .t-head { max-width: 11em; }
.franja__tel { margin-top: 10px; font-size: var(--f-body); }
.franja__tel a { font-weight: 500; }
@media (max-width: 699px) {
  .franja__foto { height: 64svh; min-height: 440px; }
  .franja__base { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
  .franja__cifra { font-size: 30vw; }
  .franja__oracion { padding-bottom: 0; max-width: none; }
  .franja__datos li { grid-column: 1 / -1; }
  .franja__datos .t-head { font-size: var(--f-sub); }
}

/* ---------- aceros por familia ---------- */
.familias__titulo { grid-column: 1 / span 7; margin-bottom: 56px; }
.familias__bajada { grid-column: 8 / -1; align-self: end; margin-bottom: 60px; max-width: 30em; }
.familias__lateral { grid-column: 1 / span 3; display: grid; align-content: start; gap: 40px; }
.familias__tejas { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 10px; align-content: start; container-type: inline-size; }
@media (min-width: 700px) {
  .familias__tejas .teja__campo { aspect-ratio: auto; height: calc((100cqi - 20px) / 3 * 1.25); }
}
@media (min-width: 1100px) { .familias__lateral { position: sticky; top: calc(var(--cab) + 24px); align-self: start; } }
.teja a { display: block; color: var(--tinta); text-decoration: none; }
.teja__campo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.teja--doble { grid-column: span 2; }
.teja__campo--t1 { background: var(--t1); }
.teja__campo--t2 { background: var(--t2); }
.teja__campo--t3 { background: var(--t3); }
.teja__foto, .teja__foto img { width: 100%; height: 100%; }
.teja__foto img { object-fit: cover; mix-blend-mode: multiply; transition: transform 400ms var(--e-sal), opacity 320ms ease; }
.teja a:hover .teja__foto img { transform: scale(1.02); }
.teja a:active .teja__campo { transform: scale(.985); transition: transform 100ms ease-out; }
.teja.is-apagada .teja__foto img, .teja.is-apagada .teja__codigos { opacity: .35; }
.teja__codigos { position: absolute; left: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 24px); transition: opacity 320ms ease; }
.teja__nombre { margin-top: 14px; font-size: var(--f-lead); font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; }
.teja__grados { margin-top: 4px; font-size: var(--f-ui); color: var(--tenue); }
.teja--ancha { grid-column: span 2; }
.familias__enlaces { grid-column: 4 / -1; margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 32px; }
.familias__enlaces .enlace { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--f-ui); }
@media (max-width: 1099px) {
  .familias__titulo, .familias__bajada { grid-column: 1 / -1; margin-bottom: 0; }
  .familias__bajada { margin: 16px 0 40px; }
  .familias__lateral { grid-column: 1 / -1; margin-bottom: 48px; }
  .familias__tejas, .familias__enlaces { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  .familias__lateral { grid-template-columns: 1fr; }
  .familias__tejas { grid-template-columns: 1fr 1fr; gap: 24px 8px; }
  .teja--doble { grid-column: 1 / -1; order: -1; }
  .teja--doble .teja__campo { aspect-ratio: 8 / 5; height: auto; }
  .teja--doble a { display: block; }
  .teja--ancha { grid-column: auto; }
  .teja--ancha .teja__foto img { object-fit: contain; }
  .familias__enlaces { grid-column: 1 / -1; margin-top: 32px; flex-direction: column; align-items: flex-end; }
  .teja__nombre { font-size: var(--f-ui); margin-top: 10px; }
  .teja__grados { font-size: var(--f-small); }
  .teja__codigos { left: 8px; bottom: 8px; gap: 4px; }
}

/* ---------- identificador ---------- */
.ident__titulo { font-size: var(--f-lead); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; }
.ident--grande .ident__titulo { font-size: var(--f-head); font-weight: 400; }
.ident__instr { margin-top: 12px; font-size: var(--f-ui); }
.ident--grande .ident__instr { font-size: var(--f-body); max-width: 26em; }
.ident__fichas { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ficha {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 2px 8px; background: transparent; border: 0;
  cursor: pointer; font-size: var(--f-small); line-height: 1.15; color: var(--tinta); transition: transform 100ms ease-out, background-color 160ms ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; text-align: center;
}
.ficha:hover { background: var(--t1); }
.ficha.is-presionado, .ficha:active { transform: scale(.97); }
.ficha__muestra { width: 40px; height: 40px; border-radius: 50%; background: var(--c); border: 1.5px solid rgba(35, 31, 32, .55); position: relative; outline: 3px solid transparent; outline-offset: 3px; transition: transform 160ms ease, outline-color 160ms ease; }
.ficha[aria-pressed="true"] { background: var(--superficie); }
.ficha[aria-pressed="true"] .ficha__muestra { outline-color: var(--rojo); }
.ficha[aria-pressed="true"] .ficha__nombre { font-weight: 500; }
.ident__estado { margin-top: 16px; font-size: var(--f-ui); font-weight: 500; min-height: 1.5em; }
.ident__borrar { margin-top: 6px; font-size: var(--f-ui); }
.ident__salida { margin-top: 20px; }
.ident__ayuda, .ident__nota { font-size: var(--f-small); color: var(--tenue); }
.ident__resultados { margin-top: 12px; display: grid; gap: 4px; }
.res { display: grid; grid-template-columns: 88px 1fr; gap: 6px 14px; padding: 12px; background: var(--t1); transition: opacity 260ms ease, transform 360ms var(--e-sal); }
.res .codigo { grid-row: span 2; align-self: start; }
.res__grado { font-size: var(--f-body); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.res__norma { font-size: var(--f-small); color: var(--tinta); }
.res__familia { font-size: var(--f-small); color: var(--tenue); }
.res__acciones { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--f-small); }
@media (max-width: 699px), (pointer: coarse) {
  .res__acciones { gap: 0 20px; margin-block: -8px -10px; }
  .res__acciones .enlace, .tabla td:last-child .enlace { display: inline-flex; align-items: center; min-height: 44px; }
}
.res[hidden] { display: none; }
.res.is-entrando { opacity: 0; transform: translateY(8px); }
.ident__confirmar { margin-top: 16px; font-size: var(--f-ui); }
.ident__nota { margin-top: 10px; }
.js .ident:not(.is-abierta) .ident__ayuda,
.js .ident:not(.is-abierta) .ident__resultados { display: none; }
.ident__desplegar { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 4px; font-size: var(--f-ui); text-align: left; }
html:not(.js) .ident__desplegar { display: none; }
html:not(.js) .ident__fichas, html:not(.js) .ident__borrar, html:not(.js) .ident__estado { display: none; }
html:not(.js) .ident__instr { display: none; }
.ident--compacto .ident__resultados { max-height: none; }
@media (max-width: 699px) {
  .ident__fichas { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .ficha__muestra { width: 48px; height: 48px; }
  .ficha { font-size: var(--f-small); padding: 8px 0; }
}

/* identificador grande (página Aceros) */
.ident-sec { background: var(--superficie); padding-block: clamp(56px, 7vw, 112px); }
.ident--grande { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-inline: var(--m); }
.ident--grande .ident__controles { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--cab) + 72px); }
.ident--grande .ident__salida { grid-column: 6 / -1; margin-top: 0; }
.ident--grande .ident__resultados { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ident--grande .res { background: var(--campo); grid-template-columns: 112px 1fr; }
.ident--grande .ident__fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 420px; }
.ident--grande .ficha:hover { background: var(--t2); }
.ident--grande .ficha[aria-pressed="true"] { background: var(--campo); }

@media (max-width: 1099px) {
  .ident--grande .ident__controles { grid-column: 1 / -1; position: static; }
  .ident--grande .ident__salida { grid-column: 1 / -1; margin-top: 32px; }
}
@media (max-width: 699px) {
  .ident--grande .ident__resultados { grid-template-columns: 1fr; }
  .ident--grande .ident__fichas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- servicios (Inicio) ---------- */
.servicios { position: relative; background: var(--superficie); padding-block: var(--sec) calc(var(--sec) * .7); }
.servicios__cabeza { text-align: center; padding-inline: var(--m); }
.servicios__titulo { display: flex; justify-content: center; align-items: center; gap: 0; font-size: var(--f-display); }
.servicios__hueco { display: block; width: 340px; height: 320px; flex: none; }
.servicios__pie { font-size: var(--f-small); color: var(--tenue); margin-top: 8px; }
.servicios__bajada { margin: 20px auto 0; max-width: 30em; }
.servicios__riel { position: absolute; left: 50%; top: calc(var(--sec) - 6px); bottom: calc(var(--sec) * .7 + 120px); width: 320px; margin-left: -160px; z-index: 2; pointer-events: none; mix-blend-mode: multiply; }
.servicios__engranaje { position: sticky; top: calc(50svh - 160px); width: 320px; height: 320px; }
.engranaje, .engranaje img { width: 320px; height: 320px; }
.engranaje img { will-change: transform; }
.servicios__filas { margin-top: 56px; position: relative; z-index: 1; }
.fila { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 28px var(--m); min-height: 120px; align-items: center; }
.fila:nth-child(odd) { background: var(--superficie); }
.fila:nth-child(even) { background: var(--t1); }
.fila__principal { grid-column: 1 / span 5; }
.fila__nombre { font-size: var(--f-sub); font-weight: 500; letter-spacing: -0.025em; line-height: 1.12; margin-bottom: 8px; }
.fila__principal p { font-size: var(--f-ui); max-width: 34em; }
.fila__nota { grid-column: 9 / -1; font-size: var(--f-ui); }
.servicios__cierre { margin-top: 56px; display: flex; justify-content: center; padding-inline: var(--m); }
.servicios__cierre .botones { justify-content: center; }
@media (max-width: 1099px) {
  .servicios__riel { display: none; }
  .servicios__hueco { display: none; }
  .servicios__titulo { gap: .25em; flex-wrap: wrap; }
  .servicios__cabeza::before { content: none; }
  .fila__principal { grid-column: 1 / span 8; }
  .fila__nota { grid-column: 9 / -1; }
}
@media (max-width: 699px) {
  .servicios__titulo { font-size: var(--f-sub); }
  .fila { padding: 24px 16px; }
  .fila__principal, .fila__nota { grid-column: 1 / -1; }
  .fila__nota { margin-top: 10px; font-size: var(--f-ui); color: var(--tenue); }
  .fila__nombre { font-size: var(--f-sub); }
  .fila__principal p { font-size: var(--f-ui); }
  .servicios__cierre .boton { flex: 1 1 100%; }
}
.servicios__estatico { display: none; }
@media (max-width: 1099px) {
  .servicios__estatico { display: block; width: 40%; max-width: 280px; margin: 0 auto 8px; }
  .servicios__estatico img { mix-blend-mode: multiply; width: 100%; height: auto; }
}

/* ---------- el objeto vuelve: catálogo y asesoría ---------- */
.vuelve { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-right: var(--m); min-height: min(92svh, 920px); }
.vuelve__objeto { grid-column: 1 / span 8; position: relative; overflow: hidden; background: var(--blanco); mix-blend-mode: multiply; }
.vuelve__img, .vuelve__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vuelve__img img { object-fit: cover; object-position: 100% 0; }
.vuelve__texto { grid-column: 10 / -1; align-self: center; display: grid; gap: 20px; padding-block: 64px; }
.vuelve__texto p { font-size: var(--f-ui); }
.vuelve__texto .vuelve__dato { font-size: var(--f-body); font-weight: 500; letter-spacing: -0.015em; }
@media (max-width: 1099px) {
  .vuelve__objeto { grid-column: 1 / span 7; }
  .vuelve__texto { grid-column: 8 / -1; }
}
@media (max-width: 699px) {
  .vuelve { display: flex; flex-direction: column-reverse; padding-right: 0; min-height: 0; }
  .vuelve__texto { padding: 72px var(--m) 32px; }
  .vuelve__objeto { height: 52svh; min-height: 320px; width: 100%; }
  .vuelve__img img { object-position: 100% 0; }
}

/* ---------- panel Empresa ---------- */
.panel-sec { padding: 20px; }
.panel {
  position: relative; background: var(--azul); color: var(--campo); min-height: calc(36vw * .8 + clamp(56px, 7vw, 112px) + 200px); overflow: hidden;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: clamp(56px, 7vw, 112px) var(--m) 0;
}
.panel__logo { position: absolute; top: clamp(28px, 3vw, 44px); right: var(--m); width: 150px; height: auto; }
.panel__izq { grid-column: 1 / span 6; }
.panel__izq .t-head { max-width: 10em; }
.panel__der { grid-column: 8 / -1; align-self: start; display: grid; gap: 36px; justify-items: start; padding-block: 12px clamp(56px, 6vw, 96px); }
.panel__bloque { max-width: 300px; }
.panel__bloque h3 { font-size: var(--f-lead); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.panel__bloque p { margin-top: 10px; font-size: var(--f-ui); color: var(--azul-claro); }
.panel__circulo { position: absolute; left: var(--m); bottom: calc(-36vw * .2); width: 36vw; aspect-ratio: 1; }
.panel__circulo picture { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.panel__circulo img { width: 100%; height: 100%; object-fit: cover; }
.panel__circulo figcaption { position: absolute; left: calc(100% + 16px); bottom: 22%; font-size: var(--f-small); color: var(--azul-claro); white-space: nowrap; }
.panel :focus-visible { outline-color: var(--blanco); }
@media (max-width: 1099px) {
  .panel__der { grid-column: 7 / -1; }
}
@media (max-width: 699px) {
  .panel-sec { padding: 10px; }
  .panel { display: block; min-height: 0; padding: 56px 20px 0; }
  .panel__logo { position: static; width: 132px; margin-bottom: 40px; }
  .panel__izq .t-head { font-size: var(--f-sub); }
  .panel__der { padding-block: 32px 40px; gap: 28px; }
  .panel__der .boton { width: 100%; }
  .panel__circulo { position: relative; left: auto; bottom: auto; width: 86vw; margin: 0 auto -17vw; }
  .panel__circulo figcaption { left: auto; right: 0; bottom: calc(17vw + 12px); top: auto; position: absolute; transform: translateY(-100%); }
}

/* ---------- equipo comercial ---------- */
.equipo__cabeza { grid-column: 1 / span 4; }
.equipo__cabeza .t-cuerpo { margin-top: 18px; max-width: 24em; }
.equipo__lista { grid-column: 6 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 48px var(--gap); align-content: start; }
.persona { display: grid; grid-template-columns: 88px 1fr; column-gap: 20px; row-gap: 14px; align-items: center; }
.persona__foto { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: var(--superficie); }
.persona__iniciales { display: grid; place-items: center; background: var(--azul); color: var(--blanco); font-weight: 500; font-size: var(--f-lead); letter-spacing: -0.01em; }
.persona__nombre { font-size: var(--f-body); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }
.persona__cargo { font-size: var(--f-small); color: var(--tenue); margin-top: 2px; }
.persona__acciones { grid-column: 2; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
@media (max-width: 1099px) {
  .equipo__cabeza { grid-column: 1 / -1; margin-bottom: 48px; }
  .equipo__lista { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  .equipo__lista { grid-template-columns: 1fr; gap: 36px; }
  .persona { grid-template-columns: 64px 1fr; column-gap: 16px; }
  .persona__foto { width: 64px; height: 64px; font-size: var(--f-lead); }
  .persona__acciones { grid-column: 1 / -1; }
  .persona__acciones .boton { flex: 1 1 auto; }
}

/* ---------- contacto: mapa con tarjeta ---------- */
.contacto { position: relative; }
.contacto__mapa { position: relative; height: 90svh; min-height: 620px; overflow: hidden; background: var(--superficie); }
.contacto__mapa picture, .contacto__mapa img { width: 100%; height: 100%; }
.contacto__mapa img { object-fit: cover; object-position: 40% 56%; }
.contacto__credito { position: absolute; left: var(--m); bottom: 12px; width: max-content; height: auto; font-size: var(--f-small); line-height: 1.4; color: var(--tinta); background: rgba(238, 242, 244, .88); padding: 4px 8px; text-decoration: none; }
.contacto__credito:hover { text-decoration: underline; }
.tarjeta { position: absolute; top: clamp(32px, 6vw, 88px); right: var(--m); width: 400px; background: var(--superficie); padding: 32px; display: grid; gap: 18px; }
.tarjeta address { display: grid; gap: 14px; }
.tarjeta a:not(.boton) { font-weight: 500; }
.tarjeta .boton { margin-top: 6px; }
@media (max-width: 699px) {
  .contacto__mapa { height: 64svh; min-height: 420px; }
  .contacto__mapa img { object-position: 50% 40%; }
  .tarjeta { position: relative; top: auto; right: auto; width: auto; margin: -80px var(--m) 0; padding: 24px; }
  .contacto__credito { top: 12px; bottom: auto; right: auto; }

}

/* ---------- pie: el reverso de la tarjeta ---------- */
.pie { background: var(--azul); padding-top: clamp(40px, 4vw, 64px); }
.pie__panel {
  margin-inline: calc((100% - 2 * var(--m)) / 12 + var(--m));
  background: var(--campo); padding: clamp(96px, 9vw, 140px) clamp(24px, 4vw, 64px) 40px;
  clip-path: polygon(0 56px, 50% 0, 100% 56px, 100% 100%, 0 100%);
}
.pie__grilla { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; }
.pie__cierre p { margin-top: 16px; max-width: 26em; }
.pie__datos { display: grid; justify-items: start; gap: 28px; }
.pie__logo { width: 160px; height: auto; justify-self: end; }
.pie__contacto { display: grid; gap: 8px; font-size: var(--f-ui); }
.pie__contacto a { color: var(--tinta); }
.pie__contacto a:hover { color: var(--azul); }
.pie__familias { margin-top: 64px; }
.pie__subtitulo { font-size: var(--f-small); font-weight: 500; margin-bottom: 12px; }
.pie__familias ul { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: var(--f-small); }
.pie__familias a { color: var(--tinta); text-decoration: none; }
.pie__familias a:hover { color: var(--azul); text-decoration: underline; }
.pie__imprenta { margin-top: 56px; text-align: center; font-size: var(--f-small); color: var(--tenue); }
.pie__creditos { margin-top: 8px; text-align: center; font-size: var(--f-small); color: var(--tenue); }
.pie__creditos a { color: var(--tenue); }
@media (max-width: 699px) {
  .pie { padding-top: 40px; }
  .pie__panel { margin-inline: 0; padding: 72px 20px 32px; clip-path: polygon(0 32px, 50% 0, 100% 32px, 100% 100%, 0 100%); }
  .pie__grilla { grid-template-columns: 1fr; gap: 36px; }
  .pie__logo { justify-self: start; }
  .pie__contacto { font-size: var(--f-ui); }
  .pie__familias ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
}

/* ---------- cabezas de página interior ---------- */
.cabeza-pag { padding-block: clamp(56px, 8vw, 128px) clamp(48px, 6vw, 96px); }
.cabeza-pag__t { grid-column: 1 / -1; font-size: clamp(40px, 7.4vw, 120px); line-height: .98; letter-spacing: -0.045em; }
.cabeza-pag__texto { grid-column: 1 / span 7; margin-top: clamp(28px, 3vw, 48px); display: grid; gap: 28px; justify-items: start; }
.cabeza-pag__texto .t-cuerpo { max-width: 34em; }
.cabeza-pag--404 { min-height: 60svh; }
@media (max-width: 1099px) {
  .cabeza-pag__t, .cabeza-pag__texto { grid-column: 1 / -1; }
}

/* ---------- subnavegación de familias ---------- */
.sub { position: sticky; top: var(--cab); z-index: 40; background: var(--campo); }
.sub ul { position: relative; display: flex; gap: 4px; overflow-x: auto; padding: 10px var(--m); scrollbar-width: none; scroll-snap-type: x proximity; }
@media (min-width: 1100px) { .sub ul { flex-wrap: wrap; overflow: visible; padding-block: 8px; } .sub a { padding: 7px 10px; } }
.sub ul::-webkit-scrollbar { display: none; }
.sub li { flex: none; scroll-snap-align: start; }
.sub a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: var(--tinta); text-decoration: none; font-size: var(--f-small); white-space: nowrap; transition: transform 100ms ease-out, background-color 160ms ease; }
.sub a:hover { background: var(--t1); }
.sub a:active { transform: scale(.97); }
.sub a.is-actual { background: var(--superficie); font-weight: 500; }
.sub__cod { flex: none; }
.sub__cod--vacio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--tenue); }
.cab.is-fija + .menu + .barra-cel + main .sub { background: var(--campo); }

/* ---------- fichas de familia (Aceros) ---------- */
.ficha-fam { padding-block: clamp(72px, 8vw, 128px) 0; }
.ficha-fam .grilla { row-gap: 48px; }
.ficha-fam__foto { grid-column: 1 / span 5; margin: 0; }
.ficha-fam__foto picture, .ficha-fam__foto img { width: 100%; height: 100%; }
.ficha-fam__foto img { object-fit: cover; mix-blend-mode: multiply; }
.ficha-fam__foto figcaption { position: absolute; left: 0; bottom: 0; background: var(--campo); padding: 8px 14px 0 0; font-size: var(--f-small); color: var(--tenue); }
.ficha-fam__texto { grid-column: 7 / -1; align-self: center; display: grid; gap: 20px; justify-items: start; }
.ficha-fam__texto p { max-width: 34em; }
.ficha-fam__grados { font-weight: 500; font-variant-numeric: tabular-nums; }
.ficha-fam--inv .ficha-fam__foto { grid-column: 8 / -1; grid-row: 1; }
.ficha-fam--inv .ficha-fam__texto { grid-column: 1 / span 6; grid-row: 1; }
.ficha-fam__tabla { grid-column: 1 / -1; }
@media (max-width: 1099px) {
  .ficha-fam__foto, .ficha-fam__texto, .ficha-fam--inv .ficha-fam__foto, .ficha-fam--inv .ficha-fam__texto { grid-column: 1 / -1; grid-row: auto; }
  .ficha-fam__foto { max-width: 560px; }
  .ficha-fam .grilla { row-gap: 28px; }
}
@media (max-width: 1099px) {
  .ficha-fam__foto figcaption { top: 0; bottom: auto; padding: 0 14px 8px 0; }
}

/* tabla real de grados: aquí sí van líneas finas */
.ficha-fam__tabla { min-width: 0; }
.tabla-envoltura { position: relative; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla { width: 100%; min-width: 52rem; border-collapse: collapse; font-size: var(--f-ui); }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid #B4C3CC; }
.tabla thead th { font-size: var(--f-small); font-weight: 500; color: var(--tenue); border-bottom: 2px solid var(--tinta); }
.tabla tbody th { font-weight: 500; font-size: var(--f-ui); white-space: nowrap; }
.tabla td:nth-child(3), .tabla td:nth-child(4), .tabla td:nth-child(5) { white-space: nowrap; }
.tabla__apl { min-width: 22em; }
.tabla td:last-child { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1199px) {
  .tabla td:nth-child(4), .tabla tbody th { white-space: normal; min-width: 6em; }   /* DIN largo (Dural) y nombre del fleje en dos líneas antes que desplazar */
  .tabla__apl { min-width: 18em; }
}
@media (min-width: 900px) and (max-width: 979px) { .tabla__apl { min-width: 15em; } }
.tabla tr:target { background: var(--superficie); }
.tabla tr:target th { color: var(--azul); }
@media (max-width: 899px) {
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla, .tabla tbody, .tabla tr, .tabla th, .tabla td { display: block; width: 100%; }
  .tabla { min-width: 0; }
  .tabla tr { padding: 16px 0; border-bottom: 1px solid #B4C3CC; }
  .tabla th, .tabla td { border: 0; padding: 4px 0; white-space: normal !important; }
  .tabla td[data-th]::before, .tabla th[data-th]::before { content: attr(data-th); display: inline-block; min-width: 8.5em; font-size: var(--f-small); color: var(--tenue); font-weight: 400; }
  .tabla td:first-child::before { content: none; }
  .tabla__apl { min-width: 0; }
  .tabla__apl::before { display: block !important; }
}

/* ---------- calculadora ---------- */
.calc { background: var(--superficie); margin-top: clamp(96px, 10vw, 160px); }
.calc__cabeza { grid-column: 1 / span 4; }
.calc__cabeza .t-cuerpo { margin-top: 16px; }
.calc__form { grid-column: 5 / span 8; display: grid; gap: 24px; align-content: start; }
.calc__etq { font-size: var(--f-small); color: var(--tenue); margin-bottom: -12px; }
.seg { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--t2); padding: 4px; }
.seg__pulgar { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; background: var(--campo); will-change: transform; }
.seg__opcion { position: relative; z-index: 1; min-height: 48px; padding: 0 8px; border: 0; background: transparent; cursor: pointer; font-size: var(--f-ui); color: var(--tenue); transition: color 160ms ease, transform 100ms ease-out; touch-action: manipulation; }
.seg__opcion[aria-checked="true"] { color: var(--tinta); font-weight: 500; }
.seg__opcion:active, .seg__opcion.is-presionado { transform: scale(.97); }
.calc__cuerpo { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
.calc__dibujo { width: 220px; height: 220px; background: var(--campo); display: grid; place-items: center; }
.calc__dibujo svg { width: 180px; height: 180px; overflow: visible; }
.calc__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo { display: grid; gap: 6px; font-size: var(--f-small); color: var(--tenue); align-content: start; }
.campo > span:first-child { color: var(--tinta); font-weight: 500; }
.campo input, .campo textarea {
  font: inherit; font-size: var(--f-ui); color: var(--tinta); background: var(--campo); border: 0; border-bottom: 2px solid var(--tinta);
  border-radius: 0; padding: 12px 12px; min-height: 52px; width: 100%; font-variant-numeric: tabular-nums;
}
.campo textarea { resize: vertical; min-height: 140px; line-height: 1.45; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--azul); outline-offset: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo__ayuda { font-size: var(--f-small); }
.campo__error { font-size: var(--f-small); color: var(--rojo); font-weight: 500; }
.campo.is-error input, .campo.is-error textarea { border-bottom-color: var(--rojo); }
.calc__resultado { background: var(--campo); padding: 24px; }
.calc__kgm { font-size: var(--f-sub); letter-spacing: -0.03em; line-height: 1.1; }
.calc__total { margin-top: 8px; font-size: var(--f-ui); min-height: 1.5em; }
.calc__form > .boton { justify-self: start; }
.calc__formulas { grid-column: 5 / span 8; margin-top: 40px; font-size: var(--f-small); color: var(--tenue); display: grid; gap: 8px; }
.calc__formulas ul { display: grid; gap: 6px; color: var(--tinta); font-size: var(--f-ui); }
.calc__fnombre { font-weight: 500; }
.calc__fexpr { font-variant-numeric: tabular-nums; }
.calc__fej { color: var(--tenue); }
.calc__fej::before { content: "· "; }
@media (max-width: 1099px) {
  .calc__cabeza, .calc__form, .calc__formulas { grid-column: 1 / -1; }
  .calc__cabeza { margin-bottom: 32px; }
}
@media (max-width: 699px) {
  .calc__cuerpo { grid-template-columns: 1fr; }
  .calc__dibujo { width: 100%; height: 180px; }
  .calc__dibujo svg { width: 150px; height: 150px; }
  .calc__campos { grid-template-columns: 1fr 1fr; gap: 12px; }
  .seg__opcion { font-size: var(--f-small); padding: 0 2px; }
  .calc__form > .boton { justify-self: stretch; }
}

/* ---------- cierre de página ---------- */
.cierre__caja { margin-inline: var(--m); background: var(--superficie); padding: clamp(40px, 6vw, 96px) clamp(24px, 6vw, 96px); display: grid; gap: 20px; justify-items: start; }
.cierre__caja .t-head { max-width: 16em; }
.cierre__caja .t-cuerpo { max-width: 30em; }
.cierre__caja .botones { margin-top: 8px; }

/* ---------- servicios (página) ---------- */
.bloques { display: grid; gap: clamp(72px, 9vw, 144px); }
.bloque { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-right: var(--m); align-items: center; }
.bloque__foto { grid-column: 1 / span 6; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--superficie); }
.bloque__foto picture, .bloque__foto img { width: 100%; height: 100%; }
.bloque__foto img { object-fit: cover; }
.bloque__foto--producto img { mix-blend-mode: multiply; }
.bloque__foto figcaption { position: absolute; left: 0; bottom: 0; background: var(--campo); padding: 8px 14px 0 var(--m); font-size: var(--f-small); color: var(--tenue); }
.bloque__texto { grid-column: 8 / span 5; display: grid; gap: 20px; justify-items: start; }
.bloque__mat { font-weight: 500; }
.bloque--inv { padding-right: 0; padding-left: var(--m); }
.bloque--inv .bloque__foto { grid-column: 7 / -1; grid-row: 1; }
.bloque--inv .bloque__texto { grid-column: 1 / span 5; grid-row: 1; }
.bloque--inv .bloque__foto figcaption { left: auto; right: 0; padding: 8px var(--m) 0 14px; }
@media (max-width: 699px) {
  .bloque, .bloque--inv { display: flex; flex-direction: column; padding: 0; gap: 24px; align-items: stretch; }
  .bloque__foto { width: 100%; }
  .bloque__texto { padding-inline: var(--m); }
  .bloque__texto .boton { width: 100%; }
}

/* ---------- empresa (página) ---------- */
.emp-heroe__foto { height: min(80svh, 820px); }
.emp-heroe__texto { padding-top: clamp(48px, 6vw, 96px); row-gap: 24px; }
.emp-heroe__texto .t-entrada { grid-column: 1 / span 7; }
.emp-heroe__texto .t-cuerpo { grid-column: 9 / -1; align-self: end; }
.focos__circulo { grid-column: 1 / span 5; position: relative; }
.focos__circulo picture { border-radius: 50%; overflow: hidden; aspect-ratio: 1; }
.focos__circulo img { width: 100%; height: 100%; object-fit: cover; }
.focos__circulo figcaption { margin-top: 14px; font-size: var(--f-small); color: var(--tenue); }
.focos__texto { grid-column: 7 / -1; align-self: center; display: grid; gap: 36px; }
.foco h3 { font-size: var(--f-lead); font-weight: 500; letter-spacing: -0.02em; }
.foco p { margin-top: 8px; max-width: 32em; }
.calidad { background: var(--superficie); }
.calidad__cabeza { grid-column: 1 / span 5; }
.calidad__estado { margin-top: 20px; font-size: var(--f-lead); letter-spacing: -0.02em; font-weight: 500; color: var(--azul); }
.calidad__texto { grid-column: 7 / -1; }
.calidad__lista { margin-top: 24px; list-style: decimal; padding-left: 1.4em; display: grid; gap: 14px; }
.calidad__lista li::marker { color: var(--tenue); font-variant-numeric: tabular-nums; }
@media (max-width: 1099px) {
  .emp-heroe__texto .t-entrada, .emp-heroe__texto .t-cuerpo, .focos__circulo, .focos__texto, .calidad__cabeza, .calidad__texto { grid-column: 1 / -1; }
  .focos__circulo { max-width: 560px; margin-top: 48px; order: 2; }
  .focos__texto { order: 1; }
  .calidad__texto { margin-top: 32px; }
}

/* ---------- contacto (página) ---------- */
.vias__t { grid-column: 1 / span 4; }
.vias__lista { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.vias__lista li { background: var(--superficie); padding: 28px 24px; display: grid; gap: 10px; align-content: start; }
.vias__lista h3 { font-size: var(--f-lead); font-weight: 500; letter-spacing: -0.02em; }
.vias__lista a { font-size: var(--f-ui); }
.form-sec { background: var(--superficie); }
.form-sec__cabeza { grid-column: 1 / span 4; }
.form-sec__cabeza .t-cuerpo { margin-top: 16px; }
.formulario { grid-column: 6 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-content: start; align-self: start; }
.formulario__pie { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.formulario__nota { font-size: var(--f-small); color: var(--tenue); }
@media (max-width: 1099px) {
  .vias__t, .vias__lista, .form-sec__cabeza, .formulario { grid-column: 1 / -1; }
  .vias__lista { margin-top: 32px; }
  .formulario { margin-top: 32px; }
}
@media (max-width: 699px) {
  .vias__lista { grid-template-columns: 1fr; }
  .formulario { grid-template-columns: 1fr; }
  .formulario .boton { width: 100%; }
}

/* ---------- entradas escalonadas (solo con JS; sin JS todo queda visible) ---------- */
.js [data-entra] { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 700ms var(--e-sal), transform 900ms var(--e-sal); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-entra].is-visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
  .js [data-entra] { opacity: 1; transform: none; }
  .teja a:hover .teja__foto img { transform: none; }
  .capa--video { display: none; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- tiras de producto (Empresa, Contacto) ---------- */
.tira { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: clamp(48px, 5vw, 80px); }
.tira figure { position: relative; }
.tira .teja__campo picture, .tira .teja__campo img { width: 100%; height: 100%; }
.tira .teja__campo img { object-fit: cover; mix-blend-mode: multiply; }
.tira figcaption { margin-top: 10px; font-size: var(--f-small); color: var(--tenue); }
.tira a { color: inherit; text-decoration: none; }
.tira a:hover figcaption { color: var(--azul); text-decoration: underline; }
.form-sec__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 40px; }
.form-sec__fotos figcaption { margin-top: 8px; font-size: var(--f-small); color: var(--tenue); }
.form-sec__fotos .teja__campo img, .form-sec__fotos picture { width: 100%; height: 100%; }
.form-sec__fotos .teja__campo img { object-fit: cover; mix-blend-mode: multiply; }
@media (max-width: 699px) { .tira { grid-template-columns: 1fr 1fr; } }

@media (max-width: 699px) {
  .bloque__foto figcaption, .bloque--inv .bloque__foto figcaption { top: 0; bottom: auto; left: 0; right: auto; padding: 0 14px 8px var(--m); }
}
@media (max-width: 1099px) {
  .sub ul { margin-inline: var(--m); padding-inline: 0; }
}

/* ---------- sin JavaScript: el menú se muestra como enlaces visibles ---------- */
html:not(.js) .cab__menu { display: none; }
@media (max-width: 1099px) {
  html:not(.js) .cab__barra { height: auto; flex-wrap: wrap; padding-block: 12px; row-gap: 8px; }
  html:not(.js) .cab__nav { display: flex; order: 3; width: 100%; justify-content: flex-start; }
  html:not(.js) .cab__nav ul { flex-wrap: wrap; gap: 0 18px; }
}