/* =========================================================
   JAPOPEDIA — ESTILOS PROPIOS
   Único sitio del CSS propio de la web (salvo el de los plugins
   japopedia-directorio y japopedia-assistant, que va con ellos y usa
   estas mismas variables).

   Colores y fuentes: SIEMPRE con las variables de abajo, que salen
   de la paleta y la tipografía de Kadence (Personalizar → Colores /
   Tipografía). Para cambiar un color de la web, se cambia en Kadence;
   no hace falta tocar este archivo.
   ========================================================= */

:root {
  --jp-accent:       var(--global-palette1, #BC002D); /* carmín: botones, enlaces, iconos */
  --jp-accent-hover: var(--global-palette2, #8E0022); /* carmín oscuro: hover de lo anterior */
  --jp-text:         var(--global-palette3, #2C2C2C); /* texto principal y títulos */
  --jp-text-soft:    var(--global-palette4, #3D3D3D); /* entradillas y subtítulos */
  --jp-text-muted:   var(--global-palette5, #6B6B6B); /* textos secundarios, extractos y fechas */
  --jp-bg:           var(--global-palette9, #FEFCFB); /* fondo marfil de las secciones */
  --jp-bg-alt:       var(--global-palette8, #F7F3F1); /* fondo washi: paneles, filas alternas, secciones destacadas */
  --jp-accent-soft:  var(--global-palette7, #FFF1F4); /* rosa muy claro: fondos de avisos en carmín, hover suave */
  --jp-surface:      #fff;                            /* fondo de las tarjetas */
  --jp-cherry:       #FFB7C5; /* Cherry Blossom: no está en la paleta de Kadence (es el acento del kit de Elementor). Solo decorativo, nunca como fondo de texto largo */

  /* Estados. No están en la paleta de Kadence: valores fijos de la marca */
  --jp-ok:           #006442;               /* Dark Emerald: correcto, alta afinidad, exportar, serie UE→Japón */
  --jp-ok-soft:      rgba(0, 100, 66, .1);
  --jp-warn:         #8A5D00;               /* ámbar oscuro (texto legible sobre --jp-warn-soft) */
  --jp-warn-soft:    #FCEACB;
  --jp-amber:        #E69F00;               /* Amber Honey: etiquetas de segmento y valoraciones */

  /* Fuentes: las de Kadence (Personalizar → Tipografía). japopedia-estilos.php
     añade 'Noto Sans JP' detrás para los caracteres japoneses */
  --jp-font-heading: var(--global-heading-font-family, 'Plus Jakarta Sans', 'Noto Sans JP', sans-serif);
  --jp-font-body:    var(--global-body-font-family, 'Inter', 'Noto Sans JP', sans-serif);
  --jp-font-jp:      'Noto Sans JP', sans-serif; /* texto solo en japonés: sellos de los planes */

  --jp-border:        rgba(44, 44, 44, .12);
  --jp-border-strong: rgba(44, 44, 44, .25);
  --jp-shadow-hover:  0 14px 30px rgba(44, 44, 44, .08);
}


/* Texto marcado como japonés (lang="ja"): nombres en japonés, sellos, 法人番号 */
[lang="ja"] { font-family: var(--jp-font-jp); }


/* =========================================================
   MENÚ PRINCIPAL — botón "Acceder" / "Mi cuenta"
   (clase jp-menu-cuenta, la añade japopedia-directorio/menu-cuenta.php)
   ========================================================= */

.main-navigation .primary-menu-container > ul > li.jp-menu-cuenta > a {
  background: var(--jp-accent);
  color: #fff !important;
  border-radius: 999px;
  padding: .5em 1.2em !important;
  margin-left: .6em;
  font-weight: 700;
}
.main-navigation .primary-menu-container > ul > li.jp-menu-cuenta > a:hover {
  background: var(--jp-accent-hover);
  color: #fff !important;
}


/* =========================================================
   PORTADA — HERO
   (widget HTML de Elementor, sección .jp-hero)
   ========================================================= */

.jp-hero {
  box-sizing: border-box; max-width: 1200px; margin: 0 auto;
  padding: 36px 20px 32px; display: flex; flex-direction: column; gap: 28px;
  background: var(--jp-bg); color: var(--jp-text);
  font-family: var(--jp-font-body);
}
.jp-hero * { box-sizing: border-box; }
.jp-hero__badge {
  display: inline-block; background: var(--jp-cherry); color: var(--jp-accent-hover);
  font-weight: 700; font-size: 11px; letter-spacing: .04em; line-height: 1.4;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.jp-hero__title {
  font-family: var(--jp-font-heading); font-weight: 800; color: var(--jp-text);
  font-size: clamp(30px, 7vw, 50px); line-height: 1.18; margin: 0 0 16px;
}
.jp-hero__lead { font-size: 16px; line-height: 1.65; color: var(--jp-text-soft); margin: 0; }
.jp-hero__media { display: flex; justify-content: center; }
.jp-hero__media img {
  width: 100%; max-width: 300px; height: auto; border-radius: 16px;
  filter: drop-shadow(0 14px 24px rgba(44, 44, 44, .18));
}
@media (min-width: 900px) {
  .jp-hero { flex-direction: row; align-items: center; gap: 56px; padding: 80px 32px 56px; }
  .jp-hero__text, .jp-hero__media { flex: 1 1 0; min-width: 0; }
  .jp-hero__badge { font-size: 13px; padding: 7px 16px; margin-bottom: 22px; }
  .jp-hero__title { margin-bottom: 22px; }
  .jp-hero__lead { font-size: 17px; max-width: 540px; }
  .jp-hero__media img {
    max-width: 460px; border-radius: 20px;
    filter: drop-shadow(0 22px 34px rgba(44, 44, 44, .22));
  }
}


/* =========================================================
   PORTADA — CUATRO HERRAMIENTAS
   (widget HTML de Elementor, sección .jp-tools)
   Las tarjetas se limitan a .jp-tools: el directorio de socios usa
   también la clase .jp-card, con otro diseño.
   ========================================================= */

.jp-tools {
  box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 48px 20px 56px;
  background: var(--jp-bg); color: var(--jp-text);
  font-family: var(--jp-font-body);
}
.jp-tools * { box-sizing: border-box; }
.jp-tools__head { max-width: 640px; margin: 0 auto 32px; text-align: center; }
.jp-tools__title {
  font-family: var(--jp-font-heading); font-weight: 700;
  font-size: clamp(26px, 5vw, 32px); line-height: 1.25; margin: 0 0 12px; color: var(--jp-text);
}
.jp-tools__sub { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--jp-text-soft); }
.jp-tools__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.jp-tools .jp-card {
  display: flex; flex-direction: column; background: var(--jp-surface); border-radius: 16px;
  border: 1.5px solid var(--jp-border); padding: 24px 22px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.jp-tools .jp-card:hover {
  border-color: var(--jp-accent); transform: translateY(-3px);
  box-shadow: var(--jp-shadow-hover);
}
/* El HTML trae stroke="#BC002D" en cada icono: el CSS lo sustituye por el de la paleta */
.jp-tools .jp-card svg { margin-bottom: 14px; stroke: var(--jp-accent); }
.jp-tools .jp-card__q {
  margin: 0 0 6px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .02em; line-height: 1.4; color: var(--jp-accent);
}
.jp-tools .jp-card__title {
  font-family: var(--jp-font-heading); font-weight: 700;
  font-size: 18px; line-height: 1.3; margin: 0 0 8px; color: var(--jp-text);
}
.jp-tools .jp-card__text { flex: 1; margin: 0; font-size: 14px; line-height: 1.6; color: var(--jp-text-muted); }
.jp-tools .jp-card__link {
  margin-top: 18px; font-weight: 700; font-size: 14px;
  color: var(--jp-accent); text-decoration: none;
}
.jp-tools .jp-card__link:hover { color: var(--jp-accent-hover); }
@media (min-width: 600px) {
  .jp-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1024px) {
  .jp-tools { padding: 64px 32px 72px; }
  .jp-tools__head { margin-bottom: 40px; }
  .jp-tools__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* =========================================================
   PORTADA — ÚLTIMAS NOTICIAS ([japopedia_ultimas_noticias] de noticias.php)
   Usa las tarjetas de la sección NOTICIAS. JetBlog se retiró el 2026-09-27.
   ========================================================= */

.jp-ultimas { box-sizing: border-box; width: 100%; max-width: 1120px; margin: 0 auto; font-family: var(--jp-font-body); }
.jp-ultimas__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 20px; }
.jp-ultimas .jp-ultimas__cab h2 { margin: 0; font-family: var(--jp-font-heading); font-size: clamp(26px, 3.6vw, 34px); font-weight: 800; line-height: 1.15; color: var(--jp-text); }
.jp-ultimas__cab a { font-size: 15px; font-weight: 700; color: var(--jp-accent) !important; text-decoration: none !important; white-space: nowrap; }
.jp-ultimas__cab a:hover { text-decoration: underline !important; }
@media (max-width: 600px) {
  .jp-ultimas__cab { margin-bottom: 4px; }
}


/* =========================================================
   EL PROYECTO (/el-proyecto/, antes /quienes-somos/)
   (widget HTML de Elementor, sección .jp-profile-page)
   Todo va dentro de .jp-profile-page: el Asistente usa también la
   clase .jp-btn, con otro diseño.
   ========================================================= */

.jp-profile-page {
  width: 100%; background: var(--jp-bg); color: var(--jp-text-soft);
  font-family: var(--jp-font-body);
}
.jp-profile-page * { box-sizing: border-box; }
.jp-profile-page .jp-profile-shell { width: calc(100% - 48px); max-width: 1290px; margin: 0 auto; }

/* Cabecera */
.jp-profile-page .jp-profile-hero {
  padding: 90px 0 75px;
  background: linear-gradient(135deg, var(--jp-bg) 0%, var(--jp-bg-alt) 100%);
}
.jp-profile-page .jp-profile-intro { max-width: 850px; }
.jp-profile-page .jp-profile-kicker {
  display: inline-block; margin-bottom: 14px; font-size: 11px; font-weight: 700;
  line-height: 1.3; color: var(--jp-accent); letter-spacing: .12em; text-transform: uppercase;
}
.jp-profile-page .jp-profile-hero h1 {
  max-width: 900px; margin: 0 0 20px; font-family: var(--jp-font-heading);
  font-size: clamp(38px, 5vw, 62px); font-weight: 700; line-height: 1.18; color: var(--jp-text);
}
.jp-profile-page .jp-profile-hero p { max-width: 760px; margin: 0; font-size: 18px; line-height: 1.75; color: var(--jp-text-soft); }

/* Ficha */
.jp-profile-page .jp-profile-section { padding: 72px 0; }
.jp-profile-page .jp-profile-card {
  display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.5fr);
  overflow: hidden; background: var(--jp-surface);
  border: 1.5px solid var(--jp-border); border-radius: 18px;
  box-shadow: 0 18px 45px rgba(44, 44, 44, .06);
}
.jp-profile-page .jp-profile-photo { min-height: 540px; background: var(--jp-bg-alt); }
.jp-profile-page .jp-profile-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.jp-profile-page .jp-profile-content { display: flex; flex-direction: column; justify-content: center; padding: 58px 62px; }
.jp-profile-page .jp-profile-role {
  margin-bottom: 10px; font-size: 12px; font-weight: 700; line-height: 1.4;
  color: var(--jp-accent); text-transform: uppercase; letter-spacing: .08em;
}
.jp-profile-page .jp-profile-content h2 {
  margin: 0 0 22px; font-family: var(--jp-font-heading); font-size: clamp(34px, 4vw, 48px);
  font-weight: 700; line-height: 1.18; color: var(--jp-text);
}
.jp-profile-page .jp-profile-content p { margin: 0 0 18px; font-size: 16px; line-height: 1.75; color: var(--jp-text-soft); }
.jp-profile-page .jp-profile-content .jp-profile-lead { font-size: 18px; color: var(--jp-text); }

/* Botones */
.jp-profile-page .jp-profile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.jp-profile-page .jp-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 10px 20px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.2;
  text-decoration: none !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.jp-profile-page .jp-btn:hover { transform: translateY(-2px); }
.jp-profile-page .jp-btn-primary { background: var(--jp-accent); border: 1.5px solid var(--jp-accent); color: #fff !important; }
.jp-profile-page .jp-btn-primary:hover { background: var(--jp-accent-hover); border-color: var(--jp-accent-hover); }
.jp-profile-page .jp-btn-secondary {
  background: transparent;
  border: 1.5px solid rgba(188, 0, 45, .3);                                 /* navegadores sin color-mix */
  border-color: color-mix(in srgb, var(--jp-accent) 30%, transparent);
  color: var(--jp-accent) !important;
}
.jp-profile-page .jp-btn-secondary:hover { background: var(--jp-accent-soft); border-color: var(--jp-accent); }

/* Áreas de trabajo */
.jp-profile-page .jp-profile-expertise { padding: 80px 0; background: var(--jp-bg-alt); }
.jp-profile-page .jp-section-heading { max-width: 760px; margin-bottom: 38px; }
.jp-profile-page .jp-section-heading h2 {
  margin: 0; font-family: var(--jp-font-heading); font-size: clamp(30px, 4vw, 42px);
  line-height: 1.25; color: var(--jp-text);
}
.jp-profile-page .jp-expertise-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.jp-profile-page .jp-expertise-card {
  position: relative; min-height: 260px; padding: 28px; overflow: hidden;
  background: var(--jp-surface); border: 1.5px solid var(--jp-border); border-radius: 16px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.jp-profile-page .jp-expertise-card:hover {
  border-color: var(--jp-accent); transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(44, 44, 44, .07);
}
.jp-profile-page .jp-expertise-number {
  margin-bottom: 30px; font-family: var(--jp-font-heading); font-size: 13px;
  font-weight: 700; color: var(--jp-accent);
}
.jp-profile-page .jp-expertise-card h3 {
  margin: 0 0 14px; font-family: var(--jp-font-heading); font-size: 21px; line-height: 1.35;
  color: var(--jp-text); word-break: normal; overflow-wrap: normal; hyphens: none;
}
.jp-profile-page .jp-expertise-card p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--jp-text-muted); }

/* Proyecto Japopedia */
.jp-profile-page .jp-profile-project { padding: 82px 0; }
.jp-profile-page .jp-project-box {
  display: grid; grid-template-columns: minmax(0, 1.5fr) 180px; gap: 60px; align-items: center;
  padding: 52px 58px; background: var(--jp-surface);
  border: 1.5px solid var(--jp-border); border-radius: 18px;
}
.jp-profile-page .jp-project-box h2 {
  margin: 0 0 18px; font-family: var(--jp-font-heading);
  font-size: clamp(32px, 4vw, 44px); color: var(--jp-text);
}
.jp-profile-page .jp-project-box p { max-width: 780px; margin: 0; font-size: 16px; line-height: 1.75; color: var(--jp-text-soft); }
.jp-profile-page .jp-project-mark {
  display: flex; align-items: center; justify-content: center; width: 170px; height: 170px;
  margin-left: auto; background: var(--jp-accent); border-radius: 50%;
}
.jp-profile-page .jp-project-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.jp-profile-page .jp-project-mark span {
  font-family: var(--jp-font-heading); font-size: 34px; font-weight: 700;
  color: #fff; writing-mode: vertical-rl; letter-spacing: .08em;
}

@media (max-width: 1024px) {
  .jp-profile-page .jp-profile-card { grid-template-columns: minmax(250px, .85fr) minmax(0, 1.3fr); }
  .jp-profile-page .jp-profile-content { padding: 42px; }
  .jp-profile-page .jp-profile-photo { min-height: 470px; }
  .jp-profile-page .jp-expertise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .jp-profile-page .jp-profile-shell { width: calc(100% - 36px); }
  .jp-profile-page .jp-profile-hero { padding: 55px 0 45px; }
  .jp-profile-page .jp-profile-hero h1 { font-size: 34px; }
  .jp-profile-page .jp-profile-hero p { font-size: 16px; }
  .jp-profile-page .jp-profile-section { padding: 42px 0; }
  .jp-profile-page .jp-profile-card { grid-template-columns: 1fr; }
  .jp-profile-page .jp-profile-photo { min-height: 0; }
  .jp-profile-page .jp-profile-photo img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  .jp-profile-page .jp-profile-content { padding: 30px 24px; }
  .jp-profile-page .jp-profile-content h2 { font-size: 31px; }
  .jp-profile-page .jp-profile-content .jp-profile-lead { font-size: 17px; }
  .jp-profile-page .jp-profile-expertise { padding: 55px 0; }
  .jp-profile-page .jp-expertise-grid { grid-template-columns: 1fr; }
  .jp-profile-page .jp-expertise-card { min-height: auto; }
  .jp-profile-page .jp-profile-project { padding: 55px 0; }
  .jp-profile-page .jp-project-box { grid-template-columns: 1fr; gap: 30px; padding: 32px 26px; }
  .jp-profile-page .jp-project-mark { width: 110px; height: 110px; margin: 0; }
  .jp-profile-page .jp-project-mark span { font-size: 27px; }
}


/* =========================================================
   AVISO DE PLAN (.jp-aviso-plan)
   Lo pinta japopedia-directorio (acceso.php) donde un contenido
   requiere cuenta o plan de pago: contactos, filtros, Matching.
   ========================================================= */

.jp-aviso-plan {
  box-sizing: border-box; margin: 16px 0; padding: 20px;
  background: var(--jp-bg-alt); border: 1px solid var(--jp-border); border-radius: 12px;
  font-family: var(--jp-font-body); color: var(--jp-text);
}
.jp-aviso-plan__titulo {
  margin: 0 0 6px; font-family: var(--jp-font-heading);
  font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--jp-text);
}
.jp-aviso-plan__texto { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--jp-text-soft); }
.jp-aviso-plan__boton {
  display: inline-block; padding: 9px 18px; border-radius: 999px;
  background: var(--jp-accent); color: #fff !important;
  font-size: 14px; font-weight: 700; text-decoration: none !important;
}
.jp-aviso-plan__boton:hover { background: var(--jp-accent-hover); }
/* Dentro de la columna de filtros del directorio, más compacto */
.jp-dir-filters .jp-aviso-plan { margin: 0; padding: 14px; background: var(--jp-surface); }
.jp-dir-filters .jp-aviso-plan__titulo { font-size: 16px; }
.jp-dir-filters .jp-aviso-plan__texto { font-size: 13px; }


/* =========================================================
   PRECIOS ([japopedia_planes] del plugin japopedia-assistant)
   .jp-precios--tarjetas: tarjetas en columna (página del Asistente)
   .jp-precios--completa: página de Precios
   ========================================================= */

.jp-precios { box-sizing: border-box; font-family: var(--jp-font-body); color: var(--jp-text); }
.jp-precios *, .jp-precios *::before, .jp-precios *::after { box-sizing: border-box; }
.jp-precios--completa { max-width: 1120px; margin: 0 auto; padding: 48px 20px 72px; }
.jp-precios h2 {
  margin: 0 0 16px; font-family: var(--jp-font-heading); font-size: clamp(24px, 3.5vw, 30px);
  font-weight: 700; line-height: 1.25; color: var(--jp-text);
}
.jp-precios section { margin-top: 64px; }

/* Cabecera */
.jp-precios__cabecera { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.jp-precios__kicker { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jp-accent); }
.jp-precios__titulo {
  margin: 0 0 14px; font-family: var(--jp-font-heading); font-size: clamp(32px, 6vw, 48px);
  font-weight: 800; line-height: 1.15; color: var(--jp-text);
}
.jp-precios__lead { margin: 0; font-size: 17px; line-height: 1.65; color: var(--jp-text-soft); }

/* Tarjetas */
.jp-precios__planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.jp-precios--tarjetas .jp-precios__planes { grid-template-columns: 1fr; gap: 14px; }
.jp-precios__plan {
  display: flex; flex-direction: column; padding: 28px 24px; background: var(--jp-surface);
  border: 1.5px solid var(--jp-border); border-radius: 18px;
}
.jp-precios__plan--odana { border: 2px solid var(--jp-accent); box-shadow: var(--jp-shadow-hover); }
.jp-precios--tarjetas .jp-precios__plan { padding: 20px; }
.jp-precios__plan-cab { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.jp-precios__sello {
  flex: 0 0 52px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--jp-accent); border-radius: 10px; color: var(--jp-accent);
  font-family: var(--jp-font-jp); font-size: 17px; font-weight: 700; letter-spacing: .02em;
}
.jp-precios__plan--odana .jp-precios__sello { background: var(--jp-accent); color: #fff; }
/* Sello ilustrado del plan (japopedia_sello_plan_html): pegado en la esquina
   de la tarjeta, como un sello en un sobre. Si el plan no tiene ilustración
   se ve el kanji de arriba */
.jp-precios__plan--con-sello { position: relative; }
.jp-precios__plan--con-sello .jp-precios__plan-cab { min-height: 84px; padding-right: 96px; }
.jp-precios__plan--con-sello .jp-sello-img { position: absolute; top: -10px; right: 14px; width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(44, 44, 44, .18)); transform: rotate(4deg); }
.jp-precios__plan--gosho .jp-sello-img { transform: rotate(-3deg); }
.jp-precios__plan--odana .jp-sello-img { transform: rotate(3deg); }
.jp-precios__nombre { margin: 0; font-family: var(--jp-font-heading); font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--jp-text); }
.jp-precios__para { margin: 2px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--jp-text-muted); }
.jp-precios__precio { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.jp-precios__cifra { font-family: var(--jp-font-heading); font-size: 40px; font-weight: 800; line-height: 1; color: var(--jp-text); }
.jp-precios--tarjetas .jp-precios__cifra { font-size: 30px; }
.jp-precios__periodo { font-size: 16px; color: var(--jp-text-muted); }
.jp-precios__condiciones { margin: 8px 0 20px; font-size: 13px; color: var(--jp-text-muted); min-height: 1.4em; }
.jp-precios__plan--odana .jp-precios__condiciones { color: var(--jp-ok); font-weight: 700; }
.jp-precios__lista { flex: 1; margin: 0 0 24px; padding: 0; list-style: none; }
.jp-precios__lista li { position: relative; padding: 7px 0 7px 26px; font-size: 14.5px; line-height: 1.45; border-top: 1px solid var(--jp-border); }
.jp-precios__lista li:first-child { border-top: 0; }
.jp-precios__si::before { content: "✓"; position: absolute; left: 2px; top: 7px; color: var(--jp-ok); font-weight: 700; }
.jp-precios__no { color: var(--jp-text-muted); }
.jp-precios__no::before { content: "—"; position: absolute; left: 2px; top: 7px; color: var(--jp-text-muted); }

/* Botones */
.jp-precios__cta {
  display: block; text-align: center; padding: 12px 18px; border-radius: 999px;
  background: var(--jp-accent); color: #fff !important; border: 1.5px solid var(--jp-accent);
  font-size: 15px; font-weight: 700; text-decoration: none !important; transition: background .15s;
}
.jp-precios__cta:hover { background: var(--jp-accent-hover); border-color: var(--jp-accent-hover); }
.jp-precios__cta--secundario { background: transparent; color: var(--jp-accent) !important; }
.jp-precios__cta--secundario:hover { background: var(--jp-accent-soft); }
.jp-precios__cta--actual, .jp-precios__cta--pronto {
  background: var(--jp-bg-alt); color: var(--jp-text-muted) !important; border-color: var(--jp-border); cursor: default;
}
.jp-precios__cta--actual:hover, .jp-precios__cta--pronto:hover { background: var(--jp-bg-alt); border-color: var(--jp-border); }
.jp-precios__comparar { margin: 14px 0 0; text-align: center; font-size: 14px; font-weight: 700; }
.jp-precios__comparar a { color: var(--jp-accent); text-decoration: none; }

/* Qué cuenta como informe / qué no incluye */
.jp-precios__informe, .jp-precios__excluye {
  padding: 28px 32px; background: var(--jp-bg-alt); border-radius: 18px;
}
.jp-precios__informe p, .jp-precios__excluye p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: var(--jp-text-soft); }
.jp-precios__informe ul, .jp-precios__excluye ul { margin: 0; padding-left: 20px; }
.jp-precios__informe li, .jp-precios__excluye li { margin-bottom: 8px; font-size: 15.5px; line-height: 1.6; color: var(--jp-text-soft); }
.jp-precios__informe strong, .jp-precios__excluye strong { color: var(--jp-text); }
.jp-precios__excluye { background: var(--jp-surface); border: 1.5px solid var(--jp-border); }

/* Tabla comparativa */
.jp-precios__tabla-wrap { overflow-x: auto; border: 1.5px solid var(--jp-border); border-radius: 16px; background: var(--jp-surface); }
.jp-precios__tabla { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px; }
.jp-precios__tabla th, .jp-precios__tabla td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--jp-border); vertical-align: middle; }
.jp-precios__tabla thead th { font-family: var(--jp-font-heading); font-size: 17px; font-weight: 700; background: var(--jp-bg-alt); }
.jp-precios__tabla tbody th { text-align: left; font-weight: 600; color: var(--jp-text); }
.jp-precios__tabla tbody tr:last-child th, .jp-precios__tabla tbody tr:last-child td { border-bottom: 0; }
.jp-precios__tabla th:first-child { position: sticky; left: 0; background: var(--jp-surface); min-width: 190px; }
.jp-precios__tabla thead th:first-child { background: var(--jp-bg-alt); }
.jp-precios__tabla td:last-child, .jp-precios__tabla thead th:last-child { background: var(--jp-accent-soft); }
.jp-precios__t-si { color: var(--jp-ok); font-weight: 700; font-size: 17px; }
.jp-precios__t-no { color: var(--jp-text-muted); }

/* Preguntas frecuentes */
.jp-precios__faq details { border-bottom: 1px solid var(--jp-border); }
.jp-precios__faq summary {
  list-style: none; cursor: pointer; padding: 18px 32px 18px 0; position: relative;
  font-size: 17px; font-weight: 700; color: var(--jp-text);
}
.jp-precios__faq summary::-webkit-details-marker { display: none; }
.jp-precios__faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 24px; font-weight: 400; color: var(--jp-accent); }
.jp-precios__faq details[open] summary::after { content: "−"; }
.jp-precios__faq details p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.65; color: var(--jp-text-soft); max-width: 72ch; }

