/* PHS Article Styles – encapsulado en .phs-article */
.phs-article{
  --phs-bg:#0b0c10;
  --phs-card:#111318;
  --phs-soft:#161a21;
  --phs-text:#e8eef6;
  --phs-muted:#a8b3c7;
  --phs-border:#1f2430;
  --phs-primary:#166534;      /* VERDE OSCURO */
  --phs-primary-ink:#ffffff;  /* texto en blanco en botones */
  --phs-accent:#34d399;       /* verde acento para enlaces */
  --phs-success:#22c55e;
  --phs-warning:#f59e0b;
  --phs-danger:#ef4444;
  --phs-radius:14px;
  --phs-shadow:0 6px 18px rgba(0,0,0,.25);
  --phs-shadow-sm:0 2px 10px rgba(0,0,0,.18);
  color:var(--phs-text);background:var(--phs-bg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans";
  line-height:1.65;letter-spacing:.1px;max-width:72rem;margin:0 auto;padding:2.5rem 1.2rem 4rem;
}
.phs-article h1{font-size:clamp(2rem,3.6vw,3rem);line-height:1.15;margin:0 0 1rem;font-weight:800;letter-spacing:-.02em}
.phs-article h2{font-size:clamp(1.4rem,2.2vw,1.9rem);margin:2.2rem 0 .9rem;font-weight:700}
.phs-article h3{font-size:clamp(1.1rem,1.7vw,1.25rem);margin:1.6rem 0 .6rem;font-weight:700;color:var(--phs-accent)}
.phs-article p{margin:.9rem 0;color:var(--phs-text)}
.phs-article a{color:var(--phs-accent);text-decoration:none}
.phs-article a:hover{text-decoration:underline}
.phs-article blockquote{margin:1.2rem 0;padding:.9rem 1rem;border-left:4px solid var(--phs-accent);background:var(--phs-soft);border-radius:10px}
.phs-disclaimer{font-size:.9rem;color:var(--phs-muted);margin:.6rem 0 1rem}

/* Botones: radios 8px + verde oscuro */
.phs-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.8rem 1.1rem;border-radius:8px;font-weight:800;
  background:var(--phs-primary);color:var(--phs-primary-ink);text-decoration:none;
  box-shadow:var(--phs-shadow-sm);transition:transform .06s ease,filter .15s ease,box-shadow .15s ease;
  border:1px solid rgba(255,255,255,.06)
}
.phs-btn:hover{transform:translateY(-1px);filter:brightness(1.03);box-shadow:var(--phs-shadow);text-decoration:none}
.phs-btn--outline{background:transparent;color:var(--phs-accent);border:1px solid var(--phs-accent)}
.phs-btn--block{display:block;width:100%;text-align:center}
.phs-cta{margin:1.1rem 0;display:grid;gap:.6rem}

