/* custom.css — migrado desde wp-custom-css */

.single-post h1.entry-title {
    font-weight: 700 !important;
}

/* ============================================================
   HIDROLIT — Blog Post Custom CSS
   Scope: body.single-post .entry-content
   Para pegar en Flatsome → Personalizar → CSS Personalizado
   ============================================================ */

/* -------------------------------------------------------
   1. TIPOGRAFÍA BASE DEL CONTENIDO
   ------------------------------------------------------- */
body.single-post .entry-content {
  font-size: 17px;
  line-height: 1.8;
  color: #333;
  letter-spacing: 0.01em;
}

body.single-post .entry-content p {
  margin-bottom: 1.5em;
}

/* -------------------------------------------------------
   2. HEADINGS — H2 (secciones principales)
   Borde izquierdo azul + fondo sutil + icono agua
   ------------------------------------------------------- */
body.single-post .entry-content h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: #023C7F;
  margin-top: 2.8em;
  margin-bottom: 1em;
  padding: 16px 20px 16px 22px;
  border-left: 5px solid #449FDC;
  background: linear-gradient(135deg, rgba(68, 159, 220, 0.06) 0%, rgba(2, 60, 127, 0.03) 100%);
  border-radius: 0 8px 8px 0;
  position: relative;
  line-height: 1.35;
}

/* Línea decorativa debajo del H2 */
body.single-post .entry-content h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #449FDC, transparent);
  margin-top: 10px;
  border-radius: 3px;
}

/* Primer H2: sin tanto margin-top */
body.single-post .entry-content h2:first-of-type {
  margin-top: 1.5em;
}

/* -------------------------------------------------------
   3. HEADINGS — H3 (sub-secciones)
   Estilo limpio con acento de color
   ------------------------------------------------------- */
body.single-post .entry-content h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 21px;
  color: #023C7F;
  margin-top: 2em;
  margin-bottom: 0.8em;
  padding-left: 16px;
  border-left: 3px solid #449FDC;
  line-height: 1.4;
  position: relative;
}

/* -------------------------------------------------------
   4. HEADINGS — H4 (sub-sub-secciones)
   ------------------------------------------------------- */
body.single-post .entry-content h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #1a4a7a;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  padding-bottom: 6px;
  border-bottom: 2px solid rgba(68, 159, 220, 0.25);
  line-height: 1.4;
}

/* -------------------------------------------------------
   5. HEADINGS — H5, H6
   ------------------------------------------------------- */
body.single-post .entry-content h5 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #1a4a7a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1.4em;
  margin-bottom: 0.5em;
}

body.single-post .entry-content h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #449FDC;
  margin-top: 1.2em;
  margin-bottom: 0.4em;
}

/* -------------------------------------------------------
   6. ENLACES
   ------------------------------------------------------- */
body.single-post .entry-content a {
  color: #449FDC;
  text-decoration: none;
  border-bottom: 1px solid rgba(68, 159, 220, 0.3);
  transition: all 0.25s ease;
  font-weight: 500;
}

body.single-post .entry-content a:hover {
  color: #023C7F;
  border-bottom-color: #023C7F;
}

/* -------------------------------------------------------
   7. TEXTO EN NEGRITA — resalte de marca
   ------------------------------------------------------- */
body.single-post .entry-content strong {
  color: #1a3a60;
  font-weight: 700;
}

/* -------------------------------------------------------
   8. LISTAS — bullets y números personalizados
   ------------------------------------------------------- */
body.single-post .entry-content ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.5em;
}

body.single-post .entry-content ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 0.7em;
  line-height: 1.7;
}

/* Bullet personalizado: gota de agua ● en azul */
body.single-post .entry-content ul li::before {
  content: '\276F';
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 14px;
}

body.single-post .entry-content ol {
  list-style: none;
  padding-left: 0;
  counter-reset: hidrolit-counter;
  margin-bottom: 1.5em;
}

body.single-post .entry-content ol li {
  position: relative;
  padding-left: 40px;
  margin-bottom: 0.8em;
  line-height: 1.7;
  counter-increment: hidrolit-counter;
}

