/* PJ · Guías sectoriales · visual editorial reusable · v1.0.0
   CSS autónomo: funciona en cualquier landing que invoque [pj_guias_sectoriales]. */
.pj-guides, .pj-guides * { box-sizing: border-box; }
.pj-guides { --pj-g-wine: #460f22; --pj-g-ink: #20241d; --pj-g-line: #d9d2ca; color: var(--pj-g-ink); }
.pj-guides__grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(18px, 2.2vw, 28px) !important; align-items: start; }
.pj-guides__card { min-width: 0; display: flex; flex-direction: column; gap: 14px; margin: 0; }
.pj-guides__cover { display: block; overflow: hidden; border: 1px solid var(--pj-g-line); border-radius: 12px; text-decoration: none !important; background: #f7f5f0; }
.pj-guides__cover:focus-visible, .pj-guides__title a:focus-visible, .pj-guides__button:focus-visible { outline: 3px solid #bb2e2b; outline-offset: 4px; }
.pj-guides__art { position: relative; isolation: isolate; display: block; aspect-ratio: 2.2/1; background: var(--pj-art-bg, #f7f5f0); overflow: hidden; }
.pj-guides__art::before { content: ''; position: absolute; z-index: -1; top: -80%; right: -18%; width: 85%; aspect-ratio: 1; border: 1px solid var(--pj-art-line, #d9c4c0); border-radius: 50%; opacity: .65; }
.pj-guides__form { position: absolute; display: block; transition: transform .25s ease; }
.pj-guides__cover:hover .pj-guides__form--a { transform: translateY(-3px); }
.pj-guides__title { margin: 0 !important; font-family: Manrope, sans-serif; font-size: clamp(1.05rem, 1.5vw, 1.34rem) !important; line-height: 1.37 !important; font-weight: 650; overflow-wrap: normal; }
.pj-guides__title a { color: var(--pj-g-ink) !important; text-decoration: none !important; border: 0 !important; }
.pj-guides__title a:hover { color: var(--pj-g-wine) !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px; }
.pj-guides__footer { display: flex; justify-content: center; margin-top: clamp(26px, 4vw, 45px); }
.pj-guides__button { display: inline-flex; justify-content: center; align-items: center; text-align: center; padding: 14px 26px; min-height: 48px; border-radius: 8px; color: #fff !important; background: var(--pj-g-wine); font-family: Manrope, sans-serif; font-size: 1rem; font-weight: 650; line-height: 1.3; text-decoration: none !important; transition: background-color .15s ease; }
.pj-guides__button:hover { background: #bb2e2b; color: #fff !important; }
.pj-guides__notice { margin: 0; color: #744750; }

/* Dermatología: capas y círculos concéntricos, sin iconos clínicos. */
.pj-guides__cover--dermatologia { --pj-art-bg: #f5f0ec; --pj-art-line: #d4b9b7; }
.pj-guides__cover--dermatologia .pj-guides__form--a { width: 37%; aspect-ratio: 1; top: 22%; left: 14%; border-radius: 50%; border: 2px solid #734351; box-shadow: 0 0 0 16px #e7d8d4, 0 0 0 17px #ceb6b5, 0 0 0 36px #f3e9e5, 0 0 0 37px #ddc9c2; }
.pj-guides__cover--dermatologia .pj-guides__form--b { width: 32%; height: 2px; top: 35%; right: 12%; background: #9b6f73; transform: rotate(-17deg); }
.pj-guides__cover--dermatologia .pj-guides__form--c { width: 25%; height: 2px; top: 58%; right: 17%; background: #c7a0a0; transform: rotate(-17deg); }

/* Estética: cintas fluidas y una curva fina. */
.pj-guides__cover--estetica { --pj-art-bg: #f7f1ef; --pj-art-line: #e1c8c8; }
.pj-guides__cover--estetica .pj-guides__form--a { width: 64%; height: 52%; top: 23%; left: 7%; border: 26px solid #e9cfc9; border-radius: 52% 48% 55% 45%; transform: rotate(-17deg); }
.pj-guides__cover--estetica .pj-guides__form--b { width: 60%; height: 40%; top: 37%; right: 4%; border-top: 3px solid #704254; border-radius: 65% 50% 0 0; transform: rotate(-12deg); }
.pj-guides__cover--estetica .pj-guides__form--c { width: 12%; aspect-ratio: 1; right: 14%; top: 19%; background: #d6aca8; border-radius: 50%; opacity: .9; }

/* Infantil: tres elementos geométricos con presencia de color muy medida. */
.pj-guides__cover--infantil { --pj-art-bg: #f4f1e9; --pj-art-line: #d0caba; }
.pj-guides__cover--infantil .pj-guides__form--a { width: 25%; aspect-ratio: 1; left: 19%; top: 23%; background: #d8c3b1; border-radius: 12px; transform: rotate(-10deg); }
.pj-guides__cover--infantil .pj-guides__form--b { width: 24%; aspect-ratio: 1; left: 44%; top: 17%; border-radius: 50%; background: #9da68e; }
.pj-guides__cover--infantil .pj-guides__form--c { width: 22%; aspect-ratio: 1; right: 15%; top: 37%; border-radius: 8px 35px 8px 8px; background: #c99c91; transform: rotate(13deg); }

/* Cosmética: óvalos superpuestos con líneas finas. */
.pj-guides__cover--cosmetica { --pj-art-bg: #f7f2ee; --pj-art-line: #dbc6bb; }
.pj-guides__cover--cosmetica .pj-guides__form--a { width: 30%; height: 85%; left: 21%; top: 17%; background: #e6d0c4; border-radius: 50% 50% 14px 14px; transform: rotate(-14deg); }
.pj-guides__cover--cosmetica .pj-guides__form--b { width: 31%; aspect-ratio: 1; left: 42%; top: 14%; border: 2px solid #704254; border-radius: 50%; }
.pj-guides__cover--cosmetica .pj-guides__form--c { width: 32%; height: 3px; right: 9%; bottom: 26%; background: #bc918a; transform: rotate(-19deg); }

/* Yoga: arcos concéntricos, sin siluetas humanas ni pictogramas. */
.pj-guides__cover--yoga { --pj-art-bg: #f2f2ed; --pj-art-line: #d4d4ca; }
.pj-guides__cover--yoga .pj-guides__form--a { width: 54%; aspect-ratio: 1; left: 22%; top: 25%; border: 2px solid #845864; border-radius: 50%; box-shadow: 0 0 0 20px #e0d9d4, 0 0 0 21px #bfa7a2; }
.pj-guides__cover--yoga .pj-guides__form--b { width: 52%; height: 2px; left: 23%; bottom: 23%; background: #704254; }
.pj-guides__cover--yoga .pj-guides__form--c { width: 9%; aspect-ratio: 1; left: 45.5%; top: 31%; background: #a8ae9f; border-radius: 50%; }

/* Veterinaria: curvas y puntos, sin icono de huella. */
.pj-guides__cover--veterinaria { --pj-art-bg: #f3f2ed; --pj-art-line: #cbd1c6; }
.pj-guides__cover--veterinaria .pj-guides__form--a { width: 55%; height: 86%; left: 12%; top: 18%; border: 24px solid #d3dad0; border-radius: 48%; transform: rotate(-18deg); }
.pj-guides__cover--veterinaria .pj-guides__form--b { width: 21%; aspect-ratio: 1; left: 47%; top: 19%; border-radius: 50%; background: #b9b1a5; }
.pj-guides__cover--veterinaria .pj-guides__form--c { width: 36%; height: 3px; left: 48%; top: 66%; background: #80505b; transform: rotate(-17deg); }

/* Software / B2B: arquitectura modular. */
.pj-guides__cover--software { --pj-art-bg: #f2f2f3; --pj-art-line: #c8c4cb; }
.pj-guides__cover--software .pj-guides__form--a { width: 25%; aspect-ratio: 1; left: 18%; top: 21%; border: 2px solid #704254; border-radius: 9px; }
.pj-guides__cover--software .pj-guides__form--b { width: 25%; aspect-ratio: 1; left: 54%; top: 22%; background: #dad4db; border-radius: 9px; }
.pj-guides__cover--software .pj-guides__form--c { width: 32%; height: 2px; left: 36%; top: 56%; background: #a18a97; transform: rotate(-25deg); }

/* Genérico: mantiene la identidad sin atribuir un sector incorrecto. */
.pj-guides__cover--general { --pj-art-bg: #f7f5f0; --pj-art-line: #d9d2ca; }
.pj-guides__cover--general .pj-guides__form--a { width: 45%; aspect-ratio: 1; left: 14%; top: 23%; background: #e4d5d1; border-radius: 50%; }
.pj-guides__cover--general .pj-guides__form--b { width: 38%; height: 2px; right: 9%; top: 37%; background: #8c606b; transform: rotate(-14deg); }
.pj-guides__cover--general .pj-guides__form--c { width: 29%; height: 2px; right: 13%; top: 57%; background: #c0a4a5; transform: rotate(-14deg); }

@media (max-width: 900px) { .pj-guides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 620px) { .pj-guides__grid { grid-template-columns: 1fr !important; } .pj-guides__art { aspect-ratio: 2.35/1; } .pj-guides__title { font-size: 1.16rem !important; } }
@media (prefers-reduced-motion: reduce) { .pj-guides__form { transition: none; } }

/* v1.1.0 · Tres familias nuevas: optimización SEO, redacción y SEO local.
 * Cada variante es un SVG decorativo del plugin, asignado según el ID del post.
 * Los estilos anteriores de las portadas sectoriales permanecen intactos. */
.pj-guides__art--svg::before { display: none !important; }
.pj-guides__art--svg { aspect-ratio: 1000 / 455; background: #f7f5f0; }
.pj-guides__image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  border: 0;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 620px) {
  .pj-guides__art--svg { aspect-ratio: 1000 / 455; }
}