/* Contix — V24 draft. Tokens follow DESIGN-NOTES.md (Hydroscand reference). */
:root {
  --ink: #000000;
  --text: #414141;
  --muted: #646464;
  --line: #e6e6e6;
  --wash: #f7f7f7;
  --panel: #262626;
  --accent: #ff9f1c;      /* sampled from the Contix logo */
  --accent-dark: #e88a00;
  --white: #ffffff;
  --radius: 3px;
  --wrap: 1680px;                       /* content never wider than this */
  --gutter: clamp(24px, 3.2vw, 64px);   /* side margin: 3.2% of the window, between 24 and 64px */
  --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; /* stand-in for Pragmatica */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.01em; }
h1 { font-size: clamp(34px, 5vw, 58px); }
h2 { font-size: clamp(26px, 3.2vw, 38px); }
h3 { font-size: 21px; }
p { margin: 0 0 16px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 0 auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--white); padding: 8px 12px; z-index: 100; }

/* Header */
.header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 84px; gap: 24px; }
.logo img { height: 34px; width: auto; }
/* V98: con la sexta entrada (Calculadora) el menú se partía en dos líneas entre 1301 y 1440 px,
   lo que estiraba la cabecera 17 px y rompía la regla de "primera pantalla = una ventana" del inicio.
   Se ajusta solo el espaciado horizontal; tamaños, colores y altura de cabecera quedan igual. */
.nav { display: flex; align-items: center; gap: 6px; align-self: stretch; flex: 1; margin-left: 26px; }
.nav .item { position: relative; display: flex; align-items: stretch; align-self: stretch; }
.nav a.top { display: flex; align-items: center; text-decoration: none; color: var(--ink); font-size: 17px; font-weight: 500; padding: 0 13px; border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
.nav a.top.active { border-bottom-color: var(--accent); }
.nav a.btn { padding: 12px 22px; margin-left: auto; align-self: center; }
.sub-toggle { display: none; }
.sub { display: none; position: absolute; top: 100%; left: 0; min-width: 290px; background: var(--panel); padding: 14px 0; z-index: 60; box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.sub a { display: block; color: var(--white); text-decoration: none; font-size: 16px; padding: 15px 24px; white-space: nowrap; }
.sub a:hover, .sub a:focus-visible { background: #3b3a3a; }
.sub .group { position: relative; }
.sub .parent { padding-right: 52px; }
.sub .parent::after { content: ""; position: absolute; right: 24px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--white); border-top: 2px solid var(--white); transform: translateY(-50%) rotate(45deg); }
.flyout { display: none; position: absolute; top: -14px; left: 100%; min-width: 280px; background: #3b3a3a; padding: 14px 0; box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.flyout a:hover, .flyout a:focus-visible { background: #4d4c4c; }
@media (min-width: 1301px) {
  .nav .item:hover > .sub, .nav .item:focus-within > .sub { display: block; }
  .nav .item:hover > a.top, .nav .item:focus-within > a.top { background: var(--panel); color: var(--white); border-bottom-color: var(--panel); }
  .sub .group:hover > .flyout, .sub .group:focus-within > .flyout { display: block; }
}
[id] { scroll-margin-top: 110px; }
.menu-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; }

/* Buttons */
.btn { display: inline-block; background: var(--accent); color: var(--ink); font-weight: 600; font-size: 16px; text-decoration: none; padding: 14px 26px; border-radius: var(--radius); border: 2px solid var(--accent); cursor: pointer; font-family: inherit; }
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-ghost { background: transparent; color: var(--white); border-color: var(--white); }
.btn-ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* Hero */
.hero { position: relative; color: var(--white); background: var(--panel) center/cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.15) 100%); }
.hero .wrap { position: relative; padding-top: 120px; padding-bottom: 120px; }
.hero h1 { color: var(--white); max-width: 780px; }
.hero p { font-size: 20px; max-width: 640px; margin-bottom: 32px; color: rgba(255,255,255,.92); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero.small .wrap { padding-top: 76px; padding-bottom: 76px; }
.hero h1:last-child { margin-bottom: 0; }
.hero.plain { background: var(--panel); }
.crumbs { font-size: 14px; margin-bottom: 18px; opacity: .85; }
.crumbs a { color: var(--white); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* Claims strip under the home hero: words only. No icons, no boxes, no divider bars — size and even spacing do the work. */
.claims { background: var(--white); padding: clamp(44px, 4.4vw, 72px) 0; border-bottom: 1px solid var(--line); }
.claims ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.claims li { margin: 0; padding: 0; border: 0; }
.claims b { display: block; color: var(--ink); font-size: clamp(21px, 1.9vw, 30px); font-weight: 700; line-height: 1.15; text-transform: uppercase; letter-spacing: .005em; white-space: nowrap; }
.claims span { display: block; margin-top: 6px; font-size: clamp(16px, 1.25vw, 20px); color: var(--text); line-height: 1.3; }

/* Sections */
.section { padding: 88px 0; }
.section.wash { background: var(--wash); }
.section.dark { background: var(--panel); color: rgba(255,255,255,.88); }
.section.dark h2, .section.dark h3 { color: var(--white); }
.eyebrow { display: block; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.section.dark .eyebrow { color: var(--accent); }
.lead { font-size: 20px; max-width: 760px; }
.section-head { margin-bottom: 44px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split img { border-radius: var(--radius); width: 100%; height: 100%; max-height: 460px; object-fit: cover; }

/* Grids and cards */
.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g5 { grid-template-columns: repeat(5, 1fr); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; text-decoration: none; color: var(--text); position: relative; transition: border-color .15s, box-shadow .15s; }
a.card:hover { border-color: var(--ink); box-shadow: 0 6px 22px rgba(0,0,0,.12); }
.card h3 { margin-bottom: 10px; }
.card p { font-size: 16px; margin-bottom: 0; }
.card .more { margin-top: auto; padding-top: 20px; font-weight: 600; color: var(--ink); font-size: 15px; }
.card.soon { background: var(--white); }
.chip { display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: var(--line); color: var(--muted); padding: 3px 8px; border-radius: var(--radius); margin-bottom: 14px; }
.tile { position: relative; min-height: clamp(300px, 26vw, 440px); border-radius: var(--radius); overflow: hidden; background: var(--panel) center/cover no-repeat; color: var(--white); text-decoration: none; display: flex; align-items: flex-end; padding: 28px; }
.tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%); transition: background .18s; }
.tile:hover::before { background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.8) 100%); }
.tile > div { position: relative; }
.tile h3 { color: var(--white); font-size: clamp(30px, 2.6vw, 42px); font-weight: 400; letter-spacing: -0.01em; margin-bottom: 12px; }
.tile-btn { display: inline-block; background: var(--white); color: var(--ink); font-size: 16px; font-weight: 500; padding: 10px 16px; border-radius: 4px; }
.tile:hover .tile-btn { background: #e1e1e1; }

/* Proof strip */
.proof { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof .grid { gap: 0; }
.stat { padding: 36px 28px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat b { display: block; color: var(--ink); font-size: 40px; line-height: 1.1; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.02em; }
.stat span { font-size: 15px; color: var(--muted); }

/* Lists */
.ticks { list-style: none; margin: 0 0 24px; padding: 0; }
.ticks li { padding: 12px 0 12px 22px; border-bottom: 1px solid var(--line); position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: calc(12px + 0.75em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }   /* V85: orange (his ruling), same size. V76: small round bullet in the text colour (his ruling: no orange dashes) */
.section.dark .ticks li { border-bottom-color: rgba(255,255,255,.15); }
.brandrow { display: flex; flex-wrap: wrap; gap: 12px; }
.brandrow span { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 20px; font-weight: 600; color: var(--ink); background: var(--white); font-size: 15px; letter-spacing: .04em; }

/* Nosotros story + statement band (from the live site) */
.story-grid { display: block; }
.story-grid > * { min-width: 0; }
.story-grid h2 { margin: 0 0 32px; font-size: clamp(32px, 3.2vw, 50px); }
.story-grid h2::after { content: ""; display: block; width: 56px; height: 4px; background: var(--accent); margin-top: 18px; }
.story-text { font-size: clamp(19px, 1.45vw, 24px); line-height: 1.55; color: var(--ink); max-width: 1080px; margin-bottom: 22px; }
.story .btn { margin-top: 10px; }
.statement { background: var(--accent); padding: clamp(56px, 6vw, 96px) 0; text-align: center; }
.statement p { margin: 0; color: var(--ink); font-size: clamp(26px, 3vw, 46px); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }

/* Home "Nosotros": photo on one half, edge to edge; text on the other */
.about { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; background: var(--wash); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-photo { background: var(--panel) center/cover no-repeat; min-height: 360px; }
.about-text { padding: clamp(48px, 6vw, 110px) var(--gutter) clamp(48px, 6vw, 110px) clamp(32px, 5vw, 96px); max-width: 860px; align-self: center; }
.about-text h2 { font-size: clamp(32px, 3.2vw, 50px); margin-bottom: 26px; }
.about-text h2::after { content: ""; display: block; width: 56px; height: 4px; background: var(--accent); margin-top: 18px; }
.about-lead, .about-text p.about-lead { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.25; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 26px; }
.about-text p { font-size: clamp(17px, 1.2vw, 20px); }
.about-links { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 30px; }
.text-link { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px; white-space: nowrap; }
.text-link:hover { border-bottom-color: var(--ink); }

/* What defines us: three short statements that close "Nuestra historia". Words only. */
.story-grid h2.values-title { margin-top: clamp(56px, 6vw, 96px); padding-top: clamp(48px, 5vw, 80px); border-top: 1px solid var(--line); }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 64px); }
.pillar h3 { font-size: clamp(20px, 1.7vw, 26px); margin-bottom: 12px; }
.pillar p { margin: 0; font-size: clamp(17px, 1.2vw, 20px); line-height: 1.55; }

/* Pages carried over from the original site: products, catalogues, long article, video */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px; }
.prod-card h2, .prod-row h2 { font-size: clamp(22px, 1.8vw, 28px); margin: 0 0 14px; }
.prod-img { background: var(--white); display: flex; align-items: center; justify-content: flex-start; margin-bottom: 18px; }
.prod-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.prod-rows { display: grid; gap: clamp(40px, 4vw, 72px); }
.prod-row { display: grid; grid-template-columns: minmax(240px, 400px) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.prod-row .prod-img { margin: 0; }
.prod-row p { font-size: clamp(17px, 1.2vw, 20px); max-width: 860px; }
.prod-row .ticks li { font-size: clamp(17px, 1.2vw, 20px); max-width: 860px; }
.pdf-link { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; text-decoration: none; }
.pdf-link:last-child { border-bottom: 1px solid var(--line); }
.pdf-link:hover { color: var(--accent-dark); }
.pdf-link small { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.video { max-width: 1080px; }
.video video { width: 100%; aspect-ratio: 16 / 9; background: var(--ink); display: block; border-radius: var(--radius); }
.article { max-width: 1080px; }
.article h2 { font-size: clamp(28px, 2.6vw, 40px); margin: clamp(48px, 5vw, 80px) 0 20px; }
.article h2:first-child { margin-top: 0; }
.article h3 { font-size: clamp(20px, 1.6vw, 24px); margin: 32px 0 12px; }
.article .video { margin: 0 0 36px; }
.article .ticks li { font-size: clamp(17px, 1.2vw, 20px); }
.art-cap { font-size: clamp(19px, 1.45vw, 24px); line-height: 1.45; color: var(--ink); font-weight: 500; margin: 0 0 22px; }
.art-img { margin: 28px 0; }
.art-img img { max-width: 100%; height: auto; border-radius: var(--radius); }
.svc { margin: 0; }
.svc img { width: 100%; max-width: 400px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); margin-bottom: 16px; background: var(--white); }
.svc h3 { font-size: clamp(19px, 1.5vw, 23px); margin: 0; }
[id].svc { scroll-margin-top: 110px; }

/* Product specification tables — calm and even: one size, single-line headers, roomy rows */
.spec-wrap h2 { font-size: clamp(22px, 1.9vw, 28px); margin: clamp(48px, 4.5vw, 72px) 0 26px; }
.spec-wrap h2:first-child { margin-top: 0; }
.spec-scroll { overflow-x: auto; }
.spec { width: 100%; min-width: 760px; table-layout: fixed; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.spec th, .spec td { text-align: left; padding: 15px 28px 15px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec thead th { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); padding: 0 28px 11px 0; white-space: nowrap; vertical-align: bottom; }
.spec tbody th { color: var(--ink); font-weight: 600; font-size: 15px; }
.spec td { color: var(--text); }
.spec td:last-child, .spec thead th:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.spec a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.spec a:hover { border-bottom-color: var(--ink); }
.spec a small { font-weight: 400; font-size: 13px; color: var(--muted); margin-left: 6px; }
.spec tbody tr:hover { background: var(--wash); }
.spec th:nth-child(1) { width: 18%; } .spec th:nth-child(2) { width: 18%; } .spec th:nth-child(3) { width: 34%; } .spec th:nth-child(4) { width: 18%; } .spec th:nth-child(5) { width: 12%; }
.spec td:nth-child(2) { color: var(--ink); font-weight: 600; white-space: nowrap; }
.spec.c4 th:nth-child(1) { width: 26%; } .spec.c4 th:nth-child(2) { width: 42%; } .spec.c4 th:nth-child(3) { width: 20%; } .spec.c4 th:nth-child(4) { width: 12%; }
.spec.c3 th:nth-child(1) { width: 14%; } .spec.c3 th:nth-child(2) { width: 74%; } .spec.c3 th:nth-child(3) { width: 12%; }
.spec.c4 td:nth-child(2), .spec.c3 td:nth-child(2) { font-weight: 400; color: var(--text); white-space: normal; }
/* hose cards: a photo of each hose, then its facts */
.hose-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.hose-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); padding: 24px; display: flex; flex-direction: column; }
.hose-img { height: 96px; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 18px; }
.hose-img img { max-height: 100%; max-width: 100%; width: auto; height: auto; }
.hose-card h3 { font-size: 22px; margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.hose-card dl { margin: 0 0 18px; }
.hose-card dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.hose-card dt { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hose-card dd { margin: 0; font-size: 15px; color: var(--text); line-height: 1.4; text-align: right; }
.hose-card dd.strong { color: var(--ink); font-weight: 600; font-size: 15px; white-space: nowrap; }
.hose-link { margin-top: auto; align-self: flex-start; color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.hose-link:hover { border-bottom-color: var(--ink); }
.hose-link small { font-weight: 400; font-size: 13px; color: var(--muted); margin-left: 6px; }
/* fact sheets: a few products shown as cards of facts instead of a wide table */
.fact-sheets { display: grid; gap: 24px; }
.fact-sheet { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 2.4vw, 36px); background: var(--white); }
.fact-sheet header { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.fact-sheet header h2 { margin: 0; font-size: 24px; }
.fact-sheet header p { margin: 0; font-size: 16px; color: var(--text); }
.fact-sheet dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr 1.6fr auto; gap: 24px clamp(24px, 3vw, 56px); align-items: start; }
.fact-sheet dt { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; white-space: nowrap; }
.fact-sheet dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.fact-sheet dd.big { font-size: 20px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.fact-sheet dd span { display: block; }
.fact-sheet dd a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--accent); white-space: nowrap; }
.fact-sheet dd a small { font-weight: 400; font-size: 13px; color: var(--muted); margin-left: 6px; }
.spec-note { margin: 28px 0 0; font-size: 15px; color: var(--muted); max-width: 900px; }

/* Technical library + pages still to be written */
.lib { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 96px) clamp(40px, 5vw, 96px); }
.lib-group h2 { font-size: clamp(26px, 2.2vw, 34px); margin-bottom: 18px; }
.lib .pdf-link { font-size: clamp(17px, 1.2vw, 19px); padding: 18px 0; }
.lib .pdf-link small { white-space: nowrap; }
.wip { font-size: clamp(22px, 2vw, 30px); color: var(--muted); margin: 0; padding: clamp(40px, 6vw, 96px) 0; }

/* Servicios: four columns with a photo slot each; InPlant block with the consignment note */
.svc-col .blank-frame { min-height: 0; width: 100%; aspect-ratio: 16 / 10; margin-bottom: 22px; background: var(--white); }
.svc-col h3 { font-size: clamp(19px, 1.5vw, 23px); margin: 0 0 12px; }
.svc-col p { margin: 0; font-size: 16px; line-height: 1.6; }
.inplant { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.inplant h2 { font-size: clamp(32px, 3.2vw, 50px); margin: 0 0 26px; }
.inplant h2::after { content: ""; display: block; width: 56px; height: 4px; background: var(--accent); margin-top: 18px; }
.inplant p { font-size: clamp(17px, 1.2vw, 19px); max-width: 760px; }
.inplant > * { min-width: 0; }
.inplant .inplant-photo { min-height: 0; width: 100%; aspect-ratio: 4 / 3; }
.aside-box { border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: 28px; background: var(--wash); }
.aside-box h3 { margin: 0 0 10px; font-size: 22px; }
.aside-box p { margin: 0; font-size: 16px; }
/* General Manager's letter */
.letter { margin: clamp(48px, 5vw, 80px) 0 0; padding: clamp(28px, 3vw, 48px) clamp(28px, 3.4vw, 56px); border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: var(--radius); background: var(--wash); max-width: 1080px; position: relative; }
.letter::before { content: "\201C"; position: absolute; top: 6px; right: 28px; font-size: 120px; line-height: 1; color: var(--accent); font-family: Georgia, serif; opacity: .9; }
.letter blockquote { margin: 0; }
.letter blockquote p { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.6; color: var(--ink); font-style: italic; margin: 0 0 16px; max-width: 900px; }
.letter figcaption { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.letter figcaption strong { color: var(--ink); font-size: 17px; }
.letter figcaption span { color: var(--accent-dark); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }

/* Certificate frames: filled ones first, blank ones for images still to come */
.slots { display: grid; gap: 24px; margin: 8px 0 36px; }
.slots.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slots.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.slot { margin: 0; min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8% 10%; text-align: center; }
.slot img { max-width: 100%; max-height: 72%; width: auto; height: auto; object-fit: contain; }
.slot figcaption { margin-top: 14px; font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.slot.empty { background: transparent; border: 1px dashed #c9c9c9; }
.section:not(.wash) .slot.empty { background: var(--wash); }
.blank-frame { background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius); min-height: 340px; }
.section.wash .blank-frame { background: var(--white); }

/* Certification wall */
.cert-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cert-wall.three { grid-template-columns: repeat(3, 1fr); }
.cert-cell { background: var(--white); padding: clamp(28px, 3vw, 56px); }
.cert-mark { display: flex; align-items: center; justify-content: center; height: 300px; margin-bottom: 28px; background: var(--wash); border-radius: var(--radius); }
.cert-mark img { max-height: 220px; width: auto; }
.cert-mark.doc img { max-height: 268px; box-shadow: 0 6px 22px rgba(0,0,0,.18); }
.cert-cell h3 { font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 4px; }
.cert-sub { font-size: 18px; color: var(--ink); font-weight: 500; margin-bottom: 14px; }
.cert-cell a { color: var(--ink); font-weight: 600; }

/* Brand logos — a ruled logo wall per division */
.brands { padding: 96px 0; }
.brands.wash { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.brands .section-head { margin-bottom: 56px; }
.division-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 32px; flex-wrap: wrap; }
.division-head h3 { font-size: clamp(26px, 2.6vw, 34px); margin: 0; white-space: nowrap; }
.division-head h3::after { content: ""; display: block; width: 56px; height: 4px; background: var(--accent); margin-top: 14px; }
.division-head p { margin: 0; max-width: 560px; font-size: 18px; color: var(--text); text-align: right; }
.logo-wall { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.logo-wall > .logo-cell { grid-column: span 3; }                       /* four to a row */
.logo-wall.n7 > .logo-cell:nth-child(n+5) { grid-column: span 4; }     /* seven brands: 4 + 3, the second row fills the width */
.division-head h3 a { color: inherit; text-decoration: none; }
.division-head h3 a:hover::after { margin-left: 6px; }
.logo-cell { position: relative; overflow: hidden; text-decoration: none; background: var(--white); height: 190px; display: flex; align-items: center; justify-content: center; padding: 24px; }
.logo-cell img { max-height: 96px; width: auto; height: auto; object-fit: contain; }
.wordmark { font-weight: 700; font-size: 40px; letter-spacing: .01em; color: var(--ink); white-space: nowrap; }
.logo-hover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--ink); font-weight: 600; font-size: 18px; opacity: 0; transition: opacity .18s; }
a.logo-cell:hover .logo-hover, a.logo-cell:focus-visible .logo-hover { opacity: 1; }
.wall-cta { background: var(--ink); color: var(--white); text-decoration: none; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 600; font-size: 20px; line-height: 1.3; height: 190px; transition: background .18s, color .18s; }
.wall-cta:hover { background: var(--accent); color: var(--ink); }
.wall-cta:hover span::after { color: var(--ink); }
.logo-cell.inset { height: 120px; margin-bottom: 20px; justify-content: flex-start; padding: 0; border: 0; }
.logo-cell.inset img { max-height: 72px; }
.logo-cell.inset .wordmark { font-size: 32px; }
.card[id]:target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.lang span { opacity: .45; cursor: not-allowed; }

/* Draft notes */
.todo { background: #fff4e0; border-left: 3px solid var(--accent); padding: 2px 8px; font-size: .88em; color: #7a4a00; border-radius: 2px; }
.placeholder { background: repeating-linear-gradient(45deg, #ececec, #ececec 12px, #f5f5f5 12px, #f5f5f5 24px); border: 1px dashed #b2b2b2; border-radius: var(--radius); min-height: 280px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--muted); font-size: 14px; }

/* Team */
.person img, .person .placeholder { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--radius); min-height: 0; margin-bottom: 16px; }
.person h3 { margin-bottom: 2px; font-size: 19px; }
.person p { font-size: 15px; color: var(--muted); }

/* Form */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form .full { grid-column: 1 / -1; }
.form label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.form input, .form select, .form textarea { width: 100%; font: inherit; font-size: 16px; padding: 13px 14px; border: 1px solid #b2b2b2; border-radius: var(--radius); background: var(--white); color: var(--ink); }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--accent); border-color: var(--ink); }
.form textarea { min-height: 130px; resize: vertical; }
.form-note { font-size: 14px; color: var(--muted); }

/* Contact page: the form alone, full width */
.contact-form { max-width: none; }   /* 28/09 (Nicolas): empty-space sweep — the form ran 1180 px inside a 1680 px wrap */
.contact-form > div > h2 { margin-bottom: 28px; }
.contact-form .checks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contact-form .form { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Quote form: product checkboxes */
.form-step { margin: 8px 0 0; font-size: 22px; }
.checks { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; }
.checks legend { font-size: 14px; font-weight: 600; color: var(--ink); padding: 0; margin: 6px 0 10px; }
.form label.check { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid #b2b2b2; border-radius: var(--radius); font-weight: 500; font-size: 15px; cursor: pointer; background: var(--white); }
.form label.check:hover { border-color: var(--ink); }
.form label.check input { width: 18px; height: 18px; padding: 0; flex: none; accent-color: var(--accent-dark); }
.form label.check:has(input:checked) { border-color: var(--ink); background: #fff4e0; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative; color: var(--ink); font-weight: 600; font-size: clamp(18px, 1.4vw, 22px); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 28px; font-weight: 400; color: var(--accent-dark); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 24px; max-width: 820px; font-size: 18px; }
.faq a { color: var(--ink); font-weight: 600; }

/* CTA band */
.band { background: var(--accent); color: var(--ink); padding: 56px 0; }
.band .wrap { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.band h2 { margin: 0 0 6px; }
.band p { margin: 0; color: var(--ink); }
.band .btn { background: var(--ink); color: var(--white); border-color: var(--ink); }
.band .btn:hover { background: var(--panel); }

/* Sub-navigation (Automotriz) */
.subnav { background: var(--wash); border-bottom: 1px solid var(--line); font-size: 15px; }
.subnav .wrap { display: flex; gap: 28px; min-height: 52px; align-items: center; overflow-x: auto; }
.subnav a { text-decoration: none; color: var(--ink); font-weight: 500; white-space: nowrap; }
.subnav a:hover { color: var(--accent-dark); }
.subnav b { color: var(--ink); white-space: nowrap; }

/* Footer — after the reference. Every adjustable measure is a variable so Nicolas's edit panel can change it;
   the values below are the defaults, the overrides file (if any) wins. */
.footer { --f-h4: 20px; --f-h5: 17px; --f-text: 17px; --f-line: 10px; --f-gap: 56px; --f-divgap: 32px; --f-pad: 56px; --f-marks-top: 40px;
          --f-col-about: 1; --f-col-contact: 3.2; --f-seal: 220px; --f-mark: 64px; --f-legal: 16px;
  background: var(--ink); color: var(--white); font-size: var(--f-text); padding: var(--f-pad) 0 0; border-top: 3px solid var(--accent); }
.footer a { color: var(--white); text-decoration: none; }
.footer a:hover { color: var(--accent); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.footer li { margin-bottom: var(--f-line); line-height: 1.35; }
.footer h4 { color: var(--white); font-size: var(--f-h4); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 18px; }
.footer h5 { color: var(--white); font-size: var(--f-h5); font-weight: 600; margin: 0 0 10px; }
.footer .fgrid { display: flex; gap: var(--f-gap); align-items: flex-start; }
.footer [data-k="col-about"] { flex: var(--f-col-about) 1 0; min-width: 160px; }
.footer [data-k="col-contact"] { flex: var(--f-col-contact) 1 0; min-width: 0; }
.footer .fseal { flex: 0 0 auto; }
.footer .faddr { margin: 0 0 24px; }
.footer .fdivs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--f-divgap); }
.footer .fdiv { display: flex; flex-direction: column; }   /* WhatsApp buttons line up across the three divisions */
.footer .fdiv ul { flex: 1; }
.footer .fdiv [data-k="wa"] { margin-top: auto; }
.footer .wa-link { color: var(--accent); font-weight: 600; }
.footer .wa-link:hover { color: var(--white); }
.footer .fseal { display: block; line-height: 0; }
.footer .fseal img { width: var(--f-seal); height: auto; border-radius: var(--radius); }
.footer .footer-marks { display: flex; align-items: center; gap: 28px; margin: var(--f-marks-top) 0 32px; }
.footer .footer-marks svg, .footer .reclamos img { height: var(--f-mark); width: auto; display: block; }
.footer .social { color: var(--accent); line-height: 0; }
.footer .social:hover { color: var(--white); }
.footer .reclamos { line-height: 0; }
.footer .legal { border-top: 1px solid rgba(255,255,255,.22); padding: 22px 0 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--f-legal); }
.footer .lang span { opacity: .45; }
.fontbadge { position: fixed; left: 16px; bottom: 16px; z-index: 90; background: var(--ink); color: var(--white); font: 500 13px/1.3 system-ui, sans-serif; padding: 10px 14px; border-radius: var(--radius); box-shadow: 0 6px 22px rgba(0,0,0,.3); }
.fontbadge a { color: var(--accent); margin-left: 10px; }

/* Responsive */
@media (max-width: 1020px) {
  .inplant { grid-template-columns: 1fr; }
  .contact-form .checks, .contact-form .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-sheet dl { grid-template-columns: 1fr 1fr; }
  .fact-sheet dt, .fact-sheet dd.big { white-space: normal; }
  .lib { grid-template-columns: 1fr; }
  .prod-row { grid-template-columns: 1fr; }
  .prod-row .prod-img { max-width: 400px; }
  .pillars { grid-template-columns: 1fr; gap: 28px; }
  .claims ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .claims b { white-space: normal; }
  .about { grid-template-columns: 1fr; }
  .about-text { padding: 56px var(--gutter); max-width: none; }
  .g4, .g5 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .footer .fgrid { flex-direction: column; gap: min(var(--f-gap), 40px); }
  /* phones keep safe limits whatever the edit panel says, so a desktop choice can never break a small screen */
  .footer { font-size: min(var(--f-text), 18px); overflow-wrap: anywhere; }
  .footer h4 { font-size: min(var(--f-h4), 24px); }
  .footer h5 { font-size: min(var(--f-h5), 20px); }
  .footer .fseal img { width: min(var(--f-seal), 70vw); }
  .footer .footer-marks svg, .footer .reclamos img { height: min(var(--f-mark), 80px); }
  .footer .fdivs { gap: min(var(--f-divgap), 32px); }
  .footer [data-k="col-about"], .footer [data-k="col-contact"] { flex: 0 0 auto; width: 100%; }
  .stat:nth-child(odd) { border-left: 0; }
  .stat { border-top: 1px solid var(--line); }
  .stat:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 1020px) {
  .cert-wall, .cert-wall.three { grid-template-columns: 1fr; }
  .slots.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .logo-wall > .logo-cell, .logo-wall.n7 > .logo-cell:nth-child(n+5) { grid-column: span 1; }
  .logo-wall.n7 > .logo-cell:last-child { grid-column: span 2; }
  .division-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .division-head p { text-align: left; }
  .division-head h3 { white-space: normal; }
}
@media (max-width: 1300px) {
  .menu-toggle { display: block; }
  .nav { margin-left: 0; display: none; position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: 100%; background: var(--white); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 24px; max-height: calc(100vh - 70px); overflow-y: auto; }
  .nav.open { display: flex; }
  .nav .item { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .nav a.top { flex: 1; padding: 15px 0; border: 0; }
  .sub-toggle { display: block; width: 52px; background: none; border: 0; cursor: pointer; position: relative; }
  .sub-toggle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translate(-50%, -70%) rotate(45deg); transition: transform .15s; }
  .item.open > .sub-toggle::before { transform: translate(-50%, -30%) rotate(-135deg); }
  .sub { position: static; width: 100%; min-width: 0; box-shadow: none; padding: 6px 0; margin-bottom: 12px; }
  .item.open > .sub { display: block; }
  .sub a { white-space: normal; padding: 12px 18px; font-size: 15px; }
  .sub .parent::after { display: none; }
  .sub .parent { font-weight: 600; }
  .flyout { display: block; position: static; min-width: 0; box-shadow: none; background: transparent; padding: 0 0 6px 16px; }
  .nav a.btn { margin: 16px 0 0; text-align: center; }
  .header .wrap { position: relative; min-height: 70px; }
}
@media (max-width: 640px) {
  .fact-sheet dl { grid-template-columns: 1fr; }
  .slots.n3, .slots.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .brands { padding: 60px 0; }
  .logo-cell, .wall-cta { height: 130px; padding: 16px; }
  .logo-cell img { max-height: 60px; }
  .wordmark { font-size: 28px; }
  body { font-size: 16px; }
  .g2, .g3, .g4, .g5 { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
  .hero .wrap { padding-top: 76px; padding-bottom: 76px; }
  .hero p, .lead { font-size: 18px; }
  .form, .contact-form .form { grid-template-columns: 1fr; }
  .checks, .contact-form .checks { grid-template-columns: 1fr; }
  .footer .fdivs { grid-template-columns: 1fr; gap: 24px; }
  .stat, .stat:nth-child(-n+2) { border-left: 0; border-top: 1px solid var(--line); padding: 26px 0; }
  .stat:first-child { border-top: 0; }
  .tile { min-height: 230px; }
}

/* V25 — cards for industrial hoses and fittings */
.hose-card .hose-sub { margin: -2px 0 4px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.hose-card h3 + .hose-sub { padding-top: 8px; }
.hose-img.fit { height: 120px; }
.hose-card dl > div.stack { display: block; }
.hose-card dl > div.stack dd { text-align: left; margin-top: 6px; line-height: 1.6; }
.hose-card dd.strong small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }

/* V26 — home hero: glass enquiry card, glass figures strip, slow motion on the photo */
.home-hero { overflow: hidden; background: #0d0d0d; }
.home-hero .hero-bg { position: absolute; inset: -4%; background: center/cover no-repeat; transform-origin: 60% 50%; animation: ctx-drift 36s ease-in-out infinite alternate; will-change: transform; }
@keyframes ctx-drift { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.12) translate3d(-2.2%, -1.4%, 0); } }
.home-hero::before { z-index: 1; background: linear-gradient(100deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.58) 48%, rgba(0,0,0,.34) 100%), radial-gradient(60% 80% at 82% 38%, rgba(255,159,28,.16), transparent 70%); }
.home-hero .wrap { z-index: 2; padding-top: clamp(72px, 7vw, 120px); padding-bottom: clamp(56px, 5vw, 88px); }
.hh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: clamp(32px, 5vw, 96px); row-gap: clamp(40px, 4vw, 64px); align-items: center; }
.hh-copy h1 { font-size: clamp(40px, 4.6vw, 76px); line-height: 1.04; letter-spacing: -.02em; max-width: 14ch; }
.hh-copy p { font-size: clamp(18px, 1.35vw, 22px); }
.glass { position: relative; border-radius: 18px; border: 1px solid rgba(255,255,255,.22); color: var(--white);
  background: linear-gradient(145deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.06) 42%, rgba(255,255,255,.03) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.65), 0 2px 0 rgba(255,255,255,.22) inset, 0 -1px 0 rgba(0,0,0,.35) inset; }
.glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 32%); -webkit-mask: linear-gradient(#000, transparent 60%); mask: linear-gradient(#000, transparent 60%); }
.quick { grid-row: span 2; padding: 30px 28px 26px; display: flex; flex-direction: column; gap: 12px; }
.quick h2 { color: var(--white); font-size: 24px; margin: 0; }
.quick .quick-sub { margin: -6px 0 8px; font-size: 16px; color: rgba(255,255,255,.78); }
.quick label { display: block; margin: 0; }
.quick input[type=text], .quick input[type=tel], .quick input[type=email] { width: 100%; font: inherit; font-size: 16px; color: var(--white); padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.24); background: rgba(0,0,0,.44); box-shadow: 0 2px 6px rgba(0,0,0,.35) inset; }
.quick input::placeholder { color: rgba(255,255,255,.62); }
.quick input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.quick .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.80); margin: 4px 0 6px; }
.quick .consent input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.quick .btn { width: 100%; border-radius: 10px; text-align: center; box-shadow: 0 10px 24px -8px rgba(255,159,28,.6); }
.quick .quick-msg { margin: 0; min-height: 18px; font-size: 13px; color: #ffd08a; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 760px; overflow: hidden; }
.stats li { margin: 0; padding: 24px 22px 22px; border-left: 1px solid rgba(255,255,255,.14); }
.stats li:first-child { border-left: 0; }
.stats b { display: block; font-size: clamp(30px, 2.7vw, 44px); line-height: 1; font-weight: 700; color: var(--accent); letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 18px rgba(255,159,28,.35); white-space: nowrap; }
.stats li > span { display: block; margin-top: 10px; font-size: 16px; line-height: 1.3; color: rgba(255,255,255,.88); }
.claims.three ul { justify-content: space-around; }
@media (max-width: 1020px) {
  .hh-grid { grid-template-columns: minmax(0, 1fr); }
  .quick { grid-row: auto; order: 3; }
  .stats { order: 2; max-width: none; }
}
@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats li:nth-child(3) { border-left: 0; }
  .stats li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
  .stats li { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) { .home-hero .hero-bg { animation: none; } }

/* V27 — the glass bar spans the full content width at the foot of the hero (where the white claims strip was) and carries two word tiles */
.home-hero .wrap { padding-top: clamp(48px, 4.4vw, 84px); padding-bottom: clamp(36px, 3vw, 56px); }
.quick { grid-row: auto; }
.stats-band .stats { max-width: none; margin-top: clamp(32px, 3vw, 56px); grid-template-columns: repeat(4, minmax(0, 1fr)) repeat(2, minmax(0, 1.45fr)); }
.stats-band .stats li { padding: 28px 26px 26px; display: flex; flex-direction: column; }
.stats-band .stats li.word b { display: flex; align-items: flex-end; font-size: clamp(20px, 1.55vw, 27px); line-height: 1.1; height: auto; min-height: calc(clamp(30px, 2.7vw, 44px)); letter-spacing: -.01em; white-space: normal; }
@media (max-width: 1020px) {
  .stats-band .stats { order: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-band .stats li:nth-child(4) { border-left: 0; }
  .stats-band .stats li:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,.14); }
}
@media (max-width: 640px) {
  .stats-band .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-band .stats li { padding: 18px 16px; border-left: 0; }
  .stats-band .stats li:nth-child(even) { border-left: 1px solid rgba(255,255,255,.14); }
  .stats-band .stats li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
}
@media (min-width: 1200px) { .stats-band .stats li { padding-left: 24px; padding-right: 18px; } .stats-band .stats li > span { white-space: nowrap; } }

/* V28 — the glass bar is its own floating element: half over the foot of the hero photo, half on a dark band that separates the hero from the next photo */
.home-hero .wrap { padding-top: clamp(40px, 3.6vw, 72px); padding-bottom: clamp(96px, 7.4vw, 124px); }
.stats-band { position: relative; z-index: 3; background: radial-gradient(70% 160% at 22% 0%, rgba(255,159,28,.13), transparent 62%), linear-gradient(180deg, #0b0b0b 0%, #161616 100%); padding-bottom: clamp(44px, 3.8vw, 68px); }
.stats-band .stats { margin-top: 0; transform: translateY(-50%); margin-bottom: calc(-1 * clamp(28px, 2.4vw, 44px)); box-shadow: 0 34px 70px -18px rgba(0,0,0,.8), 0 2px 0 rgba(255,255,255,.22) inset, 0 -1px 0 rgba(0,0,0,.35) inset; }
@media (max-width: 1020px) { .stats-band .stats { transform: translateY(-44px); margin-bottom: -12px; } .home-hero .wrap { padding-bottom: 84px; } }
/* V28 — compact hero so the floating bar is on screen without scrolling on a laptop (about 1470 x 780 visible) */
@media (min-width: 1021px) {
  .home-hero .wrap { padding-top: clamp(30px, 2.6vw, 52px); padding-bottom: clamp(88px, 6.6vw, 112px); }
  .quick { padding: 24px 26px 18px; gap: 10px; }
  .quick h2 { font-size: 22px; } .quick .quick-sub { margin: -6px 0 4px; font-size: 15px; }
  .quick input[type=text], .quick input[type=tel], .quick input[type=email] { padding: 12px 14px; font-size: 15px; }
  .quick .consent { font-size: 12.5px; line-height: 1.4; margin: 2px 0 4px; } .quick .btn { padding: 12px 20px; } .quick .quick-msg { min-height: 14px; }
  .hh-copy h1 { font-size: clamp(38px, 4.2vw, 68px); }
  .stats-band .stats li { padding-top: 24px; padding-bottom: 22px; }
}

/* V29 — home: the Nosotros block is inset with white space all round, so its photo never touches the dark band above (Nicolas: "same two images against each other") */
.about.inset { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin: clamp(64px, 6vw, 112px) auto; border: 1px solid var(--line); min-height: 540px; }
@media (max-width: 1020px) { .about.inset { margin: 48px auto; } }

/* V29 — the first screen is exactly one window tall on laptops/desktops: header + hero + figures band. Nothing of the next section peeks in. */
@media (min-width: 1021px) and (min-height: 640px) {
  .first-screen { min-height: calc(100vh - var(--header-h, 85px)); min-height: calc(100svh - var(--header-h, 85px)); display: flex; flex-direction: column; }
  .first-screen .home-hero { flex: 1 1 auto; display: flex; align-items: center; }
  .first-screen .home-hero > .wrap { flex: 0 0 auto; width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 0 auto; }
  .first-screen .stats-band { flex: 0 0 auto; }
}
@media (max-width: 1300px) { :root { --header-h: 71px; } }

/* V30 — industry photo tiles (after htochile.cl; black-to-orange gradient instead of their green) */
.ind-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 28px); }
.ind-tile { position: relative; display: flex; align-items: flex-end; aspect-ratio: 1 / 1; max-height: 520px; width: 100%; border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--white);
  background: #1a1a1a center/cover no-repeat; box-shadow: 0 18px 40px -22px rgba(0,0,0,.55); transition: transform .25s ease, box-shadow .25s ease; }
.ind-tile.nophoto { background: radial-gradient(120% 90% at 80% 10%, #3a3a3a 0%, #1b1b1b 55%, #0e0e0e 100%); }
.ind-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 28%, rgba(0,0,0,.55) 58%, rgba(14,8,0,.92) 82%, rgba(120,62,0,.92) 100%); transition: opacity .25s ease; }
.ind-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.6) 50%, rgba(160,84,0,.9) 100%); opacity: 0; transition: opacity .25s ease; }
.ind-tile:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -22px rgba(0,0,0,.65); } .ind-tile:hover::after { opacity: 1; }
.ind-tile > div { position: relative; z-index: 1; padding: clamp(20px, 1.8vw, 30px); }
.ind-tile h3 { color: var(--white); font-size: clamp(22px, 1.7vw, 28px); font-weight: 700; margin: 0 0 8px; }
.ind-tile p { color: rgba(255,255,255,.86); font-size: 15px; line-height: 1.45; margin: 0 0 14px; max-width: 46ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ind-cta { color: var(--accent); font-weight: 600; font-size: 15px; } .ind-cta span { display: inline-block; transition: transform .2s ease; } .ind-tile:hover .ind-cta span { transform: translateX(4px); }
@media (max-width: 1020px) { .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ind-grid { grid-template-columns: minmax(0, 1fr); } .ind-tile { aspect-ratio: 4 / 3; } }

/* V31 — home hero background video */
.home-hero .hero-video { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; animation: none; background: #0d0d0d; }
.home-hero::before { background: linear-gradient(100deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.52) 48%, rgba(0,0,0,.30) 100%), linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%), radial-gradient(60% 80% at 82% 38%, rgba(255,159,28,.14), transparent 70%); }

