/* =========================================================================
   Marca espaciopropio.es — hoja de estilos reutilizable
   Copiar esta carpeta en cualquier proyecto y enlazar este fichero.
   La fuente del logotipo es DM Sans (Google Fonts); si no carga, cae en la
   pila del sistema y el logotipo sigue siendo legible.
   ========================================================================= */

:root {
    /* --- colores de marca --- */
    --marca-tinta:    #0B1B2B;   /* navy: texto del logotipo y fondo de iconos */
    --marca-azul:     #3A74C5;   /* azul de marca (4,52:1 sobre #fafbfc, AA)  */
    --marca-azul-d:   #3162A5;   /* azul oscuro: hover de botones             */
    --marca-azul-bg:  #E8EFF9;   /* tinte: fondos suaves, pestaña activa      */
    --marca-gris:     #6B7480;   /* texto secundario y lema                   */
    --marca-linea:    #D9DEE4;   /* separador del logotipo                    */
}

/* -------------------------------------------------------------------------
   Logotipo completo: isotipo + separador + nombre (+ lema opcional)

   El tamaño se controla con font-size en .marca: todo escala junto.
     <a class="marca" href="/">              -> tamaño normal
     <a class="marca marca--sm" href="/">     -> menús
     <a class="marca marca--lg" href="/">     -> portadas
   ------------------------------------------------------------------------- */
.marca {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-size: 16px;              /* referencia: todo lo demás va en em */
    line-height: 1;
    text-decoration: none;
    color: var(--marca-tinta);
}
.marca:hover { text-decoration: none; color: var(--marca-tinta); }

.marca__iso {
    height: 2em;
    width: auto;
    display: block;
    flex: 0 0 auto;
}

.marca__sep {
    width: 1px;
    height: 2.1em;
    background: var(--marca-linea);
    flex: 0 0 auto;
    margin-right: .1em;
}

.marca__texto { display: flex; flex-direction: column; gap: .28em; }

.marca__nombre {
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1;
    white-space: nowrap;
}
.marca__nombre .marca__tld { color: var(--marca-azul); }

.marca__lema {
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: .58em;
    font-weight: 400;
    letter-spacing: .175em;
    text-transform: uppercase;
    color: var(--marca-gris);
    line-height: 1;
    white-space: nowrap;
}

/* --- tamaños --- */
.marca--sm { font-size: 12px; }
.marca--lg { font-size: 26px; }

/* --- sin lema: el separador se acorta para acompañar --- */
.marca--simple .marca__sep { height: 1.6em; }

/* --- solo isotipo --- */
.marca--iso .marca__sep,
.marca--iso .marca__texto { display: none; }

/* -------------------------------------------------------------------------
   Versión para fondo oscuro: añadir la clase .marca--negativo
   ------------------------------------------------------------------------- */
.marca--negativo { color: #fff; }
.marca--negativo .marca__lema { color: rgba(255, 255, 255, .62); }
.marca--negativo .marca__sep  { background: rgba(255, 255, 255, .25); }
.marca--negativo .marca__tld  { color: #7FB0F5; }  /* el azul se aclara para que contraste */

/* -------------------------------------------------------------------------
   Si se incrusta el SVG en línea (no con <img>), estas variables lo recolorean:
     <svg class="marca__iso marca__iso--css"> ... isotipo-css.svg ... </svg>
   ------------------------------------------------------------------------- */
.marca--negativo .marca__iso--css { --marca-tinta: #fff; --marca-azul: #fff; }
.marca--mono     .marca__iso--css { --marca-azul: var(--marca-tinta); }