@import url("fonts/fonts.css");

/* ==========================================================================
   CasasMetal — sistema de diseño aplicado
   Fuente de verdad de tokens: sistema de diseño entregado por el cliente.
   Sustituciones declaradas: Agency FB -> Oswald (display), Gill Sans MT
   Regular -> Cabin (cuerpo). Ambas auto-alojadas.
   ========================================================================== */

:root {
  /* Azul de marca y su escala */
  --cm-blue-50: #EEF3FA;
  --cm-blue-100: #DCE6F2;
  --cm-blue-300: #7FA0CE;
  --cm-blue-500: #1E54AE;
  --cm-blue: #003483;
  --cm-blue-600: #0A4296;
  --cm-blue-800: #002A6B;
  --cm-blue-900: #002154;

  /* Neutros de acero */
  --ink: #1A1C20;
  --graphite: #2A2D33;
  --graphite-2: #3A3E45;
  --pizarra: #656865;
  --steel: #888A8A;
  --roca: #9A9C99;
  --ceniza: #A8AAA8;
  --galv: #B8BCC2;
  --natural: #C7C7BF;

  /* Superficies */
  --paper: #F7F7F4;
  --mist: #F1F1EF;
  --line: #E2E2DF;
  --line-2: #D2D2CE;
  --white: #FFFFFF;

  /* Madera (acento, uso moderado) */
  --timber-100: #EFE2D2;
  --timber: #B07A45;
  --timber-700: #7C4F24;

  /* Semánticos */
  --ok: #2F7055;
  --warn: #CA8A28;
  --error: #B23833;

  /* Tipografía */
  --fg: var(--ink);
  --fg-muted: var(--pizarra);
  --fg-soft: var(--steel);
  --display: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
  --body: "Cabin", "Gill Sans MT", "Segoe UI", system-ui, sans-serif;

  /* Espaciado — retícula base 4 px */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* Radios justos y geométricos */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* Sombras sutiles y técnicas */
  --shadow-sm: 0 1px 2px rgba(26, 28, 32, .06), 0 1px 1px rgba(26, 28, 32, .04);
  --shadow: 0 2px 8px rgba(26, 28, 32, .07), 0 1px 2px rgba(26, 28, 32, .05);
  --shadow-md: 0 8px 24px rgba(26, 28, 32, .09), 0 2px 6px rgba(26, 28, 32, .05);
  --shadow-lg: 0 18px 48px rgba(26, 28, 32, .14), 0 4px 12px rgba(26, 28, 32, .06);

  /* Movimiento sobrio y mecánico */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --t-fast: 160ms;
  --t: 200ms;
  --t-slow: 220ms;

  --header-h: 68px;
  --max: 1200px;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--fg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; height: auto; }
a { color: var(--cm-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cm-blue-600); }
button { font: inherit; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15em; }
li { margin-bottom: var(--sp-1); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-8) 0; }
strong { font-weight: 700; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { padding: 0; }

:focus-visible {
  outline: 3px solid var(--cm-blue-300);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cm-blue); color: #fff; padding: var(--sp-3) var(--sp-4);
  font-weight: 600; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; color: #fff; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- tipografía -- */
.cm-display, .cm-h1, .cm-h2, .cm-h3, .eyebrow {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.04;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
.cm-display { font-size: clamp(38px, 7.4vw, 74px); font-weight: 700; letter-spacing: .002em; }
.cm-h1 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 700; }
.cm-h2 { font-size: clamp(24px, 3vw, 33px); }
.cm-h3 {
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2;
}
.cm-h4 { font-family: var(--body); font-weight: 700; font-size: 18px; margin: 0 0 var(--sp-2); }

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--cm-blue);
  margin: 0 0 var(--sp-3);
}
.eyebrow--light { color: var(--cm-blue-300); }
.eyebrow--muted { color: var(--fg-muted); }

