/* ------------------------------------------------------------------
   ga-blog.css
   Sistema visual Guacimara Acuña · el blog en claro
   Tema: hello-elementor-child

   El sitio se queda en tinta. El blog pasa a crema: cabecera oscura
   arriba, artículo claro debajo, pie oscuro al final.

   Se carga desde functions.php, después de ga-elementor-fix:
   wp_enqueue_style( 'ga-blog', $uri . '/ga-blog.css', ['ga-elementor-fix'], $v );

   Nota: el sitio ya fuerza con !important Playfair en titulares,
   DM Sans en párrafos y DM Mono en pre/code (CSS del kit de Elementor,
   post-133). Por eso los párrafos que aquí van en Playfair o en DM Mono
   llevan !important: es la única forma de ganar esa regla.

   Sin @import de fuentes: el sitio ya carga Playfair Display, DM Sans
   y DM Mono con todos los pesos e itálicas que usa el blog.
   ------------------------------------------------------------------ */

:root{
  --ga-tinta:#0D0D1F;
  --ga-rojo:#BE2A1A;
  --ga-piedra:#8B7D6B;
  --ga-piedra-clara:#C4B9AC;
  --ga-crema:#F5F0E8;
  --ga-blanco:#FAFAF8;
  --ga-serif:"Playfair Display",Georgia,serif;
  --ga-sans:"DM Sans",-apple-system,"Segoe UI",sans-serif;
  --ga-mono:"DM Mono",Menlo,monospace;
}

/* ------------------------------------------------------------------
   1. La página del blog en claro
   Solo entradas y archivos. El resto del sitio no se toca.
   ------------------------------------------------------------------ */

body.single-post,
body.blog,
body.archive,
body.search{
  background:var(--ga-crema);
}

/* La cabecera de Elementor es transparente y su texto es blanco.
   Sobre crema no se vería, así que se le da fondo tinta:
   banda oscura arriba, como el nombre de un periódico. */
body.single-post .elementor-location-header,
body.blog .elementor-location-header,
body.archive .elementor-location-header,
body.search .elementor-location-header{
  background:var(--ga-tinta);
}

body.single-post .site-main,
body.blog .site-main,
body.archive .site-main,
body.search .site-main{
  background:var(--ga-crema);
  color:var(--ga-tinta);
  padding-bottom:clamp(56px,7vw,96px);
}

/* ------------------------------------------------------------------
   2. Titular del artículo
   ------------------------------------------------------------------ */

/* Misma columna que el cuerpo, para que la línea roja del titular
   y el texto arranquen en el mismo eje vertical. */
.single-post .page-header{
  display:grid;
  grid-template-columns:minmax(0,660px);
  justify-content:center;
  padding:clamp(48px,6vw,88px) clamp(20px,5vw,64px) 0;
}
.single-post h1.entry-title{
  font-family:var(--ga-serif);
  font-weight:700;
  font-size:clamp(36px,5vw,58px);
  line-height:1.06;
  letter-spacing:-.015em;
  color:var(--ga-tinta);
  text-align:left;
  max-width:16ch;
  margin:0;
  padding-left:28px;
  border-left:3px solid var(--ga-rojo);
}

/* Línea de separación entre titular y cuerpo */
.single-post .page-header::after{
  content:"";
  display:block;
  height:1px;
  background:var(--ga-piedra-clara);
  margin-top:clamp(36px,4vw,56px);
}

/* ------------------------------------------------------------------
   3. Cuerpo
   ------------------------------------------------------------------ */

.single-post .page-content{
  background:transparent;
  color:var(--ga-tinta);
  padding:clamp(36px,4vw,52px) clamp(20px,5vw,64px) 0;
  display:grid;
  grid-template-columns:minmax(0,660px);
  justify-content:center;
}
.single-post .page-content p{
  font-family:var(--ga-sans);
  font-size:19px;
  line-height:1.72;
  color:var(--ga-tinta);
  margin:0 0 28px;
}
/* Entradilla bajo el titular */
.single-post .page-content p.ga-dek{
  font-family:var(--ga-sans);
  font-weight:300;
  font-size:clamp(19px,2vw,23px);
  line-height:1.5;
  color:var(--ga-piedra);
  max-width:46ch;
  margin:0 0 40px;
}

