/* ============================================================
   Regla de 12 m, cifras, listas numeradas y bloques de respaldo
   ============================================================ */

/* ------------------------------------------------------------
   Escala de 12 m — instrumento, no regla escolar.
   Un eje fino de extremo a extremo, cotas cada 25 cm, metros marcados
   y el 12 M colgando del final unido por una línea de referencia.
   Mucho aire arriba: la cifra necesita espacio para leerse como remate.
   ------------------------------------------------------------ */
.s12{ margin:clamp(var(--sp-16),7vw,var(--sp-24)) 0 0; }
.s12-axis{
  position:relative;
  height:clamp(180px,20vw,280px);
  padding-right:clamp(0px,3vw,var(--sp-10));   /* aire a la derecha del remate */
}

/* Eje y su relleno animado al entrar en pantalla */
.s12-line{
  position:absolute; left:0; right:clamp(0px,3vw,40px); bottom:46px; height:1px;
  background:rgba(255,255,255,.18);
}
.s12-line .scale-fill{
  position:absolute; inset:0; background:var(--yellow);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.8s cubic-bezier(.16,.84,.24,1);
}
.s12-line .scale-fill.in-view{ transform:scaleX(1); }

/* Cotas: 25 cm finas, metro más alta, extremos marcados */
.s12-marks{ position:absolute; left:0; right:clamp(0px,3vw,40px); bottom:46px; height:0; }
.s12-mark{
  position:absolute; bottom:0; width:1px; height:7px;
  background:rgba(255,255,255,.20); transform:translateX(-.5px);
}
.s12-mark.is-metro{ height:18px; background:rgba(255,255,255,.38); }
.s12-mark.is-origen{ height:30px; background:rgba(255,255,255,.55); }
.s12-mark.is-fin{ height:clamp(64px,7vw,96px); width:2px; background:var(--yellow); }

/* Numeración: mono, discreta, alineada bajo cada metro */
.s12-nums{ position:absolute; left:0; right:clamp(0px,3vw,40px); bottom:0; height:34px; }
.s12-num{
  position:absolute; bottom:0; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:500;
  letter-spacing:.14em; color:#6E7F91; font-variant-numeric:tabular-nums;
}
.s12-num.is-origen{ transform:none; color:var(--steel-light); }

/* Remate: la cifra que justifica toda la sección */
.s12-peak{
  position:absolute; right:clamp(0px,3vw,40px); bottom:calc(46px + clamp(64px,7vw,96px) - 4px);
  display:flex; align-items:flex-start; gap:clamp(var(--sp-2),.9vw,var(--sp-4));
  transform:translateX(50%);
  font-family:var(--font-display); font-weight:800; letter-spacing:-.045em; line-height:.8;
}
.s12-peak-n{ font-size:var(--fs-fig-xl); color:var(--white); }
.s12-peak-u{ font-size:var(--fs-d3); color:var(--yellow); letter-spacing:-.02em; }
.s12-leader{
  position:absolute; right:clamp(0px,3vw,40px); bottom:calc(46px + clamp(64px,7vw,96px));
  width:1px; height:clamp(16px,2vw,28px); background:linear-gradient(to top, var(--yellow), rgba(255,196,0,0));
}

.s12-caption{
  margin-top:clamp(var(--sp-8),3vw,var(--sp-12)); max-width:52ch;
  font-size:var(--fs-xs); color:#8F9CA9; line-height:1.6;
}

@media (max-width:900px){
  .s12-num:nth-child(even){ display:none; }          /* deja 0, 2, 4, 6, 8, 10 */
}
@media (max-width:600px){
  .s12-axis{ height:clamp(150px,38vw,200px); }
  .s12-peak{ transform:translateX(30%); }
  .s12-mark:not(.is-metro):not(.is-origen):not(.is-fin){ display:none; }
}

.stat-strip{ display:flex; flex-wrap:wrap; gap:0; margin-top:var(--sp-16); border-top:1px solid var(--line-on-dark); }
.stat{ flex:1 1 220px; padding:var(--sp-8) var(--sp-8) 0 0; }
.stat + .stat{ border-left:1px solid var(--line-on-dark); padding-left:var(--sp-8); }
.stat-value{ font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; font-size:var(--fs-fig); color:var(--white); line-height:1.05; }
.stat-value .suffix{ color:var(--yellow); }
.stat-label{ font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:500; letter-spacing:.07em; color:var(--on-dark-700); margin-top:var(--sp-2); text-transform:uppercase; line-height:1.5; max-width:22ch; }
@media (max-width:720px){
  .stat{ flex:1 1 45%; }
  .stat:nth-child(odd){ border-left:none; padding-left:0; }
}

