/* ============================================================================
   UG REDESIGN 2026 — Design System "Gravedad" v1
   Capa nueva del rediseño (dirección híbrida). Solo actúa bajo body.ug-v2.
   Fuente de verdad: rediseno-2026/02-design-system.md
   ========================================================================== */

/* ---- Tipografías self-hosted (el visitante NO tiene las fuentes instaladas) ---- */
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/clash-display-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/clash-display-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
/* inter-latin-500.woff2 retirado: 0 peticiones en las 20 URLs medidas
   (una por plantilla v2, ES y EN). Ninguna regla del tema pide Inter con
   peso 500; el fichero se deja en assets/fonts por si vuelve a hacer falta. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/space-mono-v17-latin-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/space-mono-v17-latin-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Fallbacks ajustados por métricas (size-adjust/ascent/descent medidos en el navegador):
   la fuente de respaldo ocupa el MISMO espacio que la real, así el swap con
   font-display:swap no provoca reflow → CLS ~0 incluso en primera carga sin caché. */
@font-face {
  font-family: 'Clash Display Fallback';
  src: local('Arial');
  size-adjust: 102.46%; ascent-override: 86.86%; descent-override: 24.4%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.24%; ascent-override: 90.36%; descent-override: 22.47%; line-gap-override: 0%;
}

/* ---- Reset mínimo (las páginas v2 no cargan el CSS del diseño antiguo) ---- */
body.ug-v2, .ug-v2 *, .ug-v2 *::before, .ug-v2 *::after { box-sizing: border-box; }
body.ug-v2 { margin: 0; }
.ug-v2 img, .ug-v2 video { max-width: 100%; }
.ug-v2 img { height: auto; }   /* los atributos width/height del HTML no deben congelar el alto */

/* ---- Tokens ---- */
body.ug-v2 {
  /* color */
  --ug-black: #101010;
  --ug-black-raise: #181818;
  --ug-white: #ffffff;
  --ug-ink: rgba(255,255,255,.92);
  --ug-ink-2: rgba(255,255,255,.64);
  --ug-ink-3: rgba(255,255,255,.48);           /* .40 fallaba AA (3.82:1); .48 = 5.0:1 */
  --ug-hairline: rgba(255,255,255,.14);
  --ug-card: rgba(255,255,255,.05);
  --ug-pink: #DD2788;
  --ug-pink-cta: #C9227B;                       /* fondo de botón: ≥4.6:1 con blanco */
  --ug-pink-text: #E8579F;                      /* enlaces de texto sobre negro: ≥4.6:1 */
  --ug-pink-paper: #B01F6C;                     /* pink sobre paper #F4F2EE: ≥4.5:1 */
  --ug-purple: #AD32B6;
  --ug-green: #7BF21F;
  --ug-grad-brand: linear-gradient(120deg, #DD2788, #AD32B6);
  --ug-paper: #F4F2EE;
  --ug-paper-ink: #101010;
  /* tipo */
  --ug-font-display: 'Clash Display', 'Clash Display Fallback', sans-serif; /* → Archive Grotesk al recibir ficheros */
  --ug-font-body: 'Inter', 'Inter Fallback', sans-serif;
  --ug-font-mono: 'Space Mono', monospace;
  --ug-track-display: -0.03em;
  /* espacio / forma */
  --ug-space-section: clamp(96px, 12vw, 176px);
  --ug-space-block: clamp(40px, 5vw, 72px);
  --ug-container: 1280px;
  --ug-measure: 58ch;                           /* medida de lectura: ~68-72 caracteres */
  --ug-gutter: clamp(20px, 4vw, 48px);
  --ug-radius-card: 20px;
  --ug-radius-panel: 28px;
  --ug-radius-pill: 999px;
  /* motion */
  --ug-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ug-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ug-dur-micro: 280ms;
  --ug-dur-reveal: 650ms;

  background: var(--ug-black);
  color: var(--ug-ink);
  font-family: var(--ug-font-body);
  -webkit-font-smoothing: antialiased;
}

/* ---- Primitivas de layout ---- */
.ug-v2 .ug-container { max-width: var(--ug-container); margin-inline: auto; padding-inline: var(--ug-gutter); }
.ug-v2 .ug-section { padding-block: var(--ug-space-section); position: relative; }
.ug-v2 .ug-hairline-t { border-top: 1px solid var(--ug-hairline); }
.ug-v2 .ug-hairline-b { border-bottom: 1px solid var(--ug-hairline); }

/* ---- Voces tipográficas ---- */
.ug-v2 .ug-hero-title {
  font-family: var(--ug-font-display); font-weight: 600;
  font-size: clamp(44px, 6.5vw, 96px); line-height: 1.0;
  letter-spacing: var(--ug-track-display); color: var(--ug-white); margin: 0;
}
.ug-v2 .ug-h2 {
  font-family: var(--ug-font-display); font-weight: 600;
  font-size: clamp(32px, 4vw, 56px); line-height: 1.1;
  letter-spacing: var(--ug-track-display); color: var(--ug-white); margin: 0 0 .5em;
}
.ug-v2 .ug-h3 {
  font-family: var(--ug-font-display); font-weight: 500;
  font-size: clamp(20px, 2vw, 26px); line-height: 1.2; color: var(--ug-white); margin: 0 0 .4em;
}
.ug-v2 .ug-lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--ug-ink-2); }
.ug-v2 .ug-body { font-size: 17px; line-height: 1.55; color: var(--ug-ink-2); }
.ug-v2 .ug-label {
  font-family: var(--ug-font-mono); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ug-ink-3);
}
.ug-v2 .ug-label--tech { color: var(--ug-green); }
.ug-v2 .ug-index { font-family: var(--ug-font-mono); font-weight: 400; font-size: 14px; color: var(--ug-ink-3); }
.ug-v2 .ug-stat {
  font-family: var(--ug-font-display); font-weight: 600;
  font-size: clamp(40px, 4.5vw, 64px); line-height: 1; color: var(--ug-pink);
  font-variant-numeric: tabular-nums;
}
.ug-v2 .ug-accent { color: var(--ug-pink); }

/* ---- Botones ---- */
.ug-v2 .ug-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ug-font-body); font-weight: 600; font-size: 16px;
  padding: 14px 28px; border-radius: var(--ug-radius-pill);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background var(--ug-dur-micro) var(--ug-ease-inout),
              border-color var(--ug-dur-micro) var(--ug-ease-inout),
              color var(--ug-dur-micro) var(--ug-ease-inout);
}
.ug-v2 .ug-btn--primary { background: var(--ug-pink-cta); color: #fff; }
.ug-v2 .ug-btn--primary:hover { background: #b31d6d; }
.ug-v2 .ug-btn--ghost { background: transparent; color: var(--ug-ink); border-color: var(--ug-hairline); }
.ug-v2 .ug-btn--ghost:hover { border-color: rgba(255,255,255,.4); }
.ug-v2 .ug-btn .ug-arrow { transition: transform var(--ug-dur-micro) var(--ug-ease-out); }
.ug-v2 .ug-btn:hover .ug-arrow { transform: translateX(8px); }
.ug-v2 :is(a,button):focus-visible { outline: 2px solid var(--ug-pink); outline-offset: 3px; }

/* ---- Cards y paneles ---- */
.ug-v2 .ug-card {
  background: var(--ug-card); border: 1px solid var(--ug-hairline);
  border-radius: var(--ug-radius-card); padding: 28px;
}
.ug-v2 .ug-panel { border-radius: var(--ug-radius-panel); padding: clamp(28px, 4vw, 56px); }
.ug-v2 .ug-panel--paper { background: var(--ug-paper); color: var(--ug-paper-ink); }
.ug-v2 .ug-panel--paper .ug-h2, .ug-v2 .ug-panel--paper .ug-h3 { color: var(--ug-paper-ink); }
.ug-v2 .ug-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ug-font-mono); font-size: 12px; letter-spacing: .04em;
  padding: 6px 14px; border-radius: var(--ug-radius-pill);
  border: 1px solid var(--ug-hairline); color: var(--ug-ink-2);
}
.ug-v2 .ug-chip--tech { color: var(--ug-green); border-color: rgba(123,242,31,.25); }

/* ---- Grid "plano de ingeniería": bordes hairline compartidos ---- */
/* El marco lo dibujan las celdas, no el contenedor: así la última fila incompleta no
   deja rectángulos vacíos enmarcados. Los márgenes negativos colapsan bordes a 1px. */
.ug-v2 .ug-bp-grid { display: grid; border: 0; padding: 1px 0 0 1px; }
.ug-v2 .ug-bp-grid > * { border: 1px solid var(--ug-hairline); margin: -1px 0 0 -1px; padding: 28px; }

/* ---- Sistema de reveals (agua): IO añade .is-in ---- */
.ug-v2 .ug-io { opacity: 0; transform: translateY(16px);
  transition: opacity var(--ug-dur-reveal) var(--ug-ease-out), transform var(--ug-dur-reveal) var(--ug-ease-out); }
.ug-v2 .ug-io.is-in { opacity: 1; transform: none; }
.ug-v2 [data-ug-stagger] > * { opacity: 0; transform: translateY(16px);
  transition: opacity var(--ug-dur-reveal) var(--ug-ease-out), transform var(--ug-dur-reveal) var(--ug-ease-out); }
