/* Blog de Wladpit. Estructura del blog de Caracas Coaching; marca de Wladpit.
   Naranja de producción #FF7A00 como acento. El azul de marca aún no se fija (decisión pendiente de Wladimir). */
.wb {
	--wb-acento: #FF7A00;
	--wb-acento-texto: #B34E00;   /* naranja oscurecido para letra pequeña sobre blanco (contraste AA) */
	--wb-acento-claro: #FFB070;   /* sobre fondo oscuro */
	--wb-tinta: #16161D;
	--wb-gris: #5B5B66;
	--wb-gris-claro: #8A8A96;
	--wb-linea: #E7E7EC;
	--wb-suave: #F7F7F9;
	--wb-titular: 'League Spartan', 'Lexend', sans-serif;
	--wb-texto: 'Lexend', sans-serif;
	font-family: var(--wb-texto);
	color: var(--wb-tinta);
	box-sizing: border-box;
}
#main.wb { padding: 72px 24px 96px; }   /* con id: el tema pisa el relleno de .site-main en celular */
.wb *, .wb *::before, .wb *::after { box-sizing: border-box; }
body.wb-activo .site-header { background: #16161D; }
.wb a { text-decoration: none; }

/* Cabeza */
.wb-cabeza { text-align: center; max-width: 860px; margin: 0 auto 40px; }
.wb-etiqueta { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--wb-acento-texto); margin-bottom: 14px; }
.wb .wb-titulo { font-family: var(--wb-titular); font-weight: 700; font-size: 52px; line-height: 1.08; letter-spacing: -.01em; color: var(--wb-tinta); margin: 0 0 16px; }
.wb .wb-titulo-entrada { font-size: 46px; }
.wb-bajada { font-size: 19px; line-height: 1.55; color: var(--wb-gris); max-width: 720px; margin: 0 auto; }

/* Pestañas */
.wb-pestanas { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 30px; max-width: 1200px; margin: 0 auto 48px; border-bottom: 1px solid var(--wb-linea); }
.wb-pestana { font-size: 15px; font-weight: 500; color: var(--wb-gris-claro); padding-bottom: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s; }
.wb-pestana:hover { color: var(--wb-tinta); }
.wb-pestana.wb-activa { color: var(--wb-tinta); border-bottom-color: var(--wb-acento); }

.wb-cuerpo { max-width: 1200px; margin: 0 auto; }
.wb-vacio { text-align: center; color: var(--wb-gris); font-size: 17px; padding: 40px 0; }

/* Destacado */
.wb-destacado { display: block; position: relative; height: 440px; border-radius: 18px; overflow: hidden; margin-bottom: 56px;
	background: var(--wb-tinta) center / cover no-repeat; }
.wb-destacado-velo { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px; background: linear-gradient(transparent, rgba(0, 0, 0, .82)); }
.wb-destacado-cat { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--wb-acento-claro); margin-bottom: 10px; }
.wb .wb-destacado-titulo { font-family: var(--wb-titular); font-weight: 700; font-size: 34px; line-height: 1.15; color: #fff; margin: 0 0 10px; max-width: 760px; }
.wb-destacado-meta { font-size: 14px; color: rgba(255, 255, 255, .82); }
.wb-destacado:hover .wb-destacado-titulo { text-decoration: underline; text-decoration-color: var(--wb-acento); text-underline-offset: 6px; }

/* Rejilla de tarjetas */
.wb-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 32px; }
.wb-tarjeta { display: flex; flex-direction: column; gap: 14px; color: var(--wb-tinta); }
.wb-tarjeta-img { height: 240px; border-radius: 18px; background: var(--wb-suave) center / cover no-repeat; transition: transform .3s; }
.wb-tarjeta:hover .wb-tarjeta-img { transform: translateY(-4px); }
.wb-tarjeta-cat { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--wb-acento-texto); }
.wb .wb-tarjeta-titulo { font-family: var(--wb-titular); font-weight: 700; font-size: 25px; line-height: 1.18; color: var(--wb-tinta); margin: -4px 0 0; }
.wb-tarjeta:hover .wb-tarjeta-titulo { color: var(--wb-acento-texto); }
.wb-tarjeta-meta { font-size: 14px; color: var(--wb-gris); }

/* Paginación */
.wb-paginas { display: flex; justify-content: center; gap: 8px; margin-top: 56px; }
.wb-pagina { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--wb-linea); font-size: 14px; font-weight: 600; color: var(--wb-tinta); }
.wb-pagina:hover { border-color: var(--wb-acento); color: var(--wb-acento-texto); }
.wb-pagina.wb-activa { background: var(--wb-acento); border-color: var(--wb-acento); color: var(--wb-tinta); }

/* Artículo */
.wb-migas { font-size: 14px; color: var(--wb-gris); margin-bottom: 18px; }
.wb-migas a { color: var(--wb-gris); }
.wb-migas a:hover { color: var(--wb-acento-texto); }
.wb-migas .wb-migas-cat { color: var(--wb-acento-texto); font-weight: 600; }
.wb-entrada .wb-bajada { margin-bottom: 22px; }
.wb-autor { font-size: 14px; color: var(--wb-gris); }
.wb-autor-nombre { font-weight: 600; color: var(--wb-tinta); }

.wb-fila { display: flex; gap: 40px; align-items: flex-start; max-width: 1200px; margin: 0 auto 56px; }
.wb-col-imagen { flex: 0 0 62%; min-width: 0; }
.wb-imagen { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; }
.wb-col-indice { flex: 1 1 0; min-width: 0; position: sticky; top: 110px; }
.wb-sin-imagen { max-width: 740px; }
.wb-sin-imagen .wb-col-indice { position: static; }