/* V32 — new clip is a top-down view with no sky: centre it */
.home-hero .hero-video { object-position: 50% 50%; }

/* V32 — service photo, same frame as the blank slots */
.svc-col .svc-photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 35% 40%; border-radius: var(--radius); margin-bottom: 22px; }

/* V34 — one headline size for all six tiles of the figures bar (Nicolas: "the font size is not consistent"). Tile widths follow their content. */
.stats-band .stats { --stat-size: clamp(24px, 2.05vw, 36px); grid-template-columns: repeat(6, auto); }
.stats-band .stats b, .stats-band .stats li.word b { font-size: var(--stat-size); line-height: 1.1; min-height: 0; height: auto; display: block; letter-spacing: -.015em; white-space: nowrap; }
.stats-band .stats li > span { margin-top: 8px; }
@media (max-width: 1020px) { .stats-band .stats { --stat-size: 26px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .stats-band .stats li.word b { white-space: normal; } }
@media (max-width: 640px) { .stats-band .stats { --stat-size: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* V35 — orange band: no second button. "Contáctenos" itself is the link: large, grows on hover, the whole band is clickable. */
.band { padding: 0; }
.band-link { display: block; padding: clamp(48px, 4.6vw, 80px) 0; color: var(--ink); text-decoration: none; }
.band .band-link .wrap { display: block; }
.band h2 { font-size: clamp(36px, 4.2vw, 68px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 12px; transform-origin: left center; transition: transform .25s ease; display: inline-block; }
.band h2 span { display: inline-block; transition: transform .25s ease; }
.band p { font-size: clamp(17px, 1.3vw, 21px); }
.band-link:hover h2, .band-link:focus-visible h2 { transform: scale(1.06); } .band-link:hover h2 span, .band-link:focus-visible h2 span { transform: translateX(10px); }
.band-link:focus-visible { outline: 3px solid var(--ink); outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) { .band h2, .band h2 span { transition: none; } }

/* V36 — header: WhatsApp by division + Cotizar */
.nav .wa-menu { position: relative; margin-left: auto; align-self: center; }
.nav .wa-menu + a.btn { margin-left: 12px; }
.wa-btn { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); background: var(--white); border: 2px solid #d9d9d9; border-radius: var(--radius); padding: 10px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.wa-btn:hover, .wa-menu.open .wa-btn { border-color: #25D366; box-shadow: 0 6px 18px -8px rgba(37,211,102,.7); }
.wa-ico { width: 22px; height: 22px; color: #25D366; flex: none; }
.wa-pop { display: none; position: absolute; right: 0; top: calc(100% + 12px); width: 340px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 50px -18px rgba(0,0,0,.35); padding: 8px; z-index: 60; }
.wa-menu.open .wa-pop { display: block; }
.wa-pop::before { content: ""; position: absolute; right: 36px; top: -7px; width: 12px; height: 12px; background: var(--white); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.wa-pop a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.wa-pop a:hover, .wa-pop a:focus-visible { background: #f1fbf5; }
.wa-pop a .wa-ico { width: 30px; height: 30px; }
.wa-pop a span { display: flex; flex-direction: column; line-height: 1.25; flex: 1; } .wa-pop a b { font-size: 16px; } .wa-pop a small { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wa-pop a i { font-style: normal; color: var(--muted); transition: transform .15s; } .wa-pop a:hover i { transform: translateX(4px); color: var(--ink); }
@media (max-width: 1300px) {
  .nav .wa-menu { margin: 14px 0 0; align-self: stretch; } .wa-btn { width: 100%; justify-content: center; }
  .wa-pop { position: static; width: auto; box-shadow: none; margin-top: 8px; } .wa-pop::before { display: none; } .nav .wa-menu + a.btn { margin-left: 0; }
}
/* V36 — brand logos: Marcas dropdown and brand page headers */
.flyout a.brand-item { padding: 6px 18px; } .flyout a.brand-item:hover, .flyout a.brand-item:focus-visible { background: transparent; }
.brand-chip { display: flex; align-items: center; justify-content: center; height: 46px; width: 100%; background: var(--white); border-radius: 6px; padding: 0 16px; transition: transform .15s, box-shadow .15s; }
.brand-item:hover .brand-chip, .brand-item:focus-visible .brand-chip { transform: translateX(4px); box-shadow: 0 0 0 2px var(--accent); }
.brand-chip img { max-height: 24px; max-width: 150px; width: auto; height: auto; display: block; } .brand-chip .wordmark { font-weight: 800; letter-spacing: .04em; color: var(--ink); font-size: 17px; }
.brand-plate { display: inline-flex; align-items: center; justify-content: center; background: var(--white); border-radius: 10px; padding: 18px 30px; min-height: 92px; box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); }
.brand-plate img { max-height: 56px; max-width: min(320px, 60vw); width: auto; height: auto; display: block; } .brand-plate .wordmark { color: var(--ink); font-size: 40px; font-weight: 800; letter-spacing: .04em; }
/* V36 — Automotriz: brands in one strip, product lines right below; Servicios: five components in one row */
.logo-wall.n7.strip { grid-template-columns: repeat(7, minmax(0, 1fr)); } .logo-wall.n7.strip .logo-cell { grid-column: auto; min-height: 120px; } .logo-wall.n7.strip .logo-cell img { max-width: 78% !important; }
.auto-top { padding-top: clamp(36px, 3.4vw, 56px); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .inplant + .g5 { margin-top: clamp(36px, 3.4vw, 56px); }
.svc-col .svc-photo { object-position: 50% 40%; }
@media (max-width: 1020px) { .logo-wall.n7.strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .logo-wall.n7.strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g5 { grid-template-columns: minmax(0, 1fr); } }
/* V36 — Automotriz: compact header so the brands strip and the product lines show on the first screen; home headline on three lines */
.subnav + .hero .wrap { padding-top: 34px; padding-bottom: 38px; } .subnav + .hero p { margin-bottom: 20px; font-size: 18px; } .subnav + .hero h1 { font-size: clamp(32px, 3vw, 46px); margin-bottom: 10px; }
.auto-top { padding-top: 30px; } .auto-top .section-head { margin-bottom: 18px; } .auto-top .section-head h2 { font-size: clamp(24px, 2vw, 32px); }
.logo-wall.n7.strip .logo-cell { min-height: 104px; }
.hh-copy h1 { max-width: 19ch; font-size: clamp(36px, 3.7vw, 62px); }

/* V37 — Servicios: InPlant is the umbrella; its eight services are one uniform grid (4 x 2) */
.inplant + .svc-eight { margin-top: clamp(40px, 3.8vw, 64px); row-gap: clamp(36px, 3.2vw, 52px); }
.svc-col .svc-photo.cutout { object-fit: contain; background: var(--white); border: 1px solid var(--line); padding: 14px; }
.svc-col .blank-frame { background: var(--wash); }
@media (max-width: 1020px) { .svc-eight { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .svc-eight { grid-template-columns: minmax(0, 1fr); } }
/* V39 — wheel-loader clip (mirrored): frame it low so the strip of sky stays out; balance the headline's line breaks */
.home-hero .hero-video { object-position: 50% 88%; }
.hh-copy h1 { text-wrap: balance; max-width: 20ch; }
/* V40 — the loader is NOT mirrored any more: the machine is on the left, under the headline. Lighter, more even veil so the machine stays visible; a soft shadow keeps the text readable. */
.home-hero::before { background: linear-gradient(100deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.48) 50%, rgba(0,0,0,.40) 100%), linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 28%); }
.hh-copy h1, .hh-copy p { text-shadow: 0 2px 18px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.55); }

/* V40 — Servicios: the named logo "InPlant Solutions: white background" is the visual of the InPlant block, large, on a white panel */
.inplant { align-items: center; }
.inplant-logo { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: clamp(36px, 4.4vw, 84px) clamp(28px, 3.6vw, 64px); display: flex; align-items: center; justify-content: center; min-height: clamp(280px, 26vw, 440px);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.9) inset; }
.inplant-logo img { width: 100%; max-width: 640px; height: auto; display: block; }

/* V41 — Servicios: the InPlant Solutions logo IS the heading; the description runs full width, the same width as the four service columns below */
.inplant-head { margin-bottom: clamp(40px, 3.8vw, 64px); }
.inplant-brand { margin: 0 0 clamp(22px, 2.2vw, 34px); line-height: 0; }
.inplant-brand img { width: min(100%, 560px); height: auto; display: block; }
.inplant-head .story-text { max-width: none; }
.inplant-head + .svc-eight { margin-top: 0; }

/* V42 — hydraulic hoses: pressure tiles (open on click to the series cards) and brand cards */
.ptiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 28px); margin-bottom: 22px; }
.ptile { border: 1px solid var(--line); border-radius: 18px; background: var(--white); overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.ptile:hover, .ptile[open] { border-color: var(--accent); box-shadow: 0 24px 50px -30px rgba(0,0,0,.5); }
.ptile summary { list-style: none; cursor: pointer; padding: clamp(24px, 2.2vw, 36px); display: flex; flex-direction: column; min-height: 100%; }
.ptile summary::-webkit-details-marker { display: none; }
.ptile-band { display: inline-block; align-self: flex-start; background: var(--ink); color: var(--white); font-size: 13px; font-weight: 600; letter-spacing: .03em; padding: 6px 12px; border-radius: 6px; margin-bottom: 18px; }
.ptile h3 { font-size: clamp(24px, 2vw, 32px); margin: 0 0 10px; }
.ptile summary p { margin: 0 0 22px; color: var(--text); font-size: 16px; line-height: 1.5; }
.ptile-more { margin-top: auto; color: var(--ink); font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--accent); align-self: flex-start; padding-bottom: 2px; }
.ptile-more i { font-style: normal; display: inline-block; margin-left: 8px; transition: transform .2s; } .ptile[open] .ptile-more i { transform: rotate(45deg); }
.ptile[open] { grid-column: 1 / -1; }
.ptile[open] summary { min-height: 0; padding-bottom: 12px; } .ptile[open] summary p { margin-bottom: 14px; }
.ptile-body { padding: 8px clamp(24px, 2.2vw, 36px) clamp(24px, 2.2vw, 36px); border-top: 1px solid var(--line); }
.brand-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 28px); }
.brand-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px, 2.4vw, 40px); text-decoration: none; color: var(--text); transition: box-shadow .2s, border-color .2s; }
.brand-card:hover { border-color: var(--accent); box-shadow: 0 24px 50px -30px rgba(0,0,0,.5); }
.brand-card-logo { height: 72px; display: flex; align-items: center; margin-bottom: 20px; } .brand-card-logo img { max-height: 52px; max-width: 240px; width: auto; height: auto; }
.brand-card p { font-size: 16px; line-height: 1.6; margin: 0 0 18px; } .brand-card .more { margin-top: auto; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--accent); align-self: flex-start; padding-bottom: 2px; }
@media (max-width: 1020px) { .ptiles { grid-template-columns: minmax(0, 1fr); } .brand-row { grid-template-columns: minmax(0, 1fr); } }

/* V43 — hydraulic hoses, commercial first view: pressure-class cards with Cotizar, brand blocks with featured products, technical details behind a toggle */
.pclasses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 28px); }
.pclass { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: clamp(22px, 2vw, 32px); display: flex; flex-direction: column; transition: box-shadow .2s, border-color .2s; }
.pclass:hover { border-color: var(--accent); box-shadow: 0 24px 50px -30px rgba(0,0,0,.5); }
.pclass-img { height: 120px; display: flex; align-items: center; margin-bottom: 18px; } .pclass-img img { max-height: 100%; max-width: 100%; width: auto; height: auto; }
.pclass h3 { font-size: clamp(24px, 2vw, 32px); margin: 0 0 8px; } .pclass p { margin: 0 0 22px; font-size: 16px; line-height: 1.5; }
.cta-row { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.cta-row .more { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--accent); padding-bottom: 2px; text-decoration: none; margin-left: 6px; }
.brand-block { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px, 2.4vw, 40px); display: flex; flex-direction: column; }
.brand-block p { font-size: 16px; line-height: 1.6; margin: 0 0 18px; } .brand-block h4 { font-size: 15px; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.brand-block .ticks { margin: 0 0 24px; } .brand-block .ticks li { font-size: 16px; }
.tech { border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.tech summary { list-style: none; cursor: pointer; padding: clamp(24px, 2.4vw, 40px); } .tech summary::-webkit-details-marker { display: none; }
.tech summary h2 { margin: 0 0 8px; font-size: clamp(22px, 1.8vw, 30px); } .tech summary p { margin: 0 0 16px; color: var(--text); }
.tech[open] .ptile-more i { transform: rotate(45deg); }
.tech-body { padding: 0 clamp(24px, 2.4vw, 40px) clamp(24px, 2.4vw, 40px); border-top: 1px solid var(--line); }
.tech-h { font-size: 22px; margin: 32px 0 16px; } .tech-h small { font-size: 15px; font-weight: 400; color: var(--muted); margin-left: 10px; }
.tech-body .lib { margin-top: 36px; }
@media (max-width: 1020px) { .pclasses { grid-template-columns: minmax(0, 1fr); } }

/* V45 — commercial template for every product line */
.pclasses.five { grid-template-columns: repeat(5, minmax(0, 1fr)); } .pclasses.five .pclass { padding: 20px; } .pclasses.five .pclass h3 { font-size: 20px; } .pclasses.five .pclass p { font-size: 15px; } .pclasses.five .pclass-img { height: 84px; }
.pclasses.five .cta-row .btn { font-size: 14px; padding: 11px 14px; }
.brand-row.one { grid-template-columns: minmax(0, 1fr); }
.wip-box { border: 1px solid var(--line); border-radius: 18px; padding: clamp(28px, 3vw, 48px); background: var(--white); max-width: 1100px; margin: 0 auto; }   /* 28/09 (Nicolas): empty-space sweep — centred, 1100 px */
.wip-box .ptile-band { background: var(--accent); color: var(--ink); } .wip-box h2 { margin: 6px 0 10px; } .wip-box .ticks { margin: 18px 0 26px; }
@media (max-width: 1300px) { .pclasses.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1020px) { .pclasses.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .pclasses.five { grid-template-columns: minmax(0, 1fr); } }

/* V46 — home headline on two lines ("del Perú" removed); subtext larger, on two lines */
.hh-copy h1 { max-width: 15ch; font-size: clamp(38px, 3.9vw, 66px); text-wrap: balance; }
.hh-copy p { font-size: clamp(20px, 1.75vw, 30px); line-height: 1.3; max-width: 26ch; color: rgba(255,255,255,.95); }
.hh-copy h1 { max-width: 24ch; font-size: clamp(36px, 3.5vw, 60px); }
.hh-copy p { max-width: 36ch; font-size: clamp(19px, 1.55vw, 27px); }

/* V47 — his Envato photos in place; page headers with a photo get a stronger left-to-right gradient so the title always reads */
.hero.small::before { background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.25) 100%); }
.ind-tile#pesca-industrial { background-position: 50% 50%; }

/* V48 — photo headers: taller band so the subject has room; focal point set per photo (background-position inline) */
.hero.small.photo .wrap { padding-top: clamp(96px, 8.6vw, 150px); padding-bottom: clamp(96px, 8.6vw, 150px); }
.hero.small.photo::before { background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 46%, rgba(0,0,0,.12) 100%), linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 40%); }

/* V49 — industry tiles are 4:3, not square: a landscape photo keeps its subject whole (the boat did not fit a square) */
.ind-tile { aspect-ratio: 4 / 3; max-height: none; }

/* V50 — no arrows anywhere; footer WhatsApp = the header button */
.footer .wa-foot { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 14px; font-size: 15px; font-weight: 600; color: var(--white); background: transparent; border: 2px solid rgba(255,255,255,.28); border-radius: var(--radius); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.footer .wa-foot:hover, .footer .wa-foot:focus-visible { border-color: #25D366; box-shadow: 0 6px 18px -8px rgba(37,211,102,.7); color: var(--white); }
.footer .wa-foot .wa-ico { width: 20px; height: 20px; }
.wa-pop a i { display: none; }
.subnav + .hero.photo .wrap { padding-top: 34px; padding-bottom: 38px; }   /* V50: the Automotriz header keeps its compact size so the brands stay on the first screen */

/* V52 — Servicios: thin plain header */
body[data-page="servicios.html"] .hero.plain p { margin-bottom: 0; }
/* V53 — Servicios: the plain header uses the full width (title on one line, text on two); the InPlant logo has equal space above and below */
body[data-page="servicios.html"] .hero.plain p { max-width: none; }
body[data-page="servicios.html"] #sistema-integral-inplant { padding-top: 40px; }
body[data-page="servicios.html"] .inplant-brand { margin: 0 0 40px; }

/* V55 — page layout variables (editable per page from the edit panel; fallbacks = the design as built) */
.hero .wrap { padding-top: var(--p-hero-pad, 120px); padding-bottom: var(--p-hero-pad, 120px); }
.hero.small .wrap { padding-top: var(--p-hero-pad, 76px); padding-bottom: var(--p-hero-pad, 76px); }
.hero.small.photo .wrap { padding-top: var(--p-hero-pad, clamp(96px, 8.6vw, 150px)); padding-bottom: var(--p-hero-pad, clamp(96px, 8.6vw, 150px)); }
.hero:not(.home-hero) h1 { font-size: var(--p-hero-h1, clamp(34px, 5vw, 58px)); }
.section { padding-top: var(--p-section-pad, 88px); padding-bottom: var(--p-section-pad, 88px); }
.section-head { margin-bottom: var(--p-head-gap, 44px); }
body[data-page="servicios.html"] #sistema-integral-inplant { padding-top: var(--p-logo-top, 64px); }
body[data-page="servicios.html"] .inplant-brand { margin: 0 0 var(--p-logo-bottom, 48px); }
.inplant-brand img { width: var(--p-logo-w, min(100%, 560px)); }
.ind-tile { aspect-ratio: var(--p-tile-ratio, 4 / 3); }
.svc-col .svc-photo, .svc-col .blank-frame { aspect-ratio: var(--p-card-ratio, 16 / 10); }
.pclass-img { height: var(--p-pimg-h, 120px); }

/* V56 — Piping page layout; Marcas as commercial blocks */
.chips { list-style: none; margin: 0 0 36px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; font-weight: 500; background: var(--white); }
.art-img.wide img { width: 100%; border-radius: 18px; }
.art-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; } .art-pair img { width: 100%; border-radius: 18px; }
.adv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 3vw, 56px); } .adv h3 { font-size: 22px; margin: 18px 0 8px; }
.section.dark { background: #0d0d0d; color: var(--white); } .section.dark h2, .section.dark .story-text, .section.dark .ticks li { color: var(--white); } .section.dark .ticks li { border-color: rgba(255,255,255,.18); }
.tiempo { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 40px; align-items: start; margin-bottom: 32px; } .art-img.badge { margin: 0; } .art-img.badge img { width: 100%; }
.art-img.certs { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 28px 40px; margin: 0 0 36px; } .art-img.certs img { width: 100%; max-width: 900px; }
.prod-row h2 { font-size: clamp(24px, 2.2vw, 34px); }
.brand-row { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .brand-row > span { display: contents; }
@media (max-width: 1020px) { .adv-grid, .art-pair, .tiempo { grid-template-columns: minmax(0, 1fr); } }

/* V56 — Nuestra historia: the deck's closing image fills the right side (his ruling: no empty corner) */
#nuestra-historia .story-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 72px); align-items: start; }
#nuestra-historia .story-grid > h2 { grid-column: 1 / -1; }
#nuestra-historia .historia-img { margin: 0; align-self: stretch; } #nuestra-historia .historia-img img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; object-position: 55% 50%; border-radius: 18px; }
#nuestra-historia .letter, #nuestra-historia .values-title, #nuestra-historia .pillars { grid-column: 1 / -1; }
@media (max-width: 1020px) { #nuestra-historia .story-grid { grid-template-columns: minmax(0, 1fr); } #nuestra-historia .historia-img img { min-height: 260px; } }

/* V56b — Piping: no half-empty rows. Text spans the width; where there is a photo it sits BESIDE the text, never below it with air to the right. */
body[data-page="productos-aire-comprimido.html"] .story-text, body[data-page="productos-aire-comprimido.html"] .art-cap, body[data-page="productos-aire-comprimido.html"] .section-head { max-width: none; }
.adv-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 64px); align-items: start; }
.adv-photos { display: grid; gap: 20px; position: sticky; top: 100px; } .adv-photos img { width: 100%; border-radius: 18px; } .adv-photos figure { margin: 0; }
.ener-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(28px, 3.4vw, 64px); align-items: center; } .ener-layout .art-img.wide { margin: 0; }
.tiempo { grid-template-columns: minmax(0, 1fr) 260px; }
.prod-row .story-text { max-width: none; }
@media (max-width: 1020px) { .adv-layout, .ener-layout { grid-template-columns: minmax(0, 1fr); } .adv-photos { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* V57 — one header height for every inner page (cohesion): photo or not, the band is the same size; the first section starts on the first screen */
.hero.small .wrap, .hero.small.photo .wrap { padding-top: var(--p-hero-pad, 64px); padding-bottom: var(--p-hero-pad, 64px); }
.hero.small.photo { min-height: 0; }
.hero.small p { margin-bottom: 24px; }
/* V58 — the Transair infographic is the one image meant to be READ: full content width, text above it (his ruling) */
.ener-layout { grid-template-columns: minmax(0, 1fr); }
.ener-layout > div { columns: 2; column-gap: clamp(32px, 4vw, 72px); } .ener-layout > div h2 { column-span: all; } .ener-layout .ticks { break-inside: avoid; }
.ener-layout .art-img.wide { margin-top: clamp(32px, 3.4vw, 56px); }
@media (max-width: 1020px) { .ener-layout > div { columns: 1; } }
/* V58 — Piping: the certification logos fill the plate; the video fills the width */
.art-img.certs { padding: clamp(24px, 2.6vw, 44px) clamp(24px, 3vw, 56px); } .art-img.certs img { max-width: none; width: 100%; }
body[data-page="productos-aire-comprimido.html"] .video { max-width: none; width: 100%; }

/* V60 — every inner header the same height: the band has a fixed minimum so a page without a subtitle is not shorter */
.hero.small .wrap { min-height: 300px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }

/* V60b — ONE band height for every inner page: fixed 360px (editable per page), text centred vertically; the text never changes the height */
.hero.small .wrap, .hero.small.photo .wrap { min-height: var(--p-hero-h, 360px); height: var(--p-hero-h, 360px); padding-top: 32px; padding-bottom: 32px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; overflow: hidden; }
.hero.small h1 { font-size: clamp(32px, 3.4vw, 54px); margin-bottom: 12px; } .hero.small p { font-size: 18px; margin-bottom: 18px; max-width: 760px; } .hero.small .crumbs { margin-bottom: 10px; }
.hero.small .actions .btn { padding: 11px 22px; }

/* V61 — Servicios is NOT an exception: same fixed band as every other inner page */
/* V62 — every embedded video is centred (his ruling, Servicios PTS video sat left) */
.video { margin-left: auto; margin-right: auto; }

/* V63 — Productos cards with an example image on top */
.card.pic { padding-top: 0; overflow: hidden; }
.card-pic { margin: 0 -28px 22px; aspect-ratio: 16 / 9; background: var(--wash); border-bottom: 1px solid var(--line); }
.card-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-pic.cutout { background: var(--white); padding: 18px 24px; box-sizing: border-box; } .card-pic.cutout img { object-fit: contain; }
/* V63b — every card picture the same fixed height, so the nine cards line up */
.card-pic { aspect-ratio: auto; height: 240px; }
.card-pic.cutout { padding: 20px 28px; }
/* 27-09-2026 (Nicolas): Mangueras hidráulicas — hoses cut on the right sit 20px from the card edge, the same gap as the cut-off hoses above the rule on Mangueras industriales */
#mangueras-hidraulicas .card-pic.cutout { padding-right: 20px; } #mangueras-hidraulicas .card-pic.cutout img { object-position: 100% 50% !important; }
/* 27-09-2026 (Nicolas): Conexiones y adaptadores — photo 10% smaller */
#conexiones-y-adaptadores .card-pic.cutout img { transform: scale(.8); }   /* 27-09-2026: 10% smaller, then a little smaller again */
#aire-comprimido-transair .card-pic.cutout img { transform: scale(.85); }   /* 27-09-2026 (Nicolas): Parker Transair logo a little smaller */

/* V63c — Automotriz brands: the home-page wall (two rows, big logos, 'Ver productos' on hover), not the one-row strip */

/* V64 — four values, one per column */
.pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 48px); }
@media (max-width: 1020px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .pillars { grid-template-columns: minmax(0, 1fr); } }

/* V65 — back to three values while he picks the wording */
.pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* V66 — values: lead line + intro + six pillars in two rows of three */
.values-lead { margin: 0 0 14px; } .values-intro { margin-bottom: clamp(32px, 3vw, 52px); max-width: 1080px; }
.pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(36px, 3.4vw, 56px); }

/* V67 — values: lead line and its paragraph stacked, full width, close together; then the three pillars */
#nuestra-historia .values-lead, #nuestra-historia .values-intro { grid-column: 1 / -1; }
.values-lead { margin: 0 0 12px; } .values-intro { margin: 0 0 clamp(36px, 3.4vw, 56px); max-width: none; }

/* V70 — brand blocks: five in one row on Marcas; "Productos destacados" starts at the same height in every card (subgrid rows); no dashes; black, larger heading */
.brand-row { grid-template-rows: auto; align-items: stretch; }
.brand-row.five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 20px); }
.brand-block { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; padding: clamp(20px, 1.8vw, 28px); align-content: start; }
.brand-block > * { align-self: start; } .brand-block .cta-row { align-self: end; margin-top: 12px; }
.brand-row.five .brand-block p { font-size: 15px; } .brand-row.five .brand-card-logo img { max-width: 100%; } .brand-row.five .cta-row .btn { font-size: 14px; padding: 11px 12px; }
.brand-block h4 { font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 700; margin: 8px 0 10px; }
.brand-block .feats { list-style: none; margin: 0 0 22px; padding: 0; } .brand-block .feats li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--ink); }
.brand-row.five .brand-block .feats li { font-size: 15px; }
@media (max-width: 1300px) { .brand-row.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1020px) { .brand-row.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .brand-row.five { grid-template-columns: minmax(0, 1fr); } }

/* V71 — Nuestra historia: no subtitle; the opening paragraph a little bigger */
.hist-lead, #nuestra-historia .story-text { font-size: clamp(21px, 1.55vw, 26px); }

/* V73 — Nuestra historia: the truck photo shown WHOLE (own proportions, no crop), centred against the text */
#nuestra-historia .historia-img { align-self: center; } #nuestra-historia .historia-img img { height: auto; min-height: 0; object-fit: contain; aspect-ratio: 1800 / 1004; }

/* V76 Piping: text on the left, photos on the right, in every block (his ruling) */
.prod-row.text-first { grid-template-columns: minmax(0, 1fr) minmax(240px, 400px); }
.pip-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.pip-split .art-img { margin: 0; } .pip-split .art-img img { width: 100%; border-radius: 18px; }
.pip-split .chips { margin-top: 24px; }
.pip-photos { display: grid; gap: 20px; } .pip-photos .art-img.badge { max-width: 260px; }
@media (max-width: 1020px) { .pip-split, .prod-row.text-first { grid-template-columns: minmax(0, 1fr); } }

/* V77 Piping Ventajas: one text column with even spacing between groups; the two photos stay fixed on the right while the text scrolls (his ruling) */
.adv-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.adv + .adv { margin-top: 36px; }
.adv h3 { margin: 0 0 6px; }
.adv .ticks { margin: 0; }

/* V78: the photo beside long text stays in view while the text scrolls */
.pip-split > .art-img, .pip-photos { position: sticky; top: 110px; }
@media (max-width: 1020px) { .pip-split > .art-img, .pip-photos { position: static; } }

/* V79 Piping Sectores: full page width for text and chips, photo below at full width (his ruling: side-by-side was cramped) */
.pip-sect { margin-top: clamp(40px, 4vw, 64px); } .pip-sect .story-text { max-width: none; } .pip-sect .chips { margin: 24px 0 clamp(32px, 3vw, 48px); }

