/* ════════════════════════════════════════════════════════════════════════════
   G-COMMERCE · Sistema de diseño «Órbita» v1.0
   ────────────────────────────────────────────────────────────────────────────
   Capa 0  Motor sandy_ds (assets/motor/sandy-tokens.css + marca-goldery.css):
           rampas de color oficiales (--naranja-*, --gris-*, semánticos).
   Capa 1  Marca (--gc-*): Manual de Identidad Visual GCorp v1.0.
           Goldery: naranja Pantone 3556C #F16400 · rojo #EF3832 · Cool Gray 11C #4E4F54
           GCorp:   Gris Ratón #474746 · blanco · secundario #93D5E1 → #0F1221
   Capa 2  Tema (oscuro «Órbita» por defecto / claro): solo redefine tokens.
   Regla:  ningún componente usa un hex directo; todo pasa por un token.
   ════════════════════════════════════════════════════════════════════════════ */

/* ═════════════════════════ 1 · TOKENS DE MARCA ═════════════════════════ */
:root {
  /* Goldery (manual pág. 19) — referencias al Motor con respaldo */
  --gc-naranja: var(--naranja-550, #F16400);          /* Pantone 3556C */
  --gc-naranja-claro: var(--naranja-400, #FF8F47);
  --gc-naranja-vivo: var(--naranja-450, #FF7D24);
  --gc-naranja-oscuro: var(--naranja-600, #E25800);
  --gc-naranja-legible: var(--naranja-700, #C25200);  /* texto naranja sobre fondo claro */
  --gc-rojo: var(--rojo-520, #EF3832);
  --gc-cool-gray: var(--gris-600, #4E4F54);            /* Pantone Cool Gray 11C */
  /* GCorp (manual pág. 15) */
  --gc-gris-raton: #474746;
  --gc-hielo: #93D5E1;
  --gc-medianoche: #0F1221;
  /* Carbón: Cool Gray 11C llevado hacia el negro (fondos del modo Órbita) */
  --gc-carbon-950: #0D0E10;
  --gc-carbon-900: #111214;
  --gc-carbon-850: #16171A;
  --gc-carbon-800: #1C1D21;
  --gc-carbon-700: var(--gris-750, #2F3135);
  --gc-carbon-600: var(--gris-650, #404247);

  /* Tipografía oficial */
  --gc-f-display: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --gc-f-texto: "Raleway", "Segoe UI", system-ui, -apple-system, sans-serif;
  --gc-f-datos: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
  --gc-f-emoji: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;

  /* Espacio (base 4) y lienzo */
  --gc-e1: 4px;  --gc-e2: 8px;  --gc-e3: 12px; --gc-e4: 16px; --gc-e5: 24px;
  --gc-e6: 32px; --gc-e7: 48px; --gc-e8: 64px; --gc-e9: 96px; --gc-e10: 128px;
  --gc-ancho: 1240px;
  --gc-ancho-portal: 1400px;        /* el portal y el contenido de las páginas */
  --gc-ancho-cabecera: 1480px;      /* las cabeceras de todas las páginas (un poco más: las pestañas de los módulos); igual en
                                       todas, así logo e íconos no saltan con la cortina */
  --gc-margen: clamp(16px, 4vw, 40px);
  --gc-cabecera: 68px;

  /* Radios: escala del Motor */
  --gc-r-panel: var(--radio-panel, 20px);
  --gc-r-tarjeta: var(--radio-tarjeta, 18px);
  --gc-r-caja: var(--radio-caja, 14px);
  --gc-r-control: var(--radio-control, 10px);
  --gc-r-pildora: var(--radio-pildora, 999px);

  /* Movimiento (curvas del Motor; duraciones de la guía «dónde aplicar anime.js») */
  --gc-ease: var(--ease, cubic-bezier(.22, .61, .36, 1));
  --gc-ease-entrada: cubic-bezier(.16, 1, .3, 1);
  --gc-ease-salida: cubic-bezier(.55, 0, 1, .45);
  --gc-ease-resorte: cubic-bezier(.34, 1.56, .64, 1);
  --gc-d-micro: .15s;
  --gc-d-estado: .25s;
  --gc-d-panel: .35s;
  --gc-d-entrada: .7s;
}
/* Páginas con las áreas en la cabecera (portal y páginas de espera): una fila de 68 px; bajo 1280 px, dos filas
   (60 px + riel de 48 px con el borde). html.con-areas pesa más que :root, así que gana al de 760 px. */
html.con-areas { --gc-cabecera: 68px; }
@media (max-width: 1279.98px) { html.con-areas { --gc-cabecera: 108px; } }

/* ═════════════════════════ 2 · TEMAS ═════════════════════════ */
html[data-tema="oscuro"] {
  color-scheme: dark;
  --gc-fondo: var(--gc-carbon-900);
  --gc-fondo-alto: var(--gc-carbon-850);
  --gc-sup: rgba(255, 255, 255, .032);
  --gc-sup-2: rgba(255, 255, 255, .055);
  --gc-sup-3: rgba(255, 255, 255, .085);
  --gc-sup-solida: var(--gc-carbon-800);
  --gc-cristal: rgba(17, 18, 20, .66);
  --gc-linea: rgba(255, 255, 255, .08);
  --gc-linea-2: rgba(255, 255, 255, .15);
  --gc-tinta: #F4F5F7;
  --gc-tinta-2: #B3B7BE;
  --gc-tinta-3: #858A93;
  --gc-acento: var(--gc-naranja);
  --gc-acento-tinta: var(--gc-naranja-claro);
  --gc-sobre-acento: var(--gc-carbon-900);
  --gc-puntos: rgba(255, 255, 255, .055);
  --gc-ruido: .05;
  --gc-sombra: 0 30px 60px -28px rgba(0, 0, 0, .75);
  --gc-brillo: rgba(241, 100, 0, .30);
  --gc-g: #FFFFFF;
  --gc-exito: #7CCB97;            --gc-exito-f: rgba(91, 156, 114, .16);
  --gc-alerta: #F0C169;           --gc-alerta-f: rgba(240, 180, 41, .13);
  --gc-info: var(--gc-hielo);     --gc-info-f: rgba(147, 213, 225, .12);
  --gc-marca: var(--gc-naranja-claro); --gc-marca-f: rgba(241, 100, 0, .16);
  --gc-categoria: #BCA6EA;        --gc-categoria-f: rgba(155, 124, 212, .16);
  --gc-neutro: var(--gc-tinta-3); --gc-neutro-f: rgba(255, 255, 255, .06);
  --gc-peligro: #FF8A85;          --gc-peligro-f: rgba(239, 56, 50, .14);   /* errores de la entrada (≈ 7:1) */
}

html[data-tema="claro"] {
  color-scheme: light;
  --gc-fondo: var(--gris-40, #F6F7F8);
  --gc-fondo-alto: #FFFFFF;
  --gc-sup: #FFFFFF;
  --gc-sup-2: var(--gris-30, #F7F8FA);
  --gc-sup-3: var(--gris-60, #F1F2F3);
  --gc-sup-solida: #FFFFFF;
  --gc-cristal: rgba(246, 247, 248, .74);
  --gc-linea: var(--gris-115, #E1E4E7);
  --gc-linea-2: var(--gris-180, #CFD2D6);
  --gc-tinta: #17181B;
  --gc-tinta-2: var(--gris-600, #4E4F54);
  --gc-tinta-3: var(--gris-500, #6B7280);
  --gc-acento: var(--gc-naranja);
  --gc-acento-tinta: var(--gc-naranja-legible);
  --gc-sobre-acento: #17181B;
  --gc-puntos: rgba(17, 18, 20, .07);
  --gc-ruido: .03;
  --gc-sombra: 0 26px 50px -26px rgba(31, 41, 55, .28);
  --gc-brillo: rgba(241, 100, 0, .20);
  --gc-g: var(--gc-gris-raton);
  --gc-exito: var(--verde-600, #1E7A3C);       --gc-exito-f: var(--verde-50, #EAF7EE);
  --gc-alerta: var(--ambar-750, #96650D);      --gc-alerta-f: var(--ambar-60, #FDF3E2);
  --gc-info: var(--azul-600, #2D4A97);         --gc-info-f: var(--azul-25, #F5F8FF);
  --gc-marca: var(--naranja-700, #C25200);     --gc-marca-f: var(--naranja-100, #FFF4ED);
  --gc-categoria: var(--morado-600, #6D4FAE);  --gc-categoria-f: var(--morado-50, #F7F4FC);
  --gc-neutro: var(--gris-500, #6B7280);       --gc-neutro-f: var(--gris-60, #F1F2F3);
  --gc-peligro: #B42318;                       --gc-peligro-f: #FDECEC;   /* ≈ 6:1 */
}

/* ═════════════════════════ 3 · BASE ═════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;          /* bloquear el scroll (buscador, presentación) no mueve el diseño */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--gc-cabecera) + 16px);   /* las anclas no quedan bajo la cabecera */
  background: var(--gc-fondo);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--gc-fondo);
  color: var(--gc-tinta);
  font-family: var(--gc-f-texto);
  font-size: 16px;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color var(--gc-d-panel) var(--gc-ease), color var(--gc-d-panel) var(--gc-ease);
}
::selection { background: var(--gc-naranja); color: var(--gc-carbon-900); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
b, strong { font-weight: 700; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gc-naranja); outline-offset: 3px; border-radius: 8px; }
html[data-tema="claro"] :focus-visible { outline-color: var(--gc-naranja-legible); }   /* #F16400 sobre el fondo claro da 2,98:1; el anillo necesita 3:1 */
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: fixed; left: 16px; top: -64px; z-index: 400;
  padding: 10px 16px; border-radius: var(--gc-r-pildora);
  background: var(--gc-naranja); color: var(--gc-carbon-900);
  font: 700 14px var(--gc-f-display); transition: top var(--gc-d-estado) var(--gc-ease);
}
.saltar:focus { top: 14px; }
.contenedor { width: 100%; max-width: var(--gc-ancho); margin: 0 auto; padding: 0 var(--gc-margen); }

/* scrollbar fina con el naranja del Motor */
* { scrollbar-width: thin; scrollbar-color: var(--gc-linea-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--gc-linea-2); border-radius: 10px; border: 3px solid var(--gc-fondo); }
::-webkit-scrollbar-thumb:hover { background: var(--gc-naranja); }

/* ═════════════════════════ 4 · FONDO VIVO ═════════════════════════ */
.fondo-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fondo-fx::before {               /* rejilla de puntos */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(var(--gc-puntos) 1px, transparent 1.3px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 25%, transparent 80%);
}
.fondo-fx::after {                /* grano */
  content: ""; position: absolute; inset: 0; opacity: var(--gc-ruido);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* Auras que respiran: @keyframes en el compositor (solo transform), sin Anime y sin filter.
   El pulso al cambiar de área (GC.pulsoFondo) anima la opacidad de la primera, así que no choca con el keyframe. */
.fondo-aura {
  position: absolute; width: 70vmax; height: 70vmax; right: -18vmax; top: -30vmax;
  background: radial-gradient(closest-side, var(--gc-brillo), transparent 72%);
  opacity: .55; filter: none; will-change: transform;
  animation: gc-aura 24s ease-in-out infinite alternate;
}
.fondo-aura--2 {                  /* la segunda, roja y abajo a la izquierda, con otro ritmo */
  right: auto; top: auto; left: -22vmax; bottom: -28vmax; width: 60vmax; height: 60vmax; opacity: 1;
  background: radial-gradient(closest-side, rgba(239, 56, 50, .16), transparent 72%);
  animation-name: gc-aura-2; animation-duration: 31s;
}
@keyframes gc-aura   { from { transform: translate3d(-4vmax, -2vmax, 0) scale(1); }   to { transform: translate3d(5vmax, 4vmax, 0) scale(1.14); } }
@keyframes gc-aura-2 { from { transform: translate3d(3vmax, 2vmax, 0) scale(1.08); }  to { transform: translate3d(-5vmax, -3vmax, 0) scale(.94); } }
.luz-cursor {
  position: fixed; left: 0; top: 0; z-index: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(241, 100, 0, .11), transparent 70%);
  transition: opacity .6s var(--gc-ease);
}
html[data-tema="claro"] .luz-cursor { background: radial-gradient(closest-side, rgba(241, 100, 0, .08), transparent 70%); }
.luz-cursor.activa { opacity: 1; }

.progreso {
  position: fixed; left: 0; top: 0; z-index: 80; height: 2px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--gc-naranja-claro), var(--gc-naranja) 60%, var(--gc-rojo));
  box-shadow: 0 0 12px var(--gc-brillo);
}

/* ═════════════════════════ 5 · TIPOGRAFÍA ═════════════════════════ */
.micro {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 12px/1 var(--gc-f-datos); letter-spacing: .2em; text-transform: uppercase;
  color: var(--gc-acento-tinta);
}
.micro::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .8; }
.micro--simple::before { display: none; }
.titulo-1 {
  font: 300 clamp(2.5rem, 1rem + 4.2vw, 4.4rem)/1.02 var(--gc-f-display);
  letter-spacing: -.04em;
}
.titulo-2 {
  font: 300 clamp(2rem, 1.15rem + 2.9vw, 3.7rem)/1.04 var(--gc-f-display);
  letter-spacing: -.035em;
}
.titulo-1 b, .titulo-2 b { font-weight: 800; }
.acento { color: var(--gc-acento); }
.parrafo { font-size: clamp(16px, .95rem + .25vw, 18.5px); line-height: 1.7; color: var(--gc-tinta-2); max-width: 38em; }
.parrafo b { color: var(--gc-tinta); font-weight: 600; }
.cifra { font-family: var(--gc-f-datos); font-variant-numeric: tabular-nums lining-nums; }
.emoji-txt { font-family: var(--gc-f-emoji); font-style: normal; }

/* ═════════════════════════ 6 · COMPONENTES BASE ═════════════════════════ */
/* Botones */
.boton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 24px; border-radius: var(--gc-r-pildora);
  font: 700 15px/1 var(--gc-f-display); letter-spacing: .01em; white-space: nowrap;
  transition: background-color var(--gc-d-estado) var(--gc-ease), border-color var(--gc-d-estado) var(--gc-ease),
              color var(--gc-d-estado) var(--gc-ease), box-shadow var(--gc-d-estado) var(--gc-ease);
}
.boton-primario {
  background: var(--gc-naranja); color: var(--gc-carbon-900);
  box-shadow: 0 10px 30px -10px var(--gc-brillo), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.boton-primario:hover { background: var(--gc-naranja-vivo); box-shadow: 0 14px 40px -10px rgba(241, 100, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .3); }
.boton-fantasma { border: 1px solid var(--gc-linea-2); color: var(--gc-tinta); background: var(--gc-sup); }
.boton-fantasma:hover { border-color: var(--gc-naranja); background: var(--gc-marca-f); }
.boton .flechita { transition: transform var(--gc-d-panel) var(--gc-ease); }
.boton:hover .flechita { transform: translateX(4px); }
.boton-chico { height: 40px; padding: 0 16px; font-size: 13.5px; }

kbd, .kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 6px; border: 1px solid var(--gc-linea-2); border-bottom-width: 2px;
  font: 500 11px/1 var(--gc-f-datos); letter-spacing: .02em; color: var(--gc-tinta-2); background: var(--gc-sup);
}

/* Distintivo de estado */
.estado {
  display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px;
  border-radius: var(--gc-r-pildora); white-space: nowrap;
  font: 500 10.5px/1 var(--gc-f-datos); letter-spacing: .1em; text-transform: uppercase;
  color: var(--t, var(--gc-neutro)); background: var(--f, var(--gc-neutro-f));
}
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.estado[data-tono="exito"] { --t: var(--gc-exito); --f: var(--gc-exito-f); }
.estado[data-tono="alerta"] { --t: var(--gc-alerta); --f: var(--gc-alerta-f); }
.estado[data-tono="info"] { --t: var(--gc-info); --f: var(--gc-info-f); }
.estado[data-tono="marca"] { --t: var(--gc-marca); --f: var(--gc-marca-f); }
.estado[data-tono="categoria"] { --t: var(--gc-categoria); --f: var(--gc-categoria-f); }
.estado[data-tono="neutro"] { --t: var(--gc-neutro); --f: var(--gc-neutro-f); }

/* Ficha de emoji: el ícono de cada solución */
.emoji {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 15px; border: 1px solid var(--gc-linea); background: var(--gc-sup-2);
  font: 24px/1 var(--gc-f-emoji);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.emoji img { width: 100%; height: 100%; border-radius: inherit; }
/* con foto (un módulo de una persona): la foto llena la ficha, recortada en cuadrado, y su borde la enmarca */
.emoji--foto { overflow: hidden; }
.emoji--foto img, .area-ficha.emoji--foto img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.emoji--chico { width: 34px; height: 34px; border-radius: 11px; font-size: 17px; }
.emoji--grande { width: 72px; height: 72px; border-radius: 22px; font-size: 36px; }

/* Kicker con punto vivo (sistema de diseño y Solución en desarrollo) */
.kicker {
  display: inline-flex; align-items: center; gap: 12px; height: 34px; padding: 0 14px 0 12px;
  border-radius: var(--gc-r-pildora); border: 1px solid var(--gc-linea); background: var(--gc-sup);
  font: 500 11.5px/1 var(--gc-f-datos); letter-spacing: .16em; text-transform: uppercase; color: var(--gc-tinta-2);
}
.kicker .sep { width: 1px; height: 12px; background: var(--gc-linea-2); }
.punto-vivo {
  position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--gc-naranja); flex: none;
}
.punto-vivo::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--gc-naranja);
  animation: latido 2.4s var(--gc-ease) infinite;
}
@keyframes latido { 0% { transform: scale(.5); opacity: .9; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

/* ═════════════════════════ 7 · CABECERA ═════════════════════════ */
.cabecera {
  position: sticky; top: 0; z-index: 60; height: var(--gc-cabecera);
  border-bottom: 1px solid transparent;
  transition: background-color var(--gc-d-panel) var(--gc-ease), border-color var(--gc-d-panel) var(--gc-ease);
}
.cabecera.con-fondo {
  background: var(--gc-cristal); border-bottom-color: var(--gc-linea);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
}
.cabecera-in { height: 100%; max-width: var(--gc-ancho-cabecera); display: flex; align-items: center; gap: 28px; }
.logo { display: inline-flex; align-items: center; gap: 2px; color: var(--gc-tinta); flex: none; border-radius: 12px; }
.logo-simbolo { width: 46px; height: 46px; color: var(--gc-g); margin-left: -6px; }
.logo-texto { display: inline-flex; align-items: center; margin-left: -2px; font: 700 15px/1 var(--gc-f-display); letter-spacing: .12em; }   /* aire entre la punta de la órbita y la palabra */
.logo-texto i { display: inline-block; width: 9px; height: 3px; border-radius: 2px; background: var(--gc-naranja); margin: 0 6px 0 0; }
.logo-texto b, .entrar-palabra b { color: var(--gc-naranja); font-weight: inherit; }   /* «.DEV» de GCORP.DEV */
.sim-satelite, .sim-satelite + circle { transform-box: fill-box; transform-origin: center; }   /* pulso de marca: escala desde su centro */
.nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }   /* navegación interna del sistema de diseño */
.nav a {
  position: relative; padding: 8px 14px; border-radius: var(--gc-r-pildora);
  font: 500 14px/1 var(--gc-f-display); color: var(--gc-tinta-2);
  transition: color var(--gc-d-estado) var(--gc-ease), background-color var(--gc-d-estado) var(--gc-ease);
}
.nav a:hover { color: var(--gc-tinta); background: var(--gc-sup-2); }
.acciones { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.buscar-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 14px;
  border-radius: var(--gc-r-pildora); border: 1px solid var(--gc-linea); background: var(--gc-sup);
  font: 500 13.5px/1 var(--gc-f-display); color: var(--gc-tinta-3);
  transition: border-color var(--gc-d-estado) var(--gc-ease), color var(--gc-d-estado) var(--gc-ease);
}
.buscar-btn:hover { border-color: var(--gc-linea-2); color: var(--gc-tinta); }
.buscar-btn svg, .icono-btn svg { width: 18px; height: 18px; }
.buscar-btn .buscar-txt { min-width: 110px; text-align: left; }
.icono-btn {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--gc-linea); background: var(--gc-sup); color: var(--gc-tinta-2);
  transition: border-color var(--gc-d-estado) var(--gc-ease), color var(--gc-d-estado) var(--gc-ease);
}
.icono-btn:hover { color: var(--gc-tinta); border-color: var(--gc-linea-2); }
.presentar-btn {                  /* círculo de 40 px junto a Buscar y Tema; conserva el borde y el tinte naranja */
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--gc-naranja); color: var(--gc-acento-tinta); background: var(--gc-marca-f);
  transition: background-color var(--gc-d-estado) var(--gc-ease), border-color var(--gc-d-estado) var(--gc-ease),
              color var(--gc-d-estado) var(--gc-ease);
}
.presentar-btn:hover { background: var(--gc-naranja); border-color: var(--gc-naranja); color: var(--gc-carbon-900); }
.presentar-btn svg { width: 15px; height: 15px; }   /* bajo 760 px se oculta (§17b) */
.tema-btn .sol { display: none; }
html[data-tema="claro"] .tema-btn .sol { display: block; }
html[data-tema="claro"] .tema-btn .luna { display: none; }

/* Ficha del usuario (iniciales o silueta del invitado) y su menú: saludo, área y salida */
.acciones { position: relative; }
.usuario-btn { flex: none; }
.usuario-btn:not(.usuario-btn--invitado) { background: var(--gc-marca-f); border-color: rgba(241, 100, 0, .45); color: var(--gc-tinta); }
.usuario-btn:not(.usuario-btn--invitado):hover { border-color: var(--gc-naranja); }
.usuario-iniciales { font: 700 12.5px/1 var(--gc-f-display); letter-spacing: .04em; }
.usuario-btn[aria-expanded="true"]::after { display: none; }   /* sin etiqueta mientras el menú está abierto */
.usuario-menu {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 70; width: 268px; padding: 18px;
  border-radius: 18px; border: 1px solid var(--gc-linea-2); background: var(--gc-sup-solida);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .7);
}
.usuario-menu-saludo { font: 300 19px/1.25 var(--gc-f-display); letter-spacing: -.01em; color: var(--gc-tinta); }
.usuario-menu-saludo b { font-weight: 800; }
.usuario-menu-nombre { margin-top: 10px; font: 700 14px/1.3 var(--gc-f-display); color: var(--gc-tinta); }
.usuario-menu-detalle { margin-top: 4px; font: 500 12px/1.45 var(--gc-f-datos); letter-spacing: .03em; color: var(--gc-tinta-2); }
.usuario-menu .boton { width: 100%; margin-top: 16px; gap: 8px; }
.usuario-menu .boton svg { width: 16px; height: 16px; }

/* Etiquetas de los botones ícono: solo con un puntero que pasa por encima (en táctil sobran).
   Mismo texto que el aria-label; en Mac, iniciarPaleta cambia «Ctrl K» por «⌘ K». */
@media (hover: hover) {
  [data-tip] { position: relative; }
  [data-tip]::after {
    content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 10px); z-index: 2;
    padding: 7px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none;
    background: var(--gc-tinta); color: var(--gc-fondo); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5);
    font: 500 11.5px/1 var(--gc-f-datos); letter-spacing: .04em;
    opacity: 0; transform: translate(-50%, 4px);
    transition: opacity .2s var(--gc-ease), transform .2s var(--gc-ease);
  }
  [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
}

/* Cabecera con áreas (portal y Solución en desarrollo): logo · áreas · íconos. Las áreas son el filtro
   (radiogroup en el portal, enlaces en Solución en desarrollo) y el borde inferior se ve siempre: sobre él corre
   la «oruga» del área activa. Con scroll se suma el cristal de .con-fondo. */
.cabecera--areas { border-bottom-color: var(--gc-linea); }
.cabecera--areas .cabecera-in {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "logo chips acciones"; align-items: center; gap: 0 24px;
}
.cabecera--areas .logo { grid-area: logo; justify-self: start; }
.cabecera--areas .chips { grid-area: chips; }
.cabecera--areas .acciones { grid-area: acciones; margin-left: 0; }
.chips {                          /* centradas mientras caben; si no, arrancan a la izquierda y el riel se desplaza */
  position: relative; display: flex; align-items: stretch; justify-content: safe center; gap: 2px;
  height: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chips[data-desborda] {           /* más áreas que ancho (GC.vigilarDesborde): 24 px de desvanecido en cada borde */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.chip {                           /* alto completo de la fila: objetivo táctil de 44 px o más */
  position: relative; display: inline-flex; align-items: center; gap: 5px; flex: none;
  height: 100%; padding: 0 4px 0 8px;
  font: 700 13px/1 var(--gc-f-display); color: var(--gc-tinta-2); white-space: nowrap;
  transition: color var(--gc-d-estado) var(--gc-ease);
}
.chip::after {                    /* al pasar crece una línea de 1 px donde iría la oruga */
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 1px; background: var(--gc-tinta-3);
  transform: scaleX(0); transition: transform var(--gc-d-estado) var(--gc-ease);
}
.chip:hover { color: var(--gc-tinta); }
.chip:hover::after { transform: scaleX(1); }
.chip:focus-visible { outline-offset: -8px; }   /* el anillo queda dentro: el riel no lo recorta */
.chip[aria-checked="true"], .chip[aria-current="true"] { color: var(--gc-tinta); }
.chip[aria-checked="true"]::after, .chip[aria-current="true"]::after { display: none; }
.chip-n {
  display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--gc-r-pildora);
  background: var(--gc-sup-3); font: 500 10.5px/1 var(--gc-f-datos); font-variant-numeric: tabular-nums;
  transition: background-color var(--gc-d-estado) var(--gc-ease), color var(--gc-d-estado) var(--gc-ease);
}
.chip[aria-checked="true"] .chip-n, .chip[aria-current="true"] .chip-n {
  background: var(--gc-naranja); color: var(--gc-carbon-900);   /* ≈ 5,9:1 */
}
.chips-indicador {                /* «oruga»: 100 px de base; GC.moverIndicador la lleva solo con translateX + scaleX */
  position: absolute; z-index: 1; left: 0; bottom: 0; width: 100px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gc-naranja-claro), var(--gc-naranja) 60%, var(--gc-rojo));
  box-shadow: 0 0 12px var(--gc-brillo);
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}

/* Hasta 1439 px el aire entre logo, pestañas e íconos baja de 24 a 16 px. Si aun así las pestañas no caben en una
   fila (cada módulo nuevo suma una), GC.vigilarDesborde ciñe la cabecera por pasos antes de que el riel se deslice
   (data-cenida en .cabecera--areas, solo lo necesario para el ancho de cada pantalla): 1 · letra de 12,5 px;
   2 · de 12 px y el botón Presentar se guarda (sigue en la tecla P y en Ctrl K); 3 · además el logo, solo el símbolo */
@media (max-width: 1439.98px) { .cabecera--areas .cabecera-in { column-gap: 16px; } }
.cabecera--areas[data-cenida] .chip { font-size: 12.5px; }
.cabecera--areas[data-cenida="2"] .chip, .cabecera--areas[data-cenida="3"] .chip { font-size: 12px; }
.cabecera--areas[data-cenida="2"] .presentar-btn, .cabecera--areas[data-cenida="3"] .presentar-btn { display: none; }
.cabecera--areas[data-cenida="3"] .logo-texto { display: none; }
/* Bajo 1280 px: dos filas, «logo acciones» de 60 px y el riel de áreas (47 px + 1 de borde = 108).
   El riel va a sangre y se desplaza dentro de sí mismo con imán al centro. Al bajar, la cabecera se recoge
   (.recogida, la pone iniciarCabecera) y queda pegado solo el riel; vuelve entera si el foco va al logo o a los íconos. */
@media (max-width: 1279.98px) {
  .cabecera--areas {
    transition: background-color var(--gc-d-panel) var(--gc-ease), border-color var(--gc-d-panel) var(--gc-ease),
                transform var(--gc-d-panel) var(--gc-ease);
  }
  .cabecera--areas .cabecera-in {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 60px minmax(0, 1fr);
    grid-template-areas: "logo acciones" "chips chips";
  }
  .cabecera--areas .logo-texto { display: inline-flex; }
  .cabecera--areas .chips {
    margin-inline: calc(-1 * var(--gc-margen)); padding-inline: var(--gc-margen);
    scroll-snap-type: x proximity;
  }
  .cabecera--areas .chip { scroll-snap-align: center; }
  .cabecera--areas.recogida { transform: translateY(-60px); }
  .cabecera--areas.recogida:has(.logo:focus-visible, .acciones :focus-visible) { transform: none; }
}

/* Pestaña CLICKS (todas las cabeceras): lleva a clics.html, el uso de G-COMMERCE; en esa página va encendida
   (aria-current). Bajo 760 px queda solo el ícono, con su nombre para el lector. */
.pestana-clicks {
  display: inline-flex; align-items: center; gap: 7px; flex: none; height: 40px; padding: 0 14px 0 11px;
  border-radius: var(--gc-r-pildora); border: 1px solid var(--gc-linea); background: var(--gc-sup);
  font: 700 12px/1 var(--gc-f-display); letter-spacing: .1em; color: var(--gc-tinta-2);
  transition: color var(--gc-d-estado) var(--gc-ease), border-color var(--gc-d-estado) var(--gc-ease),
              background-color var(--gc-d-estado) var(--gc-ease);
}
.pestana-clicks svg { flex: none; width: 17px; height: 17px; }
.pestana-clicks:hover { color: var(--gc-tinta); border-color: var(--gc-linea-2); }
.pestana-clicks[aria-current="page"] { color: var(--gc-acento-tinta); border-color: var(--gc-naranja); background: var(--gc-marca-f); }
@media (max-width: 760px) {
  .pestana-clicks { width: 40px; padding: 0; justify-content: center; }
  .pestana-clicks span { display: none; }
}

/* ═════════════════════════ 8 · INTRO (una vez por sesión) ═════════════════════════
   El fondo vive en .intro-velo: al final se desvanece mientras el símbolo vuela al logo de la cabecera,
   que se mantiene oculto hasta que llega. */
.intro { display: none; }
html.gc-intro .intro {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center;
  color: #FFFFFF;
  animation: gc-intro-respaldo .45s ease 2.6s forwards;   /* si el JS no llega, se retira solo */
}
html.gc-intro body { overflow: hidden; }
html.gc-intro .cabecera .logo-simbolo { opacity: 0; animation: gc-respaldo 1ms linear 2.6s forwards; }
@keyframes gc-intro-respaldo { to { opacity: 0; visibility: hidden; } }
.intro-velo { position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 45%, var(--gc-carbon-800), var(--gc-carbon-950)); }
.intro-centro { position: relative; display: grid; justify-items: center; gap: 26px; }
.intro-simbolo { width: min(46vw, 230px); height: auto; overflow: visible; }
.intro-simbolo .i-sat { transform-box: fill-box; transform-origin: center; }
.intro-palabra {
  display: flex; align-items: center; font: 700 15px/1 var(--gc-f-display); letter-spacing: .42em;
  padding-left: .42em;
}
.intro-palabra b { color: var(--gc-naranja); font-weight: 700; }
.intro-palabra i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; background: var(--gc-naranja); margin-right: .42em; }
.intro-saltar { position: absolute; right: 24px; bottom: 24px; font: 500 11px var(--gc-f-datos); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .45); padding: 8px 12px; }
.intro-saltar:hover { color: #FFFFFF; }

/* ═════════════════════════ 10 · PORTAL (soluciones) ═════════════════════════
   Debajo de la cabecera solo hay una línea (área + conteo) y la rejilla única. Cada tarjeta va dentro de
   una .celda: la entrada, el revelado y createLayout animan la celda; el hover, :active y la vista previa
   quedan en la tarjeta, solo por CSS. Así ningún transform en línea vuelve a matar el hover. */
.portal { max-width: var(--gc-ancho-portal); padding-top: clamp(20px, 3.5vh, 36px); padding-bottom: clamp(48px, 8vh, 96px); }
/* Saludo inicial («Buenos días, Ana 👋»): llega con la sesión; su alto está reservado para que nada salte */
.portal-saludo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 26px; margin-bottom: 4px;
  font: 400 clamp(15px, .9rem + .3vw, 18px)/1.3 var(--gc-f-texto); color: var(--gc-tinta-2);
}
.portal-saludo-txt b { color: var(--gc-tinta); font-weight: 700; }
.portal-saludo .mano { font-size: 1.12em; vertical-align: 0; margin-left: -4px; }
.portal-saludo-enlace {
  font: 600 13px/1 var(--gc-f-display); color: var(--gc-acento-tinta); padding: 6px 0;
  border-bottom: 1px solid transparent; transition: border-color var(--gc-d-estado) var(--gc-ease);
}
.portal-saludo-enlace:hover { border-bottom-color: currentColor; }
.portal-titulo {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: clamp(14px, 2.4vh, 24px);
  font: 300 clamp(24px, 1rem + 1.4vw, 40px)/1.1 var(--gc-f-display); letter-spacing: -.02em;
}
.portal-titulo b { font-weight: 800; }
.portal-area { display: inline-grid; overflow: hidden; padding-bottom: .08em; }   /* el texto que sale y el que entra, apilados */
.portal-area > * { grid-area: 1 / 1; }
.portal-n { font: 300 .9em/1 var(--gc-f-datos); color: var(--gc-acento-tinta); font-variant-numeric: tabular-nums; }

/* ═════════════════════════ 10b · MÓDULOS (carrusel) ═════════════════════════
   «Todos los módulos» (pestaña «Todas»): un carrusel de tarjetas grandes, una por módulo, con la luz y la órbita
   de su color (--acento: tonos de serie del Motor), su ficha, su nombre, su número de soluciones y los emojis de
   ellas. Se ven --por-vista (4 en escritorio) y las flechas ‹ › lo giran en círculo (inicio.js). Pulsar una
   tarjeta abre la pestaña del módulo: ahí se ven solo sus soluciones (.portal[data-vista]) y «← Todos los
   módulos» vuelve. Aquí no hay clics: esos viven en la pestaña CLICKS. */
.portal[data-vista="modulos"] .catalogo, .portal[data-vista="modulos"] .vacio { display: none; }
.portal[data-vista="soluciones"] .areas { display: none; }
.portal-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: clamp(16px, 2.6vh, 24px); }
.portal-cab .portal-titulo { margin-bottom: 0; }
.portal-todos {                   /* volver: «← Todos los módulos» */
  align-self: center; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 12px;
  border-radius: var(--gc-r-pildora); border: 1px solid var(--gc-linea-2); background: var(--gc-sup);
  font: 600 12.5px/1 var(--gc-f-display); color: var(--gc-tinta-2);
  transition: color var(--gc-d-estado) var(--gc-ease), border-color var(--gc-d-estado) var(--gc-ease);
}
.portal-todos::before { content: "←"; font-size: 14px; color: var(--gc-acento-tinta); transition: transform var(--gc-d-estado) var(--gc-ease); }
.portal-todos:hover { color: var(--gc-tinta); border-color: var(--gc-naranja); }
.portal-todos:hover::before { transform: translateX(-3px); }

.areas { --por-vista: 4; --hueco: 18px; position: relative; }
.areas-ventana {                  /* recorta las tarjetas de fuera; el relleno deja aire al levantarse y a la sombra */
  overflow: hidden; margin: -16px -8px -30px; padding: 16px 8px 30px; touch-action: pan-y;
}
.areas-pista { display: flex; gap: var(--hueco); }
.area {
  --acento: var(--serie-1);
  --tono: var(--acento);
  flex: 0 0 calc((100% - (var(--por-vista) - 1) * var(--hueco)) / var(--por-vista));
  position: relative; isolation: isolate; min-width: 0; container-type: inline-size;   /* las fichas se miden con su ancho (cqw) */
  display: flex; flex-direction: column; align-items: center; text-align: center;
  /* alta: ocupa casi todo el alto libre de la pantalla (entre 440 y 620 px) */
  min-height: clamp(440px, calc(100vh - 300px), 620px); min-height: clamp(440px, calc(100svh - 300px), 620px);
  padding: 24px 22px 22px; border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--tono) 26%, var(--gc-linea));
  background: linear-gradient(180deg, color-mix(in srgb, var(--tono) 9%, var(--gc-sup)), var(--gc-sup) 58%);
  color: var(--gc-tinta);
  transition: transform var(--gc-d-panel) var(--gc-ease), border-color var(--gc-d-panel) var(--gc-ease),
              box-shadow var(--gc-d-panel) var(--gc-ease);
}
html[data-tema="oscuro"] .area { --tono: color-mix(in srgb, var(--acento) 72%, #FFFFFF); }   /* el tono se aclara sobre el carbón */
.area::before {                   /* filo de color arriba */
  content: ""; position: absolute; left: 22%; right: 22%; top: 0; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--tono), transparent); opacity: .85;
  transition: left var(--gc-d-panel) var(--gc-ease), right var(--gc-d-panel) var(--gc-ease);
}
.area-cabeza {                    /* ficha + nombre: toman el alto que sobra y se centran en él (sin hueco a media tarjeta) */
  position: relative; flex: 1 0 auto; width: 100%; padding: 12px 0 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.area-luz {                       /* luz de su color centrada en la ficha (50 % − 30 px: medio nombre, su aire y el relleno); crece al pasar.
                                     Cubre el ancho y la parte de arriba de la tarjeta, con sus esquinas redondeadas */
  position: absolute; inset: -24px -22px 0; z-index: -1; border-radius: 25px 25px 0 0; pointer-events: none;
  background: radial-gradient(62% 48% at 50% calc(50% - 30px), color-mix(in srgb, var(--tono) 32%, transparent), transparent 75%);
  transform-origin: 50% calc(50% - 30px);
  opacity: .8; transition: opacity var(--gc-d-panel) var(--gc-ease), transform var(--gc-d-panel) var(--gc-ease);
}
.area:hover, .area:has(.area-abrir:focus-visible) {
  transform: translateY(-6px); border-color: color-mix(in srgb, var(--tono) 60%, transparent);
  box-shadow: 0 34px 60px -34px color-mix(in srgb, var(--tono) 75%, transparent), var(--gc-sombra);
}
.area:hover::before, .area:has(.area-abrir:focus-visible)::before { left: 8%; right: 8%; }
.area:hover .area-luz, .area:has(.area-abrir:focus-visible) .area-luz { opacity: 1; transform: scale(1.12); }
/* órbita del logo G-COMMERCE alrededor de la ficha, con su satélite girando (centrada en la ficha) */
.area-emblema { position: relative; display: grid; place-items: center; }
.area-orbita {
  position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px;
  transform: rotate(-18deg); pointer-events: none;
}
.area-orbita svg { position: absolute; inset: 0; overflow: visible; }
.area-orbita ellipse { fill: none; stroke: var(--tono); stroke-width: 1.4; opacity: .5; }
.area-sat {
  position: absolute; left: 0; top: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: color-mix(in srgb, var(--tono) 55%, #FFFFFF); box-shadow: 0 0 14px 2px var(--tono);
  offset-path: path("M 4 100 A 96 31 0 1 1 196 100 A 96 31 0 1 1 4 100"); offset-rotate: 0deg;
  animation: gc-orbita-area 10s linear infinite; animation-delay: calc(var(--i, 0) * -1.7s);
}
@keyframes gc-orbita-area { to { offset-distance: 100%; } }
.area-ficha {
  position: relative; width: 104px; height: 104px; border-radius: 34px; font-size: 52px;
  background: color-mix(in srgb, var(--tono) 16%, var(--gc-sup-2));
  border: 1px solid color-mix(in srgb, var(--tono) 38%, transparent);
  box-shadow: 0 22px 40px -22px color-mix(in srgb, var(--tono) 85%, transparent);
  transition: transform var(--gc-d-panel) var(--gc-ease-resorte);
}
.area-ficha img { width: 76%; height: 76%; }
.area:hover .area-ficha, .area:has(.area-abrir:focus-visible) .area-ficha { transform: translateY(-4px) rotate(-6deg) scale(1.07); }
.area-nombre { margin-top: 40px; max-width: 100%; font: 800 clamp(19px, .95rem + .55vw, 25px)/1.15 var(--gc-f-display); letter-spacing: -.015em; }
/* sus soluciones: cuadrícula de 6 columnas × 4 filas (24 lugares, máximo 24 por módulo). Las fichas se unen: 1×1,
   2×2 o 3×3 lugares, con el reparto que más llena o con los tamaños del administrador (inicio.js → ladosDe y
   ubicar; cada <li> trae su grid-area). Un lugar mide 1/6 del ancho de la tarjeta (cqw) y es cuadrado. El dibujo
   crece con la ficha: emoji, y desde 2×2 su nombre. Quedan por encima del botón «Ver módulo», que se estira bajo
   toda la tarjeta. */
.area-soluciones {
  --hueco-sol: 6px;
  --celda: calc((100cqw - 5 * var(--hueco-sol)) / 6);
  position: relative; z-index: 2; width: 100%; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(4, var(--celda));
  gap: var(--hueco-sol);
}
.area-soluciones li { display: grid; min-width: 0; min-height: 0; }
.area-soluciones li > .area-sol { width: 100%; height: 100%; }   /* enlace o, en el modo edición, botón: llena su lugar */
.area-sol {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 0; padding: 4px; border-radius: 12px; text-align: center;
  border: 1px solid var(--gc-linea); background: var(--gc-sup-2); color: var(--gc-tinta);
  font-size: calc(var(--celda) * .5);
  transition: transform var(--gc-d-estado) var(--gc-ease-resorte), background-color var(--gc-d-estado) var(--gc-ease),
              border-color var(--gc-d-estado) var(--gc-ease), box-shadow var(--gc-d-estado) var(--gc-ease);
}
.area-sol-emoji { font: 1em/1 var(--gc-f-emoji); }
/* todo lo de adentro se mide en lugares (--celda): la ficha crece y su dibujo crece con ella, en proporción */
.area-sol[data-lado="2"] {
  gap: calc(var(--celda) * .1); padding: calc(var(--celda) * .16); border-radius: 16px; font-size: calc(var(--celda) * .62);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tono) 12%, var(--gc-sup-2)), var(--gc-sup-2) 80%);
}
.area-sol[data-lado="3"] {
  gap: calc(var(--celda) * .13); padding: calc(var(--celda) * .24); border-radius: 20px; font-size: calc(var(--celda) * .95);
  border-color: color-mix(in srgb, var(--tono) 30%, var(--gc-linea));
  background: linear-gradient(160deg, color-mix(in srgb, var(--tono) 20%, var(--gc-sup-2)), var(--gc-sup-2) 78%);
}
.area-sol-nombre {                /* hasta 3 líneas, partidas por sílabas (inicio.js → silabear) */
  max-width: 100%; overflow: hidden; overflow-wrap: anywhere; text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  font: 700 max(9px, calc(var(--celda) * .26))/1.15 var(--gc-f-display); letter-spacing: -.01em;
}
.area-sol[data-lado="3"] .area-sol-nombre { font-size: max(10.5px, calc(var(--celda) * .31)); }
.area-sol .estado {               /* su estado, en 3×3: el distintivo del catálogo, en chico */
  flex: none; max-width: 100%; height: calc(var(--celda) * .46); padding: 0 calc(var(--celda) * .18); gap: 5px;
  overflow: hidden; text-overflow: ellipsis; font-size: max(8.5px, calc(var(--celda) * .24)); letter-spacing: .01em; text-transform: none;
}
.area-sol .estado::before { flex: none; }
@container (max-width: 250px) { .area-sol .estado { display: none; } }   /* tarjetas angostas: la ficha no da para el distintivo */
.area-sol:hover, .area-sol:focus-visible {
  transform: translateY(-3px) scale(1.08); background: color-mix(in srgb, var(--tono) 20%, var(--gc-sup-2));
  border-color: color-mix(in srgb, var(--tono) 65%, transparent);
  box-shadow: 0 14px 24px -14px color-mix(in srgb, var(--tono) 85%, transparent);
}
.area-sol[data-lado="2"]:is(:hover, :focus-visible) { transform: translateY(-3px) scale(1.04); background: color-mix(in srgb, var(--tono) 24%, var(--gc-sup-2)); }
.area-sol[data-lado="3"]:is(:hover, :focus-visible) { transform: translateY(-4px) scale(1.025); background: color-mix(in srgb, var(--tono) 30%, var(--gc-sup-2)); }
.area-sol[data-lado="2"]:hover .area-sol-emoji, .area-sol[data-lado="3"]:hover .area-sol-emoji { transform: rotate(-8deg) scale(1.08); }
.area-sol-emoji { transition: transform var(--gc-d-panel) var(--gc-ease-resorte); }
.area-sol:focus-visible { outline-offset: 2px; }
.area-sol:active { transform: translateY(-1px) scale(1.02); }
.area-sol--mas { font: 700 14px/1 var(--gc-f-display); }
.area-sol-estado {                /* su estado (nuevo, pendiente…), en 1×1 y 2×2: un punto del color del distintivo */
  position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--t, var(--gc-neutro));
  box-shadow: 0 0 0 2px var(--gc-sup-2);
}
.area-sol[data-lado="2"] .area-sol-estado { top: 8px; right: 8px; width: 8px; height: 8px; }
.area-sol-estado[data-tono="exito"] { --t: var(--gc-exito); }
.area-sol-estado[data-tono="alerta"] { --t: var(--gc-alerta); }
.area-sol-estado[data-tono="info"] { --t: var(--gc-info); }
.area-sol-estado[data-tono="marca"] { --t: var(--gc-marca); }
.area-sol-estado[data-tono="categoria"] { --t: var(--gc-categoria); }
.area-sol-libre { border-radius: 12px; border: 1px dashed var(--gc-linea-2); opacity: .5; }
/* el nombre de una ficha de 1×1 va arriba (el de [data-tip] va abajo y el carrusel lo recortaría); en la primera y
   la última columna se alinea a su borde, para no salirse de la ventana del carrusel */
