/* FIT 24x7 — Estilo del contenido del blog y los artículos.
   Solo se carga en /blog/ y en las entradas. El armazón va en chrome.css. */

:root{
  --gold:#E0AF26;
  --gold-dim:rgba(224,175,38,0.12);
  --border-gold:rgba(224,175,38,0.22);
  --black:#000;
  --surface:rgba(255,255,255,0.04);
  --surface2:rgba(255,255,255,0.07);
  --border:rgba(255,255,255,0.08);
  --text:#f5f5f7;
  --text-dim:rgba(245,245,247,0.56);
  --text-muted:rgba(245,245,247,0.32);
}

/* ── 2. Fondo y tipografía base ── */
html,body{ background:#000 !important; }
body{
  color:var(--text) !important;
  font-family:-apple-system,'SF Pro Text','Barlow',sans-serif !important;
  -webkit-font-smoothing:antialiased;
}
#page,.site-content,.ast-container,#primary,#content,
.ast-separate-container,.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,.entry-content,article.ast-article-single{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}
.ast-container{ max-width:1100px !important; padding-left:24px !important; padding-right:24px !important; }
.site-content{ padding:56px 0 72px !important; }
/* En un artículo, medida de lectura cómoda (~75 caracteres por línea) */
body.single-post .ast-container{ max-width:760px !important; }
body.single-post .entry-header{ margin-bottom:32px !important; padding-bottom:24px !important; border-bottom:1px solid var(--border) !important; }

/* ── 3. Títulos ── */
.entry-title,.entry-content h1,.entry-content h2,.entry-content h3,
.entry-content h4,.elementor-heading-title{
  font-family:'Barlow Condensed',-apple-system,sans-serif !important;
  color:var(--text) !important;
  letter-spacing:-0.01em !important;
  line-height:1.08 !important;
  font-weight:700 !important;
}
.entry-title{ font-size:clamp(2.1rem,5vw,3.4rem) !important; margin-bottom:14px !important; }
.entry-content h2{ font-size:clamp(1.6rem,3.4vw,2.3rem) !important; margin:44px 0 14px !important; }
.entry-content h3{ font-size:clamp(1.3rem,2.6vw,1.6rem) !important; margin:32px 0 10px !important; color:var(--gold) !important; }

/* ── 4. Cuerpo del artículo ── */
.entry-content{ font-size:1.05rem !important; line-height:1.75 !important; color:rgba(245,245,247,0.82) !important; }
.entry-content p{ margin-bottom:20px !important; }
.entry-content strong,.entry-content b{ color:var(--text) !important; }
.entry-content a{ color:var(--gold) !important; text-decoration:underline; text-underline-offset:3px; }
.entry-content a:hover{ opacity:.8; }
.entry-content ul,.entry-content ol{ margin:0 0 22px 1.2em !important; }
.entry-content li{ margin-bottom:9px !important; }
.entry-content blockquote{
  border-left:3px solid var(--gold) !important;
  background:var(--surface) !important;
  padding:18px 24px !important; margin:28px 0 !important; border-radius:0 10px 10px 0;
}
.entry-content img{ border-radius:12px !important; height:auto; }
.entry-content table{ color:var(--text) !important; }
.entry-content table td,.entry-content table th{ border-color:var(--border) !important; }
.entry-meta,.entry-meta *,.posted-on,.ast-blog-meta-container{ color:var(--text-muted) !important; }
.entry-meta a{ color:var(--text-dim) !important; }

/* ── 5. Tarjetas del listado del blog ── */
.elementor-posts .elementor-post{
  background:var(--surface) !important;
  border:0.5px solid var(--border) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  transition:transform .25s ease,border-color .25s ease;
}
.elementor-posts .elementor-post:hover{ transform:translateY(-3px); border-color:var(--border-gold) !important; }
.elementor-posts .elementor-post__card{ background:transparent !important; border:0 !important; box-shadow:none !important; }
.elementor-posts .elementor-post__title,
.elementor-posts .elementor-post__title a{
  font-family:'Barlow Condensed',sans-serif !important;
  font-size:1.28rem !important; font-weight:600 !important; line-height:1.2 !important;
  color:var(--text) !important; text-decoration:none !important;
}
.elementor-posts .elementor-post:hover .elementor-post__title a{ color:var(--gold) !important; }
.elementor-posts .elementor-post__excerpt,
.elementor-posts .elementor-post__excerpt p{ color:var(--text-dim) !important; font-size:.92rem !important; line-height:1.6 !important; }
.elementor-posts .elementor-post__read-more{
  color:var(--gold) !important; font-weight:700 !important;
  font-size:.76rem !important; letter-spacing:.11em !important; text-transform:uppercase !important;
  text-decoration:none !important;
}
.elementor-posts .elementor-post__meta-data,
.elementor-posts .elementor-post__meta-data *{
  color:var(--text-muted) !important; border-color:var(--border) !important; font-size:.78rem !important;
}
.elementor-posts .elementor-post__thumbnail{ border-radius:0 !important; }

/* ── 6. Paginación y botones ── */
.page-numbers,.nav-links a,.ast-page-builder-template .page-numbers{
  color:var(--text-dim) !important; border-color:var(--border) !important; background:transparent !important;
}
.page-numbers.current,.page-numbers:hover{ color:#000 !important; background:var(--gold) !important; border-color:var(--gold) !important; }

/* ── 7. Botones dentro del artículo ──
   El problema: la regla `.entry-content a{color:gold}` de arriba también
   pintaba el TEXTO de los botones, que quedaba dorado sobre amarillo y no
   se leía hasta pasar el ratón. Aquí se les devuelve su aspecto. */
.entry-content .wp-block-button__link,
.entry-content .wp-element-button,
.entry-content a.wp-block-button__link,
.entry-content .elementor-button,
.entry-content a.button,
.entry-content button:not(.wp-block-search__button){
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  background:var(--gold) !important;
  color:#000 !important;
  border:0 !important;
  border-radius:980px !important;
  padding:13px 28px !important;
  font-family:-apple-system,'SF Pro Text','Barlow',sans-serif !important;
  font-size:.95rem !important; font-weight:700 !important; line-height:1.2 !important;
  letter-spacing:-0.01em !important;
  text-decoration:none !important; text-shadow:none !important;
  box-shadow:none !important;
  transition:opacity .2s ease, transform .2s ease !important;
}
.entry-content .wp-block-button__link:hover,
.entry-content .wp-element-button:hover,
.entry-content a.wp-block-button__link:hover,
.entry-content .elementor-button:hover,
.entry-content a.button:hover{
  background:var(--gold) !important; color:#000 !important;
  opacity:.88 !important; transform:translateY(-1px);
}
/* Variante de contorno */
.entry-content .is-style-outline .wp-block-button__link,
.entry-content .is-style-outline > .wp-element-button{
  background:transparent !important;
  color:var(--gold) !important;
  border:1px solid var(--border-gold) !important;
}
.entry-content .is-style-outline .wp-block-button__link:hover{
  background:var(--gold-dim) !important; color:var(--gold) !important; border-color:var(--gold) !important;
}
.entry-content .wp-block-buttons{ margin:28px 0 !important; gap:12px !important; }

/* ── 8. Zona de comentarios ──
   Astra la pintaba de blanco con texto claro (invisible) y los campos
   en gris #666 sobre blanco. Se rehace con el fondo oscuro del sitio. */
#comments,.comments-area,.comment-respond,#respond,
.ast-separate-container .comment-respond,
.ast-separate-container .comments-area,
.ast-separate-container .ast-comment-list li{
  background:transparent !important;
  border-color:var(--border) !important;
  box-shadow:none !important;
}
.comment-respond,#respond{
  background:var(--surface) !important;
  border:0.5px solid var(--border) !important;
  border-radius:16px !important;
  padding:28px 28px 26px !important;
  margin-top:44px !important;
}
.comment-reply-title,#reply-title,.comments-title{
  font-family:'Barlow Condensed',-apple-system,sans-serif !important;
  font-size:1.65rem !important; font-weight:700 !important; line-height:1.15 !important;
  color:var(--text) !important; margin:0 0 8px !important;
}
.comment-notes,.logged-in-as,.comment-form-cookies-consent label,
.comment-metadata,.comment-metadata a,.says{
  font-size:.86rem !important; line-height:1.6 !important; color:var(--text-dim) !important;
}
.logged-in-as a,.comment-metadata a:hover{ color:var(--gold) !important; }
.comment-form label{ display:block; font-size:.84rem !important; color:var(--text-dim) !important; margin-bottom:6px !important; }
.comment-form p{ margin-bottom:16px !important; }