/* V83 catalogue pop-up (Fernando) */
.tech-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 36px 0; }
.tech-cta h2 { margin: 0 0 8px; } .tech-cta p { margin: 0; font-size: 18px; }
.btn.ghost { background: transparent; border: 2px solid var(--ink); color: var(--ink); cursor: pointer; font: inherit; font-weight: 600; }
.cat-dialog { border: 0; border-radius: 18px; padding: 40px; width: min(640px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.cat-dialog::backdrop { background: rgba(0,0,0,.55); }
.cat-dialog h2 { margin: 0 0 20px; }
.cat-list { list-style: none; margin: 0; padding: 0; } .cat-list li + li { margin-top: 10px; }
.cat-list .pdf-link { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; }
.cat-list .pdf-link:hover { border-color: var(--accent); } .cat-list small { margin-left: auto; color: var(--ink); opacity: .7; }
.cat-close { position: absolute; top: 12px; right: 16px; border: 0; background: none; font-size: 30px; line-height: 1; cursor: pointer; color: var(--ink); }
.cat-list .pdf-link { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.cat-list small { margin-left: 0; white-space: nowrap; }
.tech-cta p { color: var(--ink); }
@media (max-width: 640px) { .cat-list .pdf-link { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* V85 Monitoreo / Equipos */
.pclasses.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1020px) { .pclasses.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pclasses.four { grid-template-columns: minmax(0, 1fr); } }
.pclass-prods { font-weight: 600; color: var(--ink); margin-top: auto; }
.svc-box { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; background: var(--white, #fff); border-radius: 18px; padding: clamp(28px, 3vw, 48px); }
.svc-box h2 { margin: 0 0 10px; } .svc-box p { margin: 0; max-width: 760px; font-size: 18px; color: var(--ink); }

/* V85 Piping Ahorro de Energía: one text column, light background, like the rest of the page (his ruling) */
.ener-layout.one-col > div { columns: 1; max-width: none; } .ener-layout.one-col .story-text { max-width: none; }
.pclasses.four .pclass { padding: 22px; } .pclasses.four .btn { padding-left: 14px; padding-right: 14px; font-size: 14px; }
.pclass p:has(+ .pclass-prods) { min-height: 6.8em; }   /* product names on one line across the row */

/* V86: square corners on every image of Piping and Nosotros (his ruling: no soft edges) */
body[data-page="productos-aire-comprimido.html"] :is(img, video, figure, .prod-img, .art-img, iframe),
body[data-page="nosotros.html"] :is(img, video, figure, .prod-img, .art-img, iframe) { border-radius: 0 !important; }

/* V87: Contix-logo edge on the photos of Piping and Nosotros: white line, then orange (his idea). Logos (certifications) excluded. */
/* V89: the orange frame was dropped (his ruling); square edges stay */
body[data-page="productos-aire-comprimido.html"] .certs img { box-shadow: none; }

/* V88 Piping: Parker | Transair logos above the intro */
.pip-logos { display: flex; align-items: center; gap: 28px; margin: 0 0 clamp(36px, 3.4vw, 52px); }
.pip-logos img { height: 46px; width: auto; box-shadow: none !important; } .pip-logos img[alt="Parker"] { height: 38px; }
.pip-logos span { width: 1px; height: 52px; background: var(--ink); opacity: .35; }

/* V88: no sticky photo beside text on Piping (his ruling: not enough text for the effect) */
.pip-split > .art-img, .pip-photos, .adv-photos { position: static !important; }
.pip-logos img { height: 52px !important; max-width: 100%; object-fit: contain; object-position: left center; }
/* V88: his YouTube video at the bottom of Piping, 16:9, same Contix edge as the other media */
.yt { margin-top: 40px; aspect-ratio: 16 / 9; } .yt iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 1300px) { .pclasses.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pclasses.four { grid-template-columns: minmax(0, 1fr); } }

/* V89 (Fernando) */
.pclass-reinf { font-size: 15px; color: var(--ink); margin: 0 0 18px; } .pclass-reinf span { display: block; font-weight: 600; }
.pclass-img.tall { height: 150px; justify-content: center; } .pclass-img.tall img { max-height: 100%; }
.inplant-box { display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); flex-wrap: wrap; background: #0d0d0d; color: var(--white); border-radius: 18px; padding: clamp(32px, 4vw, 56px); }
.inplant-box .inplant-logo { width: clamp(220px, 24vw, 330px); height: auto; }
.inplant-box p { margin: 0 0 24px; font-size: clamp(17px, 1.3vw, 20px); color: var(--white); max-width: 760px; }
.btn.big { font-size: 18px; padding: 18px 30px; }

/* V90 brand pages, one standard (Fernando) */
/* 28-09-2026 (Nicolas, "kill the dead space on the right"): the intro runs the full width of the page, a size larger — the same
   fix as the Productos section heads of 27-09 (the 980px cap left 700px empty at 1920 wide). Bold = the facts, as on Polyhose. */
.brand-intro p { font-size: clamp(18px, 1.75vw, 26px); line-height: 1.5; max-width: none; margin: 0 0 20px; }
.brand-intro p:last-of-type { margin-bottom: 0; }
.brand-intro p strong { color: #000; font-weight: 600; }
.brand-intro .cta-row { margin-top: 28px; }
/* 28-09-2026 (Nicolas): the two-paragraph facts intros (Parker, Alfagomma) must sit on the first screen with air below them. At his
   window (1512 x 815) the 26px size ended 28px above the fold with 3+3 lines; 22px gives 2+2 lines and 130px of air (measured 26/24/23/22/21/20).
   Fluid: 1.45vw, 17-22px. The one-paragraph brand pages keep the 18-26px rule above; Polyhose keeps its own award layout. */
.brand-facts .brand-intro p { font-size: clamp(17.5px, 1.5vw, 22.7px); line-height: 1.5; }   /* +3 % (his ask, 28-09): 22.7px keeps 2+2 lines at 1512 wide; 23px would flip Alfagomma to 3+3 */
.btn.wa-link { display: inline-flex; align-items: center; gap: 10px; background: #25d366; color: #0d0d0d; }
.btn.wa-link svg { width: 20px; height: 20px; }

/* V91 (Fernando): automotive pages and the segmented library */
.brand-row.short { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.brand-block.short { display: block; padding: 24px; } .brand-block.short p { font-size: 15px; margin: 12px 0 16px; }
.lib-cat { font-size: 17px; margin: 22px 0 10px; }
@media (max-width: 1020px) { .brand-row.short { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .brand-row.short { grid-template-columns: minmax(0, 1fr); } }

/* V94 (Fernando): the contact button opens the three WhatsApp options, in the style of the header button */
.wa-cta { position: relative; display: inline-block; }
.wa-cta > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; }
.wa-cta > summary::-webkit-details-marker { display: none; }
.wa-cta-pop { position: absolute; z-index: 30; left: 0; top: calc(100% + 8px); width: min(320px, 78vw); background: var(--white, #fff); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.18); padding: 8px; }
.wa-cta-pop a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.wa-cta-pop a:hover { background: #f2f2f2; } .wa-cta-pop svg { width: 22px; height: 22px; flex: none; }
.wa-cta-pop b { display: block; font-size: 15px; } .wa-cta-pop small { font-size: 13px; opacity: .75; }
.wa-cta-mail { font-size: 14px; border-top: 1px solid var(--line); border-radius: 0 !important; margin-top: 4px; }
.brand-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1020px) { .brand-row.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .brand-row.three { grid-template-columns: minmax(0, 1fr); } }

/* V94 (Fernando): both WhatsApp buttons look like the one in the header — white pill, green logo */
.btn.wa-link, .wa-cta > summary.btn.wa-link {
  background: var(--white); color: var(--ink); border: 2px solid #d9d9d9; font-weight: 600;
}
.btn.wa-link:hover, .wa-cta[open] > summary.btn.wa-link { border-color: #25D366; box-shadow: 0 6px 18px -8px rgba(37,211,102,.7); }
.btn.wa-link svg, .wa-cta > summary svg { color: #25D366; width: 22px; height: 22px; flex: none; }
.wa-cta-pop a:hover { background: #f1fbf5; }

/* V95 (his ruling): the InPlant photo behind the block, darkened by a gradient so the text reads.
   On Monitoreo the logo is the title above the panel, not a white square. */
/* V96: the photo moved to the page header; the InPlant section is plain again */
.inplant-cta { display: block; }
.inplant-title { display: block; width: min(100%, 420px); height: auto; margin: 0 0 22px; }
.inplant-panel { position: relative; overflow: hidden; border-radius: 18px; padding: clamp(32px, 4vw, 56px); color: var(--white); background: #0d0d0d url(../img/inplant-bg.jpg) center/cover no-repeat; }
.inplant-panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,8,.92) 0%, rgba(8,8,8,.8) 55%, rgba(8,8,8,.35) 100%); }
.inplant-panel > * { position: relative; z-index: 1; }
.inplant-panel p { margin: 0 0 24px; font-size: clamp(17px, 1.3vw, 20px); color: var(--white); max-width: 760px; }

/* V98: video behind an inner-page header (his mine-drilling clip on División Industrial) */
.hero.small .hero-bg.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero.small.photo { position: relative; } .hero.small > .wrap { position: relative; z-index: 1; }

/* V99 (his ruling): an industry tile asks how you want to be helped — WhatsApp or the quote form */
.ind-pick { position: relative; }
.ind-pick > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.ind-pick > summary::-webkit-details-marker { display: none; }
.ind-pick-pop { position: absolute; z-index: 40; left: 0; bottom: calc(100% + 10px); width: min(330px, 74vw); background: var(--white, #fff); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 22px 60px rgba(0,0,0,.28); padding: 8px; }
.ind-pick-pop a { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.ind-pick-pop a:hover { background: #f1fbf5; } .ind-pick-pop svg { width: 22px; height: 22px; color: #25D366; flex: none; }
.ind-pick-pop b { display: block; font-size: 15px; } .ind-pick-pop small { font-size: 13px; opacity: .75; }

/* V101 (his ruling): on Servicios the photo sits to the right and the left side goes to solid black,
   so the text reads on black and the container and the truck stand out. */
body[data-page="servicios.html"] .hero.small.photo::before {
  background: linear-gradient(90deg, rgba(0,0,0,.97) 0%, rgba(0,0,0,.9) 16%, rgba(0,0,0,.74) 30%, rgba(0,0,0,.5) 45%, rgba(0,0,0,.28) 60%, rgba(0,0,0,.12) 78%, rgba(0,0,0,.02) 100%);
}
body[data-page="servicios.html"] .hero.small.photo h1 { max-width: 560px; }
body[data-page="servicios.html"] .hero.small.photo p { max-width: 620px; }

/* V103 (his ruling): the Parker | Transair lockup at twice the size */
.pip-logos img { height: 104px !important; }

/* ---- V105, his design pass ---- */
/* Piping · Sectores industriales: small photo tiles, four per row, three rows */
.sect-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 28px 0 clamp(32px, 3vw, 48px); }
.sect-tile { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #1b1b1b center/cover no-repeat; display: flex; align-items: flex-end; }
.sect-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1) 30%, rgba(0,0,0,.82) 100%); }
.sect-tile.nophoto { background: linear-gradient(150deg, #1b1b1b 0%, #2a2a2a 45%, var(--accent) 320%); }
.sect-tile span { position: relative; z-index: 1; color: var(--white); font-weight: 600; font-size: 15px; line-height: 1.25; padding: 14px; }
@media (max-width: 1020px) { .sect-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .sect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Piping: slightly smaller type and more air between the theme blocks */
body[data-page="productos-aire-comprimido.html"] .story-text,
body[data-page="productos-aire-comprimido.html"] .ticks li { font-size: clamp(15px, 1.05vw, 17px); }
body[data-page="productos-aire-comprimido.html"] .art-cap { font-size: clamp(16px, 1.15vw, 18px); }
body[data-page="productos-aire-comprimido.html"] .prod-row + .prod-row { margin-top: clamp(64px, 6vw, 110px); }
body[data-page="productos-aire-comprimido.html"] .adv + .adv { margin-top: 48px; }
body[data-page="productos-aire-comprimido.html"] .section { padding-top: clamp(56px, 5.4vw, 92px); padding-bottom: clamp(56px, 5.4vw, 92px); }
/* the Transair infographic 20% smaller */
.art-img.wide.infografia img { width: 80%; margin: 0 auto; display: block; }

/* 27-09-2026 (Nicolas): PTS photo sits inside its card like the other three — no bleed past the border. */
/* V116 (his ruling): on Servicios every card photo behaves the same — whole photo, same frame, nothing zoomed or cropped */

/* Nosotros: the quote sits beside the photo — photo left, text right */
.letter.with-photo { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 3vw, 48px); align-items: stretch; padding: 0; overflow: hidden; }
.letter.with-photo .letter-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.letter.with-photo .letter-body { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 48px) clamp(28px, 3vw, 44px) 0; }
.letter.with-photo blockquote { margin: 0; } .letter.with-photo figcaption { margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
@media (max-width: 820px) { .letter.with-photo { grid-template-columns: minmax(0, 1fr); } .letter.with-photo .letter-photo { aspect-ratio: 4 / 3; } .letter.with-photo blockquote, .letter.with-photo figcaption { padding-left: clamp(20px, 5vw, 32px); } }

/* V110: Parker above Transair, same width (his ruling) */
.pip-logos.stack img { height: auto !important; width: 280px; }

/* V110: Nosotros reads on a dark gradient, like Servicios */
body[data-page="nosotros.html"] .hero.small.photo::before { background: linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.88) 16%, rgba(0,0,0,.7) 30%, rgba(0,0,0,.45) 46%, rgba(0,0,0,.22) 64%, rgba(0,0,0,.06) 100%); }

/* V110 (his ruling): the quote block spans the full width; the photo keeps its size and the text fills the rest */
#nuestra-historia .letter.with-photo { grid-column: 1 / -1; grid-template-columns: minmax(360px, 460px) minmax(0, 1fr); }
.letter.with-photo blockquote p { max-width: none; }
.letter.with-photo figcaption strong { font-size: 20px; }
.letter.with-photo figcaption span { font-size: 14px; }

/* V111: the quote block is not capped at 1080px — it fills the content width */
.letter.with-photo { max-width: none; }

/* V113 (his ruling): the hero and the video keep exactly the height they had; the stats bar floats over the
   bottom of the hero so it is fully visible, instead of taking height away from the video. */
@media (min-width: 981px) {
  .first-screen { position: relative; }
  .first-screen .home-hero { flex: 1 1 auto; }
  .first-screen .stats-band { position: absolute; left: 0; right: 0; bottom: 26px; background: transparent; }
  .first-screen .home-hero > .wrap { padding-bottom: 150px; }
}

/* ---- V114: every part of the first screen is a variable, so the edit panel can move it.
   Each one falls back to the design value, so an untouched control changes nothing. ---- */
@media (min-width: 981px) {
  .first-screen { min-height: calc(100svh - var(--header-h, 85px) - var(--p-first-gap, 0px)); }
  .first-screen .home-hero > .wrap {
    padding-top: var(--p-hero-padt, clamp(72px, 7vw, 120px));
    padding-bottom: var(--p-hero-padb, 150px);
  }
  .first-screen .stats-band { bottom: var(--p-band-bottom, 26px); }
  .first-screen .stats-band > .wrap { width: min(100% - 2 * var(--gutter), var(--p-band-w, var(--wrap))); }
  .first-screen .stats-band .stats li { padding: var(--p-band-pad, 28px) var(--p-band-padx, 26px) var(--p-band-pad, 26px); }
}
.home-hero .hero-bg { object-fit: cover; object-position: var(--p-video-x, 50%) var(--p-video-y, 50%); transform: scale(var(--p-video-zoom, 1)); }
.home-hero::before { opacity: var(--p-hero-dim, 1); }
.hh-copy h1 { font-size: var(--p-home-h1, clamp(40px, 4.6vw, 76px)); }
.hh-copy p { font-size: var(--p-home-sub, clamp(18px, 1.35vw, 22px)); }
.hh-grid { grid-template-columns: minmax(0, 1fr) minmax(0, var(--p-form-w, 420px)); column-gap: var(--p-hh-gap, clamp(32px, 5vw, 96px)); }
.stats-band .stats li b, .stats-band .stats li.word b { font-size: var(--p-band-num, var(--stat-size)); }   /* V131: the fallback was "inherit", which shrank the figures to 17px */

/* V115 (his ruling): the Minería header text reads on a dark gradient, like Servicios and Nosotros */
body[data-page="industrias-mineria.html"] .hero.small.photo::before { background: linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.88) 16%, rgba(0,0,0,.7) 30%, rgba(0,0,0,.45) 46%, rgba(0,0,0,.22) 64%, rgba(0,0,0,.06) 100%); }

/* V115: on a header with video the dark gradient goes above the video, and the text above both */
.hero.small .hero-bg.hero-video { z-index: 0; }
.hero.small::before { z-index: 1; }
.hero.small > .wrap { z-index: 2; position: relative; }

/* V117 (his ruling): the Marcas header text reads on a dark gradient */
body[data-page="marcas.html"] .hero.small.photo::before { background: linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.88) 18%, rgba(0,0,0,.68) 34%, rgba(0,0,0,.42) 50%, rgba(0,0,0,.2) 68%, rgba(0,0,0,.04) 100%); }

/* V118 (his ruling): no button ever wider than its card */
.pclass .btn, .pclass .cta-row, .brand-block .btn, .svc-col .btn { max-width: 100%; box-sizing: border-box; }
.pclass .btn.wa-link { white-space: normal; flex-wrap: wrap; text-align: left; row-gap: 2px; }
.pclasses.four .btn.wa-link span { font-size: 13.5px; line-height: 1.2; }

/* V118 (his ruling): full control of the figures bar from the edit panel */
.stats-band .stats li b, .stats-band .stats li.word b { color: var(--p-band-num-color, var(--accent)); }
.stats-band .stats li > span, .stats-band .stats li small { color: var(--p-band-label-color, inherit); font-size: var(--p-band-label-size, inherit); }
.stats-band .stats li { gap: var(--p-band-gap, 6px); }

/* V118: product card with its own WhatsApp button */
.card.with-cta { display: flex; flex-direction: column; }
.card.with-cta .card-link { display: flex; flex-direction: column; gap: 0; color: inherit; text-decoration: none; flex: 1 1 auto; }
.card.with-cta .cta-row { margin-top: 18px; }
.card.with-cta .btn.wa-link { white-space: normal; max-width: 100%; box-sizing: border-box; }

/* V121 (his ruling): the sector tiles keep the Industrias look but take far less room — six per row, shallower, smaller label */
.sect-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.sect-tile { aspect-ratio: 4 / 3; border-radius: 12px; }
.sect-tile span { font-size: 13px; padding: 10px; }
.sect-tile::after { background: linear-gradient(180deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.78) 100%); }
@media (max-width: 1280px) { .sect-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .sect-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* V122 (his ruling): triple the air above and below the sector tiles */
.sect-grid { margin-top: 42px; margin-bottom: clamp(96px, 9vw, 144px); }   /* V124: half the air above (his ruling); the air below stays */
/* 27/09: su orden — el blanco total alrededor de Sectores baja un 20 % y queda igual arriba y abajo (114 px a 1440). */
.sect-grid { margin-bottom: 0; }

/* V131: only the bar's own text changes — bigger orange figures, all six the same, labels aligned on one line.
   The hero, the video and the Consulta rápida card stay exactly as they were in V124. */
@media (min-width: 981px) {
  .stats-band .stats { --stat-size: 34px; }
  .stats-band .stats li.word b { --stat-size: 34px; white-space: normal; line-height: 1.05; }
  .stats-band .stats li { display: grid; grid-template-rows: 1fr auto; align-items: end; }
  .stats-band .stats li b { align-self: end; }
}
@media (min-width: 981px) and (max-width: 1280px) { .stats-band .stats { --stat-size: 28px; } .stats-band .stats li.word b { --stat-size: 28px; } }

/* V132 (pedido de Nicolás): la tarjeta Consulta rápida un poco más arriba.
   Se usa transform, que mueve la tarjeta en pantalla sin cambiar el espacio que ocupa:
   el título, el video y la barra de cifras no se enteran y no se mueven. */
@media (min-width: 981px) {
  .home-hero #consulta-rapida { transform: translateY(-30px); }
}

/* ============================================================================
   V140 — Transair (productos-aire-comprimido.html) reconstruida.
   Todo se apoya en las variables y componentes que ya usa el resto del sitio,
   para que la página no se sienta de otro sitio web.
   ========================================================================== */

/* Entrada: el logo Parker|Transair a la izquierda, el texto a la derecha. */
.pip-open { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
.pip-open-mark img { width: 100%; max-width: 280px; height: auto; display: block; }
.pip-lead { font-size: clamp(22px, 1.9vw, 30px); line-height: 1.4; letter-spacing: -.01em; margin: 0 0 24px; color: var(--ink); }
.pip-open .pip-lead { font-weight: 700; }
.pip-open-cols { columns: 1; }
.pip-open-cols p { font-size: clamp(19px, 1.5vw, 24px); line-height: 1.55; margin: 0 0 16px; break-inside: avoid; color: var(--muted); }
@media (max-width: 1020px) { .pip-open { grid-template-columns: minmax(0, 1fr); } .pip-open-cols { columns: 1; } .pip-open-mark img { max-width: 220px; } }

/* La barra de cifras: el mismo componente de la portada, aquí en su propia franja oscura. */
.pip-cifras { background: #0d0d0d; padding: clamp(48px, 5vw, 76px) 0 clamp(52px, 5.4vw, 84px); }
.pip-cifras-h { color: var(--white); font-size: clamp(26px, 2.2vw, 36px); margin: 0; letter-spacing: -.01em; }
.pip-cifras .stats { margin-top: clamp(28px, 2.6vw, 44px); grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; }
.pip-cifras .stats li { padding: 26px 28px 24px; border-left: 1px solid rgba(255,255,255,.14); }
.pip-cifras .stats li:nth-child(3n+1) { border-left: 0; }
.pip-cifras .stats li:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,.14); }
.pip-cifras .stats b { font-size: clamp(30px, 2.6vw, 42px); white-space: nowrap; }
.pip-cifras .stats li > span { margin-top: 12px; font-size: 15px; line-height: 1.4; }
@media (max-width: 820px) {
  .pip-cifras .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pip-cifras .stats li:nth-child(3n+1) { border-left: 1px solid rgba(255,255,255,.14); }
  .pip-cifras .stats li:nth-child(odd) { border-left: 0; }
  .pip-cifras .stats li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
}

/* Los dos caminos — obra nueva y modernización — uno al lado del otro. */
.pip-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 3.4vw, 64px); align-items: start; }
.pip-pair article { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: clamp(28px, 2.6vw, 44px); }
.pip-pair h2 { font-size: clamp(22px, 1.8vw, 28px); line-height: 1.25; margin: 0 0 14px; letter-spacing: -.01em; }
.pip-pair .art-cap { font-size: 18px; margin: 0 0 14px; }
.pip-pair .story-text { font-size: 17px; line-height: 1.6; max-width: none; margin-bottom: 18px; color: var(--muted); }
.pip-pair .ticks { margin-bottom: 0; } .pip-pair .ticks li { font-size: 16px; line-height: 1.5; }
.pip-pair .ticks li:last-child { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 1020px) { .pip-pair { grid-template-columns: minmax(0, 1fr); } }

/* Las ventajas, en columnas parejas en vez de una lista larga contra dos fotos. */
.pip-spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 56px) clamp(36px, 4vw, 72px); align-items: start; }
.pip-spec h3 { font-size: clamp(18px, 1.35vw, 21px); margin: 0 0 6px; letter-spacing: -.005em; }
.pip-spec .ticks { margin-bottom: 0; } .pip-spec .ticks li { font-size: 16px; line-height: 1.5; }
.pip-spec .ticks li:last-child { border-bottom: 0; }
@media (max-width: 820px) { .pip-spec-grid { grid-template-columns: minmax(0, 1fr); } }

.pip-ener .story-text { max-width: 1080px; }
.pip-ener .ticks { max-width: 1080px; }

/* Certificaciones: el archivo mide 870 px de ancho; antes se estiraba a 1 400 y se veía borroso. */
body[data-page="productos-aire-comprimido.html"] .art-img.certs { display: flex; justify-content: center; }
body[data-page="productos-aire-comprimido.html"] .art-img.certs img { width: auto; max-width: min(100%, 870px); }

/* El video: uno solo, en 16:9. Antes había dos apilados, 1 684 px de alto entre los dos. */
.yt { position: relative; width: 100%; max-width: 1000px; margin: clamp(28px, 3vw, 44px) auto 0; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #0d0d0d; border: 1px solid var(--line); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* V140: en la portada la barra de cifras se sube sobre el video con translateY(-50%).
   Aquí es una franja normal, así que se anula ese desplazamiento. */
.pip-cifras .stats { transform: none; margin-bottom: 0; box-shadow: 0 24px 60px -24px rgba(0,0,0,.6); }
/* V140: la barra de la portada fuerza una sola línea y filas de alto fijo, porque allí las
   etiquetas son de dos palabras. Aquí son frases, así que se deja que envuelvan. */
.pip-cifras .stats li { display: block; }
.pip-cifras .stats li > span { white-space: normal; text-wrap: pretty; }
.pip-cifras .stats li b { white-space: nowrap; align-self: auto; }

/* V140, ajustes finos */
/* Las certificaciones ya no se estiran, así que el recuadro se ajusta a ellas
   en vez de dejar un panel blanco medio vacío. */
body[data-page="productos-aire-comprimido.html"] .art-img.certs { max-width: 940px; margin-left: auto; margin-right: auto; }
/* "Servicios" es el único bloque que no es una especificación: cierra la sección a todo el ancho
   en vez de quedar suelto en la columna izquierda. */
.pip-spec-grid .pip-spec:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: clamp(24px, 2.4vw, 36px); }
/* Etiquetas de la barra de cifras un punto más legibles sobre el negro. */
.pip-cifras .stats li > span { color: rgba(255,255,255,.92); font-size: 15.5px; }

/* ============================================================================
   V141 — Transair. Se toma de Parker el recurso que da ritmo a su página: una
   franja a todo el ancho partida en dos, foto de un lado y panel de color liso
   del otro, con el texto en blanco y un solo botón. En Parker el panel es azul;
   aquí es el negro de Contix, para no romper la identidad del resto del sitio.
   ========================================================================== */
.pip-panel { background: #0d0d0d; color: var(--white); }
.pip-panel-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.pip-panel-img { background-size: cover; background-position: center; min-height: clamp(320px, 34vw, 760px); }   /* 28/09 (Nicolas): «floating head» again on wide windows — the 520 px cap cropped the 3:2 photos (34vw = the photo's own aspect for a half-width panel); cap raised so the Instalación photo stays whole up to ~2200 px */
.pip-panel-txt { padding: clamp(36px, 4.4vw, 76px) clamp(28px, 4vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.pip-panel-txt h2 { color: var(--white); font-size: clamp(26px, 2.3vw, 38px); line-height: 1.15; margin: 0 0 16px; letter-spacing: -.015em; }
.pip-panel-txt > p { font-size: clamp(17px, 1.25vw, 20px); line-height: 1.55; color: rgba(255,255,255,.86); margin: 0 0 24px; max-width: 620px; }
.pip-panel-txt .ticks { margin-bottom: 28px; max-width: 640px; }
.pip-panel-txt .ticks li { border-bottom-color: rgba(255,255,255,.16); color: rgba(255,255,255,.86); font-size: 16px; line-height: 1.5; }
.pip-panel-txt .ticks li b { color: var(--white); }
.pip-panel-txt .ticks li:last-child { border-bottom: 0; }
/* V149 — este par de reglas se escribió para los botones de los paneles oscuros de Transair, pero sin acotar:
   al ir después de la regla base, pintaba de BLANCO todos los .btn.ghost del sitio, incluido «Ver detalles
   técnicos», que vive sobre fondo blanco. Resultado: texto blanco sobre blanco, contraste 1,00, botón
   invisible en las seis páginas de producto. Ahora van acotadas al panel oscuro. */
.pip-panel-txt .btn.ghost { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.5); align-self: flex-start; }
.pip-panel-txt .btn.ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
@media (max-width: 900px) {
  .pip-panel-in { grid-template-columns: minmax(0, 1fr); }
  .pip-panel-img { min-height: 260px; }
}

/* Franja de respaldo: negra, tres columnas, sin foto. */
.pip-respaldo { background: #0d0d0d; color: var(--white); padding: clamp(52px, 5vw, 88px) 0; }
.pip-respaldo h2 { color: var(--white); font-size: clamp(26px, 2.2vw, 36px); margin: 0 0 clamp(28px, 2.8vw, 44px); letter-spacing: -.01em; }
.pip-respaldo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.2vw, 56px); }
.pip-respaldo-grid h3 { color: var(--accent); font-size: clamp(17px, 1.3vw, 20px); margin: 0 0 10px; }
.pip-respaldo-grid p { color: rgba(255,255,255,.86); font-size: 16px; line-height: 1.6; margin: 0; }
@media (max-width: 900px) { .pip-respaldo-grid { grid-template-columns: minmax(0, 1fr); } }

/* Documentación técnica: tarjetas que llevan a los documentos de Parker. */
.pip-docs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2vw, 28px); }
.pip-doc { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px, 2.2vw, 32px); text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.pip-doc:hover { border-color: var(--accent); transform: translateY(-2px); }
.pip-doc h3 { font-size: 18px; margin: 0 0 10px; letter-spacing: -.005em; }
.pip-doc p { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0 0 20px; flex: 1; }
.pip-doc span { font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--accent); padding-bottom: 2px; align-self: flex-start; }
@media (max-width: 1100px) { .pip-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pip-docs { grid-template-columns: minmax(0, 1fr); } }

/* La barra pasa a nueve cifras: sigue siendo 3×3. */
.pip-cifras .stats li:nth-child(n+7) { border-top: 1px solid rgba(255,255,255,.14); }

/* ============================================================================
   V142 — el ritmo de la página de Parker: franjas a todo el ancho que alternan
   el lado de la foto. Su página casi no tiene secciones de texto sobre blanco;
   son bloques de foto o de color liso uno detrás de otro. Eso es lo que hacía
   que V141 se siguiera pareciendo a la versión anterior: tenía una sola franja.
   ========================================================================== */
.pip-panel.reverse .pip-panel-img { order: 2; }
.pip-panel.reverse .pip-panel-txt { order: 1; }
@media (max-width: 900px) { .pip-panel.reverse .pip-panel-img { order: 1; } .pip-panel.reverse .pip-panel-txt { order: 2; } }

/* Los párrafos largos de "Ahorro de tiempo" necesitan respirar dentro del panel. */
.pip-panel-txt.narrow-text .story-text { font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.86); max-width: 620px; margin-bottom: 14px; }
.pip-panel-txt.narrow-text .story-text strong { color: var(--white); }
.pip-panel-txt .art-cap { color: rgba(255,255,255,.92); font-size: clamp(17px, 1.25vw, 20px); margin: 0 0 20px; }
.pip-panel-txt .story-text { color: rgba(255,255,255,.86); font-size: 17px; line-height: 1.6; max-width: 620px; }
.pip-panel-txt .story-text strong { color: var(--white); }

/* Dos franjas seguidas no deben pegarse: una línea fina las separa. */
.pip-panel + .pip-panel { border-top: 1px solid rgba(255,255,255,.12); }

/* ============================================================================
   V143 — el orden pasa a claro/oscuro estricto (antes había tres franjas negras
   seguidas, 2 097 px de negro corrido) y se suma la capa de acabado.
   ========================================================================== */
/* Etiqueta pequeña sobre el título de cada franja: da jerarquía y es el recurso
   que usa Parker para nombrar de qué trata el bloque antes de decirlo. */
.pip-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.pip-panel-txt h2 { margin-top: 0; }

/* La foto no choca contra el negro: se funde con él en el borde que comparten. */
.pip-panel-img { position: relative; }
.pip-panel-img::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, transparent 72%, rgba(13,13,13,.85) 100%); }
.pip-panel.reverse .pip-panel-img::after { background: linear-gradient(to left, transparent 72%, rgba(13,13,13,.85) 100%); }
@media (max-width: 900px) {
  .pip-panel-img::after, .pip-panel.reverse .pip-panel-img::after { background: linear-gradient(to bottom, transparent 70%, rgba(13,13,13,.9) 100%); }
}

/* La entrada de Ahorro de Energía en grande; el resto en cuerpo normal. */
.pip-ener .pip-lead { margin-bottom: 20px; max-width: 1000px; }
.pip-ener .story-text { font-size: 17px; line-height: 1.6; color: var(--muted); }

/* V144: banda a todo el ancho con una foto de una red instalada. La foto mide 2400×1028
   (proporción 2.33) y la banda se calcula con esa misma proporción, así que se ve entera:
   no se recorta ni un borde. Es el otro recurso que usa Parker — una foto de respiro,
   sin texto encima, entre dos bloques de contenido. */
.pip-banda { margin: 0; position: relative; background: #0d0d0d; }
.pip-banda img { display: block; width: 100%; height: auto; }
.pip-banda figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(40px, 5vw, 72px) clamp(20px, 4vw, 64px) clamp(16px, 1.6vw, 24px);
  color: rgba(255,255,255,.95); font-size: 15px; letter-spacing: .01em;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent); }
@media (max-width: 700px) { .pip-banda figcaption { font-size: 13px; } }

/* Media franja en espera de foto (Nicolas, 25/09/2026: los huecos se dejan vacíos, no se rellenan
   con imágenes de IA; la foto que falta queda anotada en GAPS.md). Se mantiene el negro de la
   franja, un punto más claro, para que se lea como un espacio reservado y no como un error. */
.pip-panel-img.pendiente { background: repeating-linear-gradient(135deg, #141414, #141414 14px, #191919 14px, #191919 28px); }
.pip-panel-img.pendiente::after { background: none; }

/* Documentación técnica: las tarjetas describen lo que Contix puede enviar, no enlazan a Parker
   (Nicolas, 25/09/2026: no invitar al visitante a salir del dominio; que nos lo pida a nosotros). */
.pip-doc p { margin-bottom: 0; }
.pip-doc:hover { border-color: var(--line); transform: none; }
.pip-docs-cta { margin-top: clamp(28px, 3vw, 44px); padding-top: clamp(24px, 2.6vw, 36px); border-top: 1px solid var(--line); }
.pip-docs-cta p { font-size: clamp(18px, 1.4vw, 22px); margin: 0 0 18px; color: var(--ink); }

/* ============================================================================
   Ventajas de Transair: se rehace para que deje de parecer una diapositiva.
   Lo que la delataba: una línea fina debajo de CADA viñeta y un punto naranja
   delante de cada una. Fuera las dos cosas. El grupo pasa a ser una tarjeta y
   la separación la hace el espacio, no las reglas. Sólo afecta a esta sección:
   la clase .ticks sigue igual en las otras 33 páginas.
   ========================================================================== */
.pip-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2vw, 28px); }
.pip-spec {
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(26px, 2.4vw, 38px) clamp(24px, 2.2vw, 36px);
  display: flex; flex-direction: column;
}
/* Una barra naranja corta sobre el título, en vez de un punto delante de cada frase. */
.pip-spec h3 { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.3; margin: 0 0 18px; padding-top: 16px; position: relative; letter-spacing: -.005em; }
.pip-spec h3::before { content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 3px; border-radius: 2px; background: var(--accent); }

.spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.spec-list li { font-size: 16px; line-height: 1.6; color: var(--muted); border: 0; padding: 0; }
/* La cifra, en el color del texto principal y en seminegra: se escanea sin gritar. */
.spec-list b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* "Servicios" es el único que no es una especificación: cierra a todo el ancho. */
.pip-spec-grid .pip-spec:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: clamp(26px, 2.4vw, 38px); }
@media (max-width: 820px) { .pip-spec-grid { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================================
   Ventajas como ficha técnica. Las tarjetas iguales no servían: los grupos del
   texto tienen 2, 1, 3, 4 y 1 puntos, y una tarjeta de una sola línea se ve mal.
   Aquí la etiqueta va a la izquierda y el contenido a la derecha; un grupo de una
   línea es normal, y "Servicios" deja de quedar suelto al final.
   ========================================================================== */
.spec-sheet { border-top: 1px solid var(--ink); }
.spec-row { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: clamp(24px, 3vw, 64px);
  padding: clamp(22px, 2.2vw, 32px) 0; border-bottom: 1px solid var(--line); align-items: start; }
.spec-row h3 { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.35; margin: 0; letter-spacing: -.005em; color: var(--ink); }
.spec-val { display: grid; gap: 12px; }
.spec-val p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--muted); max-width: 820px; }
.spec-val b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 820px) {
  .spec-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px 0; }
}

/* Una sola medida para toda la columna de texto. Antes cada párrafo terminaba donde le tocaba
   —entre 860 y 1213 px, un desorden de 353 px en el borde derecho— porque el texto se estiraba
   hasta donde hubiera sitio. Ahora todos cortan en el mismo punto y el bloque tiene un borde
   derecho claro. `text-wrap: pretty` evita además que una palabra suelta quede colgando sola. */
.spec-row { grid-template-columns: minmax(180px, 260px) minmax(0, 700px); }
.spec-val p { max-width: none; text-wrap: pretty; }

.spec-row { grid-template-columns: minmax(200px, 300px) minmax(0, 700px); }

/* La ficha técnica con una columna de imágenes al lado (Nicolas: que haya imágenes junto a esto,
   aunque sean marcos en espera). Los dos marcos acompañan al texto mientras se desplaza. */
