/* ==========================================
   JIMÉNEZ PUERTA · PLANTILLA EDITORIAL BLOG
   Archivo: assets/css/blog-editorial.css
   ========================================== */

:root{
  --jp-navy:#0b314d;
  --jp-navy-deep:#082b45;
  --jp-navy-light:#12425f;
  --jp-navy-data:#123d5a;
  --jp-gold:#c4a15e;
  --jp-gold-soft:#d0b06c;
  --jp-white:#ffffff;
  --jp-ink:#152e44;
  --jp-text:#3c4b58;
  --jp-muted:#75808a;
  --jp-line:#e4e1da;
  --jp-paper:#f8f7f4;
}

/* Evita que el tema padre limite el ancho de la plantilla */
.jp-blog-single,
.jp-blog-single *{
  box-sizing:border-box;
}

.jp-blog-single{
  width:100%;
  margin:0;
  padding:0;
  background:var(--jp-white);
}

/* ==========================================
   HERO
   Fondo completo.
   Columna de contenido centrada.
   Textos alineados a la izquierda.
   ========================================== */

.jp-article{
  width:100%;
  margin:0;
  padding:0;
  background:var(--jp-white);
}

.jp-article-hero{
  position:relative;
  width:100%;
  min-height:420px;
  margin:0;
  padding:66px 24px 42px;
  overflow:hidden;
  color:var(--jp-white);
  background:
    radial-gradient(
      850px 540px at 82% 5%,
      rgba(72,111,140,.30) 0%,
      rgba(33,74,101,.16) 43%,
      rgba(11,49,77,0) 74%
    ),
    linear-gradient(
      115deg,
      var(--jp-navy-deep) 0%,
      var(--jp-navy) 53%,
      var(--jp-navy-light) 100%
    );
}

.jp-article-hero::after{
  content:"";
  position:absolute;
  z-index:0;
  right:0;
  bottom:0;
  left:0;
  height:38%;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(5,27,44,0) 0%,
    rgba(5,27,44,.24) 100%
  );
}

/*
 * CLAVE:
 * Esta es la columna centrada.
 * No hay display flex, no hay alineación lateral heredada.
 * max-width 560px + margin auto crea los márgenes amplios.
 */
.jp-blog-single .jp-article-hero .jp-hero-inner{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  max-width:560px;
  margin:0 auto;
  padding:0;
  text-align:left;
}

/* Categorías doradas */
.jp-blog-single .jp-article-hero .jp-article-categories{
  display:block;
  margin:0 0 23px;
  padding:0;
  color:var(--jp-gold) !important;
  font-family:Arial, sans-serif;
  font-size:10px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.18em;
  text-align:left;
  text-transform:uppercase;
}

/* Título principal */
.jp-blog-single .jp-article-hero h1.jp-article-title,
.jp-blog-single .jp-article-hero .jp-article-title{
  display:block;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  color:var(--jp-white) !important;
  font-family:"Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  font-size:clamp(42px, 4.6vw, 68px);
  font-weight:800;
  line-height:.95;
  letter-spacing:-.052em;
  text-align:left;
  text-wrap:balance;
}

/* Frase dorada definida desde el campo del post */
.jp-blog-single .jp-article-hero .jp-article-title .is-gold{
  color:var(--jp-gold) !important;
}

/* Línea dorada inmediatamente debajo del título */
.jp-blog-single .jp-article-hero .jp-article-title::after{
  content:"";
  display:block;
  width:40px;
  height:2px;
  margin:20px 0;
  padding:0;
  background:var(--jp-gold);
}

/* Descripción */
.jp-blog-single .jp-article-hero .jp-article-excerpt{
  display:block;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  color:rgba(255,255,255,.78) !important;
  font-family:Arial, sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.58;
  letter-spacing:-.012em;
  text-align:left;
}

/* Línea fina que separa descripción y pie */
.jp-blog-single .jp-article-hero .jp-article-excerpt::after{
  content:"";
  display:block;
  width:100%;
  height:1px;
  margin-top:24px;
  background:rgba(255,255,255,.12);
}