.numbered-list{ display:flex; flex-direction:column; }
.numbered-item{ display:grid; grid-template-columns:64px 1fr; gap:var(--sp-6); padding:var(--sp-6) 0; border-top:1px solid var(--line); }
.numbered-list .numbered-item:last-child{ border-bottom:1px solid var(--line); }
.numbered-item .n{ font-family:var(--font-mono); font-weight:600; font-size:var(--fs-lbl); color:var(--yellow-dim); padding-top:var(--sp-1); }
.numbered-item h3{ font-family:var(--font-body); font-weight:600; font-size:var(--fs-body); color:var(--navy); margin-bottom:var(--sp-2); }
.numbered-item p{ font-size:var(--fs-xs); color:var(--steel); line-height:1.6; max-width:60ch; }
/* Lista numerada simple (ventajas, aplicaciones y configuraciones de las
   fichas): números del navegador y el texto de párrafo del sitio. */
.lista-numerada{ margin-bottom:0; padding-left:1.5em; list-style:decimal; }
.lista-numerada li{ font-size:var(--fs-body); line-height:1.7; color:var(--tinta); padding-left:var(--sp-1); }
.lista-numerada li + li{ margin-top:var(--sp-2); }
.lista-numerada li::marker{ color:var(--steel); font-weight:600; }
/* La columna de 64 px para el ordinal se come un quinto del ancho en móvil. */
@media (max-width:560px){ .numbered-item{ grid-template-columns:32px 1fr; gap:var(--sp-4); } }

.trust-section{ padding:var(--band-y) 0; border-bottom:1px solid var(--line); }
.trust-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-4); margin-bottom:var(--sp-6); }
.trust-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.trust-item{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3); padding:0 var(--sp-8); border-left:1px solid var(--line); }
.trust-item:first-child{ border-left:none; padding-left:0; }
.trust-logo{ height:38px; display:flex; align-items:center; }
.trust-logo img{
  max-height:44px; max-width:150px; width:auto; height:auto;
  filter:brightness(0); opacity:.74; transition:filter .3s ease, opacity .3s ease;
}
.trust-item:hover .trust-logo img{ filter:none; opacity:1; }
.trust-figure{ font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; font-size:var(--fs-fig); line-height:.9; color:var(--navy); height:44px; display:flex; align-items:center; }
.trust-figure span{ color:var(--yellow-ochre-deep); }
.trust-copy{ display:flex; flex-direction:column; gap:var(--sp-1); min-width:0; }
.trust-name{ display:flex; align-items:center; gap:var(--sp-2); font-weight:600; font-size:var(--fs-xs); color:var(--navy); line-height:1.25; }
.trust-name .tick{ font-style:normal; color:var(--yellow-dim); font-size:var(--fs-lbl); }
.trust-desc{ font-family:var(--font-mono); font-size:var(--fs-lbl); letter-spacing:.05em; text-transform:uppercase; color:var(--steel); line-height:1.4; }
/* Sólo la cifra de clientes (portada): centrada, cifra y texto en una fila. */
.trust-bar.solo-cifra{ display:flex; justify-content:center; }
.trust-bar.solo-cifra .trust-item{ flex-direction:row; align-items:center; gap:var(--sp-4); padding:0; border:0; }
@media (max-width:1080px){
  .trust-bar{ grid-template-columns:1fr 1fr; gap:var(--sp-8) 0; }
  .trust-item:nth-child(odd){ border-left:none; padding-left:0; }
}
@media (max-width:560px){
  .trust-bar{ grid-template-columns:1fr; gap:var(--sp-6); }
  .trust-item{ border-left:none; padding:0; }
}

/* Bloque destacado: la extrusora como argumento de exclusividad.
   Va en flex y no en grid: al capturar la página para Figma, el flex se
   convierte en auto layout horizontal, que el plugin de Figma a Wix
   reconoce; la retícula de dos columnas llegaba desarmada a Wix.
   Las medidas son las mismas que daba la retícula: foto de hasta 400 px
   (mínimo 280) y el texto ocupa el resto. */
.fx{ display:flex; align-items:stretch; background:var(--navy); color:var(--white); }
.fx-media{ position:relative; overflow:hidden; flex:0 1 400px; min-width:280px; border-radius:var(--radius) 0 0 var(--radius); }
/* El radio va también en la propia foto: así las esquinas redondeadas no
   dependen del recorte del contenedor, que se pierde al exportar. */