.ug-v2 [data-ug-stagger].is-in > * { opacity: 1; transform: none; }
/* delays del stagger (máx 5 hijos animados) */
.ug-v2 [data-ug-stagger].is-in > *:nth-child(2) { transition-delay: 70ms; }
.ug-v2 [data-ug-stagger].is-in > *:nth-child(3) { transition-delay: 140ms; }
.ug-v2 [data-ug-stagger].is-in > *:nth-child(4) { transition-delay: 210ms; }
.ug-v2 [data-ug-stagger].is-in > *:nth-child(5) { transition-delay: 280ms; }

/* ---- Manifesto cinético (scrub por palabra; JS reparte --w) ---- */
.ug-v2 .ug-manifesto { font-family: var(--ug-font-display); font-weight: 500;
  font-size: clamp(26px, 3.4vw, 48px); line-height: 1.25; letter-spacing: -0.02em; }
.ug-v2 .ug-manifesto .w { color: var(--ug-ink-3); transition: color 240ms linear; }
.ug-v2 .ug-manifesto .w.lit { color: var(--ug-ink); }
.ug-v2 .ug-manifesto .w.key.lit { color: var(--ug-pink); }

/* ---- Reduced motion: todo al estado final ---- */
@media (prefers-reduced-motion: reduce) {
  .ug-v2 .ug-io, .ug-v2 [data-ug-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ug-v2 .ug-manifesto .w { color: var(--ug-ink); transition: none; }
  .ug-v2 * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ============================================================================
   COMPONENTES HOME v2 (Fase 3)
   ========================================================================== */

/* ---- Nav ---- */
/* NAV: arriba = barra técnica a ancho completo (hairline + wordmark UG://);
   al scrollear MORFA a cápsula flotante compacta. Tipografía y hovers del sistema. */
.ug-v2 .ugn { position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(16,16,16,0); border-bottom: 1px solid var(--ug-hairline);
  transition: background var(--ug-dur-micro) var(--ug-ease-inout),
              border-color .45s var(--ug-ease-out), padding-top .45s var(--ug-ease-out); }
.ug-v2 .ugn-in { max-width: var(--ug-container); margin-inline: auto; padding: 16px var(--ug-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border: 1px solid transparent; border-radius: 0;
  transition: max-width .5s var(--ug-ease-out), padding .5s var(--ug-ease-out),
              background .45s var(--ug-ease-out), border-color .45s var(--ug-ease-out),
              border-radius .45s var(--ug-ease-out); }
.ug-v2 .ugn-logo { display: inline-flex; align-items: center; gap: 12px; }
.ug-v2 .ugn-logo img { height: 44px; width: auto; display: block;
  transition: height .45s var(--ug-ease-out); }
.ug-v2 .ugn-mark { font: 700 12px/1 var(--ug-font-mono); letter-spacing: .1em; color: var(--ug-green);
  transition: opacity .3s var(--ug-ease-out), max-width .45s var(--ug-ease-out);
  overflow: hidden; max-width: 60px; white-space: nowrap; }
.ug-v2 .ugn-mark::after { content: "UG://"; }

/* Morfosis al scrollear: barra condensada al MISMO ANCHO del sitio (contenedor),
   con fondo/blur/hairline; el wordmark técnico se retira. No es una cápsula estrecha:
   los bordes se alinean con el contenido de la página. */
.ug-v2 .ugn.is-scrolled { padding-top: 10px; background: transparent; border-bottom-color: transparent; }
.ug-v2 .ugn.is-scrolled .ugn-in { padding: 9px 22px;
  background: rgba(16,16,16,.82); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-color: var(--ug-hairline); border-radius: 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,.45); }
.ug-v2 .ugn.is-scrolled .ugn-logo img { height: 30px; }
.ug-v2 .ugn.is-scrolled .ugn-mark { opacity: 0; max-width: 0; }
.ug-v2 .ugn.is-scrolled .ug-btn { padding: 9px 18px; font-size: 13.5px; }
.ug-v2 .ugn-links { display: flex; gap: 32px; align-items: center; flex-wrap: nowrap; }
.ug-v2 .ugn-links a { white-space: nowrap; }
.ug-v2 .ugn-links a { font: 500 15px/1 var(--ug-font-body); color: var(--ug-ink-2); text-decoration: none;
  transition: color var(--ug-dur-micro); }
.ug-v2 .ugn-links a:hover { color: var(--ug-white); }
.ug-v2 .ugn .ug-btn { padding: 10px 22px; font-size: 14px; }
/* ---- Nav móvil: burger + panel deslizante (<=860px) ---- */
.ug-v2 .ugn-right { display: flex; align-items: center; gap: 14px; }
.ug-v2 .ugn-lang { font: 700 12px/1 var(--ug-font-mono); letter-spacing: .08em;
  color: var(--ug-ink-2); text-decoration: none; padding: 8px 10px;
  border: 1px solid var(--ug-hairline); border-radius: var(--ug-radius-pill);
  transition: color var(--ug-dur-micro), border-color var(--ug-dur-micro); }
.ug-v2 .ugn-lang:hover { color: var(--ug-green); border-color: rgba(123,242,31,.35); }
.ug-v2 .ugn-lang--panel { display: none; }
.ug-v2 .ugn-cta-panel { display: none; }
.ug-v2 .ugn-burger { display: none; width: 44px; height: 44px; padding: 10px;
  background: transparent; border: 0; cursor: pointer; flex-direction: column;
  justify-content: center; gap: 5px; }
.ug-v2 .ugn-burger span { display: block; height: 2px; width: 100%; background: var(--ug-white);
  border-radius: 2px; transition: transform var(--ug-dur-micro) var(--ug-ease-out), opacity var(--ug-dur-micro); }
.ug-v2 .ugn--open .ugn-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ug-v2 .ugn--open .ugn-burger span:nth-child(2) { opacity: 0; }
.ug-v2 .ugn--open .ugn-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 860px) {
  .ug-v2 .ugn-burger { display: flex; }
  .ug-v2 .ugn-mark { display: none; }
  .ug-v2 .ugn-lang:not(.ugn-lang--panel) { display: none; }
  .ug-v2 .ugn-right .ug-btn { display: none; }
  /* Menú móvil FULL-SCREEN: pilares en display grande + CTA anclado abajo */
  .ug-v2 .ugn-links { position: fixed; inset: 61px 0 0 0; z-index: 999; height: auto;
    display: flex; flex-direction: column; align-items: stretch; gap: 0; overflow: auto;
    background: var(--ug-black-raise); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    padding: 18px var(--ug-gutter) max(24px, env(safe-area-inset-bottom, 24px));
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform var(--ug-dur-micro) var(--ug-ease-out), opacity var(--ug-dur-micro), visibility 0s var(--ug-dur-micro); }
  .ug-v2 .ugn--open .ugn-links { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  .ug-v2 .ugn-links a { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.07);
    font-family: var(--ug-font-display); font-weight: 600; font-size: clamp(24px, 6.4vw, 34px);
    line-height: 1.1; letter-spacing: -.02em; color: var(--ug-white); }
  .ug-v2 .ugn-links a:first-child { border-top: 0; }
  .ug-v2 .ugn-lang--panel { display: block; color: var(--ug-green);
    font-family: var(--ug-font-mono); font-weight: 700; font-size: 13px; line-height: 1;
    letter-spacing: .08em; text-transform: uppercase; padding: 20px 0; }
  .ug-v2 .ugn-cta-panel { display: inline-flex; margin-top: auto; justify-content: center;
    font-family: var(--ug-font-body); font-weight: 600; font-size: 16px; line-height: 1;
    letter-spacing: 0; padding: 16px 24px; border-top: 0; color: #fff; }
  html.ugn-lock, html.ugn-lock body { overflow: hidden; }
}

/* ---- Hero con aura (interim del video-motivo) ----
   El contenido COMPLETO (incl. stat-cards) cabe en el viewport inicial: el contenedor
   centra el bloque en el alto restante y el título se acota para no empujar las stats. */
.ug-v2 .ugh { position: relative; min-height: 100svh; display: flex; flex-direction: column;
  overflow: hidden; padding-top: 84px; }
.ug-v2 .ugh > .ug-container { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; }
.ug-v2 .ugh .ug-hero-title { font-size: clamp(40px, 5.2vw, 84px); max-width: 18ch; }
.ug-v2 .ugh-aura { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 38% at 78% 18%, rgba(221,39,136,.16), transparent 70%),
    radial-gradient(36% 34% at 16% 78%, rgba(173,50,182,.14), transparent 70%),
    radial-gradient(60% 50% at 50% 110%, rgba(221,39,136,.07), transparent 70%);
  filter: blur(2px); }
@media (prefers-reduced-motion: no-preference) {
  .ug-v2 .ugh-aura { animation: ug-aura 26s var(--ug-ease-inout) infinite alternate; }
}
@keyframes ug-aura { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-2%,2%,0) scale(1.06); } }
.ug-v2 .ugh-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--ug-hairline) 1px, transparent 1px),
                    linear-gradient(90deg, var(--ug-hairline) 1px, transparent 1px);
  background-size: 25% 33.33%; opacity: .22;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
          mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent); }
.ug-v2 .ugh .ug-label--tech { margin-bottom: 22px; display: inline-flex; gap: 10px; align-items: center; }
.ug-v2 .ugh .ug-lead { max-width: 640px; margin: 26px 0 36px; }
.ug-v2 .ugh-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
/* (coreografía del hero: animación CSS pura, al final del fichero) */
.ug-v2 .ugh-key { color: var(--ug-pink); white-space: nowrap; }