/* Equipos */
.jp-precios__equipos {
  display: flex; gap: 24px; align-items: center; justify-content: space-between;
  padding: 28px 32px; border-radius: 18px; background: var(--jp-text); color: #fff;
}
.jp-precios__equipos h2 { color: #fff; font-size: 24px; margin-bottom: 8px; }
.jp-precios__equipos p { margin: 0; color: rgba(255, 255, 255, .8); font-size: 15.5px; line-height: 1.6; }
.jp-precios__equipos .jp-precios__cta { flex: 0 0 auto; border-color: #fff; color: #fff !important; }
.jp-precios__equipos .jp-precios__cta:hover { background: rgba(255, 255, 255, .12); }

@media (max-width: 960px) {
  .jp-precios__planes { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .jp-precios__plan--con-sello .jp-precios__plan-cab { min-height: 96px; padding-right: 116px; }
  .jp-precios__plan--con-sello .jp-sello-img { width: 116px; height: 116px; }
}
@media (max-width: 600px) {
  .jp-precios--completa { padding: 32px 16px 56px; }
  .jp-precios section { margin-top: 48px; }
  .jp-precios__informe, .jp-precios__excluye, .jp-precios__equipos { padding: 22px 20px; }
  .jp-precios__equipos { flex-direction: column; align-items: stretch; }
  .jp-precios__tabla th, .jp-precios__tabla td { padding: 12px 10px; }
}


/* =========================================================
   MI CUENTA (WooCommerce; contenido de japopedia-assistant/
   japopedia-cuenta.php y templates/cuenta-panel.php)
   Todo limitado a body.woocommerce-account: no toca carrito ni pago.
   ========================================================= */

/* ---- Acceso y registro (sin sesión) ---- */
.woocommerce-account .jp-cuenta-acceso__cabecera { max-width: 680px; margin: 8px auto 32px; text-align: center; font-family: var(--jp-font-body); }
.jp-cuenta-acceso__kicker { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jp-accent); }
.jp-cuenta-acceso__titulo { margin: 0 0 12px; font-family: var(--jp-font-heading); font-size: clamp(28px, 5vw, 40px); font-weight: 800; line-height: 1.15; color: var(--jp-text); }
.jp-cuenta-acceso__lead { margin: 0; font-size: 16px; line-height: 1.65; color: var(--jp-text-soft); }

.woocommerce-account #customer_login {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 960px; margin: 0 auto;
}
.woocommerce-account #customer_login::before, .woocommerce-account #customer_login::after { display: none; }
.woocommerce-account #customer_login > .u-column1,
.woocommerce-account #customer_login > .u-column2 {
  float: none; width: auto; margin: 0; padding: 28px; background: var(--jp-surface);
  border: 1.5px solid var(--jp-border); border-radius: 18px;
}
.woocommerce-account #customer_login > .u-column2 { order: -1; border: 2px solid var(--jp-accent); } /* registro primero */
.woocommerce-account #customer_login h2 { margin: 0 0 16px; font-family: var(--jp-font-heading); font-size: 24px; font-weight: 700; color: var(--jp-text); }
.woocommerce-account #customer_login form { margin: 0; padding: 0; border: 0; }
.woocommerce-account #customer_login label { font-size: 14px; font-weight: 600; color: var(--jp-text); }
.woocommerce-account #customer_login input.input-text {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--jp-border-strong); border-radius: 10px;
  background: #fff; font-size: 15px; font-family: var(--jp-font-body);
}
.woocommerce-account #customer_login input.input-text:focus { outline: none; border-color: var(--jp-accent); box-shadow: 0 0 0 3px var(--jp-accent-soft); }
.woocommerce-account #customer_login .button {
  display: inline-block; padding: 11px 22px; border-radius: 999px; border: 0;
  background: var(--jp-accent); color: #fff; font-weight: 700; font-size: 15px;
}
.woocommerce-account #customer_login .button:hover { background: var(--jp-accent-hover); }
.woocommerce-account #customer_login .woocommerce-privacy-policy-text p { font-size: 13px; line-height: 1.55; color: var(--jp-text-muted); }
.woocommerce-account #customer_login .lost_password a { color: var(--jp-accent); font-size: 14px; }
.woocommerce-account .jp-cuenta-acceso__ventajas { margin: 0 0 18px; padding: 14px 16px; list-style: none; background: var(--jp-bg-alt); border-radius: 12px; } /* el tema añade padding-left a las listas del formulario */
.jp-cuenta-acceso__ventajas li { position: relative; padding: 4px 0 4px 24px; font-size: 14.5px; color: var(--jp-text); }
.jp-cuenta-acceso__ventajas li::before { content: "✓"; position: absolute; left: 2px; color: var(--jp-ok); font-weight: 700; }