.lead {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0 0 var(--sp-6);
  max-width: 62ch;
  text-wrap: pretty;
}
.prose p { margin: 0 0 var(--sp-4); max-width: 68ch; text-wrap: pretty; }
.prose h2 { margin-top: var(--sp-12); }
.prose h3 { font-family: var(--display); text-transform: uppercase; font-size: 22px; margin: var(--sp-8) 0 var(--sp-3); }
.answer {
  font-size: 19px; line-height: 1.55; color: var(--fg);
  border-left: 3px solid var(--cm-blue);
  padding-left: var(--sp-4);
  margin: 0 0 var(--sp-6);
  max-width: 68ch;
  text-wrap: pretty;
}
.small { font-size: 15px; color: var(--fg-muted); }
.tnum { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ layout --- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--sp-6); }
.wrap--narrow { max-width: 820px; }
.section { padding: var(--sp-16) 0; }
.section--tight { padding: var(--sp-12) 0; }
.section--paper { background: var(--paper); }
.section--mist { background: var(--mist); }
.section--white { background: var(--white); }
.section--ink { background: var(--ink); color: var(--white); }
.section--blue { background: var(--cm-blue); color: var(--white); }
.section--graphite { background: var(--graphite); color: var(--white); }
.section--ink .lead, .section--blue .lead, .section--graphite .lead { color: rgba(255, 255, 255, .78); }
.section--ink a, .section--blue a, .section--graphite a { color: var(--white); }
.section--ink .eyebrow, .section--blue .eyebrow, .section--graphite .eyebrow { color: var(--cm-blue-300); }
.section--ink h2, .section--blue h2, .section--graphite h2 { color: var(--white); }

/* Componentes que se usan sobre fondo oscuro: el bloque de respuesta, las
   fichas y las notas heredan colores claros para no desaparecer. */
.section--ink .answer, .section--blue .answer, .section--graphite .answer {
  color: #E9ECF1; border-left-color: var(--cm-blue-300);
}
.section--ink h3, .section--blue h3, .section--graphite h3 { color: var(--white); }
.section--ink .small, .section--blue .small, .section--graphite .small { color: rgba(255, 255, 255, .7); }
.section--ink .cm-display, .section--ink .cm-h1, .section--blue .cm-h1 { color: var(--white); }
.section--ink .ficha, .section--blue .ficha, .section--graphite .ficha { border-top-color: rgba(255, 255, 255, .2); }
.section--ink .ficha li, .section--blue .ficha li, .section--graphite .ficha li {
  border-bottom-color: rgba(255, 255, 255, .2);
}
.section--ink .ficha .k, .section--blue .ficha .k, .section--graphite .ficha .k { color: var(--cm-blue-300); }
.section--ink .ficha .v, .section--blue .ficha .v, .section--graphite .ficha .v { color: var(--white); }
.section--ink .bullets li, .section--blue .bullets li, .section--graphite .bullets li { color: #E9ECF1; }
.section--ink .card, .section--graphite .card { border-color: rgba(255, 255, 255, .16); }

/* Los botones conservan su propio color: la regla de enlaces claros de la
   sección oscura no debe dejarlos como texto blanco sobre fondo blanco. */
.section--ink .btn, .section--blue .btn, .section--graphite .btn { color: var(--btn-fg); }

.section-head { max-width: 760px; margin-bottom: var(--sp-8); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .lead { margin-left: auto; margin-right: auto; }

.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-12); align-items: center; }
.split--reverse .split__media { order: -1; }
.stack > * + * { margin-top: var(--sp-4); }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.row--between { justify-content: space-between; }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-0 { margin-bottom: 0; }

/* -------------------------------------------------------- marca-diamante */
.diamante { display: block; }
.diamante--bullet {
  width: 14px; height: 10px; flex: 0 0 auto; margin-top: 6px;
}
.logo { display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; }
/* lockup: isotipo sobre el logotipo, sin que los trazos de la palabra
   invadan el rombo (line-height menor a 1 los desborda hacia arriba) */
.logo__word {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.02;
  white-space: nowrap;
}
.logo__word { display: flex; }
/* Entrelazado del logotipo: la M de METAL se monta sobre la S de CASAS,
   igual que en el arte original de la marca. */
.logo__m { margin-left: -.17em; }
.diamante--footer { width: 46px; height: 25px; margin-bottom: var(--sp-2); }
.diamante--bullet { color: var(--steel); }
.ficha-bloque { margin-top: var(--sp-6); }
.ficha-bloque .eyebrow { margin-bottom: var(--sp-2); }
.galeria figcaption { max-width: 60ch; }
.logo--header .logo__word { font-size: 21px; }
.logo--header .diamante { width: 38px; height: 20px; }