/* ---- Stat-cards del hero: SIEMPRE visibles en el viewport inicial ---- */
.ug-v2 .ugh-stats { position: relative; z-index: 2;
  margin-top: clamp(28px, 5vh, 56px); margin-bottom: clamp(20px, 4vh, 40px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ug-v2 .ugh-stats .ug-card { display: flex; flex-direction: column; gap: 4px;
  padding: 20px 24px; background: rgba(16,16,16,.75); backdrop-filter: blur(10px); }
.ug-v2 .ugh-stats .ug-stat { font-size: clamp(28px, 2.6vw, 42px); }
.ug-v2 .ugh-stats .ug-card span:last-child { color: var(--ug-ink-2); font-size: 14px;
  font-family: var(--ug-font-mono); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 860px) { .ug-v2 .ugh-stats { grid-template-columns: 1fr 1fr; } }
/* viewports bajos (portátiles 768p, móviles): compactar para que las stats entren en pantalla */
@media (max-height: 860px) {
  .ug-v2 .ugh { padding-top: 72px; }
  .ug-v2 .ugh .ug-hero-title { font-size: clamp(34px, 4.6vw, 64px); }
  .ug-v2 .ugh .ug-lead { margin: 16px 0 22px; font-size: 16px; }
  .ug-v2 .ugh-stats { margin-top: 20px; margin-bottom: 14px; gap: 12px; }
  .ug-v2 .ugh-stats .ug-card { padding: 12px 16px; }
  .ug-v2 .ugh-stats .ug-stat { font-size: 26px; }
  .ug-v2 .ugh-stats .ug-card span:last-child { font-size: 12px; }
}

/* ---- Deck sticky de pilares ---- */
.ug-v2 .ugd { display: grid; gap: 18px; }
.ug-v2 .ugd-card { position: sticky; top: 110px; border-radius: var(--ug-radius-panel);
  padding: clamp(30px, 4vw, 56px); min-height: 300px; display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 32px; align-items: stretch;
  background: var(--ug-black-raise); border: 1px solid var(--ug-hairline); }
/* Columna derecha del deck: dato-firma arriba, chips abajo (antes: media card vacía) */
/* índice y dato-firma anclados arriba; los chips se pegan abajo con margin-top:auto */
.ug-v2 .ugd-card > div:first-child { align-self: start; }
.ug-v2 .ugd-side { justify-content: flex-start; }
.ug-v2 .ugd-side .ugd-tags { margin-top: auto; }
.ug-v2 .ugd-side { display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-end; gap: 18px; min-width: 0; }
.ug-v2 .ugd-fact { margin: 0; font-family: var(--ug-font-mono); font-weight: 700; font-size: 12px;
  letter-spacing: .1em; color: var(--ug-ink-3); text-align: right; }
.ug-v2 .ugd-side .ugd-tags { justify-content: flex-end; margin-top: 0; }
.ug-v2 .ugd-card:nth-child(2) { top: 128px; }
.ug-v2 .ugd-card:nth-child(3) { top: 146px; }
.ug-v2 .ugd-card:nth-child(4) { top: 164px; }
.ug-v2 .ugd-card--accent { background: var(--ug-grad-brand); border: 0; }
.ug-v2 .ugd-card--accent .ug-body, .ug-v2 .ugd-card--accent .ug-index { color: rgba(255,255,255,.85); }
.ug-v2 .ugd-card--paper { background: var(--ug-paper); color: var(--ug-paper-ink); border: 0; }
.ug-v2 .ugd-card--paper .ugd-title { color: var(--ug-paper-ink); }
.ug-v2 .ugd-card--paper .ug-body { color: rgba(16,16,16,.72); }
.ug-v2 .ugd-title { font: 600 clamp(26px,3vw,40px)/1.1 var(--ug-font-display); letter-spacing: -0.02em;
  color: var(--ug-white); margin: 8px 0 12px; }
.ug-v2 .ugd-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
@media (max-width: 860px) { .ug-v2 .ugd-card { grid-template-columns: 1fr; min-height: 0; position: relative; }
  .ug-v2 .ugd-side { align-items: flex-start; } .ug-v2 .ugd-fact { text-align: left; }
  .ug-v2 .ugd-side .ugd-tags { justify-content: flex-start; } }

/* Banda de cifras de la home (momento de marca + salida a /meeting) */
.ug-v2 .ughm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(28px, 4vw, 48px); }
.ug-v2 .ughm-stat { border-top: 1px solid var(--ug-hairline); padding-top: 18px; min-width: 0; }
.ug-v2 .ughm-stat .ug-body { margin: 8px 0 0; }
.ug-v2 .ughm-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px;
  flex-wrap: wrap; margin-top: clamp(34px, 4vw, 56px); padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--ug-hairline); border-radius: var(--ug-radius-panel); background: var(--ug-card); }
.ug-v2 .ughm-cta .ug-lead { margin: 0; }
@media (max-width: 900px) { .ug-v2 .ughm-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ug-v2 .ughm-stats { grid-template-columns: 1fr; }
  .ug-v2 .ughm-cta { flex-direction: column; align-items: flex-start; } }

/* ---- Sequencer del metodo ---- */
.ug-v2 .ugs { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ug-hairline); }
.ug-v2 .ugs-step { padding: 30px 26px 34px; border-right: 1px solid var(--ug-hairline); position: relative; }
.ug-v2 .ugs-step:last-child { border-right: 0; }
.ug-v2 .ugs-step::before { content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: var(--ug-pink); transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ug-ease-out); }
.ug-v2 .ugs.is-in .ugs-step::before { transform: scaleX(1); }
.ug-v2 .ugs.is-in .ugs-step:nth-child(2)::before { transition-delay: .18s; }
.ug-v2 .ugs.is-in .ugs-step:nth-child(3)::before { transition-delay: .36s; }
.ug-v2 .ugs.is-in .ugs-step:nth-child(4)::before { transition-delay: .54s; }
.ug-v2 .ugs-step .ug-index { color: var(--ug-green); display: block; margin-bottom: 14px; }
@media (max-width: 860px) { .ug-v2 .ugs { grid-template-columns: 1fr 1fr; } .ug-v2 .ugs-step { border-bottom: 1px solid var(--ug-hairline); } }

/* ---- Muro de confianza ---- */
.ug-v2 .ugw { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--ug-hairline); }
.ug-v2 .ugw-cell { aspect-ratio: 2 / 1; display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--ug-hairline); border-bottom: 1px solid var(--ug-hairline);
  transition: background var(--ug-dur-micro); }
.ug-v2 .ugw-cell:hover { background: var(--ug-card); }
/* Silueta blanca uniforme: los logos originales mezclan claros y oscuros y se veían
   con pesos muy distintos. brightness(0) invert(1) normaliza cualquiera conservando alfa. */
.ug-v2 .ugw-cell img { max-width: 68%; max-height: 56%; width: auto; height: auto;
  object-fit: contain; opacity: .72; filter: brightness(0) invert(1);
  transition: opacity var(--ug-dur-micro); }