/* ---- Menú lateral (Kadence lo envuelve en .account-navigation-wrap, con
   avatar y nombre, al 30 % y con bordes propios: se anulan aquí) ---- */
.woocommerce-account .account-navigation-wrap { border: 0 !important; }
@media (min-width: 768px) {
  .kadence-account-nav-left.woocommerce-account .account-navigation-wrap { width: 26%; }
  .kadence-account-nav-left.woocommerce-account .woocommerce-MyAccount-content { width: 74%; }
}
.woocommerce-account .account-navigation-wrap .kadence-account-avatar { margin-bottom: 12px; font-weight: 700; color: var(--jp-text); }
.woocommerce-account .account-navigation-wrap .woocommerce-MyAccount-navigation ul {
  margin: 0; padding: 8px; list-style: none; background: var(--jp-surface);
  border: 1.5px solid var(--jp-border); border-radius: 16px;
}
.woocommerce-account .account-navigation-wrap .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; border: 0; }
.woocommerce-account .account-navigation-wrap .woocommerce-MyAccount-navigation li a,
.woocommerce-account .account-navigation-wrap .woocommerce-MyAccount-navigation li:hover a,
.woocommerce-account .account-navigation-wrap .woocommerce-MyAccount-navigation li.is-active a {
  display: block; margin: 0 !important; padding: 10px 14px !important; border: 0 !important; border-radius: 10px;
  font-size: 15px; font-weight: 600; color: var(--jp-text-soft); text-decoration: none;
}
.woocommerce-account .account-navigation-wrap .woocommerce-MyAccount-navigation li:hover a { background: var(--jp-bg-alt); color: var(--jp-text); }
.woocommerce-account .account-navigation-wrap .woocommerce-MyAccount-navigation li.is-active a { background: var(--jp-accent-soft); color: var(--jp-accent); }
.woocommerce-account .account-navigation-wrap .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--jp-border); }
.woocommerce-account .account-navigation-wrap .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--jp-text-muted); font-weight: 500; }