/* -------------------------------------------------------------- header -- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 247, 244, .88);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex; align-items: center; gap: var(--sp-6);
  min-height: var(--header-h);
}
.header__brand { flex: 0 0 auto; color: var(--ink); }
.header__nav { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.header__nav a {
  font-family: var(--display); text-transform: uppercase; font-size: 15px;
  font-weight: 500; letter-spacing: .06em; color: var(--graphite);
  text-decoration: none; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm); transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.header__nav a:hover { color: var(--cm-blue); background: var(--cm-blue-50); }
.header__nav a[aria-current="page"] { color: var(--cm-blue); }
.header__actions { display: flex; align-items: center; gap: var(--sp-2); }
.header__toggle {
  display: none; background: none; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); width: 42px; height: 42px;
  align-items: center; justify-content: center; cursor: pointer; color: var(--ink);
}
.header__toggle svg { width: 20px; height: 20px; }

.drawer {
  display: none; border-top: 1px solid var(--line); background: var(--white);
}
.drawer[data-open="true"] { display: block; }
.drawer ul { list-style: none; margin: 0; padding: var(--sp-3) var(--sp-6) var(--sp-6); }
.drawer li { margin: 0; border-bottom: 1px solid var(--line); }
.drawer a {
  display: block; padding: var(--sp-4) 0; text-decoration: none;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .06em;
  color: var(--graphite); font-size: 17px;
}
.drawer a:hover { color: var(--cm-blue); }
.drawer .btn { width: 100%; justify-content: center; margin-top: var(--sp-4); }

/* -------------------------------------------------------------- botones -- */
.btn {
  --btn-bg: var(--cm-blue); --btn-fg: #fff; --btn-bd: var(--cm-blue);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd);
  font-family: var(--display); text-transform: uppercase; font-weight: 600;
  letter-spacing: .07em; font-size: 15px; line-height: 1;
  padding: 15px 22px; border-radius: var(--r-sm); cursor: pointer;
  text-decoration: none; transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
    color var(--t) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
  box-shadow: var(--shadow-sm);
}
.btn:hover { --btn-bg: var(--cm-blue-600); --btn-bd: var(--cm-blue-600); color: #fff; box-shadow: var(--shadow); }
.btn:active { transform: scale(.98); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--cm-blue); --btn-bd: var(--cm-blue); box-shadow: none; }
.btn--outline:hover { --btn-bg: var(--cm-blue-50); --btn-fg: var(--cm-blue-800); }
.btn--dark { --btn-bg: var(--ink); --btn-bd: var(--ink); --btn-fg: #fff; }
.btn--dark:hover { --btn-bg: var(--graphite-2); --btn-bd: var(--graphite-2); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: transparent; box-shadow: none; padding-left: var(--sp-2); padding-right: var(--sp-2); }
.btn--ghost:hover { --btn-fg: var(--cm-blue); --btn-bg: transparent; }
.btn--ghost svg { transition: transform var(--t) var(--ease); }
.btn--ghost:hover svg { transform: translateX(3px); }
.btn--light { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-bd: var(--white); }
.btn--light:hover { --btn-bg: var(--mist); --btn-bd: var(--mist); --btn-fg: var(--ink); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.42); box-shadow: none; }
.btn--outline-light:hover { --btn-bg: rgba(255,255,255,.12); --btn-bd: #fff; --btn-fg: #fff; }
.btn--sm { padding: 11px 16px; font-size: 13px; }
.btn--block { width: 100%; }
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* -------------------------------------------------------------- hero --- */
.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  /* El titular va sobre la foto: el velo sube el contraste en la mitad izquierda sin
     apagar la imagen a la derecha, y añade una banda superior que separa de la cabecera. */
  background:
    linear-gradient(100deg, rgba(10,12,16,.93) 0%, rgba(10,12,16,.78) 38%, rgba(10,12,16,.38) 68%, rgba(10,12,16,.24) 100%),
    linear-gradient(180deg, rgba(10,12,16,.32) 0%, rgba(10,12,16,0) 32%);
}
.hero__inner { position: relative; padding-top: var(--sp-16); padding-bottom: var(--sp-12); }
.hero__content { max-width: 680px; }
/* Titular del bloque principal: un escalón por debajo del display general para que la
   cabecera, el titular, el párrafo y los botones entren en la primera pantalla y la
   franja de datos (desde / planta propia / ruptura térmica / cupos) se vea sin bajar. */