.ug-v2 .ugw-cell:hover img { opacity: 1; }
.ug-v2 .ugw-cell--more { font-family: var(--ug-font-mono); color: var(--ug-ink-2); font-size: 14px; }
.ug-v2 a.ugw-cell { text-decoration: none; color: var(--ug-ink); }
.ug-v2 .ugw--compact .ugw-cell { aspect-ratio: 3 / 1; }
.ug-v2 .ugw--compact .ugw-cell img { max-height: 52%; }
@media (max-width: 860px) { .ug-v2 .ugw { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Seccion paper 01/02/03 ---- */
.ug-v2 .ugp { background: var(--ug-paper); color: var(--ug-paper-ink); border-radius: var(--ug-radius-panel); }
.ug-v2 .ugp .ug-h2 { color: var(--ug-paper-ink); }
.ug-v2 .ugp .ug-body, .ug-v2 .ugp .ug-lead { color: rgba(16,16,16,.72); }
.ug-v2 .ugp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(16,16,16,.16); }
.ug-v2 .ugp-item { padding: 34px 30px 44px; border-right: 1px solid rgba(16,16,16,.16); }
.ug-v2 .ugp-item:last-child { border-right: 0; }
.ug-v2 .ugp-item .ug-index { color: var(--ug-pink); }
.ug-v2 .ugp-item h3 { font: 600 24px/1.15 var(--ug-font-display); letter-spacing: -0.02em; margin: 14px 0 10px; }
@media (max-width: 860px) { .ug-v2 .ugp-grid { grid-template-columns: 1fr; } .ug-v2 .ugp-item { border-right: 0; border-bottom: 1px solid rgba(16,16,16,.16); } }

/* ---- CTA bookend ---- */
.ug-v2 .ugc { position: relative; overflow: hidden; text-align: center; }
.ug-v2 .ugc .ugh-aura { opacity: .9; }
.ug-v2 .ugc-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.ug-v2 .ugc-mail { display: inline-block; margin-top: 34px;
  font: 600 clamp(24px, 3.4vw, 44px)/1.1 var(--ug-font-display); letter-spacing: -0.02em;
  color: var(--ug-white); text-decoration: none; border-bottom: 2px solid var(--ug-pink);
  padding-bottom: 6px; transition: color var(--ug-dur-micro); }
.ug-v2 .ugc-mail:hover { color: var(--ug-pink); }

/* ---- Hero de pagina interior (compacto) ---- */
/* Aire inferior GARANTIZADO en todos los heros de página: cuando el contenido es alto
   (chips + CTAs + device) el flex-centrado lo dejaba a ras del borde. Mismo clamp que
   usa la ficha (.ugsd-hero) → ritmo idéntico en todo el sitio. */
/* El min-height fijo dejaba un vacío en los heroes que no llevan dispositivo lateral;
   el alto lo marca ahora el contenido, y solo se reserva pantalla si hay dispositivo. */
.ug-v2 .ugh--page { min-height: 0;
  padding-top: clamp(120px, 15vh, 168px); padding-bottom: clamp(48px, 7vh, 88px); }
.ug-v2 .ugh--page:has(.ugh-dev) { min-height: 62svh; }

/* ---- Split asimetrico 40/60 ---- */
.ug-v2 .ugsp { display: grid; grid-template-columns: 2fr 3fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.ug-v2 .ugsp-media { margin: 0; position: sticky; top: 110px; }
.ug-v2 .ugsp-media img { width: 100%; height: auto; border-radius: var(--ug-radius-card); display: block; }
.ug-v2 .ugsp-media figcaption { margin-top: 12px; }
.ug-v2 .ugsp-item { padding: 24px 0; border-bottom: 1px solid var(--ug-hairline); }
.ug-v2 .ugsp-item:last-child { border-bottom: 0; }
.ug-v2 .ugsp-body .ug-h2 { margin-bottom: 20px; }
@media (max-width: 860px) { .ug-v2 .ugsp { grid-template-columns: 1fr; } .ug-v2 .ugsp-media { position: static; } }

/* ---- Grid del equipo (plano hairline) ---- */
.ug-v2 .ugt { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ug-hairline); }
.ug-v2 .ugt-cell { border-right: 1px solid var(--ug-hairline); border-bottom: 1px solid var(--ug-hairline);
  padding: 22px 22px 18px; transition: background var(--ug-dur-micro); }
.ug-v2 .ugt-cell:hover { background: var(--ug-card); }
.ug-v2 .ugt-cell img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  filter: grayscale(1); transition: filter 400ms var(--ug-ease-out), transform 400ms var(--ug-ease-out); }
.ug-v2 .ugt-cell:hover img { filter: none; transform: translateY(-4px); }
.ug-v2 .ugt-meta { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.ug-v2 .ugt-name { font: 500 18px/1.2 var(--ug-font-display); color: var(--ug-white); }
@media (max-width: 860px) { .ug-v2 .ugt { grid-template-columns: repeat(2, 1fr); } }

/* ---- Banner de cookies ---- */
/* Barra inferior a todo el ancho: la tarjeta flotante se solapaba con el hero y sus
   botones medían 34px (por debajo del objetivo táctil mínimo de 44). */
.ug-v2 .ugck { position: fixed; inset: auto 0 0 0; z-index: 200; max-width: none;
  background: rgba(24,24,24,.97); backdrop-filter: blur(12px);
  border: 0; border-top: 1px solid var(--ug-hairline); border-radius: 0;
  box-shadow: 0 -12px 40px rgba(0,0,0,.45); }
.ug-v2 .ugck-in { max-width: var(--ug-container); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 28px; flex-wrap: wrap; padding: 14px var(--ug-gutter); }
.ug-v2 .ugck-in .ug-body { font-size: 14px; line-height: 1.45; margin: 0; flex: 1 1 300px; }
.ug-v2 .ugck-in a { color: var(--ug-pink-text); }
.ug-v2 .ugck-btns { display: flex; gap: 10px; margin-top: 0; flex: none; }
.ug-v2 .ugck .ug-btn { min-height: 44px; padding: 12px 20px; font-size: 14px; }
/* AEPD: aceptar y rechazar con el mismo peso visual */
.ug-v2 .ugck .ug-btn--ghost { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); color: #fff; }

/* ---- Router de versiones: aviso preview del diseño antiguo ---- */
/* (sin estilos: ?ugv1=1 sirve el render antiguo con su propio CSS) */

/* ============================================================================
   FOOTER «Lente de Larios» — footer experiencial (lente gravitacional WebGL).
   El canvas es piel decorativa (aria-hidden); el texto es DOM real, nítido y
   rastreable. Namespace .ugfl-* (sustituye al footer .ugf antiguo). JS en
   assets/js/ug-footer-lens.js. Degrada a estático (.is-static) sin WebGL /
   reduced-motion / móvil. Ultra-responsive (10 breakpoints).
   ========================================================================== */
.ug-v2 .ugfl { position: relative; isolation: isolate; overflow: hidden;
  border-top: 1px solid var(--ug-hairline); background: var(--ug-black); }
.ug-v2 .ugfl-lens { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  z-index: 0; pointer-events: none; }
.ug-v2 .ugfl-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background-image:
    radial-gradient(1px 1px at 18% 24%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 72% 58%, rgba(255,255,255,.40), transparent),
    radial-gradient(1.3px 1.3px at 42% 78%, rgba(255,255,255,.50), transparent),
    radial-gradient(1px 1px at 86% 30%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 55% 44%, rgba(255,255,255,.42), transparent),
    radial-gradient(1px 1px at 30% 64%, rgba(255,255,255,.30), transparent); }
.ug-v2 .ugfl.is-static .ugfl-stars { opacity: .7; }
.ug-v2 .ugfl.is-static .ugfl-lens { display: none; }
.ug-v2 .ugfl-fx { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px); }

/* Anillo de Einstein itinerante (hover/focus de un enlace) */
.ug-v2 .ugfl-ring { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
  pointer-events: none; z-index: 3; opacity: 0; transform: translate(-50%,-50%);
  border: 1px solid rgba(232,87,159,.7);
  box-shadow: 0 0 22px 3px rgba(232,87,159,.28), inset 0 0 10px rgba(232,87,159,.2); }

/* HERO: masa central */
.ug-v2 .ugfl-hero { text-align: center; padding: clamp(60px, 9vw, 120px) 0 clamp(40px, 6vw, 64px); }
.ug-v2 .ugfl-telem { display: inline-flex; gap: 12px 22px; flex-wrap: wrap; justify-content: center;
  align-items: center; font-family: var(--ug-font-mono); font-size: 12px; letter-spacing: .05em;
  color: var(--ug-ink-2); margin: 0 0 22px; }
.ug-v2 .ugfl-t { display: inline-flex; align-items: center; gap: 8px; }
.ug-v2 .ugfl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ug-green); flex: 0 0 auto;
  box-shadow: 0 0 8px 1px rgba(123,242,31,.45); }
.ug-v2 .ugfl-clock { font-variant-numeric: tabular-nums; }
.ug-v2 .ugfl-wm { position: relative; display: inline-block; max-width: 100%; }
.ug-v2 .ugfl-wm-txt { position: relative; z-index: 2; display: block; font-family: var(--ug-font-display);
  font-weight: 600; font-size: clamp(24px, 8.4vw, 116px); line-height: .9; letter-spacing: -.03em;
  color: var(--ug-white); }
.ug-v2 .ugfl-acc { color: var(--ug-pink); }
.ug-v2 .ugfl-halo { position: absolute; left: 50%; top: 50%; width: min(64vw, 420px); aspect-ratio: 1;
  transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(232,87,159,.10), transparent 62%); }
.ug-v2 .ugfl-sig { position: absolute; left: 50%; top: 50%; width: min(82vw, 560px); aspect-ratio: 1; z-index: 1;
  transform: translate(-50%,-50%) scale(.82); border-radius: 50%; pointer-events: none; opacity: 0;
  border: 1px solid rgba(232,87,159,.55);
  transition: opacity .5s var(--ug-ease-out), transform .6s var(--ug-ease-out); }
.ug-v2 .ugfl-lead { margin: 26px auto 0; max-width: 46ch; color: var(--ug-ink-2);
  font-size: clamp(15px, 1.6vw, 18px); line-height: 1.5; }
.ug-v2 .ugfl-cta { margin-top: 28px; display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.ug-v2 .ugfl-btn { position: relative; z-index: 2; }

/* NAV principal (pilares + recursos + herramientas + compañía + entidad) */
.ug-v2 .ugfl-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr 1fr; gap: clamp(20px, 2.6vw, 40px);
  padding-top: clamp(30px, 4vw, 48px); border-top: 1px solid var(--ug-hairline); }
.ug-v2 .ugfl-h { font-family: var(--ug-font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ug-ink-3); margin: 0 0 14px; font-weight: 400; }
.ug-v2 .ugfl-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ug-v2 .ugfl-logo { height: 40px; width: auto; }
.ug-v2 .ugfl-nap { font-style: normal; margin-top: 16px; color: var(--ug-ink-2); font-size: 14px; line-height: 1.7; }
.ug-v2 .ugfl-nap a { color: var(--ug-ink-2); text-decoration: none; border-bottom: 1px solid transparent;
  transition: color var(--ug-dur-micro), border-color var(--ug-dur-micro); }
.ug-v2 .ugfl-nap a:hover { color: var(--ug-white); border-bottom-color: var(--ug-hairline); }
.ug-v2 .ugfl-social { display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap; }

/* enlace con flecha decorativa + subrayado deslizante (agua que fluye) */
.ug-v2 .ugfl-link { position: relative; display: inline-flex; align-items: center; gap: .4em;
  color: var(--ug-ink-2); text-decoration: none; font-size: 14.5px; padding: 5px 0; width: max-content; max-width: 100%;
  transition: color var(--ug-dur-micro) var(--ug-ease-out), transform var(--ug-dur-micro) var(--ug-ease-out); }