/* Pie: nombre del sitio · texto manual · fecha */
.jp-blog-single .jp-article-hero .jp-hero-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  width:100%;
  margin:15px 0 0;
  padding:0;
  color:rgba(255,255,255,.68);
  font-family:Arial, sans-serif;
  font-size:9px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.085em;
  text-align:left;
  text-transform:uppercase;
}

.jp-blog-single .jp-article-hero .jp-hero-footer span{
  white-space:nowrap;
}

.jp-blog-single .jp-article-hero .jp-hero-footer span + span::before{
  content:"";
  display:inline-block;
  width:2px;
  height:2px;
  margin:0 13px 2px;
  border-radius:50%;
  background:rgba(255,255,255,.45);
  vertical-align:middle;
}

/* ==========================================
   BANDA DE DATOS EDITABLE
   ========================================== */

.jp-data-strip{
  width:100%;
  margin:0;
  padding:0;
  color:#fff;
  background:var(--jp-navy-data);
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}

.jp-data-strip__inner{
  width:min(1120px, calc(100% - 48px));
  margin:0 auto;
  padding:0;
}

.jp-data-strip__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  align-items:stretch;
  width:100%;
  margin:0;
  padding:0;
}

.jp-data-item{
  min-width:0;
  min-height:144px;
  margin:0;
  padding:28px 30px 24px;
  border-right:1px solid rgba(255,255,255,.11);
}

.jp-data-item:first-child{
  border-left:1px solid rgba(255,255,255,.11);
}

.jp-data-item strong{
  display:block;
  margin:0 0 9px;
  padding:0;
  color:var(--jp-gold) !important;
  font-family:"Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  font-size:clamp(31px, 3.2vw, 48px);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.045em;
}

.jp-data-item p{
  max-width:175px;
  margin:0;
  padding:0;
  color:rgba(255,255,255,.76) !important;
  font-family:Arial, sans-serif;
  font-size:12px;
  font-weight:400;
  line-height:1.45;
}

/* ==========================================
   CUERPO DEL ARTÍCULO
   ========================================== */

.jp-article-body{
  width:100%;
  margin:0;
  padding:68px 0 92px;
  background:var(--jp-white);
}

.jp-reading{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:0;
}

.jp-reading > *:first-child{
  margin-top:0;
}

.jp-reading p{
  margin:0 0 22px;
  color:var(--jp-text);
  font-family:Arial, sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:1.88;
}

.jp-reading p.has-drop-cap:not(:focus)::first-letter{
  float:left;
  margin:7px 9px 0 0;
  color:var(--jp-gold);
  font-size:4.2em;
  font-weight:700;
  line-height:.72;
}

.jp-reading h2{
  margin:54px 0 16px;
  color:var(--jp-ink);
  font-family:"Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  font-size:36px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.03em;
}

.jp-reading h3{
  margin:34px 0 12px;
  color:var(--jp-ink);
  font-family:"Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  font-size:27px;
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.02em;
}

.jp-reading h4{
  margin:28px 0 10px;
  color:var(--jp-ink);
  font-family:Arial, sans-serif;
  font-size:21px;
  font-weight:700;
  line-height:1.2;
}

.jp-reading strong{
  color:var(--jp-ink);
  font-weight:700;
}

.jp-reading a{
  color:var(--jp-navy);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.jp-reading ul,
.jp-reading ol{
  margin:0 0 24px 24px;
  padding:0;
  color:var(--jp-text);
}

.jp-reading li{
  margin:0 0 10px;
  font-family:Arial, sans-serif;
  font-size:18px;
  line-height:1.8;
}

.jp-reading blockquote,
.jp-reading .wp-block-quote{
  margin:38px 0 46px;
  padding:18px 0 18px 22px;
  color:var(--jp-ink);
  border-left:4px solid var(--jp-gold);
  font-family:"Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  font-size:31px;
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.03em;
}

.jp-reading blockquote p,
.jp-reading .wp-block-quote p{
  margin:0;
  color:inherit;
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
}

.jp-reading figure{
  margin:34px 0;
}

.jp-reading img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin:32px 0;
}