.hero .cm-display { color: #fff; margin-bottom: var(--sp-4); font-size: clamp(32px, 4.6vw, 54px); }
.hero .lead { color: rgba(255,255,255,.82); }
.hero__strip {
  position: relative; margin-top: var(--sp-8);
  border-top: 1px solid rgba(255,255,255,.18);
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
}
.hero__strip div { padding: var(--sp-6) var(--sp-4) 0; border-right: 1px solid rgba(255,255,255,.12); }
.hero__strip div:last-child { border-right: 0; }
.hero__strip dt {
  font-family: var(--display); text-transform: uppercase; font-size: 13px;
  letter-spacing: .18em; color: var(--cm-blue-300); margin-bottom: var(--sp-2);
}
.hero__strip dd {
  margin: 0; font-family: var(--display); text-transform: uppercase;
  font-size: clamp(18px, 2vw, 24px); font-weight: 600; color: #fff;
}
.hero__strip dl { display: contents; margin: 0; }

/* ------------------------------------------------------------- tarjetas -- */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
.card--hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--line-2); }
.card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mist); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.card__body > * { margin: 0; }
.card__foot { margin-top: auto; padding-top: var(--sp-3); display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.card--dark { background: var(--graphite); border-color: var(--graphite-2); color: #fff; }
.card--dark h3, .card--dark h2 { color: #fff; }
.card--dark p { color: rgba(255,255,255,.76); }
.card--accent { border-top: 3px solid var(--cm-blue); }
.card--flat { box-shadow: none; }
.card__badge {
  position: absolute; top: var(--sp-4); left: var(--sp-4);
  background: var(--cm-blue); color: #fff; font-family: var(--display);
  text-transform: uppercase; font-size: 12px; letter-spacing: .12em;
  padding: 6px 10px; border-radius: var(--r-xs);
}
.card__badge--dark { background: rgba(15,17,20,.82); }

.ficha { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ficha li {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line);
  font-size: 15px; margin: 0;
}
.ficha dt, .ficha .k {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .12em;
  font-size: 12.5px; color: var(--fg-muted);
}
.ficha .v { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.card--dark .ficha, .card--dark .ficha li { border-color: rgba(255,255,255,.14); }
.card--dark .ficha .k { color: rgba(255,255,255,.62); }

.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag {
  font-family: var(--display); text-transform: uppercase; font-size: 12px;
  letter-spacing: .1em; padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--mist); color: var(--graphite); border: 1px solid var(--line);
}
.tag--blue { background: var(--cm-blue); color: #fff; border-color: var(--cm-blue); }
.tag--light { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); }
.tag--timber { background: var(--timber-100); color: var(--timber-700); border-color: #E3CDB8; }

.bullets { list-style: none; margin: 0; padding: 0; }
.bullets li { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-3); align-items: flex-start; }
.bullets svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 4px; color: var(--cm-blue); }
.section--ink .bullets svg, .section--blue .bullets svg, .section--graphite .bullets svg { color: var(--cm-blue-300); }

/* números de paso */
.stepnum {
  font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1;
  color: var(--cm-blue-100); letter-spacing: -.01em; margin-bottom: var(--sp-3);
  display: block;
}
.section--ink .stepnum, .section--blue .stepnum, .section--graphite .stepnum { color: rgba(255,255,255,.28); }
.pasos { display: grid; gap: var(--sp-8); grid-template-columns: repeat(4, minmax(0,1fr)); counter-reset: paso; }
.paso { border-top: 2px solid var(--ink); padding-top: var(--sp-4); }
.section--ink .paso, .section--graphite .paso { border-top-color: var(--cm-blue-500); }
.paso h3 { font-family: var(--display); text-transform: uppercase; font-size: 19px; margin-bottom: var(--sp-2); }
.paso p { font-size: 15.5px; color: var(--fg-muted); margin: 0 0 var(--sp-2); }
.section--ink .paso p, .section--graphite .paso p { color: rgba(255,255,255,.72); }

/* ------------------------------------------------------------ metrica --- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--sp-6); }
.metric { border-left: 2px solid var(--cm-blue); padding-left: var(--sp-4); }
.metric b { display: block; font-family: var(--display); font-size: clamp(28px,3vw,38px); line-height: 1; font-weight: 700; }
.metric span { display: block; font-size: 15px; color: var(--fg-muted); margin-top: var(--sp-2); }
.section--ink .metric, .section--graphite .metric { border-left-color: var(--cm-blue-300); }
.section--ink .metric span, .section--graphite .metric span { color: rgba(255,255,255,.72); }

/* -------------------------------------------------------------- tablas --- */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--sp-6) 0; }
table.tabla {
  width: 100%; border-collapse: collapse; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  font-size: 15.5px; min-width: 560px;
}
table.tabla caption {
  caption-side: top; text-align: left; font-size: 14px; color: var(--fg-muted);
  padding-bottom: var(--sp-3);
}
table.tabla th, table.tabla td {
  padding: var(--sp-4); text-align: left; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.tabla thead th {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .12em;
  font-size: 12.5px; color: var(--graphite); background: var(--mist);
  border-bottom: 1px solid var(--line-2);
}
table.tabla tbody tr:last-child th, table.tabla tbody tr:last-child td { border-bottom: 0; }
table.tabla tbody th { font-weight: 600; color: var(--ink); width: 26%; }
table.tabla td.is-strong { background: var(--cm-blue-50); }

/* ---------------------------------------------------------------- faq ---- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: var(--sp-5, 20px) 0; font-family: var(--display);
  text-transform: uppercase; font-size: 17px; letter-spacing: .05em; font-weight: 500;
  display: flex; justify-content: space-between; gap: var(--sp-4); align-items: center;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 12px; height: 12px; flex: 0 0 auto;
  border-right: 2px solid var(--cm-blue); border-bottom: 2px solid var(--cm-blue);
  transform: rotate(45deg); transition: transform var(--t) var(--ease);
  margin-right: var(--sp-2);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--cm-blue); }
.faq .faq__a { padding: 0 var(--sp-8) var(--sp-6) 0; color: var(--fg-muted); max-width: 74ch; }
.section--ink .faq, .section--ink .faq details, .section--graphite .faq, .section--graphite .faq details { border-color: rgba(255,255,255,.16); }
.section--ink .faq .faq__a, .section--graphite .faq .faq__a { color: rgba(255,255,255,.75); }
.section--ink .faq summary, .section--graphite .faq summary { color: #fff; }
.section--ink .faq summary::after, .section--graphite .faq summary::after { border-color: var(--cm-blue-300); }

/* -------------------------------------------------------------- forms --- */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.campo label {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .12em;
  font-size: 12.5px; color: var(--graphite); font-weight: 500;
}
.campo .hint { font-size: 13.5px; color: var(--fg-muted); }

/* Filas de recintos de la calculadora de m² */
.recintos { border-top: 1px solid var(--line); margin-bottom: var(--sp-4); }
.recinto {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line);
}
.recinto__n { flex: 1 1 auto; font-size: 15px; }
.recinto__ctrl { display: inline-flex; align-items: center; gap: var(--sp-2); }
.recinto__b {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); background: var(--white); color: var(--ink);
  border-radius: var(--r-sm); font-size: 18px; line-height: 1; cursor: pointer;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.recinto__b:hover { border-color: var(--cm-blue); color: var(--cm-blue); }