/* ---- Tablas (pedidos, suscripciones) ---- */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
  border: 1.5px solid var(--jp-border); border-radius: 14px; border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th { background: var(--jp-bg-alt); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--jp-text-muted); }
/* Botones del contenido (Ver, Cancelar, Cambiar método de pago…): píldoras
   pequeñas; rojo solo lo principal, secundario el resto y gris "Cancelar" */
/* Selector de retrato (japopedia-assistant/japopedia-avatares.php) */
.woocommerce-account .jp-avatar-elegir { margin: 0 0 24px; padding: 0; border: 0; }
.woocommerce-account .jp-avatar-elegir legend { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 600; color: var(--jp-text); }
.jp-avatar-elegir__opciones { display: flex; flex-wrap: wrap; gap: 14px; }
.jp-avatar-elegir__opcion { position: relative; cursor: pointer; }
.jp-avatar-elegir__opcion input { position: absolute; opacity: 0; }
.jp-avatar-elegir__opcion img { display: block; width: 72px; height: 72px; border-radius: 50%; border: 3px solid transparent; transition: border-color .15s, transform .15s; }
.jp-avatar-elegir__opcion:hover img { transform: translateY(-2px); }
.jp-avatar-elegir__opcion input:checked + img { border-color: var(--jp-accent); box-shadow: 0 0 0 3px var(--jp-accent-soft); }
.jp-avatar-elegir__opcion input:focus-visible + img { outline: 2px solid var(--jp-accent); outline-offset: 2px; }
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button { display: inline-block; margin: 2px 6px 2px 0; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--jp-accent); background: var(--jp-accent); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-content .button:hover { background: var(--jp-accent-hover); border-color: var(--jp-accent-hover); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-content td .button,
.woocommerce-account .woocommerce-MyAccount-content .button.change_payment_method,
.woocommerce-account .woocommerce-MyAccount-content .button.subscription_renewal_early { background: transparent; color: var(--jp-accent); }
.woocommerce-account .woocommerce-MyAccount-content td .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button.change_payment_method:hover,
.woocommerce-account .woocommerce-MyAccount-content .button.subscription_renewal_early:hover { background: var(--jp-accent-soft); color: var(--jp-accent); }
.woocommerce-account .woocommerce-MyAccount-content .button.cancel { background: transparent; border-color: var(--jp-border-strong); color: var(--jp-text-soft); }
.woocommerce-account .woocommerce-MyAccount-content .button.cancel:hover { background: var(--jp-bg-alt); border-color: var(--jp-text-muted); color: var(--jp-text); }

/* ---- Panel ---- */
.jp-panel { font-family: var(--jp-font-body); color: var(--jp-text); }
.jp-panel h3 { margin: 32px 0 12px; font-family: var(--jp-font-body); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--jp-text-muted); }
.jp-panel__saludo h2 { margin: 0 0 6px; font-family: var(--jp-font-heading); font-size: 30px; font-weight: 700; color: var(--jp-text); }
.jp-panel__saludo p { margin: 0 0 24px; color: var(--jp-text-soft); }
.jp-panel__alerta {
  margin: 0 0 20px; padding: 14px 16px; border-left: 4px solid var(--jp-amber); border-radius: 8px;
  background: var(--jp-warn-soft); font-size: 14.5px; line-height: 1.55; color: var(--jp-text);
}
.jp-panel__plan {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
  padding: 24px; background: var(--jp-surface); border: 1.5px solid var(--jp-border); border-radius: 18px;
}
.jp-panel__plan-id { display: flex; gap: 16px; align-items: center; }
.jp-panel__plan .jp-precios__sello { flex-basis: 60px; width: 60px; height: 60px; font-size: 19px; }
.jp-panel__plan .jp-sello-img { flex: 0 0 110px; width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(44, 44, 44, .18)); transform: rotate(-3deg); }
.jp-panel__etiqueta { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--jp-text-muted); }
.jp-panel__plan-nombre { margin: 0; font-family: var(--jp-font-heading); font-size: 26px; font-weight: 700; line-height: 1.2; }
.jp-panel__insignia { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: var(--jp-ok-soft); color: var(--jp-ok); font-family: var(--jp-font-body); font-size: 12px; font-weight: 700; vertical-align: middle; }
.jp-panel__estado { margin: 4px 0 0; font-size: 14px; color: var(--jp-text-soft); }
.jp-panel__plan-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.jp-panel__plan-acciones .jp-precios__cta { display: inline-block; padding: 10px 18px; font-size: 14px; }
.jp-panel__metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.jp-panel__metrica { padding: 18px; background: var(--jp-surface); border: 1.5px solid var(--jp-border); border-radius: 14px; }
.jp-panel__cifra { margin: 0 0 10px; font-family: var(--jp-font-heading); font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--jp-text); }
.jp-panel__cifra span { font-family: var(--jp-font-body); font-size: 14px; font-weight: 500; color: var(--jp-text-muted); }
.jp-panel__cifra--texto { font-size: 22px; }
.jp-panel__barra { height: 8px; margin-bottom: 8px; border-radius: 999px; background: var(--jp-bg-alt); overflow: hidden; }
.jp-panel__barra i { display: block; height: 100%; border-radius: 999px; background: var(--jp-accent); transition: width .4s; }
.jp-panel__nota { margin: 0; font-size: 13px; color: var(--jp-text-muted); }
.jp-panel__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.jp-panel__acceso {
  display: block; padding: 18px; background: var(--jp-surface); border: 1.5px solid var(--jp-border); border-radius: 14px;
  text-decoration: none !important; color: inherit !important; transition: border-color .15s, transform .15s;
}
.jp-panel__acceso:hover { border-color: var(--jp-accent); transform: translateY(-2px); }
.jp-panel__acceso-titulo { display: block; margin-bottom: 4px; font-weight: 700; font-size: 16px; color: var(--jp-text); }
.jp-panel__acceso-texto { display: block; font-size: 14px; line-height: 1.5; color: var(--jp-text-muted); }
.jp-panel__acceso--bloqueado { background: var(--jp-bg-alt); }
.jp-panel__acceso--bloqueado .jp-panel__acceso-texto { color: var(--jp-accent); font-weight: 600; }
.jp-panel__candado { font-size: 13px; }

