/* AndesGrid · sitio. Marca: logo 4b (celda hexagonal). Motivo único: el hexágono. */
:root {
  --ground: #FFFFFF;
  --surface: #F3F4F6;
  --surface-2: #E5E7EB;
  --ink: #0B1220;
  --ink-2: #111827;
  --muted: #374151;
  --accent: #00B86B;        /* verde AndesGrid: rellenos grandes y acción */
  --accent-text: #00804A;   /* verde legible sobre blanco */
  --accent-on-dark: #2EE88E;
  --earth: #D6CFC4;         /* roca de la mina */
  --earth-2: #BFB6A8;
  --tint-1: #0B3D2A; --tint-2: #00663C; --tint-3: #00804A; --tint-4: #00B86B; --tint-5: #7FDCB5;

  --font-display: 'Manrope', system-ui, sans-serif;
  --font-text: 'Inter', system-ui, sans-serif;

  --fs-display: clamp(44px, 6.4vw, 100px);
  --fs-h2: clamp(32px, 4vw, 60px);
  --fs-statement: clamp(22px, 2.5vw, 36px);
  --fs-body: 18px;
  --fs-small: 15px;

  --margin: clamp(16px, 3vw, 32px);
  --max: 1360px;
  --gap-section: clamp(104px, 13vw, 200px);
  --hex: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  --hex-btn: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--fs-body)/1.55 var(--font-text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-size: var(--fs-display); line-height: 0.98; }
h2 { font-size: var(--fs-h2); line-height: 1.02; }
h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.02em; }
.statement { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-statement); line-height: 1.22; letter-spacing: -0.02em; text-wrap: pretty; }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; max-width: 46ch; }
.small { font-size: var(--fs-small); }
p { max-width: 62ch; text-wrap: pretty; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); }
.section { padding-block: var(--gap-section) 0; }
.section:last-of-type { padding-bottom: var(--gap-section); }

/* Botón: hexágono alargado */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 34px; border: 0; background: var(--accent); color: var(--ink); font: 700 17px/1 var(--font-display); letter-spacing: -0.01em; text-decoration: none; clip-path: var(--hex-btn); cursor: pointer; transition: transform 140ms var(--ease-out), background-color 180ms ease, color 180ms ease; }
.btn:active { transform: scale(0.97); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--small { min-height: 44px; padding: 0 24px; font-size: 15px; }
.link { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; transition: text-decoration-color 180ms ease; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--ink); color: #fff; }
  .btn--ink:hover { background: var(--accent); color: var(--ink); }
  .link:hover { text-decoration-color: currentColor; }
}

/* Viñeta: hexágono a tamaño de texto */
.hex-list li { position: relative; padding-left: 1.4em; }
.hex-list li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 0.7em; height: 0.8em; background: var(--accent); clip-path: var(--hex); }

/* ---------- Barra ---------- */
.bar { position: absolute; inset: 0 0 auto; z-index: 20; }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 28px/1 var(--font-display); letter-spacing: -0.04em; color: var(--ink); }
.brand svg { width: 36px; height: 36px; }
.brand b { color: var(--accent-text); font-weight: inherit; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); }
.nav a:not(.btn) { font: 600 16px/1 var(--font-text); text-decoration: none; color: var(--ink); padding: 8px 0; }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav .m-only { display: none; }
@media (max-width: 760px) {
  .nav a:not(.btn):not(.m-only) { display: none; }
  .nav .m-only { display: inline; }
  .nav .btn { display: none; }
  .brand { font-size: 24px; }
  .brand svg { width: 30px; height: 30px; }
}