.jp-reading figcaption{
  margin-top:10px;
  color:var(--jp-muted);
  font-family:Arial, sans-serif;
  font-size:13px;
  line-height:1.5;
}

.jp-reading hr,
.jp-reading .wp-block-separator{
  width:100%;
  height:1px;
  margin:42px 0;
  border:0;
  background:var(--jp-line);
}

.jp-reading table{
  width:100%;
  margin:32px 0;
  border-collapse:collapse;
  font-family:Arial, sans-serif;
  font-size:15px;
}

.jp-reading th,
.jp-reading td{
  padding:14px 16px;
  text-align:left;
  vertical-align:top;
  border:1px solid var(--jp-line);
}

.jp-reading th{
  color:var(--jp-ink);
  background:var(--jp-paper);
  font-weight:700;
}

.jp-reading .wp-block-pullquote{
  margin:44px 0;
  padding:28px 0;
  border-top:1px solid var(--jp-line);
  border-bottom:1px solid var(--jp-line);
}

.jp-reading .wp-block-pullquote blockquote{
  margin:0;
  padding-left:0;
  border-left:0;
}

.jp-reading .wp-block-buttons{
  margin:28px 0;
}

.jp-reading .wp-block-button__link{
  padding:14px 22px;
  color:#fff;
  background:var(--jp-navy);
  border-radius:0;
  font-family:Arial, sans-serif;
  font-weight:600;
  text-decoration:none;
}

.jp-reading .wp-block-button__link:hover{
  color:#fff;
  background:var(--jp-navy-deep);
}

/* Elementos Gutenberg anchos */
.jp-reading .alignwide{
  width:min(1120px, calc(100vw - 48px));
  max-width:none;
  margin-right:calc(50% - min(560px, calc(50vw - 24px)));
  margin-left:calc(50% - min(560px, calc(50vw - 24px)));
}

.jp-reading .alignfull{
  width:100vw;
  max-width:100vw;
  margin-right:calc(50% - 50vw);
  margin-left:calc(50% - 50vw);
}

/* ==========================================
   TABLET
   ========================================== */

@media (max-width:1024px){
  .jp-article-hero{
    min-height:400px;
  }

  .jp-blog-single .jp-article-hero .jp-hero-inner{
    max-width:530px;
  }

  .jp-blog-single .jp-article-hero h1.jp-article-title,
  .jp-blog-single .jp-article-hero .jp-article-title{
    font-size:clamp(40px, 6vw, 60px);
  }

  .jp-reading{
    max-width:720px;
  }

  .jp-reading h2{
    font-size:31px;
  }

  .jp-reading blockquote,
  .jp-reading .wp-block-quote{
    font-size:27px;
  }
}

/* ==========================================
   MÓVIL
   ========================================== */