.area-sol[data-tip]::after { top: auto; bottom: calc(100% + 8px); transform: translate(-50%, -4px); z-index: 3; }
.area-sol[data-tip]:hover::after, .area-sol[data-tip]:focus-visible::after { transform: translate(-50%, 0); }
.area-sol[data-borde="izq"]::after { left: 0; transform: translate(0, -4px); }
.area-sol[data-borde="der"]::after { left: auto; right: 0; transform: translate(0, -4px); }
.area-sol[data-borde]:is(:hover, :focus-visible)::after { transform: translate(0, 0); }
/* «Ver módulo»: una barra de su color al pie, con la flecha en una pastilla que se estira al pasar. Su ::after
   cubre la tarjeta entera, así un clic fuera de las fichas también abre el módulo */
.area-abrir {
  margin-top: 16px; width: 100%; height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 7px 0 18px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--tono) 30%, var(--gc-linea));
  background: linear-gradient(90deg, color-mix(in srgb, var(--tono) 15%, var(--gc-sup-2)), color-mix(in srgb, var(--tono) 4%, var(--gc-sup-2)));
  font: 700 13.5px/1 var(--gc-f-display); letter-spacing: .02em; color: var(--gc-tinta);
  transition: background-color var(--gc-d-panel) var(--gc-ease), border-color var(--gc-d-panel) var(--gc-ease),
              box-shadow var(--gc-d-panel) var(--gc-ease);
}
.area-abrir::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 26px; }
.area-abrir-ir {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px;
  background: var(--tono); color: var(--gc-carbon-900);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--tono) 90%, transparent);
  transition: width var(--gc-d-panel) var(--gc-ease-resorte), background-color var(--gc-d-panel) var(--gc-ease);
}
html[data-tema="claro"] .area-abrir-ir { color: #FFFFFF; }
.area-abrir-ir svg { width: 20px; height: 20px; transition: transform var(--gc-d-panel) var(--gc-ease); }
.area:hover:not(:has(.area-sol:hover)) .area-abrir, .area-abrir:focus-visible {
  border-color: color-mix(in srgb, var(--tono) 65%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tono) 30%, var(--gc-sup-2)), color-mix(in srgb, var(--tono) 12%, var(--gc-sup-2)));
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--tono) 80%, transparent);
}
.area:hover:not(:has(.area-sol:hover)) .area-abrir-ir, .area-abrir:focus-visible .area-abrir-ir { width: 54px; }
.area:hover:not(:has(.area-sol:hover)) .area-abrir-ir svg, .area-abrir:focus-visible .area-abrir-ir svg { transform: translateX(4px); }
.area-abrir:focus-visible { outline-offset: 3px; }
/* flechas a los lados y puntos debajo: qué módulos están a la vista */
.areas-flecha {
  position: absolute; top: calc(50% - 40px); z-index: 3; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--gc-linea-2); background: var(--gc-sup-solida); color: var(--gc-tinta);
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .55);
  transition: background-color var(--gc-d-estado) var(--gc-ease), border-color var(--gc-d-estado) var(--gc-ease),
              color var(--gc-d-estado) var(--gc-ease), transform var(--gc-d-estado) var(--gc-ease);
}
.areas-flecha svg { width: 24px; height: 24px; }
.areas-flecha--ant { left: -27px; }
.areas-flecha--sig { right: -27px; }
.areas-flecha:hover { background: var(--gc-naranja); border-color: var(--gc-naranja); color: var(--gc-carbon-900); transform: scale(1.08); }
.areas-flecha:active { transform: scale(.94); }
.areas-puntos { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 22px; min-height: 10px; }
.areas-puntos i {
  --acento: var(--serie-1);
  display: block; width: 8px; height: 8px; border-radius: 6px; background: var(--gc-linea-2);
  transition: width var(--gc-d-panel) var(--gc-ease), background-color var(--gc-d-panel) var(--gc-ease);
}
.areas-puntos i.si { width: 24px; background: var(--acento); }
/* pantallas altas (900 px o más): la ficha y su órbita crecen para llenar el alto de la tarjeta */
@media (min-height: 860px) and (min-width: 1100px) {
  .area-ficha { width: 120px; height: 120px; border-radius: 38px; font-size: 60px; }
  .area-orbita { transform: rotate(-18deg) scale(1.15); }
  .area-nombre { margin-top: 46px; }
}
@media (max-width: 1099.98px) { .areas { --por-vista: 3; } }
@media (max-width: 819.98px) { .areas { --por-vista: 2; --hueco: 14px; } }
/* Teléfono: una tarjeta a la vista; las flechas bajan a los lados de los puntos */
@media (max-width: 560px) {
  .areas { --por-vista: 1; }
  .area { min-height: clamp(440px, calc(100vh - 330px), 540px); min-height: clamp(440px, calc(100svh - 330px), 540px); }
  .area:hover { transform: none; }
  .areas-flecha { top: auto; bottom: -15px; width: 44px; height: 44px; }
  .areas-flecha--ant { left: 0; }
  .areas-flecha--sig { right: 0; }
  .areas-puntos { min-height: 44px; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .area-sat { animation: none; offset-distance: 30%; }
}

/* ═════════════════════════ 10c · MODO EDICIÓN (solo el administrador) ═════════════════════════
   «Editar portal», junto al título, abre el modo edición: una barra naranja con el estado del guardado,
   «Restablecer» y «Listo»; todos los módulos a la vista, en filas (sin carrusel), los ocultos apagados y cada uno
   con su barra (← ojo Auto →) en lugar de «Ver módulo». Las fichas son botones: la elegida lleva su barra flotante
   (← 1×1 2×2 3×3 ojo →) y las que se ocultan quedan abajo, en «Ocultas», para volver a mostrarlas (inicio.js, 3c). */
.portal-editar { margin-left: auto; align-self: center; display: flex; align-items: center; }
.portal-editar-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px 0 12px;
  border-radius: var(--gc-r-pildora); border: 1px solid color-mix(in srgb, var(--gc-naranja) 45%, var(--gc-linea-2));
  background: color-mix(in srgb, var(--gc-naranja) 8%, var(--gc-sup)); color: var(--gc-tinta);
  font: 600 12.5px/1 var(--gc-f-display);
  transition: background-color var(--gc-d-estado) var(--gc-ease), border-color var(--gc-d-estado) var(--gc-ease);
}
.portal-editar-btn svg { width: 17px; height: 17px; color: var(--gc-acento-tinta); }
.portal-editar-btn:hover { border-color: var(--gc-naranja); background: color-mix(in srgb, var(--gc-naranja) 16%, var(--gc-sup)); }
.edicion-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 5px 5px 5px 16px;
  border-radius: 22px; border: 1px solid color-mix(in srgb, var(--gc-naranja) 60%, transparent);
  background: color-mix(in srgb, var(--gc-naranja) 11%, var(--gc-sup-solida));
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--gc-naranja) 70%, transparent);
}
.edicion-marca { display: inline-flex; align-items: center; gap: 8px; font: 700 12.5px/1 var(--gc-f-display); letter-spacing: .02em; color: var(--gc-acento-tinta); }
.edicion-marca i { width: 8px; height: 8px; border-radius: 50%; background: var(--gc-naranja); animation: gc-latido 1.6s var(--gc-ease) infinite; }
@keyframes gc-latido { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gc-naranja) 60%, transparent); } to { box-shadow: 0 0 0 9px transparent; } }
.edicion-estado { min-width: 11.5em; font: 500 12.5px/1.2 var(--gc-f-texto); color: var(--gc-tinta-2); }
.edicion-estado[data-estado="guardado"] { color: var(--gc-exito); }
.edicion-estado[data-estado="error"], .edicion-estado[data-estado="viejo"], .edicion-estado[data-estado="sesion"] { color: var(--gc-peligro); }
.edicion-estado button { font: 700 12.5px/1 var(--gc-f-display); color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.edicion-restablecer, .edicion-listo {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--gc-r-pildora);
  font: 600 12.5px/1 var(--gc-f-display);
  transition: background-color var(--gc-d-estado) var(--gc-ease), color var(--gc-d-estado) var(--gc-ease), border-color var(--gc-d-estado) var(--gc-ease);
}
.edicion-restablecer { border: 1px solid var(--gc-linea-2); background: var(--gc-sup); color: var(--gc-tinta-2); }
.edicion-restablecer:hover { color: var(--gc-tinta); border-color: var(--gc-tinta-3); }
.edicion-restablecer.confirmar { border-color: var(--gc-peligro); background: var(--gc-peligro-f); color: var(--gc-peligro); }
.edicion-listo { padding-left: 11px; background: var(--gc-naranja); color: var(--gc-carbon-900); }
.edicion-listo svg { width: 16px; height: 16px; }
.edicion-listo:hover { background: var(--gc-naranja-vivo); }
.edicion-ayuda { max-width: 900px; margin: -6px 0 clamp(18px, 2.8vh, 26px); font: 400 14px/1.5 var(--gc-f-texto); color: var(--gc-tinta-2); }
/* todos los módulos a la vista, en filas; sin flechas ni puntos; la tarjeta no sube al pasar (hay botones adentro) */
.portal.editando .areas-ventana { overflow: visible; }
.portal.editando .areas-pista { flex-wrap: wrap; row-gap: 26px; }
.portal.editando .areas-flecha, .portal.editando .areas-puntos { display: none; }
.portal.editando .area:hover { transform: none; }
/* un módulo oculto: apagado, con su borde punteado y la marca «Oculto»; su barra sigue encendida para mostrarlo */
.area[data-oculto] { border-style: dashed; }
.area-cabeza, .area .area-soluciones { transition: opacity var(--gc-d-panel) var(--gc-ease), filter var(--gc-d-panel) var(--gc-ease); }
.area[data-oculto] .area-cabeza, .area[data-oculto] .area-soluciones { opacity: .3; filter: grayscale(.85); }
.area-oculto-marca {
  display: none; position: absolute; top: 14px; right: 14px; z-index: 3; align-items: center; gap: 6px; height: 26px; padding: 0 11px 0 8px;
  border-radius: var(--gc-r-pildora); background: var(--gc-tinta); color: var(--gc-fondo);
  font: 700 10.5px/1 var(--gc-f-datos); letter-spacing: .1em; text-transform: uppercase;
}
.area-oculto-marca svg { width: 14px; height: 14px; }
.area[data-oculto] .area-oculto-marca { display: inline-flex; }
/* la barra del módulo: ← (moverlo) · ojo (ocultarlo o mostrarlo) · Auto (tamaños automáticos) · → */
.area-editar { position: relative; z-index: 2; width: 100%; margin-top: 16px; display: flex; align-items: center; gap: 8px; }
.area-editar button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--tono) 30%, var(--gc-linea)); background: var(--gc-sup-2); color: var(--gc-tinta);
  font: 600 12.5px/1 var(--gc-f-display);
  transition: background-color var(--gc-d-estado) var(--gc-ease), border-color var(--gc-d-estado) var(--gc-ease), opacity var(--gc-d-estado) var(--gc-ease);
}
.area-editar svg { width: 18px; height: 18px; flex: none; }
.area-editar-btn { flex: none; width: 42px; }
.area-editar-ver { flex: 1; min-width: 0; padding: 0 12px; }
.area-editar-auto { flex: none; padding: 0 12px; }
.area-editar button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--tono) 70%, transparent); background: color-mix(in srgb, var(--tono) 18%, var(--gc-sup-2)); }
.area-editar button:disabled { opacity: .3; cursor: default; }
.area[data-oculto] .area-editar-ver { border-color: var(--tono); background: color-mix(in srgb, var(--tono) 22%, var(--gc-sup-2)); }   /* «Mostrar» resalta */
/* sus soluciones ocultas: cada una, un botón para volver a mostrarla */
.area-ocultas { position: relative; z-index: 2; width: 100%; min-height: 34px; margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.area-ocultas-txt { margin-right: 4px; font: 600 10.5px/1 var(--gc-f-datos); letter-spacing: .14em; text-transform: uppercase; color: var(--gc-tinta-3); }
.area-ocultas-nada { font: 400 12.5px/1 var(--gc-f-texto); color: var(--gc-tinta-3); }
.area-oculta {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  border: 1px dashed var(--gc-linea-2); background: var(--gc-sup); font: 18px/1 var(--gc-f-emoji);
  filter: grayscale(.6); opacity: .8;
  transition: transform var(--gc-d-estado) var(--gc-ease-resorte), opacity var(--gc-d-estado) var(--gc-ease),
              filter var(--gc-d-estado) var(--gc-ease), border-color var(--gc-d-estado) var(--gc-ease);
}
.area-oculta:hover, .area-oculta:focus-visible { opacity: 1; filter: none; border-style: solid; border-color: var(--tono); transform: translateY(-2px); }
/* las fichas: se eligen (la elegida, con anillo naranja) */
.portal.editando .area-sol.elegida {
  outline: 2px solid var(--gc-naranja); outline-offset: 3px; border-color: var(--gc-naranja);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--gc-naranja) 20%, transparent), 0 14px 24px -14px color-mix(in srgb, var(--gc-naranja) 85%, transparent);
}
/* arrastrar: las fichas se toman con la mano; mientras se arrastra, un hueco naranja marca dónde caerá, los lugares
   libres se encienden un poco y «Ocultas» se marca si la ficha va a parar ahí. El fantasma sigue al puntero. */