.ug-v2 .ugfl-link.ugfl-sm { font-size: 13px; color: var(--ug-ink-3); }
.ug-v2 .ugfl-ar { opacity: 0; transform: translateX(-5px); color: var(--ug-pink);
  transition: opacity var(--ug-dur-micro) var(--ug-ease-out), transform var(--ug-dur-micro) var(--ug-ease-out); }
.ug-v2 .ugfl-link::after { content: ""; position: absolute; left: 0; bottom: 2px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform .32s var(--ug-ease-out); }
.ug-v2 .ugfl-link:hover, .ug-v2 .ugfl-link:focus-visible { color: var(--ug-white); transform: translateX(2px); }
.ug-v2 .ugfl-link:hover .ugfl-ar, .ug-v2 .ugfl-link:focus-visible .ugfl-ar { opacity: 1; transform: translateX(0); }
.ug-v2 .ugfl-link:hover::after, .ug-v2 .ugfl-link:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
.ug-v2 .ugfl-link:focus-visible { outline: 2px solid var(--ug-pink); outline-offset: 3px; border-radius: 3px; }

/* SITEMAP por especialidad */
.ug-v2 .ugfl-svc { margin-top: clamp(30px, 4vw, 52px); padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--ug-hairline); }
.ug-v2 .ugfl-svc-eyebrow { font-family: var(--ug-font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ug-ink-3); margin: 0 0 20px; }
.ug-v2 .ugfl-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 40px); }

/* FRANJA INSTITUCIONAL (sellos + publicidad de la subvención FSE+, restaurada del original)
   Colofón ordenado: dos grupos con eyebrow mono; sellos a altura uniforme; el texto de la
   subvención a ancho completo con los logos UE debajo (nunca texto estrangulado en columna). */
.ug-v2 .ugfl-inst { margin-top: clamp(30px, 4vw, 52px); padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--ug-hairline); display: grid; gap: clamp(28px, 3.4vw, 44px);
  text-align: center; }
.ug-v2 .ugfl-inst-h { font-family: var(--ug-font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ug-ink-3); margin: 0 0 18px; }
.ug-v2 .ugfl-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px clamp(22px, 3vw, 44px); }
.ug-v2 .ugfl-badges img { height: clamp(38px, 6vw, 56px); width: auto; max-width: 100%; opacity: .85; }
.ug-v2 .ugfl-grant-txt { margin: 0 auto 20px; font-size: 12.5px; line-height: 1.65;
  color: var(--ug-ink-3); max-width: 96ch; }
.ug-v2 .ugfl-grant-logos { height: 38px; width: auto; max-width: 100%; opacity: .9;
  display: block; margin: 0 auto; }

/* LEGAL */
.ug-v2 .ugfl-legal { margin-top: clamp(34px, 4vw, 56px); padding: 24px 0 44px; border-top: 1px solid var(--ug-hairline);
  display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap;
  font-family: var(--ug-font-mono); font-size: 11.5px; letter-spacing: .05em; color: var(--ug-ink-3); }
.ug-v2 .ugfl-legal-rt { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.ug-v2 .ugfl-legal a { color: var(--ug-ink-3); text-decoration: none; transition: color var(--ug-dur-micro); }
.ug-v2 .ugfl-legal a:hover { color: var(--ug-white); }
.ug-v2 .ugfl-lang { display: inline-flex; border: 1px solid var(--ug-hairline); border-radius: 999px; overflow: hidden; }
.ug-v2 .ugfl-lang a { padding: 3px 10px; color: var(--ug-ink-3); }
.ug-v2 .ugfl-lang a.on { background: rgba(255,255,255,.08); color: var(--ug-white); }
.ug-v2 .ugfl-aud { display: inline-flex; align-items: center; gap: 7px; color: var(--ug-green); }
.ug-v2 .ugfl-claim { color: var(--ug-ink-2); }

/* ---- Ultra-responsive: 1280 / 1100 / 1024 / 900 / 768 / 640 / 560 / 480 / 400 / 360 ---- */
@media (max-width: 1280px) { .ug-v2 .ugfl-main { grid-template-columns: 1.4fr 1fr 1fr 1.15fr 1fr; } }
@media (max-width: 1100px) {
  .ug-v2 .ugfl-main { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .ug-v2 .ugfl-brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 18px 44px; align-items: start; }
  .ug-v2 .ugfl-brand .ugfl-logo { grid-row: 1 / span 2; }
}
@media (max-width: 900px) { .ug-v2 .ugfl-svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
  .ug-v2 .ugfl-main { grid-template-columns: 1fr 1fr; }
  .ug-v2 .ugfl-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ug-v2 .ugfl-brand { grid-template-columns: 1fr; }
  .ug-v2 .ugfl-brand .ugfl-logo { grid-row: auto; }
}
@media (max-width: 560px) {
  .ug-v2 .ugfl-legal { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ug-v2 .ugfl-svc-grid { grid-template-columns: 1fr; }
  .ug-v2 .ugfl-badges img { height: 30px; }
  .ug-v2 .ugfl-grant-logos { height: 30px; }
}
@media (max-width: 480px) { .ug-v2 .ugfl-hero { padding-top: 64px; } }
@media (max-width: 400px) { .ug-v2 .ugfl-main { grid-template-columns: 1fr; } }
@media (max-width: 360px) { .ug-v2 .ugfl-fx { padding-left: 16px; padding-right: 16px; } }

/* Enlaces de contenido (anclas sin clase) dentro de main: rosa de marca en vez del azul UA.
   :where() deja la especificidad en (0,1,1) para que cualquier regla de componente gane. */
.ug-v2 main :where(a:not([class])) { color: var(--ug-pink-text); text-decoration: none;
  border-bottom: 1px solid rgba(221, 39, 136, 0.45); transition: border-color var(--ug-dur-micro); }
.ug-v2 main :where(a:not([class])):hover { border-bottom-color: var(--ug-pink); }

/* Contraste AA en paneles paper: pink más profundo sobre #F4F2EE */
/* Hay dos paneles y cada uno pide su rosa. El de .ugp es claro (--ug-paper): le va el rosa
   profundo, #B01F6C sobre #F4F2EE da 5,86. El resto de .ug-panel son oscuros (#101010, p.ej.
   la ficha de autor): ahi ese mismo rosa cae a 2,95 y hay que usar el claro, que da 5,70.
   Cuidado con unificarlos en una sola regla: arreglar uno rompe el otro. */
.ug-v2 .ugp .ug-label { color: var(--ug-pink-paper) !important; }
.ug-v2 .ug-panel:not(.ugp) .ug-label { color: var(--ug-pink-text) !important; }
.ug-v2 .ugp-item .ug-index { color: var(--ug-pink-paper); }

/* ---- Fixes responsive <=480px (auditoría 7D) ---- */
@media (max-width: 480px) {
  .ug-v2 .ugs { grid-template-columns: 1fr !important; }
  .ug-v2 .ugs-step { min-width: 0; }
  .ug-v2 .ugh-key { white-space: normal; }
}
/* Email grande de contacto: medida sana en todos los anchos (a 44px partía en dos líneas
   en la columna del split de escritorio; el 6vw era un fix de móvil mal globalizado). */
.ug-v2 .ugc-mail { font-size: clamp(19px, 2vw, 30px); overflow-wrap: anywhere; }
.ug-v2 .ug-prose a { overflow-wrap: anywhere; }

/* Barra A-Z del glosario en móvil: pista de scroll con fundido en los bordes */
@media (max-width: 760px) {
  .ug-v2 .uggl-nav-in { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%); }
}

/* ---- Hero: coreografía CSS pura (sin dependencia de JS; LCP inmediato con font-display swap) ---- */
.ug-v2 [data-hero] { opacity: 0; transform: translateY(22px);
  animation: ug-hero-in 0.8s var(--ug-ease-out) forwards; }
.ug-v2 [data-hero="1"] { animation-delay: .05s; }
.ug-v2 [data-hero="2"] { animation-delay: .14s; }
.ug-v2 [data-hero="3"] { animation-delay: .24s; }
.ug-v2 [data-hero="4"] { animation-delay: .34s; }
@keyframes ug-hero-in { to { opacity: 1; transform: none; } }

/* Reveals de scroll: solo se ocultan si el JS está operativo (html.ug-js) */
html:not(.ug-js) .ug-v2 .ug-io,
html:not(.ug-js) .ug-v2 [data-ug-stagger] > * { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .ug-v2 [data-hero] { animation: none; opacity: 1; transform: none; }
}

/* FAQ <details>: apertura con fundido suave (era el único componente que saltaba) */
.ug-v2 .ugsd-faq[open] > .ug-prose { animation: ug-fade-in .32s var(--ug-ease-out); }
@keyframes ug-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ug-v2 .ugsd-faq summary { transition: color var(--ug-dur-micro) var(--ug-ease-out); }
.ug-v2 .uggd-list-item .ug-arrow { transition: color var(--ug-dur-micro) var(--ug-ease-out); }

/* Skip-link (a11y nivel consultora) */
.ug-v2 .ug-skip { position: absolute; left: -9999px; top: 0; z-index: 2000;
  padding: 12px 20px; background: var(--ug-pink-cta); color: #fff; border-radius: 0 0 12px 0;
  font: 600 14px/1 var(--ug-font-body); text-decoration: none; }
.ug-v2 .ug-skip:focus { left: 0; }


/* ============================================================================
   MOTION KIT v2 — primitivas nuevas (agua que fluye, sin ruido)
   ========================================================================== */

/* Palabras con máscara en H2 (split del JS: .ug-wm > .ug-wmi) */
.ug-v2 .ug-wm { display: inline-block; overflow: hidden; vertical-align: bottom; }
.ug-v2 .ug-wmi { display: inline-block; transform: translateY(110%);
  transition: transform .7s var(--ug-ease-out); }
.ug-v2 .ug-wm-host.is-in .ug-wmi { transform: none; }
html:not(.ug-js) .ug-v2 .ug-wmi { transform: none; }

/* Spotlight de cursor: halo radial que sigue al ratón dentro de la card */
/* Va en :where() a proposito. El halo solo necesita que la card sea contenedor de
   posicionamiento, y con especificidad plena este relative pisaba el sticky del deck:
   al pasar el cursor la tarjeta saltaba 110 px y se descuadraba el apilado. Asi cede
   ante cualquier elemento que declare su propia position, y a los que no la declaran
   les sigue llegando igual. No le devuelvas la especificidad. */
.ug-v2 :where(.ug-spot) { position: relative; }
.ug-v2 .ug-spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .45s var(--ug-ease-out);
  background: radial-gradient(220px circle at var(--ug-mx, 50%) var(--ug-my, 50%),
    rgba(221,39,136,.10), rgba(173,50,182,.05) 40%, transparent 70%); }