/* Tarjeta de producto */
.phs-card{background:var(--phs-card);border:1px solid var(--phs-border);border-radius:var(--phs-radius);padding:1rem;display:grid;grid-template-columns:140px 1fr;gap:1rem;box-shadow:var(--phs-shadow-sm)}
.phs-card__img img{width:100%;height:auto;border-radius:10px;display:block;background:#0d0f14}
.phs-card__title{margin:.1rem 0 .2rem;font-size:1.05rem;font-weight:800}
.phs-card__meta{color:var(--phs-muted);font-size:.95rem}
@media (max-width:680px){.phs-card{grid-template-columns:1fr}}

/* Tablas comparativas */
.phs-table-wrap{overflow-x:auto;border-radius:12px;border:1px solid var(--phs-border);box-shadow:var(--phs-shadow-sm)}
.phs-table{width:100%;border-collapse:collapse;min-width:820px}
.phs-table th,.phs-table td{padding:.75rem .8rem;border-bottom:1px solid var(--phs-border);text-align:left}
.phs-table thead th{background:var(--phs-soft);font-size:.9rem;letter-spacing:.3px;color:var(--phs-muted);position:sticky;top:0;z-index:1}
.phs-table tbody tr:nth-child(odd){background:rgba(255,255,255,.02)}
.phs-table .cell-cta{width:160px}

/* Badges, TOC, FAQs, figuras */
.phs-badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;font-size:.8rem;font-weight:700;background:var(--phs-soft);color:var(--phs-muted);border:1px solid var(--phs-border)}
.phs-toc{background:var(--phs-soft);border:1px solid var(--phs-border);border-radius:10px;padding:.8rem 1rem}
.phs-toc ul{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.phs-faq .phs-faq-item{border:1px solid var(--phs-border);border-radius:10px;background:var(--phs-soft);margin:.7rem 0}
.phs-faq .phs-faq-item>summary{cursor:pointer;padding:.8rem 1rem;font-weight:700;list-style:none}
.phs-faq .phs-faq-item>div{padding:0 1rem 1rem}
.phs-figure{margin:1.4rem 0}
.phs-figure img{width:100%;height:auto;border-radius:12px;display:block;background:#0d0f14}
.phs-figure figcaption{color:var(--phs-muted);font-size:.9rem;margin-top:.5rem}

/* Claro opcional */
@media (prefers-color-scheme:light){
  .phs-article{--phs-bg:#ffffff;--phs-card:#ffffff;--phs-soft:#f5f7fb;--phs-text:#111827;--phs-muted:#5b6b84;--phs-border:#e6e8ee;--phs-shadow:0 10px 20px rgba(0,0,0,.06);--phs-shadow-sm:0 4px 12px rgba(0,0,0,.05)}
}
/* === Paleta y radios (sin cambiar tu CSS base) ============================ */
.phs-article{
  /* verde oscuro en botones / acento mint y radio 8px */
  --phs-primary:#166534;
  --phs-primary-ink:#fff;
  --phs-accent:#34d399;
  --phs-muted:#6b7280;
  --phs-border:rgba(0,0,0,.08);
  --phs-soft:#f6f8fb;
  --phs-card:#ffffff;
  --phs-radius:8px; /* pedido: 8 px */
}

/* === Tipografía/espaciado general ======================================= */
.phs-article h1{margin-bottom:.6rem}
.phs-article > .phs-card{margin-top:1rem}
.phs-article p{color:#111827}
.phs-article a{color:var(--phs-accent);text-decoration:none}
.phs-article a:hover{text-decoration:underline}

/* === Botones/CTAs ======================================================== */
.phs-cta{display:grid;gap:.6rem}
.phs-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;padding:.9rem 1.1rem;border-radius:var(--phs-radius);
  font-weight:800;letter-spacing:.1px;background:var(--phs-primary);color:var(--phs-primary-ink);
  border:1px solid rgba(0,0,0,.06);box-shadow:0 2px 10px rgba(0,0,0,.08);
  transition:transform .06s ease,filter .15s ease,box-shadow .15s ease;
}
.phs-btn:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 8px 18px rgba(0,0,0,.12)}
.phs-btn--outline{background:#fff;color:var(--phs-primary);border:2px solid var(--phs-primary)}
.phs-btn--block{display:block;width:100%;text-align:center}

/* Botón dentro de tabla: un poco más compacto */
.phs-table .phs-btn{padding:.55rem .85rem;font-weight:700;border-radius:7px}

/* === Tarjeta destacada arriba =========================================== */
.phs-card{
  background:var(--phs-card);border:1px solid var(--phs-border);border-radius:var(--phs-radius);
  padding:1rem;display:grid;grid-template-columns:220px 1fr;gap:1rem;align-items:center;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.phs-card__title{margin:.15rem 0 .25rem;font-size:1.1rem;font-weight:900}
.phs-card__meta{color:var(--phs-muted);font-size:.95rem}

/* Imagen/caption de WordPress dentro de la tarjeta */
.phs-card .wp-caption{margin:0;background:transparent;border:none;max-width:100%}
.phs-card .wp-caption img{width:100%;height:auto;border-radius:10px;display:block}
.phs-card .wp-caption-text{margin-top:.35rem;font-size:.85rem;color:var(--phs-muted)}

/* Responsive tarjeta */
@media (max-width:720px){
  .phs-card{grid-template-columns:1fr}
}

/* === Tabla comparativa =================================================== */
.phs-table-wrap{overflow-x:auto;border:1px solid var(--phs-border);border-radius:var(--phs-radius);background:#fff}
.phs-table{width:100%;min-width:820px;border-collapse:collapse}
.phs-table th,.phs-table td{padding:.8rem .9rem;border-bottom:1px solid var(--phs-border);text-align:left}
.phs-table thead th{background:var(--phs-soft);color:#475569;font-size:.9rem;letter-spacing:.2px}
.phs-table tbody tr:nth-child(odd){background:#fafbfc}
.phs-table tbody tr:hover{background:rgba(22,101,52,.06)}
.phs-table .cell-cta{width:160px}

/* === Callouts (experiencia/avisos) ====================================== */
.phs-callout{padding:1rem;border-radius:var(--phs-radius);border:1px solid var(--phs-border);background:#f9fafb}
.phs-callout--tip{background:linear-gradient(0deg,#FDE68A,#FDE68A),#fff;border-color:#F59E0B}
.phs-callout--warn{background:linear-gradient(0deg,rgba(245,158,11,.08),rgba(245,158,11,.08)),#fff;border-color:rgba(245,158,11,.25)}
.phs-callout--danger{background:linear-gradient(0deg,rgba(239,68,68,.08),rgba(239,68,68,.08)),#fff;border-color:rgba(239,68,68,.25)}

/* === FAQs (details/summary) ============================================= */
.phs-faq .phs-faq-item{border:1px solid var(--phs-border);border-radius:var(--phs-radius);background:var(--phs-soft);margin:.7rem 0;overflow:hidden}
.phs-faq .phs-faq-item>summary{
  cursor:pointer;padding:.9rem 1rem;font-weight:800;list-style:none;position:relative;
}
.phs-faq .phs-faq-item>summary::after{
  content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);opacity:.5
}
.phs-faq .phs-faq-item[open]>summary{background:#eef2f7}
.phs-faq .phs-faq-item>div{padding:.8rem 1rem 1rem}

/* === Figuras genéricas =================================================== */
.phs-figure img{width:100%;height:auto;border-radius:12px;display:block}
.phs-badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;background:#eef2f7;border:1px solid var(--phs-border);color:#334155;font-weight:700;font-size:.8rem}