@media (max-width: 768px) {
  .woocommerce-account #customer_login { grid-template-columns: 1fr; }
  .woocommerce-account #customer_login > .u-column1, .woocommerce-account #customer_login > .u-column2 { padding: 22px 18px; }
  .jp-panel__rejilla { grid-template-columns: 1fr; }
  .jp-panel__plan { padding: 20px; }
  .jp-panel__plan-acciones, .jp-panel__plan-acciones .jp-precios__cta { width: 100%; text-align: center; }
}


/* =========================================================
   NOTICIAS ([japopedia_noticias] de noticias.php: /noticias/ y archivos)
   Dos secciones: Noticias (sobre el fondo de la web: temas, destacada y
   rejilla de tres; en móvil, filas compactas con miniatura) y Japón por
   Dentro (banda oscura con acentos cerezo y sello 内; en móvil, carrusel).
   El fondo de la web ya es --jp-bg-alt: para distinguir hace falta la
   banda oscura. Los textos, con .jp-noticias delante: el tema pisa el color
   de los <p> de la plantilla.
   ========================================================= */

.jp-noticias { box-sizing: border-box; max-width: 1120px; margin: 0 auto; padding: 40px 20px 72px; font-family: var(--jp-font-body); color: var(--jp-text); }
.jp-noticias *, .jp-noticias *::before, .jp-noticias *::after { box-sizing: border-box; }

.jp-noticias__cabecera { max-width: 720px; margin-bottom: 28px; }
.jp-noticias__kicker { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jp-accent); }
.jp-noticias__titulo { margin: 0 0 12px; font-family: var(--jp-font-heading); font-size: clamp(32px, 6vw, 46px); font-weight: 800; line-height: 1.1; color: var(--jp-text); }
.jp-noticias__lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--jp-text-soft); }

