/*
Theme Name:   EmbroideryBench
Theme URI:    https://embroiderybench.com
Description:  Tema hijo de GeneratePress para embroiderybench.com. Sistema de diseño propio
              (navy + dorado, Fraunces + Inter) y replica de los layouts de guía, reseña y
              listado. Los seis componentes de monetización van como patrones de bloque.
Author:       Alberto Martín
Template:     generatepress
Version:      1.0.0
Text Domain:  embroiderybench
*/

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --navy-900:#0b1220; --navy-800:#0f172b; --navy-700:#1c2740; --navy-600:#2c3a56;
  --ink:#16202f; --body:#4a5568; --muted:#7b8598;
  --line:#e2e6ed; --line-soft:#eef1f6;
  --paper:#fff; --paper-2:#f7f8fa; --paper-3:#eff2f7;
  --gold-600:#b8863a; --gold:#d39e46; --gold-200:#f3e3c6; --gold-50:#fbf6ec;
  --green:#1c7d55; --red:#b4443a;
  --display:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --r-sm:6px; --r:12px; --r-lg:18px;
  --shadow-sm:0 1px 2px rgba(15,23,43,.06),0 2px 8px rgba(15,23,43,.04);
  --shadow:0 2px 6px rgba(15,23,43,.07),0 12px 32px rgba(15,23,43,.07);
  --content:730px;   /* el ancho de texto de Affiliate X (inner-container _730px) */
}

/* =============================================================
   2. Base — sobre el marcado de GeneratePress
   ============================================================= */
body { font-family: var(--sans); font-size:17px; line-height:1.65; color:var(--body); background:var(--paper); }
html { scroll-behavior:smooth; scroll-padding-top:96px; }

h1,h2,h3,h4 { font-family:var(--display); color:var(--ink); font-weight:600; line-height:1.15; letter-spacing:-.015em; }
h1 { font-size:clamp(2.1rem,1.4rem + 2.6vw,3.4rem); }
h2 { font-size:clamp(1.6rem,1.2rem + 1.5vw,2.25rem); }
h3 { font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem); }
h4 { font-family:var(--sans); font-weight:700; font-size:1.05rem; letter-spacing:0; }

a { color:var(--navy-700); text-underline-offset:3px; text-decoration-color:var(--gold-200); }
a:hover { color:var(--gold-600); }

.entry-content > * { max-width:var(--content); margin-inline:auto; }
.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > .eb-wide { max-width:none; }
.entry-content h2 { margin-top:2em; }
.entry-content h3 { margin-top:1.6em; }

/* GeneratePress: quitar caja y sombra del artículo, que aquí estorban */
.separate-containers .inside-article { padding:0; }
.separate-containers .site-main { margin:0; }
.entry-header, .entry-content { background:transparent; }

/* =============================================================
   3. Barra superior y cabecera
   ============================================================= */
.eb-topbar { background:var(--navy-800); color:#cfd6e4; font-size:13px; text-align:center; padding:9px 20px; }
.eb-topbar a { color:var(--gold); font-weight:600; text-decoration:none; }

.site-header { border-bottom:1px solid var(--line); }
.main-navigation a { font-family:var(--sans); font-weight:500; }
.main-navigation a:hover { color:var(--gold-600); }
.site-logo img, .site-branding .main-title a { font-family:var(--display); letter-spacing:-.02em; color:var(--ink); }

/* =============================================================
   4. Utilidades tipográficas
   ============================================================= */
.eb-eyebrow { font:600 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-600); margin:0 0 12px; }
.eb-lede { font-size:1.12rem; }
.eb-byline { display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:14px; color:var(--muted); margin-bottom:26px; }
.eb-byline b { color:var(--ink); }

.eb-badge { display:inline-block; font:600 11px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  padding:6px 10px; border-radius:999px; background:var(--gold-50); color:var(--gold-600); border:1px solid var(--gold-200); }
.eb-badge--navy { background:var(--navy-800); color:#fff; border-color:var(--navy-800); }

.eb-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:600 15px/1 var(--sans); padding:13px 22px; border-radius:var(--r-sm);
  border:1px solid transparent; text-decoration:none; transition:.15s; }