.fx-media img{ width:100%; height:100%; min-height:100%; object-fit:cover; object-position:center; display:block; border-radius:inherit; }

.fx-body{ flex:1 1 0; min-width:0; padding:clamp(var(--sp-8),4vw,var(--sp-16)); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--sp-4); }
.fx-title{ font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; font-size:var(--fs-d4); line-height:1.06; }
.fx-body > p{ font-size:var(--fs-body); line-height:1.65; color:var(--on-dark-500); max-width:48ch; }
.fx-figures{ display:flex; flex-wrap:wrap; width:100%; margin:var(--sp-2) 0 var(--sp-1); border-top:1px solid var(--line-on-dark); }
.fx-figures > div{ padding:var(--sp-4) var(--sp-8) 0 0; }
.fx-figures > div + div{ border-left:1px solid var(--line-on-dark); padding-left:var(--sp-8); }
.fx-figures dt{ font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-700); }
.fx-figures dd{ font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; font-size:var(--fs-d5); color:var(--yellow); margin-top:var(--sp-2); }
/* Espejo del mismo bloque: media a la derecha. Dos .fx seguidos leen como
   una composición alternada y no como el mismo módulo repetido. En el HTML
   el texto va antes que la foto, así que la foto queda a la derecha sin
   reordenar. Mitades iguales, como el 1fr 1fr de antes. */
.fx.is-espejo .fx-body, .fx.is-espejo .fx-media{ flex:1 1 50%; }
.fx.is-espejo .fx-media{ border-radius:0 var(--radius) var(--radius) 0; }
/* La foto es apaisada: con su proporción se ve completa en vez de recortarse
   para llenar una columna angosta. */
.fx.is-espejo .fx-media{ aspect-ratio:1920/1211; }

/* En móvil se mantiene la retícula de una columna de siempre (la captura a
   Figma es de escritorio). La foto va arriba, también en el espejo. */
@media (max-width:820px){
  .fx, .fx.is-espejo{ display:grid; grid-template-columns:1fr; }
  .fx-media, .fx.is-espejo .fx-media{ min-width:0; border-radius:var(--radius) var(--radius) 0 0; }
  .fx-media{ aspect-ratio:1/1; }
  .fx.is-espejo .fx-media{ order:-1; aspect-ratio:1920/1211; }
}

.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(var(--sp-6),3vw,var(--sp-12)); }
.why-grid.cols-2{ grid-template-columns:1fr 1fr; margin-top:clamp(var(--sp-8),3.5vw,var(--sp-12)); }
.why-item{ display:flex; flex-direction:column; }
.why-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--blue-900); }
.why-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.why-item:hover .why-media img{ transform:scale(1.04); }
.why-label{
  position:absolute; left:0; bottom:0; background:var(--yellow); color:var(--navy);
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; padding:var(--sp-2) var(--sp-3);
}
.why-body{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3); flex:1;
  margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--line);
}
.why-body h3{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; font-size:var(--fs-d6); line-height:1.2; color:var(--navy); }
.why-body p{ font-size:var(--fs-xs); line-height:1.65; color:var(--steel); }
.why-body .btn-arrow{ margin-top:auto; }
@media (max-width:980px){ .why-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .why-grid, .why-grid.cols-2{ grid-template-columns:1fr; } }

/* Banda de stock: aviso corto antes de "¿Qué fabricamos?" en la portada. */
.banda-stock{ background:var(--navy-soft); color:var(--white); padding:var(--sp-6) 0; }
.banda-stock-inner{ display:flex; align-items:center; gap:var(--sp-6); flex-wrap:wrap; }
.banda-stock-ico{ flex:0 0 auto; width:40px; height:40px; color:var(--yellow); }
.banda-stock-texto{ flex:1 1 320px; margin:0; font-size:var(--fs-body); line-height:1.5; color:var(--on-dark-200); }
.banda-stock-texto b{ font-family:var(--font-display); font-weight:700; color:var(--white); }

/* Banda de llamado final (ctaBand en fragments.js). */
.section.cta-band{ padding:var(--section-y) 0; }
.cta-band-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:var(--sp-8); }
.cta-band-text{ max-width:560px; }
.cta-band-actions{ display:flex; gap:var(--sp-4); flex-wrap:wrap; }

/* Dos bloques .fx seguidos (portada, "Única en Chile"): aire entre ambos. */
.fx + .fx{ margin-top:clamp(var(--sp-8),3.5vw,var(--sp-12)); }