.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea,
#respond input[type=text],#respond input[type=email],
#respond input[type=url],#respond textarea{
  width:100% !important;
  background:rgba(255,255,255,0.05) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  border-radius:10px !important;
  padding:12px 14px !important;
  font-family:-apple-system,'SF Pro Text','Barlow',sans-serif !important;
  font-size:.95rem !important;
  box-shadow:none !important;
  transition:border-color .2s ease, background .2s ease;
}
.comment-form input::placeholder,.comment-form textarea::placeholder,
#respond input::placeholder,#respond textarea::placeholder{ color:var(--text-muted) !important; opacity:1; }
.comment-form input:focus,.comment-form textarea:focus,
#respond input:focus,#respond textarea:focus{
  outline:none !important;
  border-color:var(--border-gold) !important;
  background:rgba(255,255,255,0.08) !important;
}
.comment-form textarea,#respond textarea{ min-height:130px !important; resize:vertical; }
.comment-form-cookies-consent{ display:flex !important; align-items:flex-start; gap:9px; }
.comment-form-cookies-consent input[type=checkbox]{ width:auto !important; margin-top:3px; accent-color:var(--gold); }
.comment-form-cookies-consent label{ margin:0 !important; }

.comment-form .submit,#respond input[type=submit],#respond .submit{
  background:var(--gold) !important;
  color:#000 !important;
  border:0 !important;
  border-radius:980px !important;
  padding:13px 30px !important;
  font-family:-apple-system,'SF Pro Text','Barlow',sans-serif !important;
  font-size:.95rem !important; font-weight:700 !important;
  cursor:pointer;
  transition:opacity .2s ease, transform .2s ease;
}
.comment-form .submit:hover,#respond input[type=submit]:hover{ opacity:.88; transform:translateY(-1px); }
#cancel-comment-reply-link{ color:var(--gold) !important; font-size:.86rem !important; margin-left:10px; }