.spec-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(32px, 4vw, 72px); align-items: start; }
.spec-layout .spec-row { grid-template-columns: minmax(160px, 230px) minmax(0, 1fr); }
.spec-fotos { display: grid; gap: clamp(16px, 1.6vw, 24px); position: sticky; top: 100px; }
.spec-fotos .pip-panel-img.pendiente { border-radius: 18px; aspect-ratio: 4 / 3; min-height: 0;
  background: repeating-linear-gradient(135deg, #f1f1f1, #f1f1f1 14px, #f7f7f7 14px, #f7f7f7 28px); border: 1px solid var(--line); }
@media (max-width: 1100px) {
  .spec-layout { grid-template-columns: minmax(0, 1fr); }
  .spec-fotos { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* En el móvil la ficha se apila. Esta regla va al final a propósito: los anchos de columna que
   se declararon arriba venían después de la media query y la anulaban, así que la ficha seguía
   en dos columnas a 375 px y el texto se salía 32 px de la pantalla. Lo detectó tests/render.mjs. */
@media (max-width: 820px) {
  .spec-row, .spec-layout .spec-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px 0; }
  .spec-val p { max-width: none; }
}

/* La columna de imágenes ahora ocupa exactamente el alto de la ficha: antes eran dos marcos fijos
   y sobraban 260 px en blanco abajo a la derecha. Tres marcos que se reparten la altura, uno por
   cada argumento con foto pendiente (conexión, bajante, montaje en altura). */
.spec-layout { align-items: stretch; }
.spec-fotos { position: static; grid-template-rows: repeat(3, minmax(0, 1fr)); height: 100%; }
.spec-fotos .pip-panel-img.pendiente { aspect-ratio: auto; height: 100%; }
@media (max-width: 1100px) {
  .spec-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; height: auto; }
  .spec-fotos .pip-panel-img.pendiente { aspect-ratio: 4 / 3; height: auto; }
}
@media (max-width: 620px) { .spec-fotos { grid-template-columns: minmax(0, 1fr); } }

/* El código del hueco a la vista: así una foto se entrega diciendo «esta es la F2». */
.pip-panel-img.pendiente { display: flex; align-items: center; justify-content: center; }
.ph-cod { font-size: clamp(22px, 2vw, 34px); font-weight: 700; letter-spacing: .06em; color: rgba(255,255,255,.22); font-variant-numeric: tabular-nums; }
.spec-fotos .ph-cod { color: rgba(0,0,0,.18); }

/* ============================================================================
   Comparativa de materiales. Es el recurso que convierte la sección en algo de
   ingeniería y no en una lista de afirmaciones: el lector está eligiendo material,
   no leyendo virtudes. Todos los datos salen de la página «System Benefits» de
   Parker; ninguna celda es una suposición y las que Parker no dice van con «—».
   ========================================================================== */
.tabla-mat-wrap { overflow-x: auto; margin-bottom: clamp(40px, 4vw, 68px); }
.tabla-mat { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.tabla-mat caption { caption-side: bottom; text-align: left; padding-top: 16px; font-size: 13.5px; color: var(--muted); }
.tabla-mat th, .tabla-mat td { text-align: left; vertical-align: top; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.tabla-mat thead th { font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--ink); padding-bottom: 12px; white-space: nowrap; }
.tabla-mat tbody th { font-weight: 600; color: var(--ink); width: 190px; }
.tabla-mat td { color: var(--muted); }
.tabla-mat b { color: var(--ink); font-weight: 600; }
/* La columna de Transair se distingue sin gritar: fondo muy claro y un filo naranja arriba. */
.tabla-mat .es-transair { background: rgba(255,159,28,.06); }
.tabla-mat thead th.es-transair { color: var(--ink); border-bottom-color: var(--accent); border-bottom-width: 2px; }
@media (max-width: 700px) { .tabla-mat { font-size: 14.5px; } .tabla-mat th, .tabla-mat td { padding: 13px 14px; } }

/* La tabla toma la forma que tiene en Parker: una columna por material con sus inconvenientes.
   Antes era una rejilla de siete filas y quedaban celdas vacías, porque Parker no dice de cada
   material todas las cosas — y un hueco se lee como «esto no le pasa», que sería inventar. */
.tabla-mat thead th { padding-bottom: 14px; }
.tabla-mat tbody td { padding-top: 20px; }
.tabla-mat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tabla-mat li { position: relative; padding-left: 16px; }
.tabla-mat li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
.tabla-mat .es-transair li::before { background: var(--accent); }
.tabla-mat .es-transair li { color: var(--ink); }

/* ============================================================================
   La barra de cifras de Transair, al nivel de la portada. La diferencia de
   acabado no era el tipo de letra: era que la portada tiene un resplandor
   naranja en diagonal sobre un degradado vertical, sombra bajo la tarjeta y un
   filo claro en el borde superior, y aquí había un negro liso.
   ========================================================================== */
.pip-cifras {
  background:
    radial-gradient(80% 150% at 18% 0%, rgba(255,159,28,.16), transparent 60%),
    radial-gradient(60% 120% at 92% 100%, rgba(255,159,28,.07), transparent 55%),
    linear-gradient(180deg, #0b0b0b 0%, #171717 100%);
}
.pip-cifras .stats {
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  backdrop-filter: blur(2px);
  box-shadow: 0 34px 70px -24px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.14) inset;
}
/* La cifra, con el mismo resplandor que en la portada. */
.pip-cifras .stats b { text-shadow: 0 2px 20px rgba(255,159,28,.32); font-variant-numeric: tabular-nums; }
/* Las cifras no cambian de ancho mientras cuentan: el número no baila. */
.pip-cifras .stats .count { display: inline-block; text-align: left; font-variant-numeric: tabular-nums; }

/* ============================================================================
   Tabla de materiales. Esta es la ÚNICA tabla del sitio: no había una convención
   previa que seguir (la clase .spec se escribió pero nunca se usó en producción).
   Así que no se importa el lenguaje de la documentación de Anthropic —que es de
   otra familia visual— sino el de la ficha técnica que va justo debajo en esta
   misma página: filo negro arriba, líneas finas entre filas, etiquetas en negrita
   y sin tarjeta contenedora. Las dos piezas se leen como hermanas.
   ========================================================================== */
.tabla-mat-wrap { border: 0; border-radius: 0; background: none; padding: 0; }
.tabla-mat { font-size: 16.5px; min-width: 900px; border-top: 1px solid var(--ink); }
.tabla-mat thead th { font-size: clamp(16px, 1.2vw, 19px); font-weight: 700; color: var(--ink);
  text-transform: none; letter-spacing: -.005em; padding: 22px 24px 20px 0; border-bottom: 1px solid var(--line); vertical-align: bottom; }
.tabla-mat thead th .que-es { display: block; font-size: 13px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .09em; margin-top: 7px; }
.tabla-mat tbody td { padding: 24px 24px 28px 0; border-bottom: 0; vertical-align: top; }
.tabla-mat ul { gap: 12px; }
.tabla-mat li { padding-left: 17px; line-height: 1.45; color: var(--muted); }
.tabla-mat li::before { width: 5px; height: 5px; top: .66em; background: var(--line); }
.tabla-mat b { color: var(--ink); font-weight: 600; }
/* Transair: el naranja de la marca, igual que las viñetas del resto del sitio. */
.tabla-mat .es-transair, .tabla-mat thead th.es-transair { background: none; box-shadow: none; border-radius: 0; }
.tabla-mat thead th.es-transair { border-bottom: 2px solid var(--accent); }
.tabla-mat .es-transair li { color: var(--ink); }
.tabla-mat .es-transair li::before { background: var(--accent); }

/* La atribución, junto al título y no como pie de diapositiva. */
.fuente { color: var(--muted); font-size: 15px; }

/* La sección de la tabla no necesita el pie de una sección de texto: la tabla ya termina en su
   última viñeta. Antes sobraban 150 px de nada debajo. */
.seccion-tabla { padding-bottom: clamp(28px, 2.6vw, 44px); }
.seccion-tabla .tabla-mat-wrap { margin-bottom: 0; }
.tabla-mat tbody td { padding-bottom: 10px; }
/* Los nombres de los materiales, todos en la misma línea. Al quitar «Lo que instalamos» la
   columna de Transair quedaba más baja que las demás, porque las cabeceras se alineaban abajo. */
.tabla-mat thead th { vertical-align: top; }

/* ============================================================================
   «Transair en números» pasa a fondo blanco. La barra nació copiando la de la
   portada, que va sobre el video y por eso es negra; aquí no hay video debajo y
   la página ya tiene cuatro franjas oscuras. En claro pesa menos y las cifras
   naranjas resaltan más sobre blanco que sobre negro.
   ========================================================================== */
.pip-cifras { background: var(--white); padding: clamp(52px, 5vw, 84px) 0; }
.pip-cifras-h { color: var(--ink); }
.pip-cifras .stats { background: none; backdrop-filter: none; box-shadow: none;
  border: 1px solid var(--line); border-radius: 18px; }
.pip-cifras .stats li { border-left-color: var(--line); }
.pip-cifras .stats li:nth-child(n+4) { border-top-color: var(--line); }
.pip-cifras .stats li:nth-child(n+7) { border-top-color: var(--line); }
.pip-cifras .stats li > span { color: var(--muted); }
.pip-cifras .stats b { text-shadow: none; }
@media (max-width: 820px) {
  .pip-cifras .stats li { border-left-color: var(--line); }
  .pip-cifras .stats li:nth-child(n+3) { border-top-color: var(--line); }
}

/* Ocho cifras entran en cuatro columnas y dos filas: la rejilla queda llena, sin una cifra
   suelta al final, y la barra baja de tres filas a dos — que es lo que hacía falta para que
   quepa en una pantalla. */
.pip-cifras .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pip-cifras .stats li:nth-child(3n+1) { border-left: 1px solid var(--line); }
.pip-cifras .stats li:nth-child(4n+1) { border-left: 0; }
.pip-cifras .stats li:nth-child(n+4) { border-top: 0; }
.pip-cifras .stats li:nth-child(n+5) { border-top: 1px solid var(--line); }
@media (max-width: 1100px) { .pip-cifras .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pip-cifras .stats li:nth-child(odd) { border-left: 0; } .pip-cifras .stats li:nth-child(even) { border-left: 1px solid var(--line); }
  .pip-cifras .stats li:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* Nuestros valores: one icon above each value (Nicolas, 2026-09-25) */
.pillar-icon { display: block; width: 108px; height: 108px; margin: 0 0 20px; }
/* Nuestros valores on phones: one value per row (the V65/V66 three-column rules had no phone breakpoint) */
@media (max-width: 640px) { .pillars { grid-template-columns: minmax(0, 1fr); row-gap: 36px; } }

/* Documentación técnica sin la descripción de cada tarjeta (su pedido): quedan los cuatro
   nombres. Con una sola línea dentro, la tarjeta grande sobraba — se ajusta a su contenido. */
.pip-doc { padding: clamp(18px, 1.6vw, 24px) clamp(20px, 1.8vw, 26px); }
.pip-doc h3 { margin: 0; font-size: 17px; }

/* El cierre vuelve solo, sin las tarjetas de documentación: la pregunta y los dos botones.
   Sin título de sección arriba y sin la línea divisoria, que ahí ya no separa nada. */
.pip-cierre { padding-top: clamp(24px, 2.4vw, 40px); padding-bottom: clamp(44px, 4vw, 72px); }
.pip-cierre .pip-docs-cta { margin-top: 0; padding-top: 0; border-top: 0; }

/* El cierre vuelve solo —la pregunta y los dos botones—, sin las tarjetas de documentación ni
   título de sección, y sin la línea divisoria, que ahí ya no separa nada. */
.pip-cierre { padding-top: clamp(28px, 2.6vw, 44px); padding-bottom: clamp(44px, 4vw, 72px); }
.pip-cierre .pip-docs-cta { margin-top: 0; padding-top: 0; border-top: 0; }

/* La pregunta del cierre, más grande y en negrita: es la última cosa que se lee antes de la
   franja de Cotizar y hasta ahora tenía el peso de un párrafo cualquiera. */
.pip-cierre .pip-docs-cta p { font-size: clamp(24px, 2.1vw, 34px); font-weight: 700; line-height: 1.2;
  letter-spacing: -.015em; color: var(--ink); margin-bottom: 26px; }

/* El cierre: la pregunta más grande todavía, y las tres cajas con más cuerpo. Es lo último que
   se lee antes de la franja naranja, así que aquí es donde tiene que pesar. */
.pip-cierre .pip-docs-cta p { font-size: clamp(28px, 2.7vw, 44px); margin-bottom: 32px; }
.pip-cierre .cta-row { gap: 16px; }
.pip-cierre .cta-row .btn { font-size: clamp(16px, 1.2vw, 18px); padding: 20px 30px; border-radius: 12px; }
.pip-cierre .cta-row .wa-link .wa-ico { width: 22px; height: 22px; }

/* V148 — legibilidad del texto de las cabeceras con foto en pantallas estrechas.
   El velo de las cabeceras es horizontal (negro .78 a la izquierda, .12 a la derecha): en
   escritorio el texto vive en el tercio izquierdo y queda oscuro, pero por debajo de ~1020 px
   el texto ocupa todo el ancho y el final de cada línea cae sobre la parte clara de la foto.
   Medido sobre los píxeles reales: 20 de las 26 cabeceras con foto no llegaban al mínimo
   legible a 375 px (la peor, 1,48 frente al 4,5 que pide texto normal).
   Aquí el velo pasa a ser vertical y cubre todo el ancho. Solo por debajo de 1020 px; el
   escritorio no se toca. La portada tampoco: usa .home-hero y queda fuera del selector. */
@media (max-width: 1020px) {
  body[data-page] .hero.small.photo::before {
    background: linear-gradient(180deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.60) 55%, rgba(0,0,0,.56) 100%);
  }
}

/* Nosotros — Nuestra historia: orange strap on the photo's outer (right) edge, mirroring the 5px strap on the left of the quote box below */
#nuestra-historia .historia-img { border-right: 5px solid var(--accent); line-height: 0; } #nuestra-historia .historia-img img { display: block; }

/* V150 — la División Industrial pasa a cinco marcas (entra Polyhose antes de Ferolite). La rejilla base
   es de 12 columnas con celdas de 3, o sea cuatro por fila: con cinco, la quinta caía sola en una segunda
   fila y dejaba una celda vacía al lado. Aquí van las cinco en una sola fila. Por debajo de 1020 px se
   mantiene el comportamiento del resto del muro de logos: dos por fila, y la última ocupa el ancho. */
.logo-wall.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.logo-wall.n5 > .logo-cell { grid-column: auto; }
@media (max-width: 1020px) {
  .logo-wall.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-wall.n5 > .logo-cell:last-child { grid-column: span 2; }
}

/* V152 — el bloque «Nosotros» de la portada no entraba en una pantalla: 718 px de alto más 173 de
   margen exterior, contra los 815 disponibles en una ventana de 900. La foto no era la culpable —
   su alto lo fija la columna de texto, y ella se recorta sola porque va con `cover`. Se recorta el
   relleno vertical del texto y el margen exterior; la foto pierde alto arriba y abajo en
   consecuencia, que es justo el recorte que pidió Nicolas. El texto no se toca. */
.about-text { padding-top: clamp(40px, 4vw, 72px); padding-bottom: clamp(40px, 4vw, 72px); }
.about.inset { margin-top: clamp(48px, 5vw, 88px); margin-bottom: clamp(48px, 5vw, 88px); }

/* V153 — sale JT: la División Automotriz baja de siete marcas a seis. La rejilla base pone cuatro
   por fila, así que seis dejaban una segunda fila de dos con dos celdas vacías. Con seis, dos filas
   de tres. Por debajo de 1020 px vale la regla general: dos por fila, tres filas, sin huérfanas. */
.logo-wall.n6 > .logo-cell { grid-column: span 4; }
@media (max-width: 1020px) { .logo-wall.n6 > .logo-cell { grid-column: span 1; } }

/* 27/09 — Piping: el mismo blanco arriba y abajo en TODAS las secciones (su orden).
   Una sola medida, la que aprobó en Sectores: 114 px a 1440 de ancho. No toca otras páginas. */
body[data-page="productos-aire-comprimido.html"] { --pip-air: clamp(72px, 7.9vw, 128px); }
[data-page="productos-aire-comprimido.html"] :is(main, body) > section:not(.hero):not(.band):not(.pip-panel) { padding-top: var(--pip-air); padding-bottom: var(--pip-air); }
[data-page="productos-aire-comprimido.html"] .pip-panel-txt { padding-top: var(--pip-air); padding-bottom: var(--pip-air); }
[data-page="productos-aire-comprimido.html"] .pip-panel-txt > :last-child { margin-bottom: 0; }
[data-page="productos-aire-comprimido.html"] .pip-open-cols p:last-child,
[data-page="productos-aire-comprimido.html"] .pip-ener > div:last-child > .ticks:last-child { margin-bottom: 0; }

/* Minería (industrias-mineria.html): the 37 % figure band and a four-column challenges row */
/* 28/09/2026 (Nicolas), second pass: «why is there a horizontal line next to the 37? the 37 is part of the sentence … like the page for Transair, with the
   border with the animation». REJECTED: the first pass' eyebrow + hairline stat (it split one sentence in two). Now ONE sentence, «Hasta 37 % de las
   paradas…», with the numeral inline (orange, 800, the Transair figures' treatment) inside a white card with the Transair border beam (same conic gradient,
   mask and 8 s lap; `--pip-beam` and `pip-beam-run` are defined with the Transair rules), on the grey band. The numeral still counts up (menu.js .count);
   its box has a fixed width so the sentence never reflows while counting. No source line on the page (build.py + GAPS keep it). */
.mina-dato { background: var(--wash); padding-top: clamp(48px, 5vw, 80px); padding-bottom: clamp(48px, 5vw, 80px); }
.mina-card { position: relative; background: var(--white); border: 1px solid rgba(0,0,0,.1); border-radius: 22px; padding: clamp(32px, 3.6vw, 56px) clamp(24px, 4vw, 64px); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.06); }
.mina-card::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--pip-beam), transparent 0deg 300deg, rgba(255,159,28,.35) 325deg, #FF9F1C 350deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: pip-beam-run 8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .mina-card::after { animation: none; opacity: 0; } }
.mina-dato-txt { margin: 0; font-size: clamp(20px, 1.75vw, 26px); font-weight: 500; line-height: 1.35; letter-spacing: -.015em; color: var(--ink); max-width: none; text-align: left; text-wrap: pretty; }   /* 28/09 (Nicolas): «centring doesn't take away the blank space, add something about Contix» — one full paragraph across the card */
.mina-num { font-size: clamp(44px, 3.6vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: baseline; }   /* 28/09 (Nicolas): «the font size difference is too much» — numeral 2.5x the sentence at 1440 and at his window, was 4x */
.mina-num .count { display: inline-block; min-width: calc(2ch - .07em); text-align: right; }
.mina-num .pct { font-size: .5em; font-weight: 700; margin-left: .03em; }
@media (max-width: 640px) { .mina-card { border-radius: 16px; } }
.pillars.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mina-svc .pillar h3 a { color: inherit; text-decoration: none; } .mina-svc .pillar h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
@media (max-width: 1020px) { .pillars.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mina-dato-grid { grid-template-columns: minmax(0, 1fr); } .pillars.four { grid-template-columns: minmax(0, 1fr); } }
.split.mina-quien { align-items: start; }
/* 27/09 — su orden: «Transair en números» sobre fondo gris, para que se lea como bloque propio. */
[data-page="productos-aire-comprimido.html"] .pip-cifras { background: var(--wash); }
/* 27/09 — su orden: «Ventajas de Transair» en blanco, para que no se funda con el gris de «Ahorro de Energía». */
[data-page="productos-aire-comprimido.html"] .section.wash.seccion-tabla { background: var(--white); }
/* 27/09 — su orden: Sectores con degradé negro más fuerte desde abajo (solo la mitad inferior; la foto queda limpia arriba)
   y el nombre del sector más grande, en blanco. Referencia: tarjetas de Divisiones, pero SIN el naranja. */
[data-page="productos-aire-comprimido.html"] .sect-tile::after { background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.75) 75%, rgba(0,0,0,1) 100%); }
[data-page="productos-aire-comprimido.html"] .sect-tile span { color: var(--white); font-weight: 700; font-size: clamp(15px, 1.25vw, 20px); line-height: 1.2; padding: 14px 14px; letter-spacing: -.005em; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
/* 27/09 — su orden: «Transair en números» con aspecto de vidrio (liquid glass) y cifras más grandes.
   El vidrio necesita algo detrás que difuminar: dos manchas suaves de naranja Contix en el fondo gris.
   Cada cifra pasa a su propia placa de vidrio esmerilado, con borde claro y brillo arriba. */
[data-page="productos-aire-comprimido.html"] .pip-cifras { position: relative; overflow: hidden;
  background:
    radial-gradient(38% 60% at 12% 20%, rgba(255,159,28,.30), transparent 70%),
    radial-gradient(42% 70% at 88% 85%, rgba(255,159,28,.24), transparent 70%),
    radial-gradient(30% 50% at 55% 50%, rgba(255,255,255,.9), transparent 70%),
    var(--wash); }
[data-page="productos-aire-comprimido.html"] .pip-cifras .stats { border: 0; border-radius: 0; background: none; box-shadow: none;
  gap: clamp(14px, 1.4vw, 22px); --stat-size: clamp(36px, 3.339vw, 56px); overflow: visible; }
[data-page="productos-aire-comprimido.html"] .pip-cifras .stats li,
[data-page="productos-aire-comprimido.html"] .pip-cifras .stats li:nth-child(n) {
  border: 1px solid rgba(255,255,255,.75); border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.38) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 18px 40px -22px rgba(0,0,0,.28);
  padding: clamp(24px, 2.2vw, 36px) clamp(22px, 2vw, 32px); gap: 12px; }
[data-page="productos-aire-comprimido.html"] .pip-cifras .stats li b,
[data-page="productos-aire-comprimido.html"] .pip-cifras .stats li.word b { font-size: var(--stat-size); font-weight: 800; letter-spacing: -.025em; line-height: 1; }
[data-page="productos-aire-comprimido.html"] .pip-cifras .stats li > span { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.45; color: #3a3a3a; }
[data-page="productos-aire-comprimido.html"] .pip-cifras-h { font-size: clamp(30px, 2.6vw, 44px); }
@media (max-width: 600px) { [data-page="productos-aire-comprimido.html"] .pip-cifras .stats { grid-template-columns: minmax(0, 1fr); --stat-size: 36px; } }

/* 27/09 — su orden: fuera el tono naranja del fondo (no aportaba y restaba lectura); fondo gris liso.
   Placas como su referencia (21st.dev «Border Beam», de badtz): blanco liso, borde fino gris, sombra leve,
   y un haz de luz que recorre el borde (8 s por vuelta). Haz en naranja Contix; cada placa desfasada. */
@property --pip-beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes pip-beam-run { to { --pip-beam: 360deg; } }
[data-page="productos-aire-comprimido.html"] .pip-cifras { background: var(--wash); }
[data-page="productos-aire-comprimido.html"] .pip-cifras .stats li,
[data-page="productos-aire-comprimido.html"] .pip-cifras .stats li:nth-child(n) {
  position: relative; background: var(--white); border: 1px solid rgba(0,0,0,.1);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.06); }
[data-page="productos-aire-comprimido.html"] .pip-cifras .stats li::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--pip-beam), transparent 0deg 300deg, rgba(255,159,28,.35) 325deg, #FF9F1C 350deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: pip-beam-run 8s linear infinite; }
[data-page="productos-aire-comprimido.html"] .pip-cifras .stats li:nth-child(2)::after { animation-delay: -1s; }
[data-page="productos-aire-comprimido.html"] .pip-cifras .stats li:nth-child(3)::after { animation-delay: -2s; }
[data-page="productos-aire-comprimido.html"] .pip-cifras .stats li:nth-child(4)::after { animation-delay: -3s; }
[data-page="productos-aire-comprimido.html"] .pip-cifras .stats li:nth-child(5)::after { animation-delay: -4s; }
[data-page="productos-aire-comprimido.html"] .pip-cifras .stats li:nth-child(6)::after { animation-delay: -5s; }
[data-page="productos-aire-comprimido.html"] .pip-cifras .stats li:nth-child(7)::after { animation-delay: -6s; }
[data-page="productos-aire-comprimido.html"] .pip-cifras .stats li:nth-child(8)::after { animation-delay: -7s; }
@media (prefers-reduced-motion: reduce) { [data-page="productos-aire-comprimido.html"] .pip-cifras .stats li::after { animation: none; opacity: 0; } }

/* 27/09 — su orden, franja «Gama completa» (la que sigue a las cifras): letra más grande; el blanco negro
   de arriba y abajo puede bajar hasta la mitad (su permiso) para que quepa; y la foto se funde en el negro. */