.recinto__c { min-width: 22px; text-align: center; font-weight: 600; }
.recinto__m2 { flex: 0 0 auto; min-width: 66px; text-align: right; font-size: 14px; color: var(--fg-muted); }
.recinto--fijo .recinto__m2 { color: var(--fg); font-weight: 600; }

/* Logotipo oficial */
.logo-img { display: block; height: 40px; width: auto; }
.logo-img--footer { height: 56px; margin-bottom: var(--sp-4); }
@media (max-width: 700px) { .logo-img { height: 34px; } .logo-img--footer { height: 48px; } }

/* Resultado del cotizador de flete */
.calc__out {
  margin: var(--sp-4) 0 var(--sp-3);
  padding: var(--sp-4) var(--sp-4) 0;
  background: var(--mist);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--cm-blue);
  border-radius: var(--r-sm);
}
.calc__out .ficha { border-top: 0; }
.calc__out .ficha li:last-child { border-bottom: 0; padding-bottom: var(--sp-4); }
.campo .req { color: var(--error); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], select, textarea {
  width: 100%; padding: 13px var(--sp-4); font-family: var(--body); font-size: 16px;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--galv); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--cm-blue); box-shadow: 0 0 0 3px var(--cm-blue-100);
}
textarea { min-height: 120px; resize: vertical; }
.check { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-4); }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--cm-blue); flex: 0 0 auto; }
.check label { font-size: 15px; color: var(--fg-muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 var(--sp-4); }
.form-grid .campo--full { grid-column: 1 / -1; }

.nota {
  background: var(--cm-blue-50); border: 1px solid var(--cm-blue-100);
  border-left: 3px solid var(--cm-blue); border-radius: var(--r-sm);
  padding: var(--sp-4) var(--sp-6); font-size: 15.5px; color: var(--cm-blue-900);
}
.nota--warn { background: #FDF6E7; border-color: #F0DFB8; border-left-color: var(--warn); color: #6B4E12; }

/* ---------------------------------------------------------- breadcrumb --- */
.migas { padding: var(--sp-4) 0 0; font-size: 14px; color: var(--fg-muted); }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; }
.migas li { margin: 0; }
.migas li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--line-2); }