.ug-v2 .ug-spot:hover::after { opacity: 1; }

/* Botón magnético: el transform lo pilota el JS; aquí solo la vuelta con muelle */
.ug-v2 .ug-btn--primary { will-change: transform;
  transition: background var(--ug-dur-micro) var(--ug-ease-inout),
              transform .5s cubic-bezier(0.22, 1.6, 0.36, 1); }

/* Hairlines que se dibujan (de izquierda a derecha al entrar en viewport) */
html.ug-js .ug-v2 .ug-hairline-t { border-top: 0; }
html.ug-js .ug-v2 .ug-hairline-t::before { content: ''; position: absolute; top: 0; left: 0;
  right: 0; height: 1px; background: var(--ug-hairline);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s var(--ug-ease-out); }
html.ug-js .ug-v2 .ug-hairline-t.is-in::before { transform: scaleX(1); }

/* Imágenes con wipe + asentamiento de escala al revelarse */
.ug-v2 figure.ug-io img { transform: scale(1.06);
  transition: transform 1.2s var(--ug-ease-out); }
.ug-v2 figure.ug-io.is-in img { transform: scale(1); }

/* Ticker continuo de logos (partners de la home) */
.ug-v2 .ug-ticker { display: block !important; overflow: hidden; border: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ug-v2 .ug-ticker-track { display: flex; width: max-content;
  animation: ug-ticker 36s linear infinite; }
.ug-v2 .ug-ticker:hover .ug-ticker-track { animation-play-state: paused; }
.ug-v2 .ug-ticker .ugw-cell { flex: 0 0 auto; width: 200px; border: 0; }
@keyframes ug-ticker { to { transform: translateX(-50%); } }

/* Progreso de lectura bajo la nav (artículos) */
.ug-v2 .ug-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--ug-grad-brand); transform: scaleX(0); transform-origin: left center; }


/* Cards del deck de disciplinas de la home: título enlazado + card entera clicable.
   OJO: nada de position:relative aquí — pisaba el position:sticky del deck (la
   animación de baraja). sticky ya ancla el ::after del enlace estirado. */
.ug-v2 .ugd-title a { color: inherit; text-decoration: none; }
.ug-v2 .ugd-title a::after { content: ""; position: absolute; inset: 0; }
.ug-v2 .ugd-card:hover .ugd-title a { color: var(--ug-pink-text); }
.ug-v2 .ugd-title a:focus-visible { outline: 2px solid var(--ug-pink); outline-offset: 3px; }

