/* =========================================================
   MARCA pucela.club

   Wordmark compartido por todas las secciones del sitio.
   Se enlaza desde cada página con una sola hoja:

       <link rel="stylesheet" href="…/assets/marca.css">
       <a class="marca" href="…/">pucela<span>.club</span></a>

   Variantes
   ---------
   .marca--clara   sobre fondos oscuros o morados
                   (texto blanco, ".club" lila)
   .marca--pie     colocación en un pie de página (bloque propio,
                   con aire debajo)

   Ajuste fino sin variantes nuevas
   --------------------------------
   --marca-texto   color de "pucela"
   --marca-acento  color de ".club"

   Tamaño: hereda font-size del contexto; por defecto 1.3rem.
   Carga su propia tipografía (Inter 900) para verse igual
   aunque la página use otra.
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap');

.marca {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.03em;
    text-decoration: none;
    white-space: nowrap;
    color: var(--marca-texto, #211C24);
}

/* "font: inherit" evita que reglas de contexto (p. ej. "* { font-family }"
   en /el-tiempo o ".pie span { font-weight }" en el horóscopo) cambien la
   tipografía solo de ".club". */
.marca span {
    font: inherit;
    letter-spacing: inherit;
    text-transform: none;
    color: var(--marca-acento, #9300D3);
}

.marca:hover {
    text-decoration: none;
}

.marca--clara {
    --marca-texto: #FFFFFF;
    --marca-acento: #EBBBFF;
}

/* Colocación en pies de página: bloque propio con aire debajo */
.marca--pie {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 1.35rem;
}