/* ============================================================
   cazorla.online - entradas.css
   Plantilla visual para entradas del blog (Gutenberg + Betheme).
   Iconos: Tabler webfont (ya cargada en el header).
   Namespace: .cz-post  ·  Sin "body" (las clases propias ya ganan).
   Subir a: betheme-child/css/entradas.css
   ============================================================ */

/*---------- CONTENEDOR / BASE TIPOGRAFICA ------------*/
.cz-post { --cz-accent:#9a7b3f; max-width:820px; margin:0 auto; padding:1rem 0; }
.cz-post p { font-size:17px; line-height:1.75; margin:0 0 1.2rem; color:#2f2e2b; }
.cz-post a { color:#9a7b3f; text-decoration:underline; text-underline-offset:2px; }
.cz-post a:hover { text-decoration:none; }
.cz-post img { max-width:100%; height:auto; }
.cz-post h2, .cz-post h3 { color:#2b2a27; }
.cz-post ul, .cz-post ol { margin:0 0 1.2rem; padding-left:1.3rem; }
.cz-post li { font-size:17px; line-height:1.7; margin-bottom:.4rem; }

/*---------- ENTRADILLA DESTACADA ------------*/
.cz-post-lead { font-size:20px; line-height:1.7; color:#4a463f; border-left:4px solid var(--cz-accent); background:#f6f4ee; padding:1.1rem 1.3rem; border-radius:0 10px 10px 0; margin:0 0 2.2rem; }
.cz-post-lead p { font-size:20px; color:#4a463f; margin:0; }

/*---------- TABLA DE CONTENIDOS (opcional) ------------*/
.cz-post-toc { background:#fff; border:1px solid #e4e2d9; border-radius:12px; padding:1.1rem 1.3rem; margin:0 0 2.2rem; }
.cz-post-toc strong { display:block; font-weight:600; font-size:15px; margin-bottom:.6rem; color:#5f5e5a; }
.cz-post-toc ul { list-style:none; margin:0; padding:0; }
.cz-post-toc li { margin-bottom:.35rem; }
.cz-post-toc a { color:#4a463f; text-decoration:none; }
.cz-post-toc a:hover { color:var(--cz-accent); text-decoration:underline; }

/*---------- BLOQUE ESTANDAR (H2 + icono en circulo) ------------*/
.cz-post-bloque { padding-top:2rem; margin-bottom:2.4rem; border-top:1px solid #e9e7df; }
.cz-post-bloque:first-of-type { border-top:0; padding-top:0; }
.cz-post-bloque-titulo { display:flex; align-items:center; gap:14px; margin-bottom:1rem; }
.cz-post-bloque-titulo i { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:25px; flex-shrink:0; color:var(--cz-accent); background:color-mix(in srgb, var(--cz-accent) 14%, #fff); }
.cz-post-bloque-titulo h2 { margin:0; font-size:27px; line-height:1.25; }
.cz-post-bloque-titulo h3 { margin:0; font-size:21px; line-height:1.3; }

/* Modificadores de color por bloque (reutilizables, a prueba de reordenaciones) */
.cz-post-bloque--ambar { --cz-accent:#c8911f; }
.cz-post-bloque--dorado { --cz-accent:#9a7b3f; }
.cz-post-bloque--verde { --cz-accent:#6f8f6a; }
.cz-post-bloque--terracota { --cz-accent:#a85d4c; }
.cz-post-bloque--azul { --cz-accent:#4f7d8c; }
.cz-post-bloque--rosa { --cz-accent:#b0506a; }
.cz-post-bloque--tierra { --cz-accent:#7a6f5d; }

/*---------- IMAGEN CON PIE (figure) ------------*/
.cz-post-figura { margin:0 0 1.6rem; }
.cz-post-figura img { width:100%; display:block; border-radius:12px; }
.cz-post-figura figcaption { font-size:13px; color:#888780; text-align:center; margin-top:.5rem; font-style:italic; }

/*---------- TARJETAS DE VENTAJAS (grid) ------------*/
.cz-post-ventajas { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin:0 0 1rem; }
.cz-post-card { background:#fff; border:1px solid #e4e2d9; border-radius:12px; padding:1.2rem 1.3rem; }
.cz-post-card i { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:.7rem; color:var(--cz-accent); background:color-mix(in srgb, var(--cz-accent) 14%, #fff); }
.cz-post-card strong { display:block; font-weight:600; font-size:16px; margin:0 0 .3rem; color:#2b2a27; }
.cz-post-card p { font-size:15px; line-height:1.55; color:#5f5e5a; margin:0; }
@media (max-width:767px) {
  .cz-post-ventajas { grid-template-columns:1fr; }
  .cz-post-card { text-align:center; }
  .cz-post-card i { margin-left:auto; margin-right:auto; }
}

/*---------- CAJA DE AVISO / DATO (callout) ------------*/
.cz-post-aviso { display:flex; gap:14px; align-items:flex-start; background:#f6f4ee; border-left:4px solid var(--cz-accent); border-radius:0 10px 10px 0; padding:1.1rem 1.3rem; margin:0 0 1.6rem; }
.cz-post-aviso i { font-size:24px; color:var(--cz-accent); flex-shrink:0; margin-top:2px; }
.cz-post-aviso p { font-size:16px; line-height:1.6; margin:0; color:#4a463f; }
.cz-post-aviso strong { color:#2b2a27; }
.cz-post-aviso--info { --cz-accent:#4f7d8c; background:#eef4f6; }
.cz-post-aviso--alerta { --cz-accent:#c08a2e; background:#fbf3e3; }

/*---------- BLOQUE DE DIFERENCIACION (comparativa neutral) ------------*/
.cz-post-compara { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin:0 0 1rem; }
.cz-post-compara-item { background:#fff; border:1px solid #e4e2d9; border-radius:12px; padding:1.1rem 1.3rem; }
.cz-post-compara-item h3 { font-size:17px; margin:0 0 .5rem; color:#2b2a27; }
.cz-post-compara-item p { font-size:15px; line-height:1.6; color:#5f5e5a; margin:0; }
@media (max-width:767px) {
  .cz-post-compara { grid-template-columns:1fr; }
}

/*---------- CUIDADOS / PASOS (lista numerada estilizada) ------------*/
.cz-post-cuidados { list-style:none; counter-reset:paso; margin:0 0 1rem; padding:0; }
.cz-post-paso { counter-increment:paso; position:relative; padding:0 0 1.1rem 3rem; }
.cz-post-paso:before { content:counter(paso); position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:15px; color:#fff; background:var(--cz-accent); }
.cz-post-paso strong { display:block; font-size:16px; color:#2b2a27; margin-bottom:.2rem; }
.cz-post-paso p { font-size:15px; line-height:1.6; color:#5f5e5a; margin:0; }

/*---------- LISTADO DE PRODUCTOS RELACIONADOS ------------*/
.cz-post-productos { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin:0 0 1rem; }
.cz-post-producto { background:#fff; border:1px solid #e4e2d9; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.cz-post-producto img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.cz-post-producto-cuerpo { padding:.9rem 1rem 1.1rem; display:flex; flex-direction:column; flex:1; }
.cz-post-producto strong { display:block; font-size:15px; line-height:1.35; color:#2b2a27; margin:0 0 .6rem; }
.cz-post-producto a { margin-top:auto; display:inline-block; font-size:14px; font-weight:600; color:var(--cz-accent); text-decoration:none; }
.cz-post-producto a:hover { text-decoration:underline; }
@media (max-width:959px) {
  .cz-post-productos { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:767px) {
  .cz-post-productos { grid-template-columns:1fr; }
}

/*---------- FAQ (acordeon nativo <details>) ------------*/
.cz-post-faq { margin:0 0 1rem; }
.cz-post-faq-item { border:1px solid #e4e2d9; border-radius:10px; margin-bottom:.7rem; background:#fff; overflow:hidden; }
.cz-post-faq-item summary { list-style:none; cursor:pointer; padding:1rem 1.2rem; font-weight:600; font-size:16px; color:#2b2a27; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cz-post-faq-item summary::-webkit-details-marker { display:none; }
.cz-post-faq-item summary:after { content:"\ea61"; font-family:"tabler-icons"; font-weight:400; font-size:20px; color:var(--cz-accent); transition:transform .2s ease; }
.cz-post-faq-item[open] summary:after { transform:rotate(180deg); }
.cz-post-faq-item .cz-post-faq-cuerpo { padding:0 1.2rem 1.1rem; }
.cz-post-faq-item .cz-post-faq-cuerpo p { font-size:15px; line-height:1.65; color:#5f5e5a; margin:0; }

/*---------- CTA FINAL ------------*/
.cz-post-cta { text-align:center; background:color-mix(in srgb, var(--cz-accent) 12%, #fff); border:1px solid color-mix(in srgb, var(--cz-accent) 30%, #fff); border-radius:14px; padding:2rem 1.5rem; margin:2.5rem 0 0; }
.cz-post-cta h3 { font-size:22px; margin:0 0 .6rem; color:#2b2a27; }
.cz-post-cta p { font-size:16px; color:#5f5e5a; margin:0 0 1.2rem; }
.cz-post-cta .cz-post-btn { display:inline-block; background:var(--cz-accent); color:#fff; text-decoration:none; font-weight:600; font-size:16px; padding:.8rem 1.8rem; border-radius:8px; }
.cz-post-cta .cz-post-btn:hover { filter:brightness(.93); }

/*---------- AJUSTES RESPONSIVE GENERALES ------------*/
@media (max-width:767px) {
  .cz-post p, .cz-post li { font-size:16px; }
  .cz-post-lead, .cz-post-lead p { font-size:18px; }
  .cz-post-bloque-titulo h2 { font-size:23px; }
  .cz-post-bloque-titulo i { width:42px; height:42px; font-size:22px; }
}