/* Comentarios ya publicados */
.comment-list,.ast-comment-list{ list-style:none !important; margin:0 0 12px !important; padding:0 !important; }
.comment-list li.comment,.ast-comment-list li{
  background:var(--surface) !important;
  border:0.5px solid var(--border) !important;
  border-radius:14px !important;
  padding:20px 22px !important;
  margin-bottom:14px !important;
  list-style:none !important;
}
.comment-list .children{ margin:14px 0 0 20px !important; padding:0 !important; border-left:1px solid var(--border); padding-left:16px !important; }
.comment-author,.comment-author .fn,.ast-comment-cite-wrap .url{
  font-family:'Barlow Condensed',sans-serif !important;
  font-size:1.12rem !important; font-weight:700 !important; color:var(--text) !important;
  font-style:normal !important; text-decoration:none !important;
}
.comment-content,.comment-content p,.ast-comment-content{
  color:rgba(245,245,247,0.78) !important; font-size:.97rem !important; line-height:1.7 !important;
}
.comment-author img.avatar,.avatar{ border-radius:50% !important; }
.reply a,.comment-reply-link{
  color:var(--gold) !important; font-size:.82rem !important; font-weight:600 !important;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none !important;
}
.no-comments{ color:var(--text-dim) !important; }

/* ── 9. Restos del amarillo antiguo (#F4AF01) → bronce ── */
.entry-content .has-text-color[style*="244, 175"],
.entry-content [style*="#F4AF01"],.entry-content [style*="#f4af01"]{ color:var(--gold) !important; }
.entry-content [style*="background-color:#F4AF01"],
.entry-content [style*="background-color:#f4af01"]{ background-color:var(--gold) !important; }

/* ── 10. Buscador y navegación entre entradas ── */
.wp-block-search__input,.search-field{
  background:rgba(255,255,255,0.05) !important; color:var(--text) !important;
  border:1px solid var(--border) !important; border-radius:10px !important; padding:11px 14px !important;
}
.wp-block-search__button,.search-submit{
  background:var(--gold) !important; color:#000 !important; border:0 !important;
  border-radius:980px !important; padding:11px 22px !important; font-weight:700 !important;
}
.post-navigation a,.nav-previous a,.nav-next a{ color:var(--text) !important; text-decoration:none !important; }
.post-navigation a:hover{ color:var(--gold) !important; }
.ast-single-post-navigation,.post-navigation{ border-top:1px solid var(--border) !important; padding-top:24px !important; }

/* ── 11. Tablas dentro del artículo ──
   Astra les dejaba un borde casi blanco y en el móvil se salían de la
   pantalla. Ahora tienen su propio marco y se desplazan solas. */
.entry-content .wp-block-table{ margin:28px 0 !important; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.entry-content table{
  width:100% !important; border-collapse:collapse !important;
  background:var(--surface) !important;
  border:0.5px solid var(--border) !important;
  border-radius:12px !important; overflow:hidden;
  font-size:.94rem !important;
}
.entry-content table th{
  background:var(--gold-dim) !important;
  color:var(--text) !important;
  font-family:'Barlow Condensed',sans-serif !important;
  font-size:.82rem !important; font-weight:700 !important;
  letter-spacing:.1em !important; text-transform:uppercase !important;
  text-align:left !important; padding:13px 16px !important;
  border-bottom:1px solid var(--border-gold) !important;
}
.entry-content table td{
  color:rgba(245,245,247,0.78) !important;
  padding:13px 16px !important; line-height:1.6 !important;
  border:0 !important; border-bottom:1px solid var(--border) !important;
  vertical-align:top !important;
}
.entry-content table tr:last-child td{ border-bottom:0 !important; }
.entry-content table tbody tr:nth-child(odd) td{ background:rgba(255,255,255,0.02) !important; }
/* Cuando la tabla no tiene <th>, la primera fila hace de encabezado */
.entry-content table tbody tr:first-child td strong,
.entry-content table tbody tr:first-child td b{ color:var(--gold) !important; }
@media (max-width:640px){
  .entry-content .wp-block-table table{ min-width:520px !important; }
  .entry-content table th,.entry-content table td{ padding:11px 13px !important; font-size:.88rem !important; }
}

/* ── 12. Imágenes con pie ── */
.entry-content figure{ margin:28px 0 !important; }
.entry-content figcaption,.wp-element-caption{
  margin-top:10px !important; font-size:.84rem !important; line-height:1.55 !important;
  color:var(--text-muted) !important; text-align:center !important;
}