/* -------------------------------------------------------------- tienda --- */
.prod { display: flex; flex-direction: column; }
.precio {
  font-family: var(--display); font-weight: 700; letter-spacing: .01em;
  font-size: 30px; line-height: 1.05; color: var(--ink);
}
.precio small { display: block; font-family: var(--body); font-size: 15px; font-weight: 400; color: var(--fg-muted); letter-spacing: 0; }
.precio--cotiza { font-size: 22px; color: var(--cm-blue); }
.precio--light { color: #fff; }
.precio--light small { color: rgba(255,255,255,.72); }

.opcion {
  display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); margin-bottom: var(--sp-3);
  cursor: pointer; transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.opcion:hover { border-color: var(--galv); background: var(--mist); }
.opcion input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--cm-blue); flex: 0 0 auto; }
.opcion__body { flex: 1; }
.opcion__t { font-weight: 700; display: block; }
.opcion__d { font-size: 14.5px; color: var(--fg-muted); }
.opcion__p { font-family: var(--display); font-weight: 600; white-space: nowrap; }
.opcion:has(input:checked) { border-color: var(--cm-blue); background: var(--cm-blue-50); box-shadow: 0 0 0 1px var(--cm-blue); }

.lineas { list-style: none; margin: 0; padding: 0; }
.linea {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); align-items: start;
}
.linea__t { font-weight: 700; }
.linea__d { font-size: 14.5px; color: var(--fg-muted); }
.linea__p { font-family: var(--display); font-weight: 600; text-align: right; white-space: nowrap; }
.linea__q { grid-column: 2; display: flex; gap: var(--sp-2); align-items: center; justify-content: flex-end; }
.linea__x {
  background: none; border: 0; color: var(--fg-muted); cursor: pointer;
  font-size: 13px; text-decoration: underline; padding: 4px;
}
.linea__x:hover { color: var(--error); }
.totales { margin-top: var(--sp-4); }
.totales .fila { display: flex; justify-content: space-between; padding: var(--sp-2) 0; font-size: 16px; }
.totales .fila--total {
  border-top: 2px solid var(--ink); margin-top: var(--sp-3); padding-top: var(--sp-4);
  font-family: var(--display); font-weight: 700; font-size: 24px; text-transform: uppercase;
}
.totales .fila--cotiza span:last-child { color: var(--cm-blue); font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; }
.panel {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-6); box-shadow: var(--shadow-sm);
}
.panel--sticky { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
.carrito-badge {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--display);
  text-transform: uppercase; font-size: 13px; letter-spacing: .08em;
}
.carrito-badge b {
  background: var(--cm-blue); color: #fff; border-radius: var(--r-pill);
  min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; padding: 0 6px;
}
.carrito-badge[data-vacio="true"] { opacity: .55; }
.vacio { text-align: center; padding: var(--sp-12) var(--sp-4); color: var(--fg-muted); }

/* ----------------------------------------------------------- galeria ---- */
.galeria { display: grid; gap: var(--sp-4); grid-template-columns: repeat(12, 1fr); }
.galeria figure { margin: 0; overflow: hidden; border-radius: var(--r-md); background: var(--mist); }
.galeria img { width: 100%; height: 100%; object-fit: cover; }
.galeria figcaption {
  font-size: 14px; color: var(--fg-muted); padding: var(--sp-3) 0 0;
}
.g-item { grid-column: span 4; }
.g-item--wide { grid-column: span 8; }
.g-item--full { grid-column: span 12; }
.g-item--half { grid-column: span 6; }

