/* --------------------------------------------- */
/* Titulos */
/* --------------------------------------------- */
.bloque_titulo_xxl {
    font-size: 4.5rem;
    line-height: normal;
    font-weight: bold;
    margin-bottom: 1rem;
    margin-top: 0rem;
}

.bloque_titulo_xl{
    font-size: 3.5rem;
    line-height: normal;
    font-weight: bold;
    margin-bottom: 1rem;
    margin-top: 0rem;
}

.bloque_titulo_l{
    font-size: 2.5rem;
    line-height: normal;
    font-weight: bold;
    margin-bottom: 1rem;
    margin-top: 0rem;
}

.bloque_titulo_m{
    font-size: 2rem;
    line-height: normal;
    font-weight: bold;
    margin-bottom: 1rem;
    margin-top: 0rem;
}

.bloque_titulo_s{
    font-size: 1.5rem;
    line-height: normal;
    font-weight: bold;
    margin-bottom: 1rem;
    margin-top: 0rem;
}

.bloque_texto_xl{
    font-size: 150% !important;
    font-weight: normal;
    margin-bottom: 1rem;
    margin-top: 0rem;
}

.bloque_texto_l{
    font-size: 125% !important;
    font-weight: normal;
    margin-bottom: 1rem;
    margin-top: 0rem;
}

.bloque_texto_m{
    font-size: 100% !important;
    font-weight: normal;
    margin-bottom: 1rem;
    margin-top: 0rem;
}

.bloque_texto_s{
    font-size: 87% !important;
    font-weight: normal;
    margin-bottom: 1rem;
    margin-top: 0rem;
}

.bloque_texto_xs{
    font-size: 75% !important;
    font-weight: normal;
    margin-bottom: 1rem;
    margin-top: 0rem;
}

.separador{
    width: 120px;
    border-top: solid 6px;
    height: 0;
    color:transparent !important;
}

.portada_titulo_xxl {
    font-size: 9.5rem;
    line-height: 9.5rem;
    font-weight: bold;
    margin-bottom: 0rem !important;
    margin-top: 0rem;
}

.portada_titulo_xl{
    font-size: 7.5rem;
    line-height: 7.5rem;
    font-weight: bold;
    margin-bottom: 0rem !important;
    margin-top: 0rem;
}

.portada_titulo_l{
    font-size: 5.5rem;
    line-height: 5.5rem;
    font-weight: bold;
    margin-bottom: 0rem !important;
    margin-top: 0rem;
}

.portada_titulo_m{
    font-size: 4.5rem;
    line-height: 4.5rem;
    font-weight: bold;
    margin-bottom: 0rem !important;
    margin-top: 0rem;
}

.portada_titulo_s{
    font-size: 3.5rem;
    line-height: 3.5rem;
    font-weight: bold;
    margin-bottom: 0rem !important;
    margin-top: 0rem;
}

/* "line-height" a juego exacto con "font-size" (ratio 1:1, como seguían
   teniendo hasta ahora estas clases y las "portada_titulo_*" de arriba) deja
   la caja de línea justa al propio texto, sin hueco para nada más alto que
   quepa dentro (un ".custom_boton", con su padding vertical) — mismo motivo
   por el que ese botón se solapaba con la línea de al lado antes de pasarlo
   a "display:inline-block" (ver custom.css). Con "normal" el navegador deja
   el hueco de sobra habitual para la propia fuente.
   "font-size" SIN "!important" (a diferencia de "margin-bottom" un poco más
   abajo): el admin permite afinar el tamaño en píxeles exactos desde el
   propio menú "Formatos > Tamaño de fuente" de TinyMCE (ver
   fontsize_formats_portada en webs_admin_new/js/bloques.js), que aplica un
   "font-size" inline sobre el texto — con "!important" aquí ese ajuste fino
   nunca podría ganarle a esta clase. */
.portada_texto_4x{
    font-size: 7rem;
    line-height: normal;
    font-weight: normal;
    margin-bottom: 0rem !important;
    margin-top: 0rem;
}

.portada_texto_3x{
    font-size: 5rem;
    line-height: normal;
    font-weight: normal;
    margin-bottom: 0rem !important;
    margin-top: 0rem;
}

.portada_texto_2x{
    font-size: 3.5rem;
    line-height: normal;
    font-weight: normal;
    margin-bottom: 0rem !important;
    margin-top: 0rem;
}

.portada_texto_xl{
    font-size: 2.5rem;
    line-height: normal;
    font-weight: normal;
    margin-bottom: 0rem !important;
    margin-top: 0rem;
}

.portada_texto_l{
    font-size: 2rem;
    line-height: normal;
    font-weight: normal;
    margin-bottom: 0rem !important;
    margin-top: 0rem;
}

