/* Kepler — tokens del Design System */
:root, [data-theme="oscuro"] {
  --carbon: #272727; --grafito: #3D3B40; --acero: #909A9F; --lima: #C2F307; --hueso: #FAFAFA;
  --surface: var(--carbon); --surface-raised: var(--grafito);
  --ink: var(--hueso); --ink-muted: var(--acero); --line: var(--acero);
  --accent: var(--lima); --on-accent: var(--carbon); --accent-ink: var(--lima); --focus: var(--lima);
  --focus-ring: 0 0 0 2px #272727, 0 0 0 4px #C2F307;
}
[data-theme="claro"] {
  --surface: var(--hueso); --surface-raised: #FFFFFF;
  --ink: var(--carbon); --ink-muted: var(--grafito); --line: var(--acero);
  --accent: var(--lima); --on-accent: var(--carbon); --accent-ink: var(--carbon); --focus: var(--carbon);
  --focus-ring: 0 0 0 2px #FAFAFA, 0 0 0 4px #272727;
}
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --radius-0: 0px; --radius-sm: 6px; --radius-md: 16px; --radius-lg: 24px;
  --font-display: "Founders Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-texto: "Founders Grotesk Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
.hero { font-family: var(--font-display); font-size: 88px; line-height: 88px; font-weight: 300; }
.gran-titulo { font-family: var(--font-display); font-size: 56px; line-height: 56px; font-weight: 300; }
.titulo { font-family: var(--font-display); font-size: 32px; line-height: 37.33px; font-weight: 300; }
.subtitulo { font-family: var(--font-mono); font-size: 13.33px; line-height: 16px; font-weight: 600; letter-spacing: 0.1em; }
.datos { font-family: var(--font-mono); font-size: 9.33px; line-height: 16px; font-weight: 600; letter-spacing: 0.1em; }
.texto { font-family: var(--font-texto); font-size: 16px; line-height: 18.67px; font-weight: 400; letter-spacing: 0.1em; }
@font-face { font-family: "Founders Grotesk"; src: url("/fonts/FoundersGrotesk-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Founders Grotesk"; src: url("/fonts/FoundersGrotesk-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Founders Grotesk"; src: url("/fonts/FoundersGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Founders Grotesk Condensed"; src: url("/fonts/FoundersGroteskCondensed-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Founders Grotesk Condensed"; src: url("/fonts/FoundersGroteskCondensed-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* Kepler — componentes. Todos los valores salen de tokens.css. */
body { margin: 0; font-family: var(--font-texto); background: var(--surface); color: var(--ink); }

/* Boton */
.kp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  box-sizing: border-box; min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-weight: 600; font-size: 13.33px; line-height: 16px;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; white-space: nowrap;
}
.kp-btn-primario { background: var(--accent); color: var(--on-accent); }
.kp-btn-primario:hover { box-shadow: inset 0 0 0 2px var(--on-accent); }
.kp-btn-secundario { background: transparent; color: var(--accent-ink); border-color: var(--accent-ink); }
.kp-btn-secundario:hover { background: var(--accent-ink); color: var(--bloque-bg, var(--surface)); }
.kp-btn-editorial {
  background: var(--accent); color: var(--on-accent);
  min-height: 48px; padding: 3px var(--space-6) 0; border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 24px;
  letter-spacing: 0; text-transform: none;
}
.kp-btn-editorial:hover { box-shadow: inset 0 0 0 2px var(--on-accent); }
.kp-btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
.kp-btn:disabled, .kp-btn[aria-disabled="true"] {
  background: transparent; color: var(--ink-muted); border-color: var(--line); box-shadow: none; cursor: not-allowed;
}

/* Marcador */
.kp-marcador {
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius-sm); padding: 0 .18em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Etiqueta */
.kp-etiqueta {
  margin: 0; font-family: var(--font-mono); font-weight: 600; font-size: 13.33px; line-height: 16px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.kp-etiqueta-tenue { color: var(--ink-muted); }
.kp-etiqueta-acento { color: var(--accent-ink); }
.kp-etiqueta-num { margin-right: 1ch; }

/* Regla */
.kp-regla { display: block; border: 0; height: 1px; margin: 0; background: var(--line); width: 100%; }
.kp-regla-acento { background: var(--accent); }
.kp-regla-corta { width: 160px; max-width: 100%; }

/* Bloque: cada tono reasigna los colores de texto que se leen sobre él */
.kp-bloque { position: relative; overflow: hidden; padding: var(--space-12); background: var(--bloque-bg); color: var(--ink); }
.kp-bloque-carbon {
  --bloque-bg: var(--carbon); --ink: var(--hueso); --ink-muted: var(--acero); --accent-ink: var(--lima); --line: var(--acero);
  --focus-ring: 0 0 0 2px var(--carbon), 0 0 0 4px var(--lima);
}
.kp-bloque-grafito {
  --bloque-bg: var(--grafito); --ink: var(--hueso); --ink-muted: var(--hueso); --accent-ink: var(--lima); --line: var(--acero);
  --focus-ring: 0 0 0 2px var(--grafito), 0 0 0 4px var(--lima);
}
.kp-bloque-acero {
  --bloque-bg: var(--acero); --ink: var(--carbon); --ink-muted: var(--carbon); --accent-ink: var(--carbon); --line: var(--carbon);
  --focus-ring: 0 0 0 2px var(--acero), 0 0 0 4px var(--carbon);
}
.kp-bloque-lima {
  --bloque-bg: var(--lima); --ink: var(--carbon); --ink-muted: var(--grafito); --accent-ink: var(--carbon); --line: var(--carbon);
  --accent: var(--carbon); --on-accent: var(--lima);
  --focus-ring: 0 0 0 2px var(--lima), 0 0 0 4px var(--carbon);
}
.kp-bloque-hueso {
  --bloque-bg: var(--hueso); --ink: var(--carbon); --ink-muted: var(--grafito); --accent-ink: var(--carbon); --line: var(--acero);
  --focus-ring: 0 0 0 2px var(--hueso), 0 0 0 4px var(--carbon);
}
.kp-bloque-contenido { position: relative; z-index: 1; max-width: 32rem; }
.kp-bloque-patron {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  width: 62%; max-width: 720px; height: auto; transform: rotate(-28deg); transform-origin: center;
}
.kp-bloque-patron-inferior { right: -14%; bottom: -10%; }
.kp-bloque-patron-superior { right: -14%; top: -10%; }

/* Campo (adición para el cotizador) */
.kp-campo { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.kp-campo-etiqueta {
  font-family: var(--font-mono); font-weight: 600; font-size: 13.33px; line-height: 16px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
}
.kp-campo-control {
  -webkit-appearance: none; appearance: none; width: 100%; box-sizing: border-box; margin: 0;
  padding: var(--space-2) 0; border: 0; border-bottom: 1px solid var(--line); border-radius: var(--radius-0);
  background: transparent; color: var(--ink);
  font-family: var(--font-display); font-weight: 300; font-size: 24px; line-height: 32px;
}
.kp-campo-control::placeholder { color: var(--ink-muted); }
.kp-campo-control:focus { outline: none; border-bottom-color: var(--focus); box-shadow: 0 1px 0 0 var(--focus); }
.kp-campo-select {
  padding-right: var(--space-8); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.kp-campo-select option { background: var(--surface); color: var(--ink); }
.kp-campo-control:disabled { color: var(--ink-muted); cursor: not-allowed; }
.kp-campo-ayuda {
  margin: 0; font-family: var(--font-texto); font-size: 16px; line-height: 18.67px; letter-spacing: .1em; color: var(--ink-muted);
}
.kp-campo-error .kp-campo-control { border-bottom-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
.kp-campo-error .kp-campo-ayuda { color: var(--ink); }

/* Viabilidad (adición para el cotizador) */
.kp-via { display: flex; flex-direction: column; min-width: 0; }
.kp-via-palabra {
  margin: var(--space-1) 0 var(--space-3); color: var(--ink);
  font-family: var(--font-display); font-weight: 300; font-size: 32px; line-height: 37.33px;
}
.kp-via-medidor { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1); }
.kp-via-medidor span { display: block; height: 8px; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-0); }
.kp-via-medidor span.kp-on { background: var(--accent-ink); border-color: var(--accent-ink); }
.kp-via-detalle {
  margin: var(--space-3) 0 0; color: var(--ink-muted);
  font-family: var(--font-texto); font-size: 16px; line-height: 18.67px; letter-spacing: .1em;
}

/* ---------- Página ---------- */
body{margin:0;background:#272727}
a{color:#C2F307}a:hover{color:#FAFAFA}
.ancho .kp-btn{width:100%}
.ancho x-import{display:block}
details > summary{list-style:none;cursor:pointer}
details > summary::-webkit-details-marker{display:none}
details[open] .mas{transform:rotate(45deg)}
.cta-lima x-import{display:block}
@media (max-width: 760px){.patron-met{display:none}}
.cta-lima .kp-bloque{padding-left:calc(max(0px, (100% - 1280px) / 2) + max(16px, min(3.5%, 44.8px)));padding-right:calc(max(0px, (100% - 1280px) / 2) + max(16px, min(3.5%, 44.8px)))}

html { scroll-behavior: smooth; }
body { background: var(--carbon); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 30; background: var(--lima); color: var(--carbon); padding: 8px 12px; font-family: var(--font-mono); font-weight: 600; font-size: 13px; }
.saltar:focus { left: 8px; }
a:focus-visible { outline: 2px solid var(--lima); outline-offset: 3px; }
[data-wa-numero]::before { content: " · "; }
/* ---------- Cotizador ---------- */
.cot { background: var(--grafito); --ink-muted: var(--hueso); padding: 32px; box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; min-width: 0; margin: 0; scroll-margin-top: 16px; }
.cot [hidden] { display: none !important; }
.cot-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cot-vivo, .cot-et { font-family: var(--font-mono); font-weight: 600; font-size: 13.33px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--hueso); }
.cot-vivo { font-weight: 400; font-size: 12px; }
.cot-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px 24px; }
.cot-grupo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.seg { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 6px; }
.seg button { min-height: 44px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--acero); background: transparent; color: var(--hueso); font-family: var(--font-texto); font-size: 16px; letter-spacing: .05em; cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; }
.seg button:hover { border-color: var(--hueso); }
.seg button[aria-pressed="true"] { border-color: var(--lima); background: var(--lima); color: var(--carbon); }
.seg-num button { font-family: var(--font-mono); font-weight: 600; font-size: 14px; }
.seg-num button.otra { font-size: 12px; line-height: 14px; padding: 4px 6px; }
.seg button:focus-visible, .cot-stepper button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--grafito), 0 0 0 4px var(--lima); }
.cot-grupo > .kp-campo-control { margin-top: 4px; }
.cot-preg { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.cot-preg-txt { display: flex; flex-direction: column; gap: 4px; }
.cot-texto { font-family: var(--font-texto); font-size: 16px; line-height: 20px; letter-spacing: .1em; color: var(--hueso); }
.cot-stepper { display: flex; align-items: center; gap: 8px; }
.cot-stepper button { width: 44px; height: 44px; border-radius: 6px; border: 1px solid var(--acero); background: transparent; color: var(--hueso); font-family: var(--font-display); font-size: 24px; line-height: 1; cursor: pointer; }
.cot-stepper button:disabled { opacity: .35; cursor: not-allowed; }
#c-preg { min-width: 48px; text-align: center; font-family: var(--font-display); font-weight: 300; font-size: 32px; line-height: 40px; color: var(--hueso); }
.cot-linea { height: 1px; background: var(--acero); }
.cot-indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; align-items: start; }
.cot-dato { display: flex; flex-direction: column; }
.cot-cifra { margin: 4px 0 12px; font-family: var(--font-display); font-weight: 300; font-size: 32px; line-height: 37.33px; color: var(--hueso); }
.cot-entrega { margin-top: 8px; }
.cot-ticket { background: var(--carbon); padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: opacity .15s; }
.cot[aria-busy="true"] .cot-ticket { opacity: .55; }
.cot-fila { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-texto); font-size: 16px; line-height: 20px; letter-spacing: .1em; color: var(--hueso); }
.cot-linea-ticket { margin: 6px 0; }
.cot-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cot-total-cifra { font-family: var(--font-display); font-weight: 300; font-size: 56px; line-height: 56px; color: var(--hueso); font-variant-numeric: tabular-nums; }
.cot-mxn { font-family: var(--font-mono); font-weight: 600; font-size: 13.33px; letter-spacing: .1em; color: var(--lima); }
.cot-unitario { font-family: var(--font-texto); font-size: 16px; line-height: 20px; letter-spacing: .1em; color: var(--acero); text-align: right; }
.cot-error { margin: 4px 0 0; font-family: var(--font-texto); font-size: 17px; line-height: 22px; letter-spacing: .1em; color: var(--lima); }
.cot-aviso { margin: -8px 0 0; padding: 12px 16px; border-left: 3px solid var(--lima); font-family: var(--font-texto); font-size: 16px; line-height: 20px; letter-spacing: .1em; color: var(--hueso); background: rgba(194, 243, 7, .06); }
.cot-wa { width: 100%; }
.cot-wa img, .barra .kp-btn img { width: 20px; height: 20px; display: block; }
.kp-btn.kp-btn-inactivo { background: transparent; color: var(--acero); border-color: var(--acero); cursor: not-allowed; box-shadow: none; }
.kp-btn.kp-btn-inactivo img { opacity: .4; filter: invert(1); }
.kp-btn.cargando { opacity: .7; cursor: progress; }
.cot-nota { margin: -8px 0 0; font-family: var(--font-texto); font-size: 16px; line-height: 20px; letter-spacing: .1em; color: var(--hueso); }
.cot-folio { display: block; margin-top: 6px; font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: .1em; color: var(--lima); }
.cot-folio:empty { display: none; }
@media (max-width: 520px) {
  .cot { padding: 24px 16px; margin: 0 calc(-1 * max(16px, 3.5%)); }
  .cot-total-cifra { font-size: 44px; line-height: 48px; }
}

/* ---------- Barra fija en el celular ---------- */
.barra { display: none; }
@media (max-width: 760px) {
  .barra { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--grafito); border-top: 1px solid var(--acero);
    transform: translateY(110%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
  .barra.visible { transform: none; visibility: visible; transition: transform .2s ease; }
  .barra-et { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--acero); }
  .barra-total { font-family: var(--font-display); font-weight: 300; font-size: 28px; line-height: 32px; color: var(--hueso); }
}
@media (prefers-reduced-motion: reduce) { .barra, .seg button, .cot-ticket { transition: none; } html { scroll-behavior: auto !important; } }

/* ---------- Portada en el celular: el cotizador más arriba ---------- */
@media (max-width: 760px) {
  .portada { padding-top: 8px !important; padding-bottom: 72px !important; gap: 40px !important; }
  .portada > div:first-child { padding-top: 0 !important; gap: 16px !important; }
  .portada h1 { font-size: min(52px, 12.4vw) !important; }
  .portada > div:first-child > p:nth-of-type(2) { font-size: 26px !important; line-height: 30px !important; }
}
.cot[data-estado="error"] .cot-indicadores { display: none; }

/* ---------- Íconos en los botones ---------- */
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; }
.ico .relleno { fill: currentColor; stroke: none; }

/* ---------- Lugar: silueta del país o del estado elegido ---------- */
.cot-lugar { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 20px; align-items: center; }
.cot-silueta { width: 76px; height: 76px; display: block; }
.cot-silueta path { fill: var(--lima); }
.cot-lugar-campos { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cot-lugar-pais { display: flex; flex-direction: column; gap: 8px; }
.cot-lugar-txt { font-family: var(--font-display); font-weight: 300; font-size: 24px; line-height: 32px; color: var(--hueso); padding: 8px 0; border-bottom: 1px solid var(--acero); }
@media (max-width: 520px) { .cot-lugar { grid-template-columns: 60px minmax(0, 1fr); gap: 16px; } .cot-silueta { width: 60px; height: 60px; } }

/* ---------- Resumen en la barra del celular ---------- */
.barra-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.barra-resumen { font-family: var(--font-texto); font-size: 14px; line-height: 17px; letter-spacing: .06em; color: var(--acero);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.barra-iva { font-family: var(--font-mono); font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--acero); }
.cot-pila { display: contents; }

/* ---------- Páginas legales ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 56px max(16px, 3.5%) 96px; box-sizing: border-box; }
.legal h1 { margin: 16px 0 8px; font-family: var(--font-display); font-weight: 300; font-size: clamp(36px, 5vw, 56px); line-height: 1.05; color: var(--hueso); }
.legal h2 { margin: 48px 0 12px; font-family: var(--font-mono); font-weight: 600; font-size: 13.33px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--lima); }
.legal p, .legal li { font-family: var(--font-texto); font-size: 18px; line-height: 25px; letter-spacing: .06em; color: var(--hueso); }
.legal ul, .legal ol { padding-left: 1.2em; } .legal ul ul { margin: 4px 0; }
.legal .actualizado { color: var(--acero); }
.legal p.kp-etiqueta { color: var(--lima); font-size: 13.33px; letter-spacing: .1em; }
.legal mark.pendiente { background: transparent; color: var(--lima); border-bottom: 1px dashed var(--lima); }