/* =========================================================================
   BLOG.FORMACIONCONTINUA.EU · capa de marca sobre pb2.css
   =========================================================================
   Sacado de la web en vivo el 2026-09-01 con curl, no de capturas: los
   valores salen de los Estilos Globales de Elementor
   (wp-content/uploads/elementor/css/base-desktop.css y post-10.css), que es
   donde vive el diseno de esta web. El style.css que hay en stylesformacion/
   son las dos cabeceras de Hello Elementor y su hijo: no traen ni una regla,
   porque en este montaje el tema esta vacio a proposito.

   TOKENS CONFIRMADOS (--e-global-color-*)
     primary    #192B5D   azul de marca: titulares, pie, bordes de tarjeta
     secondary  #FFFFFF
     text       #64758B   gris azulado del cuerpo
     accent     #000000
     custom     #E2E1CE (crema)   #02010100 (negro transparente)

   TIPOGRAFIA CONFIRMADA (--e-global-typography-*)
     titulares  CabinetGrotesk 700/800   32-48px
     cuerpo     Tinos 400                16-20px
   CabinetGrotesk NO esta en Google Fonts: la web la carga de Fontshare, y
   por eso el site-pack encola esa hoja aparte.

   UNA DUDA HONESTA SOBRE EL CUERPO
   Los globales declaran Tinos (serif) como tipografia de texto, y eso es lo
   que se aplica aqui. En la captura de la home el cuerpo parece de palo
   seco, asi que es posible que los widgets la sobrescriban uno a uno. Si al
   ver una landing real desentona, se cambia --fc-body a CabinetGrotesk 400
   en la linea marcada; es un solo sitio.

   LO QUE NO HE PODIDO CONFIRMAR
   Las miniaturas de la home se ven con un borde ambar en la captura, pero
   NINGUNA de las 12 hojas de Elementor tiene un borde de ese color: el unico
   borde de tarjeta que existe es "2px solid #192B5D". O es un estado hover,
   o lo pinta una plantilla de loop cuyo CSS carga al hacer scroll. Se deja
   en azul, que es lo unico verificado.

   Se carga DESPUES de pb2.css, asi que basta la misma especificidad; solo se
   sube donde el core ya iba con !important.
   ========================================================================= */

/* ============ TOKENS ============ */
.pb2 {
    /* El core usa --y como color de accion y deriva de el dos tonos mas
       (hover de boton y hover de enlace). Sin declarar los tres, esos dos
       puntos seguirian saliendo amarillos aunque --y fuese azul. */
    --y: #192B5D;
    --y-dark: #101C3D;
    --y-deep: #0F1A3A;
    --d: #192B5D;

    /* Propios de esta hoja. */
    --fc-title: 'CabinetGrotesk', 'Sora', system-ui, sans-serif;
    --fc-body: 'Tinos', Georgia, serif;   /* <-- cambiar aqui si desentona */
    --fc-ink: #192B5D;
    --fc-text: #64758B;
    --fc-line: #E2E2E2;
    --fc-soft: #F1F5F9;

    font-family: var(--fc-body);
    color: var(--fc-text);
}

/* ============ TIPOGRAFIA ============ */
.pb2 h1,
.pb2 h2,
.pb2 h3,
.pb2 h4,
.pb2 .pb2-h2,
.pb2 .pb2-btn,
.pb2 .pb2-link {
    font-family: var(--fc-title);
    letter-spacing: -0.01em;
}

.pb2 h1,
.pb2 h2,
.pb2 h3,
.pb2 h4,
.pb2 .pb2-h2 {
    color: var(--fc-ink);
    font-weight: 800;
}

.pb2 .pb2-lead {
    color: var(--fc-text);
}

/* ============ BOTONES ============ */
/* El core pinta el texto del boton en #111 con !important, pensando en un
   acento amarillo. Sobre el azul de marca eso no se lee, asi que hay que
   subir a !important tambien aqui — es el unico sitio donde hace falta. */
.pb2 .pb2-btn {
    color: #fff !important;
    border-radius: 4px;
    font-weight: 700;
}

.pb2 .pb2-btn:hover {
    background: var(--y-dark) !important;
    color: #fff !important;
}

/* Enlace de texto: el core lo deja en #111 y su hover en el tono derivado. */
.pb2 .pb2-link {
    color: var(--fc-ink);
}

/* ============ SUPERFICIES ============ */
/* El gris del core (#f7f7f7) es neutro; esta web usa un gris azulado. */
.pb2 .pb2-sec--gray {
    background: var(--fc-soft);
}

/* El hero del core va sobre #111. Aqui la banda oscura de la marca es el
   azul, que es lo que usa el pie de la web. */
.pb2 .pb2-hero {
    background-color: var(--fc-ink);
}

/* Dentro del hero el texto va en blanco: se reafirma porque la regla de
   titulares de arriba los ha puesto azules y ganaria por herencia. */
.pb2 .pb2-hero h1,
.pb2 .pb2-hero h2,
.pb2 .pb2-hero h3,
.pb2 .pb2-hero .pb2-h2,
.pb2 .pb2-hero__copy {
    color: #fff;
}

/* ============ LINEAS Y TARJETAS ============ */
.pb2 .pb2-card,
.pb2 .pb2-box,
.pb2 [class*="pb2-"][class*="card"] {
    border-color: var(--fc-line);
}

/* ============ CHECKS DEL HERO ============
   El core pinta el ✓ con var(--y), que en esta web es el azul de marca. En
   el hero eso queda azul sobre una foto oscura y casi no se ve; el texto de
   esos mismos puntos ya va en blanco. Solo en el hero: en las secciones de
   fondo claro el ✓ azul si contrasta y se deja como esta. */
.pb2 .pb2-hero .pb2-checks li::before {
    color: #fff;
}