[data-page="productos-aire-comprimido.html"] .pip-cifras + .pip-panel .pip-panel-txt { padding-top: calc(var(--pip-air) * .5); padding-bottom: calc(var(--pip-air) * .5); }
[data-page="productos-aire-comprimido.html"] .pip-cifras + .pip-panel .pip-eyebrow { font-size: clamp(13px, 1vw, 16px); margin-bottom: 16px; }
[data-page="productos-aire-comprimido.html"] .pip-cifras + .pip-panel .pip-panel-txt h2 { font-size: clamp(30px, 3vw, 50px); margin-bottom: 20px; }
[data-page="productos-aire-comprimido.html"] .pip-cifras + .pip-panel .pip-panel-txt > p:not(.pip-eyebrow) { font-size: clamp(19px, 1.6vw, 26px); max-width: none; margin-bottom: 28px; }
[data-page="productos-aire-comprimido.html"] .pip-cifras + .pip-panel .pip-panel-txt .ticks { max-width: none; }
[data-page="productos-aire-comprimido.html"] .pip-cifras + .pip-panel .pip-panel-txt .ticks li { font-size: clamp(17px, 1.3vw, 21px); }
[data-page="productos-aire-comprimido.html"] .pip-cifras + .pip-panel .pip-panel-txt .btn { font-size: clamp(16px, 1.15vw, 19px); }
[data-page="productos-aire-comprimido.html"] .pip-cifras + .pip-panel .pip-panel-img::after { background: linear-gradient(to right, transparent 40%, rgba(13,13,13,.55) 70%, #0d0d0d 100%); }
@media (max-width: 900px) { [data-page="productos-aire-comprimido.html"] .pip-cifras + .pip-panel .pip-panel-img::after { background: linear-gradient(to bottom, transparent 45%, rgba(13,13,13,.55) 75%, #0d0d0d 100%); } }
/* 27/09 (2) — su corrección a Gama completa: letra un poco menor, más aire entre líneas y viñetas
   (arriba y abajo siguen donde estaban), degradé sobre menos foto, y el botón se vuelve naranja al pasar. */
[data-page="productos-aire-comprimido.html"] .pip-cifras + .pip-panel .pip-eyebrow { font-size: clamp(11px, .85vw, 13px); margin-bottom: 20px; }
[data-page="productos-aire-comprimido.html"] .pip-cifras + .pip-panel .pip-panel-txt h2 { font-size: clamp(28px, 2.65vw, 44px); line-height: 1.18; margin-bottom: 24px; }
[data-page="productos-aire-comprimido.html"] .pip-cifras + .pip-panel .pip-panel-txt > p:not(.pip-eyebrow) { font-size: clamp(18px, 1.42vw, 23px); line-height: 1.6; margin-bottom: 36px; }
[data-page="productos-aire-comprimido.html"] .pip-cifras + .pip-panel .pip-panel-txt .ticks { margin-bottom: 40px; }
[data-page="productos-aire-comprimido.html"] .pip-cifras + .pip-panel .pip-panel-txt .ticks li { font-size: clamp(15px, 1.159vw, 18px); line-height: 1.6; padding-top: 16px; padding-bottom: 16px; }
[data-page="productos-aire-comprimido.html"] .pip-cifras + .pip-panel .pip-panel-txt .ticks li::before { top: calc(16px + .8em - 3px); }
[data-page="productos-aire-comprimido.html"] .pip-cifras + .pip-panel .pip-panel-txt .btn { font-size: clamp(15px, 1.05vw, 17px); }
[data-page="productos-aire-comprimido.html"] .pip-cifras + .pip-panel .pip-panel-txt .btn.ghost:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
[data-page="productos-aire-comprimido.html"] .pip-cifras + .pip-panel .pip-panel-img::after { background: linear-gradient(to right, transparent 72%, rgba(13,13,13,.6) 88%, #0d0d0d 100%); }
@media (max-width: 900px) { [data-page="productos-aire-comprimido.html"] .pip-cifras + .pip-panel .pip-panel-img::after { background: linear-gradient(to bottom, transparent 72%, rgba(13,13,13,.6) 88%, #0d0d0d 100%); } }
/* 27/09 (3) — su orden: el mismo tratamiento de Gama completa en TODAS las franjas foto + texto
   (Obra nueva, Reconversión, Instalación), también las que tienen la foto en espera (F1, F2).
   Gama completa conserva sus reglas propias de arriba (más específicas), tal como las aprobó. */
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt { padding-top: calc(var(--pip-air) * .5); padding-bottom: calc(var(--pip-air) * .5); }
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-eyebrow { font-size: clamp(11px, .85vw, 13px); margin-bottom: 20px; }
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt h2 { font-size: clamp(28px, 2.65vw, 44px); line-height: 1.18; margin-bottom: 24px; }
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt > p:not(.pip-eyebrow):not(.story-text),
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt .art-cap { font-size: clamp(18px, 1.42vw, 23px); line-height: 1.6; max-width: none; margin-bottom: 28px; color: rgba(255,255,255,.92); }
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt .story-text,
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt.narrow-text .story-text { font-size: clamp(15px, 1.159vw, 18px); line-height: 1.6; max-width: none; margin-bottom: 20px; color: rgba(255,255,255,.86); }
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt .ticks { max-width: none; margin-bottom: 32px; }
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt .ticks li { font-size: clamp(15px, 1.159vw, 18px); line-height: 1.6; padding-top: 16px; padding-bottom: 16px; }
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt .ticks li::before { top: calc(16px + .8em - 3px); }
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt .btn { font-size: clamp(15px, 1.05vw, 17px); margin-top: 8px; }
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt .btn.ghost:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-img::after { background: linear-gradient(to right, transparent 72%, rgba(13,13,13,.6) 88%, #0d0d0d 100%); }
[data-page="productos-aire-comprimido.html"] .pip-panel.reverse .pip-panel-img::after { background: linear-gradient(to left, transparent 72%, rgba(13,13,13,.6) 88%, #0d0d0d 100%); }
@media (max-width: 900px) { [data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-img::after,
  [data-page="productos-aire-comprimido.html"] .pip-panel.reverse .pip-panel-img::after { background: linear-gradient(to bottom, transparent 72%, rgba(13,13,13,.6) 88%, #0d0d0d 100%); } }
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt > .story-text:last-child,
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt.narrow-text > .story-text:last-child { margin-bottom: 0; }
/* 27/09 (4) — su corrección a Obra nueva (aplica a todas las franjas foto + texto):
   - una viñeta sola no es lista: se muestra como un párrafo más, sin punto ni línea, con el mismo espacio que el resto;
   - párrafos con un poco más de aire entre sí;
   - el botón es otra cosa: queda más separado del texto (44 px) que los párrafos entre sí (24 px). */
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt .ticks:has(> li:only-child) { margin-bottom: 24px; }
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt .ticks li:only-child { padding: 0; border-bottom: 0; }
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt .ticks li:only-child::before { display: none; }
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt .story-text,
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt.narrow-text .story-text { margin-bottom: 24px; }
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt .art-cap { margin-bottom: 32px; }
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt > :has(+ .btn) { margin-bottom: 0 !important; }
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt > .ticks:has(+ .btn) li:last-child { padding-bottom: 0; }
[data-page="productos-aire-comprimido.html"] .pip-panel .pip-panel-txt .btn { margin-top: 44px; }

/* Minería V2 (27/09/2026, his ruling: Hydroscand's mining page as the model) — one section per band, text and photo alternating, photo cards to finish */
/* 28/09/2026 (Nicolas): «you think we need all this deadspace here? … we took inspiration from hydroscand … copy it». Measured hydroscand.com/mining:
   text-only bands, the text sets the band height, padding 64 px above / 56 px below. Here the photo (his 28/09 ruling) stays but no longer sets the
   height: it fills the text column's height (floor 300 px), so the row is as tall as the text. Band padding = Hydroscand's. */
.section.mz-band { padding-top: clamp(48px, 4.5vw, 64px); padding-bottom: clamp(44px, 4vw, 56px); }
.mz-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: stretch; }
.mz-text { display: flex; flex-direction: column; justify-content: center; }
.mz-img { margin: 0; position: relative; min-height: 400px; }   /* 28/09 (Nicolas): framing option 4 — the band's photo frame is 400 px tall at least, the truck photo anchored right and 60 % down */ .mz-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.mz-text h2 { margin-top: 0; }
.mz-text * + h2 { margin-top: 1.6em; }
/* Minería, todas las bandas foto + texto (Nicolas, 2026-09-28): sin líneas entre viñetas, texto más grande, más aire,
   y la franja naranja en el borde exterior de cada foto (el que da al borde de la pantalla), como en Nosotros
   (#nuestra-historia .historia-img). .mz-row sólo existe en industrias-mineria.html. */
.mz-row .ticks { margin-bottom: 0; }
.mz-row .ticks li { border-bottom: 0; padding: 9px 0 9px 24px; font-size: clamp(19px, 1.45vw, 22px); line-height: 1.5; }
.mz-row .ticks li::before { top: calc(9px + 0.75em - 3px); }
.mz-row .mz-text p { font-size: clamp(19px, 1.45vw, 22px); line-height: 1.6; }
.mz-row .mz-text h2 { margin-bottom: 22px; }
.mz-row .mz-text * + h2 { margin-top: clamp(48px, 4.5vw, 72px); }
.mz-row .mz-img { border-right: 5px solid var(--accent); line-height: 0; }
.mz-row.rev .mz-img { border-right: 0; border-left: 5px solid var(--accent); }
.mz-row .mz-img img { border-radius: 0; }
.mz-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 28px; }
.mz-card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; text-decoration: none; }
.mz-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mz-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.72) 100%); }
.mz-card span { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; color: #fff; font-size: clamp(20px, 1.7vw, 26px); font-weight: 700; }
.mz-card:hover img { transform: scale(1.04); }
@media (max-width: 1020px) { .mz-row { grid-template-columns: minmax(0, 1fr); } .mz-row.rev .mz-img { order: 2; } .mz-img { min-height: 0; aspect-ratio: 16 / 9; } .mz-cards { grid-template-columns: minmax(0, 1fr); } .mz-card { aspect-ratio: 16 / 9; } }
/* 27/09 — su orden: «Ahorro de Energía» con los mismos tamaños que las franjas foto + texto
   (entrada 20,5 px, cuerpo y viñetas 16,7 px a 1440). */
[data-page="productos-aire-comprimido.html"] .pip-ener .pip-lead { font-size: clamp(18px, 1.42vw, 23px); line-height: 1.6; }
[data-page="productos-aire-comprimido.html"] .pip-ener .story-text,
[data-page="productos-aire-comprimido.html"] .pip-ener .ticks li { font-size: clamp(15px, 1.159vw, 18px); line-height: 1.6; }
/* 27/09 — su orden: Certificaciones a todo el ancho, cada logo en su propia placa (mismo estilo que las cifras).
   Los logos salen de una tira de 2017 de 121 px de alto: se muestran a 100 px o menos para no ampliarlos. */
.pip-certs { list-style: none; margin: 0 0 clamp(40px, 4vw, 64px); padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); }
.pip-certs li { background: var(--white); border: 1px solid rgba(0,0,0,.1); border-radius: 22px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.06);
  padding: clamp(24px, 2.2vw, 36px) 16px clamp(20px, 1.8vw, 28px); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.pip-cert-logo { height: clamp(80px, 7vw, 100px); display: flex; align-items: center; justify-content: center; width: 100%; }
.pip-cert-logo img { max-height: 100%; max-width: 100%; width: auto; height: auto; display: block; mix-blend-mode: multiply; }
.pip-cert-name { font-size: clamp(15px, 1.159vw, 18px); font-weight: 600; color: var(--ink); line-height: 1.3; }
@media (max-width: 1020px) { .pip-certs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pip-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 27/09 (2) — su corrección: sin nombres debajo; una sola barra blanca a todo el ancho con los cinco logos repartidos. */
.pip-certs { display: flex; justify-content: space-around; align-items: center; gap: 24px; flex-wrap: wrap;
  background: var(--white); border: 1px solid rgba(0,0,0,.1); border-radius: 22px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.06);
  padding: clamp(24px, 2.4vw, 40px) clamp(20px, 3vw, 56px); }
.pip-certs li { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; flex: 0 1 auto; }
.pip-cert-logo { width: auto; }
.pip-cert-logo img { height: clamp(70px, 6.6vw, 100px); width: auto; max-width: none; }
@media (max-width: 600px) { .pip-certs { justify-content: center; gap: 20px 28px; } .pip-cert-logo img { height: 64px; } }
/* 27/09 (3) — su orden: logos de certificación más grandes. Cada logo se recortó justo a su borde (antes llevaba
   aire blanco alrededor), así que a 120 px de alto el logo mismo pasa de ~70 px a ~120 px. */
.pip-cert-logo { height: auto; }
.pip-cert-logo img { height: clamp(80px, 8.3vw, 124px); }
/* 27/09 (4) — su orden: el triple de espacio entre la barra de certificaciones y el video (58 -> 173 px a 1440). */
.pip-certs { margin-bottom: clamp(48px, 4.5vw, 72px); }   /* 28/09 (Nicolas): empty-space sweep — the tripled gap (up to 234 px on his window) goes back to one normal gap */

/* Monitoreo header = the InPlant container-and-truck photo (his ruling 27/09/2026): the WHOLE truck in frame, flag to wheels.
   The truck spans ~27-73% of the photo's height, so the band must show ~48% of it: height >= width / 3.1 on wide screens. */
/* 19/10/2026 Nicolas: cabecera de Productos y Marcas (misma foto) = su encuadre de PowerPoint a escala fija (lienzo de 1476 px de ancho,
   como en su diapositiva a 1469 px), igual en cualquier ventana de 1400 px o más; por debajo, «cover». */
body[data-page="productos.html"] .hero.photo, body[data-page="marcas.html"] .hero.photo { background-size: cover; }
@media (min-width: 1400px) { body[data-page="productos.html"] .hero.photo, body[data-page="marcas.html"] .hero.photo { background-size: max(1476px, 100%) auto; --p-hero-x: 0%; --p-hero-y: 41.45%; } }
/* 19/10/2026 Nicolas: cabecera de Conexiones = su encuadre de PowerPoint a escala fija (el lienzo mide 1549 px de ancho, como en su diapositiva V2 a 1469 px),
   así se ve igual en cualquier ventana de 1400 px o más; por debajo, «cover» con los acoples a la vista. */
body[data-page="productos-conexiones.html"] .hero.photo { background-size: cover; }
@media (min-width: 1400px) { body[data-page="productos-conexiones.html"] .hero.photo { background-size: max(1549px, 100%) auto; --p-hero-x: 0%; --p-hero-y: 16.69%; } }
/* 21/10/2026 (Nicolas): Monitoreo vuelve a la banda de 360 px como todas las cabeceras. La regla del 27/09 la agrandaba (ancho/3,1, hasta 640 px) y rompía su regla del 21/09: una sola altura, sin excepciones. El encuadre (camioneta entera, bandera a ruedas) va en la posición de la foto, en build.py. */
@media (max-width: 1020px) { body[data-page="productos-monitoreo.html"] .hero.photo { --p-hero-x: 100%; } }
/* 21/10/2026 (Nicolas, su PPT «211026 Monitoreo Cabecera V1»): a 1920 la foto mide 1753,5 px de ancho (91,33 %), su borde derecho
   queda 3,9 px fuera de la pantalla y arriba se recortan 145 px: posición 102,34 % / 70,54 %. Nunca más baja que la banda de 360 px
   (1116 px de ancho = 360 px de alto). En 1020 px o menos sigue el encuadre anterior. */
@media (min-width: 1021px) { body[data-page="productos-monitoreo.html"] .hero.photo { background-size: max(91.33%, 1116px) auto; --p-hero-x: 102.34%; --p-hero-y: 70.54%; } }
/* 27/09 — su orden: el video de Piping sin esquinas redondeadas. */
[data-page="productos-aire-comprimido.html"] .yt { border-radius: 0; }
/* 27/09 — video propio de Contix encima del de Parker: mismo marco, esquinas rectas. */
.yt video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #0d0d0d; object-fit: cover; }
[data-page="productos-aire-comprimido.html"] .pip-video-contix + .yt { margin-top: clamp(40px, 4vw, 64px); }
/* 27/09 — su orden: «Ahorro de energía» con EXACTAMENTE el formato de las franjas foto + texto
   (etiqueta pequeña arriba, mismos tamaños, mismos espacios, un solo tono de texto), en versión clara. */
[data-page="productos-aire-comprimido.html"] .pip-ener-head { margin-bottom: 0; }
[data-page="productos-aire-comprimido.html"] .pip-ener-head .pip-eyebrow { font-size: clamp(11px, .85vw, 13px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(0,0,0,.86); margin: 0 0 20px; }
[data-page="productos-aire-comprimido.html"] .pip-ener-head h2 { font-size: clamp(28px, 2.65vw, 44px); line-height: 1.18; letter-spacing: -.015em; margin: 0 0 24px; color: #000; }
[data-page="productos-aire-comprimido.html"] .pip-ener .pip-lead { font-size: clamp(18px, 1.42vw, 23px); line-height: 1.6; letter-spacing: normal; color: rgba(0,0,0,.92); margin: 0 0 28px; max-width: none; }
[data-page="productos-aire-comprimido.html"] .pip-ener .story-text { font-size: clamp(15px, 1.159vw, 18px); line-height: 1.6; color: rgba(0,0,0,.86); margin: 0 0 24px; max-width: none; }
[data-page="productos-aire-comprimido.html"] .pip-ener .ticks { margin: 0; max-width: none; }
[data-page="productos-aire-comprimido.html"] .pip-ener .ticks li { font-size: clamp(15px, 1.159vw, 18px); line-height: 1.6; color: rgba(0,0,0,.86); padding-top: 16px; padding-bottom: 16px; }
[data-page="productos-aire-comprimido.html"] .pip-ener .ticks li::before { top: calc(16px + .8em - 3px); }
[data-page="productos-aire-comprimido.html"] .pip-ener .ticks li:last-child { border-bottom: 0; padding-bottom: 0; }
/* 27/09 — su orden: «Ahorro de energía» pasa a franja foto + texto (texto a la izquierda, foto F3 en espera a la derecha),
   en versión clara sobre el gris; mismos tamaños y espacios que las demás franjas. «Instalación» se invierte: foto a la izquierda. */
.pip-panel.pip-panel-light { background: var(--wash); color: var(--ink); }
[data-page="productos-aire-comprimido.html"] .pip-panel.pip-panel-light .pip-eyebrow { color: rgba(0,0,0,.86); }
[data-page="productos-aire-comprimido.html"] .pip-panel.pip-panel-light .pip-panel-txt h2 { color: #000; }
[data-page="productos-aire-comprimido.html"] .pip-panel.pip-panel-light .pip-panel-txt > p:not(.pip-eyebrow):not(.story-text) { color: rgba(0,0,0,.92); margin-bottom: 28px; }
[data-page="productos-aire-comprimido.html"] .pip-panel.pip-panel-light .pip-panel-txt .story-text { color: rgba(0,0,0,.86); }
[data-page="productos-aire-comprimido.html"] .pip-panel.pip-panel-light .pip-panel-txt .ticks li { color: rgba(0,0,0,.86); border-bottom-color: var(--line); }
[data-page="productos-aire-comprimido.html"] .pip-panel.pip-panel-light .pip-panel-txt .ticks li b { color: #000; }
[data-page="productos-aire-comprimido.html"] .pip-panel.pip-panel-light .pip-panel-txt .ticks li:last-child { border-bottom: 0; padding-bottom: 0; }
[data-page="productos-aire-comprimido.html"] .pip-panel.pip-panel-light .pip-panel-txt .ticks { margin-bottom: 0; }
.pip-panel.pip-panel-light .pip-panel-img.pendiente { background: repeating-linear-gradient(135deg, #ececec, #ececec 14px, #e5e5e5 14px, #e5e5e5 28px); }
.pip-panel.pip-panel-light .ph-cod { color: rgba(0,0,0,.2); }
[data-page="productos-aire-comprimido.html"] .pip-panel.pip-panel-light.reverse .pip-panel-img::after { background: linear-gradient(to left, transparent 72%, rgba(247,247,247,.6) 88%, #f7f7f7 100%); }

/* 27-09-2026 (Nicolas): Productos · Industrial cards — «Ver productos» in a box under the WhatsApp box, same size and style,
   orange edge on hover; the whole card gets the orange edge on hover, like the Automotriz cards (.pclass:hover). */
.card.with-cta { transition: box-shadow .2s, border-color .2s; }
.card.with-cta:hover { border-color: var(--accent); box-shadow: 0 24px 50px -30px rgba(0,0,0,.5); }
.card.with-cta .cta-row { display: grid; grid-template-columns: fit-content(100%); gap: 12px; justify-content: start; }
.card.with-cta .cta-row .btn { justify-content: center; }
.btn.more-box { display: flex; align-items: center; background: var(--white); color: var(--ink); border: 2px solid #d9d9d9; font-weight: 600; text-align: center; transition: border-color .2s, box-shadow .2s; }
.btn.more-box:hover { background: var(--white); border-color: var(--accent); box-shadow: 0 6px 18px -8px rgba(255,159,28,.8); }
/* 27/09 — su orden: el bloque Parker Transair entra entero en la primera pantalla y queda centrado en el espacio
   que deja la cabecera de foto (mismo blanco arriba y abajo). Alto = pantalla − menú − cabecera. */
[data-page="productos-aire-comprimido.html"] :is(main, body) > section.section.pip-intro:not(.hero):not(.band) { box-sizing: border-box; display: grid; align-content: center; padding-top: var(--pip-air); padding-bottom: var(--pip-air);
       /* 28/09 (Nicolas): empty-space sweep — no first-screen stretch (248 px of air on his window); the page's normal air */ }
/* 27/09 — su orden: «Obra nueva» también en gris (versión clara de la franja). Botón en oscuro sobre gris; al pasar, naranja. */
[data-page="productos-aire-comprimido.html"] .pip-panel.pip-panel-light .pip-panel-txt .btn.ghost { color: var(--ink); border-color: rgba(0,0,0,.45); }
[data-page="productos-aire-comprimido.html"] .pip-panel.pip-panel-light .pip-panel-txt .btn.ghost:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* 27-09-2026 (Nicolas): one look everywhere — Industrial cards get the soft corners of the Automotriz cards; Automotriz cards get the «Ver productos» box under WhatsApp */
.card.with-cta { border-radius: 18px; }
.pclass .cta-row { display: grid; grid-template-columns: fit-content(100%); gap: 12px; justify-content: start; }
.pclass .cta-row .btn { justify-content: center; }
/* 27/09 — su orden: «Respaldo de fábrica» un poco más grande en todo (título como las franjas; subtítulos y texto mayores). */
[data-page="productos-aire-comprimido.html"] .pip-respaldo h2 { font-size: clamp(28px, 2.65vw, 44px); line-height: 1.18; letter-spacing: -.015em; }
[data-page="productos-aire-comprimido.html"] .pip-respaldo-grid h3 { font-size: clamp(19px, 1.55vw, 24px); line-height: 1.25; margin-bottom: 12px; }
[data-page="productos-aire-comprimido.html"] .pip-respaldo-grid p { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; }
/* Los tres textos arrancan a la misma altura aunque un subtítulo ocupe dos líneas. */
[data-page="productos-aire-comprimido.html"] .pip-respaldo-grid { grid-template-rows: auto auto; row-gap: 0; }
[data-page="productos-aire-comprimido.html"] .pip-respaldo-grid > * { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; }

/* 27-09-2026 (Nicolas, "dead space"): Productos — heading on top, paragraph running the full width of the page, a size larger.
   A side-by-side layout was tried the same day and REJECTED ("looks like shit") — do not bring it back. */
body[data-page="productos.html"] .section-head { max-width: none; }
body[data-page="productos.html"] .section-head .lead { max-width: none; font-size: clamp(18px, 1.75vw, 26px); line-height: 1.5; }
/* 27/09 — su orden: «Respaldo de fábrica» con 30 % menos de blanco arriba y abajo (114 -> 80 px a 1440). */
[data-page="productos-aire-comprimido.html"] :is(main, body) > section.pip-respaldo:not(.hero):not(.band):not(.pip-panel) { padding-top: calc(var(--pip-air) * .7); padding-bottom: calc(var(--pip-air) * .7); }

/* 27-09-2026 (Nicolas): Productos division heads — more air between heading and paragraph; «Ver todos los productos …» box
   on the paragraph's row, right end. Light grey box, grey edge, orange edge on hover — same size and corners as «Ver productos». */
body[data-page="productos.html"] .section-head h2 { margin-bottom: 24px; }
.head-row { display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); }
.head-row .lead { flex: 1 1 auto; margin: 0; }
.btn.all-box { flex: none; display: inline-flex; align-items: center; justify-content: center; background: #f2f2f2; color: var(--ink); border: 2px solid #d9d9d9; font-weight: 600; white-space: nowrap; transition: border-color .2s, box-shadow .2s; }
.btn.all-box:hover { background: #f2f2f2; border-color: var(--accent); box-shadow: 0 6px 18px -8px rgba(255,159,28,.8); }
@media (max-width: 899px) { .head-row { flex-direction: column; align-items: flex-start; gap: 20px; } .btn.all-box { white-space: normal; } }
.btn.all-box { min-width: 360px; }   /* both boxes the same width */
.wash .btn.all-box, .wash .btn.all-box:hover { background: var(--white); }   /* on the grey Automotriz band the box is white, like the cards on it */
@media (max-width: 899px) { .btn.all-box { min-width: 0; width: 100%; } }
.btn.all-box { text-align: center; }
/* 27-09-2026 (Nicolas): the «Ver todos» box sits next to the division TITLE, not the paragraph; paragraph full width below */
body[data-page="productos.html"] .head-row { justify-content: space-between; margin-bottom: 24px; }
body[data-page="productos.html"] .head-row h2 { margin: 0; }
body[data-page="productos.html"] .section-head > .lead { max-width: none; }
/* 27-09-2026 (Nicolas): the box sits right beside the title with a comfortable gap — not pushed to the far right */
body[data-page="productos.html"] .head-row { justify-content: flex-start; gap: 40px; }

/* 27-09-2026 (Nicolas): Marcas and every brand block — «Ver la marca» in a box under WhatsApp (same as «Ver productos»), orange edge on hover; the whole block gets the orange edge on hover */
.brand-block { transition: box-shadow .2s, border-color .2s; }
.brand-block:hover { border-color: var(--accent); box-shadow: 0 24px 50px -30px rgba(0,0,0,.5); }
.brand-block .cta-row { display: grid; grid-template-columns: fit-content(100%); gap: 12px; justify-content: start; }
.brand-block .cta-row .btn { justify-content: center; margin-left: 0; }

/* 27-09-2026 (Nicolas): Conexiones — each product photo centred in its card */
.pclasses.img-center .pclass-img { justify-content: center; }

/* 27-09-2026 (Nicolas): card WhatsApp buttons — logo larger and beside the text (never on top), text in two even lines
   «Contáctenos sobre / estos productos»; the max-width forces the break after «sobre». Same on every card grid. */
.pclass .btn.wa-link, .btn.wa-prod { flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px; padding: 10px 12px; text-align: left; white-space: normal; width: 100%; box-sizing: border-box; }   /* full width: no empty corner beside the button (Nicolas, 27-09-2026) */
.pclass .btn.wa-link svg, .btn.wa-prod svg { width: 28px; height: 28px; flex: none; }
.pclass .btn.wa-link span, .pclasses.four .btn.wa-link span, .btn.wa-prod span { font-size: 15px; line-height: 1.25; text-wrap: balance; }
/* One line wherever it fits; «Contáctenos sobre / estos productos» only when the button is too narrow for one line
   (Nicolas, 27-09-2026: two lines only in the narrow cards). One line needs ~297 px inside the button (text 259 + logo + gap). */
.btn.wa-prod { container-type: inline-size; }
@container (max-width: 304px) { .btn.wa-prod > span { max-width: 10.5em; } }
/* 27-09-2026 audit of every WhatsApp button: (1) brand sections were never narrower than 340 px, so on a 320 px phone the
   whole page slid sideways; (2) «Escríbanos por WhatsApp» on brand pages broke in two on small phones; (3) the grey
   «Solicitar documentación técnica» broke into three lines on small phones. */
.brand-row { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
@media (max-width: 420px) {
  .brand-intro .btn.wa-link { white-space: nowrap; padding-left: 14px; padding-right: 14px; font-size: 15px; }
  .ba-enquiry .btn.doc-link { padding-left: 12px; padding-right: 12px; }
}

/* 27-09-2026 (Nicolas): no empty space beside the buttons at the bottom of cards and brand blocks, on every page.
   The rows used to shrink to their content (fit-content), leaving a blank bottom-right corner. Now the buttons fill
   the row: stacked full-width in narrow cards, side by side splitting the width in wide blocks. */
.card.with-cta .cta-row, .pclass .cta-row, .brand-block .cta-row {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); justify-content: stretch; width: 100%;
}
.card.with-cta .cta-row .btn, .pclass .cta-row .btn, .brand-block .cta-row .btn { width: 100%; box-sizing: border-box; justify-content: center; text-align: center; }
.card.with-cta .cta-row .btn.wa-prod, .pclass .cta-row .btn.wa-prod, .brand-block .cta-row .btn.wa-prod { text-align: left; }
/* 28/09 his ruling: on the Monitoreo header the left half goes almost fully black; the workshop, technician and truck stay clear */
body[data-page="productos-monitoreo.html"] .hero.photo::before { background: linear-gradient(90deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.95) 18.0%, rgba(0,0,0,0.934) 23.5%, rgba(0,0,0,0.889) 29.0%, rgba(0,0,0,0.817) 34.5%, rgba(0,0,0,0.723) 40.0%, rgba(0,0,0,0.613) 45.5%, rgba(0,0,0,0.495) 51.0%, rgba(0,0,0,0.377) 56.5%, rgba(0,0,0,0.268) 62.0%, rgba(0,0,0,0.173) 67.5%, rgba(0,0,0,0.101) 73.0%, rgba(0,0,0,0.056) 78.5%, rgba(0,0,0,0.04) 84.0%, rgba(0,0,0,0.04) 100%) !important; }

/* Monitoreo 28/09: Marcas (grey half) and Servicios (white half) side by side, full-bleed halves */
.mon-split { background: linear-gradient(90deg, var(--wash) 50%, var(--white) 50%); }
.mon-split-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(80px, 11vw, 180px); align-items: stretch; }
.mon-half { display: flex; flex-direction: column; } .mon-half > h2 { margin-top: 0; }
.mon-half > .brand-block { flex: 1; display: flex; flex-direction: column; } .mon-half > .brand-block .cta-row { margin-top: auto; }
.mon-split { padding-top: clamp(64px, 7vw, 112px); padding-bottom: clamp(64px, 7vw, 112px); }
.mon-half > h2 { position: relative; padding-bottom: 18px; margin-bottom: 36px; }
.mon-half > h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; background: var(--accent); }
.mon-half > .brand-block { background: none; border: 0; border-radius: 0; padding: 0; display: flex; flex-direction: column; }
.mon-half .brand-card-logo { height: 112px; display: flex; align-items: center; margin-bottom: 24px; }
.mon-split .mon-half .brand-card-logo img { height: 104px; max-height: none; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.mon-half .brand-block p { font-size: 17px; line-height: 1.65; max-width: 34em; margin-bottom: 28px; }
.mon-half .cta-row { margin-top: auto; }
.inplant-card .cta-row .btn { width: auto; padding-left: 28px; padding-right: 28px; }
@media (max-width: 900px) { .mon-split { background: none; } .mon-split-grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; } .mon-half { padding: 40px 0; } .mon-half:first-child { background: var(--wash); box-shadow: 0 0 0 100vmax var(--wash); clip-path: inset(0 -100vmax); } }
.inplant-card .cta-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; } .inplant-card .cta-row .btn { width: 100%; padding-left: 16px; padding-right: 16px; } @media (max-width: 640px) { .inplant-card .cta-row { grid-template-columns: minmax(0, 1fr); } }

.mon-split #marca-parker .brand-card-logo img { height: 94px; }   /* Parker 10% smaller than InPlant (his ruling 28/09) */
.mon-split .brand-block, .mon-split .brand-block:hover { border-color: transparent; box-shadow: none; transform: none; }   /* no card here, so no card hover (28/09) */

/* Biblioteca técnica V2 (28/09, his ruling): one column, a big logo per brand, documents as full-width rows that explain themselves on hover */
.lib-one { max-width: 1080px; margin: 0 auto; }
.lib-brand { padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--line); }
.lib-brand:first-child { border-top: 0; padding-top: 0; }
.lib-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.lib-logo { height: clamp(56px, 6vw, 84px); display: flex; align-items: center; }
.lib-logo img { height: 100%; width: auto; max-width: min(420px, 70vw); object-fit: contain; object-position: left center; }
.lib-word { font-size: clamp(40px, 5vw, 64px); font-weight: 800; letter-spacing: -0.02em; }
.lib-count { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.lib-cat-block + .lib-cat-block { margin-top: 28px; }
.lib-one .lib-cat { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.lib-row { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 118px; align-items: center; gap: 18px;
  padding: 20px 20px 20px 18px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; overflow: hidden;
  transition: background-color .25s ease, padding-left .25s ease; }
.lib-cat-block .lib-row:last-child { border-bottom: 1px solid var(--line); }
.lib-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); transform: scaleY(0); transform-origin: center; transition: transform .25s ease; }
.lib-ico { width: 24px; height: 24px; color: var(--muted); transition: color .25s ease; }
.lib-main { display: flex; flex-direction: column; min-width: 0; }
.lib-title { font-size: clamp(18px, 1.35vw, 21px); font-weight: 600; line-height: 1.3; }
.lib-detail { font-size: 14px; color: var(--muted); max-height: 0; opacity: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: max-height .25s ease, opacity .25s ease, margin-top .25s ease; }
.lib-meta { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--muted); white-space: nowrap; }
.lib-go { justify-self: end; font-size: 15px; font-weight: 700; color: var(--ink); opacity: 0; transform: translateX(-10px); transition: opacity .25s ease, transform .25s ease; white-space: nowrap; }
.lib-go { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lib-row:hover, .lib-row:focus-visible { background: var(--wash); padding-left: 26px; outline: none; }
.lib-row:hover::before, .lib-row:focus-visible::before { transform: scaleY(1); }
.lib-row:hover .lib-ico, .lib-row:focus-visible .lib-ico { color: var(--accent); }
.lib-row:hover .lib-detail, .lib-row:focus-visible .lib-detail { max-height: 1.6em; opacity: 1; margin-top: 4px; }
.lib-row:hover .lib-go, .lib-row:focus-visible .lib-go { opacity: 1; transform: none; }
@media (hover: none), (max-width: 700px) { .lib-row { grid-template-columns: 24px minmax(0, 1fr); row-gap: 6px; } .lib-meta { grid-column: 2; } .lib-go { display: none; } .lib-detail { max-height: none; opacity: 1; margin-top: 4px; white-space: normal; } }
/* Biblioteca header (28/09): hero-biblioteca.jpg = wide shelf (4.8:1), fills the standard band; gentle fade behind the title */
body[data-page="biblioteca-tecnica.html"] .hero.photo::before { background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.6) 30%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.08) 100%) !important; }

/* Fajas de transmisión (Fernando, 25-09-2026): taller photo frame on this page only, so each belt can be seen whole. The edit panel's --p-pimg-h still wins. */
body[data-page="productos-fajas.html"] .pclass-img { height: var(--p-pimg-h, 200px); }
/* Marcas (Fernando, 28-09-2026): the products inside each brand's text, in bold black */
.brand-block p strong { color: var(--ink); font-weight: 600; }

/* 28/09/2026 (Nicolas): Servicios in two models — the InPlant grid (six cards, 3 × 2) and the «Kits en consignación» section */
.svc-eight.svc-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1020px) { .svc-eight.svc-six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .svc-eight.svc-six { grid-template-columns: minmax(0, 1fr); } }
.kits-text { max-width: 1080px; margin-bottom: clamp(24px, 2.4vw, 36px); }
.kits-ticks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(24px, 2.4vw, 40px); margin: 0 0 clamp(28px, 2.8vw, 40px); }
.kits-ticks li { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0 16px 22px; font-size: 17px; }
.kits-ticks li::before { top: calc(16px + 0.75em - 3px); }
@media (max-width: 900px) { .kits-ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kits-ticks { grid-template-columns: minmax(0, 1fr); } .kits-ticks li { border-top: 0; } .kits-ticks li:first-child { border-top: 1px solid var(--line); } }

/* 28/09/2026 (Nicolas), Servicios: the Cotizar + WhatsApp pair sits under the InPlant paragraph and under the kits paragraph («below the main text
   where it describes what it does»); the kit's four inclusions are photo cards like the InPlant grid (his stale screenshot still showed the tick
   panel); the kits text opens positive. .kits-ticks rules above are now unused. */
.svc-cta { margin-top: 8px; }
.kits-text { margin-bottom: 22px; }
.kits-head { margin-top: clamp(40px, 4vw, 64px); }
#kits-en-consignacion .kits-text { max-width: none; }   /* 28/09 (Nicolas): «THAT's the dead space» = the empty right half; the paragraph runs full width like the InPlant one */
/* 28/09 (Nicolas): «spacing in consignación should be equal between each one of the titles, subtitles, paragraphs» — one gap for the whole section */
#kits-en-consignacion { --kg: clamp(30px, 2.7vw, 46px); }   /* 28/09 (Nicolas): «too tight, more breathing room, don't go crazy»: 29 px → 39 px at 1440, 46 px from 1700 px up, still one gap everywhere */
#kits-en-consignacion .section-head { margin-bottom: 0; }
#kits-en-consignacion .section-head h2 { margin: 0 0 var(--kg); }
#kits-en-consignacion .lead { margin: 0 0 var(--kg); }
#kits-en-consignacion .kits-text { margin: 0 0 var(--kg); }
#kits-en-consignacion .svc-cta { margin-top: 0; }
#kits-en-consignacion .kits-head { margin: var(--kg) 0 var(--kg); }

/* 06/10/2026 (Fernando) — sub-páginas de mangueras (por presión y por tipo industrial): filas como en los catálogos de Contix
   por marca — foto de la manguera, nombre y código, norma, descripción; presión de trabajo y temperatura a la derecha. */
.cat-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(36px, 3.4vw, 56px); }
.cat-chips a { padding: 9px 18px; border: 2px solid #d9d9d9; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; background: var(--white); transition: border-color .2s; }
.cat-chips a:hover { border-color: var(--accent); }
.cat-chips a[aria-current="page"] { background: var(--accent); border-color: var(--accent); }
.cat-brand + .cat-brand { margin-top: clamp(48px, 4.6vw, 80px); }
.cat-brand-head { display: flex; align-items: center; gap: 24px; padding-bottom: 18px; border-bottom: 3px solid var(--ink); }
.cat-logo img { display: block; height: clamp(34px, 3vw, 46px); width: auto; max-width: 260px; object-fit: contain; }
.cat-brand-head p { margin: 0; color: var(--muted); font-size: 16px; }
.cat-row { display: grid; grid-template-columns: clamp(170px, 17vw, 260px) minmax(0, 1fr) clamp(190px, 16vw, 250px); gap: clamp(20px, 2.4vw, 44px); align-items: center;
  padding: clamp(18px, 1.8vw, 26px) 0; border-bottom: 1px solid var(--line); }
.cat-img img { display: block; width: 100%; height: clamp(70px, 6.4vw, 104px); object-fit: contain; }
.cat-main h3 { margin: 0 0 6px; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.25; color: var(--ink); }
.cat-code { font-size: .72em; font-weight: 600; color: var(--muted); margin-left: 6px; letter-spacing: .02em; }
.cat-std { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #b86a00; }
.cat-desc { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text); }
.cat-specs { margin: 0; display: grid; gap: 12px; }
.cat-specs div { margin: 0; }
.cat-specs dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 2px; }
.cat-specs dd { margin: 0; font-size: clamp(17px, 1.3vw, 20px); font-weight: 700; color: var(--ink); white-space: nowrap; }
.cat-notes { list-style: none; margin: 14px 0 0; padding: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
@media (max-width: 900px) {
  .cat-row { grid-template-columns: 120px minmax(0, 1fr); }
  .cat-specs { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .cat-specs dd { white-space: normal; }
}
@media (max-width: 560px) { .cat-row { grid-template-columns: minmax(0, 1fr); } .cat-img img { height: 80px; object-position: left center; } .cat-brand-head { flex-wrap: wrap; gap: 10px 18px; } }
.cat-brand-head .btn.wa-link { margin-left: auto; width: auto; flex: none; container-type: normal; white-space: nowrap; padding: 10px 18px; }   /* sin container-type: si no, el botón no toma el ancho de su texto */
@media (max-width: 560px) { .cat-brand-head .btn.wa-link { margin-left: 0; white-space: normal; } }
/* 06/10/2026 (Fernando) — Servicios, «¿Qué incluye?»: los ocho servicios InPlant del folleto (ícono naranja de trazo, título,
   descripción) en dos columnas, con una sola foto a la izquierda; la sección entera cabe en una pantalla. */
#sistema-integral-inplant .inplant-head { margin-bottom: 0; }
body[data-page="servicios.html"] .section.svc-incluye { padding-top: 0; padding-bottom: clamp(56px, 5.5vw, 88px); }
.svc-inc-grid { display: block; }
.svc-inc-body h2 { margin: 0 0 clamp(18px, 1.8vw, 28px); }
/* 06/10/2026 (Fernando) — Piping: tercer botón en la cabecera «Ver catálogo oficial» (PDF de Parker), en otro color que
   Cotizar (naranja) y WhatsApp (blanco): gris oscuro con texto blanco; al pasar, naranja con texto negro. */
.btn.cat-link { display: inline-flex; align-items: center; gap: 10px; background: #2b2b2b; color: var(--white); border: 2px solid #5a5a5a; font-weight: 600; }
.btn.cat-link svg { width: 20px; height: 20px; flex: none; }
.btn.cat-link:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* 06/10/2026 (Fernando) — Piping: clientes Transair en carrusel bajo la introducción. La introducción sube (menos blanco
   arriba) y deja sitio debajo para los logos. 4 a la vista (3 en tablet, 2 en móvil), flechas grises, avanza solo. */
[data-page="productos-aire-comprimido.html"] :is(main, body) > section.section.pip-intro:not(.hero):not(.band) { padding-top: calc(var(--pip-air) * .6); }
.pip-clientes { margin-top: calc(var(--pip-air, 96px) * .75); padding-top: calc(var(--pip-air, 96px) * .6); border-top: 1px solid var(--line); }
.pip-clientes-h { margin: 0 auto clamp(28px, 3vw, 48px); max-width: 40em; text-wrap: balance; text-align: center; font-size: clamp(24px, 2.2vw, 36px); line-height: 1.2; letter-spacing: -.015em; color: var(--ink); }
.cli-car { --cli-n: 4; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(8px, 1.2vw, 20px); }
.cli-view { overflow: hidden; }
.cli-track { list-style: none; margin: 0; padding: 0; display: flex; transition: transform .6s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.cli-item { flex: 0 0 calc(100% / var(--cli-n)); box-sizing: border-box; padding: 4px clamp(6px, .7vw, 12px); }
/* La tarjeta va en un envoltorio: en Piping las imágenes llevan esquinas rectas; las tarjetas, las de «Transair en números». */
.cli-card { display: flex; flex-direction: column; align-items: stretch; box-sizing: border-box; height: clamp(110px, 9vw, 140px); padding: clamp(20px, 1.8vw, 28px) clamp(20px, 2.2vw, 36px);
  background: var(--white); border: 1px solid rgba(0,0,0,.1); border-radius: 22px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.06); }
.cli-logo { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.cli-logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0; }   /* ancho y alto vienen de build.py (_cli_size): misma área para cada logo */
.cli-arrow { width: 48px; height: 48px; border-radius: 50%; border: 0; background: #ececec; color: #6e6e6e; cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .2s, color .2s; }
.cli-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cli-arrow:hover, .cli-arrow:focus-visible { background: #d9d9d9; color: #333; }
@media (max-width: 1020px) { .cli-car { --cli-n: 3; } }
@media (max-width: 600px) { .cli-car { --cli-n: 2; gap: 4px; } .cli-arrow { width: 34px; height: 34px; } .cli-item { padding: 4px 5px; } .cli-card { height: 92px; padding: 12px 10px; border-radius: 16px; } }
/* Primer video (YouTube) arriba del de presentación: mismo espacio entre videos que ya había entre los otros dos. */
[data-page="productos-aire-comprimido.html"] .pip-video-first + .pip-video-contix { margin-top: clamp(40px, 4vw, 64px); }

/* 06/10/2026 (Fernando) — Portada: Industrial y Automotriz en una sola sección y una fila cada una, para verlas juntas en
   una pantalla bajo «Trabajamos con las mejores marcas del mercado» (antes: dos secciones, Automotriz en dos filas). */
body[data-page="index.html"] .home-brands { padding: clamp(56px, 5.5vw, 88px) 0; }
body[data-page="index.html"] .home-brands .section-head { margin-bottom: clamp(28px, 2.6vw, 40px); }
body[data-page="index.html"] .home-brands .division + .division { margin-top: clamp(28px, 2.6vw, 44px); }
body[data-page="index.html"] .home-brands .division-head { margin-bottom: 18px; }
body[data-page="index.html"] .home-brands .division-head h3 { font-size: clamp(22px, 1.9vw, 28px); }
body[data-page="index.html"] .home-brands .division-head h3::after { margin-top: 10px; }
body[data-page="index.html"] .home-brands .logo-cell { height: clamp(112px, 8.6vw, 140px); padding: 18px; }
body[data-page="index.html"] .home-brands .logo-cell img { max-height: 64px; }
body[data-page="index.html"] .home-brands .logo-wall.n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
body[data-page="index.html"] .home-brands .logo-wall.n6 > .logo-cell { grid-column: auto; }
@media (max-width: 1020px) { body[data-page="index.html"] .home-brands .logo-wall.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { body[data-page="index.html"] .home-brands .logo-wall.n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body[data-page="index.html"] .home-clientes { padding: clamp(56px, 5.5vw, 88px) 0; border-top: 1px solid var(--line); }
body[data-page="index.html"] .home-clientes .pip-clientes { margin-top: 0; padding-top: 0; border-top: 0; }

/* 07/10/2026 (Fernando eligió el «Mosaico de fotos») — Servicios: «¿Qué incluye?» (8) y «¿Qué incluye el kit?» (4).
   Foto a todo el cuadro; ícono naranja y título SIEMPRE enteros abajo (nunca se cortan: el título no se mueve);
   al pasar el mouse o enfocar, la descripción se despliega debajo del título (grid-template-rows 0fr → 1fr). */
.mosaico { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); }
.mos-tile { position: relative; overflow: hidden; border-radius: 14px; height: clamp(300px, 22vw, 360px); background: #111; outline: none; isolation: isolate; }
.mos-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.mos-tile.cutout { background: radial-gradient(120% 90% at 50% 30%, #ffffff 0%, #eef0f2 60%, #dfe3e7 100%); }
.mos-tile.cutout > img { object-fit: contain; padding: 10% 12% 38%; box-sizing: border-box; }
.mos-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.84) 100%); transition: opacity .35s; }
.mos-tile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.92) 60%); opacity: 0; transition: opacity .35s; }
.mos-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 20px 20px; color: #fff; }   /* sube sobre la foto: el cuadro no cambia de alto */
.mos-ic { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); margin-bottom: 10px; }
.mos-ic svg { width: 22px; height: 22px; fill: none; stroke: #000; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mos-cap h3 { margin: 0; font-size: clamp(16px, 1.22vw, 19px); line-height: 1.25; color: #fff; }
.mos-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1); }
.mos-more > p { overflow: hidden; margin: 0; font-size: clamp(13px, .98vw, 14.5px); line-height: 1.5; color: rgba(255,255,255,.92); opacity: 0; transition: opacity .3s; }
.mos-tile:hover .mos-more, .mos-tile:focus-visible .mos-more, .mos-tile:focus-within .mos-more { grid-template-rows: 1fr; }
.mos-tile:hover .mos-more > p, .mos-tile:focus-visible .mos-more > p { opacity: 1; padding-top: 10px; }
.mos-tile:hover::before, .mos-tile:focus-visible::before { opacity: 1; }
.mos-tile:hover > img, .mos-tile:focus-visible > img { transform: scale(1.07); }
/* Sin mouse (celular, tablet): la descripción siempre visible, el cuadro crece con el texto. */
@media (max-width: 1299px) { .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mos-tile { height: 300px; } }   /* 4 columnas sólo donde la descripción entera cabe en el cuadro */
@media (hover: none), (max-width: 900px) {
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mos-tile { height: auto; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; }
  .mos-cap { position: relative; }
  .mos-more { grid-template-rows: 1fr; } .mos-more > p { opacity: 1; padding-top: 10px; }
  .mos-tile::after { background: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgba(0,0,0,.9) 72%); }
}
@media (max-width: 560px) { .mosaico { grid-template-columns: minmax(0, 1fr); } .mos-tile { min-height: 300px; } }
/* Kits: el logo «Contix Kits» como título de la sección, igual que InPlant arriba. */
body[data-page="servicios.html"] .kits-brand { margin: 0 0 clamp(16px, 1.6vw, 24px); }
/* 07/10/2026 (Fernando) — Nosotros y Certificación: los tres documentos de calidad (certificado SGS, IT 01, F-15) en tres cajas.
   Se ve la parte de arriba de cada documento (clic = documento entero); debajo, número, título y subtítulo como en su lámina. */
.cert-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 28px); margin: 8px 0 36px; }
.cert-doc { margin: 0; min-width: 0; display: flex; flex-direction: column-reverse; gap: 14px; }
.cert-doc a { display: block; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .2s, border-color .2s; }
.cert-doc a:hover { border-color: var(--accent); box-shadow: 0 6px 18px -8px rgba(255,159,28,.8); }
.cert-doc img { display: block; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 50% 0; border-radius: 0; }
.cert-doc figcaption { display: flex; gap: 12px; align-items: flex-start; }
.cert-n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--ink); font-weight: 700; display: grid; place-items: center; font-size: 16px; }
.cert-doc figcaption b { display: block; font-size: 16px; line-height: 1.3; color: var(--ink); }
.cert-doc figcaption small { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
@media (max-width: 760px) { .cert-docs { grid-template-columns: minmax(0, 1fr); } }
/* 13/10/2026 (Nicolas): la tarjeta «Biblioteca técnica» salió de Productos («es confusa»); quedan seis tarjetas en dos filas de tres, sin caso especial. */
/* ---- 07/10/2026 — «Buscar productos» bar on the Automotriz page (Nicolas): one orange bar in place of the four line cards; it opens buscador-automotriz.html ---- */
.buscar-band { background: var(--accent); color: var(--ink); }
.buscar-link { display: block; padding: clamp(48px, 4.6vw, 80px) 0; color: var(--ink); text-decoration: none; }
.buscar-link h2 { font-size: clamp(36px, 4.2vw, 68px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 12px; color: var(--ink); display: inline-block; transform-origin: left center; transition: transform .25s ease; }
.buscar-link h2::after { content: " →"; font-weight: 400; }
.buscar-link:hover h2 { transform: scale(1.03); }
.buscar-link p { margin: 0; max-width: 820px; font-size: 18px; color: var(--ink); }

/* 09/10/2026 (Nicolas) — Portada: tres efectos vistos en grupovoltekperu.com. Interruptores en build.py (HOME_CARRUSEL_CONTINUO,
   HOME_REVELAR, HOME_BANDA_FOTO); con los tres apagados ninguna de estas reglas aplica a nada. */

/* 1. Clientes en fila continua: los logos van dos veces seguidos y la pista corre media vuelta (-50 %) en 48 s, así el
   final empalma con el principio. Se detiene al pasar el mouse. Cada logo mide lo mismo que en el carrusel por pasos
   (un cuarto del ancho útil), para que el cambio de modo no cambie el tamaño de nada. */
.cli-continuo .cli-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.cli-continuo .cli-track { width: max-content; transition: none; animation: cli-glide var(--cli-vuelta, 48s) linear infinite; }
.cli-continuo .cli-item { flex: 0 0 auto; width: clamp(180px, calc((min(100vw, 1240px) - 2 * var(--gutter, 24px)) / 4), 310px); }
.cli-continuo:hover .cli-track, .cli-continuo:focus-within .cli-track { animation-play-state: paused; }
@keyframes cli-glide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Fernando, 12/10/2026: flechas a los lados de la fila continua (las mismas del carrusel por pasos). Con JS (.cli-js) la fila la
   mueve clientes.js y la animación CSS se apaga; sin JS sigue la animación y las flechas no se muestran. */
.cli-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(8px, 1.2vw, 20px); }
.cli-continuo:not(.cli-js) .cli-arrow { visibility: hidden; }
.cli-continuo.cli-js .cli-track { animation: none; }
.cli-continuo.cli-js .cli-marquee { overflow: hidden; }
@media (max-width: 1020px) { .cli-continuo .cli-item { width: clamp(180px, calc((100vw - 2 * var(--gutter, 24px)) / 3), 310px); } }
@media (max-width: 600px) { .cli-continuo .cli-item { width: calc((100vw - 2 * var(--gutter, 24px) - 76px) / 2); } .cli-fila { gap: 4px; } }   /* 76 px: las dos flechas de 34 px y sus espacios */
/* Nicolas, 19/10/2026 (opción B): clientes de la portada 1,5 veces más grandes en todos los anchos — tarjetas y logos (build.py,
   escala=1.5). En celular siguen dos por fila; sólo la tarjeta crece. --cli-vuelta 72 s: la misma velocidad que antes. */
body[data-page="index.html"] .home-clientes { --cli-vuelta: 72s; }
body[data-page="index.html"] .home-clientes .cli-continuo .cli-item { width: clamp(270px, calc((min(100vw, 1240px) - 2 * var(--gutter, 24px)) / 4 * 1.5), 465px); }
body[data-page="index.html"] .home-clientes .cli-card { height: clamp(165px, 13.5vw, 210px); }
@media (max-width: 1020px) { body[data-page="index.html"] .home-clientes .cli-continuo .cli-item { width: clamp(270px, calc((100vw - 2 * var(--gutter, 24px)) / 3 * 1.5), 465px); } }
@media (max-width: 600px) { body[data-page="index.html"] .home-clientes .cli-continuo .cli-item { width: calc((100vw - 2 * var(--gutter, 24px) - 76px) / 2); }
  body[data-page="index.html"] .home-clientes .cli-card { height: 115px; } }
@media (prefers-reduced-motion: reduce) {
  .cli-continuo .cli-track { animation: none; }
  .cli-continuo .cli-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }   /* sin movimiento: se desplaza a mano */
}

/* 2. Aparecer al entrar en pantalla: el bloque empieza invisible y 24 px más abajo; menu.js le pone .revelado cuando entra
   (hermanos escalonados 120 ms). Sólo esconde si <html class="js"> (la portada lo marca al cargar): sin JS, todo se ve.
   Con «reducir movimiento», todo se ve de entrada. */
html.js .revelar { opacity: 0; transform: translateY(24px); transition: opacity .7s ease-out, transform .7s cubic-bezier(.22, 1, .36, 1); will-change: opacity, transform; }
html.js .revelar.revelado { opacity: 1; transform: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) { html.js .revelar { opacity: 1; transform: none; transition: none; } }

/* 3. Banda «¿En qué podemos ayudarle?» con foto desenfocada detrás (la foto ya viene desenfocada de tools/fondo_portada.py):
   foto al 30 %, velo oscuro de arriba (70 %) a abajo (100 %), y dos resplandores naranjas de 64 px de desenfoque que flotan
   despacio (14 s y 18 s). El cuadro naranja de siempre queda delante, sin cambios (texto negro sobre naranja). */
.enq-foto { position: relative; isolation: isolate; overflow: hidden; background: #171310; padding: clamp(110px, 11vw, 170px) 0; }   /* más alta que una sección normal (88 px): la foto necesita sitio alrededor del cuadro */
.enq-foto .enq-fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.enq-foto .enq-fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.enq-foto .enq-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,19,16,.45), rgba(23,19,16,.6) 50%, rgba(23,19,16,.9)); }
.enq-foto .enq-brillo { position: absolute; border-radius: 50%; filter: blur(64px); }
.enq-foto .enq-brillo.a { left: -96px; top: 40px; width: 384px; height: 384px; background: rgba(255,159,28,.22); animation: enq-flota-a 14s ease-in-out infinite; }
.enq-foto .enq-brillo.b { right: 0; bottom: -128px; width: 448px; height: 448px; background: rgba(230,96,0,.16); animation: enq-flota-b 18s ease-in-out infinite; }
@keyframes enq-flota-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 30px) scale(1.12); } }
@keyframes enq-flota-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(50px, -30px) scale(1.08); } }
.enq-foto .ba-enquiry { box-shadow: 0 24px 60px rgba(0,0,0,.45); }
@media (prefers-reduced-motion: reduce) { .enq-foto .enq-brillo.a, .enq-foto .enq-brillo.b { animation: none; } }   /* misma especificidad que las reglas .a/.b */