/* Temas: fila con desplazamiento horizontal en móvil */
.jp-noticias__temas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.jp-noticias__tema { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--jp-border); background: var(--jp-surface); font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--jp-text-soft) !important; text-decoration: none !important; white-space: nowrap; transition: border-color .15s, background .15s; }
.jp-noticias__tema:hover { border-color: var(--jp-accent); color: var(--jp-accent) !important; }
.jp-noticias__tema.is-activo { background: var(--jp-accent); border-color: var(--jp-accent); color: #fff !important; }

/* Selector de sección */
.jp-noticias__secciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 44px; }
.jp-noticias__seccion { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--jp-surface); border: 1.5px solid var(--jp-border); border-radius: 16px; color: var(--jp-text) !important; text-decoration: none !important; transition: border-color .15s, transform .15s; }
.jp-noticias__seccion:hover { border-color: var(--jp-accent); transform: translateY(-2px); }
.jp-noticias__seccion strong { display: block; font-family: var(--jp-font-heading); font-size: 18px; font-weight: 700; line-height: 1.25; }
.jp-noticias__seccion small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--jp-text-muted); }
.jp-noticias__seccion-sello { flex: 0 0 44px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--jp-accent); border-radius: 10px; color: var(--jp-accent); font-family: var(--jp-font-jp); font-size: 20px; font-weight: 700; }
.jp-noticias__seccion--cultura { background: var(--jp-text); border-color: var(--jp-text); color: #fff !important; }
.jp-noticias__seccion--cultura small { color: rgba(255, 255, 255, .72); }
.jp-noticias__seccion--cultura .jp-noticias__seccion-sello { background: var(--jp-accent); border-color: var(--jp-accent); color: #fff; }
.jp-noticias__seccion--cultura:hover { border-color: var(--jp-cherry); }
.jp-noticias__seccion.is-activa { border-color: var(--jp-accent); box-shadow: inset 0 0 0 1px var(--jp-accent); }

/* Cabecera de la sección Noticias: título y temas */
.jp-noticias__bloque { scroll-margin-top: 90px; }
.jp-noticias__bloque-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 22px; }
.jp-noticias__bloque-cab h2 { margin: 0; font-family: var(--jp-font-heading); font-size: clamp(24px, 3.5vw, 30px); font-weight: 700; color: var(--jp-text); }
.jp-noticias__bloque-cab .jp-noticias__temas { margin: 0; }

/* Tarjetas */
.jp-noticias__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.jp-noticia { min-width: 0; }
.jp-noticia__enlace { display: flex; flex-direction: column; height: 100%; background: var(--jp-surface); border: 1.5px solid var(--jp-border); border-radius: 16px; overflow: hidden; color: inherit !important; text-decoration: none !important; transition: border-color .15s, transform .15s, box-shadow .15s; }
.jp-noticia__enlace:hover { border-color: var(--jp-accent); transform: translateY(-2px); box-shadow: var(--jp-shadow-hover); }
.jp-noticia__enlace:focus-visible { outline: 3px solid var(--jp-accent); outline-offset: 2px; }
.jp-noticia__media { display: block; aspect-ratio: 16 / 9; background: var(--jp-bg-alt); overflow: hidden; }
.jp-noticia__img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; border-radius: 0 !important; }
.jp-noticia__cuerpo { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; }
.jp-noticia__tema { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--jp-accent); }
.jp-noticia__titulo { font-family: var(--jp-font-heading); font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--jp-text); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.jp-noticia__extracto { font-size: 14.5px; line-height: 1.55; color: var(--jp-text-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jp-noticia__meta { margin-top: auto; padding-top: 4px; font-size: 13px; color: var(--jp-text-muted); }

/* Destacada: ocupa la fila entera, imagen a la izquierda */
.jp-noticia--destacada { grid-column: 1 / -1; }
.jp-noticia--destacada .jp-noticia__enlace { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.jp-noticia--destacada .jp-noticia__media { aspect-ratio: auto; min-height: 320px; }
.jp-noticia--destacada .jp-noticia__cuerpo { justify-content: center; gap: 12px; padding: 32px; }
.jp-noticia--destacada .jp-noticia__titulo { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; -webkit-line-clamp: 6; }
.jp-noticia--destacada .jp-noticia__extracto { font-size: 16px; -webkit-line-clamp: 4; }
.jp-noticia--destacada .jp-noticia__meta { margin-top: 4px; }

/* Paginación */
.jp-noticias__paginas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 32px; }
.jp-noticias__pagina { padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--jp-accent); color: var(--jp-accent) !important; font-size: 14px; font-weight: 700; text-decoration: none !important; }
.jp-noticias__pagina:hover { background: var(--jp-accent-soft); }
.jp-noticias__pagina--next { margin-left: auto; }
.jp-noticias__pagina-num { font-size: 14px; color: var(--jp-text-muted); }
.jp-noticias__vacio { padding: 24px; border-radius: 14px; background: var(--jp-bg-alt); color: var(--jp-text-soft); }
.jp-noticias__vacio a { color: var(--jp-accent); font-weight: 700; }

/* Japón por Dentro */
.jp-noticias__cultura { margin-top: 72px; padding: 40px 36px 44px; background: var(--jp-text); color: #fff; border-radius: 24px; scroll-margin-top: 90px; }
.jp-noticias__cultura-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 24px; }
.jp-noticias .jp-noticias__cultura-kicker { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jp-cherry); }
.jp-noticias__cultura-kicker span[lang] { letter-spacing: .15em; }
.jp-noticias .jp-noticias__cultura-cab h2 { margin: 0 0 8px; font-family: var(--jp-font-heading); font-size: clamp(26px, 4vw, 34px); font-weight: 800; color: #fff; }
.jp-noticias .jp-noticias__cultura-cab p:not(.jp-noticias__cultura-kicker) { margin: 0; max-width: 60ch; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.jp-noticias__cultura .jp-noticias__ver-todo { color: var(--jp-cherry) !important; }
.jp-noticias__cultura .jp-noticia__enlace { border-color: transparent; }
.jp-noticias__cultura .jp-noticia__enlace:hover { border-color: var(--jp-cherry); }
/* Archivo /category/japon-por-dentro/: la cabecera, en banda oscura */
.jp-noticias--cultura .jp-noticias__cabecera { max-width: none; padding: 36px; background: var(--jp-text); border-radius: 24px; }
.jp-noticias--cultura .jp-noticias__titulo { color: #fff; }
.jp-noticias.jp-noticias--cultura .jp-noticias__lead { color: rgba(255, 255, 255, .78); max-width: 60ch; }
.jp-noticias--cultura .jp-noticias__kicker a { color: var(--jp-cherry) !important; }
.jp-noticias__ver-todo { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--jp-accent) !important; text-decoration: none !important; }
.jp-noticias__carrusel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.jp-noticia--cultura .jp-noticia__media { aspect-ratio: 3 / 2; }

@media (max-width: 960px) {
  .jp-noticias__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jp-noticia--destacada .jp-noticia__enlace { grid-template-columns: 1fr; }
  .jp-noticia--destacada .jp-noticia__media { aspect-ratio: 16 / 9; min-height: 0; }
  .jp-noticia--destacada .jp-noticia__cuerpo { padding: 22px; }
}

@media (max-width: 600px) {
  .jp-noticias { padding: 24px 16px 56px; }
  .jp-noticias__cabecera { margin-bottom: 20px; }
  .jp-noticias__lead { font-size: 15.5px; }

  /* Temas en una sola fila que se desliza, sin cortar por los lados */
  /* Degradado a la derecha: indica que hay más temas deslizando */
  .jp-noticias__temas { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 20px; padding: 0 40px 4px 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
  .jp-noticias__temas::-webkit-scrollbar { display: none; }

  /* Lista: filas compactas (texto a la izquierda, miniatura a la derecha) */
  .jp-noticias__lista { grid-template-columns: 1fr; gap: 0; }
  .jp-noticia--normal .jp-noticia__enlace { flex-direction: row-reverse; align-items: flex-start; gap: 14px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--jp-border); border-radius: 0; background: transparent; overflow: visible; }
  .jp-noticia--normal .jp-noticia__enlace:hover { transform: none; box-shadow: none; }
  .jp-noticia--normal .jp-noticia__media { flex: 0 0 92px; width: 92px; height: 92px; aspect-ratio: auto; border-radius: 12px; }
  .jp-noticia--normal .jp-noticia__cuerpo { gap: 6px; padding: 0; }
  .jp-noticia--normal .jp-noticia__titulo { font-size: 16px; -webkit-line-clamp: 3; }
  .jp-noticia--normal .jp-noticia__extracto { display: none; }
  .jp-noticia__meta { font-size: 12.5px; }

  .jp-noticia--destacada { margin-bottom: 4px; }
  .jp-noticia--destacada .jp-noticia__cuerpo { padding: 18px; gap: 8px; }
  .jp-noticia--destacada .jp-noticia__titulo { font-size: 21px; }
  .jp-noticia--destacada .jp-noticia__extracto { font-size: 15px; -webkit-line-clamp: 3; }

  .jp-noticias__paginas { flex-wrap: wrap; justify-content: center; }
  .jp-noticias__pagina-num { order: -1; width: 100%; text-align: center; }
  .jp-noticias__pagina--next { margin-left: 0; }

  /* Japón por Dentro: carrusel horizontal con imán */
  .jp-noticias__secciones { gap: 10px; margin-bottom: 32px; }
  .jp-noticias__seccion { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .jp-noticias__seccion strong { font-size: 16px; }
  .jp-noticias__seccion small { font-size: 12.5px; }
  .jp-noticias__seccion-sello { flex-basis: 36px; width: 36px; height: 36px; font-size: 17px; border-radius: 8px; }
  /* En bloque, no flex: como hijo de flex, la fila de temas tomaba el ancho
     de todos los botones (1.251 px) y no había nada que deslizar */
  .jp-noticias__bloque-cab { display: block; margin-bottom: 8px; }
  .jp-noticias__bloque-cab h2 { margin-bottom: 12px; }
  .jp-noticias__bloque-cab .jp-noticias__temas { min-width: 0; margin: 0 -16px 8px; }
  .jp-noticias__cultura { margin: 48px -16px 0; padding: 32px 16px 36px; border-radius: 0; }
  .jp-noticias__cultura-cab { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 18px; }
  .jp-noticias--cultura .jp-noticias__cabecera { margin: -24px -16px 20px; padding: 28px 16px; border-radius: 0; }
  .jp-noticias__carrusel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin: 0 -16px; padding: 0 16px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .jp-noticias__carrusel::-webkit-scrollbar { display: none; }
  .jp-noticias__carrusel .jp-noticia { flex: 0 0 76%; scroll-snap-align: start; }
  .jp-noticia--cultura .jp-noticia__cuerpo { padding: 14px 16px 16px; }
  .jp-noticia--cultura .jp-noticia__titulo { font-size: 16px; -webkit-line-clamp: 3; }
}


/* =========================================================
   ARTÍCULO ([japopedia_articulo] de articulo.php, cada entrada del blog)
   Estilo periódico digital: texto en su columna de lectura (~68
   caracteres, sin justificar, letra capital) y columna lateral fija con los
   datos, compartir, la herramienta y lo último. No se parte el texto en
   columnas de papel: en pantalla obligaría a subir y bajar. En "Japón por
   Dentro" la cabecera va en la banda oscura del blog.
   ========================================================= */

.jp-articulo { --ancho-lectura: 720px; box-sizing: border-box; max-width: 1120px; margin: 0 auto; padding: 36px 20px 72px; font-family: var(--jp-font-body); color: var(--jp-text); }
.jp-articulo *, .jp-articulo *::before, .jp-articulo *::after { box-sizing: border-box; }

/* Cabecera */
.jp-articulo__cabecera { max-width: 920px; margin: 0 0 28px; }
.jp-articulo__migas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.jp-articulo__migas a { color: var(--jp-accent) !important; text-decoration: none !important; }
.jp-articulo__migas a:hover { text-decoration: underline !important; }
.jp-articulo__migas span { color: var(--jp-text-muted); }
.jp-articulo .jp-articulo__titulo { margin: 0 0 16px; font-family: var(--jp-font-heading); font-size: clamp(28px, 4.4vw, 44px); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--jp-text); }
.jp-articulo .jp-articulo__entradilla { margin: 0 0 18px; font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: var(--jp-text-soft); }
.jp-articulo .jp-articulo__meta { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; font-size: 14px; color: var(--jp-text-muted); }
.jp-articulo__autor { font-weight: 700; color: var(--jp-text) !important; text-decoration: none !important; }

/* Imagen */
/* margin con !important: Elementor pone margin 0 a las figure de sus widgets (.elementor .elementor-widget:not(…) figure) */
.jp-articulo__imagen { margin: 0 0 36px !important; border-radius: 16px; overflow: hidden; background: var(--jp-bg-alt); aspect-ratio: 16 / 9; }
.jp-articulo__imagen img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; }

/* Texto */
.jp-articulo__columnas { display: grid; grid-template-columns: minmax(0, var(--ancho-lectura)) 320px; justify-content: space-between; gap: 56px; align-items: start; }
.jp-articulo__cuerpo { min-width: 0; }
.jp-articulo__contenido { font-size: 18px; line-height: 1.75; color: var(--jp-text); }
.jp-articulo__contenido > * { max-width: 100%; }
.jp-articulo .jp-articulo__contenido p { margin: 0 0 1.2em; text-align: left; hyphens: manual; color: var(--jp-text); font-size: inherit; line-height: inherit; }
.jp-articulo .jp-articulo__contenido h2 { margin: 1.8em 0 .6em; font-family: var(--jp-font-heading); font-size: clamp(22px, 2.6vw, 27px); font-weight: 700; line-height: 1.25; text-align: left; color: var(--jp-text); }
.jp-articulo .jp-articulo__contenido h3 { margin: 1.5em 0 .5em; font-family: var(--jp-font-heading); font-size: 20px; font-weight: 700; line-height: 1.3; text-align: left; color: var(--jp-text); }
.jp-articulo__contenido a { color: var(--jp-accent); text-decoration: underline; text-underline-offset: 2px; }
.jp-articulo__contenido ul, .jp-articulo__contenido ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.jp-articulo__contenido li { margin-bottom: .4em; }
.jp-articulo__contenido blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--jp-accent); color: var(--jp-text-soft); font-style: italic; }
.jp-articulo__contenido img { max-width: 100%; height: auto; border-radius: 12px; }
/* Letra capital y primer párrafo algo mayor, como la entrada de un periódico */
.jp-articulo .jp-articulo__contenido > p:first-child { font-size: 1.08em; }
.jp-articulo__contenido > p:first-child::first-letter { float: left; margin: .08em .12em 0 0; font-family: var(--jp-font-heading); font-size: 3.6em; font-weight: 800; line-height: .82; color: var(--jp-accent); }
.jp-articulo__contenido figure { margin: 1.5em 0; }
.jp-articulo__contenido table { width: 100%; border-collapse: collapse; font-size: 15px; }
.jp-articulo__contenido th, .jp-articulo__contenido td { padding: 8px 10px; border-bottom: 1px solid var(--jp-border); text-align: left; }