.single-post .page-content p.ga-arranque{
  font-size:22px;
  line-height:1.62;
}
.single-post .page-content a{
  color:var(--ga-rojo);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.single-post .page-content strong{color:var(--ga-tinta)}

/* ------------------------------------------------------------------
   4. Titulares de sección
   ------------------------------------------------------------------ */

.single-post .page-content h2.ga-h2{
  font-family:var(--ga-serif);
  font-weight:700;
  font-size:clamp(27px,3.2vw,34px);
  line-height:1.18;
  letter-spacing:-.01em;
  color:var(--ga-tinta);
  margin:44px 0 26px;
}
.single-post .page-content h2.ga-h2::before{
  content:"";
  display:block;
  width:34px;
  height:2px;
  background:var(--ga-rojo);
  margin-bottom:22px;
}

/* Subtítulos numerados dentro de una sección */
.single-post .page-content h3.ga-h3{
  font-family:var(--ga-serif);
  font-weight:700;
  font-size:clamp(21px,2.4vw,25px);
  line-height:1.24;
  color:var(--ga-tinta);
  margin:44px 0 20px;
}

/* ------------------------------------------------------------------
   5. Frase bisturí
   ------------------------------------------------------------------ */

.single-post .page-content p.ga-bisturi{
  font-family:var(--ga-serif) !important;
  font-style:italic;
  font-weight:400;
  font-size:clamp(24px,2.9vw,30px);
  line-height:1.34;
  color:var(--ga-rojo);
  max-width:26ch;
  margin:16px 0 44px;
}

/* Remate de sección. Va en tinta, no en rojo, para no encadenar
   dos frases bisturí seguidas. */
.single-post .page-content p.ga-remate{
  font-family:var(--ga-serif) !important;
  font-weight:700;
  font-size:clamp(22px,2.6vw,27px);
  line-height:1.26;
  color:var(--ga-tinta);
  max-width:24ch;
  margin:8px 0 44px;
}

/* ------------------------------------------------------------------
   6. Dato técnico
   ------------------------------------------------------------------ */

.single-post .page-content pre.ga-spec{
  font-family:var(--ga-mono);
  font-size:15px;
  letter-spacing:.06em;
  color:var(--ga-tinta);
  background:var(--ga-blanco);
  border-left:3px solid var(--ga-rojo);
  padding:22px 24px;
  margin:10px 0 34px;
  white-space:pre-wrap;
}

/* ------------------------------------------------------------------
   7. Dos tiempos
   ------------------------------------------------------------------ */

.single-post .page-content .ga-beats{
  border:1px solid var(--ga-piedra-clara);
  background:var(--ga-blanco);
  margin:16px 0 44px;
  gap:0;
}
.single-post .page-content .ga-beats .wp-block-column{
  padding:26px 24px;
}
.single-post .page-content .ga-beats .wp-block-column + .wp-block-column{
  border-left:1px solid var(--ga-piedra-clara);
}
.single-post .page-content p.ga-beat-n{
  font-family:var(--ga-serif) !important;
  font-weight:700;
  font-size:34px;
  line-height:1;
  margin:0 0 10px;
}
.single-post .page-content p.ga-beat-n.ga-rojo{color:var(--ga-rojo)}
.single-post .page-content p.ga-beat-t{
  font-family:var(--ga-mono) !important;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ga-piedra);
  line-height:1.5;
  margin:0;
}

/* ------------------------------------------------------------------
   8. Cierre
   ------------------------------------------------------------------ */

.single-post .page-content .ga-close{
  background:var(--ga-blanco);
  border-top:3px solid var(--ga-rojo);
  padding:44px;
  margin:40px 0 0;
}
.single-post .page-content .ga-close p{
  font-family:var(--ga-serif) !important;
  font-weight:700;
  font-size:clamp(24px,3vw,32px);
  line-height:1.24;
  max-width:24ch;
  margin:0;
}