.wb-indice { background: var(--wb-suave); border: 1px solid var(--wb-linea); border-radius: 18px; padding: 28px; }
.wb-rotulo { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--wb-gris-claro); margin-bottom: 14px; }
.wb .wb-indice-lista { list-style: none; counter-reset: wbi; margin: 0 0 18px; padding: 0; }
.wb .wb-indice-lista li { counter-increment: wbi; display: flex; gap: 12px; align-items: baseline; margin: 0 0 12px; padding: 0; }
.wb .wb-indice-lista li::before { content: counter(wbi, decimal-leading-zero); flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--wb-acento-texto); }
.wb-indice-lista a { font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--wb-gris); }
.wb-indice-lista a:hover, .wb-indice-lista a.wb-aqui { color: var(--wb-tinta); text-decoration: underline; text-decoration-color: var(--wb-acento); text-underline-offset: 4px; }
.wb-indice-meta { font-size: 13px; color: var(--wb-gris); padding-top: 14px; margin-bottom: 22px; border-top: 1px solid var(--wb-linea); }

.wb-compartir { display: flex; flex-wrap: wrap; gap: 10px; }
.wb-compartir a, .wb-compartir button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
	border: 1px solid var(--wb-linea); background: #fff; color: var(--wb-tinta); font-size: 17px; line-height: 1; cursor: pointer; transition: border-color .2s, color .2s, transform .2s; }
.wb-compartir a:hover, .wb-compartir button:hover { border-color: var(--wb-acento); color: var(--wb-acento-texto); transform: translateY(-2px); }
.wb-compartir button.wb-copiado { background: var(--wb-acento); border-color: var(--wb-acento); color: var(--wb-tinta); }

.wb-lectura { max-width: 740px; margin: 0 auto; }
.wb-texto p, .wb-texto li { font-size: 18px; line-height: 1.75; color: var(--wb-tinta); }
.wb-texto > p:first-child { font-size: 21px; line-height: 1.6; color: #2B2B33; }
.wb-texto h2 { font-family: var(--wb-titular); font-weight: 700; font-size: 32px; line-height: 1.2; color: var(--wb-tinta); margin: 52px 0 16px; scroll-margin-top: 110px; }
.wb-texto h3 { font-family: var(--wb-titular); font-weight: 600; font-size: 24px; margin: 34px 0 12px; }
.wb-texto ul, .wb-texto ol { padding-left: 1.3em; margin: 0 0 1.4em; }
.wb-texto li { margin-bottom: 10px; }
.wb-texto li::marker { color: var(--wb-acento); }
.wb-texto strong { font-weight: 600; }
.wb-texto a { color: var(--wb-acento-texto); text-decoration: underline; text-underline-offset: 3px; }
.wb-texto blockquote { margin: 32px 0; padding: 6px 0 6px 24px; border-left: 4px solid var(--wb-acento); font-size: 22px; line-height: 1.5; font-weight: 500; }
.wb-cierre { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--wb-linea); }

.wb-relacionados { max-width: 1200px; margin: 88px auto 0; }
.wb .wb-relacionados-titulo { font-family: var(--wb-titular); font-weight: 700; font-size: 34px; color: var(--wb-tinta); margin: 0 0 32px; }

.wb-progreso { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 9999; pointer-events: none; }
.wb-progreso-barra { display: block; width: 0; height: 100%; background: var(--wb-acento); }

/* Página de descarga de la Guía de confianza (/mente/) */
.wb-guia-caja { display: flex; align-items: center; gap: 56px; max-width: 980px; margin: 0 auto; }
.wb-guia-portada { flex: 0 0 300px; width: 300px; height: auto; border-radius: 14px; box-shadow: 0 18px 50px rgba(22, 22, 29, .18); }
.wb-guia-texto { flex: 1 1 0; min-width: 0; }
.wb-guia .wb-bajada { margin: 0 0 30px; }
.wb .wb-boton { display: inline-flex; align-items: center; height: 54px; padding: 0 30px; border-radius: 999px; background: var(--wb-acento); color: var(--wb-tinta);
	font-weight: 600; font-size: 17px; transition: transform .2s, box-shadow .2s; }
.wb .wb-boton:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255, 122, 0, .35); color: var(--wb-tinta); }
.wb-guia-nota { font-size: 14px; color: var(--wb-gris); margin: 14px 0 0; }

@media (max-width: 900px) {
	.wb-guia-caja { flex-direction: column; gap: 32px; text-align: center; }
	.wb-guia-portada { flex: 0 0 auto; width: 220px; }
	#main.wb { padding: 44px 16px 72px; }
	.wb .wb-titulo { font-size: 36px; }
	.wb .wb-titulo-entrada { font-size: 32px; }
	.wb-bajada { font-size: 17px; }
	.wb-pestanas { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 24px; scrollbar-width: none; }
	.wb-pestanas::-webkit-scrollbar { display: none; }
	.wb-pestana { white-space: nowrap; }
	.wb-destacado { height: 380px; margin-bottom: 44px; }
	.wb-destacado-velo { padding: 24px; }
	.wb .wb-destacado-titulo { font-size: 26px; }
	.wb-rejilla { grid-template-columns: 1fr; gap: 40px; }
	.wb-fila { flex-direction: column; gap: 28px; }
	.wb-col-imagen { flex: 0 0 auto; width: 100%; }
	.wb-col-indice { order: -1; width: 100%; position: static; }   /* en celular, el índice va al final del título */
	.wb-texto p, .wb-texto li { font-size: 17px; }
	.wb-texto > p:first-child { font-size: 19px; }
	.wb-texto h2 { font-size: 26px; }
}