/* 10/10/2026 (Nicolas) — Portada: «¿En qué podemos ayudarle?» como TIRA DE MATERIAL, a la manera de la banda «Discover how we
   can help» de hobro.digital (Awwwards): sin cuadro, un material renderizado a todo el ancho (caucho negro / acero cepillado /
   aluminio anodizado naranja, assets/img/portada/material-*.jpg), una línea en monoespaciada (IBM Plex Mono, sólo la portada la
   carga) y UN botón píldora; WhatsApp es un enlace subrayado, no un segundo botón. Interruptor HOME_TIRA en build.py. */
.enq-tira { position: relative; isolation: isolate; overflow: hidden; padding: clamp(44px, 4.8vw, 68px) 0; color: var(--white); background: #1c1c1c; }
.enq-tira .tira-material { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.enq-tira-naranja { color: var(--ink); background: var(--accent); }
.tira-wrap { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 1.8vw, 26px); text-align: center; }
.tira-linea { margin: 0; max-width: 84em; font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; font-size: clamp(11.5px, .92vw, 13.5px); line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; text-wrap: balance; }
.tira-linea strong { font-weight: 500; }
.enq-tira-caucho .tira-linea, .enq-tira-acero .tira-linea { color: rgba(255,255,255,.9); }
.tira-botones { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2vw, 28px); flex-wrap: wrap; }
.btn.tira-btn { border-radius: 999px; padding: 13px 26px; font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; transition: transform .2s ease, background .2s ease; }
.enq-tira-caucho .btn.tira-btn, .enq-tira-acero .btn.tira-btn { background: var(--white); color: var(--ink); border-color: var(--white); }   /* píldora blanca sobre material oscuro */
.enq-tira-naranja .btn.tira-btn { background: var(--ink); color: var(--white); border-color: var(--ink); }                                      /* negro sobre naranja (regla del sitio) */
.btn.tira-btn:hover { transform: translateY(-1px); }
.tira-wa { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .85; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.tira-wa:hover { opacity: 1; }
.tira-wa svg, .tira-wa .wa-ico { width: 16px; height: 16px; flex: none; }
@media (max-width: 600px) { .tira-linea .tira-sep { display: none; } .tira-linea strong { display: block; margin-bottom: 8px; } .tira-botones { flex-direction: column; gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .btn.tira-btn { transition: none; } }

/* 10/10/2026 (Nicolas) — Portada: «¿En qué podemos ayudarle?» como SECCIÓN ALTA con foto desenfocada, copia de la banda «Equipamos
   tu operación» de grupovoltekperu.com (leída de su código): la foto ya viene desenfocada en el archivo, va al 25 % bajo un velo
   oscuro (#1a1411 al 70 % arriba → 85 % → 100 % abajo) y dos discos de luz desenfocados (64 px) flotan despacio (14 s y 18 s).
   Encima: ojo pequeño naranja, titular grande blanco con la segunda línea en naranja, párrafo al 75 %, botones píldora.
   Interruptor HOME_SECCION_FOTO en build.py. */
.enq-seccion { position: relative; isolation: isolate; overflow: hidden; background: #1a1411; color: var(--white); padding: clamp(96px, 10vw, 150px) 0; min-height: min(72vh, 760px); display: flex; align-items: center; }
.enq-seccion .sec-fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.enq-seccion .sec-fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .25; }
.enq-seccion .sec-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,20,17,.7), rgba(26,20,17,.85) 50%, #1a1411); }
.enq-seccion .sec-brillo { position: absolute; border-radius: 50%; filter: blur(64px); }
.enq-seccion .sec-brillo.a { left: -96px; top: 40px; width: 384px; height: 384px; background: rgba(255,159,28,.2); animation: sec-flota-a 14s ease-in-out infinite; }
.enq-seccion .sec-brillo.b { right: 0; bottom: -128px; width: 448px; height: 448px; background: rgba(232,92,0,.15); animation: sec-flota-b 18s ease-in-out infinite; }
@keyframes sec-flota-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 30px) scale(1.12); } }
@keyframes sec-flota-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(50px, -30px) scale(1.08); } }
.sec-wrap { width: 100%; }
.sec-ojo { display: block; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.sec-titulo { margin: 0; font-size: clamp(44px, 6vw, 88px); line-height: .98; letter-spacing: -.025em; font-weight: 800; text-transform: uppercase; color: var(--white); max-width: 12em; }
.sec-titulo span { color: var(--accent); }
.sec-texto { margin: 28px 0 0; max-width: 36em; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: rgba(255,255,255,.75); }
.sec-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }
.btn.sec-btn { border-radius: 999px; padding: 14px 28px; font-size: 15px; font-weight: 600; }   /* naranja con texto negro: regla del sitio */
.sec-pill { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: rgba(255,255,255,.92); font-size: 15px; font-weight: 600; text-decoration: none; transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease; }
.sec-pill svg, .sec-pill .wa-ico { width: 18px; height: 18px; flex: none; }
.sec-pill:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--accent); color: var(--ink); }
@media (max-width: 600px) { .enq-seccion { min-height: 0; padding: 72px 0; } .sec-botones { flex-direction: column; align-items: stretch; } .sec-pill, .btn.sec-btn { justify-content: center; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .enq-seccion .sec-brillo.a, .enq-seccion .sec-brillo.b { animation: none; } .sec-pill { transition: none; } }

/* 10/10/2026 (Nicolas, «Velaris» de 21st.dev en naranja) — la sección «¿En qué podemos ayudarle?» con fondo vivo: un <canvas> WebGL a todo
   el cuadro (assets/js/fondo-vivo.js) en lugar de la foto y los resplandores. Fondo negro debajo por si WebGL falta o aún no dibujó. */
.enq-seccion-vivo { background: #000; }
.enq-seccion .sec-fondo-vivo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.enq-seccion-vivo .sec-texto { color: rgba(255,255,255,.8); }

/* 10/10/2026 (Nicolas) — El cuadro «¿En qué podemos ayudarle?» CONSERVA su forma (mismo cuadro, mismos bordes, mismo sitio, título a la
   izquierda, dos botones rectangulares a la derecha). Sólo cambia el relleno: el naranja plano pasa a ser el gradiente vivo (fondo-vivo.js,
   «Velaris» en naranja) recortado por el cuadro. Texto en blanco; Cotizar naranja con texto negro (regla del sitio); Escríbanos blanco. */
.ba-enquiry.ba-vivo { position: relative; overflow: hidden; isolation: isolate; background: #000; color: var(--white); box-shadow: 0 24px 60px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08); }
.ba-enquiry.ba-vivo > canvas.fondo-vivo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.ba-enquiry.ba-vivo > :not(canvas) { position: relative; z-index: 1; }
.ba-enquiry.ba-vivo h2 { color: var(--white); }
.ba-enquiry.ba-vivo p { color: rgba(255,255,255,.85); }
.ba-enquiry.ba-vivo .btn:not(.wa-link) { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.ba-enquiry.ba-vivo .btn.wa-link { background: var(--white); color: var(--ink); border-color: var(--white); }

/* 10/10/2026 (Nicolas) — Dentro del cuadro vivo: (1) botones con volumen: degradado vertical, filo de luz arriba, sombra interior
   abajo y sombra proyectada; se levantan al pasar el mouse y se hunden al pulsar. (2) Título letra a letra como el «HOBRO DIGITAL»
   de hobro.digital: cada letra sube desde abajo de su palabra (recortada) con un pequeño rebote, 45 ms entre letras; después la línea
   y los botones. Arranca con .revelado (el observador de menu.js). Sólo esconde con <html class="js">; con «reducir movimiento», quieto. */
.ba-enquiry.ba-vivo .btn { position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.22), 0 2px 3px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.35); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.ba-enquiry.ba-vivo .btn:not(.wa-link) { background: linear-gradient(180deg, #ffb347 0%, #ff9f1c 55%, #ef8c00 100%); border-color: #e88a00; }
.ba-enquiry.ba-vivo .btn.wa-link { background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 60%, #e6e6e6 100%); border-color: #d9d9d9; }
.ba-enquiry.ba-vivo .btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.22), 0 4px 6px rgba(0,0,0,.35), 0 16px 32px rgba(0,0,0,.4); filter: brightness(1.04); }
.ba-enquiry.ba-vivo .btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.3); }
.ba-letras h2.letras .palabra { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .26em; margin-bottom: -.26em; }   /* sitio para las colas de q, y, p */
.ba-letras h2.letras .letra { display: inline-block; }
html.js .ba-letras h2.letras .letra { opacity: 0; transform: translateY(115%); }
html.js .ba-letras p, html.js .ba-letras .cta-row { opacity: 0; transform: translateY(14px); }
html.js .ba-letras.revelado h2.letras .letra { animation: letra-sube .62s cubic-bezier(.2, 1.4, .35, 1) forwards; animation-delay: calc(var(--i) * 45ms + .15s); }
html.js .ba-letras.revelado p { animation: letra-sube .6s ease-out forwards; animation-delay: 1.35s; }
html.js .ba-letras.revelado .cta-row { animation: letra-sube .6s ease-out forwards; animation-delay: 1.55s; }
@keyframes letra-sube { from { opacity: 0; transform: translateY(115%); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  html.js .ba-letras h2.letras .letra, html.js .ba-letras p, html.js .ba-letras .cta-row { opacity: 1; transform: none; animation: none; }
  .ba-enquiry.ba-vivo .btn { transition: none; }
}

/* 12/10/2026 (Fernando) — Minería: las tres franjas foto + lista («se ve demasiado PPT») pasan a tarjetas (eligió la opción A de dos).
   Común: encabezado de sección, ícono naranja en un cuadro claro, tarjeta que se levanta y toma el borde naranja al pasar el mouse. */
.mx .mx-head { max-width: 860px; margin-bottom: clamp(24px, 2.4vw, 36px); }
.mx .mx-head h2, .mx h2 { margin-top: 0; }
.mx .mx-head p { font-size: clamp(17px, 1.25vw, 20px); line-height: 1.6; margin: 10px 0 0; }
.mx-ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #fff4e5; color: var(--accent-dark); transition: background .2s, color .2s; }
.mx-ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mx-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.mx-marcas { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.mx-marcas a { display: grid; place-items: center; height: 64px; padding: 0 18px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.mx-marcas img { max-height: 30px; max-width: 140px; width: auto; height: auto; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; border-radius: 0; }
.mx-marcas a:hover, .mx-marcas a:focus-visible { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(0,0,0,.45); }
.mx-marcas a:hover img, .mx-marcas a:focus-visible img { filter: none; opacity: 1; }

.mx-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 1.2vw, 18px); }
.mx-grid.g1 { grid-template-columns: minmax(0, 1fr); }
.mx-grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mx-grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mx-card { display: flex; flex-direction: column; gap: 14px; height: 100%; box-sizing: border-box; padding: clamp(18px, 1.6vw, 24px); background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  color: var(--text); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.mx-card p { margin: 0; font-size: clamp(16px, 1.1vw, 18px); line-height: 1.45; color: var(--ink); }
.mx-card h3 { margin: 0; font-size: clamp(17px, 1.2vw, 20px); line-height: 1.3; }
.mx-link p { color: var(--text); font-size: 15px; }
.mx-card:hover, a.mx-card:focus-visible { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(0,0,0,.5); }
.mx-card:hover .mx-ic, a.mx-card:focus-visible .mx-ic { background: var(--accent); color: var(--ink); }
.mx-go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.mx-link:hover .mx-arrow, .mx-todo:hover .mx-arrow { transform: translateX(4px); }
.mx-fila { flex-direction: row; align-items: center; }
.mx-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.mx-split h2 { margin-bottom: clamp(18px, 1.8vw, 26px); }
.mx-foto { margin: 0; position: relative; min-height: 320px; border-radius: 18px; overflow: hidden; }
.mx-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.mx-todo { position: relative; overflow: hidden; padding: 0; min-height: 220px; justify-content: flex-end; border: 0; }
.mx-todo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .4s; }
.mx-todo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.75)); }
.mx-todo span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 20px; color: #fff; font-weight: 700; font-size: 18px; }
.mx-todo:hover img { transform: scale(1.05); }
.mx-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(24px, 3vw, 48px); align-items: stretch; }
/* Sin espacio muerto (Fernando, 12/10): las dos tarjetas de la izquierda se estiran hasta el alto de la tarjeta «¿Por qué Contix?» */
.mx-duo > div:first-child { display: flex; flex-direction: column; }
.mx-duo .mx-grid.g1 { flex: 1; grid-auto-rows: 1fr; }
.mx-duo h2 { margin-bottom: clamp(18px, 1.8vw, 26px); }
.mx-porque { flex-direction: row; padding: 0; overflow: hidden; gap: 0; }
.mx-porque figure { margin: 0; flex: 0 0 42%; position: relative; min-height: 260px; overflow: hidden; }
.mx-porque figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .5s; }
.mx-porque:hover figure img { transform: scale(1.05); }
.mx-porque-txt { padding: clamp(20px, 2vw, 32px); }
.mx-porque-txt h2 { margin-bottom: 12px; font-size: clamp(24px, 2vw, 32px); }
.mx-porque-txt p { color: var(--text); font-size: 16px; line-height: 1.6; }
.mx-porque .mx-marcas { flex-wrap: nowrap; gap: 10px; }   /* los tres logos en una sola fila */
.mx-porque .mx-marcas li { flex: 1 1 0; min-width: 0; }
.mx-porque .mx-marcas a { height: 54px; padding: 0 12px; }
.mx-porque .mx-marcas img { max-width: 100%; max-height: 26px; }
@media (max-width: 1100px) { .mx-grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mx-duo, .mx-split { grid-template-columns: minmax(0, 1fr); } .mx-foto { min-height: 0; aspect-ratio: 16 / 9; } }
@media (max-width: 600px) { .mx-grid.g2, .mx-grid.g4 { grid-template-columns: minmax(0, 1fr); } .mx-porque { flex-direction: column; } .mx-porque figure { flex: none; aspect-ratio: 16 / 9; min-height: 0; } }

/* 12/10/2026 (Fernando) — Nosotros en tarjetas, como Minería (eligió la opción A de dos). Reutiliza .mx-card / .mx-ic / .mx-go. */
.mx-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nos-a h2 { margin-top: 0; }
.nos-a-hist { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.nos-a-hist h2 { margin-bottom: clamp(18px, 1.8vw, 26px); }
.nos-a-hist .story-text:last-child { margin-bottom: 0; }
.nos-a .historia-img { margin: 0; }
/* Fernando, 12/10: la foto entera (las reglas viejas de #nuestra-historia la recortaban a 360 px de alto y le ponían la barra naranja) */
#nuestra-historia.nos-a .historia-img { border-right: 0; align-self: center; }
#nuestra-historia.nos-a .historia-img img { height: auto; min-height: 0; aspect-ratio: 1800 / 1004; object-fit: contain; border-radius: 18px; }
/* la línea naranja bajo los títulos de sección, como en la página de antes (Fernando, 12/10) */
.nos-a h2::after { content: ""; display: block; width: 56px; height: 4px; background: var(--accent); margin-top: 18px; }
.nos-a .historia-img img { width: 100%; height: auto; aspect-ratio: 1800 / 1004; object-fit: cover; border-radius: 18px; display: block; }
.nos-a-div-lead { margin: clamp(36px, 3.6vw, 56px) 0 clamp(16px, 1.6vw, 22px); }
/* Nicolas, 20/10/2026: el doble de espacio entre la historia y la cita (era clamp(36px, 3.6vw, 56px)). */
.nos-a .letter.with-photo { margin-top: clamp(72px, 7.2vw, 112px); max-width: none; border-radius: 18px; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); }
.nos-a .mx-head { max-width: 1080px; margin-bottom: clamp(24px, 2.4vw, 36px); }
.nos-a .values-lead { margin: 6px 0 10px; font-size: clamp(22px, 1.9vw, 30px); }
.nos-a .values-intro { margin: 0; font-size: clamp(17px, 1.25vw, 20px); line-height: 1.6; }
/* valores como tarjetas: se levantan, borde naranja, el cuadro del ícono pasa a negro (los íconos son naranjas) */
.nos-a .pillar { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: clamp(22px, 2vw, 30px); transition: border-color .2s, box-shadow .2s, transform .2s, background .25s; }
.nos-a .pillar img.pillar-icon { width: 76px; height: 76px; margin: 0 0 18px; transition: transform .2s; }   /* sin cuadro de fondo (Fernando, 12/10) */
.nos-a .pillar:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(0,0,0,.5); }
.nos-a .pillar:hover img.pillar-icon { transform: scale(1.06); }
.nos-a .pillar p { font-size: clamp(16px, 1.1vw, 18px); }

@media (max-width: 1020px) { .nos-a-hist { grid-template-columns: minmax(0, 1fr); } .mx-grid.g3 { grid-template-columns: minmax(0, 1fr); } }
/* 12/10/2026 (Fernando): brand-page category cards open their product page (photo, title and text), like the Productos cards */
.pclass-link { display: flex; flex-direction: column; flex: 1 1 auto; color: inherit; text-decoration: none; }
.pclass-link:hover h3 { color: var(--ink); }

/* 13/10/2026 (Nicolas, desde la maqueta PPT de la sección) — Nuestra historia: el título va sobre las dos columnas; «Hoy representamos…»
   pasa a ser el tercer párrafo de la columna de texto (antes era una franja suelta a todo el ancho, con espacio muerto); la foto se alinea
   arriba con el primer párrafo y conserva su proporción entera; las tarjetas de división siguen enseguida. */
.nos-a-hist { align-items: start; }
#nuestra-historia.nos-a .historia-img { align-self: start; }
#nuestra-historia.nos-a > .wrap > h2 { margin-bottom: clamp(18px, 1.8vw, 26px); }
.nos-a-div { margin-top: clamp(28px, 2.8vw, 40px); }

/* 13/10/2026 (Nicolas) — Certificaciones en Nosotros: sólo número, título y subtítulo (sin imagen del documento ni botón «Ver certificación») */
.cert-doc.cert-doc-text { flex-direction: column; }

/* 13/10/2026 (Nicolas) — Nosotros, Certificaciones: tres tarjetas blancas con el símbolo directamente dentro (sello SGS, ícono de
   prensado, ícono de control de calidad; trazos engrosados), todo centrado, línea divisoria de borde a borde de la tarjeta, título y
   subtítulo debajo. Al pasar el mouse: la tarjeta se levanta con borde naranja y aparece la caja naranja «Ver certificación» dentro de la
   tarjeta; el clic abre el documento en la ventana emergente. Geometría de su edición en la maqueta PPT (13/10): divisor a todo el ancho,
   símbolos 10 px más arriba, 3 px más de aire bajo el divisor, el pie de rey al 95 % de los otros. Misma retícula que .mx-grid.g3. */
.cert-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); margin: clamp(24px, 2.4vw, 36px) 0 0; }
.cert-tile { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: clamp(20px, 1.8vw, 28px); background: var(--white); border: 1px solid var(--line); border-radius: 18px; text-align: center;
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.cert-tile:hover, .cert-tile:focus-visible { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(0,0,0,.5); }
.cert-tile-art { display: flex; align-items: center; justify-content: center; width: calc(100% + 2 * clamp(20px, 1.8vw, 28px)); margin: 0 calc(-1 * clamp(20px, 1.8vw, 28px));
  height: clamp(150px, 13vw, 200px); padding: 0 0 28px; border-bottom: 1px solid var(--line); box-sizing: content-box; }
.cert-tile-art img { display: block; width: auto; height: auto; max-width: 70%; max-height: 100%; transform: translateY(-10px); transition: transform .25s; }
.cert-tile-art.is-sello img { max-width: 58%; }
.cert-tile-art.is-calibre img { max-height: 95%; }
.cert-tile:hover .cert-tile-art img, .cert-tile:focus-visible .cert-tile-art img { transform: translateY(-10px) scale(1.04); }
.cert-tile-txt { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 23px; }
.cert-tile-txt b { font-size: clamp(17px, 1.2vw, 20px); line-height: 1.3; color: var(--ink); }
.cert-tile-txt small { font-size: 14px; color: var(--muted); }
/* la caja naranja «Ver certificación»: flota dentro de la tarjeta, sobre la parte baja del símbolo, sin reservar sitio (sin espacio muerto) */
.cert-tile { position: relative; }
.cert-tile-cta { position: absolute; left: 50%; top: calc(clamp(20px, 1.8vw, 28px) + clamp(150px, 13vw, 200px) - 8px); transform: translate(-50%, 6px);
  padding: 10px 18px; border-radius: 10px; background: var(--accent); color: var(--ink); font-size: 14px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.cert-tile:hover .cert-tile-cta, .cert-tile:focus-visible .cert-tile-cta { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .cert-tile-cta { opacity: 1; transform: translate(-50%, 0); } }   /* en celular no hay mouse: la caja se ve siempre */
/* ventana emergente */
.cert-dialog { border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); max-height: 94vh; overflow: visible; }
.cert-dialog::backdrop { background: rgba(10,10,10,.72); backdrop-filter: blur(3px); }
.cert-dialog figure { margin: 0; background: var(--white); border-radius: 18px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); display: flex; flex-direction: column; max-height: 94vh; }
.cert-dialog img { display: block; width: 100%; max-height: calc(94vh - 84px); object-fit: contain; background: #f4f4f4; }
.cert-dialog figcaption { padding: 16px 22px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.cert-dialog figcaption b { font-size: 17px; color: var(--ink); } .cert-dialog figcaption small { font-size: 14px; color: var(--muted); }
.cert-close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--accent); color: var(--ink); font-size: 26px; line-height: 40px; cursor: pointer; box-shadow: 0 6px 18px -6px rgba(0,0,0,.5); z-index: 1; }
.cert-dialog[open] figure { animation: cert-in .22s ease-out; }
@keyframes cert-in { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } }
html.cert-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .cert-tile, .cert-tile-art img, .cert-dialog[open] figure { transition: none; animation: none; } }
@media (max-width: 1020px) { .cert-tiles { grid-template-columns: minmax(0, 1fr); } .cert-close { top: 8px; right: 8px; } }

/* 14/10/2026 (Nicolas) — home: «Consulta rápida» removed. Under the title, the header's top-right pair: orange Cotizar and the white
   «Escríbanos por WhatsApp» with its green icon, same height. */