@media (max-width:767px){
  .jp-article-hero{
    min-height:auto;
    padding:52px 20px 38px;
    background:
      radial-gradient(
        500px 340px at 100% 0%,
        rgba(70,109,136,.28) 0%,
        transparent 70%
      ),
      linear-gradient(135deg, var(--jp-navy-deep), var(--jp-navy));
  }

  .jp-blog-single .jp-article-hero .jp-hero-inner{
    width:100%;
    max-width:none;
  }

  .jp-blog-single .jp-article-hero .jp-article-categories{
    margin-bottom:18px;
    font-size:9px;
    letter-spacing:.13em;
  }

  .jp-blog-single .jp-article-hero h1.jp-article-title,
  .jp-blog-single .jp-article-hero .jp-article-title{
    font-size:clamp(37px, 11vw, 49px);
    line-height:.98;
  }

  .jp-blog-single .jp-article-hero .jp-article-title::after{
    margin:18px 0;
  }

  .jp-blog-single .jp-article-hero .jp-article-excerpt{
    font-size:15px;
    line-height:1.62;
  }

  .jp-blog-single .jp-article-hero .jp-hero-footer{
    margin-top:14px;
    font-size:8px;
  }

  .jp-blog-single .jp-article-hero .jp-hero-footer span{
    white-space:normal;
  }

  .jp-blog-single .jp-article-hero .jp-hero-footer span + span::before{
    margin:0 8px 2px;
  }

  .jp-data-strip__inner{
    width:100%;
  }

  .jp-data-strip__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .jp-data-item{
    min-height:128px;
    padding:22px 20px;
    border-bottom:1px solid rgba(255,255,255,.11);
  }

  .jp-data-item:first-child{
    border-left:0;
  }

  .jp-data-item:nth-child(odd){
    border-left:0;
  }

  .jp-data-item strong{
    font-size:34px;
  }

  .jp-data-item p{
    font-size:11px;
  }

  .jp-article-body{
    padding:44px 20px 64px;
  }

  .jp-reading{
    max-width:none;
  }

  .jp-reading p,
  .jp-reading li{
    font-size:16px;
    line-height:1.8;
  }

  .jp-reading h2{
    margin:42px 0 14px;
    font-size:28px;
  }

  .jp-reading h3{
    font-size:23px;
  }

  .jp-reading h4{
    font-size:19px;
  }

  .jp-reading blockquote,
  .jp-reading .wp-block-quote{
    padding-left:16px;
    font-size:22px;
    line-height:1.2;
  }

  .jp-reading .alignwide{
    width:100%;
    margin-right:0;
    margin-left:0;
  }
}

/* HERO: columna centrada y angosta, con márgenes laterales amplios */
.jp-blog-single .jp-article-hero .jp-hero-inner{
  display:block !important;
  width:calc(100% - 48px) !important;
  max-width:490px !important;
  margin:0 auto !important;
  padding:0 !important;
  text-align:left !important;
}

/* Todos los elementos respetan el ancho exacto de la columna */
.jp-blog-single .jp-article-hero .jp-hero-inner > *{
  width:100% !important;
  max-width:100% !important;
  margin-right:0 !important;
  margin-left:0 !important;
}
.jp-article-meta{
   color:var(--jp-gold);
}

/* Mantiene el footer de metadatos alineado con la columna */
.jp-blog-single .jp-article-hero .jp-hero-footer{
  justify-content:flex-start !important;
}

/* En pantallas grandes, refuerza el ancho visual del referente */
@media (min-width:1280px){
  .jp-blog-single .jp-article-hero .jp-hero-inner{
    max-width:500px !important;
  }
}

/* En móvil usa el ancho disponible con un gutter seguro */
@media (max-width:767px){
  .jp-blog-single .jp-article-hero .jp-hero-inner{
    width:calc(100% - 40px) !important;
    max-width:none !important;
  }
}

/* ==========================================
   HERO: CONTENEDOR AISLADO DEL TEMA PADRE
   La columna queda centrada en el hero.
   El texto interno queda alineado a la izquierda.
   ========================================== */

.jp-blog-single .jp-article-hero .jp-hero-container{
  position:relative;
  z-index:1;

  /* Esta es la regla que centra visualmente el bloque */
  width:calc(100% - 48px);
  max-width:620px;
  margin:0 auto;
  padding:0;

  text-align:left;
}

/* Evita que estilos genéricos de Orologio alteren los elementos */
.jp-blog-single .jp-article-hero .jp-hero-container > *{
  box-sizing:border-box;
  width:100%;
  max-width:100%;
}

/* Alineación y márgenes del contenido dentro de la columna */
.jp-blog-single .jp-article-hero .jp-hero-container .jp-article-categories,
.jp-blog-single .jp-article-hero .jp-hero-container .jp-article-title,
.jp-blog-single .jp-article-hero .jp-hero-container .jp-article-excerpt,
.jp-blog-single .jp-article-hero .jp-hero-container .jp-hero-footer{
  text-align:left;
}

/* Móvil */
@media (max-width:767px){
  .jp-blog-single .jp-article-hero .jp-hero-container{
    width:calc(100% - 40px);
    max-width:none;
  }
}