.portada_texto_m{
    font-size: 1.5rem;
    line-height: normal;
    font-weight: normal;
    margin-bottom: 0rem !important;
    margin-top: 0rem;
}

.portada_texto_s{
    font-size: 1rem;
    line-height: normal;
    font-weight: normal;
    margin-bottom: 0rem !important;
    margin-top: 0rem;
}

.portada_texto_xs{
    font-size: 0.75rem;
    line-height: normal;
    font-weight: normal;
    margin-bottom: 0rem !important;
    margin-top: 0rem;
}

/* --------------------------------------------- */
/* Elementos dinámicos de portada: cuenta atrás   */
/* --------------------------------------------- */
/* El color/opacidad de fondo y el color de texto de cada caja se fijan
   inline, por caja (ver render_cuenta_atras() en bloques.js y
   webs/js/widgets-portada.js, que son quienes generan este HTML — aquí solo
   el layout/tipografía, igual en el editor/vista previa del admin que en el
   sitio público, ya que ambos cargan esta misma hoja). */
.cuenta-atras-widget{
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    vertical-align: middle;
}

.cuenta-atras-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 20px;
    border-radius: 10px;
    line-height: normal;
}

.cuenta-atras-numero{
    font-size: 1.75rem;
    font-weight: bold;
}

/* "padding-top" entre número y etiqueta: mismos márgenes que el contador de
   referencia (circuitos/vihalf, ".hero #countdown-clock .time small",
   padding-top:5px), no un valor propio inventado aquí. */
.cuenta-atras-label{
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .85;
    padding-top: 5px;
}

/* Mismo recorte de márgenes que el contador de referencia en su punto de
   corte (circuitos/vihalf, "@media screen and (max-width: 575px)"): caja
   más ajustada y separación menor entre cajas en móvil. */
@media screen and (max-width: 575px) {
    /* "flex-wrap:nowrap" (la base, más arriba, es "wrap"): con las 4 cajas
       en dos filas se perdía la propia cuenta atrás como bloque compacto —
       confirmado con una prueba real. "min-width" bajado de 64px (pensado
       para escritorio) a 44px, y menos padding, para que las 4 quepan
       siempre en una sola fila incluso con números de 3 cifras (días). */
    .cuenta-atras-widget{
        gap: 4px;
        flex-wrap: nowrap;
    }
    .cuenta-atras-item{
        min-width: 44px;
        padding: 8px 6px;
        border-radius: 6px;
    }
}

/* --------------------------------------------- */
/* Imágenes */
/* --------------------------------------------- */

/* El diálogo "Insertar imagen" de TinyMCE puede dejar un width/height fijo
   en px como atributo HTML (o incluso como style inline si se redimensiona
   a mano tirando de la esquina), que sobresale del área disponible en
   columnas estrechas o en móvil. "!important" hace falta para ganarle a ese
   estilo inline. "height:auto" evita que la imagen salga deformada al
   limitar solo el ancho (si el atributo/style trae también un height fijo
   en px, sin esto no se reescala en la misma proporción).
   Este fichero lo carga también la CABECERA de la web pública entera
   (html_head(), no solo el contenido de los editores) — por eso el
   selector va limitado a los contenedores de contenido enriquecido, nunca
   a "img" a secas: sin ese límite, esta regla también forzaba el logo del
   menú (y cualquier otra imagen de plantilla) a max-width:100% de SU
   contenedor, mucho más ancho que el tamaño real del logo, y se veía
   desproporcionado.
   ".contenido-html", ".portada_texto", ".noticia-detalle-cuerpo/-resumen"
   y ".blog-slider__text" son las mismas clases de "área de contenido" que ya usa el bloque de
   enlaces de arriba, para la web pública. ".mce-content-body" es la clase
   que TinyMCE pone por defecto al <body> del iframe del editor real.
   ".preview-contenido" es el contenedor que arma a mano el iframe de la
   vista previa (ver actualizar_preview_texto() en custom.js) para el
   resto de campos enriquecidos del admin. */
.contenido-html img,
.portada_texto img,
.noticia-detalle-cuerpo img,
.noticia-detalle-resumen img,
.blog-slider__text img,
.mce-content-body img,
.preview-contenido img{
    max-width: 100% !important;
    height: auto !important;
}

/* --------------------------------------------- */
/* Párrafos */
/* --------------------------------------------- */

/* Mismo interlineado en los dos sitios que cargan este fichero (web pública
   y editor TinyMCE vía bloque_textarea.css/portada_textarea.css): sin esto
   el editor usaba el interlineado por defecto del navegador (~1.15), más
   apretado que el 1.7 real de la web, y el contenido se veía distinto al
   escribirlo que al publicarlo. */
p{
    line-height: 1.7;
}

/* --------------------------------------------- */
/* Enlaces sueltos */
/* --------------------------------------------- */