.eb-btn--gold { background:var(--gold); color:#1b1305; }
.eb-btn--gold:hover { background:var(--gold-600); color:#fff; }
.eb-btn--ghost { border-color:var(--line); color:var(--ink); background:#fff; }
.eb-btn--ghost:hover { border-color:var(--gold); color:var(--gold-600); }

.eb-rating { display:inline-flex; align-items:center; gap:7px; font-size:14px; }
.eb-stars { color:var(--gold); letter-spacing:1px; }
.eb-rating b { color:var(--ink); }

/* =============================================================
   5. Componente — divulgación de afiliación
   ============================================================= */
.eb-disclosure { font-size:13.5px; color:var(--muted); background:var(--paper-2);
  border-radius:var(--r-sm); padding:12px 16px; margin-bottom:28px; }

/* =============================================================
   6. Componente — caja de veredicto
   ============================================================= */
.eb-verdict { border:1px solid var(--gold-200); background:var(--gold-50);
  border-radius:var(--r); padding:24px 26px; margin:0 0 32px; }
.eb-verdict h2 { font-size:1.25rem; margin:0 0 12px; }
.eb-verdict p:last-child { margin-bottom:0; }
.eb-verdict__pick { display:flex; gap:14px; align-items:baseline; flex-wrap:wrap;
  padding-top:14px; margin-top:14px; border-top:1px solid var(--gold-200); }
.eb-verdict__pick span { font:600 12px/1 var(--sans); letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-600); }

/* =============================================================
   7. Componente — tabla comparativa
   ============================================================= */
.eb-table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r);
  margin:28px 0; -webkit-overflow-scrolling:touch; }
