/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Poyntia · web v2 · PIE NEGRO GRANDE (tarea «pie», 17-oct-2026). Referencia: el pie de scale.com (`scale privacy.mov`, medido a 1443 px de ancho):
   logo arriba a la izquierda y columnas de enlaces pequeños con un rótulo gris encima; un titular ENORME en dos líneas; abajo a la izquierda los iconos
   (cuadrados de 48 px) y abajo a la derecha la línea legal. Lo que NO se copia: Scale pone rótulos y línea legal en mono mayúsculas; aquí todo es DM Sans normal.
   AUTOCONTENIDO: lo reciben también las páginas que NO cargan base-v2.css (legales, acceso), así que declara aquí sus tokens (mismas fórmulas que base-v2.css)
   y su propio reinicio. Reglas: DM Sans, cifras tabulares, un tamaño sólo sube (--u = 1 px hasta 1470 y 1,74 a 2560), zonas táctiles ≥ 44 px,
   :hover sólo con (hover: hover), foco visible, prefers-reduced-motion sin transiciones.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.v2-pie {
  --u: clamp(1px, .068vw, 1.74px);
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --azul-l: #7f9cff; --neg: #050608; --luz: #f3f4f6; --luz-2: #9aa0ab; --rayo: rgba(255,255,255,.16); --rayo-2: rgba(255,255,255,.34);
  --gut: calc(24 * var(--u));
  --fs-body: clamp(1rem, 1.12vw, 1.9rem);
  --fs-ui: clamp(.9375rem, 1.04vw, 1.75rem);       /* navegación y botones (≥ 15 px) */
  --fs-sm: clamp(.8125rem, .9vw, 1.5rem);          /* rótulos (≥ 13 px) */
  --pie-tile: max(44px, calc(48 * var(--u)));     /* los cuadrados de abajo a la izquierda (Scale: 48 px) */
  container-type: inline-size;                     /* el titular se ajusta al ancho del pie (cqi), no al de la ventana con su barra de desplazamiento */
  position: relative; z-index: 1; box-sizing: border-box; margin: 0; border: 0;
  padding: calc(96 * var(--u)) var(--gut) calc(24 * var(--u));
  background: var(--neg); color: var(--luz);
  font-family: var(--sans); font-synthesis: none; font-weight: 400; font-size: var(--fs-body); line-height: 1.4;
  letter-spacing: -.012em; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-align: left;
}
.v2-pie *, .v2-pie *::before, .v2-pie *::after { box-sizing: border-box; }
.v2-pie h2, .v2-pie p, .v2-pie ul, .v2-pie li { margin: 0; padding: 0; }
.v2-pie ul { list-style: none; }
.v2-pie a { color: inherit; text-decoration: none; }
.v2-pie button { font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; margin: 0; }
.v2-pie img, .v2-pie svg { display: block; max-width: none; }
.v2-pie :focus-visible { outline: 2px solid var(--azul-l); outline-offset: 3px; border-radius: 4px; }

/* ── arriba: logo + columnas (Scale: columnas a 143 px del borde, 238 px de paso; aquí a 192 por el logotipo) ───────────────────────────── */
.v2-pie .v2-pie-arriba { display: grid; grid-template-columns: calc(168 * var(--u)) auto; align-items: start; }   /* Scale: 119 px para su símbolo; aquí el logotipo entero (107 px) necesita aire */
.v2-pie .v2-pie-logo { height: calc(24 * var(--u)); width: auto; filter: invert(1) brightness(2); }
.v2-pie .v2-pie-cols { display: grid; grid-template-columns: repeat(2, calc(238 * var(--u))); }
.v2-pie .v2-pie-col h2 { font-size: var(--fs-sm); font-weight: 400; line-height: 1.3; letter-spacing: 0; color: var(--luz-2); margin-bottom: calc(18 * var(--u)); }
.v2-pie .v2-pie-col a { display: inline-block; font-size: var(--fs-ui); line-height: 1.4; color: #fff; transition: color .2s ease; }
@media (hover: hover) { .v2-pie .v2-pie-col a:hover { color: var(--luz-2); } }

/* ── el titular enorme: dos líneas que llenan el ancho (Scale: ≈ 120 px a 1443; aquí la línea más larga, «tailored to your problem.», ocupa ≈ 93 % del pie: 10,55 em medidos) ─────── */
.v2-pie .v2-pie-tit { margin-top: calc(160 * var(--u)); font-weight: 400; letter-spacing: -.035em; line-height: .98; color: #fff;
  font-size: max(28px, 8.5vw); font-size: max(28px, 8.8cqi); }
.v2-pie .v2-pie-tit span { display: block; }

/* ── abajo: iconos e idioma a la izquierda; cookies y línea legal a la derecha ─────────────────────────────── */
.v2-pie .v2-pie-abajo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: calc(20 * var(--u)) calc(32 * var(--u)); margin-top: calc(124 * var(--u)); }
.v2-pie .v2-pie-izq { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.v2-pie .v2-pie-red { display: inline-flex; align-items: center; justify-content: center; width: var(--pie-tile); height: var(--pie-tile); border-radius: calc(6 * var(--u));
  background: rgba(255,255,255,.1); color: #fff; transition: background .2s ease; }
.v2-pie .v2-pie-red svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
@media (hover: hover) { .v2-pie .v2-pie-red:hover { background: rgba(255,255,255,.2); } }
.v2-pie .v2-idioma { display: flex; gap: calc(6 * var(--u)); margin: 0; }
.v2-pie .v2-idioma button { min-height: var(--pie-tile); padding: 0 calc(16 * var(--u)); border: 0; border-radius: calc(6 * var(--u));
  background: rgba(255,255,255,.1); color: var(--luz-2); font-size: var(--fs-ui); line-height: 1; transition: background .2s ease, color .2s ease; }
.v2-pie .v2-idioma button[aria-pressed="true"] { background: rgba(255,255,255,.22); color: #fff; }
@media (hover: hover) { .v2-pie .v2-idioma button:hover { color: #fff; } }
.v2-pie .v2-pie-der { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: var(--fs-sm); line-height: 1.4; color: var(--luz-2); }
.v2-pie .v2-pie-ck { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--luz-2); font-size: var(--fs-ui);
  text-decoration: underline; text-decoration-color: var(--rayo-2); text-underline-offset: 4px; transition: color .2s ease; }
@media (hover: hover) { .v2-pie .v2-pie-ck:hover { color: #fff; text-decoration-color: currentColor; } }

/* ── táctil y móvil: cada enlace ocupa ≥ 44 px de alto ─────────────────────────────────────────────── */
@media (max-width: 760px), (pointer: coarse) {
  .v2-pie .v2-pie-col a { display: inline-flex; align-items: center; min-height: 44px; }
  .v2-pie .v2-pie-col h2 { margin-bottom: 4px; }
}
/* móvil (≤ 760): logo arriba, dos columnas de enlaces, el titular debajo, iconos e idioma, y la línea legal al final */
@media (max-width: 760px) {
  .v2-pie { padding-top: 56px; padding-bottom: 24px; }
  .v2-pie .v2-pie-arriba { display: block; }
  .v2-pie .v2-pie-logo { margin-bottom: 36px; }
  .v2-pie .v2-pie-cols { grid-template-columns: 1fr 1fr; gap: 20px; }
  .v2-pie .v2-pie-tit { margin-top: 64px; }
  .v2-pie .v2-pie-abajo { flex-direction: column; align-items: flex-start; margin-top: 56px; gap: 20px; }
  .v2-pie .v2-pie-der { align-items: flex-start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .v2-pie *, .v2-pie *::before, .v2-pie *::after { transition: none !important; } }