/* Impresión: estados finales siempre (nada oculto por reveals) */
@media print {
  .ug-v2 .ug-io, .ug-v2 [data-ug-stagger], .ug-v2 .ug-wmi { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   FIRMAS DE PILAR — cada pilar «brilla» distinto (encargo del CEO). Piel
   decorativa CSS sobre el hero .ugh, sin WebGL nuevo (protege el PSI). Todas
   pointer-events:none, aria-hidden implícito (pseudo-elementos), estáticas.
   ========================================================================== */
.ug-v2 .ugh--sig-dev, .ug-v2 .ugh--sig-tok, .ug-v2 .ugh--sig-mkt, .ug-v2 .ugh--sig-con { position: relative; }
.ug-v2 [class*="ugh--sig-"] > .ug-container { position: relative; z-index: 2; }

/* DESARROLLO — malla isométrica con tinte verde (arquitectura de bloques) */
.ug-v2 .ugh--sig-dev::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .6;
  background-image:
    linear-gradient(30deg, rgba(123,242,31,.06) 1px, transparent 1px),
    linear-gradient(-30deg, rgba(123,242,31,.06) 1px, transparent 1px);
  background-size: 46px 27px;
  -webkit-mask-image: radial-gradient(120% 90% at 84% 12%, #000, transparent 66%);
          mask-image: radial-gradient(120% 90% at 84% 12%, #000, transparent 66%); }
.ug-v2 .ugh--sig-dev .ugh-key { color: var(--ug-green); }

/* TOKENIZACIÓN — retícula de fraccionamiento con fracciones encendidas en rosa */
.ug-v2 .ugh--sig-tok::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .7;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(72deg, transparent 42%, #000 92%);
          mask-image: linear-gradient(72deg, transparent 42%, #000 92%); }
.ug-v2 .ugh--sig-tok::before {
  content: ""; position: absolute; right: 9%; top: 20%; width: 48px; height: 48px; z-index: 1; pointer-events: none;
  background: rgba(221,39,136,.16); border: 1px solid rgba(232,87,159,.55);
  box-shadow: 96px 48px 0 rgba(221,39,136,.11), 48px 144px 0 rgba(221,39,136,.08), 144px 96px 0 rgba(221,39,136,.06); }

/* MARKETING — anillos concéntricos que emanan (alcance) */
.ug-v2 .ugh--sig-mkt::after {
  content: ""; position: absolute; left: 78%; top: 34%; width: 900px; aspect-ratio: 1;
  transform: translate(-50%,-50%); z-index: 0; pointer-events: none; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 60px, rgba(232,87,159,.07) 60px 61px);
  -webkit-mask-image: radial-gradient(circle, #000 24%, transparent 70%);
          mask-image: radial-gradient(circle, #000 24%, transparent 70%); }

/* CONSULTORÍA — anillo de Einstein tenue (ver claro; eco de la lente del footer) */
.ug-v2 .ugh--sig-con::after {
  content: ""; position: absolute; left: 74%; top: 32%; width: min(46vw, 520px); aspect-ratio: 1;
  transform: translate(-50%,-50%); z-index: 0; pointer-events: none; border-radius: 50%;
  border: 1px solid rgba(232,87,159,.4);
  box-shadow: 0 0 80px 6px rgba(232,87,159,.10), inset 0 0 44px rgba(232,87,159,.06); }
.ug-v2 .ugh--sig-con::before {
  content: ""; position: absolute; left: 74%; top: 32%; width: min(28vw, 300px); aspect-ratio: 1;
  transform: translate(-50%,-50%); z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,87,159,.10), transparent 62%); }

@media (max-width: 720px) {
  .ug-v2 .ugh--sig-mkt::after { left: 88%; width: 640px; }
  .ug-v2 .ugh--sig-con::after, .ug-v2 .ugh--sig-con::before { left: 82%; }
  .ug-v2 .ugh--sig-tok::before { right: 4%; }
}

/* ============================================================================
   HERO DEVICES por pilar — cada landing abre con un dispositivo animado propio
   (encargo CEO: heros distintos, WOW por página). CSS puro, aria-hidden,
   degradan a estado final con prefers-reduced-motion.
   ========================================================================== */
.ug-v2 .ugh .ug-container.ugh-splitgrid { display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 64px); align-items: center; }
.ug-v2 .ugh-dev { min-width: 0; }
@media (max-width: 900px) {
  .ug-v2 .ugh .ug-container.ugh-splitgrid { grid-template-columns: 1fr; }
  .ug-v2 .ugh-dev { margin-top: 34px; }
  /* especificidad > que los justify-self:end de las bases (cascada) */
  /* estirar en vez de anclar: con max-width fijo quedaban descolgados a la izquierda */
  .ug-v2 .ugh-splitgrid .ugforge, .ug-v2 .ugh-splitgrid .ugmono {
    justify-self: stretch; width: 100%; max-width: none; }
  .ug-v2 .ugh-splitgrid .ugmono-grid { gap: clamp(5px, 1.2vw, 10px); }
}

/* -- LA FORJA (desarrollo): bloques que se mintean en cascada, unidos por la cadena -- */
.ug-v2 .ugforge { position: relative; display: grid; gap: 10px; padding-left: 26px;
  max-width: 430px; justify-self: end; width: 100%; }
.ug-v2 .ugforge::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 1px;
  background: linear-gradient(180deg, rgba(123,242,31,.55), rgba(123,242,31,.05)); }
.ug-v2 .ugforge-block { position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--ug-card); border: 1px solid var(--ug-hairline);
  border-radius: 10px; font-family: var(--ug-font-mono); font-size: 12px; color: var(--ug-ink-2);
  opacity: 0; transform: translateY(-14px);
  animation: ug-forge-in .55s var(--ug-ease-out) forwards; animation-delay: calc(.15s + var(--i) * .16s); }
.ug-v2 .ugforge-block::before { content: ""; position: absolute; left: -18px; top: 50%; width: 10px; height: 1px;
  background: rgba(123,242,31,.5); }
.ug-v2 .ugforge-block:first-child { border-color: rgba(123,242,31,.45);
  animation: ug-forge-in .55s var(--ug-ease-out) forwards, ug-forge-glow 2.8s ease-in-out 1.4s infinite;
  animation-delay: calc(.15s + var(--i) * .16s), 1.4s; }
.ug-v2 .ugforge-ix { color: var(--ug-green); font-weight: 700; flex: 0 0 auto; }
.ug-v2 .ugforge-hash { color: var(--ug-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ug-v2 .ugforge-tag { margin-left: auto; color: var(--ug-white); letter-spacing: .06em; flex: 0 0 auto; }
.ug-v2 .ugforge-mint { display: flex; gap: 9px; align-items: center; padding-left: 2px;
  font-family: var(--ug-font-mono); font-size: 11px; letter-spacing: .12em; color: var(--ug-green);
  opacity: 0; animation: ug-forge-in .5s var(--ug-ease-out) 1.2s forwards; }
.ug-v2 .ugforge-mint i { width: 7px; height: 7px; border-radius: 50%; background: var(--ug-green);
  box-shadow: 0 0 0 0 rgba(123,242,31,.5); animation: pulse-forge 2s var(--ug-ease-out) infinite; }
@keyframes ug-forge-in { to { opacity: 1; transform: none; } }
@keyframes ug-forge-glow { 0%,100% { box-shadow: 0 0 14px rgba(123,242,31,.05); } 50% { box-shadow: 0 0 30px rgba(123,242,31,.18); } }
@keyframes pulse-forge { 0% { box-shadow: 0 0 0 0 rgba(123,242,31,.45); } 70% { box-shadow: 0 0 0 8px rgba(123,242,31,0); } 100% { box-shadow: 0 0 0 0 rgba(123,242,31,0); } }

/* -- EL MONOLITO (tokenización): el activo se fragmenta en retícula; fracciones vivas en rosa -- */
.ug-v2 .ugmono { max-width: 400px; justify-self: end; width: 100%; }
.ug-v2 .ugmono-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; aspect-ratio: 8 / 6; }
.ug-v2 .ugmono-grid i { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09);
  border-radius: 3px; opacity: 0; transform: scale(.5);
  animation: ug-mono-in .5s var(--ug-ease-out) forwards; animation-delay: calc(var(--i) * 24ms); }
.ug-v2 .ugmono-grid i.lit { background: rgba(221,39,136,.32); border-color: rgba(232,87,159,.6);
  animation: ug-mono-in .5s var(--ug-ease-out) forwards, ug-mono-pulse 3.4s ease-in-out 1.6s infinite;
  animation-delay: calc(var(--i) * 24ms), calc(1.6s + var(--i) * 60ms); }
@keyframes ug-mono-in { to { opacity: 1; transform: none; } }
@keyframes ug-mono-pulse { 0%,100% { box-shadow: 0 0 8px rgba(221,39,136,.15); } 50% { box-shadow: 0 0 20px rgba(221,39,136,.45); } }
.ug-v2 .ugmono-label { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px;
  font-family: var(--ug-font-mono); font-size: 11px; letter-spacing: .08em; color: var(--ug-ink-3); flex-wrap: wrap; }
.ug-v2 .ugmono-label b { color: var(--ug-pink-text); font-weight: 700; }

/* -- LA SEÑAL (marketing): ondas emitiendo desde el núcleo, conceptos flotando -- */
.ug-v2 .ugwave { position: relative; aspect-ratio: 1; max-width: 380px; width: 100%;
  justify-self: end; margin-inline: auto; }
.ug-v2 .ugwave-core { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
  transform: translate(-50%,-50%); border-radius: 50%; background: var(--ug-pink);
  box-shadow: 0 0 26px rgba(221,39,136,.75); }
.ug-v2 .ugwave-ring { position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(232,87,159,.5); opacity: 0; transform: scale(.1);
  animation: ug-wave 5.6s linear var(--d, 0s) infinite; }
@keyframes ug-wave { 0% { transform: scale(.08); opacity: 0; } 14% { opacity: .7; } 100% { transform: scale(1.04); opacity: 0; } }
.ug-v2 .ugwave-chip { position: absolute; font-family: var(--ug-font-mono); font-size: 11px;
  letter-spacing: .08em; color: var(--ug-ink-2); border: 1px solid var(--ug-hairline);
  background: rgba(16,16,16,.82); border-radius: 999px; padding: 6px 12px; white-space: nowrap;
  animation: ug-wave-float 6s ease-in-out var(--d, 0s) infinite; }
@keyframes ug-wave-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

@media (prefers-reduced-motion: reduce) {
  .ug-v2 .ugforge-block, .ug-v2 .ugforge-mint, .ug-v2 .ugmono-grid i { animation: none; opacity: 1; transform: none; }
  .ug-v2 .ugforge-mint i, .ug-v2 .ugwave-chip { animation: none; }
  .ug-v2 .ugwave-ring { animation: none; opacity: .22; }
  .ug-v2 .ugwave-ring:nth-of-type(1) { transform: scale(.35); }
  .ug-v2 .ugwave-ring:nth-of-type(2) { transform: scale(.6); }
  .ug-v2 .ugwave-ring:nth-of-type(3) { transform: scale(.82); }
  .ug-v2 .ugwave-ring:nth-of-type(4) { transform: scale(1.02); }
}

/* ---- Marketing: banda de resultados propios ---- */
.ug-v2 .ugmk-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(28px, 4vw, 48px); }
.ug-v2 .ugmk-proof-item { border-top: 1px solid var(--ug-hairline); padding-top: 18px; min-width: 0; }
.ug-v2 .ugmk-proof-item .ug-body { margin: 8px 0 0; }
@media (max-width: 720px) { .ug-v2 .ugmk-proof { grid-template-columns: 1fr; } }

/* ---- Migas de pan sobrias (fichas de servicio): mono, sin decoración ---- */
.ug-v2 .ug-crumbs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--ug-font-mono); font-weight: 700; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; margin: 0 0 14px; }
.ug-v2 .ug-crumbs a { color: var(--ug-green); text-decoration: none;
  transition: color var(--ug-dur-micro); }
.ug-v2 .ug-crumbs a:hover { color: var(--ug-white); }
.ug-v2 .ug-crumbs a:focus-visible { outline: 2px solid var(--ug-pink); outline-offset: 3px; }
.ug-v2 .ug-crumbs span[aria-hidden] { color: var(--ug-ink-3); }
.ug-v2 .ug-crumbs span[aria-current] { color: var(--ug-ink-3); overflow-wrap: anywhere; }

/* La banda fina de herramientas no debe heredar el padding de sección completo
   (quedaba flotando entre ~350px de vacío por lado en pantallas grandes). */
.ug-v2 .ug-section:has(> .ug-container > .ugtkp-tools) { padding-block: clamp(36px, 4vw, 64px); }

/* ---- PILAR TOKENIZACIÓN — verticales «¿qué quieres tokenizar?» + banda de herramientas ---- */
.ug-v2 .ugtkp-verts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(28px, 4vw, 48px); }
.ug-v2 .ugtkp-vert { position: relative; display: block; padding: clamp(22px, 2.4vw, 30px);
  background: var(--ug-card); border: 1px solid var(--ug-hairline); border-radius: var(--ug-radius-card);
  text-decoration: none; color: var(--ug-ink); min-width: 0;
  transition: transform var(--ug-dur-micro) var(--ug-ease-out), border-color var(--ug-dur-micro), background var(--ug-dur-micro); }
.ug-v2 .ugtkp-vert:hover { transform: translateY(-4px); border-color: rgba(232,87,159,.4); background: rgba(255,255,255,.06); }
.ug-v2 .ugtkp-vert:focus-visible { outline: 2px solid var(--ug-pink); outline-offset: 3px; }
.ug-v2 .ugtkp-vert-t { font-family: var(--ug-font-display); font-weight: 600; font-size: clamp(19px, 2vw, 23px);
  color: var(--ug-white); margin: 0 0 8px; letter-spacing: -.01em; }
.ug-v2 .ugtkp-vert-d { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ug-ink-2); }
.ug-v2 .ugtkp-vert-go { position: absolute; top: clamp(22px, 2.4vw, 30px); right: clamp(22px, 2.4vw, 30px);
  color: var(--ug-pink-text); opacity: 0; transform: translateX(-4px);
  transition: opacity var(--ug-dur-micro), transform var(--ug-dur-micro) var(--ug-ease-out); }
.ug-v2 .ugtkp-vert:hover .ugtkp-vert-go, .ug-v2 .ugtkp-vert:focus-visible .ugtkp-vert-go { opacity: 1; transform: translateX(0); }
.ug-v2 .ugtkp-tools { display: flex; align-items: center; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap;
  padding: clamp(24px, 3vw, 40px); border: 1px solid var(--ug-hairline); border-radius: var(--ug-radius-panel); background: var(--ug-card); }
.ug-v2 .ugtkp-tools-txt h2 { margin: 8px 0 0; }
.ug-v2 .ugtkp-tools-cta { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .ug-v2 .ugtkp-verts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ug-v2 .ugtkp-verts { grid-template-columns: 1fr; }
  .ug-v2 .ugtkp-tools { flex-direction: column; align-items: flex-start; } }