.portal.editando .area-soluciones, .portal.editando .area-ocultas { user-select: none; -webkit-user-select: none; }
.portal.editando .area-sol, .portal.editando .area-oculta { cursor: grab; -webkit-touch-callout: none; }
html.arrastrando, html.arrastrando * { cursor: grabbing !important; }
.area-soluciones li.hueco {
  border-radius: 12px; outline: 2px dashed var(--gc-naranja); outline-offset: -1px;
  background: color-mix(in srgb, var(--gc-naranja) 12%, transparent);
}
.area-soluciones li.hueco > .area-sol { opacity: 0; }
.area.soltando .area-sol-libre { opacity: .9; border-color: color-mix(in srgb, var(--gc-naranja) 40%, var(--gc-linea-2)); }
.area-oculta.saliendo { opacity: .2; }
.area-ocultas { transition: background-color var(--gc-d-estado) var(--gc-ease); }
.area-ocultas.recibe { border-radius: 12px; outline: 2px dashed var(--gc-naranja); outline-offset: 4px; background: color-mix(in srgb, var(--gc-naranja) 10%, transparent); }
.ficha-fantasma { position: fixed; left: 0; top: 0; z-index: 58; pointer-events: none; will-change: transform; }
.ficha-fantasma > .area-sol {
  width: 100%; height: 100%; transition: none; border-color: var(--gc-naranja);
  background: color-mix(in srgb, var(--tono) 18%, var(--gc-sup-solida));
  box-shadow: 0 28px 44px -20px rgba(0, 0, 0, .7), 0 0 0 2px var(--gc-naranja);
}
/* una ficha que en la vista previa queda más chica muestra solo lo que cabe en su tamaño */
.area-sol[data-lado="1"] .area-sol-nombre, .area-sol:not([data-lado="3"]) > .estado { display: none; }
/* la barra de la ficha elegida: flota debajo de ella (o encima, si abajo no cabe) */
.ficha-barra {
  position: fixed; left: 0; top: 0; z-index: 55; display: flex; align-items: center; gap: 4px; padding: 5px;
  border-radius: 16px; border: 1px solid var(--gc-linea-2); background: var(--gc-sup-solida);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .65);
}
.ficha-barra-nombre { max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px 0 8px; font: 700 12.5px/1 var(--gc-f-display); }
.ficha-barra-btn {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--gc-tinta-2);
  transition: background-color var(--gc-d-estado) var(--gc-ease), color var(--gc-d-estado) var(--gc-ease), opacity var(--gc-d-estado) var(--gc-ease);
}
.ficha-barra-btn svg { width: 18px; height: 18px; }
.ficha-barra-btn:hover:not(:disabled) { background: var(--gc-sup-3); color: var(--gc-tinta); }
.ficha-barra-btn:disabled { opacity: .3; cursor: default; }
.ficha-barra-tam { display: flex; gap: 2px; padding: 3px; border-radius: 12px; border: 1px solid var(--gc-linea); background: var(--gc-sup-2); }
.ficha-barra-lado {
  height: 28px; min-width: 40px; padding: 0 7px; border-radius: 9px; color: var(--gc-tinta-2);
  font: 600 12px/1 var(--gc-f-datos); font-variant-numeric: tabular-nums;
  transition: background-color var(--gc-d-estado) var(--gc-ease), color var(--gc-d-estado) var(--gc-ease);
}
.ficha-barra-lado:hover { background: var(--gc-sup-3); color: var(--gc-tinta); }
.ficha-barra-lado[aria-pressed="true"] { background: var(--gc-naranja); color: var(--gc-carbon-900); }
@media (max-width: 560px) {
  .edicion-barra { padding-left: 12px; }
  .edicion-estado { min-width: 0; }
  .ficha-barra-nombre { max-width: 5.5em; }   /* en el teléfono la barra entera cabe en 360 px */
}