.eb-cmp { border-collapse:collapse; width:100%; min-width:860px; font-size:15px; background:#fff; }
.eb-cmp th, .eb-cmp td { padding:14px 16px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.eb-cmp thead th { background:var(--navy-800); color:#fff; font:600 13px/1.3 var(--sans);
  letter-spacing:.04em; text-transform:uppercase; }
.eb-cmp tbody tr:hover { background:var(--paper-2); }
.eb-cmp td:first-child { font-weight:600; color:var(--ink); }
.eb-cmp .price { font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600; color:var(--ink); }
.eb-cmp .na { color:var(--muted); }
.eb-table-note { font-size:13.5px; color:var(--muted); margin:-14px 0 32px; }

/* =============================================================
   8. Componente — ficha de producto (guide-item-card de Affiliate X, ampliada)
   ============================================================= */
.eb-product { display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px;
  border:1px solid var(--line); border-radius:var(--r); padding:22px; margin:32px 0;
  background:#fff; box-shadow:var(--shadow-sm); }
.eb-product__media { aspect-ratio:1; background:var(--paper-3); border-radius:var(--r-sm);
  display:grid; place-items:center; color:var(--muted); font-size:12px; text-align:center; overflow:hidden; }
.eb-product__media img { width:100%; height:100%; object-fit:contain; }
.eb-product h3 { margin:0 0 6px; }
.eb-product__top { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.eb-product__price { font-family:var(--display); font-size:1.5rem; color:var(--ink); font-weight:600; }
.eb-product__cta { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:16px; }
.eb-product__cta small { color:var(--muted); font-size:12.5px; }

.eb-proscons { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:16px; }
.eb-proscons > div { background:var(--paper-2); border-radius:var(--r-sm); padding:14px 16px; }
.eb-proscons h4 { margin:0 0 8px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.eb-proscons ul { margin:0; padding-left:1.1em; font-size:15px; }
.eb-proscons li { margin-bottom:6px; }
.eb-proscons .pros h4 { color:var(--green); }
.eb-proscons .cons h4 { color:var(--red); }

/* =============================================================
   9. Componente — metodología y autor
   ============================================================= */
.eb-method { border-left:3px solid var(--gold); background:var(--paper-2);
  padding:20px 24px; border-radius:0 var(--r-sm) var(--r-sm) 0; margin:36px 0; }
.eb-method h3 { font-size:1.12rem; margin:0 0 10px; }
.eb-method p:last-child { margin-bottom:0; }

.eb-author { display:flex; gap:18px; align-items:flex-start; border:1px solid var(--line);
  border-radius:var(--r); padding:22px; margin:40px 0 0; background:#fff; }
.eb-author__avatar { width:64px; height:64px; border-radius:50%; background:var(--paper-3);
  display:grid; place-items:center; font-size:12px; color:var(--muted); flex:0 0 auto; overflow:hidden; }
.eb-author__avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.eb-author h4 { margin:0 0 4px; }
.eb-author .role { color:var(--gold-600); font-size:13px; font-weight:600; margin:0 0 8px; }
.eb-author p { margin:0; font-size:15px; }

/* =============================================================
   10. Plantilla de guía — índice pegajoso
   ============================================================= */
.eb-guide { display:grid; grid-template-columns:260px minmax(0,1fr); gap:52px; align-items:start; }
.eb-guide > * { min-width:0; }
.eb-toc { position:sticky; top:96px; font-size:14.5px; }
.eb-toc__title { font:600 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px; }
.eb-toc ol { list-style:none; margin:0; padding:0; border-left:2px solid var(--line); }
.eb-toc a { display:block; padding:7px 0 7px 16px; margin-left:-2px;
  border-left:2px solid transparent; color:var(--body); text-decoration:none; }
.eb-toc a:hover { color:var(--ink); border-left-color:var(--gold-200); }
.eb-toc a.is-active { color:var(--ink); font-weight:600; border-left-color:var(--gold); }
.eb-guide .entry-content > * { max-width:none; margin-inline:0; }
.eb-guide .entry-content { max-width:860px; }

/* =============================================================
   11. Listados y tarjetas (réplica del grid de reviews-v1)
   ============================================================= */
.eb-cats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.eb-cat { display:block; text-align:center; text-decoration:none; padding:26px 16px;
  border:1px solid var(--line); border-radius:var(--r); background:#fff; transition:.15s; }
.eb-cat:hover { border-color:var(--gold); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.eb-cat__ico { width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
  background:var(--gold-50); border:1px solid var(--gold-200); display:grid; place-items:center; font-size:22px; }
.eb-cat b { display:block; font-family:var(--display); font-size:1.06rem; color:var(--ink); }
.eb-cat small { color:var(--muted); font-size:13px; }

.eb-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.eb-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.eb-card { background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; transition:.15s; }
.eb-card:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.eb-card__media { aspect-ratio:16/10; background:var(--paper-3) center/cover no-repeat;
  display:grid; place-items:center; color:var(--muted); font-size:13px; }
.eb-card__media img { width:100%; height:100%; object-fit:cover; }
.eb-card__body { padding:20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.eb-card__body h3 { margin:0; font-size:1.18rem; }
.eb-card__body h3 a { text-decoration:none; color:inherit; }
.eb-card__body h3 a:hover { color:var(--gold-600); }
.eb-card__meta { margin-top:auto; font-size:13px; color:var(--muted); display:flex; gap:10px; align-items:center; }

/* Archivos de GeneratePress con nuestra tarjeta */
.eb-archive .eb-grid-3 { margin-top:28px; }

/* =============================================================
   12. Hero y boletín
   ============================================================= */
.eb-hero { background:var(--navy-800); color:#dfe5ef; padding:clamp(56px,7vw,96px) 0; }
.eb-hero h1 { color:#fff; max-width:16ch; }
.eb-hero .eb-lede { color:#b9c3d6; max-width:56ch; font-size:1.15rem; }
.eb-hero__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.eb-hero__card { background:#fff; border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow); color:var(--body); }
.eb-hero__actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }

.eb-newsletter { background:var(--navy-800); color:#dfe5ef; border-radius:var(--r-lg);
  padding:clamp(28px,4vw,48px); display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; }
.eb-newsletter h2 { color:#fff; margin:0 0 8px; }
.eb-newsletter p { color:#b9c3d6; margin:0; }
.eb-newsletter input { flex:1 1 220px; padding:13px 16px; border-radius:var(--r-sm);
  border:1px solid var(--navy-600); background:var(--navy-700); color:#fff; font:15px var(--sans); }

/* =============================================================
   13. Pie
   ============================================================= */
.site-footer, .site-info { background:var(--navy-900); color:#9fabc0; }
.site-footer a, .site-info a { color:#9fabc0; }
.site-footer a:hover, .site-info a:hover { color:var(--gold); }
.eb-footer-legal { font-size:13.5px; padding:14px 0; text-align:center; color:#9fabc0; }

/* =============================================================
   14. Responsive
   ============================================================= */
@media (max-width:1000px) {
  .eb-guide, .eb-hero__grid, .eb-newsletter { grid-template-columns:minmax(0,1fr); gap:28px; }
  .eb-toc { position:static; border:1px solid var(--line); border-radius:var(--r); padding:18px; }
  .eb-grid-3 { grid-template-columns:repeat(2,1fr); }
  .eb-cats { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  body { font-size:16px; }
  .eb-grid-3, .eb-grid-2, .eb-proscons { grid-template-columns:1fr; }
  .eb-product { grid-template-columns:1fr; }
  .eb-product__media { max-width:200px; }
}

/* =============================================================
   15. Placeholder visible — para que nada sin verificar se publique por error
   ============================================================= */
.eb-ph { background:repeating-linear-gradient(45deg,var(--gold-50),var(--gold-50) 8px,#fff 8px,#fff 16px);
  border:1px dashed var(--gold); border-radius:var(--r-sm); padding:10px 14px;
  font-size:13.5px; color:var(--gold-600); }