/* Una sola pantalla: identidad y compañías a la izquierda, centradas en vertical; la greca en carbón sangra por la
   derecha como marca de agua; pie abajo a la izquierda. En teléfono, una columna con la greca detrás del logotipo. */
@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/manrope-latin-400.woff2) format("woff2")}
@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/manrope-latin-500.woff2) format("woff2")}
@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/manrope-latin-600.woff2) format("woff2")}

:root{
  --negro:#0D0D0D;
  --blanco:#FFFFFF;
  --piedra:#8A8F9C;
  --carbon:#222224;
  --margen:clamp(24px, 8.4vw, 120px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--negro)}
body{margin:0;background:var(--negro);color:var(--blanco);font-family:Manrope,system-ui,sans-serif;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,p,ul{margin:0;padding:0}
ul{list-style:none}
img,svg{display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--blanco);outline-offset:4px}
.oculto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.pagina{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;overflow:hidden;
  display:grid;grid-template-rows:1fr auto;padding:0 var(--margen)}
.contenido{align-self:center;width:420px;max-width:100%;padding:64px 0 48px}

/* Greca: marca de agua a la derecha, recortada por el borde */
.greca{position:absolute;z-index:-1;top:50%;right:calc(min(118vh, 1180px) * -.3);width:min(118vh, 1180px);height:auto;
  transform:translateY(-50%);pointer-events:none}

.logo img{width:420px;max-width:100%;height:auto}

.grupo{margin-top:72px}
.etiqueta{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--piedra)}
.companias{margin-top:16px}
.companias li+li{border-top:1px solid var(--carbon)}
.companias a{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:16px 0}
.nombre{font-size:18px;line-height:26px;font-weight:600;color:var(--blanco);
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:5px;
  transition:text-decoration-color .15s}
.actividad{font-size:15px;line-height:22px;color:var(--piedra)}
.companias a:hover .nombre,.companias a:focus-visible .nombre{text-decoration-color:currentColor}

.pie{padding:0 0 40px;font-size:13px;line-height:20px;color:var(--piedra)}
.pie a{text-decoration:underline;text-decoration-color:var(--carbon);text-underline-offset:4px;transition:text-decoration-color .15s}
.pie a:hover{text-decoration-color:currentColor}

@media (max-width:720px){
  .contenido{width:auto;padding:72px 0 48px}
  .identidad{position:relative}
  .greca{top:50%;left:130px;right:auto;width:280px;transform:translate(-50%, -50%)}
  .logo img{width:260px}
  .grupo{margin-top:120px}
  .companias a{gap:16px}
  .nombre{font-size:17px}
  .actividad{font-size:14px}
  .pie{padding-bottom:32px}
}
@media (prefers-reduced-motion:reduce){.nombre,.pie a{transition:none}}