/* Páginas de las marcas del Grupo EMIR (/grupo/plataforma/, /grupo/academy/, /grupo/lab/), enlazadas desde el pie del portal.
   Base: guias/guia.css (cabecera, fondo) + letras-aparte.css (Inter y Saira); colores de tokens.css (tema del usuario, 11 modos).
   Portada, una línea, tres puntos, botones y las otras marcas. Iconos de línea 1.8 como los del portal; sin naranja ni franjas a la izquierda. */
.gr{max-width:760px;margin:0 auto;padding:20px 16px 128px}
.gr svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* portada: foto (Plataforma) o cubierta con el icono de la marca (Academy, Lab) */
.gr-portada{position:relative;margin:0 0 22px;border-radius:20px;overflow:hidden;border:1px solid var(--linea2);background:var(--sup);aspect-ratio:16/9}
.gr-portada img{display:block;width:100%;height:100%;object-fit:cover}
.gr-cubierta{position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 46%,var(--sup2) 0,transparent 62%),
    repeating-linear-gradient(0deg,var(--linea) 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,var(--linea) 0 1px,transparent 1px 28px),var(--sup)}
.gr-cub-ico{display:grid;place-items:center;width:96px;height:96px;border-radius:26px;background:var(--fondo);border:1px solid var(--linea2);color:var(--texto);box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.gr-cub-ico svg{width:48px;height:48px;stroke-width:1.5}
.gr-chip{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:99px;background:var(--fondo);border:1px solid var(--linea2);
  font:600 13px/1 var(--f);color:var(--texto)}

.gr .ante{color:var(--gris)}
.gr h1 i{color:var(--gris)}
.gr .sub{margin:0 0 22px;color:var(--texto2,var(--texto));font-size:17px;line-height:1.45}

/* tres puntos: icono + título + una línea */
.gr-puntos{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.gr-puntos li{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:14px;padding:12px 14px 12px 12px;border:1px solid var(--linea2);border-radius:16px;background:var(--sup)}
.gr-pi{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--fondo);border:1px solid var(--linea2);color:var(--texto)}
.gr-pi svg{width:22px;height:22px}
.gr-puntos b{display:block;font:600 16px/1.25 var(--f);color:var(--texto)}
.gr-puntos small{display:block;margin-top:2px;font:400 14px/1.4 var(--f);color:var(--gris)}

/* botones: principal en tinta del tema, secundario con borde; 52 px de alto */
.gr-acciones{display:grid;gap:10px;margin:0 0 36px}
.gr-btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 20px;border-radius:14px;border:1px solid var(--menta);background:var(--menta);color:var(--sobre-menta);
  font:600 16px/1 var(--f);text-decoration:none;transition:transform 140ms ease,opacity 140ms ease,background-color 140ms ease;-webkit-tap-highlight-color:transparent}
.gr-btn.sec{background:transparent;border-color:var(--linea2);color:var(--texto)}
.gr-btn:hover{opacity:.9}.gr-btn.sec:hover{opacity:1;background:var(--sup)}
.gr-btn:active{transform:scale(.98)}
.gr-btn:focus-visible,.gr-otras a:focus-visible{outline:2px solid var(--texto);outline-offset:2px}

/* las otras marcas del grupo */
.gr-otras{padding-top:22px;border-top:1px solid var(--linea)}
.gr-otras p{margin:0 0 12px;font:700 italic 20px/1 var(--num);color:var(--texto)}
.gr-otras ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gr-otras a{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;border:1px solid var(--linea2);border-radius:12px;color:var(--texto);text-decoration:none;
  font:600 14px/1.2 var(--f);transition:background-color 140ms ease,transform 140ms ease}
.gr-otras a svg{flex:none;width:20px;height:20px;color:var(--gris)}
.gr-otras a:hover{background:var(--sup)}
.gr-otras a:active{transform:scale(.98)}
.gr-otras a[aria-current]{background:var(--sup);border-color:color-mix(in srgb,var(--texto) 40%,transparent)}
.gr-otras a[aria-current] svg{color:var(--texto)}

@media(min-width:760px){
  .gr{padding-top:32px}
  .gr-portada{aspect-ratio:21/9;margin-bottom:28px}
  .gr-puntos{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .gr-puntos li{grid-template-columns:1fr;align-items:start;gap:14px;padding:18px}
  .gr-acciones{display:flex;flex-wrap:wrap}
  .gr-otras ul{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){.gr-btn,.gr-otras a{transition:none}.gr-btn:active,.gr-otras a:active{transform:none}}