/* ------------------------------------------------------------------
   9. Imágenes
   Las piezas ya vienen maquetadas en tinta, así que no llevan marco.
   Solo ocupan la columna y respiran.
   ------------------------------------------------------------------ */

.single-post .page-content figure.wp-block-image{
  margin:8px 0 40px;
}
.single-post .page-content figure.wp-block-image img{
  display:block;
  width:100%;
  height:auto;
}
.single-post .page-content figure.ga-portada{
  margin:4px 0 44px;
}
.single-post .page-content figure figcaption{
  font-family:var(--ga-mono) !important;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ga-piedra);
  margin-top:12px;
}

/* ------------------------------------------------------------------
   10. Pie de newsletter
   Va después del cierre, con una línea fina de piedra, no roja.
   El rojo es del artículo. Esto es lo que viene después del artículo.
   ------------------------------------------------------------------ */

.single-post .page-content .ga-newsletter{
  border-top:1px solid var(--ga-piedra-clara);
  margin:56px 0 0;
  padding:32px 0 0;
}
.single-post .page-content p.ga-nl-label{
  font-family:var(--ga-mono) !important;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ga-rojo);
  margin:0 0 14px;
}
.single-post .page-content p.ga-nl-text{
  font-size:17px;
  line-height:1.6;
  color:var(--ga-piedra);
  max-width:44ch;
  margin:0 0 18px;
}
.single-post .page-content p.ga-nl-links{
  font-family:var(--ga-mono) !important;
  font-size:12px;
  letter-spacing:.06em;
  color:var(--ga-piedra-clara);
  margin:0;
}
.single-post .page-content p.ga-nl-links a{
  color:var(--ga-tinta);
  text-decoration:none;
  border-bottom:1px solid var(--ga-rojo);
  padding-bottom:2px;
}
.single-post .page-content p.ga-nl-links a:hover{
  color:var(--ga-rojo);
}

/* ------------------------------------------------------------------
   11. Listado del blog
   ------------------------------------------------------------------ */

body.blog .site-main,
body.archive .site-main{
  padding-top:clamp(40px,5vw,72px);
}
/* Ojo: estas reglas van dentro de .site-main. Sin ese ámbito
   pintaban también los enlaces de la cabecera en tinta sobre tinta
   y el menú desaparecía en el archivo del blog. */
body.blog .site-main h1,body.blog .site-main h2,body.blog .site-main h3,
body.archive .site-main h1,body.archive .site-main h2,body.archive .site-main h3{
  font-family:var(--ga-serif);
  color:var(--ga-tinta);
}
body.blog .site-main p,body.archive .site-main p{
  font-family:var(--ga-sans);
  color:var(--ga-tinta);
}
body.blog .site-main a,body.archive .site-main a{color:var(--ga-tinta)}
body.blog .site-main a:hover,body.archive .site-main a:hover{color:var(--ga-rojo)}

/* ------------------------------------------------------------------
   12. Móvil
   ------------------------------------------------------------------ */

@media (max-width:720px){
  .single-post h1.entry-title{padding-left:18px}
  .single-post .page-content p{font-size:18px}
  .single-post .page-content .ga-beats .wp-block-column + .wp-block-column{
    border-left:none;
    border-top:1px solid var(--ga-piedra-clara);
  }
  .single-post .page-content .ga-close{padding:30px}
}

/* ------------------------------------------------------------------
   13. Páginas de suscripción
   /suscribirse/, /de/abonnieren/, /en/subscribe/
   Mismo tratamiento que el blog: hoja crema entre cabecera y pie
   oscuros. Van por ID porque WordPress no pone el slug en el body.
   ------------------------------------------------------------------ */