.home-hero .actions { align-items: stretch; }
.hh-wa { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none;
  background: var(--white); border: 2px solid #d9d9d9; border-radius: var(--radius); padding: 14px 22px; transition: border-color .15s, box-shadow .15s; }
.hh-wa:hover, .hh-wa:focus-visible { border-color: #25D366; box-shadow: 0 6px 18px -8px rgba(37,211,102,.7); }
@media (max-width: 520px) { .home-hero .actions > a { flex: 1 1 100%; justify-content: center; text-align: center; } }   /* phone: stacked, full width */
@media (max-width: 1020px) {
  /* the hero is one column on tablets and phones: the rule at «--p-form-w» (V118) re-imposed two columns at every width,
     so on a phone the old card sat on top of the headline (seen on main, 14/10/2026) */
  .hh-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 15/10/2026 (Nicolas: la animación letra a letra «looks like a 2001 animation … grab a pre made one») — fondo del cuadro «¿En qué podemos
   ayudarle?» copiado tal cual de 21st.dev, «Tailwind CSS background snippet» de ibelick:
   [background:radial-gradient(125%_125%_at_50%_10%,#000_40%,#63e_100%)]. Sólo el color sale de --deg-color (build.py HOME_CUADRO_DEGRADADO).
   Forma, sitio, título, línea y botones del cuadro, sin cambios. */
.ba-enquiry.ba-vivo.ba-degradado { background: radial-gradient(125% 125% at 50% 10%, #000 40%, var(--deg-color, #63e) 100%); }

/* 15/10/2026 (Nicolas: los botones del cuadro «want to be 3d but are not, and look cheap»). Interruptor HOME_CUADRO_BOTONES en build.py.
   (1) "plano": el par plano del encabezado / del título de la portada (.btn naranja liso; .hh-wa blanco con borde gris y ícono verde). */
.ba-enquiry.ba-vivo .botones-planos .btn { box-shadow: none; transform: none; filter: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.ba-enquiry.ba-vivo .botones-planos .btn:not(.wa-link) { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.ba-enquiry.ba-vivo .botones-planos .btn:not(.wa-link):hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.ba-enquiry.ba-vivo .botones-planos .btn.wa-link { display: inline-flex; align-items: center; gap: 10px; background: var(--white); border: 2px solid #d9d9d9; color: var(--ink); }
.ba-enquiry.ba-vivo .botones-planos .btn.wa-link .wa-ico, .ba-enquiry.ba-vivo .botones-planos .btn.wa-link svg { color: #25D366; }
.ba-enquiry.ba-vivo .botones-planos .btn.wa-link:hover { border-color: #25D366; box-shadow: 0 6px 18px -8px rgba(37,211,102,.7); }
.ba-enquiry.ba-vivo .botones-planos .btn:active { transform: none; box-shadow: none; }
/* (2) "3d": «pushable» de Josh W. Comeau (joshwcomeau.com/animation/3d-button/, código final del artículo) copiado tal cual; clases
   .shadow/.edge/.front renombradas push-sombra/push-canto/push-cara para no chocar con el resto del sitio. Cambios: colores Contix
   (cara naranja #FF9F1C con canto naranja quemado; cara blanca con canto gris), esquina 3 px (regla del sitio), relleno y letra del .btn. */
.ba-enquiry.ba-vivo .btn.push { position: relative; border: none; background: transparent; padding: 0; cursor: pointer; outline-offset: 4px; transition: filter 250ms;
  box-shadow: none; transform: none; -webkit-tap-highlight-color: transparent; user-select: none; }
.btn.push .push-sombra { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 3px; background: hsl(0deg 0% 0% / 0.25);
  will-change: transform; transform: translateY(2px); transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1); }
.btn.push .push-canto { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 3px;
  background: linear-gradient(to left, hsl(30deg 100% 16%) 0%, hsl(30deg 100% 30%) 8%, hsl(30deg 100% 30%) 92%, hsl(30deg 100% 16%) 100%); }
.btn.wa-link.push .push-canto { background: linear-gradient(to left, hsl(0deg 0% 45%) 0%, hsl(0deg 0% 66%) 8%, hsl(0deg 0% 66%) 92%, hsl(0deg 0% 45%) 100%); }
.btn.push .push-cara { display: flex; align-items: center; gap: 10px; position: relative; padding: 14px 22px; border-radius: 3px; font-size: 16px; color: var(--ink);
  background: #FF9F1C; will-change: transform; transform: translateY(-4px); transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1); }
.btn.wa-link.push .push-cara { background: var(--white); }
.btn.wa-link.push .push-cara .wa-ico, .btn.wa-link.push .push-cara svg { color: #25D366; }
.ba-enquiry.ba-vivo .btn.push:hover { filter: brightness(110%); transform: none; box-shadow: none; }
.btn.push:hover .push-cara { transform: translateY(-6px); transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5); }
.btn.push:active .push-cara { transform: translateY(-2px); transition: transform 34ms; }
.btn.push:hover .push-sombra { transform: translateY(4px); transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5); }
.btn.push:active .push-sombra { transform: translateY(1px); transition: transform 34ms; }
.ba-enquiry.ba-vivo .btn.push:active { transform: none; box-shadow: none; }
.btn.push:focus:not(:focus-visible) { outline: none; }
@media (max-width: 1100px) { .ba-enquiry.ba-vivo .btn.push { display: block; } .btn.push .push-cara { justify-content: center; width: 100%; box-sizing: border-box; } }   /* teléfono: la cara llena el botón (si no, el canto gris asoma a los lados) */
@media (prefers-reduced-motion: reduce) { .btn.push .push-cara, .btn.push .push-sombra { transition: none; } }

/* 15/10/2026 (Nicolas: «can be something like this too», 21st.dev «Full Screen Signup» de preetsuthar17). Su panel izquierdo NO es una imagen:
   es código. Copiado de su HTML (clases Tailwind traducidas 1:1): velo bg-linear-to-t from-transparent to-black; fila absoluta con
   backdrop-blur-2xl (40 px) de seis barras h-[40rem] w-[4rem], bg-linear-90 from-#ffffff00 via-#000 via-69% to-#ffffff30, opacity-30;
   sol w/h-[15rem] bg-orange-500 rounded-full bottom-0; dos óvalos w-[8rem] h-[5rem] bg-white rounded-full bottom-0. Único cambio: el sol
   en naranja Contix (#FF9F1C) en vez de orange-500 de Tailwind. Título, línea y botones encima (z 10). */
.ba-enquiry.ba-vivo.ba-barras { background: #000; }
.ba-barras .barras { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.ba-barras .barras > span { position: absolute; }
.ba-barras .barras-velo { inset: 0; z-index: 2; background: linear-gradient(to top, transparent, #000); }
.ba-barras .barras-fila { top: 0; left: 0; z-index: 2; display: flex; overflow: hidden; -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); }
.ba-barras .barras-fila i { display: block; height: 40rem; width: 4rem; opacity: .3; overflow: hidden; background: linear-gradient(90deg, #ffffff00 0%, #000000 69%, #ffffff30 100%); }
.ba-barras .barras-sol { z-index: 1; left: 0; bottom: 0; width: 15rem; height: 15rem; border-radius: 9999px; background: #FF9F1C; }
.ba-barras .barras-ovalo { z-index: 1; left: 0; bottom: 0; width: 8rem; height: 5rem; border-radius: 9999px; background: #fff; }
.ba-enquiry.ba-vivo.ba-barras > :not(.barras) { position: relative; z-index: 10; }
.ba-enquiry.ba-vivo.ba-barras > .barras { position: absolute; z-index: 0; }   /* gana a «.ba-vivo > :not(canvas) { position: relative }» */
/* La fila de barras cubre todo el cuadro (30 barras de 4rem; el resto lo recorta overflow): con 6, como en el original, terminaban a 384 px
   con un corte duro en medio del negro; en el original ese borde quedaba tapado por el formulario. */
.ba-enquiry.ba-vivo.ba-barras .barras-fila { right: 0; bottom: 0; }

/* 15/10/2026 (Nicolas: «copy one-to-one»). Tarjeta «Full Screen Signup» de preetsuthar17 (21st.dev), valores leídos del componente en vivo
   (getComputedStyle sobre cdn.21st.dev/preetsuthar17/full-screen-signup): max-w-5xl, shadow-xl, mitades md:w-1/2 con p-8 / md:p-12,
   título text-2xl / md:text-3xl font-medium leading-tight tracking-tight, panel derecho bg-secondary oklch(0.97 0 0), ícono lucide «sun»
   h-10 text-orange-500, botón w-full bg-orange-500 texto blanco rounded-lg py-2 px-4, línea inferior text-sm text-gray-600, letra del sistema
   (ui-sans-serif). Sin cambios de color ni de tamaño. */
.ds-card { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 64rem; margin: 0 auto; overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; color: oklch(0.145 0 0); font-size: 16px; line-height: 24px; }
.ds-velo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; background: linear-gradient(to top in oklab, rgba(0,0,0,0) 0%, #000 100%); }
.ds-fila { position: absolute; top: 0; left: 0; z-index: 2; display: flex; overflow: hidden; -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); }
.ds-barra { height: 40rem; width: 4rem; z-index: 2; opacity: .3; overflow: hidden; background: linear-gradient(90deg in oklab, #ffffff00 0%, #000000 69%, #ffffff30 100%); }
.ds-sol { position: absolute; left: 0; bottom: 0; z-index: 1; width: 15rem; height: 15rem; border-radius: 9999px; background: oklch(0.705 0.213 47.604); }
.ds-ovalo { position: absolute; left: 0; bottom: 0; z-index: 1; width: 8rem; height: 5rem; border-radius: 9999px; background: #fff; }
.ds-izq { position: relative; background: #000; color: #fff; padding: 2rem; border-bottom-left-radius: 1.5rem; overflow: hidden; }
.ds-titulo { position: relative; z-index: 10; margin: 0; color: #fff; font-family: inherit; font-size: 1.5rem; line-height: 1.25; font-weight: 500; letter-spacing: -0.025em; }
.ds-der { display: flex; flex-direction: column; padding: 2rem; background: oklch(0.97 0 0); color: oklch(0.205 0 0); z-index: 99; }
.ds-cabeza { display: flex; flex-direction: column; margin-bottom: 2rem; }
.ds-icono { color: oklch(0.705 0.213 47.604); margin-bottom: 1rem; } .ds-icono svg { width: 2.5rem; height: 2.5rem; display: block; }
.ds-linea { margin: 0; text-align: left; opacity: .8; font-size: 16px; line-height: 24px; color: inherit; max-width: none; }
.ds-acciones { display: flex; flex-direction: column; gap: 1rem; }
.ds-boton { display: block; width: 100%; box-sizing: border-box; text-align: center; background: oklch(0.705 0.213 47.604); color: #fff; font-weight: 500; padding: .5rem 1rem; border-radius: 10px; text-decoration: none; transition: background-color .15s; }
.ds-boton:hover { background: oklch(0.646 0.222 41.116); }   /* hover:bg-orange-600 */
.ds-pie { text-align: center; color: oklch(0.446 0.03 256.802); font-size: 14px; line-height: 20px; }
.ds-pie a { color: oklch(0.205 0 0); font-weight: 500; text-decoration: underline; }
@media (min-width: 768px) { .ds-card { flex-direction: row; } .ds-izq, .ds-der { width: 50%; padding: 3rem; box-sizing: border-box; } .ds-titulo { font-size: 1.875rem; } }

/* 15/10/2026 (Nicolas: «multiple localhosts with multiple options», copiar 1:1). Tres CTA de 21st.dev, valores leídos con getComputedStyle
   de cada componente en vivo (cdn.21st.dev). Común: letra del sistema, botones shadcn (h-10, px-4, rounded-md 8 px, text-sm 500; primario
   oklch(0.205) con texto oklch(0.985), hover /90; secundario blanco con borde oklch(0.922), hover bg-accent oklch(0.97)). Interruptor
   HOME_CUADRO_FONDO = "cta-g" | "cta-h" | "cta-i" en build.py. */
.c21 { font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; color: oklch(0.145 0 0); font-size: 16px; line-height: 24px; }
.c21 h2, .c21 h3, .c21 p { font-family: inherit; max-width: none; }
.c21-btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border-radius: 8px; font-size: 14px; line-height: 20px; font-weight: 500; height: 40px; padding: 8px 16px; box-sizing: border-box; text-decoration: none; transition: color .15s, background-color .15s, border-color .15s; }
.c21-prim { background: oklch(0.205 0 0); color: oklch(0.985 0 0); }
.c21-prim:hover { background: oklch(0.205 0 0 / .9); }
.c21-sec { background: oklch(1 0 0); color: oklch(0.145 0 0); border: 1px solid oklch(0.922 0 0); }
.c21-sec:hover { background: oklch(0.97 0 0); color: oklch(0.205 0 0); }
.c21-btn svg { width: 16px; height: 16px; margin-left: 4px; flex: none; }
/* G — brijr «Call to Action» (call-to-action-three): section py-8 md:py-12 px-4; caja max-w-5xl, flex col centro, gap 24, p-6 / sm:p-8 / md:p-12,
   rounded-lg / md:rounded-xl (14 px), borde oklch(0.922), fondo bg-accent/50; h2 16 px 400; h3 text-muted-foreground oklch(0.556);
   segundo botón = enlace «Learn More ->» (text-primary, hover:underline). */
.c21g { padding: 32px 16px; }
.c21g-caja { margin: 0 auto; max-width: 64rem; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px; border: 1px solid oklch(0.922 0 0); border-radius: 10px; background: oklab(0.97 0 0 / .5); text-align: center; box-sizing: border-box; }
.c21g-h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 400; color: oklch(0.145 0 0); letter-spacing: normal; }
.c21g-h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 400; color: oklch(0.556 0 0); letter-spacing: normal; }
.c21g-botones { display: flex; align-items: center; gap: 8px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.c21g-link { background: transparent; color: oklch(0.205 0 0); text-underline-offset: 4px; }
.c21g-link:hover { text-decoration: underline; }
@media (min-width: 640px) { .c21g-caja { padding: 32px; } }
@media (min-width: 768px) { .c21g { padding: 48px 16px; } .c21g-caja { padding: 48px; border-radius: 14px; } }
/* H — Efferd «CTA 3»: caja max-w-3xl, borde arriba y abajo, fondo radial-gradient(35% 80% at 25% 0%, foreground/8 %, transparente),
   px-4 py-8, gap-y-6; cuatro «+» de lucide en las esquinas; líneas laterales que sobresalen 24 px; línea discontinua al centro (-z-10);
   h2 text-2xl bold centrado; p muted; botones: secundario (borde) y primario con flecha. Su contenedor: p-4. */
.c21h { padding: 16px; display: flex; align-items: center; justify-content: center; }
.c21h-caja { position: relative; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-between; row-gap: 24px; width: 100%; max-width: 48rem; box-sizing: border-box;
  border-top: 1px solid oklch(0.922 0 0); border-bottom: 1px solid oklch(0.922 0 0); padding: 32px 16px;
  background: radial-gradient(35% 80% at 25% 0%, oklab(0.145 0 0 / 0.08), rgba(0,0,0,0)); }
.c21h-mas { position: absolute; z-index: 1; width: 24px; height: 24px; color: oklch(0.145 0 0); }
.c21h-mas.tl { top: -12.5px; left: -11.5px; } .c21h-mas.tr { top: -12.5px; right: -11.5px; } .c21h-mas.bl { bottom: -12.5px; left: -11.5px; } .c21h-mas.br { bottom: -12.5px; right: -11.5px; }
.c21h-lado { position: absolute; top: -24px; bottom: -24px; width: 1px; pointer-events: none; }
.c21h-lado.izq { left: 0; border-left: 1px solid oklch(0.922 0 0); } .c21h-lado.der { right: 0; border-right: 1px solid oklch(0.922 0 0); }
.c21h-centro { position: absolute; z-index: -10; top: 0; left: 50%; height: 100%; border-left: 1px dashed oklch(0.922 0 0); }
.c21h-texto > * + * { margin-top: 4px; }
.c21h-h2 { margin: 0; text-align: center; font-weight: 700; font-size: 24px; line-height: 32px; color: oklch(0.145 0 0); letter-spacing: normal; }
.c21h-p { margin: 0; text-align: center; color: oklch(0.556 0 0); font-size: 16px; line-height: 24px; }
.c21h-botones { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
/* I — Méschac Irung «Call To Action»: section py-16 / md:py-32; max-w-5xl px-6; centrado; h2 text-4xl / lg:text-5xl semibold text-balance;
   p mt-4; botones mt-12, flex-wrap, gap-4, h-11 px-8 rounded-md. */
.c21i { padding: 64px 0; }
.c21i-wrap { margin: 0 auto; max-width: 64rem; padding: 0 24px; }
.c21i-centro { text-align: center; }
.c21i-h2 { margin: 0; font-size: 36px; line-height: 40px; font-weight: 600; text-wrap: balance; color: oklch(0.145 0 0); letter-spacing: normal; }
.c21i-p { margin: 16px 0 0; font-size: 16px; line-height: 24px; color: oklch(0.145 0 0); }
.c21i-botones { margin-top: 48px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.c21i-btn { height: 44px; padding: 0 32px; }
@media (min-width: 768px) { .c21i { padding: 128px 0; } }
@media (min-width: 1024px) { .c21i-h2 { font-size: 48px; line-height: 48px; } }
.c21h { padding-top: 48px; padding-bottom: 48px; }   /* sitio: en el original la tarjeta está centrada en una pantalla vacía; aquí sus líneas laterales (24 px fuera de la caja) chocaban con el pie */

/* 15/10/2026 — variantes de la tarjeta «Full Screen Signup» (HOME_CUADRO_VARIANTE). La tarjeta no cambia; sólo alto, ancho o naranja. */
@media (min-width: 768px) { .ds-card.ds-alta { min-height: 492px; } }   /* alto del componente original (su formulario lo daba) */
.ds-card.ds-ancha { max-width: none; }                                  /* ancho de contenido de la página (.wrap), como las demás secciones */
.ds-card.ds-contix .ds-sol { background: #FF9F1C; }
.ds-card.ds-contix .ds-icono { color: #FF9F1C; }
.ds-card.ds-contix .ds-boton { background: #FF9F1C; color: #000; }
.ds-card.ds-contix .ds-boton:hover { background: #E88A00; }
/* 15/10/2026 — opciones de animación de la tarjeta (HOME_CUADRO_VARIANTE), cada una copiada de una fuente ya hecha:
   ds-beam  = «Border Beam» (21st.dev, badtz): el mismo haz que la placa Transair y la tarjeta de Minería (--pip-beam, pip-beam-run, 8 s).
   ds-flota = el sol flota como los resplandores de grupovoltekperu.com (keyframes enq-flota-a: 14 s, -40 px / 30 px, escala 1,12).
   ds-blur  = «Blur Fade» de Magic UI (registry/magicui/blur-fade.tsx): de blur(6px), y -6 px, opacidad 0 a nítido en 0,4 s easeOut,
              retraso 0,04 s + 0,25 s por elemento (su demo de texto); arranca con .revelado (observador de menu.js). */
.ds-card.ds-beam::after { content: ""; position: absolute; inset: 0; z-index: 100; padding: 1.5px; pointer-events: none; border-radius: inherit;
  background: conic-gradient(from var(--pip-beam), transparent 0deg 300deg, rgba(255,159,28,.35) 325deg, #FF9F1C 350deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: pip-beam-run 8s linear infinite; }
.ds-card.ds-flota .ds-sol { animation: enq-flota-a 14s ease-in-out infinite; }
html.js .ds-card.ds-blur .ds-titulo, html.js .ds-card.ds-blur .ds-cabeza, html.js .ds-card.ds-blur .ds-acciones { opacity: 0; transform: translateY(-6px); filter: blur(6px); }
html.js .ds-card.ds-blur.revelado .ds-titulo, html.js .ds-card.ds-blur.revelado .ds-cabeza, html.js .ds-card.ds-blur.revelado .ds-acciones {
  opacity: 1; transform: none; filter: blur(0px); transition: opacity .4s ease-out, transform .4s ease-out, filter .4s ease-out; }
html.js .ds-card.ds-blur.revelado .ds-titulo { transition-delay: .29s; }
html.js .ds-card.ds-blur.revelado .ds-cabeza { transition-delay: .54s; }
html.js .ds-card.ds-blur.revelado .ds-acciones { transition-delay: .79s; }
@media (prefers-reduced-motion: reduce) {
  .ds-card.ds-beam::after { animation: none; opacity: 0; } .ds-card.ds-flota .ds-sol { animation: none; }
  html.js .ds-card.ds-blur .ds-titulo, html.js .ds-card.ds-blur .ds-cabeza, html.js .ds-card.ds-blur .ds-acciones { opacity: 1; transform: none; filter: none; transition: none; }
}
/* 15/10/2026 (Nicolas, con captura: «Is there a reason you're not making the text bigger so it takes up all that space … It looks empty … hard to
   read»). La tarjeta va al ancho de la página (mitades de ~674 px a 1440, no 512 como el original): el texto del original (título 30 px, línea
   16 px, enlace 14 px) quedaba diminuto. Título a lo ancho de la mitad negra en dos líneas; línea, botón y enlace a tamaño legible. */
.ds-card .ds-titulo { font-size: clamp(36px, 4.3vw, 80px); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.ds-card .ds-linea { font-size: clamp(18px, 1.45vw, 26px); line-height: 1.4; }
.ds-card .ds-boton { font-size: clamp(16px, 1.2vw, 20px); padding: .75rem 1rem; }
.ds-card .ds-pie { font-size: clamp(15px, 1.1vw, 18px); line-height: 1.4; }
.ds-card .ds-icono svg { width: clamp(40px, 3.2vw, 56px); height: clamp(40px, 3.2vw, 56px); }
/* Las barras cubren el 75 % de la mitad negra, como en el original (6 × 64 = 384 px de una mitad de 512): con la tarjeta al ancho de la página
   quedaban en el 57 % y dejaban un corte duro y un bloque negro liso bajo el título. Mismas barras de 4rem; la fila recorta las que sobran. */
@media (min-width: 768px) { .ds-card .ds-fila { width: 37.5%; } }
.ds-card .ds-fila { width: 75%; }
@media (min-width: 768px) { .ds-card .ds-fila { width: 37.5%; } }
.ds-card .ds-barra { flex: none; }

/* 16/10/2026 — mitad negra con la imagen nítida (HOME_CUADRO_IMAGEN): el brillo anclado abajo a la izquierda, como en el original. */
.ds-card .ds-izq[style*="panel-vidrio"] { background-color: #000; background-size: cover; background-position: left bottom; background-repeat: no-repeat; }
/* 15/10/2026 (Nicolas) — Nosotros, «Nuestras divisiones»: proporciones copiadas de home.sandvik/en/offerings (medidas a 1600 px):
   banda a todo el ancho con 128 px arriba y abajo y 128 px desde el contenido anterior; tres tarjetas a 32 px; imagen 440:248;
   título 32 px peso normal #101010 a 32 px de la imagen; texto 16/24 px a 22 px del título, 75 % del ancho; 32 px de relleno.
   Esquinas 16 px. Colores (su ruling): banda #f7f7f7, zona del dibujo blanca, zona del texto #ececec. Al pasar el mouse: cuatro
   marcos naranjas en diagonal detrás, la tarjeta sube 24 px con contorno y brillo naranja. Sin flechas. */
.ndv-band { margin: 128px calc(50% - 50vw) 0; padding: 128px calc(50vw - 50%); background: #f7f7f7; }
.ndv-band > h2 { margin: 0 0 clamp(28px, 2.6vw, 44px); }
.ndv { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ndv li { position: relative; }
.ndv-ly { position: absolute; inset: 0; border: 1.5px solid var(--accent); border-radius: 16px; background: #fff; opacity: 0; transition: transform .35s ease, opacity .35s ease; }
.ndv-card { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; border-radius: 16px; overflow: hidden; background: #ececec; color: #101010; text-decoration: none;
  outline: 1.5px solid transparent; transition: transform .35s ease, box-shadow .35s ease, outline-color .35s; }
.ndv-img { position: relative; display: block; aspect-ratio: 440 / 248; background: #fff; }
.ndv-img i { position: absolute; inset: 6% 8%; background: var(--accent-dark); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ndv li:nth-child(2) .ndv-img i { inset: 6% 14%; }
.ndv-txt { display: flex; flex-direction: column; gap: 22px; padding: 32px; background: #ececec; }
.ndv-t { font-size: 32px; line-height: 38.4px; font-weight: 400; color: #101010; }
.ndv-d { max-width: 75%; font-size: 16px; line-height: 24px; color: #101010; }
.ndv li:has(.ndv-card:is(:hover, :focus-visible)) .ndv-ly:nth-child(1) { opacity: .2; }
.ndv li:has(.ndv-card:is(:hover, :focus-visible)) .ndv-ly:nth-child(2) { opacity: .4; transform: translate(6px, -6px); }
.ndv li:has(.ndv-card:is(:hover, :focus-visible)) .ndv-ly:nth-child(3) { opacity: .6; transform: translate(12px, -12px); }
.ndv li:has(.ndv-card:is(:hover, :focus-visible)) .ndv-ly:nth-child(4) { opacity: .8; transform: translate(18px, -18px); }
.ndv-card:is(:hover, :focus-visible) { transform: translate(24px, -24px); outline-color: var(--accent); box-shadow: 0 0 34px rgba(255,159,28,.45), 0 28px 50px -24px rgba(0,0,0,.35); }
@media (max-width: 1100px) { .ndv-t { font-size: 26px; line-height: 1.2; } .ndv-d { max-width: none; } .ndv-txt { padding: 24px; gap: 12px; } }
@media (max-width: 760px) { .ndv { grid-template-columns: 1fr; } .ndv-band { margin-top: 64px; padding-top: 64px; padding-bottom: 64px; } }
@media (prefers-reduced-motion: reduce) { .ndv-card, .ndv-ly { transition: none; } }
.ndv-band > h2::after { display: none; }

/* 15/10/2026 (Nicolas) — vuelve el velo: al pasar el mouse, la zona del dibujo se cubre con un velo negro al 78 % (se ve el
   dibujo detrás) y «Ir a la división» en blanco a 32 px, el tamaño de los nombres. Se había perdido al pasar a los colores definitivos (la opción C de la ronda Sandvik). */
.ndv-ov { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.78); color: #fff; font-size: 32px; font-weight: 600; letter-spacing: -.01em; opacity: 0; transition: opacity .35s; }
.ndv-img i { transition: opacity .35s; }
.ndv-card:is(:hover, :focus-visible) .ndv-ov { opacity: 1; }
.ndv-card:is(:hover, :focus-visible) .ndv-img i { opacity: 1; }
@media (hover: none) { .ndv-ov { display: none; } }
/* 15/10/2026 (Nicolas, opción B): la barra de cifras de la portada en vidrio «liquid glass» con un solo borde de 1 px.
   Antes el borde superior se veía de ~3 px: borde de 1 px + línea interior blanca de 2 px + brillo superior (.glass::after), y la barra
   quedaba en medio píxel (alto 129,48 px, desplazada -64,74 px), lo que difuminaba el borde. Ahora: un solo borde dibujado con máscara
   (técnica gradient-border: content-box excluido), más claro en las esquinas superior izquierda e inferior derecha; vidrio
   blur 22 px + saturación 185 %; alturas de línea y desplazamiento redondeados a píxel entero para que el borde caiga nítido. */
.first-screen .stats.glass { border: 0; padding: 1px;   /* el 1 px del borde viejo pasa a relleno: la barra conserva su tamaño (home_lock) */
  background: linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.035) 45%, rgba(255,255,255,.06) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(185%) brightness(1.06); backdrop-filter: blur(22px) saturate(185%) brightness(1.06);
  box-shadow: 0 34px 70px -18px rgba(0,0,0,.8), inset 0 0 28px rgba(255,255,255,.05); }
.first-screen .stats.glass::after { display: none; }
.first-screen .stats.glass::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,.30), rgba(255,255,255,.30));   /* 20/10/2026 (Nicolas, opción F): blanco 30 % parejo en todo el contorno; antes se desvanecía (62 % arriba a la izquierda → 7 % al medio → 42 % abajo a la derecha) */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.first-screen .stats-band .stats li b { line-height: round(1.1em, 1px); }
.first-screen .stats-band .stats li.word b { line-height: round(1.05em, 1px); }
.first-screen .stats-band .stats li > span { line-height: round(1.3em, 1px); }
@media (min-width: 981px) { .first-screen .stats.glass { transform: translateY(-50%); transform: translateY(round(-50%, 1px)); } }

/* 16/10/2026 (Nicolas: «Why is the WhatsApp thing a line without the thing that you usually put? … Put the WhatsApp thing like how it should be»).
   En la tarjeta, WhatsApp es el botón del sitio (.hh-wa: blanco, borde gris, ícono verde, borde verde al pasar el mouse), a todo el ancho bajo
   Cotizar y con su mismo alto, esquina y tamaño de letra para que el par apile limpio. */
.ds-card .hh-wa.ds-wa { display: flex; justify-content: center; width: 100%; box-sizing: border-box; padding: .75rem 1rem; border-radius: 10px;
  font-family: inherit; font-size: clamp(16px, 1.2vw, 20px); line-height: 24px; font-weight: 600; }
.ds-card .hh-wa.ds-wa .wa-ico, .ds-card .hh-wa.ds-wa svg { width: 22px; height: 22px; color: #25D366; flex: none; }
.ds-card .hh-wa.ds-wa { padding-top: calc(.75rem - 2px); padding-bottom: calc(.75rem - 2px); }   /* su borde de 2 px: mismo alto que Cotizar (48 px) */
.ds-card .hh-wa.ds-wa span { white-space: nowrap; }   /* teléfono: «Escríbanos por WhatsApp» en una línea, centrado */
@media (max-width: 420px) { .ds-card .hh-wa.ds-wa { gap: 8px; padding-left: .75rem; padding-right: .75rem; } }

/* 16/10/2026 (Nicolas) — Nuestros valores: la animación de «Nuestras divisiones» en las tres tarjetas (marcos naranjas en diagonal detrás,
   la tarjeta sube 24 px con contorno y brillo naranja), sin velo. Reemplaza el hover anterior (subía 3 px). */
.pil-w { position: relative; }
.pil-ly { position: absolute; inset: 0; border: 1.5px solid var(--accent); border-radius: 18px; background: var(--white); opacity: 0; transition: transform .35s ease, opacity .35s ease; }
.nos-a .pil-w .pillar { position: relative; z-index: 1; height: 100%; box-sizing: border-box; transition: transform .35s ease, box-shadow .35s ease, border-color .35s; }
.nos-a .pil-w:hover .pillar { border-color: var(--accent); transform: translate(24px, -24px); box-shadow: 0 0 0 .5px var(--accent), 0 0 34px rgba(255,159,28,.45), 0 28px 50px -24px rgba(0,0,0,.35); }
.pil-w:hover .pil-ly:nth-child(1) { opacity: .2; }
.pil-w:hover .pil-ly:nth-child(2) { opacity: .4; transform: translate(6px, -6px); }
.pil-w:hover .pil-ly:nth-child(3) { opacity: .6; transform: translate(12px, -12px); }
.pil-w:hover .pil-ly:nth-child(4) { opacity: .8; transform: translate(18px, -18px); }
@media (hover: none) { .nos-a .pil-w:hover .pillar { transform: none; box-shadow: none; } .pil-w:hover .pil-ly { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pil-ly, .nos-a .pil-w .pillar { transition: none; } }

/* 16/10/2026 (Nicolas) — Certificaciones en Nosotros «como lo de las divisiones»: fuera la caja naranja. Al pasar el mouse: cuatro marcos
   naranjas en diagonal detrás, la tarjeta sube 24 px con contorno y brillo naranja, y la zona del símbolo (de borde a borde, desde arriba)
   se cubre con un velo negro al 78 % con «Ver certificación» en blanco. En celular no hay velo; un toque abre el documento. */
.cert-w { position: relative; }
.cert-ly { position: absolute; inset: 0; border: 1.5px solid var(--accent); border-radius: 18px; background: var(--white); opacity: 0; transition: transform .35s ease, opacity .35s ease; }
.cert-w .cert-tile { position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden; transition: transform .35s ease, box-shadow .35s ease, border-color .35s; }
.cert-w:hover .cert-tile, .cert-w .cert-tile:focus-visible { border-color: var(--accent); transform: translate(24px, -24px); box-shadow: 0 0 0 .5px var(--accent), 0 0 34px rgba(255,159,28,.45), 0 28px 50px -24px rgba(0,0,0,.35); }
.cert-w:hover .cert-ly:nth-child(1) { opacity: .2; }
.cert-w:hover .cert-ly:nth-child(2) { opacity: .4; transform: translate(6px, -6px); }
.cert-w:hover .cert-ly:nth-child(3) { opacity: .6; transform: translate(12px, -12px); }
.cert-w:hover .cert-ly:nth-child(4) { opacity: .8; transform: translate(18px, -18px); }
.cert-w .cert-tile-art { position: relative; }
.cert-w .cert-tile-cta { left: 0; right: 0; top: calc(-1 * clamp(20px, 1.8vw, 28px)); bottom: 0; display: grid; place-items: center; transform: none;
  padding: 0; border-radius: 0; background: rgba(0,0,0,.78); color: #fff; font-size: clamp(24px, 2vw, 32px); font-weight: 600; letter-spacing: -.01em; box-shadow: none; transition: opacity .35s; }
.cert-w:hover .cert-tile-cta, .cert-w .cert-tile:focus-visible .cert-tile-cta { opacity: 1; transform: none; }
@media (hover: none) { .cert-w .cert-tile-cta { display: none; } .cert-w:hover .cert-tile { transform: none; box-shadow: none; } .cert-w:hover .cert-ly { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cert-ly, .cert-w .cert-tile, .cert-w .cert-tile-cta { transition: none; } }
.cert-tiles:has(.cert-w) { gap: 32px; }   /* 16/10: la tarjeta sube 24 px a la derecha; con 18 px de separación pisaba a la vecina */

/* 19/10/2026 (Nicolas) — tarjeta final (.ds-final), en todas las páginas que terminaban en el cuadro naranja y en la portada. Medidas de su
   edición a mano de la maqueta en PowerPoint («191026 Portada En qué podemos ayudarle - maqueta editable Vnico.pptx»), a su ventana de 1500 px:
   sin el sol; la línea a 25 px (19 pt) con 46 px entre líneas, a 23 px del borde superior de la mitad gris; 21 px hasta Cotizar; abajo 50 px;
   la tarjeta queda en 300 px. La foto se recorta por abajo (se ve el 82 % superior de lo que mostraba la tarjeta de 365 px) y la esquina queda recta.
   El título baja de tamaño según su largo (ds-t1…t4, build.py) para que la mitad negra no quede más alta que la gris. */
.ds-card.ds-final .ds-izq { border-bottom-left-radius: 0; }
.ds-card.ds-final .ds-izq[style*="panel-vidrio"] { background-size: auto 121.6%; background-position: left top; }
.ds-card.ds-final .ds-linea { font-size: clamp(21px, 1.69vw, 30px); line-height: 1.816; margin: 0 0 21px; }
@media (min-width: 768px) { .ds-card.ds-final .ds-der { padding: 23px 48px 50px; } }
.ds-card.ds-final .ds-titulo.ds-t2 { font-size: clamp(32px, 3.6vw, 67px); }
.ds-card.ds-final .ds-titulo.ds-t3 { font-size: clamp(30px, 3.1vw, 58px); }
.ds-card.ds-final .ds-titulo.ds-t4 { font-size: clamp(28px, 3.3vw, 61px); }
.ds-card.ds-final .ds-extra { background: #fff; cursor: pointer; text-align: center; }
.ds-card.ds-final .ds-extra:hover, .ds-card.ds-final .ds-extra:focus-visible { border-color: #9a9a9a; box-shadow: none; }
/* 19/10/2026, más tarde (Nicolas, misma maqueta «… Vnico.pptx», solo el título): letra de 48,4 a 50 pt (+3,4 %, 66,7 px a 1500 px) y el
   cuadro del título 20 px más a la izquierda y 17 px más arriba, ensanchado hasta 8 px del borde de la foto. Mismo +3,4 % en los cuatro tamaños. */
@media (min-width: 768px) { .ds-card.ds-final .ds-izq { padding: 31px 8px 48px 28px; } }
.ds-card.ds-final .ds-titulo.ds-t1 { font-size: clamp(36px, 4.445vw, 83px); }
.ds-card.ds-final .ds-titulo.ds-t2 { font-size: clamp(33px, 3.72vw, 69px); }
.ds-card.ds-final .ds-titulo.ds-t3 { font-size: clamp(31px, 3.2vw, 60px); }
.ds-card.ds-final .ds-titulo.ds-t4 { font-size: clamp(29px, 3.41vw, 63px); }

/* 19/10/2026 (Nicolas) — Servicios, «¿Qué incluye?»: dibujos de línea (lenguaje de las divisiones de Nosotros) en lugar de las fotos.
   Zona del dibujo blanca, texto sobre #ececec, descripción en un velo negro al pasar el mouse; en pantallas táctiles, siempre visible. */
.dbj { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); }
.dbj-card { position: relative; border-radius: 14px; overflow: hidden; background: #ececec; outline: 1px solid #e3e3e3; outline-offset: -1px; transition: transform .3s ease, box-shadow .3s ease, outline-color .3s; }
.dbj-img { position: relative; display: block; aspect-ratio: 4 / 3; background: #fff; }
.dbj-img i { position: absolute; inset: 7% 9%; background: var(--accent-dark); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.dbj-img img { position: absolute; inset: 7% 9%; width: 82%; height: 86%; object-fit: contain; border-radius: 0; }
.dbj-txt { display: block; padding: 18px 22px 22px; }
.dbj-txt h3 { margin: 0; font-size: clamp(17px, 1.25vw, 20px); line-height: 1.25; transition: opacity .2s; }
.dbj-d { display: none; margin: 8px 0 0; font-size: 15px; line-height: 1.5; }
.dbj-ov { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: clamp(18px, 1.6vw, 26px); background: rgba(0,0,0,.82); color: #fff; opacity: 0; transition: opacity .35s; }
.dbj-ov b { font-size: clamp(17px, 1.25vw, 20px); line-height: 1.25; }
.dbj-ov span { font-size: clamp(13.5px, 1vw, 15px); line-height: 1.5; color: rgba(255,255,255,.92); }
.dbj-card:is(:hover, :focus-visible) { transform: translateY(-3px); outline-color: var(--accent); box-shadow: 0 18px 34px -20px rgba(0,0,0,.45); }
.dbj-card:is(:hover, :focus-visible) .dbj-ov { opacity: 1; }
.dbj-card:is(:hover, :focus-visible) .dbj-txt h3 { opacity: 0; }
@media (max-width: 1299px) { .dbj { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (hover: none) { .dbj-ov { display: none; } .dbj-d { display: block; } }
@media (max-width: 560px) { .dbj { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .dbj-card, .dbj-ov { transition: none; } }

/* 19/10/2026 (Nicolas) — Servicios, mosaicos «¿Qué incluye?» e «¿Qué incluye el kit?»: UN solo formato para todos los cuadros
   («why do some have a black thing below and the others don't?»). Antes convivían dos: título sobre la foto con degradado, y (para las
   fotos de producto sobre blanco) franja negra debajo. Ahora todos: zona de imagen arriba (4:3) + franja #ececec con ícono naranja y título
   (el lenguaje de las tarjetas de divisiones de Nosotros). Foto real = llena la zona; foto de producto sobre blanco = entera sobre blanco.
   Al pasar el mouse: velo negro sobre todo el cuadro con título y descripción. Sin mouse: la descripción va bajo el título. */
.mosaico .mos-tile { display: flex; flex-direction: column; height: auto; background: #ececec; outline: 1px solid #e3e3e3; outline-offset: -1px; }
.mosaico .mos-tile > img { position: relative; inset: auto; flex: none; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; padding: 0; background: #fff; }
.mosaico .mos-tile.cutout { background: #ececec; }
.mosaico .mos-tile.cutout > img { object-fit: contain; padding: 18px 20px; }
.mosaico .mos-tile::after { display: none; }
.mosaico .mos-tile::before { z-index: 3; inset: 0 0 auto 0; width: 100%; aspect-ratio: 4 / 3; height: auto; background: rgba(0,0,0,.84); }   /* velo sólo sobre la zona de imagen: la franja con el título no cambia */
.mosaico .mos-cap { position: static; z-index: auto; flex: 1; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 0 12px; padding: 16px 20px 18px; background: #ececec; color: var(--ink); min-height: 0; }
.mosaico .mos-ic { margin: 0; flex: none; }
.mosaico .mos-cap h3 { color: var(--ink); flex: 1; min-width: 0; padding-top: 8px; }   /* primera línea centrada con el ícono de 38 px; títulos de 1 y 2 líneas empiezan a la misma altura */
.mosaico .mos-more { position: absolute; inset: 0 0 auto 0; width: 100%; aspect-ratio: 4 / 3; z-index: 4; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: clamp(18px, 1.6vw, 26px); opacity: 0; transition: opacity .35s; pointer-events: none; }
.mosaico .mos-more b { display: none; }   /* el título ya está en la franja */
.mosaico .mos-more > p { opacity: 1; padding: 0; color: rgba(255,255,255,.92); }
.mosaico .mos-tile:is(:hover, :focus-visible) .mos-more { opacity: 1; }
.mosaico .mos-cap > .mos-ic, .mosaico .mos-cap > h3 { transition: opacity .2s; }

.mosaico .mos-tile:is(:hover, :focus-visible) > img { transform: none; }
@media (max-width: 1299px) { .mosaico .mos-tile { height: auto; } }
@media (hover: none), (max-width: 900px) {
  .mosaico .mos-tile { min-height: 0; justify-content: flex-start; }
  .mosaico .mos-tile::before { display: none; }
  .mosaico .mos-more { position: static; inset: auto; width: auto; aspect-ratio: auto; justify-content: flex-start; opacity: 1; padding: 10px 0 0; flex-basis: 100%; }   /* bajo el título, sin la forma 4:3 del velo */
  .mosaico .mos-more b { display: none; }
  .mosaico .mos-more > p { color: var(--text); }
}
@media (max-width: 560px) { .mosaico .mos-tile { min-height: 0; } }


/* 19/10/2026 (Nicolas) — Servicios, InPlant: logo arriba; debajo, el dibujo del taller (línea naranja, como los dibujos de Nosotros)
   a la izquierda y el párrafo con los botones a la derecha. Bajo 900 px: logo, dibujo, texto.
   20/10/2026 (Nicolas, su diapositiva V2 «191026 Servicios InPlant V2.pptx», opción B dentro de los márgenes de la página, texto
   17.79 pt de la diapositiva): dibujo y texto en proporción 646.5 : 1067 con 41 px entre ellos (a 1920 px), el texto arranca arriba,
   a la altura del dibujo; texto 17.79 pt = 35.6 px a 1920 px, escala con la ventana; interlineado 1.428 (24.84 pt de la diapositiva);
   botones más grandes y a 35 px del texto; 81 px bajo la sección. Todas las medidas escalan con la ventana (X px a 1920 = X/19.2 vw). */
#sistema-integral-inplant .ip-row { display: grid; grid-template-columns: minmax(0, 646.5fr) minmax(0, 1067fr); gap: 2.135vw; align-items: start; }
#sistema-integral-inplant .ip-draw { position: relative; aspect-ratio: 1000 / 728; }
#sistema-integral-inplant .ip-draw i { position: absolute; inset: 0; background: var(--accent-dark); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
#sistema-integral-inplant .ip-text { padding-top: 0.68vw; }
#sistema-integral-inplant .ip-text .story-text { max-width: none; margin: 0; font-size: max(20px, 1.85313vw); line-height: 1.428; }
#sistema-integral-inplant .ip-text .story-text strong { font-weight: 700; }
#sistema-integral-inplant .ip-text .cta-row { margin-bottom: 0; margin-top: clamp(24px, 1.82vw, 35px); }
#sistema-integral-inplant .ip-text .cta-row .btn { font-size: clamp(16px, 1.05vw, 20px); padding: clamp(14px, 1.15vw, 22px) clamp(26px, 1.9vw, 36px); }
#sistema-integral-inplant .ip-text .cta-row .wa-ico { width: 1.3em; height: 1.3em; }
body[data-page="servicios.html"] #sistema-integral-inplant .inplant-brand { margin: 0 0 var(--p-logo-bottom, clamp(28px, 2.5vw, 48px)); }
body[data-page="servicios.html"] section#sistema-integral-inplant { padding-bottom: clamp(48px, 4.22vw, 81px); }
@media (max-width: 900px) { #sistema-integral-inplant .ip-row { grid-template-columns: minmax(0, 1fr); gap: 28px; } #sistema-integral-inplant .ip-draw { max-width: 640px; } #sistema-integral-inplant .ip-text { padding-top: 0; } }
/* 19/10/2026 (Nicolas) — entra Miner: la División Industrial de la portada pasa de cinco logos en una fila a seis en dos filas
   de tres, y la Automotriz la acompaña (su elección, opción B): las dos divisiones en dos filas de tres. Reemplaza la fila de
   seis de Fernando (06/10, arriba). Por debajo de 640 px vale la regla general de la portada: dos por fila. */
body[data-page="index.html"] .home-brands .logo-wall.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { body[data-page="index.html"] .home-brands .logo-wall.n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 19/10/2026 (Nicolas) — Nuestra historia: vuelve la franja naranja de 5 px en el borde derecho de la foto (su decisión del 27/09,
   espejo de la del recuadro de la cita), que se perdió el 12/10 al pasar Nosotros a tarjetas. */
#nuestra-historia.nos-a .historia-img img { border-right: 5px solid var(--accent); box-sizing: border-box; }
/* 19/10/2026 (Nicolas) — carta de Walter en el teléfono: la regla de .nos-a (12/10) dejaba dos columnas a todo ancho y el texto
   quedaba en ~0 px. Hasta 820 px la foto va arriba y el texto debajo; lleva #nuestra-historia para ganarle a la regla de la línea ~1096. */
@media (max-width: 820px) { #nuestra-historia.nos-a .letter.with-photo { grid-template-columns: minmax(0, 1fr); } }
/* 19/10/2026 (Nicolas) — la carta de Walter va sin comillas, como la cita del CEO en abb.com/global/en/company/about (foto, texto,
   «Morten Wierod, ABB CEO», ninguna comilla). Antes: una sola comilla naranja, primero de apertura arriba a la derecha y luego de cierre
   abajo; ninguna de las dos era correcta sola. */
.letter::before { content: none; }
/* 19/10/2026 (Nicolas, opción A de tres) — carta de Walter: misma cursiva, más grande para llenar el recuadro (antes 22 px a 1920 con
   114 px vacíos arriba y abajo; ahora ~31 px y 67 px). */
#nuestra-historia .nos-a-carta blockquote p { font-size: clamp(20px, 1.6vw, 31px); line-height: 1.5; }
#nuestra-historia .nos-a-carta figcaption strong { font-size: clamp(18px, 1.2vw, 23px); }
/* 19/10/2026 (Nicolas) — «Nuestras divisiones» en su propia sección, después de Valores: la banda gris arranca pegada a la sección
   anterior (sin el margen de 128 px que la separaba del texto de historia) y el título lleva la raya naranja como los demás. */
#nuestras-divisiones .ndv-band { margin-top: 0; }
#nuestras-divisiones .ndv-band > h2::after { display: block; }

/* 19/10/2026 (Nicolas, pestaña «Negro · título chico» de seis) — Servicios, mosaicos «¿Qué incluye?» y «¿Qué incluye el kit?»:
   foto a todo el cuadro, degradado negro que sube desde ~15 % del alto, título blanco sin ícono; al pasar el mouse la descripción sube
   desde abajo y el título vuelve a tamaño compacto para que la descripción entera quepa. Sin mouse: foto arriba, texto debajo sobre negro.
   Reemplaza el formato «franja gris + ícono naranja» de la misma tarde. «body» delante para ganar a las reglas anteriores del mosaico. */
body .mosaico .mos-tile { display: block; position: relative; aspect-ratio: 5 / 4; height: auto; min-height: 0; overflow: hidden; outline: none; border-radius: 14px; background: #e9e9e9; }
body .mosaico .mos-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; padding: 0; background: none; }
body .mosaico .mos-tile.cutout > img { object-fit: contain; padding: 18px 22px 74px; mix-blend-mode: multiply; }
body .mosaico .mos-tile::before { inset: 0; aspect-ratio: auto; height: 100%; width: auto; border-radius: 0; background: rgba(0,0,0,.8); }
body .mosaico .mos-cap { position: absolute; left: 0; right: 0; bottom: 0; top: auto; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 16px 18px 18px; background: none; }
body .mosaico .mos-cap h3 { color: #fff; padding-top: 0; }
body .mosaico .mos-more { position: static; inset: auto; width: auto; aspect-ratio: auto; flex-basis: 100%; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1); opacity: 1; padding: 0; pointer-events: none; z-index: auto; }
body .mosaico .mos-more b { display: none; }
body .mosaico .mos-more > p { overflow: hidden; min-height: 0; opacity: 0; padding: 0; color: rgba(255,255,255,.92); font-size: clamp(13.5px, .98vw, 15px); line-height: 1.5; transition: opacity .3s, padding .3s; }
body .mosaico .mos-tile:is(:hover, :focus-visible) .mos-more { grid-template-rows: 1fr; }
body .mosaico .mos-tile:is(:hover, :focus-visible) .mos-more > p { opacity: 1; padding-top: 10px; }
body .mosaico .mos-tile:is(:hover, :focus-visible) .mos-cap > :is(.mos-ic, h3) { opacity: 1; }
@media (min-width: 1300px) and (max-width: 1499px) { body .mosaico .mos-tile { aspect-ratio: 6 / 5; } }
@media (min-width: 1300px) and (max-width: 1399px) { body .mosaico .mos-tile { aspect-ratio: 7 / 6; } }   /* cuatro columnas angostas: la descripción entera cabe al subir */
@media (hover: none), (max-width: 900px) {
  body .mosaico .mos-tile { aspect-ratio: auto; display: flex; flex-direction: column; }
  body .mosaico .mos-tile > img { position: relative; aspect-ratio: 3 / 2; height: auto; }
  body .mosaico .mos-tile.cutout > img { padding: 16px 20px; background: #fff; mix-blend-mode: normal; }
  body .mosaico .mos-tile::after, body .mosaico .mos-tile::before { display: none; }
  body .mosaico .mos-cap { position: static; flex: 1; }
  body .mosaico .mos-more { grid-template-rows: 1fr; } body .mosaico .mos-more > p { opacity: 1; padding-top: 10px; }
}

body .mosaico .mos-tile { border-radius: 18px; transition: transform .25s ease, box-shadow .25s ease; }
body .mosaico .mos-tile::after { display: block; content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.82) 72%, rgba(0,0,0,.95) 100%); }
body .mosaico .mos-tile::before { background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.88) 50%, rgba(0,0,0,.96) 100%); }
body .mosaico .mos-ic { display: none; }
body .mosaico .mos-cap { padding: clamp(16px, 1.4vw, 24px); }
body .mosaico .mos-cap h3 { font-size: clamp(20px, 1.6vw, 27px); line-height: 1.15; }
body .mosaico .mos-tile:is(:hover, :focus-visible) { transform: translateY(-4px); box-shadow: 0 28px 50px -22px rgba(0,0,0,.65); outline: none; }
@media (hover: none), (max-width: 900px) { body .mosaico .mos-tile, body .mosaico .mos-cap { background: #111; } }
body .mosaico .mos-cap h3 { font-size: clamp(18px, 1.35vw, 22px); }body .mosaico .mos-cap h3 { transition: font-size .3s; } body .mosaico .mos-tile:is(:hover, :focus-visible) .mos-cap h3 { font-size: clamp(16px, 1.12vw, 19px); }

/* 20/10/2026 (Nicolas, su maqueta «201026 Servicios tarjetas sombra - maqueta editable V1.pptx»): la sombra negra ya no cubre la tarjeta
   entera, solo una franja abajo, donde va el título; la foto queda limpia arriba. Mismo formato en «¿Qué incluye?» y en Kits.
   Su franja: 37 % inferior (102 px de 275 a 1469 px), de transparente a 95 % negro. Ajuste: medida desde abajo en px para que un título
   de dos líneas también quede sobre negro suficiente. */
body .mosaico .mos-tile::after { background: linear-gradient(180deg, rgba(0,0,0,0) calc(100% - 130px), rgba(0,0,0,.15) calc(100% - 108px), rgba(0,0,0,.62) calc(100% - 78px), rgba(0,0,0,.86) calc(100% - 44px), rgba(0,0,0,.95) 100%); }
/* Ensamble certificado: las mangueras más grandes (su maqueta), recortadas a la derecha como en la foto original */
body .mosaico .mos-tile.cutout > img[src*="ensamble-globalcore-pts"] { object-fit: cover; object-position: 0% 40%; padding: 22px 0 60px 13px; }

/* Nicolas, 20/10/2026 — portada desde su PowerPoint «201026 Portada Cabecera V1» (editado a 1920 px): titular 88 px, bajada 26,67 px,
   ambos más abajo, botones y barra de cifras más abajo. Él no tocó el interlineado: PowerPoint lo dejó como estaba (74,88 px en el
   titular, 28,6 px en la bajada) y así lo aprobó, así que se copia igual. Sólo en ventanas de 1800 px o más (su pantalla es de 1920);
   por debajo la portada sigue como estaba (home_lock a 1280, 1440 y 1600 sin cambios). */
@media (min-width: 1800px) {
  body[data-page="index.html"] .first-screen .home-hero > .wrap { padding-top: var(--pc-padt, 164px); }
  body[data-page="index.html"] .hh-copy h1 { font-size: 88px; line-height: 74.88px; margin-bottom: var(--pc-h1-mb, 65.5px); }
  body[data-page="index.html"] .hh-copy p { font-size: 26.67px; line-height: 28.6px; margin-bottom: var(--pc-p-mb, 72.5px); }
  body[data-page="index.html"] .first-screen .stats-band { padding-bottom: var(--pc-band-pb, 36.5px); }
}

/* 20/10/2026 (Nicolas, opción B un poco más grande) — redes sociales del pie: círculos de 68 px con borde naranja de 2 px y dibujo naranja
   de 32 px; al pasar el cursor, al hacer clic o al enfocarlos con el teclado, todo el círculo gris #E6E6E6 y el dibujo negro.
   TikTok, Facebook e Instagram aún sin cuenta (no enlazan); LinkedIn enlaza como antes. */
.footer .redes { display: flex; gap: 18px; align-items: center; }
.footer .redes .red { box-sizing: border-box; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; line-height: 0;
  color: var(--accent); border: 2px solid var(--accent); transition: background .2s, border-color .2s, color .2s; }
.footer .redes .red svg { width: 32px; height: 32px; display: block; }
.footer .redes .red:hover, .footer .redes .red:active, .footer .redes .red:focus-visible { background: #E6E6E6; border-color: #E6E6E6; color: #000; }
@media (max-width: 600px) { .footer .footer-marks { flex-wrap: wrap; gap: 20px; } }

/* Automotriz (Nicolas, 20/10/2026): el oscurecido es solo un degradado a la izquierda, detrás del texto, para leerlo;
   el resto de la foto queda tal cual. Antes: velo negro en todo el ancho (12 % aún en el borde derecho) + velo arriba.
   Escritorio solamente; en el teléfono (≤1020 px) el texto ocupa todo el ancho y sigue el velo vertical de arriba. */
@media (min-width: 1021px) {
  body[data-page="automotriz.html"] .hero.small.photo::before {
    background: linear-gradient(90deg, rgba(0,0,0,.78) 0, rgba(0,0,0,.42) 349px, rgba(0,0,0,.12) 700px, rgba(0,0,0,0) 759px);   /* su diapositiva V2: velo de 759 px */
  }
}


/* Portada (Nicolas, 20/10/2026): fuera el velo V40 (62 % → 40 % + franja de arriba). Ni degradado lateral («no fade for this one»).
   Luego, de las opciones 0–40 % en localhost, eligió un filtro parejo de 5 % sobre todo el video. --p-hero-dim (0,9, su capa
   _overrides.json) sigue aplicándose encima, así que 0,0556 × 0,9 = 5 % exacto. */
.home-hero::before { background: rgba(0,0,0,.1111); }   /* 20/10/2026 (Nicolas): «make the tint 10%» — 0,1111 × 0,9 = 10 % (antes 5 %) */
/* 20/10/2026 (Nicolas, su PowerPoint «201026 Pie Redes Sociales V2»): dirección un poco más grande, columnas de las divisiones más
   juntas (315 px entre una y otra), botones de WhatsApp más cerca de los correos, círculos de redes 1,2 veces más grandes y el Libro de
   Reclamaciones a la derecha, centrado con los círculos. Sólo en pantallas de 1024 px o más; el celular queda como estaba. */
@media (min-width: 1024px) {
  .footer .faddr { font-size: 14.67px; margin-top: var(--pf-addr-mt, 25.4px); margin-bottom: var(--pf-addr-mb, 27.8px); }
  .footer .fdivs { max-width: calc(3 * 310.2px + 2 * var(--f-divgap)); }   /* tres columnas de 310 px a 1920; en laptops se achican y siguen siendo tres */
  .footer .fdiv [data-k="wa"] { margin-top: var(--pf-wa-mt, 6.7px); }
  .footer .footer-marks { margin-top: calc(var(--f-marks-top) + var(--pf-marks-dy, 9.3px)); margin-bottom: 36.6px; }
  .footer .redes { gap: 21.8px; }
  .footer .redes .red { width: 82.1px; height: 82.1px; }
  .footer .redes .red svg { width: 38.7px; height: 38.7px; }
  /* 20/10/2026, más tarde (Nicolas, opción 1 de la página de pestañas): el Libro vuelve junto a los círculos, a 28 px */
  .footer .footer-marks { gap: 28px; }
  .footer .footer-marks .reclamos img { height: 79.7px; }
}

/* 20/10/2026 (Nicolas) — Servicios, «¿Qué incluye?»: opción 6 · B (ver incluye_tarjetas en build.py). Todo bajo :is(#que-incluye, #kits-en-consignacion) y, desde el 20/10 tarde, también #kits-en-consignacion. Al pasar el mouse el dibujo desaparece (su pedido). */
:is(#que-incluye, #kits-en-consignacion) .mk { display: block; background: var(--accent-dark); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
:is(#que-incluye, #kits-en-consignacion) h2.qi-h { margin-bottom: 22px; }
:is(#que-incluye, #kits-en-consignacion) .fit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; height: clamp(470px, calc(100vh - 232px), 860px); }
:is(#que-incluye, #kits-en-consignacion) .fit.g0 { gap: 0; }
:is(#que-incluye, #kits-en-consignacion) .fc { position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 0; outline: none; isolation: isolate; }
:is(#que-incluye, #kits-en-consignacion) .fc .art { position: relative; flex: 1 1 auto; min-height: 0; }
:is(#que-incluye, #kits-en-consignacion) .fc .art .mk { position: absolute; inset: 12% 10% 4%; }
:is(#que-incluye, #kits-en-consignacion) .fc .tx { position: relative; z-index: 2; padding: clamp(16px, 1.2vw, 24px) clamp(20px, 1.45vw, 28px) clamp(20px, 1.45vw, 28px); }
:is(#que-incluye, #kits-en-consignacion) .fc h3 { margin: 0; white-space: nowrap; font-size: clamp(17px, calc(1.22vw + 1px), 24px); line-height: 1.2; letter-spacing: -.015em; }
:is(#que-incluye, #kits-en-consignacion) .fc .more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2,.7,.2,1); }
:is(#que-incluye, #kits-en-consignacion) .fc .more > div { overflow: hidden; }
:is(#que-incluye, #kits-en-consignacion) .fc .more p { margin: 0; padding-top: 20px;  /* 20/10 (Nicolas): el doble de espacio entre título y texto */ font-size: clamp(14px, .93vw, 17px); line-height: 1.45; opacity: 0; transition: opacity .3s .12s; }
:is(#que-incluye, #kits-en-consignacion) .fc:hover .more, :is(#que-incluye, #kits-en-consignacion) .fc:focus-visible .more { grid-template-rows: 1fr; }
:is(#que-incluye, #kits-en-consignacion) .fc:hover .more p, :is(#que-incluye, #kits-en-consignacion) .fc:focus-visible .more p { opacity: 1; }
:is(#que-incluye, #kits-en-consignacion) .fc .nn { position: absolute; top: 16px; right: 18px; z-index: 2; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
@media (max-width: 1100px) {
:is(#que-incluye, #kits-en-consignacion) .fit { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 360px; }}
@media (max-width: 600px) {
:is(#que-incluye, #kits-en-consignacion) .fit { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
:is(#que-incluye, #kits-en-consignacion) .fc .art { min-height: 200px; }}
@media (hover: none) {
:is(#que-incluye, #kits-en-consignacion) .fc .more { grid-template-rows: 1fr; }
:is(#que-incluye, #kits-en-consignacion) .fc .more p { opacity: 1; }
:is(#que-incluye, #kits-en-consignacion) .fit { height: auto; grid-auto-rows: auto; grid-template-rows: none; }
:is(#que-incluye, #kits-en-consignacion) .fc .art { min-height: 190px; }}
:is(#que-incluye, #kits-en-consignacion) .cc { background: #fff; border: 1px solid #e6e6e6; border-radius: 8px; transition: border-color .3s, box-shadow .3s; }
:is(#que-incluye, #kits-en-consignacion) .cc .art { background: #fbfbfb; }
:is(#que-incluye, #kits-en-consignacion) .cc .art .ink { background: var(--accent-dark); }
:is(#que-incluye, #kits-en-consignacion) .cc h3 { color: #000; }
:is(#que-incluye, #kits-en-consignacion) .cc .more p { color: #414141; }
:is(#que-incluye, #kits-en-consignacion) .cc:hover, :is(#que-incluye, #kits-en-consignacion) .cc:focus-visible { border-color: var(--accent); box-shadow: 0 22px 44px -32px rgba(0,0,0,.5); }
:is(#que-incluye, #kits-en-consignacion) .cc3 .art { background: #fff; }
:is(#que-incluye, #kits-en-consignacion) .cc3 .tx, :is(#que-incluye, #kits-en-consignacion) .cc3:hover .tx, :is(#que-incluye, #kits-en-consignacion) .cc3:focus-visible .tx { background: #f3f3f3; }
:is(#que-incluye, #kits-en-consignacion) .s6 { transition: border-color .3s, box-shadow .3s; }
:is(#que-incluye, #kits-en-consignacion) .s6:hover, :is(#que-incluye, #kits-en-consignacion) .s6:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
:is(#que-incluye, #kits-en-consignacion) .s6 .art { transition: flex-basis .5s cubic-bezier(.2,.7,.2,1); flex: 1 1 100%; }
:is(#que-incluye, #kits-en-consignacion) .s6:hover .art, :is(#que-incluye, #kits-en-consignacion) .s6:focus-visible .art { flex: 0 0 0px; }
:is(#que-incluye, #kits-en-consignacion) .s6 .art .mk { inset: 12% 10% 6%; transition: background-color .35s; }
:is(#que-incluye, #kits-en-consignacion) .fit .fc.s6:hover .art .mk, :is(#que-incluye, #kits-en-consignacion) .fit .fc.s6:focus-visible .art .mk, :is(#que-incluye, #kits-en-consignacion) .fit .fc.s6:hover .art .ph, :is(#que-incluye, #kits-en-consignacion) .fit .fc.s6:focus-visible .art .ph { opacity: 0 !important; transition: opacity .2s 0s !important; }
:is(#que-incluye, #kits-en-consignacion) .fit.e6w.done .fc .art .mk, :is(#que-incluye, #kits-en-consignacion) .fit.e6w.done .fc .art .ph { transition: opacity .3s 0s, background-color .35s 0s; }
:is(#que-incluye, #kits-en-consignacion) .fit.q-measure .more { grid-template-rows: 1fr !important; transition: none !important; }
:is(#que-incluye, #kits-en-consignacion) .s6 .tx { flex: 0 0 auto; transition: flex-grow .55s; }
:is(#que-incluye, #kits-en-consignacion) .s6:hover .tx, :is(#que-incluye, #kits-en-consignacion) .s6:focus-visible .tx { flex-grow: 1; }
:is(#que-incluye, #kits-en-consignacion) .s6 .more p { font-size: clamp(14px, calc(.86vw + 1px), 17px); line-height: 1.42; }
:is(#que-incluye, #kits-en-consignacion) .s6 .art .mk.e6 { opacity: 1; }
:is(#que-incluye, #kits-en-consignacion) .fit.e6w .fc .art .mk { transition: background-color .35s, opacity .9s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1), filter 1s, clip-path 1.1s cubic-bezier(.45,.05,.35,1); }
:is(#que-incluye, #kits-en-consignacion) .fit.e6w .fc:nth-child(2) .art .mk { transition-delay: 0s, .09s, .09s, .09s, .09s; }
:is(#que-incluye, #kits-en-consignacion) .fit.e6w .fc:nth-child(3) .art .mk { transition-delay: 0s, .18s, .18s, .18s, .18s; }
:is(#que-incluye, #kits-en-consignacion) .fit.e6w .fc:nth-child(4) .art .mk { transition-delay: 0s, .27s, .27s, .27s, .27s; }
:is(#que-incluye, #kits-en-consignacion) .fit.e6w .fc:nth-child(5) .art .mk { transition-delay: 0s, .36s, .36s, .36s, .36s; }
:is(#que-incluye, #kits-en-consignacion) .fit.e6w .fc:nth-child(6) .art .mk { transition-delay: 0s, .45s, .45s, .45s, .45s; }
:is(#que-incluye, #kits-en-consignacion) .fit.e6w .fc:nth-child(7) .art .mk { transition-delay: 0s, .54s, .54s, .54s, .54s; }
:is(#que-incluye, #kits-en-consignacion) .fit.e6w .fc:nth-child(8) .art .mk { transition-delay: 0s, .63s, .63s, .63s, .63s; }
:is(#que-incluye, #kits-en-consignacion) .fit.e6w.in .fc .art .mk:hover { transition-delay: 0s; }
:is(#que-incluye, #kits-en-consignacion) .fit.fade:not(.in) .art .mk { opacity: 0; }
:is(#que-incluye, #kits-en-consignacion) .fit.rise:not(.in) .art .mk { opacity: 0; transform: translateY(28px); }
:is(#que-incluye, #kits-en-consignacion) .fit.zoom:not(.in) .art .mk { opacity: 0; transform: scale(.86); }
:is(#que-incluye, #kits-en-consignacion) .fit.focus:not(.in) .art .mk { opacity: 0; filter: blur(10px); transform: scale(1.04); }
:is(#que-incluye, #kits-en-consignacion) .fit.circle:not(.in) .art .mk { clip-path: circle(0% at 50% 55%); }
:is(#que-incluye, #kits-en-consignacion) .fit.circle.in .art .mk { clip-path: circle(75% at 50% 55%); }
:is(#que-incluye, #kits-en-consignacion) .fit.cards .fc { transition: border-color .3s, box-shadow .3s, opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
:is(#que-incluye, #kits-en-consignacion) .fit.cards:not(.in) .fc { opacity: 0; transform: translateY(34px); }
:is(#que-incluye, #kits-en-consignacion) .fit.cards .fc:nth-child(2) { transition-delay: 0s, 0s, .08s, .08s; }
:is(#que-incluye, #kits-en-consignacion) .fit.cards .fc:nth-child(3) { transition-delay: 0s, 0s, .16s, .16s; }
:is(#que-incluye, #kits-en-consignacion) .fit.cards .fc:nth-child(4) { transition-delay: 0s, 0s, .24s, .24s; }
:is(#que-incluye, #kits-en-consignacion) .fit.cards .fc:nth-child(5) { transition-delay: 0s, 0s, .32s, .32s; }
:is(#que-incluye, #kits-en-consignacion) .fit.cards .fc:nth-child(6) { transition-delay: 0s, 0s, .40s, .40s; }
:is(#que-incluye, #kits-en-consignacion) .fit.cards .fc:nth-child(7) { transition-delay: 0s, 0s, .48s, .48s; }
:is(#que-incluye, #kits-en-consignacion) .fit.cards .fc:nth-child(8) { transition-delay: 0s, 0s, .56s, .56s; }
:is(#que-incluye, #kits-en-consignacion) .fit.e6w.reset .fc, :is(#que-incluye, #kits-en-consignacion) .fit.e6w.reset .fc .art .mk { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
:is(#que-incluye, #kits-en-consignacion) .fit.e6w .fc, :is(#que-incluye, #kits-en-consignacion) .fit.e6w .fc .art .mk { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; }}
:is(#que-incluye, #kits-en-consignacion) .fc.rise::before { content: ""; position: absolute; inset: 0; z-index: 0; background: #1d1d1f; transform: translateY(101%); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
:is(#que-incluye, #kits-en-consignacion) .fc.rise:hover::before, :is(#que-incluye, #kits-en-consignacion) .fc.rise:focus-visible::before { transform: none; }
:is(#que-incluye, #kits-en-consignacion) .cc3.rise:hover .art, :is(#que-incluye, #kits-en-consignacion) .cc3.rise:focus-visible .art, :is(#que-incluye, #kits-en-consignacion) .cc3.rise:hover .tx, :is(#que-incluye, #kits-en-consignacion) .cc3.rise:focus-visible .tx { background: transparent; }
:is(#que-incluye, #kits-en-consignacion) .cc3.rise .art, :is(#que-incluye, #kits-en-consignacion) .cc3.rise .tx { transition: background-color .25s, flex-basis .55s cubic-bezier(.2,.7,.2,1), flex-grow .55s; }
:is(#que-incluye, #kits-en-consignacion) .fc.rise h3, :is(#que-incluye, #kits-en-consignacion) .fc.rise .more p { transition: color .3s .1s; }
:is(#que-incluye, #kits-en-consignacion) .fc.rise:hover h3, :is(#que-incluye, #kits-en-consignacion) .fc.rise:focus-visible h3 { color: #fff; }
:is(#que-incluye, #kits-en-consignacion) .fc.rise:hover .more p, :is(#que-incluye, #kits-en-consignacion) .fc.rise:focus-visible .more p { color: rgba(255,255,255,.84); }
:is(#que-incluye, #kits-en-consignacion) .fc.rise:hover .art .mk, :is(#que-incluye, #kits-en-consignacion) .fc.rise:focus-visible .art .mk { background-color: #fff; }

/* Kits: cuatro tarjetas en una fila, cada una del mismo alto que una fila de «¿Qué incluye?»; donde aún no hay dibujo,
   el ícono del servicio en grande hace de reemplazo. */
@media (min-width: 1101px) { #kits-en-consignacion .fit.kits4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); height: calc((clamp(470px, calc(100vh - 232px), 860px) - 16px) / 2); } }
#kits-en-consignacion .fc .art .ph { position: absolute; inset: 16% 30% 10%; width: 40%; height: 74%; margin: auto; fill: none; stroke: var(--accent-dark); stroke-width: 1.3px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s, stroke .35s; }
#kits-en-consignacion .fit.e6w:not(.in) .fc .art .ph { opacity: 0; }
#kits-en-consignacion .fit.e6w .fc .art .ph { transition: opacity .9s cubic-bezier(.2,.7,.2,1); }
#kits-en-consignacion .fit.e6w .fc:nth-child(2) .art .ph { transition-delay: .09s; } #kits-en-consignacion .fit.e6w .fc:nth-child(3) .art .ph { transition-delay: .18s; } #kits-en-consignacion .fit.e6w .fc:nth-child(4) .art .ph { transition-delay: .27s; }

/* División Industrial y Minería (Nicolas, 20/10/2026): el oscurecido es solo un degradado a la izquierda, detrás del texto
   (el texto termina en 837 / 869 px a 1920), el resto del video sin filtro. Minería conserva su lado izquierdo más oscuro (V115).
   Escritorio solamente; en el teléfono (≤1020 px) sigue el velo vertical para leer el texto. */
@media (min-width: 1021px) {
  body[data-page="industrias.html"] .hero.small.photo::before {
    background: linear-gradient(90deg, rgba(0,0,0,.78) 0, rgba(0,0,0,.42) 400px, rgba(0,0,0,.12) 760px, rgba(0,0,0,0) 880px);
  }
  body[data-page="industrias-mineria.html"] .hero.small.photo::before {
    background: linear-gradient(90deg, rgba(0,0,0,.95) 0, rgba(0,0,0,.88) 180px, rgba(0,0,0,.7) 330px, rgba(0,0,0,.45) 520px, rgba(0,0,0,.2) 760px, rgba(0,0,0,0) 900px);
  }
}

/* 20/10/2026 (Nicolas): portada, marcas — una sola frase «Trabajamos con las mejores marcas del mercado, garantizando
   materiales de la más alta calidad.» en una línea en pantallas anchas. Se achica lo mínimo para caber (38 px de título →
   36 px a su ancho de ~1920, columna de 1680 px; la frase mide 46,2 veces el tamaño de letra), nunca por debajo de 34 px;
   más angosto, pasa a dos líneas equilibradas. En el teléfono queda el tamaño normal de los títulos. */
body[data-page="index.html"] .home-brands .section-head { container-type: inline-size; }
body[data-page="index.html"] .home-brands .brands-line { text-wrap: balance; }
@media (min-width: 1100px) {
  body[data-page="index.html"] .home-brands .brands-line { font-size: clamp(34px, 2.15cqi, 38px); }
}

/* Nicolas, 20/10/2026 (15:48) — su PowerPoint «201026 Portada Cabecera V1» otra vez: titular, bajada, botones y barra de cifras
   49,7 px más arriba, todo junto; tamaños y márgenes laterales iguales. Sólo en ventanas de 1800 px o más, como el ajuste anterior. */
@media (min-width: 1800px) {
  body[data-page="index.html"] .first-screen .home-hero > .wrap { padding-top: var(--pc-padt2, 64.6px); }
  body[data-page="index.html"] .first-screen .stats-band { padding-bottom: var(--pc-band-pb2, 86.2px); }
}

/* 21/10/2026 (Nicolas: «todas las cabeceras del mismo tamaño»). En teléfonos la banda fija de 360 px cortaba el texto en 19 páginas
   (a 375 px de ancho el texto más alto, Químicos, necesita 471 px: se perdía el inicio de la ruta y medio botón de WhatsApp).
   Por debajo de 600 px todas las cabeceras miden 480 px; si un título no cabe en un teléfono más angosto, la banda crece en vez de cortarlo.
   Desde 600 px de ancho todo cabe en 360 y nada cambia. */
@media (max-width: 599px) {
  .hero.small .wrap, .hero.small.photo .wrap { height: auto; min-height: 480px; }
}

/* 21/10/2026 (Nicolas, opción A): en Minería, la tarjeta «Ver todos los servicios» lleva el texto arriba, sobre el cielo vacío,
   como el título de las otras siete tarjetas de la grilla; abajo el texto blanco tapaba las piernas del técnico de la foto InPlant. */
.mx-todo { justify-content: flex-start; }
.mx-todo::after { background: linear-gradient(0deg, rgba(0,0,0,.05) 45%, rgba(0,0,0,.7)); }

/* 21/10/2026 (Nicolas): cabecera de Kits igual a la de InPlant: logo arriba, dibujo grande a la izquierda y texto a la derecha (mismas medidas). */
#kits-en-consignacion .inplant-head { margin-bottom: 0; }
#kits-en-consignacion .ip-row { display: grid; grid-template-columns: minmax(0, 646.5fr) minmax(0, 1067fr); gap: 2.135vw; align-items: start; }
#kits-en-consignacion .ip-draw { position: relative; aspect-ratio: 1000 / 728; }
#kits-en-consignacion .ip-draw i { position: absolute; inset: 0; background: var(--accent-dark); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
#kits-en-consignacion .ip-text { padding-top: 0.68vw; }
#kits-en-consignacion .ip-text .story-text { max-width: none; margin: 0; font-size: max(20px, 1.85313vw); line-height: 1.428; }
#kits-en-consignacion .ip-text .cta-row { margin-bottom: 0; margin-top: clamp(24px, 1.82vw, 35px); }
#kits-en-consignacion .ip-text .cta-row .btn { font-size: clamp(16px, 1.05vw, 20px); padding: clamp(14px, 1.15vw, 22px) clamp(26px, 1.9vw, 36px); }
#kits-en-consignacion .ip-text .cta-row .wa-ico { width: 1.3em; height: 1.3em; }
body[data-page="servicios.html"] #kits-en-consignacion .inplant-brand { margin: 0 0 var(--p-logo-bottom, clamp(28px, 2.5vw, 48px)); }
body[data-page="servicios.html"] section#kits-en-consignacion { padding-bottom: clamp(48px, 4.22vw, 81px); }
@media (max-width: 900px) { #kits-en-consignacion .ip-row { grid-template-columns: minmax(0, 1fr); gap: 28px; } #kits-en-consignacion .ip-draw { max-width: 640px; } #kits-en-consignacion .ip-text { padding-top: 0; } }

/* 21/10/2026 (Nicolas, su PPT «211026 Servicios InPlant Marco V1», medido a 1920 px; marco = 1680 px de ancho): InPlant y Kits dentro de un
   marco gris fino con esquinas naranjas. Columnas: dibujo 736 px · línea gris vertical · logo, línea naranja, texto y botones.
   Las medidas internas van en cqw: 1 cqw = 1 % del ancho INTERIOR del marco (1571 px a 1920 = 15,71 px), para que todo escale junto. */
body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf { position: relative; container-type: inline-size; display: grid; margin: 0;
  grid-template-columns: 46.86% 1.642% 1.7px 3.717% minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr;
  padding: 1.845% 5.298% 1.583% 1.179%; }
body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > .ip-draw { grid-column: 1; grid-row: 1 / -1; align-self: start; width: 100%; }
body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > .ipf-div { grid-column: 3; grid-row: 1 / -1; align-self: start; height: 33.554cqw; margin-top: -0.140cqw; background: #d9d9d9; }
body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > .inplant-brand { grid-column: 5; grid-row: 1; margin: 2.215cqw 0 0 -0.235cqw; }
body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > .inplant-brand img { width: max(220px, 25.458cqw); }
body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > .ipf-rule { grid-column: 5; grid-row: 2; display: block; width: 56px; height: 3px; background: var(--accent); margin: 1.909cqw 0 0; }
body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > .story-text { grid-column: 5; grid-row: 3; max-width: none; margin: 1.629cqw 0 0; font-size: max(17px, 1.438cqw); line-height: 1.5575; color: #414141; }
body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > .story-text strong { color: #000; font-weight: 700; }
body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > .cta-row { grid-column: 5; grid-row: 4; margin: max(22px, 2.489cqw) 0 0; }
/* botones del tamaño de los del encabezado (54 px; antes 80 px) */
body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > .cta-row .btn { font-size: 16px; padding: 12px 22px; }
body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > .cta-row .wa-ico { width: 1.15em; height: 1.15em; }
/* marco: cuatro líneas grises de 1 px y cuatro esquinas naranjas de 22 × 3 px */
.ipf-e { position: absolute; background: #cfcfcf; }
.ipf-t { top: 0; left: 0; right: 0; height: 1px; transform-origin: left; } .ipf-r { top: 0; right: 0; bottom: 0; width: 1px; transform-origin: top; }
.ipf-b { bottom: 0; left: 0; right: 0; height: 1px; transform-origin: right; } .ipf-l { top: 0; left: 0; bottom: 0; width: 1px; transform-origin: bottom; }
.ipf-k { position: absolute; width: 22px; height: 22px; border: 0 solid var(--accent); }
.ipf-k1 { top: -1px; left: -1px; border-top-width: 3px; border-left-width: 3px; } .ipf-k2 { top: -1px; right: -1px; border-top-width: 3px; border-right-width: 3px; }
.ipf-k3 { bottom: -1px; left: -1px; border-bottom-width: 3px; border-left-width: 3px; } .ipf-k4 { bottom: -1px; right: -1px; border-bottom-width: 3px; border-right-width: 3px; }
/* animación al llegar (solo si el script corre; sin script todo se ve): el marco se dibuja, aparecen las esquinas, entra el dibujo por la izquierda y el texto por la derecha */
.ipf[data-io] .ipf-e { transition: transform .45s linear; } .ipf[data-io]:not(.in) .ipf-t, .ipf[data-io]:not(.in) .ipf-b { transform: scaleX(0); } .ipf[data-io]:not(.in) .ipf-r, .ipf[data-io]:not(.in) .ipf-l { transform: scaleY(0); }
.ipf[data-io] .ipf-r { transition-delay: .45s; } .ipf[data-io] .ipf-b { transition-delay: .9s; } .ipf[data-io] .ipf-l { transition-delay: 1.35s; }
.ipf[data-io] .ipf-k { transition: opacity .4s 1.6s, transform .6s 1.6s cubic-bezier(.2,.7,.2,1); }
.ipf[data-io]:not(.in) .ipf-k { opacity: 0; } .ipf[data-io]:not(.in) .ipf-k1 { transform: translate(-10px,-10px); } .ipf[data-io]:not(.in) .ipf-k2 { transform: translate(10px,-10px); }
.ipf[data-io]:not(.in) .ipf-k3 { transform: translate(-10px,10px); } .ipf[data-io]:not(.in) .ipf-k4 { transform: translate(10px,10px); }
.ipf[data-io] > :is(.ip-draw, .inplant-brand, .ipf-rule, .story-text, .cta-row, .ipf-div) { transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.ipf[data-io]:not(.in) > .ip-draw { opacity: 0; transform: translateX(-40px); } .ipf[data-io].in > .ip-draw { transition-delay: .5s; }
.ipf[data-io]:not(.in) > .ipf-div { transform: scaleY(0); transform-origin: top; } .ipf[data-io].in > .ipf-div { transition-delay: .6s; }
.ipf[data-io]:not(.in) > :is(.inplant-brand, .story-text, .cta-row) { opacity: 0; transform: translateX(40px); }
.ipf[data-io].in > .inplant-brand { transition-delay: .7s; } .ipf[data-io].in > .story-text { transition-delay: .8s; } .ipf[data-io].in > .cta-row { transition-delay: .9s; }
.ipf[data-io]:not(.in) > .ipf-rule { transform: scaleX(0); transform-origin: left; } .ipf[data-io].in > .ipf-rule { transition-delay: 1.1s; }
@media (prefers-reduced-motion: reduce) { .ipf * { transition: none !important; opacity: 1 !important; transform: none !important; } }
/* teléfono: una columna — logo, dibujo, línea naranja, texto, botones */
@media (max-width: 900px) {
  body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 24px; }
  body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > :is(.ip-draw, .inplant-brand, .ipf-rule, .story-text, .cta-row) { grid-column: 1; grid-row: auto; }
  body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > .ipf-div { display: none; }
  body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > .inplant-brand { margin: 0 0 20px; } body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > .ip-draw { margin-bottom: 4px; } body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > .story-text { font-size: 17px; margin-top: 18px; }
  body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > .ipf-rule { margin-top: 12px; }
}

/* 21/10/2026 (Nicolas, su PPT, segunda pasada): sin la línea gris vertical; un panel gris claro (#F7F7F7 = su gris al 63 %) detrás de la columna
   del logo y el texto, a ~22–26 px del marco arriba, a la derecha y abajo, y a 40 px del dibujo. En Kits, que ya va sobre gris, el panel es blanco. */
body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > .ipf-div { display: none; }
body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > .ipf-pan { position: absolute; left: 50.687cqw; right: 1.457cqw; top: 1.394cqw; bottom: 1.636cqw; background: #f7f7f7; z-index: 0; }
body[data-page="servicios.html"] #kits-en-consignacion .ipf > .ipf-pan { background: #fff; }
body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > :is(.inplant-brand, .ipf-rule, .story-text, .cta-row, .ip-draw) { position: relative; z-index: 1; }
body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > .cta-row { margin-bottom: 4.506cqw; }
.ipf[data-io] > .ipf-pan { transition: opacity .8s .55s; } .ipf[data-io]:not(.in) > .ipf-pan { opacity: 0; }
@media (max-width: 900px) { body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > .ipf-pan { display: none; } body[data-page="servicios.html"] :is(#sistema-integral-inplant, #kits-en-consignacion) .ipf > .cta-row { margin-bottom: 0; } }