/* Un enlace suelto dentro del texto (a diferencia de un ".custom_boton", que
   ya tiene su propio estilo) debe distinguirse del texto normal sin destacar
   con el azul/subrayado por defecto del navegador: una variación del propio
   color de texto (sin depender de un color adicional a configurar) más un
   subrayado fino. Este fichero lo cargan tanto la web pública como el editor
   (TinyMCE, vía bloque_textarea.css/portada_textarea.css), así que con esto
   se ven igual en los dos sitios. */
a:not(.custom_boton){
    color: color-mix(in srgb, currentColor 65%, transparent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

/* --------------------------------------------- */
/* Botones */
/* --------------------------------------------- */

/* Antes ".custom_boton" fijaba su propio font-size (1rem por defecto, con
   una regla ".bloque_texto_X .custom_boton"/".portada_texto_X .custom_boton"
   distinta por cada tamaño de párrafo/título para intentar seguirlo). Dos
   problemas: dentro de un párrafo normal (sin ninguna de esas clases) el
   botón se quedaba siempre en 1rem por más grande o pequeño que fuera el
   texto alrededor, y esas reglas por tamaño usaban un % relativo al tamaño
   YA AMPLIADO del párrafo (".bloque_texto_xl" ya pone 150%, y encima
   ".custom_boton" dentro sumaba otro 140%), así que el botón acababa más
   grande que su propio texto en vez de igual.
   Quitando el font-size propio del botón, hereda sin más el del texto que
   lo rodea (el comportamiento normal de un <a>): igual que el párrafo si
   está suelto, e igual que el tamaño que corresponda si está dentro de un
   "Texto S/M/L/XL" o "Título XXL...S" (esas clases ya fijan el font-size
   del bloque entero). padding en "em" y line-height sin unidad hacen que
   ambos escalen en proporción a ese mismo font-size, venga de donde venga. */
.custom_boton{
    /* El padding vertical de un elemento "inline" (lo que es un <a> suelto,
       ver el formato "Botón tipo X" del editor) se pinta pero no empuja el
       alto de línea del párrafo que lo contiene: con textos/párrafos
       seguidos, el botón (más alto que una línea de texto normal por su
       propio padding) se solapaba con la línea de arriba y de abajo.
       "inline-block" hace que su alto completo (contenido + padding) sí
       cuente al calcular el espacio entre líneas, sin dejar de fluir en
       medio del texto como un <a> normal. */
    display: inline-block;
    padding: 0.55em 1.4em;
    line-height: 1.3;
    text-decoration: none;
    font-weight: normal;
}

header .custom_boton{
    padding: 0.7em 1.2em;
}

/* Tipo "Botón" del elemento dinámico de portada, opción de color
   "Personalizado" (ver render_boton_html() en webs_admin_new/js/bloques.js).
   "Botón tipo 1/2" de ese mismo desplegable reutiliza sin más las clases
   "boton1"/"boton2(_outline)" de aquí abajo (css_dinamico.php), con sus
   colores de marca ya fijados una vez por toda la web; "Personalizado" no
   tiene una clase fija así, así que cada botón fija sus propios colores por
   variable CSS en su "style" — permite tener un ":hover" real (aquí, fijo)
   sin tener que incrustar un <style> propio dentro del HTML guardado de la
   sección (nada garantiza que TinyMCE preserve un <style> suelto en medio de
   contenido de texto enriquecido). */
.custom_boton.boton_personalizado{
    background-color: var(--boton-perso-bg) !important;
    border: solid 1px var(--boton-perso-bg) !important;
    color: var(--boton-perso-color) !important;
}

.custom_boton.boton_personalizado.boton_outline{
    background-color: transparent !important;
    color: var(--boton-perso-bg) !important;
}

.custom_boton.boton_personalizado:hover{
    background-color: var(--boton-perso-hover-bg) !important;
    border-color: var(--boton-perso-hover-bg) !important;
    color: var(--boton-perso-hover-color) !important;
}

/* --------------------------------------------- */
/* Fuentes */
/* --------------------------------------------- */
.germania {
    font-family: "Germania One", system-ui;
    font-weight: 400;
    font-style: normal;
}
.rubik {
    font-family: "Rubik Glitch", system-ui;
    font-weight: 400;
    font-style: normal;
}
.bungee{
    font-family: "Bungee Inline", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.oswald{
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.arvo{
    font-family: "Arvo", serif;
    font-weight: 400;
    font-style: normal;
}

.arvo-italic {
    font-family: "Arvo", serif;
    font-weight: 400;
    font-style: italic;
}
.maven {
    font-family: "Maven Pro", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.permanent-marker {
    font-family: "Permanent Marker", cursive;
    font-weight: 400;
    font-style: normal;
}

.notable {
    font-family: "Notable", sans-serif;
    font-weight: 400;
    font-style: normal;
}