/* ---------- Hero: hexágono gigante recortado ---------- */
.hero { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; display: flex; align-items: center; background: var(--ground); }
.hero__copy { position: relative; z-index: 1; padding-top: 84px; }
.hero__copy > * { max-width: min(46vw, 640px); }
.hero h1 { margin-bottom: 28px; }
.hero .lead { margin-bottom: 36px; color: var(--ink); }
.hero__note { margin-top: 18px; font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 860px) {
  .hero { align-items: flex-start; min-height: 100svh; }
  .hero__copy { padding-top: 15svh; }
  .hero__copy > * { max-width: 100%; }
  .hero h1 { font-size: 11vw; }
  .hero .lead { font-size: var(--fs-body); }
  }

/* ---------- Statement con miniaturas en línea ---------- */
.statement-block { padding-block: 22vh; }
.statement-block p { font-size: clamp(24px, 2.5vw, 36px); max-width: 38ch; margin-inline: auto; text-align: center; font-family: var(--font-display); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.inline-hex { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.16em; margin-inline: 0.12em; background: var(--ink); clip-path: var(--hex); }
.inline-hex svg { width: 100%; height: 100%; }
@media (max-width: 760px) { .statement-block { padding-block: 96px; } .statement-block p { text-align: left; font-size: 24px; } }

/* ---------- Faenas interactivas (lo vivo) ---------- */
.pit { background: var(--surface); padding-block: clamp(64px, 8vw, 120px); }
.pit__head { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: 40px; }
.pit__head p { color: var(--ink); }
.pit__stage { position: relative; background: var(--ground); }
.pit__stage svg { width: 100%; height: auto; }
.pit__controls { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 4px; margin-top: 4px; }
.pit__legend { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 16px; font-size: var(--fs-small); font-weight: 600; }
.pit__legend span::before { content: ""; display: inline-block; width: 14px; height: 16px; margin-right: 8px; vertical-align: -2px; clip-path: var(--hex); background: var(--c); }
.pit__controls > * { background: var(--ground); padding: 20px 24px; }
.pit__controls label { display: block; font-weight: 600; margin-bottom: 12px; }
.readout dt { font-size: var(--fs-small); color: var(--muted); }
.readout dd { margin: 4px 0 0; font: 800 clamp(22px, 2vw, 28px)/1.15 var(--font-display); letter-spacing: -0.02em; }
.readout dd.is-bad { color: #B42318; }
.readout dd.is-good { color: var(--accent-text); }
input[type="range"] { width: 100%; height: 44px; accent-color: var(--accent-text); cursor: pointer; }
@media (max-width: 860px) {
  .pit__head { grid-template-columns: 1fr; }
  .pit__controls { grid-template-columns: 1fr 1fr; }
  .pit__controls > :first-child { grid-column: 1 / -1; }
}

.pit__tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.pit__tabs button { min-height: 48px; padding: 0 22px; border: 0; background: var(--ground); color: var(--ink); font: 700 16px/1 var(--font-display); cursor: pointer; transition: background-color 180ms ease, color 180ms ease; }
.pit__tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
@media (hover: hover) { .pit__tabs button:not([aria-selected="true"]):hover { background: var(--surface-2); } }
.pit__note { margin-top: 16px; font-size: var(--fs-body); font-weight: 600; }
.scene .veh { transition: transform 120ms linear; }

/* ---------- Vitrina: objeto sobre hexágono ---------- */
.showcase > * { min-width: 0; }
.showcase { position: relative; min-height: 100svh; display: grid; grid-template-columns: 5fr 7fr; align-items: center; gap: var(--margin); }
.showcase__list { align-self: end; padding-bottom: 6vh; }
.showcase__list h2 { color: var(--muted); font-size: clamp(28px, 2.9vw, 44px); margin-bottom: 8px; }
.showcase__list button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 4px 0; font: 800 clamp(28px, 2.9vw, 44px)/1.15 var(--font-display); letter-spacing: -0.03em; color: var(--muted); cursor: pointer; transition: color 180ms ease; }
.showcase__list button[aria-selected="true"] { color: var(--ink); }
.showcase__list button[aria-selected="true"]::after { content: ""; display: inline-block; width: 0.42em; height: 0.48em; margin-left: 0.3em; background: var(--accent); clip-path: var(--hex); vertical-align: 0.1em; }
@media (hover: hover) { .showcase__list button:hover { color: var(--ink); } }
.showcase__stage { position: relative; display: grid; grid-template-columns: 1fr 260px; align-items: center; gap: 24px; }
.showcase__hex { position: relative; aspect-ratio: 1 / 1.1547; width: min(64vh, 100%); justify-self: center; clip-path: var(--hex); background: var(--accent); transition: background-color 300ms ease; display: grid; place-items: center; }
.showcase__hex svg { width: 70%; height: auto; transition: opacity 300ms ease, transform 300ms var(--ease-out); }
.showcase__hex.is-swapping svg { opacity: 0; transform: scale(0.96); }
.showcase__fact h3 { margin-bottom: 10px; }
.showcase__fact p { font-size: var(--fs-body); }
.showcase__fact a { display: inline-block; margin-top: 16px; }
@media (max-width: 960px) {
  .showcase { grid-template-columns: 1fr; min-height: 0; }
  .showcase__stage { grid-template-columns: 1fr; order: -1; }
  .showcase__hex { width: 86vw; max-width: 460px; }
  .showcase__list { padding-bottom: 0; }
  .showcase__list [role="tablist"] { display: flex; flex-wrap: wrap; gap: 2px 20px; }
  .showcase__list button { width: auto; font-size: 24px; }
}

/* ---------- Acordeón de paneles teñidos ---------- */
.steps__intro { display: grid; grid-template-columns: 5fr 1fr 5fr; margin-bottom: 64px; }
.steps__intro p { grid-column: 3; align-self: end; }
.steps { display: flex; height: 520px; }
.steps__panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; transition: flex-grow 450ms var(--ease-in-out); color: #fff; }
.steps__panel:nth-child(1) { background: var(--tint-1); }
.steps__panel:nth-child(2) { background: var(--tint-2); }
.steps__panel:nth-child(3) { background: var(--tint-3); }
.steps__panel:nth-child(4) { background: var(--tint-4); color: var(--ink); }
.steps__panel:nth-child(5) { background: var(--tint-5); color: var(--ink); }
.steps__panel.is-open { flex-grow: 6; }
.steps__panel button { position: absolute; inset: 0; width: 100%; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; }
.steps__panel button span { position: absolute; left: 24px; bottom: 24px; font: 700 20px/1 var(--font-display); white-space: nowrap; transform-origin: left bottom; transform: rotate(-90deg) translateY(100%); }
.steps__panel.is-open button { pointer-events: none; }
.steps__panel.is-open button span { opacity: 0; }
.steps__body { position: absolute; inset: 32px; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; visibility: hidden; transition: opacity 250ms ease, visibility 0s 250ms; pointer-events: none; min-width: 420px; }
.steps__panel.is-open .steps__body { opacity: 1; visibility: visible; transition: opacity 250ms ease 200ms, visibility 0s; pointer-events: auto; }
.steps__body h3 { font-size: clamp(30px, 2.8vw, 40px); max-width: 16ch; }
.steps__body p { max-width: 36ch; }
@media (max-width: 860px) {
  .steps__intro { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .steps__intro p { grid-column: 1; }
  .steps { flex-direction: column; height: auto; }
  .steps__panel { flex: none; min-height: 64px; }
  .steps__panel button span { transform: none; left: 20px; bottom: auto; top: 22px; font-size: 18px; }
  .steps__body { position: static; min-width: 0; display: none; padding: 20px; gap: 24px; }
  .steps__panel.is-open .steps__body { display: flex; }
  .steps__panel.is-open button { display: none; }
  .steps__body h3 { font-size: 26px; }
  .steps__body p { font-size: var(--fs-body); }
}

/* ---------- Panel interior oscuro ---------- */
.inset { margin: var(--gap-section) 20px 0; background: var(--ink); color: #fff; min-height: 110svh; position: relative; overflow: hidden; display: grid; grid-template-columns: 63% 1fr; }
.inset__left { padding: 56px; }
.inset__left h2 { color: #fff; max-width: 12ch; }
.inset__left .drawn { position: absolute; left: 56px; bottom: -8vw; width: 38vw; }
.inset__right { padding: 56px 56px 56px 0; display: flex; flex-direction: column; gap: 64px; }
.inset__right h3 { font-size: clamp(22px, 2vw, 28px); margin-bottom: 12px; color: var(--accent-on-dark); }
.inset__right p { font-size: var(--fs-small); color: #E5E7EB; max-width: 34ch; }
.inset .btn { align-self: flex-start; }
@media (max-width: 960px) {
  .inset { margin-inline: 10px; grid-template-columns: 1fr; min-height: 0; }
  .inset__left { padding: 32px 24px 0; }
  .inset__left h2 { font-size: 8.5vw; }
  .inset__left .drawn { position: relative; left: auto; bottom: auto; width: 86vw; margin: 0 auto -20vw; order: 9; }
  .inset__right { padding: 32px 24px 0; gap: 32px; }
  .inset__right .btn { margin-bottom: 40px; }
  .inset { display: flex; flex-direction: column; }
}

/* ---------- FAQ: fichas con pestaña ---------- */
.faq h2 { margin-bottom: 48px; }
.faq__cards { max-width: 980px; margin-inline: auto; }
.faq__card { position: relative; margin-top: -8px; color: var(--ink); }
.faq__card:nth-child(3n+1) { --c: var(--surface-2); }
.faq__card:nth-child(3n+2) { --c: var(--tint-5); }
.faq__card:nth-child(3n) { --c: var(--earth); }
.faq__card summary { list-style: none; cursor: pointer; display: block; }
.faq__card summary::-webkit-details-marker { display: none; }
.faq__tab { display: block; width: 200px; height: 40px; padding: 11px 24px 0; background: var(--c); font: 600 16px/1 var(--font-text); clip-path: polygon(0 100%, 14px 0, calc(100% - 14px) 0, 100% 100%); margin-left: calc(var(--i) * min(150px, 14%)); }
.faq__q { display: block; background: var(--c); padding: 22px 32px 30px; font: 700 clamp(22px, 2vw, 28px)/1.25 var(--font-display); letter-spacing: -0.01em; }
.faq__a { background: var(--c); padding: 0 32px 32px; margin-top: -8px; }
.faq__a p { font-size: var(--fs-body); max-width: 50ch; }
.faq__card[open] .faq__q { padding-bottom: 16px; }
@media (max-width: 760px) {
  .faq__tab { width: 120px; margin-left: calc(var(--i) * 48px); font-size: 15px; padding-inline: 18px; }
  .faq__q { padding: 18px 20px 24px; font-size: 18px; }
  .faq__a { padding: 0 20px 24px; }
  .faq__a p { font-size: 16px; }
}

/* ---------- Contacto: cupón recortable ---------- */
.coupon { max-width: 1160px; margin-inline: auto; background: var(--accent); color: var(--ink); display: grid; grid-template-columns: 46% 54%; position: relative; }
.coupon::before, .coupon::after { content: ""; position: absolute; left: 46%; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: var(--ground); }
.coupon::before { top: -14px; } .coupon::after { bottom: -14px; }
.coupon__left { padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; border-right: 5px dotted var(--ground); }
.coupon__left h2 { font-size: clamp(30px, 3vw, 46px); }
.coupon__left p { font-size: var(--fs-body); }
.coupon form { padding: 48px; display: grid; gap: 10px; }
.field input, .field select { width: 100%; height: 52px; border: 0; background: #5FD9A5; color: var(--ink); padding: 0 18px; font: 500 16px var(--font-text); border-radius: 0; appearance: none; }
.field input::placeholder { color: #0B3D2A; }
.field select { background-image: none; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; margin-top: 6px; }
.consent input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--ink); }
.coupon button[type="submit"] { width: 100%; height: 56px; border: 0; background: var(--ink); color: #fff; font: 700 17px var(--font-display); cursor: pointer; margin-top: 6px; transition: transform 140ms var(--ease-out), background-color 180ms ease; }
.coupon button[type="submit"]:active { transform: scale(0.98); }
@media (hover: hover) { .coupon button[type="submit"]:hover { background: var(--ink-2); } }
.form-status { font-size: 15px; min-height: 1.4em; }
@media (max-width: 860px) {
  .coupon { grid-template-columns: 1fr; margin-inline: -4px; }
  .coupon::before, .coupon::after { left: -14px; top: 216px; bottom: auto; margin-left: 0; }
  .coupon::after { left: auto; right: -14px; }
  .coupon__left { padding: 28px 24px; border-right: 0; border-bottom: 5px dotted var(--ground); height: 230px; }
  .coupon form { padding: 28px 24px; }
  .field input, .field select { height: 54px; }
  .row-2 { grid-template-columns: 1fr; }
}

/* ---------- Pie: el hexágono construido en grande ---------- */
.foot { background: var(--ink); color: #fff; margin-top: var(--gap-section); padding-block: 72px 32px; }
.foot__mark { display: flex; align-items: center; gap: 0.16em; padding-bottom: 0.22em; font: 800 clamp(56px, 16.4vw, 236px)/1 var(--font-display); letter-spacing: -0.045em; color: #fff; }
.foot__mark svg { width: 0.86em; height: 0.86em; flex: none; }
.foot__mark b { color: var(--accent-on-dark); font-weight: inherit; }
.foot__cols { display: grid; grid-template-columns: repeat(4, 1fr) 2fr; gap: 32px; margin-top: 56px; }
.foot__cols h3 { font-size: 15px; letter-spacing: 0; color: var(--accent-on-dark); margin-bottom: 12px; font-family: var(--font-text); font-weight: 600; }
.foot__cols li { font-size: 15px; padding-block: 4px; }
.foot__cols a { text-decoration: none; color: #E5E7EB; }
@media (hover: hover) { .foot__cols a:hover { color: #fff; text-decoration: underline; } }
.foot__last { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 56px; font-size: 15px; color: #C7CED9; flex-wrap: wrap; }
@media (max-width: 760px) {
  .foot__mark { font-size: 15vw; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .foot__cols > :last-child { grid-column: 1 / -1; }
}

/* ---------- Bloques de página de producto ---------- */
.band { background: var(--ink); color: #fff; padding-block: clamp(80px, 10vw, 160px); margin-top: var(--gap-section); }
.band h2 { color: #fff; max-width: 18ch; }
.band p { color: #E5E7EB; font-size: clamp(18px, 1.6vw, 22px); margin-top: 24px; max-width: 44ch; }
.band--green { background: var(--accent); color: var(--ink); }
.band--green h2, .band--green p { color: var(--ink); }
.band__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--margin); align-items: end; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split--flip > :first-child { order: 2; }
.split h2 { margin-bottom: 24px; }
.split p + p { margin-top: 16px; }
.drawn-hex { aspect-ratio: 1 / 1.1547; clip-path: var(--hex); background: var(--surface); display: grid; place-items: center; }
.drawn-hex svg { width: 74%; height: auto; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split--flip > :first-child { order: 0; } .drawn-hex { max-width: 420px; width: 86vw; margin-inline: auto; } }

.rows { margin-top: 56px; }
.rows > li { display: grid; grid-template-columns: 5fr 7fr; gap: var(--margin); padding-block: 32px; }
.rows > li:nth-child(odd) { background: var(--surface); }
.rows > li > * { padding-inline: 24px; }
.rows h3 { font-size: clamp(22px, 2vw, 28px); }
@media (max-width: 760px) { .rows > li { grid-template-columns: 1fr; gap: 10px; } }

.tl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 56px; }
.tl > li { background: var(--surface); padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.tl > li:nth-child(2) { background: var(--earth); }
.tl > li:nth-child(3) { background: var(--accent); }
.tl .hex-dot { width: 44px; height: 50px; clip-path: var(--hex); background: var(--ink); }
.tl > li:nth-child(2) .hex-dot { background: var(--earth-2); }
@media (max-width: 760px) { .tl { grid-template-columns: 1fr; } }

/* Fragmento de interfaz ficticio */
[data-ui] { font-family: var(--font-text); }
.ui { background: var(--ink); color: #E5E7EB; padding: 20px; font-size: 15px; }
.ui__top { display: flex; justify-content: space-between; color: #C7CED9; margin-bottom: 14px; font-size: 15px; }
.ui table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui th, .ui td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #1F2937; font-weight: 500; }
.ui th { color: #9CA3AF; font-weight: 500; }
.ui .ok { color: var(--accent-on-dark); }
.ui .warn { color: #F4B92E; }

/* Antes / después */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 56px; }
.compare > div { padding: 40px; }
.compare > div:first-child { background: var(--earth); }
.compare > div:last-child { background: var(--ink); color: #fff; }
.compare h3 { margin-bottom: 24px; }
.compare ol li { padding-block: 14px; font-size: var(--fs-body); }
.compare ol li + li { border-top: 0; }
.compare b { display: block; font-family: var(--font-display); font-size: 15px; margin-bottom: 2px; }
.compare > div:last-child b { color: var(--accent-on-dark); }
@media (max-width: 860px) { .compare { grid-template-columns: 1fr; } .compare > div { padding: 28px 22px; } }

/* Acordeón nativo de bloques */
.blocks { margin-top: 56px; }
.blocks details { background: var(--surface); margin-bottom: 4px; }
.blocks details[open] { background: var(--surface-2); }
.blocks summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 28px 32px; font: 800 clamp(22px, 2.2vw, 32px)/1.15 var(--font-display); letter-spacing: -0.02em; }
.blocks summary::-webkit-details-marker { display: none; }
.blocks summary::after { content: ""; flex: none; width: 26px; height: 30px; clip-path: var(--hex); background: var(--accent); transition: transform 300ms var(--ease-out); }
.blocks details[open] summary::after { transform: rotate(90deg); }
.blocks .inner { padding: 0 32px 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 48px; }
.blocks .inner b { display: block; font-family: var(--font-display); font-size: 18px; margin-bottom: 4px; }
.blocks .inner p { font-size: var(--fs-body); }
@media (max-width: 760px) { .blocks summary { padding: 22px 20px; } .blocks .inner { grid-template-columns: 1fr; padding: 0 20px 24px; } }

/* Línea de tiempo de la pana (lo vivo en FleetOPS) */
.stop { margin-top: 48px; }
.stop__bar { display: flex; height: 120px; gap: 3px; }
.stop__seg { flex: var(--w) 1 0; min-width: 0; background: var(--surface-2); position: relative; transition: background-color 400ms ease, flex-grow 600ms var(--ease-in-out); border: 0; padding: 0; cursor: default; text-align: left; font: inherit; color: inherit; }
.stop__seg.repair { background: var(--accent); }
.stop.is-open .stop__seg:not(.repair) { background: var(--c); cursor: pointer; }
.stop__seg span { position: absolute; left: 10px; bottom: 10px; right: 6px; font: 700 15px/1.2 var(--font-display); opacity: 0; transition: opacity 300ms ease; }
.stop.is-open .stop__seg span, .stop__seg.repair span { opacity: 1; }
.stop__legend { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; flex-wrap: wrap; align-items: center; }
.stop__detail { margin-top: 20px; min-height: 3.2em; font-size: 18px; max-width: 60ch; }
@media (max-width: 760px) {
  .stop__bar { flex-direction: column; height: auto; }
  .stop__seg { flex: none; height: calc(var(--w) * 3.4px + 40px); }
  .stop__seg span { opacity: 1; }
}

.roles-note { margin-top: 24px; color: var(--muted); }

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] > * { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--d, 0) * 75ms); }
  .js [data-reveal].is-in > * { opacity: 1; transform: none; }
  .js   .js .hero.is-in }
@media (prefers-reduced-motion: no-preference) {
  .js .showcase__hex { transition: background-color 300ms ease, transform 500ms var(--ease-out); }
  @media (hover: hover) { .showcase__hex:hover { transform: scale(1.02); } .faq__card summary:hover .faq__q { text-decoration: underline; text-underline-offset: 4px; } }
  #truck { transition: transform 120ms linear; }
}
html:not(.js) [data-reveal] > * { opacity: 1; }

/* Hero de titular largo (FleetOPS) */
.hero__pre { font: 700 var(--fs-statement)/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--muted); margin-bottom: 14px; }
.hero--long h1 { font-size: clamp(40px, 4.6vw, 76px); }
@media (min-width: 861px) { .hero--long .hero__copy > * { max-width: min(46vw, 680px); } }
.hero--long @media (max-width: 860px) {
  .hero--long h1 { font-size: 9vw; }
  .hero--long .hero__copy > * { max-width: 100%; }
  .hero--long   .hero--long .hero__copy { padding-top: 13svh; }
}
.split > * { min-width: 0; }
@media (max-width: 860px) {
  .split .drawn-hex { width: 100%; }
  .split > .drawn-hex { width: 86vw; }
  .band__grid { grid-template-columns: 1fr; }
  .band h2 { max-width: none; }
}
.rows h3::before { content: ""; display: inline-block; width: 0.62em; height: 0.72em; margin-right: 0.45em; background: var(--accent); clip-path: var(--hex); vertical-align: -0.02em; }
.band .statement { font-size: var(--fs-statement); color: inherit; }
.btn { text-align: center; line-height: 1.15; }
.showcase__list button { position: relative; }
.showcase__list button[aria-selected="true"]::after { content: none; }
.showcase__list button[aria-selected="true"]::before { content: ""; position: absolute; left: -0.6em; top: 0.42em; width: 0.4em; height: 0.46em; background: var(--accent); clip-path: var(--hex); }
@media (min-width: 761px) {
  .stop__seg.repair span { top: calc(100% + 10px); bottom: auto; left: 0; white-space: nowrap; color: var(--accent-text); }
  .stop__legend { margin-top: 40px; }
}
@media (max-width: 960px) { .showcase__list button[aria-selected="true"]::before { left: auto; right: -0.55em; top: 0.4em; } .showcase__list [role="tablist"] { padding-right: 12px; } }
.stop__seg small { display: block; font: 600 15px/1.2 var(--font-text); opacity: .8; margin-top: 2px; }
.stop__sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 32px; }
.stop__sum > div { background: var(--surface); padding: 24px; }
.stop__sum > div:first-child { background: var(--accent); }
.stop__sum b { display: block; font: 800 clamp(36px, 4vw, 60px)/1 var(--font-display); letter-spacing: -0.03em; }
.stop__sum span { display: block; margin-top: 8px; font-size: var(--fs-small); }
@media (max-width: 760px) { .stop__sum { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .pit__stage svg { height: 300px; } }
.readout { margin: 0; }

/* ---------- Fondo continuo: curvas de nivel de un plano de mina, une todas las secciones ---------- */
body { background: var(--ground) url(topo.svg) center top / 1600px auto repeat; }
.hero, .statement-block { background: transparent; }
.pit { background-color: rgba(243, 244, 246, 0.78); }
.band, .inset, .foot { background-image: url(topo-dark.svg); background-size: 1600px auto; background-position: center top; }
.band--green { background-image: none; }
@media (hover: hover) and (min-width: 961px) {
  body, .band, .inset, .foot { background-attachment: fixed; }
}

/* Frase con productos: chips legibles */
.chip { display: inline-flex; align-items: center; gap: 0.28em; padding: 0.06em 0.42em 0.06em 0.3em; background: var(--accent); color: var(--ink); white-space: nowrap; clip-path: polygon(0.32em 0, calc(100% - 0.32em) 0, 100% 50%, calc(100% - 0.32em) 100%, 0.32em 100%, 0 50%); }
.chip svg { width: 1.5em; height: 1.05em; color: var(--ink); --sec: #fff; --mid: #0B3D2A; --acc: #fff; }
.statement-block p { line-height: 1.5; }

/* Toda la operación */
.ops { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px var(--margin); margin-top: 64px; }
.ops li { display: grid; grid-template-columns: 112px 1fr; gap: 24px; align-items: center; }
.ops__icon { display: grid; place-items: center; width: 112px; aspect-ratio: 1 / 1.1547; background: var(--surface); clip-path: var(--hex); color: var(--ink); --sec: #fff; --mid: #4B5563; }
.ops__icon svg { width: 72%; height: auto; }
.ops li:nth-child(3n+1) .ops__icon { background: var(--accent); --mid: #0B3D2A; --acc: #fff; }
.ops li:nth-child(3n+2) .ops__icon { background: var(--earth); }
.ops h3 { margin-bottom: 6px; }
.api { display: grid; grid-template-columns: 180px 1fr; gap: 32px; align-items: center; margin-top: 72px; padding: 32px; background: var(--ink); color: #fff; }
.api .ops__icon--big { width: 180px; background: var(--accent); --mid: #0B3D2A; --acc: #fff; }
.api h3 { color: #fff; font-size: clamp(26px, 2.6vw, 38px); margin-bottom: 10px; }
.api p { color: #E5E7EB; }
.api .link { color: var(--accent-on-dark); display: inline-block; margin-top: 12px; }
@media (max-width: 860px) {
  .ops { grid-template-columns: 1fr; gap: 28px; }
  .ops li { grid-template-columns: 84px 1fr; gap: 18px; }
  .ops__icon { width: 84px; }
  .api { grid-template-columns: 1fr; padding: 24px; }
  .api .ops__icon--big { width: 120px; }
}

/* Controles de la faena: deslizador arriba, cinco lecturas debajo */
.pit__controls { grid-template-columns: repeat(5, 1fr); }
.pit__controls > :first-child { grid-column: 1 / -1; }
@media (max-width: 860px) { .pit__controls { grid-template-columns: 1fr 1fr; } }

/* Bloque de código de ejemplo (API) */
.code { background: var(--ink); color: #E5E7EB; padding: 24px; overflow-x: auto; font: 500 15px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.code .k { color: var(--accent-on-dark); }
.code .c { color: #9CA3AF; }

/* Hero: faena conectada, liviana */
.hero__scene { position: absolute; right: max(var(--margin), calc((100vw - var(--max)) / 2 + var(--margin))); top: 52%; transform: translateY(-50%); width: min(44vw, 640px); aspect-ratio: 600 / 620; }
@media (min-width: 861px) { .hero__copy > * { max-width: min(46vw, 660px); } .hero h1:not(.hero--long h1) { font-size: clamp(44px, 5.2vw, 84px); } }
.hero__scene svg { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero__scene { opacity: 0; transform: translateY(-46%) scale(0.97); transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-out); }
  .js .hero.is-in .hero__scene { opacity: 1; transform: translateY(-50%); }
  .hero__scene .dev { animation: devpulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes devpulse { 50% { transform: scale(1.25); } }
}
@media (max-width: 860px) {
  .hero { flex-direction: column; min-height: 0; padding-bottom: 32px; }
  .hero__scene, .js .hero.is-in .hero__scene { order: 2; position: relative; right: auto; top: auto; transform: none; width: min(100%, 460px); margin: 32px auto 0; }
  .js .hero__scene { transform: scale(0.97); }
}

/* Fondo vivo: datos viajando por las curvas de nivel */
.netbg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }