/* ============================================================
   ALL FLAMENCO — formato de entradas del blog
   Reproduce sin Divi el diseno de la plantilla de referencia:
     - marco     = Theme Builder "Post" (layout 407317)
     - bloques   = biblioteca Divi "Entradilla" 376818,
                   "Video" 376819, "Fotos+pie" 376820
   Las medidas estan tomadas literalmente de esos layouts.
   ============================================================ */

:root {
  --af-rojo:    #C12A1E;   /* Pantone 485 C */
  --af-naranja: #EC6B00;   /* Pantone 1505 C */
  --af-negro:   #111111;
  --af-gris:    #f4f4f4;   /* fondo de la botonera de compartir */
  --af-texto:   #1a1a1a;
  --af-ancho:   800px;     /* ancho de lectura de los bloques */
}

/* ---------- Cuerpo del articulo ---------------------------- */
/* Plantilla: et_pb_post_content -> 19px / 1.6em               */

.af-post {
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 19px;
  line-height: 1.6;
  color: var(--af-texto);
}

.af-post p { margin: 0 0 1.25em; }

.af-post h2,
.af-post h3 {
  font-family: "Noto Serif", Georgia, serif;
  font-weight: 700;
  color: var(--af-negro);
  line-height: 1.2;
  margin: 1.8em 0 .6em;
}

.af-post h2 { font-size: 32px; }
.af-post h3 { font-size: 24px; }

.af-post a          { color: var(--af-rojo); text-decoration: underline; text-underline-offset: 2px; }
.af-post a:hover    { color: var(--af-naranja); }
.af-post ul,
.af-post ol         { margin: 0 0 1.25em 1.2em; }
.af-post li         { margin-bottom: .4em; }
.af-post blockquote {
  margin: 1.8em 0;
  padding: .2em 0 .2em 1.2em;
  border-left: 4px solid var(--af-rojo);
  font-style: italic;
  color: #444;
}

/* ---------- Marco: titulo, compartir, entradilla, hero ------ */

.af-cabecera { margin-bottom: 2rem; }

/* Plantilla: et_pb_post_title -> 32px, sin autor/categoria/fecha */
.af-titulo {
  font-family: "Noto Serif", Georgia, serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.25;
  color: var(--af-negro);
  margin: 0 0 10px;
}

/* Plantilla: dssb_sharing_buttons -> iconos 16px, fondo #f4f4f4,
   radio 11px, alineados a la izquierda, 6 redes                */
.af-compartir { display: flex; gap: 8px; margin: 0 0 15px; padding: 0; list-style: none; }

.af-compartir a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  font-size: 16px;
  background: var(--af-gris);
  border: 1px solid transparent;
  border-radius: 11px;
  color: #000;
  text-decoration: none;
  transition: border-color .15s ease;
}
.af-compartir a:hover { border-color: #999; }

/* Plantilla: et_pb_text con post_excerpt -> 22px en cursiva     */
.af-entradilla {
  font-size: 22px;
  line-height: 1.5;
  font-style: italic;
  color: #333;
  margin: 15px 0;
  padding-bottom: 2.75%;
}

/* Plantilla: et_pb_image con post_featured_image, centrada      */
.af-hero { margin: 0 0 3%; }
.af-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.af-hero figcaption {
  font-size: 14px;
  line-height: 1.5;
  color: #666;
  margin-top: .6em;
}
.af-credito { font-size: 13px; color: #888; }

/* ---------- Bloque "Entradilla" (biblioteca 376818) ---------- */
/* Noto Sans 20px cursiva, 2em de interlineado, 800px, centrado,
   texto blanco sobre fondo oscuro                              */

.af-destacado {
  background: var(--af-negro);
  color: #fff;
  padding: 3rem 1.5rem;
  margin: 2.5rem 0;
}
.af-destacado p {
  max-width: var(--af-ancho);
  margin: 0 auto;
  font-size: 20px;
  line-height: 2em;
  font-style: italic;
  text-align: center;
}

/* ---------- Bloque "Video" (biblioteca 376819) --------------- */
/* Fila 2/3 + 1/3: video a la izquierda, llamada a la accion a la
   derecha con titular Noto Serif 700 a 44px                     */

.af-video {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0;
  margin: 2.5rem 0;
  align-items: stretch;
}
.af-video__player { position: relative; padding-top: 56.25%; background: #000; }
.af-video__player iframe,
.af-video__player img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0; object-fit: cover;
}
.af-video__cta {
  padding: 6%;
  background: var(--af-rojo);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.af-video__cta h3 {
  font-family: "Noto Serif", Georgia, serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.05;
  margin: 0 0 .5em;
  color: #fff;
}
.af-video__cta p { font-size: 17px; line-height: 1.5; margin: 0 0 1.2em; }

.af-boton {
  align-self: flex-start;
  display: inline-block;
  padding: .7em 1.4em;
  background: #fff;
  color: var(--af-rojo);
  font-weight: 700;
  text-decoration: none;
  border-radius: 3px;
}
.af-boton:hover { background: var(--af-negro); color: #fff; }

/* ---------- Bloque "Fotos+pie" (biblioteca 376820) ----------- */
/* Tres columnas de imagen con pie, Noto Sans 17px / 1.9em       */

.af-galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2.5rem 0;
}
.af-galeria figure { margin: 0; }
.af-galeria img { width: 100%; height: auto; display: block; }
.af-galeria figcaption {
  font-size: 17px;
  line-height: 1.9em;
  text-align: center;
  color: #555;
  margin-top: .5em;
}

/* ---------- Llamada final al abono -------------------------- */

.af-cierre {
  margin: 3rem 0 1rem;
  padding: 2rem;
  border: 2px solid var(--af-rojo);
  text-align: center;
}
.af-cierre h3 {
  font-family: "Noto Serif", Georgia, serif;
  font-size: 28px;
  margin: 0 0 .5em;
  color: var(--af-negro);
}
.af-cierre .af-boton { background: var(--af-rojo); color: #fff; align-self: center; }
.af-cierre .af-boton:hover { background: var(--af-negro); }

/* ---------- Movil: el 72% de los clics ---------------------- */

@media (max-width: 782px) {
  .af-post        { font-size: 18px; }
  .af-titulo      { font-size: 28px; }
  .af-entradilla  { font-size: 20px; }
  .af-post h2     { font-size: 26px; }
  .af-video       { grid-template-columns: 1fr; }
  .af-video__cta h3 { font-size: 32px; }
  .af-galeria     { grid-template-columns: 1fr; gap: 1.2rem; }
  .af-destacado   { padding: 2rem 1.2rem; }
  .af-destacado p { font-size: 18px; line-height: 1.8em; }
}