/* =============================================================
   camasdemetal.com — estilos propios del sitio en español
   Se carga después de main.css y solo añade lo que main.css no tiene.
   Regla: nada de colores nuevos. Solo --ink / --yellow / --gray / --mist.

   Criterio de densidad (2026-10-19): las webs españolas del sector
   (Mobboli, Khama, Alpha Contract) van más apretadas que el original
   inglés: bloques más cortos, titulares más pequeños y más secciones.
   Por eso aquí se recorta el ritmo vertical de main.css.
   ============================================================= */

.section { padding: 64px 0; }
.section--tight { padding: 44px 0; }
.h2 { font-size: clamp(23px, 2.9vw, 33px); letter-spacing: -.02em; }
.lede { font-size: 16.5px; line-height: 1.6; }
.note p { font-size: 15px; line-height: 1.68; }
@media (max-width: 640px) { .section { padding: 44px 0; } }

/* ---------- Barra superior con teléfono ----------
   El comprador B2B español llama antes de escribir. Si el teléfono no está
   a la vista en la primera pantalla, se pierde la llamada. */
.topbar { background: var(--ink); color: #d1d5db; font-size: 13px; }
.topbar__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; min-height: 36px; padding-top: 6px; padding-bottom: 6px;
}
.topbar__left, .topbar__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.topbar a { color: #fff; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.topbar a:hover { color: var(--yellow); }
.topbar svg { width: 13px; height: 13px; fill: currentColor; }
.topbar__sep { color: #4b5563; }
.topbar__hours { color: #9ca3af; }
.topbar__right a { font-weight: 500; color: #9ca3af; }
.topbar__right a:first-child {
  color: var(--yellow); border: 1px solid rgba(250,204,21,.4);
  border-radius: 3px; padding: 2px 8px;
}
@media (max-width: 900px) {
  .topbar__hours, .topbar__sep, .topbar__right a:last-child { display: none; }
  .topbar { font-size: 12.5px; }
}
/* A 390 px el teléfono (~150 px) y el email (~180 px) no caben en la misma
   línea y la barra se partía en tres: teléfono / email / zona profesional.
   En móvil se queda el teléfono, que es la acción; el email está en el pie
   y en la barra inferior está «Presupuesto». */
@media (max-width: 640px) {
  .topbar__left a[href^="mailto"] { display: none; }
  .topbar__right a:first-child { white-space: nowrap; padding: 2px 7px; }
  .topbar__in { min-height: 32px; gap: 10px; }
}

/* ---------- Rejilla de cifras grandes ---------- */
.nums {
  display: grid; grid-template-columns: repeat(var(--n, 3), 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-top: 28px;
}
.section--ink .nums { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.16); }
.num-i { background: #fff; padding: 26px 24px; }
.section--ink .num-i { background: var(--ink); }
.num-i__n {
  font-size: clamp(32px, 4.2vw, 46px); font-weight: 700; line-height: 1;
  letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.section--ink .num-i__n { color: var(--yellow); }
.num-i__l { font-size: 15px; font-weight: 700; margin-top: 10px; }
.num-i__s { font-size: 13.5px; color: var(--gray); margin-top: 5px; line-height: 1.5; }
.nums__note { font-size: 13px; color: var(--gray); margin-top: 14px; }
@media (max-width: 900px) { .nums { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .nums { grid-template-columns: 1fr; } }

/* ---------- Banda de descarga de catálogo ---------- */
.dlband { background: var(--mist); border-top: 3px solid var(--yellow); }
.dlband__in { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.dlband__txt { flex: 1 1 420px; }
.dlband__txt h2 { font-size: clamp(21px, 2.6vw, 28px); margin-bottom: 8px; }
.dlband__txt p { margin: 0; color: var(--gray); font-size: 15px; max-width: 56ch; }
.dlband__act { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.dlband__meta { font-size: 12.5px; color: var(--gray); }

/* ---------- Enlace de descarga en el pie ----------
   Khama y Mobboli ponen el catálogo o la guía en el pie: es donde mira
   quien ya ha recorrido la página y quiere el PDF para reenviarlo. */
.ftr__dl { margin-top: 14px; }
.ftr__dl a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; color: var(--yellow);
}
.ftr__dl a:hover { color: #fff; }
.ftr__dl svg { width: 15px; height: 15px; fill: currentColor; }

/* ---------- Subnavegación fija ---------- */
.subnav {
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(6px);
}
.subnav__in { display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; }
.subnav__in::-webkit-scrollbar { display: none; }
.subnav a {
  padding: 13px 0; font-size: 14px; font-weight: 600; color: var(--gray);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.subnav a:hover { color: var(--ink); border-bottom-color: var(--yellow); }
/* a partir de 980px main.css deja el header en position:relative → el ancla vuelve a 0 */
@media (max-width: 980px) { .subnav { top: 0; } }

/* ---------- Cabecera de página interior ---------- */
/* 🔴 .pagehero__in y .hero__in comparten elemento con .wrap (main.css).
   Su atajo `padding: 64px 0` tiene la misma especificidad que .wrap y aparece
   después en la cascada → anula el padding lateral de 24px y el texto pega
   contra el borde en móvil. Se restituye aquí, con especificidad .wrap.X. */
.wrap.hero__in, .wrap.pagehero__in { padding-left: 24px; padding-right: 24px; }

.pagehero { background: var(--mist); border-bottom: 1px solid var(--line); }
.pagehero__in {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px;
  align-items: center; padding-top: 64px; padding-bottom: 60px;
}
.pagehero__in--text { grid-template-columns: 1fr; }
.pagehero h1 {
  font-size: clamp(28px, 4vw, 44px); letter-spacing: -.02em;
  margin-bottom: 16px; max-width: 24ch;
}
.pagehero .lede { font-size: 17.5px; color: #374151; max-width: 62ch; margin-bottom: 0; }
.pagehero__media img { width: 100%; border-radius: var(--r); aspect-ratio: 4/3; object-fit: cover; }

/* ---------- Datos verificables (bloque «trust» del inicio) ----------
   main.css tiene .facts a 3 columnas; aquí van 4 cifras y una fila de
   certificados. Sin esta clase la cuarta cifra cae a una segunda fila y
   deja dos celdas grises vacías. */
.facts--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .facts--4 { grid-template-columns: repeat(2, 1fr); } }

/* 4 cifras → 2×2 (evita la cuarta celda huérfana de la rejilla de 3) */
.facts--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .facts--2 { grid-template-columns: 1fr; } }

.certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.certs figure {
  margin: 0; padding: 16px 12px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); text-align: center;
}
.certs img {
  height: 120px; width: auto; max-width: 100%; object-fit: contain;
  margin: 0 auto 12px; display: block;
}
.certs b { display: block; font-size: 13.5px; line-height: 1.35; }
.certs span { display: block; font-size: 12px; color: var(--gray); margin-top: 4px; }
@media (max-width: 980px) { .certs { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Pasos numerados (proceso de pedido, importación) ---------- */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.steps li {
  display: grid; grid-template-columns: 64px 1fr; gap: 20px;
  padding: 24px 0; border-top: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps b {
  font-size: 15px; font-weight: 700; color: var(--ink);
  background: var(--yellow); border-radius: 3px; height: 30px;
  display: grid; place-items: center; letter-spacing: .02em;
}
.steps h3 { font-size: 17.5px; margin-bottom: 5px; }
.steps p { margin: 0; font-size: 15px; color: var(--gray); line-height: 1.6; }

/* ---------- Calculadora de contenedor ---------- */
.calc {
  display: grid; grid-template-columns: 340px 1fr; gap: 40px;
  margin-top: 32px; align-items: start;
}
.calc__form { display: flex; flex-direction: column; gap: 16px; }
.calc__form .field select { font-size: 15px; }
.calc__out {
  background: var(--mist); border: 1px solid var(--line);
  border-radius: var(--r); padding: 30px 32px;
}
.calc__big { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.calc__big b {
  font-size: clamp(42px, 6vw, 62px); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.calc__big span { font-size: 15px; color: var(--gray); font-weight: 600; }
.calc__list {
  list-style: none; padding: 0; margin: 0 0 18px;
  border-top: 1px solid var(--line);
}
.calc__list li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 14.5px; color: var(--gray);
}
.calc__list b { color: var(--ink); font-variant-numeric: tabular-nums; }
.calc__note { font-size: 13px; color: var(--gray); margin: 0 0 20px; line-height: 1.55; }

/* ---------- Formulario con columna lateral ---------- */
.formwrap { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.form__aside {
  background: var(--mist); border-left: 3px solid var(--yellow);
  padding: 22px 24px; font-size: 14.5px; color: #374151; line-height: 1.6;
}
.form__aside h3 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }
.form__aside ul { padding-left: 18px; margin: 10px 0 0; }
.form__aside li { margin-bottom: 7px; }

/* ---------- Confirmación del formulario ----------
   Sin esto, el aviso de «enviado» se veía igual que la nota gris de ayuda
   justo encima: el comprador no distingue si su solicitud entró y vuelve a
   enviarla, y quedan dos solicitudes duplicadas por el mismo pedido. El
   color de éxito no puede ser verde (la paleta no lo tiene), así que se usa
   el negro de la marca con la barra amarilla: se lee como confirmación y no
   rompe la identidad. El error sí va en amarillo lleno, para que salte. */
.form__msg { margin: 4px 0 6px; border-radius: 2px; }
.form__msg[data-state] { padding: 13px 16px; font-size: 14.5px; line-height: 1.55; }
.form__msg[data-state="ok"] {
  background: var(--ink); color: #fff;
  border-left: 4px solid var(--yellow); font-weight: 500;
}
.form__msg[data-state="ok"]::before {
  content: "✓"; color: var(--yellow); font-weight: 700; margin-right: 9px;
}
.form__msg[data-state="error"] {
  background: var(--yellow); color: var(--ink);
  border-left: 4px solid var(--ink); font-weight: 500;
}
.form__msg[data-state="error"]::before {
  content: "!"; display: inline-block; width: 15px; text-align: center;
  margin-right: 9px; font-weight: 700;
}
.form__msg[data-state="loading"] {
  background: var(--mist); color: var(--gray); border-left: 4px solid var(--line);
}

/* ---------- Tabla de medidas: lectura más fácil en móvil ---------- */
@media (max-width: 640px) {
  table.spec { font-size: 13.5px; min-width: 560px; }
  .pagehero__in { grid-template-columns: 1fr; gap: 30px; padding: 44px 0 40px; }
  .calc { grid-template-columns: 1fr; gap: 26px; }
  .formwrap { grid-template-columns: 1fr; gap: 30px; }
  .steps li { grid-template-columns: 44px 1fr; gap: 14px; }
}

@media (max-width: 980px) {
  .calc { grid-template-columns: 1fr; gap: 28px; }
  .formwrap { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Ajuste tipográfico del hero ----------
   El H1 en español es más largo que en inglés (misma frase, más sílabas).
   Con el clamp original (hasta 54px) rompía en cuatro líneas y empujaba el
   hero por debajo del pliegue. Se baja el techo y se ensancha la medida. */
.hero h1 { font-size: clamp(29px, 3.9vw, 44px); max-width: 24ch; line-height: 1.12; }
.hero__sub { font-size: 16.5px; max-width: 52ch; }
.hero__in { padding-top: 72px; padding-bottom: 64px; }
@media (max-width: 980px) { .hero__in { padding-top: 48px; padding-bottom: 40px; } }

/* ---------- Ajustes de móvil (≤640px) ----------
   Medido con headless: a 390 px el ancho disponible es 342 px y la fila del
   header sumaba 402 px (logo 129 + gap 32 + burger 40 + gap 32 + CTA 169).
   Es decir, 12 px de desbordamiento horizontal real, que además cortaba el
   botón «Pedir presupuesto» contra el borde. Se oculta el CTA del header:
   la barra inferior ya lleva «Presupuesto», así que no se pierde ninguna
   acción y el burger se queda solo a la derecha. */
@media (max-width: 640px) {
  .hdr__cta { display: none; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
  .hero__stats div { padding: 16px 18px; }
  .hero__stats b { font-size: 22px; }
  .facts--4 { grid-template-columns: repeat(2, 1fr); }
  .certs { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .certs img { height: 88px; }
  .num-i { padding: 20px 18px; }
  .dlband__in { gap: 20px; }
}

/* ---------- Cuerpo de artículo (/guia/) ----------
   Las guías son el único contenido largo del sitio. Se leen en una columna de
   ~72 caracteres, que es donde el ojo no pierde el renglón; el ancho completo
   de 1200 px se reserva para tablas, que sí necesitan holgura. */
.prose { max-width: 72ch; margin: 0 auto; }
.prose > h2 { font-size: clamp(21px, 2.4vw, 27px); line-height: 1.25; margin: 44px 0 14px; }
.prose > h2:first-child { margin-top: 0; }
.prose > p { font-size: 17px; line-height: 1.72; color: var(--ink-2); margin: 0 0 18px; }
.prose .lede { font-size: 18.5px; line-height: 1.62; color: var(--ink); margin: 0 0 24px; }
.prose > ul, .prose > ol { margin: 0 0 20px; padding-left: 22px; }
.prose > li { font-size: 17px; line-height: 1.7; color: var(--ink-2); margin-bottom: 9px; }
.prose > ul > li::marker { color: var(--gray-l); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow);
           text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { background: var(--yellow); text-decoration-color: transparent; }
.prose blockquote { margin: 0 0 22px; padding: 4px 0 4px 20px; border-left: 3px solid var(--yellow);
                    font-size: 17.5px; line-height: 1.65; color: var(--ink-2); }
.prose .note { font-size: 14.5px; line-height: 1.6; color: var(--gray); margin: 8px 0 22px; }
.prose__stamp { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
                font-size: 13.5px; color: var(--gray-l); }

/* Las tablas del artículo pueden salirse de la columna de lectura: se centran
   sobre el wrap completo para no obligar a scroll horizontal en escritorio. */
.prose .table-wrap { width: calc(100% + var(--prose-bleed, 0px)); }
.prose table.spec { font-size: 14.5px; }
.prose table.spec caption { caption-side: top; text-align: left; font-size: 13.5px;
                            color: var(--gray); padding-bottom: 8px; }

@media (max-width: 640px) {
  .prose > p, .prose > li { font-size: 16.5px; }
  .prose > h2 { margin-top: 34px; }
}
.prose > h3 { font-size: 18px; line-height: 1.35; margin: 28px 0 10px; color: var(--ink); }

/* ── clips de proceso en la galería de planta ───────────────────────────
   El póster va en 4:3 recortado para que la rejilla de tres columnas no se
   rompa al mezclar vídeo (16:9) con foto (4:3). El botón cubre exactamente
   el área del vídeo: si cubriera también el pie, el clic en el texto no
   haría nada y el comprador lo leería como un fallo. */
.fgal img, .fgal__v { aspect-ratio: 4 / 3; object-fit: cover; }
.fgal--video { position: relative; }
.fgal__v {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: #0b0f16; border: 1px solid var(--line); border-radius: var(--r);
}
.fgal__play {
  position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(11, 15, 22, .28);
  border: 1px solid var(--line); border-radius: var(--r);
  color: #fff; font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.fgal__play:hover { background: rgba(11, 15, 22, .46); }
.fgal__playbtn {
  width: 0; height: 0; border-style: solid;
  border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #FACC15;
}
.fgal__playtxt {
  background: rgba(11, 15, 22, .72); padding: 6px 12px; border-radius: 999px;
  letter-spacing: .01em;
}
.fgal--video.is-playing .fgal__play { display: none; }