/* Columna lateral */
.jp-articulo__lateral { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; }
.jp-articulo .jp-articulo__lateral-titulo { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--jp-text); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--jp-text); }
.jp-articulo__ficha { padding: 20px; background: var(--jp-surface); border: 1.5px solid var(--jp-border); border-radius: 16px; }
.jp-articulo__ficha dl { margin: 0; }
.jp-articulo__dato { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-top: 1px solid var(--jp-border); font-size: 14px; line-height: 1.45; }
.jp-articulo__dato:first-child { border-top: 0; padding-top: 0; }
.jp-articulo__dato dt { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--jp-text-muted); padding-top: 1px; }
.jp-articulo__dato dd { margin: 0; color: var(--jp-text); overflow-wrap: anywhere; }
.jp-articulo__dato a { color: var(--jp-accent) !important; font-weight: 700; text-decoration: none !important; }
.jp-articulo__dato a:hover { text-decoration: underline !important; }
.jp-articulo__lateral .jp-articulo__cta { flex-direction: column; align-items: stretch; gap: 14px; max-width: none; margin: 0; padding: 20px; border-radius: 16px; }
.jp-articulo__lateral .jp-articulo__cta-titulo { font-size: 19px; }
.jp-articulo__lateral .jp-articulo__cta-texto { font-size: 14px; }
.jp-articulo__lateral .jp-articulo__cta-boton { text-align: center; white-space: normal; }
.jp-articulo__ultimas ol { margin: 0; padding: 0; list-style: none; counter-reset: ultimas; }
.jp-articulo__ultimas li { counter-increment: ultimas; position: relative; padding: 10px 0 10px 34px; border-top: 1px solid var(--jp-border); }
.jp-articulo__ultimas li:first-child { border-top: 0; padding-top: 2px; }
.jp-articulo__ultimas li::before { content: counter(ultimas); position: absolute; left: 0; top: 6px; font-family: var(--jp-font-heading); font-size: 24px; font-weight: 800; line-height: 1; color: var(--jp-accent); }
.jp-articulo__ultimas li:first-child::before { top: 0; }
.jp-articulo__ultimas a { display: block; font-family: var(--jp-font-heading); font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--jp-text) !important; text-decoration: none !important; }
.jp-articulo__ultimas a:hover { color: var(--jp-accent) !important; }
.jp-articulo__ultimas time { display: block; margin-top: 2px; font-size: 12.5px; color: var(--jp-text-muted); }

/* Compartir */
.jp-articulo__compartir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--jp-border); }
.jp-articulo__compartir span { width: 100%; margin-right: 4px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--jp-text-muted); }
.jp-articulo__compartir a, .jp-articulo__compartir button { padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--jp-border-strong); background: var(--jp-surface); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--jp-text) !important; text-decoration: none !important; cursor: pointer; }
.jp-articulo__compartir a:hover, .jp-articulo__compartir button:hover { border-color: var(--jp-accent); color: var(--jp-accent) !important; background: var(--jp-surface); }

/* Autor */
.jp-articulo__autor-caja { display: flex; gap: 16px; align-items: flex-start; margin: 36px 0 0; padding: 22px; background: var(--jp-surface); border: 1.5px solid var(--jp-border); border-radius: 16px; scroll-margin-top: 90px; }
.jp-articulo__autor-sello { flex: 0 0 52px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--jp-text); color: var(--jp-cherry); font-family: var(--jp-font-jp); font-size: 24px; font-weight: 700; }
.jp-articulo__autor-retrato { flex: 0 0 72px; width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(44, 44, 44, .15)); transform: rotate(-3deg); }
.jp-articulo .jp-articulo__autor-nombre { margin: 0 0 4px; font-family: var(--jp-font-heading); font-size: 18px; font-weight: 700; color: var(--jp-text); }
.jp-articulo .jp-articulo__autor-bio { margin: 0; font-size: 15px; line-height: 1.6; color: var(--jp-text-soft); }
.jp-articulo__autor-mas { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--jp-accent) !important; text-decoration: none !important; }

/* Llamada a la herramienta */
.jp-articulo__cta { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; max-width: 860px; margin: 48px auto 0; padding: 28px 32px; background: var(--jp-accent-soft); border: 1.5px solid var(--jp-accent); border-radius: 20px; }
.jp-articulo .jp-articulo__cta-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jp-accent); }
.jp-articulo .jp-articulo__cta-titulo { margin: 0 0 6px; font-family: var(--jp-font-heading); font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--jp-text); }
.jp-articulo .jp-articulo__cta-texto { margin: 0; font-size: 15px; line-height: 1.55; color: var(--jp-text-soft); }
.jp-articulo__cta-boton { flex: 0 0 auto; padding: 12px 22px; border-radius: 999px; background: var(--jp-accent); color: #fff !important; font-size: 15px; font-weight: 700; text-decoration: none !important; white-space: nowrap; }
.jp-articulo__cta-boton:hover { background: var(--jp-accent-hover); }

/* Relacionados */
.jp-articulo__relacionados { margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--jp-border); }
.jp-articulo__relacionados-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.jp-articulo .jp-articulo__relacionados-cab h2 { margin: 0; font-family: var(--jp-font-heading); font-size: clamp(22px, 3vw, 28px); font-weight: 700; color: var(--jp-text); }
.jp-articulo__relacionados-cab a { font-size: 14px; font-weight: 700; color: var(--jp-accent) !important; text-decoration: none !important; }

/* Japón por Dentro: cabecera en banda oscura */
.jp-articulo--cultura .jp-articulo__cabecera { max-width: none; padding: 40px clamp(20px, 5vw, 64px); background: var(--jp-text); border-radius: 24px; margin-bottom: 36px; }
.jp-articulo--cultura .jp-articulo__cabecera > * { max-width: 860px; }
.jp-articulo--cultura .jp-articulo__migas a { color: var(--jp-cherry) !important; }
.jp-articulo--cultura .jp-articulo__migas span { color: rgba(255, 255, 255, .5); }
.jp-articulo.jp-articulo--cultura .jp-articulo__titulo { color: #fff; }
.jp-articulo.jp-articulo--cultura .jp-articulo__entradilla { color: rgba(255, 255, 255, .8); }
.jp-articulo.jp-articulo--cultura .jp-articulo__meta { color: rgba(255, 255, 255, .65); }
.jp-articulo--cultura .jp-articulo__autor { color: #fff !important; }

@media (max-width: 1000px) {
  .jp-articulo__columnas { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .jp-articulo__cuerpo { max-width: var(--ancho-lectura); }
  .jp-articulo__lateral { position: static; max-width: var(--ancho-lectura); }
  /* Tema, fecha y lectura ya están en la cabecera: en la ficha, solo la fuente */
  .jp-articulo__dato--meta { display: none; }
  .jp-articulo__dato--fuente { border-top: 0; padding-top: 0; }
  .jp-articulo__ficha dl:not(:has(.jp-articulo__dato--fuente)) + .jp-articulo__compartir { margin-top: 0; padding-top: 0; border-top: 0; }
}

@media (max-width: 600px) {
  .jp-articulo { padding: 20px 16px 56px; }
  .jp-articulo__migas { margin-bottom: 12px; font-size: 12px; }
  .jp-articulo__imagen { margin: 0 -16px 28px !important; border-radius: 0; aspect-ratio: 16 / 10; }
  .jp-articulo__contenido { font-size: 17px; line-height: 1.7; }
  .jp-articulo__dato { grid-template-columns: 70px minmax(0, 1fr); }
  .jp-articulo__autor-caja { padding: 18px; }
  .jp-articulo__autor-sello { flex-basis: 44px; width: 44px; height: 44px; font-size: 20px; }
  .jp-articulo__relacionados { margin-top: 44px; padding-top: 28px; }
  .jp-articulo__relacionados-cab { flex-direction: column; gap: 6px; margin-bottom: 4px; }
  .jp-articulo--cultura .jp-articulo__cabecera { margin: -20px -16px 0; padding: 28px 16px; border-radius: 0; }
  .jp-articulo--cultura .jp-articulo__imagen { margin-top: 0; }
}


/* =========================================================
   DATOS DE MERCADO ([japopedia_datos_mercado] de datos-mercado.php y
   assets/datos-mercado.js, página /macrodata/). El CSS del widget
   anterior (.jpmd-scope) se quitó el 2026-09-28.
   ========================================================= */

.jp-mercado { box-sizing: border-box; max-width: 1120px; margin: 0 auto; padding: 40px 20px 72px; font-family: var(--jp-font-body); color: var(--jp-text); }
.jp-mercado *, .jp-mercado *::before, .jp-mercado *::after { box-sizing: border-box; }
.jp-mercado a { color: var(--jp-accent); }
.jp-mercado .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Cabecera */
.jp-mercado__cabecera { max-width: 760px; margin-bottom: 28px; }
.jp-mercado .jp-mercado__kicker { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jp-accent); }
.jp-mercado .jp-mercado__titulo { margin: 0 0 12px; font-family: var(--jp-font-heading); font-size: clamp(32px, 6vw, 46px); font-weight: 800; line-height: 1.1; color: var(--jp-text); }
.jp-mercado .jp-mercado__lead { margin: 0 0 12px; font-size: 17px; line-height: 1.6; color: var(--jp-text-soft); }
.jp-mercado .jp-mercado__actualizado { margin: 0; font-size: 14px; color: var(--jp-text-muted); }
.jp-mercado__error { margin: 0 0 20px; padding: 14px 16px; border-left: 4px solid var(--jp-accent); border-radius: 8px; background: var(--jp-accent-soft); font-size: 15px; }

/* KPIs */
.jp-mercado__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.jp-mercado__kpi { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--jp-surface); border: 1.5px solid var(--jp-border); border-radius: 16px; min-height: 150px; }
.jp-mercado__kpi--cargando span { display: block; height: 14px; border-radius: 6px; background: var(--jp-bg-alt); }
.jp-mercado__kpi--cargando span + span { height: 32px; width: 70%; }
.jp-mercado .jp-mercado__kpi-etiqueta { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--jp-text-muted); }
.jp-mercado .jp-mercado__kpi-valor { margin: 2px 0 0; font-family: var(--jp-font-heading); font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; line-height: 1.1; color: var(--jp-text); }
.jp-mercado .jp-mercado__kpi-nota { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--jp-text-muted); }
.jp-mercado .jp-mercado__kpi-cambio { margin: auto 0 0; padding-top: 6px; font-size: 13px; line-height: 1.4; }
.jp-mercado__spark { width: 100% !important; height: 44px !important; margin: 4px 0 0; }
.jp-mercado .jp-mercado__contexto { margin: 14px 0 0; font-size: 13.5px; color: var(--jp-text-muted); }
.jp-mercado__var { font-weight: 700; white-space: nowrap; }
.jp-mercado__var--sube { color: var(--jp-ok); }
.jp-mercado__var--baja { color: var(--jp-accent); }
.jp-mercado__var--igual { color: var(--jp-text-muted); }
.jp-mercado__var-texto { color: var(--jp-text-muted); }