body.single-post .entry-content ol li::before {
  content: counter(hidrolit-counter);
  position: absolute;
  left: 0;
  top: 1px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #023C7F, #449FDC);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* -------------------------------------------------------
   9. BLOCKQUOTES — caja informativa de marca
   ------------------------------------------------------- */
body.single-post .entry-content blockquote {
  background: linear-gradient(135deg, rgba(2, 60, 127, 0.04), rgba(68, 159, 220, 0.06));
  border-left: 4px solid #449FDC;
  border-radius: 0 12px 12px 0;
  padding: 24px 28px;
  margin: 2em 0;
  font-style: normal;
  position: relative;
}

body.single-post .entry-content blockquote::before {
  content: '\201C';
  font-family: Georgia, serif;
  font-size: 60px;
  color: rgba(68, 159, 220, 0.2);
  position: absolute;
  top: -5px;
  left: 12px;
  line-height: 1;
}

body.single-post .entry-content blockquote p {
  font-size: 17px;
  color: #1a3a60;
  font-weight: 500;
  margin-bottom: 0.5em;
  position: relative;
}

body.single-post .entry-content blockquote p:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------
   10. TABLAS — header en azul HIDROLIT
   ------------------------------------------------------- */
body.single-post .entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: 15px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(2, 60, 127, 0.08);
}

body.single-post .entry-content table thead th,
body.single-post .entry-content table th {
  background: linear-gradient(135deg, #023C7F, #1a5aa0);
  color: #fff;
  font-weight: 600;
  padding: 14px 16px;
  text-align: left;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.single-post .entry-content table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e8eef5;
  color: #333;
}

body.single-post .entry-content table tbody tr:nth-child(even) {
  background: rgba(68, 159, 220, 0.04);
}

body.single-post .entry-content table tbody tr:hover {
  background: rgba(68, 159, 220, 0.08);
}

/* -------------------------------------------------------
   11. IMÁGENES — bordes redondeados y sombra sutil
   ------------------------------------------------------- */
body.single-post .entry-content img {
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  max-width: 100%;
  height: auto;
}

body.single-post .entry-content .wp-caption {
  max-width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

body.single-post .entry-content .wp-caption-text,
body.single-post .entry-content figcaption {
  font-size: 13px;
  color: #6b7c93;
  text-align: center;
  padding: 10px 0 0;
  font-style: italic;
}

/* -------------------------------------------------------
   12. SEPARADOR VISUAL entre secciones H2
   Gradiente sutil que divide grandes bloques
   ------------------------------------------------------- */
body.single-post .entry-content hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, #449FDC, transparent);
  margin: 3em 0;
  opacity: 0.5;
}

/* -------------------------------------------------------
   13. PRIMER PÁRRAFO — estilo introductorio
   ------------------------------------------------------- */
body.single-post .entry-content > p:first-of-type {
  font-size: 18px;
  line-height: 1.8;
  color: #1a3a60;
}

/* -------------------------------------------------------
   14. CÓDIGO INLINE (por si se usa en artículos técnicos)
   ------------------------------------------------------- */
body.single-post .entry-content code {
  background: rgba(68, 159, 220, 0.08);
  color: #023C7F;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* -------------------------------------------------------
   15. RESPONSIVE — ajustes para móvil
   ------------------------------------------------------- */
@media (max-width: 768px) {
  body.single-post .entry-content {
    font-size: 16px;
  }

  body.single-post .entry-content h2 {
    font-size: 22px;
    padding: 14px 16px 14px 18px;
    margin-top: 2em;
  }

  body.single-post .entry-content h3 {
    font-size: 19px;
  }

  body.single-post .entry-content h4 {
    font-size: 17px;
  }

  body.single-post .entry-content blockquote {
    padding: 18px 20px;
  }

  body.single-post .entry-content table {
    font-size: 14px;
  }

  body.single-post .entry-content table th,
  body.single-post .entry-content table td {
    padding: 10px 12px;
  }

  body.single-post .entry-content ol li {
    padding-left: 36px;
  }
}

/* -------------------------------------------------------
   16. EFECTOS PRINT — para impresión limpia
   ------------------------------------------------------- */
@media print {
  body.single-post .entry-content h2 {
    background: none;
    border-left-color: #000;
    color: #000;
  }

  body.single-post .entry-content a {
    color: #000;
    border-bottom: none;
  }

  body.single-post .entry-content img {
    box-shadow: none;
  }
}