/* =====================================================================
   ESTILOS DE LOS BLOQUES ESPECIALES DE LAS NOTAS (Foto, Galería, Texto con color,
   Recuadro, Botón de WhatsApp). Los usa la nota publicada Y la vista previa del panel,
   así lo que se ve en el panel es igual a lo que se publica.
   ===================================================================== */

/* Los subtítulos siempre empiezan debajo de las fotos que van al costado */
.article-body h2, .article-body h3 { clear: both; }
.article-body::after { content: ""; display: block; clear: both; }

/* ---------- FOTO ---------- */
.nota-foto { margin: 32px auto; padding: 0; }
.nota-foto img {
  display: block; width: 100%; height: auto; margin: 0;
  border-radius: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.nota-foto figcaption, .nota-galeria figcaption {
  margin-top: 10px; font-size: 0.9rem; line-height: 1.5; color: #6b7280; text-align: center; font-style: italic;
}
.nota-foto--chica    { width: 35%; }
.nota-foto--mediana  { width: 55%; }
.nota-foto--grande   { width: 80%; }
.nota-foto--completa { width: 100%; }
.nota-foto--centro   { clear: both; }
.nota-foto--izquierda { float: left;  margin: 6px 28px 18px 0; }
.nota-foto--derecha   { float: right; margin: 6px 0 18px 28px; }
.nota-foto--izquierda.nota-foto--completa,
.nota-foto--derecha.nota-foto--completa { float: none; margin: 32px auto; }

/* ---------- GALERÍA ---------- */
.nota-galeria { margin: 36px 0; padding: 0; clear: both; }
.nota-galeria-fotos { display: grid; gap: 16px; }
.nota-galeria--1 .nota-galeria-fotos { grid-template-columns: 1fr; }
.nota-galeria--2 .nota-galeria-fotos { grid-template-columns: repeat(2, 1fr); }
.nota-galeria--3 .nota-galeria-fotos { grid-template-columns: repeat(3, 1fr); }
.nota-galeria--4 .nota-galeria-fotos { grid-template-columns: repeat(4, 1fr); }
.nota-galeria img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0;
  border-radius: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.nota-galeria--sin-recorte img { aspect-ratio: auto; height: auto; object-fit: contain; }
.nota-galeria--sin-recorte .nota-galeria-fotos { align-items: start; }

/* ---------- TEXTO CON COLOR Y TAMAÑO ---------- */
.nota-texto { margin: 0 0 25px; }
.nota-texto p { margin: 0 0 12px; }
.nota-texto p:last-child { margin-bottom: 0; }
.nota-color--azul    { color: #172dad; }
.nota-color--naranja { color: #f76507; }
.nota-color--gris    { color: #6b7280; }
.nota-color--negro   { color: #111112; }
.nota-color--verde   { color: #15803d; }
.nota-color--rojo    { color: #b91c1c; }
.nota-tam--chico      { font-size: 0.9em; }
.nota-tam--normal     { font-size: 1em; }
.nota-tam--grande     { font-size: 1.35em; line-height: 1.5; }
.nota-tam--muy-grande { font-size: 1.8em; line-height: 1.3; }
.nota-negrita, .nota-negrita p { font-weight: 600; }
.nota-alinear--izquierda, .nota-alinear--izquierda p { text-align: left !important; }
.nota-alinear--centro,    .nota-alinear--centro p    { text-align: center !important; }
.nota-alinear--derecha,   .nota-alinear--derecha p   { text-align: right !important; }

/* ---------- RECUADRO DESTACADO ---------- */
.nota-recuadro {
  clear: both; margin: 32px 0; padding: 22px 26px; border-radius: 12px; border-left: 5px solid;
}
.nota-recuadro p { margin: 0 0 10px; }
.nota-recuadro p:last-child { margin-bottom: 0; }
.nota-recuadro ul { margin-bottom: 0; }
.nota-recuadro-titulo { font-weight: 600; font-size: 1.1em; margin-bottom: 8px !important; }
.nota-recuadro--azul    { background: #eef1fc; border-color: #172dad; }
.nota-recuadro--azul .nota-recuadro-titulo { color: #172dad; }
.nota-recuadro--naranja { background: #fff4ec; border-color: #f76507; }
.nota-recuadro--naranja .nota-recuadro-titulo { color: #d95600; }
.nota-recuadro--gris    { background: #f3f4f6; border-color: #9ca3af; }
.nota-recuadro--gris .nota-recuadro-titulo { color: #374151; }
.nota-recuadro--verde   { background: #ecfdf3; border-color: #15803d; }
.nota-recuadro--verde .nota-recuadro-titulo { color: #15803d; }

/* ---------- BOTÓN DE WHATSAPP ---------- */
.nota-boton-wsp-caja { clear: both; text-align: center !important; margin: 32px 0 !important; }
.article-body .nota-boton-wsp, .nota-boton-wsp {
  display: inline-flex; align-items: center; gap: 10px;
  background: #25d366; color: #fff !important; text-decoration: none !important;
  padding: 14px 28px; border-radius: 999px; font-weight: 500; font-size: 1.05rem;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3); transition: transform 0.2s, background 0.2s;
}
.article-body .nota-boton-wsp:hover, .nota-boton-wsp:hover { background: #1ebe5b; color: #fff !important; transform: translateY(-2px); }

/* ---------- CELULAR ---------- */
@media (max-width: 700px) {
  .nota-foto--izquierda, .nota-foto--derecha { float: none; margin: 28px auto; }
  .nota-foto--chica { width: 60%; }
  .nota-foto--mediana, .nota-foto--grande { width: 100%; }
  .nota-galeria--3 .nota-galeria-fotos, .nota-galeria--4 .nota-galeria-fotos { grid-template-columns: repeat(2, 1fr); }
  .nota-galeria--2 .nota-galeria-fotos { grid-template-columns: 1fr; }
  .nota-tam--muy-grande { font-size: 1.45em; }
  .nota-recuadro { padding: 18px 18px; }
}
@media (max-width: 700px) {
  /* Galería de 3: la primera foto va ancha arriba y las otras dos abajo */
  .nota-galeria--3 .nota-galeria-fotos img:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
}

/* =====================================================================
   PRODUCTOS RELACIONADOS (al final de la nota)
   Mismo diseño que "Productos relacionados" de las fichas de producto de la web principal
   (src/css/pages/product-detail.css en rodeg-website): tarjetas blancas, foto cuadrada,
   título, descripción gris y botón "Ver más" gris claro.
   ===================================================================== */
.productos-relacionados { margin-top: 70px; padding-top: 50px; border-top: 1px solid #eaeaea; text-align: center; clear: both; }
.productos-relacionados h2 {
  font-size: 1.6rem; color: #172dad; font-weight: 500; margin: 0 0 2.5rem;
  text-transform: uppercase; letter-spacing: 2px; text-align: center;
}
.relacionados-grid { display: flex; justify-content: center; align-items: stretch; gap: 2rem; flex-wrap: wrap; }
.rel-card {
  width: 300px; display: flex; flex-direction: column; background: #ffffff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); text-align: left; text-decoration: none !important; color: #111112;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.rel-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transform: translateY(-4px); }
.rel-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background-color: #fff; display: block; margin: 0; border-radius: 0; }
.rel-img--vacia { background: #f3f3f3; }
.rel-info {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.3rem 1.4rem; background: #fdfdfd; border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.rel-text { display: flex; flex-direction: column; }
.rel-titulo {
  font-size: 1.05rem; line-height: 1.3; font-weight: 600; color: #111112; margin: 0 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rel-desc {
  font-size: 0.85rem; line-height: 1.45; color: #777; font-weight: 300;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rel-btn {
  align-self: flex-start; padding: 8px 16px; background: rgba(0, 0, 0, 0.05); color: #111112; border-radius: 50px;
  font-size: 0.85rem; font-weight: 500; white-space: nowrap; transition: background 0.3s, color 0.3s;
}
.rel-card:hover .rel-btn { background: #111112; color: #faf9f8; }
@media (max-width: 700px) {
  .productos-relacionados h2 { font-size: 1.3rem; }
  .rel-card { width: 100%; max-width: 360px; }
}