.catalogo { display: grid; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr)); gap: 16px; margin-top: 24px; }
.catalogo .rejilla { margin-top: 0; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); }   /* 5 columnas a 1366 y a 1920 */
.celda { display: grid; min-width: 0; }
.celda.oculta { display: none; }
.rejilla.is-animated .tarjeta { pointer-events: none; }   /* mientras createLayout reacomoda, el hover no tiembla */
.catalogo:not([data-area="todas"]) .tarjeta-area { display: none; }   /* el área en el pie solo hace falta en «Todas» */

/* Tarjeta de solución (compacta; es global para que estilo.html muestre el componente real) */
.tarjeta {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  padding: 18px 18px 14px; border-radius: var(--gc-r-panel); border: 1px solid var(--gc-linea);
  background: var(--gc-sup); color: var(--gc-tinta); overflow: hidden;
  transition: transform var(--gc-d-panel) var(--gc-ease), background-color var(--gc-d-panel) var(--gc-ease),
              border-color var(--gc-d-panel) var(--gc-ease), box-shadow var(--gc-d-panel) var(--gc-ease),
              opacity .24s var(--gc-ease);
}
.tarjeta::before {                /* borde degradado al pasar */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, var(--gc-naranja-claro), rgba(241, 100, 0, 0) 38%, rgba(239, 56, 50, 0) 62%, var(--gc-rojo));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--gc-d-panel) var(--gc-ease);
}
.tarjeta::after {                 /* foco de luz que sigue al cursor */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, -20%), rgba(241, 100, 0, .13), transparent 45%);
  opacity: 0; transition: opacity var(--gc-d-panel) var(--gc-ease);
}
.tarjeta:hover, .tarjeta:focus-visible {
  transform: translateY(-4px); background: var(--gc-sup-2); border-color: transparent; box-shadow: var(--gc-sombra);
}
.tarjeta:active { transform: translateY(-2px) scale(.985); }   /* pulsación */
.tarjeta:focus-visible { outline-offset: 4px; border-radius: var(--gc-r-panel); }
.tarjeta:hover::before, .tarjeta:hover::after, .tarjeta:focus-visible::before, .tarjeta:focus-visible::after { opacity: 1; }
.tarjeta.atenuada { opacity: .28; }   /* vista previa: al quedarse sobre un área se apagan las de otras */
.tarjeta-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tarjeta-top .emoji { width: 40px; height: 40px; border-radius: 13px; font-size: 20px; }
.tarjeta .emoji { transition: transform var(--gc-d-panel) var(--gc-ease-resorte); }
.tarjeta:hover .emoji { transform: translateY(-2px) rotate(-6deg) scale(1.06); }
.tarjeta-titulo { margin: 14px 0 6px; font: 700 16px/1.25 var(--gc-f-display); letter-spacing: -.01em; }
.tarjeta-desc {                   /* dos líneas como máximo; no crece: con line-clamp, lo que crece deja ver la tercera */
  flex: none; margin-bottom: 14px; font-size: 14px; line-height: 1.55; color: var(--gc-tinta-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.tarjeta-pie {                    /* margin-top: auto lo baja al fondo: los pies de una fila quedan alineados */
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--gc-linea);
}
.tarjeta-ref { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tarjeta-ref .codigo { flex: none; }
.codigo { font: 500 11px/1 var(--gc-f-datos); letter-spacing: .18em; color: var(--gc-tinta-3); font-variant-numeric: tabular-nums; }
.tarjeta-area {                   /* «· Comercial Goldery»; se corta con puntos suspensivos si no cabe */
  min-width: 0; font: 500 12px/1.3 var(--gc-f-texto); color: var(--gc-tinta-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tarjeta-area::before { content: "·"; margin-right: 8px; }
.flecha {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--gc-linea-2);
  color: var(--gc-tinta-2);
  transition: background-color var(--gc-d-panel) var(--gc-ease), border-color var(--gc-d-panel) var(--gc-ease),
              color var(--gc-d-panel) var(--gc-ease), transform var(--gc-d-panel) var(--gc-ease);
}
.flecha svg { width: 16px; height: 16px; }
.tarjeta:hover .flecha, .tarjeta:focus-visible .flecha {
  background: var(--gc-naranja); border-color: var(--gc-naranja); color: var(--gc-carbon-900); transform: rotate(-45deg);
}
.tarjeta--reservada { background: transparent; border-style: dashed; border-color: var(--gc-linea-2); }
.tarjeta--reservada .emoji { border-style: dashed; background: transparent; }

/* Teléfono (≤ 560 px): la tarjeta del portal pasa a fila (ficha, título, una línea y estado).
   Mide unos 66–96 px: caben unas 6 soluciones en 390 × 844. */
@media (max-width: 560px) {
  .catalogo .rejilla { gap: 8px; }
  .catalogo .tarjeta {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 2px;
    padding: 12px 14px; align-items: center;
  }
  .catalogo .tarjeta-top, .catalogo .tarjeta-pie { display: contents; }
  .catalogo .tarjeta-top .emoji { grid-column: 1; grid-row: 1 / span 3; }
  .catalogo .tarjeta-titulo { grid-column: 2; grid-row: 1; margin: 0; font-size: 15px; }
  .catalogo .tarjeta-desc { grid-column: 2; grid-row: 2; margin: 0; font-size: 13px; -webkit-line-clamp: 1; line-clamp: 1; }
  .catalogo .tarjeta .estado { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 4px; }
  .catalogo .tarjeta-ref, .catalogo .tarjeta .codigo, .catalogo .tarjeta-area, .catalogo .flecha { display: none; }
}

.vacio {
  display: grid; justify-items: center; gap: 12px; padding: 72px 16px; text-align: center; color: var(--gc-tinta-2);
}
.vacio .emoji { margin-bottom: 4px; }
.vacio h2 { font: 700 20px var(--gc-f-display); color: var(--gc-tinta); }

/* ═════════════════════════ 13 · PIE ═════════════════════════
   Solo lo usa el sistema de diseño (estilo.html): el portal y Solución en desarrollo no llevan pie. */
.pie { border-top: 1px solid var(--gc-linea); }
.respaldo { display: grid; justify-items: start; gap: 9px; margin-top: 28px; color: var(--gc-g); }
.respaldo small { font: 400 9.5px/1 var(--gc-f-datos); letter-spacing: .18em; text-transform: uppercase; color: var(--gc-tinta-3); }
.respaldo .respaldo-logo { height: 30px; width: auto; }
.respaldo-lema { font: 300 12px/1.2 var(--gc-f-datos); letter-spacing: .05em; color: var(--gc-tinta-2); }
.pie-base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 22px; padding-bottom: 28px; border-top: 1px solid var(--gc-linea);
  font: 400 12px/1.5 var(--gc-f-datos); letter-spacing: .04em; color: var(--gc-tinta-3);
}
.reloj { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }

/* ═════════════════════════ 14 · PALETA DE BÚSQUEDA (Ctrl K) ═════════════════════════ */
.paleta { position: fixed; inset: 0; z-index: 150; display: grid; justify-items: center; align-items: start; padding: min(14vh, 128px) 16px 16px; }
.paleta-velo { position: absolute; inset: 0; background: rgba(8, 9, 10, .58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[data-tema="claro"] .paleta-velo { background: rgba(23, 24, 27, .28); }
.paleta-caja {
  position: relative; display: flex; flex-direction: column; width: min(660px, 100%); max-height: min(72vh, 600px);
  border-radius: 22px; border: 1px solid var(--gc-linea-2); background: var(--gc-sup-solida); overflow: hidden;
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(241, 100, 0, .07);
}
.paleta-entrada { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 62px; border-bottom: 1px solid var(--gc-linea); color: var(--gc-tinta-3); }
.paleta-entrada svg { width: 20px; height: 20px; flex: none; }
.paleta-entrada input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 500 17px var(--gc-f-texto); color: var(--gc-tinta); }
.paleta-entrada input::placeholder { color: var(--gc-tinta-3); }
.paleta-lista { flex: 1; overflow-y: auto; padding: 6px 8px 10px; overscroll-behavior: contain; }
.paleta-grupo { padding: 14px 12px 6px; font: 500 10.5px/1 var(--gc-f-datos); letter-spacing: .18em; text-transform: uppercase; color: var(--gc-tinta-3); }
.paleta-item {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-radius: 14px; cursor: pointer;
  color: var(--gc-tinta);
}
.paleta-item[aria-selected="true"] { background: var(--gc-sup-3); }
.paleta-item[aria-selected="true"] .paleta-txt span, .paleta-item[aria-selected="true"] .codigo { color: var(--gc-tinta-2); }   /* sobre el fondo de selección, tinta-3 baja de 4,5:1 */
.paleta-item[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--gc-naranja); }
.paleta-item .emoji { width: 38px; height: 38px; border-radius: 12px; font-size: 19px; }
.paleta-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.paleta-txt strong { font: 700 14.5px/1.2 var(--gc-f-display); }
.paleta-txt span { font-size: 13px; line-height: 1.3; color: var(--gc-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paleta-item mark { background: none; color: var(--gc-acento-tinta); }
.paleta-item .codigo { flex: none; }
.paleta-nada { padding: 40px 16px; text-align: center; color: var(--gc-tinta-2); }
.paleta-pie { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 18px; border-top: 1px solid var(--gc-linea); font: 400 11.5px/1 var(--gc-f-datos); color: var(--gc-tinta-3); }
.paleta-pie span { display: inline-flex; align-items: center; gap: 6px; }

/* ═════════════════════════ 15 · TRANSICIÓN ENTRE PÁGINAS ═════════════════════════ */
.cortina { position: fixed; inset: 0; z-index: 450; pointer-events: none; }
.cortina-circulo {
  position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  transform: scale(0); background: var(--gc-naranja);
}
.cortina-circulo--2 { background: var(--gc-carbon-900); }
html.gc-llegada .cortina { background: var(--gc-carbon-900); animation: gc-intro-respaldo .4s ease 1.8s forwards; }

/* ═════════════════════════ 16 · SOLUCIÓN EN DESARROLLO ═════════════════════════
   Destino de todas las soluciones mientras no tengan su «enlace». A la izquierda, «Solución en desarrollo» con
   la firma de la marca (ligera + extra negra en naranja), la solución con su estado y su descripción, una barra
   de avance con rayas de obra y los botones; a la derecha, su emoji en una ficha dentro de tres órbitas del
   color de su módulo (--acento, como su tarjeta en la portada), con satélites. Abajo, las otras soluciones del
   módulo. Al fondo, una rejilla de plano que se mueve despacio. */
.dev {
  --acento: var(--gc-naranja);
  --tono: var(--acento);
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - var(--gc-cabecera)); padding: clamp(28px, 6vh, 72px) 0 clamp(48px, 8vh, 96px);
}
html[data-tema="oscuro"] .dev { --tono: color-mix(in srgb, var(--acento) 72%, #FFFFFF); }   /* el tono se aclara sobre el carbón */
.dev-fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.dev-rejilla {
  position: absolute; inset: -64px;
  background-image: linear-gradient(color-mix(in srgb, var(--tono) 13%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--tono) 13%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(55% 60% at 72% 42%, #000, transparent 78%);
  mask-image: radial-gradient(55% 60% at 72% 42%, #000, transparent 78%);
  animation: dev-plano 24s linear infinite;
}
@keyframes dev-plano { to { transform: translate(32px, 32px); } }
.dev-luz {
  position: absolute; right: -8%; top: -12%; width: 72%; height: 95%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tono) 20%, transparent), transparent);
}
.dev-heroe { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.dev-texto { display: grid; justify-items: start; }
.dev-migas {                       /* código · módulo; lleva a la pestaña del módulo */
  display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 15px 0 13px; border-radius: var(--gc-r-pildora);
  border: 1px solid color-mix(in srgb, var(--tono) 35%, var(--gc-linea)); background: var(--gc-cristal);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 600 11.5px/1 var(--gc-f-datos); letter-spacing: .14em; text-transform: uppercase; color: var(--gc-tinta-2);
  transition: border-color var(--gc-d-estado) var(--gc-ease), color var(--gc-d-estado) var(--gc-ease);
}
.dev-migas:hover { border-color: var(--tono); color: var(--gc-tinta); }
.dev-migas-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--tono); box-shadow: 0 0 10px var(--tono); }
.dev-sitio { color: var(--gc-tinta); }
.dev-migas-sep { color: var(--gc-tinta-3); }
.dev-titulo { margin-top: 24px; font: 300 clamp(2.6rem, 1rem + 4.8vw, 6rem)/.96 var(--gc-f-display); letter-spacing: -.045em; }
.dev-titulo-1 { display: block; }
.dev-titulo-2 { display: block; font-weight: 800; color: var(--gc-acento); }
.dev-solucion { display: flex; align-items: flex-start; gap: 16px; margin-top: 30px; max-width: 34rem; }
.dev-solucion-emoji {
  flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; font: 29px/1 var(--gc-f-emoji);
  background: color-mix(in srgb, var(--tono) 16%, var(--gc-sup-2)); border: 1px solid color-mix(in srgb, var(--tono) 35%, transparent);
}
.dev-solucion-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dev-solucion-nombre { font: 800 clamp(20px, .9rem + .9vw, 28px)/1.15 var(--gc-f-display); letter-spacing: -.02em; color: var(--gc-tinta); }
.dev-solucion-desc { margin-top: 8px; font-size: clamp(15px, .9rem + .2vw, 17px); line-height: 1.55; color: var(--gc-tinta-2); }
.dev-avance { width: min(100%, 34rem); margin-top: 26px; }
.dev-avance-barra { position: relative; height: 8px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--tono) 14%, var(--gc-sup-2)); }
.dev-avance-barra span {           /* avance sin fecha: una franja con rayas de obra que va y viene */
  position: absolute; inset: 0 auto 0 0; width: 42%; border-radius: inherit;
  background: repeating-linear-gradient(-45deg, var(--gc-naranja) 0 8px, color-mix(in srgb, var(--gc-naranja) 62%, #FFFFFF) 8px 16px);
  box-shadow: 0 0 14px color-mix(in srgb, var(--gc-naranja) 60%, transparent);
  animation: dev-avance 2.6s var(--gc-ease) infinite alternate, dev-rayas .9s linear infinite;
}
@keyframes dev-avance { from { transform: translateX(-12%); } to { transform: translateX(150%); } }
@keyframes dev-rayas { to { background-position: 22.6px 0; } }
.dev-avance-txt { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 500 11.5px/1 var(--gc-f-datos); letter-spacing: .16em; text-transform: uppercase; color: var(--gc-tinta-3); }
.dev-avance-txt .punto-vivo::after { animation-duration: 1.6s; }
.dev-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* la solución en órbita: arcos de atrás · anillo de obra · ficha · arcos de adelante y satélites */
.dev-visual { position: relative; width: min(100%, 520px); aspect-ratio: 1; justify-self: center; container-type: inline-size; }
.dev-orbitas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dev-orbitas--tras { z-index: 0; }
.dev-orbitas--dela { z-index: 2; pointer-events: none; }
.dev-anillo { fill: none; stroke: var(--tono); stroke-width: 1.7; stroke-linecap: round; }
.dev-orbitas--tras .dev-anillo { opacity: .32; }
.dev-orbitas--dela .dev-anillo { opacity: .85; }
.dev-anillo--2 { stroke: var(--gc-naranja); }          /* el del medio, naranja Goldery como la órbita del logo */
.dev-sat { fill: color-mix(in srgb, var(--tono) 50%, #FFFFFF); filter: drop-shadow(0 0 6px var(--tono)); transform-box: fill-box; transform-origin: center; transition: opacity .3s var(--gc-ease); }
.dev-sat--2 { fill: var(--gc-naranja-claro); filter: drop-shadow(0 0 7px var(--gc-naranja)); }
.dev-anillo-obra {                 /* anillo punteado de obra que gira despacio alrededor de la ficha */
  position: absolute; z-index: 0; left: 50%; top: 51.5%; width: 52%; aspect-ratio: 1; margin: -26% 0 0 -26%; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--tono) 55%, transparent);
  animation: dev-girar 40s linear infinite;
}
@keyframes dev-girar { to { rotate: 360deg; } }
.dev-ficha {
  position: absolute; z-index: 1; left: 50%; top: 51.5%; width: 34%; aspect-ratio: 1; margin: -17% 0 0 -17%;
  display: grid; place-items: center; border-radius: 30%;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tono) 30%, var(--gc-sup-2)), color-mix(in srgb, var(--tono) 9%, var(--gc-sup)));
  border: 1px solid color-mix(in srgb, var(--tono) 45%, transparent);
  box-shadow: 0 34px 70px -30px color-mix(in srgb, var(--tono) 90%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: dev-flotar 6s var(--gc-ease) infinite alternate;     /* «translate», así no choca con la entrada (transform) */
}
@keyframes dev-flotar { from { translate: 0 -6px; } to { translate: 0 8px; } }
.dev-ficha-emoji { font: 16cqw/1 var(--gc-f-emoji); }
.dev-chispa {                      /* destellos de cuatro puntas que se encienden por turnos */
  position: absolute; z-index: 2; width: 12px; height: 12px; background: var(--tono); opacity: 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: dev-chispa 3.4s var(--gc-ease) infinite;
}
.dev-chispa--1 { left: 17%; top: 21%; }
.dev-chispa--2 { right: 15%; top: 28%; width: 16px; height: 16px; animation-delay: .85s; }
.dev-chispa--3 { left: 24%; bottom: 19%; width: 9px; height: 9px; animation-delay: 1.7s; }
.dev-chispa--4 { right: 23%; bottom: 13%; width: 10px; height: 10px; background: var(--gc-naranja); animation-delay: 2.55s; }
@keyframes dev-chispa { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.dev-hermanas { margin-top: clamp(36px, 7vh, 72px); }
.dev-hermanas-titulo { margin-bottom: 14px; }
.dev-hermanas ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.dev-hermana {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px;
  border: 1px solid var(--gc-linea); background: var(--gc-sup); color: var(--gc-tinta);
  transition: transform var(--gc-d-estado) var(--gc-ease), border-color var(--gc-d-estado) var(--gc-ease), box-shadow var(--gc-d-estado) var(--gc-ease);
}
.dev-hermana:hover, .dev-hermana:focus-visible {
  transform: translateY(-3px); border-color: color-mix(in srgb, var(--tono) 60%, transparent);
  box-shadow: 0 16px 30px -20px color-mix(in srgb, var(--tono) 85%, transparent);
}
.dev-hermana-emoji { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font: 20px/1 var(--gc-f-emoji); background: color-mix(in srgb, var(--tono) 12%, var(--gc-sup-2)); }
.dev-hermana-txt { display: grid; gap: 4px; min-width: 0; }
.dev-hermana-txt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13.5px/1.25 var(--gc-f-display); }
.dev-hermana-txt small { font: 500 11px/1 var(--gc-f-datos); letter-spacing: .1em; color: var(--gc-tinta-3); }
@media (max-width: 980px) {
  .dev-heroe { grid-template-columns: minmax(0, 1fr); }
  .dev-visual { order: -1; width: min(80vw, 380px); margin: -16px 0 -26px; }
}
@media (max-width: 560px) {
  .dev-titulo { font-size: clamp(2.4rem, 1rem + 8vw, 3.3rem); }
  .dev-cta .boton { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .dev-rejilla, .dev-ficha, .dev-anillo-obra, .dev-chispa, .dev-avance-barra span { animation: none; }
  .dev-chispa { opacity: .55; }
  .dev-avance-barra span { width: 62%; }
}
.mano { display: inline-block; font-family: var(--gc-f-emoji); font-size: .62em; letter-spacing: 0; vertical-align: .12em; margin-left: .12em; transform-origin: 70% 80%; }

/* ═════════════════════════ 16b · ENTRAR (usuario de B1 o invitado) ═════════════════════════
   Una tarjeta de cristal al centro, sobre órbitas: la G que entra en órbita, el saludo
   con la hora de Quito, usuario y contraseña, y debajo «Entrar como invitado». */
.entrar-orbita {
  position: fixed; left: 50%; top: 50%; width: max(130vw, 1400px); aspect-ratio: 1; transform: translate(-50%, -50%);
  pointer-events: none; z-index: 0;
  -webkit-mask-image: radial-gradient(closest-side, transparent 26%, rgba(0, 0, 0, .55) 46%, #000 75%);
  mask-image: radial-gradient(closest-side, transparent 26%, rgba(0, 0, 0, .55) 46%, #000 75%);
}
.entrar-orbita svg { width: 100%; height: 100%; overflow: visible; }
.entrar-orbita .anillo { fill: none; stroke: var(--gc-linea-2); stroke-width: .8; }
.entrar-orbita .anillo--naranja { stroke: var(--gc-naranja); opacity: .4; stroke-width: 1.1; }
.entrar-orbita .burbuja { fill: none; stroke: var(--gc-naranja); stroke-width: .7; opacity: .25; }
.entrar-orbita .satelite { fill: var(--gc-naranja-claro); }
.entrar-esquina { position: fixed; top: 16px; right: max(16px, env(safe-area-inset-right)); z-index: 5; }
.entrar {
  position: relative; z-index: 1; display: grid; place-items: center;
  min-height: 100svh; padding: 72px var(--gc-margen) 48px;
}
.entrar-tarjeta {
  position: relative; display: grid; width: min(420px, 100%); padding: 34px 32px 28px; border-radius: 28px;
  border: 1px solid var(--gc-linea-2); background: var(--gc-cristal);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 50px 110px -44px rgba(0, 0, 0, .8), 0 0 0 1px rgba(241, 100, 0, .05);
}
.entrar-tarjeta::before {          /* filo naranja arriba, como la órbita del logo */
  content: ""; position: absolute; left: 36px; right: 36px; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gc-naranja) 50%, transparent); opacity: .7;
}
html[data-tema="claro"] .entrar-tarjeta { box-shadow: 0 40px 90px -40px rgba(31, 41, 55, .35); }
.entrar-marca { display: inline-flex; align-items: center; gap: 2px; justify-self: start; color: var(--gc-tinta); }
.entrar-simbolo { width: 54px; height: 54px; margin-left: -8px; color: var(--gc-g); }
.entrar-simbolo svg { width: 100%; height: 100%; overflow: visible; }
.entrar-simbolo .sim-g { transform-box: fill-box; transform-origin: center; }
.entrar-palabra { display: inline-flex; align-items: center; margin-left: -2px; font: 700 14px/1 var(--gc-f-display); letter-spacing: .12em; }
.entrar-palabra i { display: inline-block; width: 9px; height: 3px; border-radius: 2px; background: var(--gc-naranja); margin: 0 6px 0 0; }
.entrar-saludo {                  /* en línea: la mano va pegada a la última palabra y baja con ella */
  margin-top: 26px; font: 300 clamp(30px, 1.1rem + 2.4vw, 40px)/1.12 var(--gc-f-display); letter-spacing: -.03em;
}
.entrar-saludo b { font-weight: 800; }
.entrar-saludo .mano { font-size: .8em; vertical-align: .02em; margin-left: .22em; }
.entrar-junto { white-space: nowrap; }   /* el nombre y la mano de la bienvenida bajan juntos */
.entrar-sub { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--gc-tinta-2); }
.entrar-form { display: grid; gap: 16px; margin-top: 26px; }
.campo { display: grid; gap: 7px; }
.campo > label { font: 600 12.5px/1 var(--gc-f-display); letter-spacing: .02em; color: var(--gc-tinta-2); }
.campo-caja {
  position: relative; display: flex; align-items: center; height: 50px; border-radius: var(--gc-r-caja);
  border: 1px solid var(--gc-linea); background: var(--gc-sup-2);
  transition: border-color var(--gc-d-estado) var(--gc-ease), background-color var(--gc-d-estado) var(--gc-ease),
              box-shadow var(--gc-d-estado) var(--gc-ease);
}
.campo-caja:focus-within { border-color: var(--gc-naranja); background: var(--gc-sup); box-shadow: 0 0 0 4px var(--gc-marca-f); }
.campo-caja:has(input[aria-invalid="true"]) { border-color: var(--gc-peligro); }
.campo-caja > svg { flex: none; width: 18px; height: 18px; margin-left: 15px; color: var(--gc-tinta-3); transition: color var(--gc-d-estado) var(--gc-ease); }
.campo-caja:focus-within > svg { color: var(--gc-acento-tinta); }
.campo-caja input {
  flex: 1; min-width: 0; height: 100%; padding: 0 14px 0 12px; border: 0; outline: 0; background: none;
  font: 500 15.5px var(--gc-f-texto); color: var(--gc-tinta);
}
.campo-caja input:disabled { opacity: .7; }
.campo-ver {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-right: 5px; border-radius: 10px;
  color: var(--gc-tinta-3); transition: color var(--gc-d-estado) var(--gc-ease), background-color var(--gc-d-estado) var(--gc-ease);
}
.campo-ver:hover { color: var(--gc-tinta); background: var(--gc-sup-3); }
.campo-ver:focus-visible { outline-offset: -2px; }
.campo-ver svg { width: 18px; height: 18px; }
.campo-aviso { font: 500 12px/1.3 var(--gc-f-datos); letter-spacing: .02em; color: var(--gc-alerta); }
.entrar-error {
  padding: 11px 14px; border-radius: 12px; background: var(--gc-peligro-f); color: var(--gc-peligro);
  font: 600 13.5px/1.45 var(--gc-f-texto);
}
.entrar-boton { width: 100%; height: 52px; margin-top: 4px; }
.entrar-boton:disabled { cursor: progress; opacity: .85; }
.entrar-cargando { display: none; width: 17px; height: 17px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; }
.entrar-boton.ocupado .entrar-cargando { display: inline-block; animation: girar .8s linear infinite; }
.entrar-boton.ocupado .flechita { display: none; }
@keyframes girar { to { transform: rotate(360deg); } }
.entrar-o {
  display: flex; align-items: center; gap: 14px; margin: 22px 0 16px;
  font: 500 11px/1 var(--gc-f-datos); letter-spacing: .2em; text-transform: uppercase; color: var(--gc-tinta-3);
}
.entrar-o::before, .entrar-o::after { content: ""; flex: 1; height: 1px; background: var(--gc-linea); }
.entrar-invitado { width: 100%; height: 48px; gap: 10px; }
.entrar-invitado svg { width: 19px; height: 19px; }
.entrar-invitado.ocupado { opacity: .7; cursor: progress; }
.entrar-nota { margin-top: 14px; font-size: 13px; line-height: 1.5; text-align: center; color: var(--gc-tinta-2); }
@media (max-width: 480px) {
  .entrar { padding: 64px 14px 32px; align-items: start; }
  .entrar-tarjeta { padding: 28px 22px 24px; border-radius: 24px; }
}

/* ═════════════════════════ 16c · CLICS (uso de G-COMMERCE) ═════════════════════════
   Seis tarjetas, «Clics por día» y «Clics por departamento», como el tablero de referencia, con los
   colores Órbita. Gráficos (skill dataviz): una serie → el naranja de la marca (en oscuro, el paso
   naranja-600, que pasa la banda de luminosidad); rejilla fina; texto siempre en tinta, nunca naranja.
   Los íconos de las tarjetas usan las series del Motor solo como decoración. */
.tablero {
  --grafico-barra: var(--gc-naranja);
  max-width: var(--gc-ancho-portal); padding-top: clamp(20px, 3.5vh, 36px); padding-bottom: clamp(48px, 8vh, 96px);
}
html[data-tema="oscuro"] .tablero { --grafico-barra: var(--gc-naranja-oscuro); }
.tablero-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: clamp(16px, 2.6vh, 24px); }
.tablero-titulo { font: 300 clamp(24px, 1rem + 1.4vw, 36px)/1.1 var(--gc-f-display); letter-spacing: -.02em; }
.tablero-titulo b { font-weight: 800; }
.tablero-titulo span { font-size: .55em; letter-spacing: 0; color: var(--gc-tinta-3); margin-left: 4px; }
.tablero-actualizado { margin-left: auto; font: 500 11.5px/1 var(--gc-f-datos); letter-spacing: .04em; color: var(--gc-tinta-3); }
.periodo, .vista-toggle {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; border: 1px solid var(--gc-linea); background: var(--gc-sup);
}
.periodo button, .vista-toggle button {
  padding: 7px 12px; border-radius: 8px; font: 600 12.5px/1 var(--gc-f-display); color: var(--gc-tinta-2); white-space: nowrap;
  transition: background-color var(--gc-d-estado) var(--gc-ease), color var(--gc-d-estado) var(--gc-ease);
}
.periodo button:hover, .vista-toggle button:hover { color: var(--gc-tinta); }
.periodo [aria-checked="true"], .vista-toggle [aria-pressed="true"] {
  background: var(--gc-sup-solida); color: var(--gc-tinta); box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 0 0 1px var(--gc-linea);
}
.vista-toggle button { padding: 5px 10px; font-size: 11.5px; }
.tablero-aviso {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 18px; padding: 12px 16px;
  border-radius: 14px; border: 1px solid var(--gc-linea-2); background: var(--gc-sup); color: var(--gc-tinta-2); font-size: 14px;
}
.tablero-aviso[data-tipo="error"] { border-color: var(--gc-peligro); background: var(--gc-peligro-f); color: var(--gc-peligro); }
.tablero .kpis, .tablero .paneles { transition: opacity .2s var(--gc-ease); }
.tablero.cargando .kpis, .tablero.cargando .paneles { opacity: .55; }   /* al cambiar de periodo, el cuadro anterior espera atenuado */

/* Tarjetas */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.kpi {
  display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 92px; padding: 16px 16px;
  border-radius: 18px; border: 1px solid var(--gc-linea); background: var(--gc-sup);
}
.kpi[data-kpi="accesos"] { --k: var(--serie-2, #2563EB); }
.kpi[data-kpi="usuarios"] { --k: var(--serie-5, #D97706); }
.kpi[data-kpi="clics"] { --k: var(--serie-3, #16A34A); }
.kpi[data-kpi="vistas"] { --k: var(--serie-4, #7C3AED); }
.kpi[data-kpi="modulo"] { --k: var(--serie-7, #DC2626); }
.kpi[data-kpi="tiempo"] { --k: var(--serie-6, #0891B2); }
.kpi-icono {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  color: var(--k); background: color-mix(in srgb, var(--k) 12%, transparent);
}
html[data-tema="oscuro"] .kpi-icono { color: color-mix(in srgb, var(--k) 62%, #FFFFFF); background: color-mix(in srgb, var(--k) 20%, transparent); }
.kpi-icono svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* la cifra se mide contra el ancho de su tarjeta (cqi): «85h 24min» cabe en una línea de 1366 px al móvil */
.kpi > div { flex: 1; min-width: 0; container-type: inline-size; }
.kpi-valor { font: 700 clamp(16px, 17.5cqi, 25px)/1.08 var(--gc-f-display); letter-spacing: -.02em; color: var(--gc-tinta); white-space: nowrap; }
.kpi--texto .kpi-valor {
  font-size: clamp(16px, .8rem + .35vw, 19px); overflow: hidden; white-space: normal;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.kpi-etiqueta { margin-top: 5px; font: 500 10.5px/1.3 var(--gc-f-datos); letter-spacing: .07em; text-transform: uppercase; color: var(--gc-tinta-3); }

/* Paneles */
.paneles { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.panel-dato { min-width: 0; border-radius: 20px; border: 1px solid var(--gc-linea); background: var(--gc-sup); }
.panel-cab {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px 12px 18px; border-bottom: 1px solid var(--gc-linea);
}
.panel-cab h2 { display: inline-flex; align-items: center; gap: 10px; font: 700 14px/1.2 var(--gc-f-display); color: var(--gc-tinta); }
.panel-cab h2 svg { width: 17px; height: 17px; fill: none; stroke: var(--gc-tinta-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.panel-ctl { display: inline-flex; align-items: center; gap: 8px; }
.pildora {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--gc-linea); background: var(--gc-sup-2);
  font: 500 11.5px/1 var(--gc-f-datos); color: var(--gc-tinta-2); white-space: nowrap;
}
.pildora--menu { gap: 4px; padding-right: 6px; transition: border-color var(--gc-d-estado) var(--gc-ease), color var(--gc-d-estado) var(--gc-ease); }
.pildora--menu svg { width: 13px; height: 13px; transition: transform var(--gc-d-estado) var(--gc-ease); }
.pildora--menu:hover { color: var(--gc-tinta); border-color: var(--gc-linea-2); }
.pildora--menu[aria-expanded="true"] { color: var(--gc-tinta); border-color: var(--gc-naranja); }
.pildora--menu[aria-expanded="true"] svg { transform: rotate(180deg); }
.periodo-menu {                   /* el periodo: lo abren las píldoras; fijo a la ventana */
  position: fixed; left: 0; top: 0; z-index: 90; display: grid; gap: 2px; min-width: 170px; padding: 5px;
  border-radius: 12px; border: 1px solid var(--gc-linea-2); background: var(--gc-sup-solida);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
}
.periodo-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 8px;
  font: 600 12.5px/1 var(--gc-f-display); color: var(--gc-tinta-2); text-align: left;
  transition: background-color var(--gc-d-estado) var(--gc-ease), color var(--gc-d-estado) var(--gc-ease);
}
.periodo-menu button:hover, .periodo-menu button:focus-visible { background: var(--gc-sup-2); color: var(--gc-tinta); }
.periodo-menu button:focus-visible { outline-offset: -2px; }
.periodo-menu [aria-checked="true"] { color: var(--gc-tinta); }
.periodo-menu [aria-checked="true"]::after { content: "✓"; color: var(--gc-acento-tinta); }
.panel-cuerpo { padding: 16px 18px 18px; }
.panel-cifras { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 0; }
.panel-cifras > div { display: flex; flex-direction: column-reverse; gap: 3px; }
.panel-cifras dd { margin: 0; font: 700 20px/1.1 var(--gc-f-display); letter-spacing: -.01em; color: var(--gc-tinta); }
.panel-cifras dt { font-size: 12.5px; line-height: 1.3; color: var(--gc-tinta-3); }
.panel-cifras--dos { margin-top: 14px; }
.grafico { margin: 14px 0 0; }
.grafico-lienzo { min-height: 260px; }
.grafico-lienzo svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico-vacio { display: grid; place-items: center; min-height: 260px; padding: 0 24px; text-align: center; color: var(--gc-tinta-2); font-size: 14px; }
.g-rejilla line { stroke: var(--gc-linea); stroke-width: 1; shape-rendering: crispEdges; }
.g-eje { fill: var(--gc-tinta-3); font: 400 10.5px var(--gc-f-datos); font-variant-numeric: tabular-nums; }
.g-finde { fill: var(--gc-sup-2); }
html[data-tema="oscuro"] .g-finde { fill: rgba(255, 255, 255, .045); }
.g-barra { fill: var(--grafico-barra); transform-box: fill-box; transform-origin: 50% 100%; transition: filter var(--gc-d-estado) var(--gc-ease); }
.g-barra.activa { filter: brightness(1.18) saturate(1.05); }
.g-valor { fill: var(--gc-tinta); font: 700 11.5px var(--gc-f-display); }
.g-promedio { stroke: var(--gc-tinta-3); stroke-width: 1; shape-rendering: crispEdges; }
.g-promedio-txt { fill: var(--gc-tinta-3); font: 500 10.5px var(--gc-f-datos); }
.g-golpe { fill: transparent; cursor: default; }
.g-golpe:focus { outline: none; }
.g-golpe:focus-visible { stroke: var(--gc-naranja); stroke-width: 1.5; }
.grafico-leyenda { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 400 11.5px var(--gc-f-datos); color: var(--gc-tinta-3); }
.grafico-leyenda i { width: 16px; height: 11px; border-radius: 3px; background: var(--gc-sup-2); border: 1px solid var(--gc-linea); }
.grafico-tooltip {
  position: fixed; left: 0; top: 0; z-index: 90; display: grid; gap: 2px; padding: 9px 12px; border-radius: 11px;
  pointer-events: none; border: 1px solid var(--gc-linea-2); background: var(--gc-sup-solida);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
}
.grafico-tooltip strong { font: 700 15px/1.2 var(--gc-f-display); color: var(--gc-tinta); }
.grafico-tooltip span { font-size: 12px; color: var(--gc-tinta-2); }
.dep-lider { font: 700 20px/1.2 var(--gc-f-display); color: var(--gc-tinta); }
.dep-lider-sub { margin-top: 3px; font-size: 12.5px; color: var(--gc-tinta-3); }
.barras-dep, .barras-sol { display: grid; gap: 2px; margin: 18px 0 0; padding: 0; list-style: none; }
.barras-dep li, .barras-sol li {
  display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 30px; padding: 2px 6px; border-radius: 8px; transition: background-color var(--gc-d-estado) var(--gc-ease);
}
.barras-dep li:hover, .barras-dep li:focus-visible, .barras-sol li:hover, .barras-sol li:focus-visible { background: var(--gc-sup-2); }
.barras-dep li:focus-visible, .barras-sol li:focus-visible { outline-offset: 0; }
.dep-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--gc-tinta-2); }
.dep-pista { display: block; height: 12px; }
.dep-barra { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--grafico-barra); transform-origin: 0 50%; }
.dep-valor { display: inline-flex; align-items: baseline; gap: 6px; min-width: 76px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dep-valor b { font: 700 12.5px var(--gc-f-display); color: var(--gc-tinta); }
.dep-valor small { font: 400 11px var(--gc-f-datos); color: var(--gc-tinta-3); }
.tabla-datos th, .tabla-datos td { padding-top: 9px; padding-bottom: 9px; }
.tabla-datos th[scope="row"] { font-weight: 600; color: var(--gc-tinta); text-align: left; }
.tabla-datos .num { text-align: right; font-variant-numeric: tabular-nums; }
.panel-dato .tabla-envoltura { margin-top: 14px; max-height: 420px; overflow: auto; }
/* Uso por solución: a todo el ancho, debajo de los otros dos; las barras de departamento con emoji, nombre y módulo */
.panel-sol { grid-column: 1 / -1; }
.barras-sol li { grid-template-columns: minmax(150px, 30%) minmax(0, 1fr) auto; min-height: 42px; }
.sol-nombre { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; }
.sol-nombre .sol-emoji { grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 9px; font-size: 14px; }
.sol-titulo, .sol-modulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sol-titulo { font-weight: 600; color: var(--gc-tinta); }
.sol-modulo { font: 400 11px/1.3 var(--gc-f-datos); color: var(--gc-tinta-3); }
.sol-desconocida, .tabla-datos th.sol-desconocida { color: var(--gc-tinta-3); font-weight: 400; }
.sol-aviso {
  margin-top: 16px; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--gc-linea-2);
  font-size: 13.5px; color: var(--gc-tinta-2); text-align: center;
}
@media (max-width: 1180px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .paneles { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { gap: 10px; padding: 13px 12px; min-height: 84px; border-radius: 16px; }
  .kpi-icono { width: 34px; height: 34px; border-radius: 10px; }
  .kpi-icono svg { width: 17px; height: 17px; }
  .tablero-actualizado { margin-left: 0; flex-basis: 100%; }
  .periodo { max-width: 100%; overflow-x: auto; }
  .panel-cifras { gap: 8px 24px; }
  .barras-sol li { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 8px 6px; }   /* nombre, barra y cifras, una debajo de otra */
  .sol-valor { flex-wrap: wrap; }
}

/* ═════════════════════════ 17 · SISTEMA DE DISEÑO (estilo.html) ═════════════════════════ */
.guia-portada { padding-top: clamp(48px, 9vh, 112px); padding-bottom: clamp(32px, 6vh, 64px); display: grid; gap: 22px; }
.guia-indice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 0; list-style: none; }
.guia-indice a {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--gc-r-pildora);
  border: 1px solid var(--gc-linea); font: 600 13px/1 var(--gc-f-display); color: var(--gc-tinta-2);
}
.guia-indice a:hover { border-color: var(--gc-naranja); color: var(--gc-tinta); }
.guia-bloque { padding-top: clamp(56px, 9vh, 104px); }
.guia-bloque > header { display: grid; gap: 14px; max-width: 760px; margin-bottom: 32px; }
.guia-bloque h2 { font: 300 clamp(1.8rem, 1.1rem + 2.2vw, 2.9rem)/1.05 var(--gc-f-display); letter-spacing: -.03em; }
.guia-bloque h2 b { font-weight: 800; }
.guia-bloque h3 { font: 800 13px/1 var(--gc-f-display); letter-spacing: .14em; text-transform: uppercase; margin: 36px 0 16px; color: var(--gc-tinta-2); }
.guia-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.panel { border-radius: var(--gc-r-panel); border: 1px solid var(--gc-linea); background: var(--gc-sup); padding: 22px; }
.panel--oscuro { background: var(--gc-carbon-900); color: #FFFFFF; border-color: rgba(255, 255, 255, .08); }
.panel--raton { background: var(--gc-gris-raton); color: #FFFFFF; border-color: transparent; }
.panel--claro { background: #FFFFFF; color: #17181B; border-color: var(--gris-115, #E1E4E7); }
.panel--naranja { background: var(--gc-naranja); color: var(--gc-carbon-900); border-color: transparent; }
.panel-nota { margin-top: 14px; font: 400 12px/1.5 var(--gc-f-datos); letter-spacing: .02em; color: var(--gc-tinta-3); }
.panel--oscuro .panel-nota, .panel--raton .panel-nota { color: rgba(255, 255, 255, .6); }
.muestra-logo { display: grid; place-items: center; min-height: 200px; }
.muestra-logo img, .muestra-logo svg { max-height: 120px; width: auto; }
.panel--claro .panel-nota { color: #6B7280; }
/* Logotipo completo (guía de estilo): símbolo + palabra de la marca de sitio.js, dibujado en vivo */
.logotipo { display: inline-flex; align-items: center; max-width: 100%; color: #FFFFFF; }
.logotipo--positivo { color: var(--gc-gris-raton); }
.muestra-logo { container-type: inline-size; }   /* el logotipo en vivo se mide con el ancho de su panel (cqw) */
.logotipo-simbolo { flex: none; width: min(31cqw, 112px); height: min(31cqw, 112px); margin-left: min(-3.5cqw, -1px); }
.muestra-logo .logotipo-simbolo svg { width: 100%; height: 100%; max-height: none; overflow: visible; }
.logotipo-palabra { display: inline-flex; align-items: center; margin-left: max(-3cqw, -11px); white-space: nowrap;
  font: 700 min(9.4cqw, 34px)/1 var(--gc-f-display); letter-spacing: .12em; }
.logotipo-palabra b { color: var(--gc-naranja); font-weight: inherit; }
.logotipo-palabra i { display: inline-block; width: .56em; height: .18em; border-radius: .1em; background: var(--gc-naranja); margin-right: .38em; }
.muestra { display: grid; border-radius: var(--gc-r-tarjeta); border: 1px solid var(--gc-linea); overflow: hidden; background: var(--gc-sup); text-align: left; }
.muestra-color { height: 112px; position: relative; }
.muestra-color span { position: absolute; right: 12px; top: 12px; font: 500 10px/1 var(--gc-f-datos); letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px; border-radius: 99px; background: rgba(0, 0, 0, .28); color: #FFFFFF; opacity: 0; transition: opacity var(--gc-d-estado) var(--gc-ease); }
.muestra:hover .muestra-color span, .muestra:focus-visible .muestra-color span { opacity: 1; }
.muestra-info { padding: 14px 16px 16px; display: grid; gap: 4px; }
.muestra-info strong { font: 700 14px/1.2 var(--gc-f-display); }
.muestra-info code, .token { font: 500 12px/1.4 var(--gc-f-datos); color: var(--gc-tinta-3); }
.parrafo .token { font-size: .8em; padding: 2px 7px; border-radius: 6px; background: var(--gc-sup-3); color: var(--gc-acento-tinta); white-space: nowrap; }
.muestra-info em { font-style: normal; font-size: 13px; color: var(--gc-tinta-2); }
.rampa { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); border-radius: var(--gc-r-caja); overflow: hidden; border: 1px solid var(--gc-linea); }
.rampa button { height: 78px; display: grid; align-content: end; padding: 8px; font: 500 10px/1.25 var(--gc-f-datos); text-align: left; }
.especimen { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px; padding: 26px 0; border-top: 1px solid var(--gc-linea); align-items: start; }
.especimen-nombre strong { display: block; font: 800 15px var(--gc-f-display); letter-spacing: .06em; text-transform: uppercase; }
.especimen-nombre span { font-size: 14px; color: var(--gc-tinta-2); }
.especimen-muestra { min-width: 0; overflow-wrap: anywhere; }
.escala { display: grid; gap: 10px; }
.escala-fila { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 10px 0; border-top: 1px dashed var(--gc-linea); }
.escala-fila code { font: 500 11px var(--gc-f-datos); color: var(--gc-tinta-3); }
.emojis-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.emoji-ficha { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--gc-r-caja); border: 1px solid var(--gc-linea); background: var(--gc-sup); }
.emoji-ficha .ef-txt { min-width: 0; display: grid; gap: 3px; }
.emoji-ficha strong { display: block; font: 700 13.5px/1.25 var(--gc-f-display); }
.emoji-ficha small { display: block; font: 500 10.5px/1.3 var(--gc-f-datos); letter-spacing: .1em; text-transform: uppercase; color: var(--gc-tinta-3); }
.reglas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.reglas li { padding: 18px 20px; border-radius: var(--gc-r-caja); border: 1px solid var(--gc-linea); background: var(--gc-sup); font-size: 15px; color: var(--gc-tinta-2); }
.reglas li b { display: block; margin-bottom: 4px; font: 700 14px var(--gc-f-display); color: var(--gc-tinta); }
.reglas .si b::before { content: "✓  "; color: var(--gc-exito); }
.reglas .no b::before { content: "✕  "; color: var(--gc-rojo); }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; font: 500 11px/1 var(--gc-f-datos); letter-spacing: .14em; text-transform: uppercase; color: var(--gc-tinta-3); padding: 0 12px 12px 0; }
.tabla td { padding: 12px 12px 12px 0; border-top: 1px solid var(--gc-linea); vertical-align: top; color: var(--gc-tinta-2); }
.tabla td:first-child { color: var(--gc-tinta); font-weight: 600; }
.tabla code { font: 500 12px var(--gc-f-datos); color: var(--gc-acento-tinta); }
.tabla-envoltura { overflow-x: auto; border-radius: var(--gc-r-caja); }
.codigo-bloque {
  margin: 0; padding: 20px 22px; border-radius: var(--gc-r-caja); border: 1px solid var(--gc-linea); background: var(--gc-carbon-950);
  color: #E6E7EA; font: 400 13px/1.7 Consolas, "Cascadia Code", "Courier New", monospace; overflow-x: auto; white-space: pre;
}
.codigo-bloque .c { color: #7D8590; }
.codigo-bloque .k { color: var(--gc-naranja-claro); }
.codigo-bloque .s { color: var(--gc-hielo); }
.demo-mov { display: grid; place-items: center; min-height: 170px; gap: 14px; }
.demo-caja { width: 56px; height: 56px; border-radius: 16px; background: var(--gc-naranja); }
.demo-g { width: 120px; height: 120px; color: var(--gc-g); }
.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 420; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--gc-r-pildora);
  background: var(--gc-tinta); color: var(--gc-fondo); font: 600 13.5px/1 var(--gc-f-display); box-shadow: var(--gc-sombra);
  opacity: 0; pointer-events: none;
}

/* ═════════════════════════ 17b · MODO PRESENTACIÓN ═════════════════════════
   Capa sobre el portal: foco de luz (anillo naranja con esquinas tipo HUD), tarjeta de presentador,
   láminas a pantalla completa (portada, siguientes pasos, cierre), ventana de vista previa y código.
   El botón «Presentar» vive con los íconos de la cabecera (§7). */
.pres { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.pres-captura { position: absolute; inset: 0; pointer-events: auto; cursor: pointer; }
html.pres-activa { overflow: hidden; }
html.pres-sin-cursor, html.pres-sin-cursor * { cursor: none !important; }

.pres-foco {
  position: fixed; left: 50%; top: 50%; width: 0; height: 0; border-radius: 24px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 200vmax rgba(8, 9, 10, .7), 0 0 0 1.5px var(--gc-naranja), 0 0 60px 8px rgba(241, 100, 0, .22);
}
html[data-tema="claro"] .pres-foco { box-shadow: 0 0 0 200vmax rgba(23, 24, 27, .52), 0 0 0 1.5px var(--gc-naranja), 0 0 50px 6px rgba(241, 100, 0, .2); }
.pres-foco::before {              /* esquinas tipo visor */
  content: ""; position: absolute; inset: -10px; border-radius: 30px;
  --l: 22px; --g: 2px; --c: var(--gc-naranja-claro);
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--g) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--g) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--g) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--g) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--g) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--g) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--g) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--g) var(--l) no-repeat;
}

.pres-tarjeta {
  position: fixed; left: clamp(16px, 3vw, 44px); bottom: clamp(16px, 3.4vh, 40px); z-index: 2;
  width: min(620px, calc(100vw - 32px)); padding: 22px 24px 16px; border-radius: 26px; pointer-events: auto;
  background: var(--gc-cristal); border: 1px solid var(--gc-linea-2);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 40px 90px -36px rgba(0, 0, 0, .85);
}
.pres-tarjeta.derecha { left: auto; right: clamp(16px, 3vw, 44px); }
.pres-meta { display: flex; align-items: center; gap: 10px; font: 500 11.5px/1 var(--gc-f-datos); letter-spacing: .2em; text-transform: uppercase; color: var(--gc-acento-tinta); }
.pres-meta .pres-total { color: var(--gc-tinta-3); }
.pres-titulo { margin-top: 14px; font: 300 clamp(1.7rem, 1rem + 1.7vw, 2.7rem)/1.06 var(--gc-f-display); letter-spacing: -.035em; color: var(--gc-tinta); }
.pres-titulo b { font-weight: 800; }
.pres-texto { margin-top: 12px; font-size: clamp(15px, .86rem + .32vw, 18.5px); line-height: 1.6; color: var(--gc-tinta-2); }
.pres-barra { margin-top: 18px; height: 2px; border-radius: 2px; background: var(--gc-linea); overflow: hidden; }
.pres-barra span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--gc-naranja-claro), var(--gc-naranja)); }
.pres-controles { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.pres-btn {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%;
  border: 1px solid var(--gc-linea-2); color: var(--gc-tinta-2);
  transition: border-color var(--gc-d-estado) var(--gc-ease), color var(--gc-d-estado) var(--gc-ease), background-color var(--gc-d-estado) var(--gc-ease);
}
.pres-btn:hover { color: var(--gc-tinta); border-color: var(--gc-naranja); }
.pres-btn svg { width: 16px; height: 16px; }
.pres-btn--auto { width: auto; padding: 0 12px; border-radius: var(--gc-r-pildora); font: 500 10.5px/1 var(--gc-f-datos); letter-spacing: .14em; text-transform: uppercase; }
.pres-btn--auto[aria-pressed="true"] { color: var(--gc-carbon-900); background: var(--gc-naranja); border-color: var(--gc-naranja); }
.pres-puntos { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; padding: 0 6px; overflow: hidden; }
.pres-punto { width: 7px; height: 7px; flex: none; border-radius: 4px; background: var(--gc-linea-2); transition: width var(--gc-d-panel) var(--gc-ease), background-color var(--gc-d-panel) var(--gc-ease); }
.pres-punto.visto { background: var(--gc-tinta-3); }
.pres-punto.activo { width: 24px; background: var(--gc-naranja); }

.pres-estado {
  position: fixed; right: clamp(16px, 3vw, 44px); bottom: clamp(16px, 3.4vh, 40px); z-index: 2;
  display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; border-radius: var(--gc-r-pildora);
  background: var(--gc-cristal); border: 1px solid var(--gc-linea-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: 500 11px/1 var(--gc-f-datos); letter-spacing: .16em; text-transform: uppercase; color: var(--gc-tinta-2);
}
.pres-tarjeta.derecha ~ .pres-estado { right: auto; left: clamp(16px, 3vw, 44px); }

/* Láminas a pantalla completa: portada, siguientes pasos y cierre */
.pres-lamina {
  position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; overflow: hidden; pointer-events: auto;
  padding: 72px 24px; text-align: center; color: #FFFFFF; cursor: pointer;
  background: radial-gradient(70% 70% at 50% 42%, var(--gc-carbon-800), var(--gc-carbon-950));
}
.pres-lamina::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.3px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000, transparent 70%); mask-image: radial-gradient(circle at 50% 45%, #000, transparent 70%);
}
.pres-lamina::after {
  content: ""; position: absolute; width: 80vmin; height: 80vmin; left: 50%; top: 42%; margin: -40vmin 0 0 -40vmin; pointer-events: none;
  background: radial-gradient(closest-side, rgba(241, 100, 0, .2), transparent 70%);
}
.pres-lamina-in { position: relative; z-index: 1; display: grid; justify-items: center; max-width: 1100px; }
.pres-simbolo { width: min(30vh, 280px); color: #FFFFFF; }
.pres-simbolo svg { width: 100%; height: auto; overflow: visible; }
.pres-kicker { margin-top: 30px; font: 500 12px/1 var(--gc-f-datos); letter-spacing: .3em; text-transform: uppercase; color: var(--gc-naranja-claro); }
.pres-lamina-titulo { margin-top: 18px; font: 700 clamp(2.6rem, 1rem + 4.6vw, 5.4rem)/1 var(--gc-f-display); letter-spacing: .12em; padding-left: .12em; }
.pres-lamina-titulo b { color: var(--gc-naranja); }
.pres-lamina-titulo.ligero { font-weight: 300; letter-spacing: -.04em; padding-left: 0; }
.pres-lamina-titulo.ligero b { font-weight: 800; color: var(--gc-naranja); }
.pres-lamina-sub { margin-top: 20px; font: 300 clamp(1.05rem, .8rem + .7vw, 1.5rem)/1.4 var(--gc-f-datos); letter-spacing: .05em; color: rgba(255, 255, 255, .78); }
.pres-lamina-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 44px; }
.pres-lamina .boton-fantasma { color: #FFFFFF; border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .04); }
.pres-lamina .boton-fantasma:hover { border-color: var(--gc-naranja); background: rgba(241, 100, 0, .14); }
.pres-ayuda { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font: 400 12px/1 var(--gc-f-datos); letter-spacing: .06em; color: rgba(255, 255, 255, .5); }
.pres-ayuda kbd { color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .05); }
.pres-pasos { list-style: none; margin: 46px 0 0; padding: 0; display: grid; gap: 14px; width: min(980px, 92vw); text-align: left; }
.pres-pasos li {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 22px; padding: 22px 26px;
  border-radius: 24px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .035);
}
.pres-pasos .num { min-width: 1.2em; font: 300 clamp(40px, 4vw, 60px)/.8 var(--gc-f-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px var(--gc-naranja-claro); }   /* «01» es más angosto: así las tres filas alinean */
.pres-pasos .emoji { width: 58px; height: 58px; border-radius: 18px; font-size: 28px; border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); }
.pres-pasos strong { display: block; font: 700 clamp(18px, 1rem + .5vw, 24px)/1.2 var(--gc-f-display); }
.pres-pasos span.det { display: block; margin-top: 6px; font-size: clamp(14.5px, .85rem + .25vw, 17px); line-height: 1.5; color: rgba(255, 255, 255, .7); }
.pres-mini {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 12px;
  font: 500 11px/1 var(--gc-f-datos); letter-spacing: .18em; color: rgba(255, 255, 255, .55);
}
.pres-mini .pres-punto { background: rgba(255, 255, 255, .22); }
.pres-mini .pres-punto.visto { background: rgba(255, 255, 255, .5); }
.pres-mini .pres-punto.activo { background: var(--gc-naranja); }

/* Ventana de vista previa (un módulo dentro de la presentación) */
.pres-ventana {
  position: fixed; z-index: 3; left: 0; top: 0; width: 640px; height: 440px; pointer-events: none;   /* tamaño y lugar: presentacion.js */
  display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--gc-carbon-900);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 70px 160px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(241, 100, 0, .12);
}
.pres-ventana-barra {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; flex: none;
  background: var(--gc-carbon-800); border-bottom: 1px solid rgba(255, 255, 255, .08);
  font: 500 12px/1 var(--gc-f-datos); letter-spacing: .06em; color: rgba(255, 255, 255, .72);
}
.pres-ventana-barra i { width: 11px; height: 11px; border-radius: 50%; }
.pres-ventana-barra i:nth-child(1) { background: var(--gc-rojo); }
.pres-ventana-barra i:nth-child(2) { background: var(--gc-naranja); }
.pres-ventana-barra i:nth-child(3) { background: var(--gc-cool-gray); }
.pres-ventana-barra b { margin-left: 10px; font-weight: 500; }
.pres-ventana iframe { flex: none; width: 1280px; height: 800px; border: 0; background: var(--gc-fondo); pointer-events: none; transform-origin: 0 0; }
@media (max-height: 820px) {
  .pres-tarjeta { padding: 16px 20px 12px; width: min(560px, calc(100vw - 32px)); border-radius: 22px; }
  .pres-titulo { margin-top: 10px; font-size: clamp(1.4rem, .9rem + 1.2vw, 2rem); }
  .pres-texto { margin-top: 8px; font-size: 15px; line-height: 1.5; }
  .pres-barra { margin-top: 12px; }
  .pres-controles { margin-top: 10px; }
  .pres-pasos { margin-top: 28px; gap: 10px; }
  .pres-pasos li { padding: 14px 20px; }
  .pres-simbolo { width: min(24vh, 220px); }
}

/* Tarjeta de código (escena «crecer») */
.pres-codigo { position: fixed; z-index: 3; right: clamp(16px, 3vw, 44px); bottom: clamp(16px, 3.4vh, 40px); width: min(600px, 44vw); pointer-events: none; }
.pres-codigo .codigo-bloque { white-space: pre-wrap; font-size: clamp(12px, .7rem + .25vw, 14.5px); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85); border-color: rgba(241, 100, 0, .3); }
.pres-codigo .codigo-bloque::after { content: "▌"; color: var(--gc-naranja); animation: parpadeo 1s steps(1) infinite; }
.pres-codigo.listo .codigo-bloque::after { display: none; }
@keyframes parpadeo { 50% { opacity: 0; } }
.pres-negro { position: fixed; inset: 0; z-index: 9; background: #000; opacity: 0; pointer-events: none; transition: opacity .35s var(--gc-ease); }
.pres-negro.activo { opacity: 1; pointer-events: auto; }
.paleta.pres-sobre { z-index: 312; pointer-events: none; }
.paleta.pres-sobre .paleta-velo { display: none; }
.paleta.pres-sobre .paleta-caja { pointer-events: auto; }
.tarjeta--demo { border-color: var(--gc-naranja); box-shadow: 0 0 0 1px var(--gc-naranja), 0 20px 50px -20px rgba(241, 100, 0, .45); }
@media (max-width: 760px) {
  .presentar-btn { display: none; }
  .pres-codigo { width: calc(100vw - 32px); bottom: auto; top: calc(var(--gc-cabecera) + 12px); }
  .pres-estado { display: none; }
}

/* ═════════════════════════ 18 · ANIMACIÓN: estados iniciales y respaldo ═════════════════════════
   Igual que sandy_ds (07-animacion.css): solo con <html class="gc-espera">, que pone el <head>
   cuando hay JS y se permite movimiento. Si anime.js no llegara, todo aparece a los 2,6 s. */
@media screen and (prefers-reduced-motion: no-preference) {
  html.gc-espera [data-anim] { opacity: 0; animation: gc-respaldo 1ms linear 2600ms forwards; }
}
@keyframes gc-respaldo { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }    /* sin esto, scrollTo({ behavior: 'auto' }) hereda el smooth y la página se desliza */
  .fondo-aura { animation: none; }   /* las auras quedan quietas */
}

html.gc-sin-transicion, html.gc-sin-transicion * { transition: none !important; }

/* View Transitions: el cambio de tema se revela en círculo desde el botón */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ═════════════════════════ 19 · RESPONSIVO ═════════════════════════ */
@media (max-width: 1180px) {
  .buscar-btn { width: 40px; padding: 0; justify-content: center; }
  .buscar-btn .buscar-txt, .buscar-btn kbd { display: none; }
}
@media (max-width: 760px) {
  :root { --gc-cabecera: 60px; }   /* en el portal y Solución en desarrollo manda html.con-areas (§1) */
  .nav { display: none; }
  .buscar-btn { width: 40px; padding: 0; justify-content: center; }
  .buscar-btn .buscar-txt, .buscar-btn kbd { display: none; }
  .logo-simbolo { width: 40px; height: 40px; }
  .logo-texto { font-size: 13.5px; letter-spacing: .1em; }
  .especimen { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .escala-fila { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .paleta { padding-top: 10vh; }
  .paleta-pie { display: none; }
}
@media (max-width: 420px) {
  .logo-texto { font-size: 12.5px; letter-spacing: .08em; }
}
@media (hover: none) and (pointer: coarse) {
  .tarjeta:hover { transform: none; box-shadow: none; }
  .tarjeta:active { transform: scale(.985); }   /* sin hover, la pulsación no sube la tarjeta */
  .luz-cursor { display: none; }
  .solo-teclado, [data-atajo] { display: none !important; }   /* sin teclado físico no hay Ctrl K */
}