/* Reduced motion: todo lo cinético nuevo queda en estado final */
@media (prefers-reduced-motion: reduce) {
  .ug-v2 .ug-wmi { transform: none !important; transition: none !important; }
  .ug-v2 .ug-spot::after { display: none; }
  .ug-v2 .ug-btn--primary { transition: background var(--ug-dur-micro) var(--ug-ease-inout); }
  .ug-v2 .ug-hairline-t { border-top: 1px solid var(--ug-hairline) !important; }
  .ug-v2 .ug-hairline-t::before { display: none; }
  .ug-v2 figure.ug-io img { transform: none; transition: none; }
  .ug-v2 .ug-ticker-track { animation: none; }
  .ug-v2 .ug-progress { display: none; }
}

/* ── FAQ del home: acordeón nativo <details> (recuperación de la FAQ long-tail) ───────── */
.ug-faq{max-width:860px;margin-inline:auto}
.ug-faq-item{border-top:1px solid var(--ug-hairline)}
.ug-faq-item:last-child{border-bottom:1px solid var(--ug-hairline)}
.ug-faq-item>summary{list-style:none;cursor:pointer;display:flex;gap:24px;align-items:baseline;
  justify-content:space-between;padding:24px 4px;font-family:var(--ug-font-display);
  font-weight:500;font-size:clamp(17px,2.2vw,21px);line-height:1.35;color:var(--ug-ink);transition:color .25s}
.ug-faq-item>summary::-webkit-details-marker{display:none}
.ug-faq-item>summary::after{content:'+';flex:0 0 auto;color:var(--ug-green);
  font-family:var(--ug-font-mono);font-size:24px;line-height:1;transform:translateY(2px);transition:transform .3s ease}
.ug-faq-item[open]>summary::after{content:'−'}
.ug-faq-item>summary:hover{color:var(--ug-green)}
.ug-faq-a{padding:0 4px 26px}
.ug-faq-a p{max-width:72ch;margin:0;color:var(--ug-ink-2);line-height:1.65;font-size:clamp(15px,1.7vw,16.5px)}
@media (prefers-reduced-motion:reduce){.ug-faq-item>summary::after{transition:none}}

/* Aviso de contenido divulgativo (fichas con carga normativa y glosario).
   Discreto: no compite con el contenido, pero queda legible y rastreable. */
.ug-v2 .ug-legal-note-sec { padding-block: clamp(18px, 2.2vw, 30px); }
.ug-v2 .ug-legal-note { max-width: 78ch; margin: 0; font-size: 12.5px; line-height: 1.6;
  color: var(--ug-ink-3); border-top: 1px solid var(--ug-hairline); padding-top: 14px; }
.ug-v2 .ug-legal-note a { color: var(--ug-ink-2); text-decoration: underline;
  text-underline-offset: 2px; }
.ug-v2 .ug-legal-note a:hover { color: var(--ug-pink-text); }

/* Sitemap del footer plegable: en móvil eran ~4 pantallas de scroll (un cuarto de la home).
   El contenido sigue en el HTML para buscadores e IA; solo cambia su presentación. */
.ug-v2 .ugfl-svc-d > summary { list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ug-v2 .ugfl-svc-d > summary::-webkit-details-marker { display: none; }
.ug-v2 .ugfl-svc-mk { position: relative; width: 13px; height: 13px; flex: 0 0 auto; }
.ug-v2 .ugfl-svc-mk::before, .ug-v2 .ugfl-svc-mk::after { content: ""; position: absolute;
  background: var(--ug-ink-3); transition: transform var(--ug-dur-micro) var(--ug-ease-out); }
.ug-v2 .ugfl-svc-mk::before { inset: 6px 0 6px 0; height: 1px; }
.ug-v2 .ugfl-svc-mk::after { inset: 0 6px 0 6px; width: 1px; }
.ug-v2 .ugfl-svc-d[open] .ugfl-svc-mk::after { transform: scaleY(0); }
.ug-v2 .ugfl-svc-d > summary:focus-visible { outline: 2px solid var(--ug-pink);
  outline-offset: 4px; border-radius: 4px; }
.ug-v2 .ugfl-svc-d[open] > .ugfl-svc-grid { animation: ug-fade-in .3s var(--ug-ease-out); }
@media (min-width: 861px) {
  /* en escritorio el sumario es solo un rótulo: el bloque va siempre abierto */
  .ug-v2 .ugfl-svc-d > summary { cursor: default; }
  .ug-v2 .ugfl-svc-mk { display: none; }
}

/* Objetivos táctiles: controles por debajo del mínimo de 44px en pantallas táctiles. */
@media (max-width: 860px) {
  .ug-v2 .ugn .ug-btn { padding: 14px 24px; font-size: 15px; }
  .ug-v2 .ugfl-link { min-height: 40px; }
  .ug-v2 .ugfl-legal a { display: inline-flex; align-items: center; min-height: 40px; }
}
@media (pointer: coarse) {
  .ug-v2 a.ug-chip, .ug-v2 button.ug-chip { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Un solo cierre por página: si la página trae su bloque CTA, el pre-footer no repite botón. */
body.ug-v2:has(.ugc) .ugfl-hero .ug-btn { display: none; }

/* Paginador de resultados de búsqueda (search.php). */
.ug-v2 .ugs-pager{display:flex;justify-content:space-between;gap:16px;margin-top:var(--ug-space-block);
  padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}
.ug-v2 .ugs-pager a{color:var(--ug-ink);text-decoration:none;font-size:14px;letter-spacing:.04em;
  text-transform:uppercase}
.ug-v2 .ugs-pager a:hover{color:var(--ug-pink)}

/* Los items de grid tienen min-width:auto y no encogen por debajo de su contenido. En WebKit
   (es decir, en TODOS los navegadores de iPhone) eso desbordaba el grid de logos 106 px.
   No se veia probando solo en Chromium. */
.ugw, .ugw-cell { min-width: 0; }
.ugw-cell img { max-width: 100%; height: auto; }


/* ---------------------------------------------------------------------------
 * Tarjetas del deck de pilares: vidrio esmerilado.
 * El bloque opaco competia con el hero y con el pie, que tambien son piezas
 * grandes; translucido con desenfoque se apoya en el fondo en vez de taparlo, y
 * al ser sticky y apilarse deja entrever la tarjeta de debajo.
 * Se excluyen las dos variantes con identidad propia (el degradado de marca y la
 * clara), que no deben volverse translucidas.
 * ------------------------------------------------------------------------- */
.ug-v2 .ugd-card:not(.ugd-card--accent):not(.ugd-card--paper){
  background:linear-gradient(155deg,rgba(26,26,28,.88),rgba(17,17,19,.92));
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 22px 50px -28px rgba(0,0,0,.9);
}
/* Filo de luz superior: es lo que da el acabado de vidrio y evita que el borde
   translucido se lea como una caja desvaida. */
.ug-v2 .ugd-card:not(.ugd-card--accent):not(.ugd-card--paper)::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  border-top-left-radius:inherit;border-top-right-radius:inherit;
}
/* Sin soporte de desenfoque (Firefox antiguo), un fondo solido equivalente para
   que nunca se lea el texto sobre lo que haya detras. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ug-v2 .ugd-card:not(.ugd-card--accent):not(.ugd-card--paper){background:#181818}
}


/* Las otras dos tarjetas del deck comparten el mismo acabado de vidrio, cada una en su
   color: si solo lo llevan las oscuras, el degradado y la clara se leen como piezas de
   otro sistema. Mismo filo de luz, misma sombra, misma profundidad. */
.ug-v2 .ugd-card--accent{
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 1px 0 rgba(255,255,255,.26) inset,0 22px 50px -28px rgba(0,0,0,.9);
}
.ug-v2 .ugd-card--paper{
  background:linear-gradient(155deg,rgba(246,244,240,.94),rgba(231,228,222,.90));
  -webkit-backdrop-filter:blur(26px) saturate(140%);
  backdrop-filter:blur(26px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.75) inset,0 22px 50px -28px rgba(0,0,0,.9);
}
.ug-v2 .ugd-card--accent::before,
.ug-v2 .ugd-card--paper::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:1px;pointer-events:none;
  border-top-left-radius:inherit;border-top-right-radius:inherit;
}
.ug-v2 .ugd-card--accent::before{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.68),transparent);
}
/* En la clara el filo se invierte: una sombra fina, no una luz, o no se veria. */
.ug-v2 .ugd-card--paper::before{
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.16),transparent);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ug-v2 .ugd-card--paper{background:var(--ug-paper)}
}

/* ---- Auto-zoom de Safari iOS en los buscadores ---- */
/* iOS amplia la pagina entera al enfocar un campo con font-size < 16px. Solo se sube en
   pantallas tactiles: en escritorio el problema no existe y el tamano menor es intencionado.
   Si anades un campo nuevo, comprueba que no baja de 16px en movil. */
@media (hover: none) and (pointer: coarse) {
  .ug-v2 input[type="search"],
  .ug-v2 input[type="text"],
  .ug-v2 input[type="email"],
  .ug-v2 input[type="tel"],
  .ug-v2 input[type="number"],
  .ug-v2 textarea,
  .ug-v2 select { font-size: 16px; }
}
/* Sin esto iOS reajusta el tamano del texto por su cuenta al girar el dispositivo. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }