/* Factory OS · sitio web — tokens y base compartidos por las maquetas.
   Heredado de packages/ui/src/tokens.css [data-ds="07"]; ver docs/03-sistema-visual.md. */

:root {
  color-scheme: light;
  --paper: #fafaf9;
  --paper-raised: #ffffff;
  --paper-2: #f1f0ec;
  --ink: #202023;
  --ink-2: #575757;
  --ink-3: #686868;
  --line: rgb(0 0 0 / .08);
  --line-strong: rgb(0 0 0 / .14);
  --hilo-base: rgb(0 0 0 / .16);

  --plant: #0a0a0a;
  --plant-raised: #141414;
  --plant-ink: #ededed;
  --plant-ink-2: #a1a1a1;
  --plant-line: rgb(255 255 255 / .10);
  --plant-hilo-base: rgb(255 255 255 / .20);

  --accent: #0062d1;
  --accent-hover: #004fa8;
  --accent-plant: #5aa2f5;
  --success: #107d4f;
  --warning: #c27a1a;
  --danger: #c52828;
  --success-plant: #3fc287;
  --warning-plant: #f0a43e;

  /* El papel es un objeto físico: no cambia con el tema. */
  --tag: #ffffff;
  --tag-ink: #202023;
  --tag-ink-2: #686868;

  --font: "Geist", "Geist Variable", system-ui, sans-serif;
  --mono: "Geist Mono", "Geist Mono Variable", ui-monospace, monospace;

  --margen: clamp(16px, 4vw, 56px);
  --bloque: clamp(96px, 14vw, 200px);
  --ancho: 1440px;

  --r-outer: 16px;
  --r-inner: 10px;
  --r-btn: 9px;
  --sombra-objeto: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px rgb(0 0 0 / .06);

  --ease-brand: cubic-bezier(.22, 1, .36, 1);
  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ease-std: cubic-bezier(.2, 0, 0, 1);
  /* Movimiento entre dos puntos (luz, desplazamiento): el mismo valor que la cámara del hero. */
  --ease-move: cubic-bezier(.65, 0, .35, 1);

  /* Sistema de movimiento (docs/10). Duraciones: */
  --t-presion: 120ms;    /* presión de botones y controles */
  --t-estado: 140ms;     /* hover y color de estado del sitio (las piezas usan los 160 ms del producto) */
  --t-cambio: 220ms;     /* fundido de contenido y línea de la barra */
  --t-panel: 300ms;      /* hojas y paneles que se abren */
  --t-aparece: 360ms;    /* elemento nuevo dentro de una pieza */
  --t-entrada: 640ms;    /* entrada de objeto y línea de titular */
  --t-trazo: 900ms;      /* trazos, barras y aristas que se dibujan */
  --t-recorrido: 1400ms; /* trazo largo de una sola vez */
  /* Escalonados */
  --esc-fino: 40ms;
  --esc-fila: 60ms;
  --esc-linea: 80ms;
  --esc-objeto: 100ms;
  /* Distancias y escala mínima de un objeto que entra */
  --d-micro: 4px;
  --d-fila: 6px;
  --d-objeto: 16px;
  --esc-min: .98;
}
@media (max-width: 767px) { :root { --d-objeto: 12px; --esc-fino: 30ms; --esc-fila: 45ms; --esc-linea: 60ms; --esc-objeto: 75ms; } }

/* ---------- Entradas (docs/10): objetos y titulares de capítulo, una vez ----------
   Sin JS o con movimiento reducido no hay clase js-entra: todo está en su estado final. */
.js-entra [data-entra="objeto"] { opacity: 0; translate: 0 var(--d-objeto); scale: var(--esc-min); transition: opacity var(--t-entrada) var(--ease-enter), translate var(--t-entrada) var(--ease-enter), scale var(--t-entrada) var(--ease-enter); }
.js-entra [data-entra="recorte"] { opacity: 0; clip-path: inset(0 0 14% 0 round var(--r-outer)); transition: opacity calc(var(--t-entrada) * 1.125) var(--ease-brand), clip-path calc(var(--t-entrada) * 1.125) var(--ease-brand); }
.js-entra [data-entra][data-entrado] { opacity: 1; translate: none; scale: none; clip-path: inset(0 round var(--r-outer)); }
/* Asentado: se suelta el recorte para que la sombra del objeto vuelva a verse. */
.js-entra [data-entra][data-asentado] { clip-path: none; }
.tp { display: inline-block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; vertical-align: top; }
.tp > span { display: inline-block; }
.js-entra [data-entra="titulo"] .tp > span { translate: 0 108%; transition: translate var(--t-entrada) var(--ease-enter); transition-delay: calc(var(--i, 0) * var(--esc-linea)); }
.js-entra [data-entra="titulo"][data-entrado] .tp > span { translate: none; }
.js-entra [data-entra][data-quieto], .js-entra [data-entra][data-quieto] * { transition: none !important; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0a0a0a;
    --paper-raised: #111111;
    --paper-2: #0f0f0f;
    --ink: #ededed;
    --ink-2: #a1a1a1;
    --ink-3: #8a8a8a;
    --line: rgb(255 255 255 / .08);
    --line-strong: rgb(255 255 255 / .14);
    --hilo-base: rgb(255 255 255 / .18);
    --plant: #111111;
    --plant-raised: #181818;
    --accent: #5aa2f5;
    --accent-hover: #7db4f5;
    --sombra-objeto: 0 1px 2px rgb(0 0 0 / .5), 0 8px 24px rgb(0 0 0 / .5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0a0a0a;
  --paper-raised: #111111;
  --paper-2: #0f0f0f;
  --ink: #ededed;
  --ink-2: #a1a1a1;
  --ink-3: #8a8a8a;
  --line: rgb(255 255 255 / .08);
  --line-strong: rgb(255 255 255 / .14);
  --hilo-base: rgb(255 255 255 / .18);
  --plant: #111111;
  --plant-raised: #181818;
  --accent: #5aa2f5;
  --accent-hover: #7db4f5;
  --sombra-objeto: 0 1px 2px rgb(0 0 0 / .5), 0 8px 24px rgb(0 0 0 / .5);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.saltar {
  position: absolute; left: var(--margen); top: -48px; z-index: 100;
  padding: 10px 14px; background: var(--ink); color: var(--paper);
  border-radius: var(--r-btn); text-decoration: none; font-size: 14px; font-weight: 500;
}
.saltar:focus { top: 12px; }

/* Contenedor y grilla: 12 / 8 columnas. En el teléfono el canal del hilo mide cero:
   el contenido queda centrado entre los dos márgenes y el hilo, si lo hay, corre por el margen. */
.contenedor { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.grid {
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr);
  column-gap: 0;
}
.grid > * { grid-column: 2; min-width: 0; }
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 20px; }
  .grid > * { grid-column: 2 / -1; }
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
}
/* Sin canal (docs/11, G-2; docs/13, §7): la grilla usa todas las columnas desde la 1 y todo queda alineado con el logo.
   Lo usan el Inicio y las páginas rehechas. Con :where la regla pesa como la de arriba y cada composición la sigue reemplazando.
   El hero del Inicio (.apertura) tiene su propia grilla y no entra. */
@media (min-width: 768px) { :where(.sin-canal main > section:not(.apertura), .sin-canal .contexto, .sin-canal .pie) .grid > * { grid-column: 1 / -1; } }

/* Puntos por los que pasa el hilo; los ubica la maqueta con la grilla. */
.nodo { display: block; width: 0; height: 0; }
.grid > .nodo { grid-column: 1; justify-self: center; }

/* Tipografía editorial */
.display {
  font-size: clamp(48px, 8vw, 112px);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.titulo {
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.subtitulo { font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.bajada { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; letter-spacing: -.01em; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.lectura { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.nota { font-size: 13px; line-height: 1.45; color: var(--ink-3); }

/* Acciones */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px;
  border: 0; border-radius: var(--r-btn);
  background: var(--ink); color: var(--paper);
  font-size: 15px; font-weight: 500; letter-spacing: -.01em; text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-estado) var(--ease-std), transform var(--t-presion) var(--ease-std);
}
.boton:hover { background: color-mix(in srgb, var(--ink) 88%, var(--paper)); }
.boton:active { transform: scale(.98); }
.boton-chico { min-height: 36px; padding: 0 14px; font-size: 14px; }
.enlace {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 500; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color var(--t-estado) var(--ease-std);
}
.enlace:hover { text-decoration-color: currentColor; }

/* Detalles de UI en línea (docs/11, G-4): piezas mínimas del producto dentro de una oración.
   Se leen como texto: no son botones ni toman foco. Código y cifra en mono; estado con la forma y el color del sistema;
   control: un segmentado de solo lectura. */
.en-linea { display: inline-flex; align-items: center; gap: 6px; margin-inline: 1px; padding: 0 7px; border-radius: 6px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: .86em; font-weight: 500; line-height: 1.6; letter-spacing: 0; color: var(--ink); white-space: nowrap; vertical-align: .06em; }
.en-linea[data-tipo="codigo"], .en-linea[data-tipo="cifra"] { font-family: var(--mono); font-weight: 450; font-variant-numeric: tabular-nums; }
.en-linea[data-estado]::before { content: "●"; font-size: .72em; color: var(--success); }
.en-linea[data-estado="pend"]::before { content: "○"; font-size: .84em; color: var(--warning); }
.en-linea[data-tipo="control"] { gap: 0; padding: 2px; }
.en-linea[data-tipo="control"] > span:not(.sr-only) { padding: 0 8px; border-radius: 4px; }
.en-linea[data-tipo="control"] > .sr-only + span { box-shadow: -1px 0 0 var(--line-strong); }
.planta .en-linea { background: var(--plant-raised); box-shadow: inset 0 0 0 1px var(--plant-line); color: var(--plant-ink); }
.planta .en-linea[data-estado]::before { color: var(--success-plant); }
.planta .en-linea[data-estado="pend"]::before { color: var(--warning-plant); }
.planta .en-linea[data-tipo="control"] > .sr-only + span { box-shadow: -1px 0 0 var(--plant-line); }

/* Escenario (docs/12): el contenedor de cada UI showcase del Inicio, como en La Pyme. Fondo pictórico (.escenario-fondo)
   o liso; la UI va dentro con su radio y una sombra amplia, sin bisel. Solo donde se declara. */
:root { --escenario-liso: #e9e8e2; --escenario-planta: #181818; --ritmo: clamp(96px, 10vw, 144px); }
:root[data-theme="dark"] { --escenario-liso: #171716; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --escenario-liso: #171716; } }
.escenario {
  --escenario-pad: 12px;
  position: relative; isolation: isolate;
  margin: 0; padding: var(--escenario-pad);
  border-radius: 20px;
  background: var(--escenario-liso);
  overflow: hidden;
}
.escenario[data-fondo="planta"] { background: var(--escenario-planta); box-shadow: inset 0 0 0 1px var(--plant-line); }
.escenario-fondo { position: absolute; inset: 0; z-index: -1; }
.escenario-fondo img { width: 100%; height: 100%; object-fit: cover; }
/* Las pinturas son las mismas en los dos temas; en oscuro bajan de brillo para no encandilar junto a la UI. */
:root[data-theme="dark"] .escenario-fondo img { filter: brightness(.72) saturate(.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .escenario-fondo img { filter: brightness(.72) saturate(.9); } }
.escenario .app { box-shadow: 0 0 0 1px var(--app-border-strong), 0 25px 50px -12px rgb(0 0 0 / .32); }
@media (min-width: 640px) { .escenario { --escenario-pad: 32px; border-radius: 24px; } }
@media (min-width: 1024px) { .escenario { --escenario-pad: 40px; } }

/* Titular en dos tonos (docs/12): la afirmación en tinta y la continuación en gris, en el mismo título. */
.dos-tonos .tono-2 { color: var(--ink-3); }
.planta .dos-tonos .tono-2 { color: var(--plant-ink-2); }

/* Marca */
.marca { display: inline-flex; align-items: baseline; gap: 0; text-decoration: none; font-size: 20px; font-weight: 600; letter-spacing: -.045em; line-height: 1; color: var(--ink); }
.marca .os { font-weight: 400; color: var(--accent); margin-left: 2px; }

/* Navegación */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 94%, transparent); border-bottom: 1px solid transparent; transition: border-color var(--t-cambio) var(--ease-std); }
.nav[data-desplazado="true"] { border-bottom-color: var(--line); }
.nav-barra { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.nav-enlaces { display: none; align-items: center; gap: 4px; }
.nav-enlaces > a, .nav-desplegar { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: color var(--t-estado) var(--ease-std), background-color var(--t-estado) var(--ease-std); }
.nav-enlaces > a:hover, .nav-desplegar:hover, .nav-desplegar[aria-expanded="true"] { color: var(--ink); background: var(--line); }
.nav-enlaces > a[aria-current="page"], .nav-desplegar[data-actual] { color: var(--ink); }

/* Menú «Funcionalidades» (docs/13, §4), como el desplegable de La Pyme: tres grupos; cada enlace, el ícono del módulo y su nombre.
   Lo abre y lo cierra navegacion.js; sin JS, la hoja del teléfono y el pie llevan los mismos enlaces. */
.nav-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nav-grupo { position: relative; }
.nav-desplegar { gap: 4px; padding-right: 8px; border: 0; background: none; cursor: pointer; }
.nav-desplegar svg { width: 14px; height: 14px; transition: rotate var(--t-cambio) var(--ease-std); }
.nav-desplegar[aria-expanded="true"] svg { rotate: 180deg; }
.nav-panel {
  position: absolute; top: calc(100% + 10px); left: -16px; z-index: 55;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  width: 660px; padding: 16px;
  border-radius: 16px; background: var(--paper-raised);
  box-shadow: 0 0 0 1px var(--line), 0 24px 48px -16px rgb(0 0 0 / .24);
  opacity: 0; translate: 0 -4px; visibility: hidden;
  transition: opacity var(--t-cambio) var(--ease-enter), translate var(--t-cambio) var(--ease-enter), visibility 0s linear var(--t-cambio);
}
.nav-desplegar[aria-expanded="true"] + .nav-panel { opacity: 1; translate: none; visibility: visible; transition-delay: 0s; }
/* Puente invisible entre el botón y el panel: el puntero no lo cierra al bajar. */
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-panel-t { padding: 4px 8px 8px; font-family: var(--mono); font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.nav-panel ul { display: grid; gap: 2px; }
.nav-panel a, .hoja-sub a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.nav-panel a { min-height: 44px; padding: 6px 8px; border-radius: 10px; font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; transition: background-color var(--t-estado) var(--ease-std); }
.nav-panel a:hover { background: var(--line); }
.nav-panel a[aria-current="page"] { background: var(--line); }
.nav-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); }
.nav-ico svg { width: 16px; height: 16px; }
.nav-panel a:hover .nav-ico, .nav-panel a[aria-current="page"] .nav-ico { color: var(--ink); }
.nav-acciones { display: flex; align-items: center; gap: 8px; }
.nav-menu { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: transparent; font-size: 14px; font-weight: 500; cursor: pointer; }
.nav-acciones .boton { display: none; }
/* Tema: automático, claro u oscuro; el ícono muestra el estado actual. */
.nav-tema { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: transparent; color: var(--ink-2); cursor: pointer; transition: color var(--t-estado) var(--ease-std), border-color var(--t-estado) var(--ease-std); }
.nav-tema:hover { color: var(--ink); border-color: var(--ink-3); }
.nav-tema svg { grid-area: 1 / 1; display: none; width: 18px; height: 18px; }
.nav-tema[data-tema="automático"] .i-auto, .nav-tema[data-tema="claro"] .i-sol, .nav-tema[data-tema="oscuro"] .i-luna { display: block; }
@media (min-width: 1024px) { .nav-tema { width: 36px; height: 36px; } }
@media (min-width: 1024px) {
  .nav-enlaces { display: flex; }
  .nav-menu { display: none; }
  .nav-acciones .boton { display: inline-flex; }
}

.hoja-menu { position: fixed; inset: 0; z-index: 60; background: var(--paper); display: flex; flex-direction: column; padding: 0 var(--margen) 24px; overflow-y: auto; overscroll-behavior: contain; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity var(--t-panel) var(--ease-enter), transform var(--t-panel) var(--ease-enter), visibility 0s linear var(--t-panel); }
.hoja-menu[data-abierta="true"] { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.hoja-menu ul { display: grid; gap: 4px; margin-top: 24px; }
.hoja-menu ul a, .hoja-desplegar { display: block; padding: 10px 0; font-size: 34px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; text-decoration: none; }
.hoja-menu .boton { flex: none; margin-top: auto; }
/* Grupo «Funcionalidades» de la hoja (docs/13, §4): se despliega con los ocho enlaces y sus tres subtítulos. */
.hoja-desplegar { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }
.hoja-desplegar svg { flex: none; width: 24px; height: 24px; color: var(--ink-3); transition: rotate var(--t-cambio) var(--ease-std); }
.hoja-desplegar[aria-expanded="true"] svg { rotate: 180deg; }
.hoja-sub { display: grid; gap: 12px; padding: 4px 0 16px; }
.hoja-sub[hidden] { display: none; }
.hoja-sub-t { padding-top: 4px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.hoja-menu .hoja-sub ul { margin-top: 0; gap: 0; }
.hoja-menu .hoja-sub a { display: flex; min-height: 48px; padding: 6px 0; font-size: 19px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.hoja-sub a[aria-current="page"] { color: var(--accent); }
/* Con el grupo abierto la hoja se desplaza: el botón queda al pie, separado de la lista. */
.hoja-menu > ul { margin-bottom: 24px; }

/* Estados con forma, como en el producto */
.estado { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.estado::before { font-size: 11px; line-height: 1; }
.estado-ok { color: var(--success); } .estado-ok::before { content: "●"; }
.estado-pend { color: var(--warning); } .estado-pend::before { content: "○"; font-size: 13px; }
.estado-ret { color: var(--danger); } .estado-ret::before { content: "■"; }
.estado-rech { color: var(--danger); } .estado-rech::before { content: "▲"; }

/* Pie del sitio sobre tinta (auditoría del Inicio, P1): franja con marca y acción, mapa, WAGON y barra legal.
   El isotipo de WAGON va sin alterar: sobre la tinta no se invierte. */
.pie { position: relative; background: var(--plant); color: var(--plant-ink); padding-block: clamp(56px, 7vw, 96px) 28px; font-size: 14px; line-height: 1.55; }
:root[data-theme="dark"] .pie { border-top: 1px solid var(--plant-line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pie { border-top: 1px solid var(--plant-line); } }
.pie .grid { row-gap: 48px; }
.pie :focus-visible { outline-color: var(--accent-plant); }
.pie a { color: var(--plant-ink); }
.pie-cabeza { display: grid; gap: 20px; justify-items: start; padding-bottom: 44px; border-bottom: 1px solid var(--plant-line); }
.pie-marca { font-size: clamp(36px, 4.4vw, 56px); color: var(--plant-ink); }
.pie-marca .os { color: var(--accent-plant); }
.pie-lema { font-size: clamp(19px, 1.8vw, 24px); font-weight: 500; letter-spacing: -.025em; line-height: 1.25; color: var(--plant-ink-2); }
.pie .boton { background: var(--plant-ink); color: var(--plant); }
.pie .boton:hover { background: color-mix(in srgb, var(--plant-ink) 86%, var(--plant)); }
.pie-mapa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.pie-col { display: grid; gap: 8px; align-content: start; }
.pie-col h2 { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--plant-ink-2); }
.pie-col ul { display: grid; }
.pie-col li { display: flex; align-items: center; min-height: 36px; color: var(--plant-ink-2); }
.pie-col a { text-decoration: none; overflow-wrap: anywhere; }
.pie-col a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* Con «Funcionalidades» a todo el ancho, Producto y Contacto comparten la fila en el teléfono (el correo entra en media columna). */
@media (max-width: 767px) { .pie-mapa:not(:has(.pie-funcionalidades)) .pie-contacto { grid-column: 1 / -1; } }
/* Funcionalidades (docs/13, §4): los ocho enlaces en dos columnas de cuatro, para que el pie no crezca. */
.pie-funcionalidades { grid-column: 1 / -1; }
.pie-funcionalidades ul { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 24px; }
.pie-wagon { display: grid; gap: 14px; align-content: start; justify-items: start; color: var(--plant-ink-2); max-width: 34em; }
.pie-wagon img { width: 36px; height: 36px; }
.pie-wagon strong { font-weight: 600; color: var(--plant-ink); }
.pie-base { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: 24px; border-top: 1px solid var(--plant-line); font-size: 13px; color: var(--plant-ink-2); }
.pie-base a { color: var(--plant-ink-2); text-underline-offset: 3px; }
.pie-base a:hover { color: var(--plant-ink); }
.pie-ajuste { display: inline-flex; align-items: center; min-height: 36px; margin-left: auto; padding: 0 12px; border: 1px solid var(--plant-line); border-radius: var(--r-btn); background: transparent; color: var(--plant-ink-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: color var(--t-estado) var(--ease-std), border-color var(--t-estado) var(--ease-std); }
.pie-ajuste:hover { color: var(--plant-ink); border-color: var(--plant-ink-2); }
@media (min-width: 768px) {
  .pie-cabeza { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 32px; }
  .pie-cabeza .boton { grid-column: 2; grid-row: 1 / span 2; }
  .pie-mapa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie-mapa:has(.pie-funcionalidades) { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
  .pie-contacto, .pie-funcionalidades { grid-column: auto; }
}
@media (min-width: 1024px) {
  .pie-mapa { grid-column: 2 / 9; }
  .pie-wagon { grid-column: 9 / -1; }
  /* Sin canal: el mapa arranca alineado con el logo. */
  .sin-canal .pie-mapa { grid-column: 1 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}