/* ------------------------------------------------------------- footer --- */
.footer { background: var(--ink); color: rgba(255,255,255,.72); padding: var(--sp-16) 0 var(--sp-8); }
.footer a { color: rgba(255,255,255,.86); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-8); }
.footer h2, .footer h3 {
  font-family: var(--display); text-transform: uppercase; color: #fff;
  font-size: 14px; letter-spacing: .16em; margin: 0 0 var(--sp-4);
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--sp-2); font-size: 15.5px; }
.footer__brand .logo { align-items: flex-start; margin-bottom: var(--sp-4); }
.footer__brand p { max-width: 40ch; font-size: 15.5px; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--sp-12);
  padding-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: space-between; font-size: 14px;
}
.footer__social { display: flex; gap: var(--sp-4); }
.footer__social a { display: inline-flex; align-items: center; gap: 6px; }
.footer__social svg { width: 18px; height: 18px; }
.cta-flotante {
  position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: 90;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--cm-blue); color: #fff; text-decoration: none;
  padding: 12px 18px; border-radius: var(--r-pill); box-shadow: var(--shadow-lg);
  font-family: var(--display); text-transform: uppercase; font-size: 13.5px; letter-spacing: .07em;
  transition: background var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.cta-flotante:hover { background: var(--cm-blue-600); color: #fff; transform: translateY(-1px); }
.cta-flotante svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- aviso -- */
.aviso-pendiente {
  background: #FDF6E7; border: 1px dashed var(--warn); border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4); font-size: 14px; color: #6B4E12; margin: var(--sp-4) 0;
}

/* --------------------------------------------------------------- 404 ---- */
.nf { text-align: center; padding-top: var(--sp-24); padding-bottom: var(--sp-24); }
.nf .cm-display { font-size: clamp(64px, 16vw, 160px); color: var(--cm-blue-100); margin-bottom: var(--sp-4); }

/* -------------------------------------------------------------- avisos -- */
.aviso {
  border-radius: var(--r-sm); padding: var(--sp-4) var(--sp-6); margin-bottom: var(--sp-6);
  border: 1px solid var(--line-2); background: var(--white); font-size: 15.5px;
}
.aviso--ok { border-color: #BBD9CB; background: #F1F8F4; color: #1F5A42; }
.aviso--error { border-color: #E7C0BE; background: #FCF1F0; color: #8A2B27; }

/* --------------------------------------------------------- responsive --- */
@media (max-width: 1080px) {
  .header__nav { display: none; }
  .header__toggle { display: inline-flex; }
  .header__actions .btn--cotiza { display: none; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pasos { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hero__strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero__strip div { padding-top: var(--sp-4); }
}

/* Con diez secciones el menú ya no cabe junto a la marca en portátiles: entre
   1081 y 1479 px pasa a una segunda fila dentro de la cabecera, y desde 1480 px
   vuelve a una sola fila. */
@media (min-width: 1081px) and (max-width: 1479px) {
  .header__inner { flex-wrap: wrap; row-gap: var(--sp-2); padding-top: var(--sp-2); }
  .header__nav {
    order: 3; flex: 1 0 100%;
    /* la primera etiqueta se alinea con el logotipo (el enlace lleva 12 px
       de relleno lateral) */
    margin-left: calc(var(--sp-3) * -1);
    flex-wrap: wrap; gap: var(--sp-1) var(--sp-2);
  }
  /* diez etiquetas: se comprime la tipografía para que quepan en una sola línea */
  .header__nav a { font-size: 13.5px; letter-spacing: .045em; padding: var(--sp-1) var(--sp-2); }
  .header__actions { margin-left: auto; }
}
@media (min-width: 1480px) {
  .header__nav { gap: var(--sp-1); }
  .header__nav a { font-size: 14px; letter-spacing: .05em; padding: var(--sp-2) var(--sp-2); white-space: nowrap; }
}

@media (max-width: 860px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 var(--sp-4); }
  .section { padding: var(--sp-12) 0; }
  .split { grid-template-columns: 1fr; gap: var(--sp-8); }
  .split--reverse .split__media { order: 0; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: repeat(6, 1fr); }
  .g-item, .g-item--wide, .g-item--half { grid-column: span 6; }
  .g-item--full { grid-column: span 6; }
  .form-grid { grid-template-columns: 1fr; }
  .panel--sticky { position: static; }
  .cta-flotante { right: var(--sp-4); bottom: var(--sp-4); padding: 12px 16px; font-size: 13px; }
}
@media (max-width: 560px) {
  .grid--4 { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__strip { grid-template-columns: 1fr; }
  .hero__strip div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: var(--sp-4); }
  .hero__inner { padding-top: var(--sp-16); padding-bottom: var(--sp-12); }
  .btn { width: 100%; }
  .row .btn { width: auto; }
  .cta-flotante span { display: none; }
}

@media print {
  .header, .cta-flotante, .footer, .btn { display: none !important; }
  body { background: #fff; }
}

/* Campo trampa: invisible para las personas, visible para los robots. */
.campo--trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* --------------------------------------- ajustes de interfaz (2026-10) ----
   Revisión de la interfaz sobre las pantallas ya publicadas. Tres correcciones:

   1) La sección actual del menú se ve marcada: antes solo cambiaba el color del texto
      y con diez secciones era difícil ubicarse. Ahora lleva el mismo fondo suave que
      el estado de paso del ratón, así el enlace activo se lee como "estás aquí".
   2) El botón de WhatsApp es fijo. Se reserva un margen inferior en las páginas que lo
      llevan (y solo en ellas) para que, al llegar al final del texto, no tape el último
      bloque de contenido.
   3) La columna lateral de las fichas y del formulario gana aire abajo, lejos del botón. */

.header__nav a[aria-current="page"] {
  color: var(--cm-blue);
  background: var(--cm-blue-50);
}

body:has(.cta-flotante) main { padding-bottom: 96px; }

@media (max-width: 860px) {
  body:has(.cta-flotante) main { padding-bottom: 88px; }
}

@media (min-width: 1081px) {
  .split > :last-child,
  aside { padding-bottom: var(--sp-6); }
}
/* ---------------------- mejoras de interfaz · segunda pasada (2026-10) ----
   Cinco cambios, todos verificables:

   1) Contraste WCAG 2.1 AA sobre la fotografía del bloque principal. La franja de datos
      quedaba con 1.8:1 en las zonas claras de la foto: ahora se apoya en una banda inferior
      oscura, así el contraste no depende de lo clara que salga la imagen (etiquetas azules
      a 6.3:1 y valores blancos por encima de 8:1 en el peor caso).
   2) El rombo de las listas pasa de gris acero (3.2:1) a pizarra (5.3:1).
   3) El botón del menú móvil alcanza 44 × 44 px de área táctil.
   4) El botón flotante de WhatsApp se retira cuando el pie entra en pantalla: allí ya está
      el enlace de contacto, y así no tapa el final de la lectura.
   5) Estado vacío de la solicitud más corto y con tres salidas por superficie, en lugar del
      bloque centrado que dejaba un hueco de media pantalla. */

.hero__media::after {
  background:
    linear-gradient(100deg, rgba(10,12,16,.93) 0%, rgba(10,12,16,.78) 38%,
      rgba(10,12,16,.38) 68%, rgba(10,12,16,.24) 100%),
    linear-gradient(0deg, rgba(10,12,16,.90) 0%, rgba(10,12,16,.55) 15%,
      rgba(10,12,16,0) 34%),
    linear-gradient(180deg, rgba(10,12,16,.32) 0%, rgba(10,12,16,0) 32%);
}

.diamante--bullet { color: var(--pizarra); }

.header__toggle { width: 44px; height: 44px; }

.cta-flotante {
  transition: background var(--t) var(--ease), transform var(--t) var(--ease),
    opacity var(--t) var(--ease), visibility var(--t) var(--ease);
}
.cta-flotante--oculto {
  opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none;
}

.vacio--compacto { text-align: left; padding: var(--sp-6) var(--sp-4); }
.vacio--compacto .vacio__t {
  font-family: var(--display); text-transform: uppercase; font-size: 18px;
  letter-spacing: .04em; color: var(--ink); margin: 0 0 var(--sp-2);
}
.vacio--compacto .small { max-width: 52ch; }
.vacio--compacto .row { margin-top: var(--sp-4); }
.row--center { flex-wrap: wrap; }
/* ------------------------------- bordes y relleno de tarjetas (2026-10) ----
   `.card` no lleva relleno propio: lo aporta `.card__body`. Las tarjetas que se escribieron
   sin ese contenedor —la tarjeta oscura de "Dos caminos", la de "Planos y armado" y las de
   pasos— dejaban el texto y el botón pegados al borde, y el pie del texto quedaba cortado.
   Se les da el mismo relleno de 24 px del sistema; las que sí traen cuerpo (o una imagen de
   cabecera) quedan intactas. En la columna de una composición de dos, la tarjeta se ajusta a
   su contenido en vez de estirarse a la altura de la columna de texto y recortarse. */

.card:not(:has(> .card__body)):not(:has(> .card__media)) { padding: var(--sp-6); }
.card--dark:not(:has(> .card__body)) > :last-child { margin-bottom: 0; }
.split__media > .card { height: auto; }

/* El signo de porcentaje no se separa del número al final de una línea. */
.num-pct { white-space: nowrap; }
/* ---- Apoyo institucional (CORFO) ---- */
.footer__apoyo { margin-top: var(--sp-6); }
.footer__apoyo-titulo {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  color: rgba(255, 255, 255, .62);
  margin: 0 0 var(--sp-2);
}
.footer__apoyo-logo {
  display: block;
  width: 140px;
  height: auto;
  background: #fff;
  padding: 10px 14px;
  border-radius: var(--r-md);
}
@media (max-width: 760px) {
  .footer__apoyo-logo { width: 128px; }
}