body.page-id-1473,body.page-id-1477,body.page-id-1481{background:var(--ga-crema)}
body.page-id-1473 .elementor-location-header,body.page-id-1477 .elementor-location-header,body.page-id-1481 .elementor-location-header{background:var(--ga-tinta)}
body.page-id-1473 .site-main,body.page-id-1477 .site-main,body.page-id-1481 .site-main{background:var(--ga-crema);color:var(--ga-tinta);padding-bottom:clamp(56px,7vw,96px)}
body.page-id-1473 .page-header,body.page-id-1477 .page-header,body.page-id-1481 .page-header{display:grid;grid-template-columns:minmax(0,620px);justify-content:center;padding:clamp(48px,6vw,88px) clamp(20px,5vw,64px) 0}
body.page-id-1473 h1.entry-title,body.page-id-1477 h1.entry-title,body.page-id-1481 h1.entry-title{font-family:var(--ga-serif);font-weight:700;font-size:clamp(32px,4.4vw,48px);line-height:1.08;letter-spacing:-.015em;color:var(--ga-tinta);text-align:left;max-width:16ch;margin:0;padding-left:28px;border-left:3px solid var(--ga-rojo)}
body.page-id-1473 .page-content,body.page-id-1477 .page-content,body.page-id-1481 .page-content{background:transparent;color:var(--ga-tinta);padding:clamp(30px,4vw,44px) clamp(20px,5vw,64px) 0;display:grid;grid-template-columns:minmax(0,620px);justify-content:center}
body.page-id-1473 .page-content p,body.page-id-1477 .page-content p,body.page-id-1481 .page-content p{font-family:var(--ga-sans);font-size:19px;line-height:1.72;color:var(--ga-tinta);margin:0 0 24px}
body.page-id-1473 .page-content p.ga-dek,body.page-id-1477 .page-content p.ga-dek,body.page-id-1481 .page-content p.ga-dek{font-weight:300;font-size:clamp(19px,2vw,22px);line-height:1.55;color:var(--ga-piedra);max-width:46ch;margin:0 0 20px}
body.page-id-1473 .page-content p.ga-consent,body.page-id-1477 .page-content p.ga-consent,body.page-id-1481 .page-content p.ga-consent{font-size:14px;line-height:1.6;color:var(--ga-piedra);max-width:52ch;margin:22px 0 0}
body.page-id-1473 .page-content p.ga-consent a,body.page-id-1477 .page-content p.ga-consent a,body.page-id-1481 .page-content p.ga-consent a{color:var(--ga-rojo)}
body.page-id-1473 .page-content p.ga-nl-links,body.page-id-1477 .page-content p.ga-nl-links,body.page-id-1481 .page-content p.ga-nl-links{font-family:var(--ga-mono) !important;font-size:12px;letter-spacing:.06em;margin:40px 0 0;padding-top:26px;border-top:1px solid var(--ga-piedra-clara)}
body.page-id-1473 .page-content p.ga-nl-links a,body.page-id-1477 .page-content p.ga-nl-links a,body.page-id-1481 .page-content p.ga-nl-links a{color:var(--ga-tinta);text-decoration:none;border-bottom:1px solid var(--ga-rojo);padding-bottom:2px}

/* El formulario de MailPoet, vestido con el sistema */
body.page-id-1473 .mailpoet_form,body.page-id-1477 .mailpoet_form,body.page-id-1481 .mailpoet_form{margin:8px 0 0;padding:0;background:transparent}
body.page-id-1473 .mailpoet_paragraph,body.page-id-1477 .mailpoet_paragraph,body.page-id-1481 .mailpoet_paragraph{margin:0 0 12px}
body.page-id-1473 .mailpoet_text,body.page-id-1477 .mailpoet_text,body.page-id-1481 .mailpoet_text{width:100%;box-sizing:border-box;font-family:var(--ga-sans) !important;font-size:17px;color:var(--ga-tinta);background:var(--ga-blanco);border:1px solid var(--ga-piedra-clara);border-radius:0;padding:15px 16px}
body.page-id-1473 .mailpoet_text:focus,body.page-id-1477 .mailpoet_text:focus,body.page-id-1481 .mailpoet_text:focus{outline:none;border-color:var(--ga-rojo)}
body.page-id-1473 .mailpoet_submit,body.page-id-1477 .mailpoet_submit,body.page-id-1481 .mailpoet_submit{font-family:var(--ga-mono) !important;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ga-blanco);background:var(--ga-rojo);border:none;border-radius:0;padding:16px 28px;cursor:pointer}
body.page-id-1473 .mailpoet_submit:hover,body.page-id-1477 .mailpoet_submit:hover,body.page-id-1481 .mailpoet_submit:hover{background:var(--ga-tinta)}
body.page-id-1473 .mailpoet_validate_success,body.page-id-1477 .mailpoet_validate_success,body.page-id-1481 .mailpoet_validate_success{font-family:var(--ga-sans) !important;color:var(--ga-tinta)}
body.page-id-1473 .mailpoet_validate_error,body.page-id-1477 .mailpoet_validate_error,body.page-id-1481 .mailpoet_validate_error{font-family:var(--ga-sans) !important;color:var(--ga-rojo)}