/* Bloques */
.jp-mercado__bloque { margin-top: 56px; scroll-margin-top: 90px; }
.jp-mercado__bloque-cab { margin-bottom: 18px; }
.jp-mercado .jp-mercado__bloque-cab h2 { margin: 0 0 6px; font-family: var(--jp-font-heading); font-size: clamp(24px, 3.4vw, 30px); font-weight: 700; color: var(--jp-text); }
.jp-mercado .jp-mercado__bloque-cab p { margin: 0; font-size: 15px; color: var(--jp-text-muted); }

/* Selector de sectores, por grupos */
.jp-mercado__sectores { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.jp-mercado__grupo { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; }
.jp-mercado__grupo-nombre { padding-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--jp-text-muted); }
.jp-mercado__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jp-mercado__chip { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--jp-border); background: var(--jp-surface); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--jp-text-soft); cursor: pointer; white-space: nowrap; transition: border-color .15s; }
.jp-mercado__chip:hover { border-color: var(--jp-accent); color: var(--jp-accent); background: var(--jp-surface); }
.jp-mercado__chip.is-activo { background: var(--jp-accent); border-color: var(--jp-accent); color: #fff; }

/* Panel del sector */
.jp-mercado__panel { padding: 28px; background: var(--jp-surface); border: 1.5px solid var(--jp-border); border-radius: 20px; min-height: 420px; transition: opacity .2s; }
.jp-mercado__panel.is-cargando { opacity: .5; }
.jp-mercado__panel-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 18px; }
.jp-mercado .jp-mercado__panel-kicker { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--jp-accent); }
.jp-mercado .jp-mercado__panel-cab h3 { margin: 0; font-family: var(--jp-font-heading); font-size: clamp(24px, 3vw, 30px); font-weight: 800; color: var(--jp-text); }
.jp-mercado .jp-mercado__panel-fuente { margin: 0; font-size: 13px; color: var(--jp-text-muted); }
.jp-mercado__alerta { margin: 0 0 18px; padding: 14px 16px; border-left: 4px solid var(--jp-ok); border-radius: 8px; background: var(--jp-ok-soft); font-size: 14.5px; line-height: 1.55; }
.jp-mercado__alerta--grave { border-left-color: var(--jp-amber); background: var(--jp-warn-soft); }
.jp-mercado__alerta a { font-weight: 700; }

.jp-mercado__cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; }
.jp-mercado__cifra { padding: 16px; border-radius: 14px; background: var(--jp-bg-alt); }
.jp-mercado .jp-mercado__cifra-etiqueta { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--jp-text-muted); }
.jp-mercado .jp-mercado__cifra-valor { margin: 0; font-family: var(--jp-font-heading); font-size: 26px; font-weight: 800; line-height: 1.15; color: var(--jp-text); }
.jp-mercado .jp-mercado__cifra-periodo { margin: 0 0 6px; font-size: 13px; color: var(--jp-text-muted); }
.jp-mercado .jp-mercado__cifra-cambio { margin: 0; font-size: 13px; line-height: 1.4; }

.jp-mercado__grafico-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin-bottom: 10px; }
.jp-mercado__toggle { display: inline-flex; border: 1.5px solid var(--jp-border-strong); border-radius: 999px; overflow: hidden; }
.jp-mercado__toggle button { padding: 7px 14px; border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--jp-text-soft); cursor: pointer; }
.jp-mercado__toggle button + button { border-left: 1.5px solid var(--jp-border-strong); }
.jp-mercado__toggle button.is-activo { background: var(--jp-text); color: #fff; }
.jp-mercado__check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--jp-text-soft); cursor: pointer; }
.jp-mercado__grafico { position: relative; height: 340px; }
.jp-mercado .jp-mercado__nota { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--jp-text-muted); }
.jp-mercado .jp-mercado__nota--pendiente { padding: 12px 14px; border-radius: 10px; background: var(--jp-bg-alt); color: var(--jp-text-soft); }

.jp-mercado__arancel { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--jp-border); }
.jp-mercado .jp-mercado__arancel h4 { margin: 0 0 12px; font-family: var(--jp-font-heading); font-size: 18px; font-weight: 700; color: var(--jp-text); }
.jp-mercado__tabla-wrap { overflow-x: auto; }
.jp-mercado__arancel table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.jp-mercado__arancel th, .jp-mercado__arancel td { padding: 9px 10px; border-bottom: 1px solid var(--jp-border); text-align: left; vertical-align: top; }
.jp-mercado__arancel th { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--jp-text-muted); background: var(--jp-bg-alt); }

.jp-mercado__acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.jp-mercado__accion { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1.5px solid var(--jp-border); border-radius: 14px; background: var(--jp-surface); color: var(--jp-text) !important; text-decoration: none !important; transition: border-color .15s, transform .15s; }
.jp-mercado__accion:hover { border-color: var(--jp-accent); transform: translateY(-2px); }
.jp-mercado__accion strong { font-family: var(--jp-font-heading); font-size: 17px; }
.jp-mercado__accion span { font-size: 14px; color: var(--jp-text-muted); }
.jp-mercado__accion--principal { background: var(--jp-accent-soft); border-color: var(--jp-accent); }
.jp-mercado__accion--principal span { color: var(--jp-accent); font-weight: 600; }
.jp-mercado .jp-mercado__fuente { margin: 18px 0 0; font-size: 12.5px; color: var(--jp-text-muted); }

/* Ranking */
.jp-mercado__ranking { padding: 8px 20px 18px; background: var(--jp-surface); border: 1.5px solid var(--jp-border); border-radius: 20px; }
.jp-mercado__lista { margin: 0; padding: 0; list-style: none; }
.jp-mercado__lista li { border-bottom: 1px solid var(--jp-border); }
.jp-mercado__lista button { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 90px 110px; align-items: center; gap: 14px; width: 100%; padding: 12px 4px; border: 0; background: transparent; font: inherit; text-align: left; color: var(--jp-text); cursor: pointer; }
.jp-mercado__lista button:hover { background: var(--jp-bg-alt); }
.jp-mercado__lista-nombre { font-weight: 700; font-size: 15px; }
.jp-mercado__cuota { display: block; font-size: 12px; font-weight: 500; color: var(--jp-text-muted); }
.jp-mercado__lista-barra { display: block; height: 8px; border-radius: 999px; background: var(--jp-bg-alt); overflow: hidden; }
.jp-mercado__lista-barra i { display: block; height: 100%; border-radius: 999px; background: var(--jp-accent); }
.jp-mercado__lista-valor { font-family: var(--jp-font-heading); font-weight: 700; text-align: right; }
.jp-mercado__lista-var { font-size: 13px; text-align: right; }

.jp-mercado__pie { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--jp-border); }
.jp-mercado .jp-mercado__pie p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--jp-text-muted); }

@media (max-width: 960px) {
  .jp-mercado__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .jp-mercado { padding: 24px 16px 56px; }
  .jp-mercado .jp-mercado__lead { font-size: 15.5px; }
  .jp-mercado__kpis { gap: 10px; }
  .jp-mercado__kpi { padding: 14px; min-height: 0; }
  .jp-mercado .jp-mercado__kpi-valor { font-size: 22px; }
  .jp-mercado__kpi--fx, .jp-mercado__kpi--saldo { grid-column: 1 / -1; }

  /* Sectores: cada grupo en una fila que se desliza */
  .jp-mercado__grupo { display: block; }
  .jp-mercado__grupo-nombre { display: block; padding: 0 0 6px; }
  .jp-mercado__chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 40px 4px 16px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
  .jp-mercado__chips::-webkit-scrollbar { display: none; }

  .jp-mercado__panel { margin: 0 -16px; padding: 20px 16px; border-radius: 0; border-left: 0; border-right: 0; }
  .jp-mercado__panel-cab { flex-direction: column; align-items: flex-start; }
  .jp-mercado__cifras { grid-template-columns: 1fr; gap: 8px; }
  .jp-mercado__cifra { padding: 12px 14px; }
  .jp-mercado .jp-mercado__cifra-valor { font-size: 22px; }
  .jp-mercado__grafico { height: 280px; }
  .jp-mercado__acciones { grid-template-columns: 1fr; }

  .jp-mercado__ranking { margin: 0 -16px; padding: 4px 16px 14px; border-radius: 0; border-left: 0; border-right: 0; }
  .jp-mercado__lista button { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre valor" "barra var"; gap: 6px 12px; }
  .jp-mercado__lista-nombre { grid-area: nombre; }
  .jp-mercado__lista-barra { grid-area: barra; }
  .jp-mercado__lista-valor { grid-area: valor; }
  .jp-mercado__lista-var { grid-area: var; }
}


/* =========================================================
   LEGAL (japopedia-assistant/japopedia-legal.php)
   Aviso en el registro y [japopedia_enlaces_legales] del pie de página.
   ========================================================= */

.woocommerce-account .jp-cuenta-acceso__legal { margin: 4px 0 14px; font-size: 13px; line-height: 1.55; color: var(--jp-text-muted); }
.jp-cuenta-acceso__legal a { color: var(--jp-accent); }
.jp-legal-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; font-size: 13px; line-height: 1.6; color: var(--jp-text-muted); }
.jp-legal-enlaces a { color: var(--jp-text-soft); text-decoration: none; }
.jp-legal-enlaces a:hover { color: var(--jp-accent); text-decoration: underline; }