/* ==========================================================================
   Elementos de izaje — estilos propios de /elementos-de-izaje/
   Usa los tokens de styles.css; solo complementa lo que no existe allí.
   ========================================================================== */

/* Hero: la foto es de producto sobre fondo blanco, se oscurece más para leer el texto */
.page-hero__bg { object-position: 75% 50%; }
.page-hero::before { background: linear-gradient(90deg, rgba(8, 18, 26, .96) 0%, rgba(8, 18, 26, .88) 50%, rgba(8, 18, 26, .62) 100%), linear-gradient(180deg, rgba(8, 18, 26, .6) 0%, rgba(8, 18, 26, 0) 30%); }

/* El menú de anclas también es sticky: más margen al saltar a una sección */
html { scroll-padding-top: calc(var(--header-h) + 76px); }

/* Subtítulos dentro de una sección */
.iz-sub { margin: var(--space-8) 0 var(--space-5); max-width: 780px; }
.iz-sub h3 { font-size: var(--fs-xl); }
.iz-sub p { margin-top: var(--space-2); }

/* Tarjetas de producto (extienden .model) */
.models-grid--sm { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.model__img { position: relative; overflow: hidden; min-height: 0; }
.model__img img { position: absolute; inset: 0; padding: var(--space-4); }
.model h4 { font-size: var(--fs-lg); }
.iz-specs { list-style: none; margin-top: var(--space-2); font-size: var(--fs-sm); }
.iz-specs li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 8px 0; border-top: 1px solid var(--line); }
.iz-specs strong { color: var(--ink); font-family: var(--font-head); white-space: nowrap; }
.iz-sizes { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.iz-sizes li { font-size: var(--fs-xs); font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); color: var(--ink); }

/* Tablas técnicas anchas */
.table-wrap:focus-visible { outline-offset: 2px; }
.table caption small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--text-mute); margin-top: 2px; }
.table--wide { min-width: 880px; }
.table--wide th, .table--wide td { padding: 10px 12px; text-align: center; font-variant-numeric: tabular-nums; }
.table--wide th[scope="row"] { text-align: left; }
.table thead th small { display: block; margin-top: 2px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--yellow-500); }
.table thead tr + tr th { background: var(--navy-700); }
.iz-note { font-size: var(--fs-xs); color: var(--text-mute); margin-top: var(--space-3); max-width: 100ch; }
.iz-hint { display: none; font-size: var(--fs-xs); font-weight: 600; color: var(--navy-600); margin-top: var(--space-2); }
@media (max-width: 959px) { .iz-hint { display: block; } }

/* Diagramas de configuraciones */
.iz-figs { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .iz-figs { grid-template-columns: 1fr 1fr; } }
.iz-figs figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.iz-figs figcaption { padding: var(--space-4) var(--space-5); font-family: var(--font-head); font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); }
.iz-figs img { width: 100%; padding: var(--space-4); }

/* En stock / A medida */
.iz-modes { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .iz-modes { grid-template-columns: 1fr 1fr; } }
.iz-mode { padding: var(--space-6); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .03); }
.iz-mode--accent { border-color: var(--yellow-500); }
.iz-mode__head { display: flex; align-items: center; gap: var(--space-4); }
.iz-mode__img { width: 88px; height: 88px; flex-shrink: 0; border-radius: var(--radius); background: #fff; overflow: hidden; }
.iz-mode__img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.iz-mode h3 { font-size: var(--fs-xl); }
.iz-mode h3 span { display: block; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--yellow-500); margin-bottom: 4px; }
.iz-mode > p { color: var(--on-dark-mute); margin-top: var(--space-4); }
.iz-mode .ticks { grid-template-columns: 1fr; }

/* Seguridad */
.iz-rules { list-style: none; counter-reset: rule; display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.iz-rules li { counter-increment: rule; display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4); align-items: start; color: var(--on-dark); font-size: var(--fs-sm); }
.iz-rules li::before { content: "0" counter(rule); display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: rgba(255, 203, 50, .14); color: var(--yellow-500); font-family: var(--font-head); font-weight: 800; }
.iz-rules strong { color: #fff; }
.iz-quality { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.iz-quality li { padding: var(--space-3) var(--space-4); border: 1px solid var(--line-dark); border-radius: var(--radius); font-size: var(--fs-xs); color: var(--on-dark-mute); }
.iz-quality strong { display: block; font-family: var(--font-head); font-size: var(--fs-md); color: var(--yellow-500); }

.iz-legal { font-size: var(--fs-xs); color: var(--text-mute); margin-top: var(--space-4); }