/* ------------------------------------------------------------------
   14. Aviso legal, Impressum, Legal notice
   Mismo tratamiento de hoja clara. Texto largo y seco, columna algo
   más estrecha y titulares de sección más pequeños que en el blog.
   ------------------------------------------------------------------ */

body.page-id-1498,body.page-id-1501,body.page-id-1504{background:var(--ga-crema)}
body.page-id-1498 .elementor-location-header,body.page-id-1501 .elementor-location-header,body.page-id-1504 .elementor-location-header{background:var(--ga-tinta)}
body.page-id-1498 .site-main,body.page-id-1501 .site-main,body.page-id-1504 .site-main{background:var(--ga-crema);color:var(--ga-tinta);padding-bottom:clamp(56px,7vw,96px)}
body.page-id-1498 .page-header,body.page-id-1501 .page-header,body.page-id-1504 .page-header{display:grid;grid-template-columns:minmax(0,620px);justify-content:center;padding:clamp(48px,6vw,88px) clamp(20px,5vw,64px) 0}
body.page-id-1498 h1.entry-title,body.page-id-1501 h1.entry-title,body.page-id-1504 h1.entry-title{font-family:var(--ga-serif);font-weight:700;font-size:clamp(30px,4vw,42px);line-height:1.1;letter-spacing:-.015em;color:var(--ga-tinta);text-align:left;max-width:18ch;margin:0;padding-left:28px;border-left:3px solid var(--ga-rojo)}
body.page-id-1498 .page-content,body.page-id-1501 .page-content,body.page-id-1504 .page-content{background:transparent;color:var(--ga-tinta);padding:clamp(30px,4vw,44px) clamp(20px,5vw,64px) 0;display:grid;grid-template-columns:minmax(0,620px);justify-content:center}
body.page-id-1498 .page-content p,body.page-id-1501 .page-content p,body.page-id-1504 .page-content p{font-family:var(--ga-sans);font-size:18px;line-height:1.7;color:var(--ga-tinta);margin:0 0 24px}
body.page-id-1498 .page-content p.ga-dek,body.page-id-1501 .page-content p.ga-dek,body.page-id-1504 .page-content p.ga-dek{font-weight:300;font-size:clamp(19px,2vw,22px);line-height:1.55;color:var(--ga-piedra);max-width:46ch;margin:0 0 8px}
body.page-id-1498 .page-content h2.ga-h2,body.page-id-1501 .page-content h2.ga-h2,body.page-id-1504 .page-content h2.ga-h2{font-family:var(--ga-serif);font-weight:700;font-size:clamp(20px,2.2vw,24px);line-height:1.22;color:var(--ga-tinta);margin:40px 0 16px}
body.page-id-1498 .page-content h2.ga-h2::before,body.page-id-1501 .page-content h2.ga-h2::before,body.page-id-1504 .page-content h2.ga-h2::before{content:"";display:block;width:26px;height:2px;background:var(--ga-rojo);margin-bottom:16px}
body.page-id-1498 .page-content a,body.page-id-1501 .page-content a,body.page-id-1504 .page-content a{color:var(--ga-rojo);text-underline-offset:3px}
body.page-id-1498 .page-content p.ga-consent,body.page-id-1501 .page-content p.ga-consent,body.page-id-1504 .page-content p.ga-consent{font-family:var(--ga-mono) !important;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ga-piedra);margin:40px 0 0;padding-top:24px;border-top:1px solid var(--ga-piedra-clara)}