/* ============================================================================
   CDriel — estilos del BLOG dentro del tema propio.
   ----------------------------------------------------------------------------
   Aqui solo va lo que el sitio no tiene: articulo, listado, FAQ y tarjetas.
   Todo lo demas (tipografia, colores, botones, encabezado, pie) viene de
   /css/site.css, que es la misma hoja del sitio. Las variables --cd-* estan
   definidas alli; este archivo NO las redefine, para que un cambio de marca en
   el sitio arrastre al blog sin tocar dos archivos.
   ========================================================================== */

/* ---- Columna del documento --------------------------------------------- */
.cd-doc { padding-block: clamp(28px, 5vw, 56px) clamp(48px, 7vw, 96px); }
.cd-doc-cab { margin-bottom: clamp(20px, 3vw, 32px); }
.cd-doc-bajada {
  max-width: 58ch; color: var(--texto-suave);
  font-size: 1.05rem; margin: 10px 0 0;
}
.cd-titulo {
  font-family: var(--display); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.06;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  margin: 0; color: var(--texto);
}
.cd-meta {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--cd-gris); margin: 0 0 10px;
}
.cd-meta a { color: var(--cd-rojo); text-decoration: none; }

/* ---- Articulo ----------------------------------------------------------- */
/* El limite de medida va SOBRE EL TITULO, nunca sobre el contenedor.
   `ch` se calcula con el font-size del propio elemento: 26ch en la cabecera (18px) son
   264px, mientras que 26ch en el h1 (51px) son 792px. Ponerlo en el contenedor encajonaba
   el titulo a un tercio de lo pretendido y lo partia en SEIS lineas. Visto en vivo. */
.cd-cabecera { max-width: none; }
.cd-cabecera .cd-titulo { max-width: 18ch; }
@media (min-width: 900px) { .cd-cabecera .cd-titulo { max-width: 22ch; } }

.cd-cuerpo {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(22px, 4vw, 60px);
  margin-top: clamp(20px, 3vw, 32px);
}
/* El TEXTO se limita a la medida comoda de lectura; lo ancho (tablas, imagenes,
   cajas) usa todo el contenedor. 72ch ~ 72 caracteres por linea. */
.cd-cuerpo > p,
.cd-cuerpo > ul,
.cd-cuerpo > ol,
.cd-cuerpo > h2,
.cd-cuerpo > h3,
.cd-cuerpo > .schema-faq { max-width: 72ch; }

.cd-cuerpo h2, .cd-cuerpo h3 {
  font-family: var(--display); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.1; color: var(--texto);
}
.cd-cuerpo h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2.2em 0 .6em; }
.cd-cuerpo h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); margin: 1.8em 0 .5em; }
/* Filete rojo bajo cada H2: el recurso de seccion del sitio. */
.cd-cuerpo h2::after {
  content: ""; display: block; width: 44px; height: 3px;
  margin-top: 12px; background: var(--cd-rojo);
}
.cd-cuerpo p { margin: 0 0 1.15em; }
.cd-cuerpo strong { color: var(--texto); font-weight: 600; }
.cd-cuerpo a { color: var(--cd-rojo-oscuro); text-underline-offset: 3px; }
.cd-cuerpo a:hover { color: var(--cd-rojo); }
.cd-cuerpo ul, .cd-cuerpo ol { padding-left: 1.25em; margin: 0 0 1.3em; }
.cd-cuerpo li { margin-bottom: .45em; }
.cd-cuerpo li::marker { color: var(--cd-rojo); }
.cd-cuerpo img { max-width: 100%; height: auto; border-radius: var(--radio); }

/* Portada del articulo: acotada para que el texto empiece pronto. */
.cd-cuerpo > figure:first-child { margin: 0 0 32px; }
.cd-cuerpo > figure:first-child img {
  width: 100%; height: clamp(200px, 32vw, 360px); object-fit: cover;
}

/* ---- Tabla -------------------------------------------------------------- */
.cd-cuerpo table {
  width: 100%; border-collapse: collapse; margin: 28px 0;
  font-size: .96rem; border: 1px solid var(--linea);
}
.cd-cuerpo thead tr { background: var(--cd-negro); color: #fff; }
.cd-cuerpo th {
  font-family: var(--display); font-weight: 700; letter-spacing: -.01em;
  text-align: left; padding: 12px 14px;
}
.cd-cuerpo td { padding: 12px 14px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.cd-cuerpo tbody tr:nth-child(even) { background: #FAFBFB; }

/* Cajas y pull-quotes: el generador los emite con estilo en linea; aqui solo se
   normaliza el radio para que no desentonen con las esquinas rectas del sitio. */
.cd-cuerpo div[style*="background"] { border-radius: var(--radio) !important; }
.cd-cuerpo a[href*="/contacto"][style*="border-radius"] { border-radius: var(--radio) !important; }

/* ---- FAQ (bloque de Yoast, genera el schema FAQPage) -------------------- */
.cd-cuerpo .schema-faq { margin: 8px 0 0; }
.cd-cuerpo .schema-faq-section { border-top: 1px solid var(--linea); padding: 18px 0; }
.cd-cuerpo .schema-faq-question {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: -.01em; color: var(--texto); margin-bottom: 6px;
}
.cd-cuerpo .schema-faq-answer { margin: 0; color: var(--texto-suave); }

/* ---- Etiquetas y navegacion entre entradas ------------------------------ */
.cd-tags { margin-top: 22px; font-family: var(--mono); font-size: .78rem; color: var(--cd-gris); }
.cd-tags a { color: var(--cd-gris); }
.cd-tags a:hover { color: var(--cd-rojo); }

.cd-nav-posts { display: grid; gap: 14px; margin-top: 32px; }
@media (min-width: 760px) { .cd-nav-posts { grid-template-columns: 1fr 1fr; } }
.cd-nav-posts a {
  display: block; padding: 18px 20px; text-decoration: none;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  transition: border-color .18s ease, transform .18s ease;
}
.cd-nav-posts a:hover { border-color: var(--cd-rojo); transform: translateY(-2px); }
.cd-nav-posts span {
  display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--cd-gris); margin-bottom: 6px;
}
.cd-nav-posts strong {
  font-family: var(--display); font-weight: 700; letter-spacing: -.01em;
  color: var(--texto); font-size: 1rem; line-height: 1.25;
}
.cd-nav-sig { text-align: right; }

/* ---- Listado ------------------------------------------------------------ */
.cd-lista { display: grid; gap: 24px; }
@media (min-width: 900px) { .cd-lista { grid-template-columns: repeat(2, 1fr); } }
.cd-tarjeta {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  transition: border-color .18s ease, transform .18s ease;
}
.cd-tarjeta:hover { border-color: var(--cd-rojo); transform: translateY(-2px); }
.cd-tarjeta-foto { display: block; }
.cd-tarjeta-foto img { width: 100%; height: 220px; object-fit: cover; display: block; border-radius: 0; }
.cd-tarjeta-cuerpo { padding: 20px clamp(18px, 2.4vw, 26px) 24px; }
.cd-tarjeta-titulo {
  font-family: var(--display); font-weight: 700; letter-spacing: -.015em;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.2; margin: 0 0 10px;
}
.cd-tarjeta-titulo a { color: var(--texto); text-decoration: none; }
.cd-tarjeta-titulo a:hover { color: var(--cd-rojo); }
.cd-tarjeta-extracto { color: var(--texto-suave); margin: 0; font-size: .98rem; }

.cd-vacio { color: var(--texto-suave); }

/* ---- Paginacion --------------------------------------------------------- */
.pagination { margin-top: 36px; display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px; text-decoration: none;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); color: var(--texto); font-weight: 500;
}
.pagination .page-numbers.current { background: var(--cd-rojo); border-color: var(--cd-rojo); color: #fff; }
.pagination .page-numbers:hover { border-color: var(--cd-rojo); }

@media (max-width: 640px) {
  .cd-cuerpo table { display: block; overflow-x: auto; }
}