/* ============================================================
   OP GUIDES v2 — armonizado con el design system de la guía
   florida-sales-tax (2026-07-02): claro, navy #0d2b4e,
   rojo #c94040, Montserrat, botones pill, radius 14/8.
   Aplica a todas las páginas .opg (guías, accountants, legal…)
   ============================================================ */

.opg {
  --g-navy: #0d2b4e;
  --g-accent: #c94040;
  --g-accent-hover: #a83232;
  --g-cta-shadow: rgba(201, 64, 64, 0.32);
  --g-text: #0d1f35;
  --g-text-2: #2c4060;
  --g-muted: #5a7290;
  --g-surface: #f4f6f9;
  --g-border: rgba(13, 43, 78, 0.09);
  --g-border-strong: rgba(13, 43, 78, 0.16);
  --g-glow: rgba(13, 43, 78, 0.05);
  --g-success: #1a7a42;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.72;
  color: var(--g-text-2);
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

.opg .opg-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--g-accent);
  margin-bottom: 14px;
}

.opg h1 {
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--g-text);
  font-size: 36px;
  line-height: 1.12;
  margin: 8px 0 18px;
}

.opg h1 em, .opg h2 em { font-style: italic; color: var(--g-accent); }

.opg h2 {
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--g-text);
  font-size: 26px;
  margin: 48px 0 16px;
  line-height: 1.2;
}

.opg .opg-intro {
  font-size: 18px;
  color: var(--g-text-2);
  margin-bottom: 8px;
  line-height: 1.6;
}

.opg p { margin: 0 0 18px; font-size: 15px; }

/* Pasos numerados */
.opg .opg-steps { counter-reset: opgstep; list-style: none; margin: 24px 0; padding: 0; }

.opg .opg-steps li {
  counter-increment: opgstep;
  position: relative;
  padding: 0 0 22px 56px;
  font-size: 15px;
}

.opg .opg-steps li::before {
  content: "0" counter(opgstep);
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--g-accent);
  background: rgba(201, 64, 64, 0.06);
  border: 1px solid rgba(201, 64, 64, 0.25);
  border-radius: 8px;
  padding: 6px 9px;
}

.opg .opg-steps strong { color: var(--g-text); display: block; margin-bottom: 4px; }

/* Checklist */
.opg .opg-flags { list-style: none; margin: 24px 0; padding: 0; }
.opg .opg-flags li { position: relative; padding: 6px 0 6px 30px; font-size: 15px; }
.opg .opg-flags li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--g-success);
  font-weight: 700;
}
.opg .opg-flags strong { color: var(--g-text); }

/* Callout — estilo info de la guía */
.opg .opg-callout {
  background: var(--g-glow);
  border: 1px solid var(--g-border);
  border-left: 3px solid var(--g-accent);
  border-radius: 8px;
  padding: 18px 22px;
  margin: 32px 0;
  font-size: 14px;
  color: var(--g-text-2);
}
.opg .opg-callout a { color: var(--g-accent); font-weight: 600; text-decoration: none; }
.opg .opg-callout a:hover { text-decoration: underline; }
.opg .opg-callout strong { color: var(--g-text); }

/* CTA de cierre — bloque dark gradient de la guía */
.opg .opg-cta {
  background: linear-gradient(145deg, #172035 0%, #261525 50%, #1a0f2a 100%);
  border: 1px solid rgba(201, 64, 64, 0.35);
  border-radius: 14px;
  padding: 48px 40px;
  margin-top: 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.opg .opg-cta::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -15%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(201, 64, 64, 0.13) 0%, transparent 65%);
  pointer-events: none;
}
.opg .opg-cta > * { position: relative; z-index: 1; }
.opg .opg-cta h2 { color: #FFFFFF; margin: 0 0 10px; font-size: 26px; }
.opg .opg-cta p { color: #b8c9de; margin-bottom: 26px; font-size: 15px; max-width: 480px; margin-left: auto; margin-right: auto; }

/* Botones pill */
.opg .opg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--g-accent);
  color: #FFFFFF;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 3px 14px var(--g-cta-shadow);
  transition: all 0.2s;
}
.opg .opg-btn:hover {
  background: var(--g-accent-hover);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 5px 20px var(--g-cta-shadow);
}

.opg .opg-back {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 13px;
  font-weight: 600;
  color: var(--g-accent);
  text-decoration: none;
}
.opg .opg-back:hover { text-decoration: underline; }

/* About */
.opg .opg-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--g-navy);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 16px;
}

.opg .opg-role {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--g-accent);
  display: block;
  margin-bottom: 10px;
}

/* Grid de cards — sin border-top-stripe (patrón prohibido por el brief);
   el acento es el punto rojo junto al título, igual que .oph-service en Home. */
.opg .opg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.opg .opg-card {
  background: #FFFFFF;
  border: 1px solid var(--g-border);
  border-radius: 8px;
  padding: 26px;
  text-decoration: none;
  display: block;
  transition: all 0.2s;
}
.opg a.opg-card:hover {
  border-color: var(--g-border-strong);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13, 43, 78, 0.08);
}
.opg .opg-card h3 { color: var(--g-text); font-size: 16px; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }
.opg .opg-card h3::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g-accent);
  margin-right: 8px;
  vertical-align: middle;
}
.opg .opg-card p { color: var(--g-muted); font-size: 13.5px; margin: 0; line-height: 1.6; }
.opg .opg-card strong { color: var(--g-text); }

/* Links en texto */
.opg a { color: var(--g-accent); text-decoration: none; }
.opg a:hover { text-decoration: underline; }
.opg .opg-btn:hover, .opg a.opg-card:hover { text-decoration: none; }

.opg a:focus-visible, .opg .opg-btn:focus-visible {
  outline: 2px solid var(--g-accent);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .opg { padding: 32px 20px 64px; }
  .opg h1 { font-size: 28px; }
  .opg h2 { font-size: 22px; }
  .opg .opg-grid { grid-template-columns: 1fr; }
  .opg .opg-cta { padding: 36px 24px; }
}

/* ============================================================
   FULL-WIDTH LAYOUT — páginas .opg (2026-07-03)
   Hallazgo P0 de la auditoría impeccable: estas páginas seguían con el
   layout Divi default (sidebar de blog, título gris "Open Sans", footer
   Theme Builder con © 2022) mientras la Home ya tenía el rediseño. El
   Theme Builder no es editable por API, así que en vez de tocarlo se oculta
   con CSS solo en las páginas .opg (marcadas con el body class
   "opg-full-width" desde functions.php) y se pone el footer nuevo debajo
   (inyectado también desde functions.php, ver op_guides_footer()).
   ============================================================ */

.opg-full-width #sidebar { display: none; }
.opg-full-width #left-area { width: 100%; float: none; }

.opg-full-width h1.entry-title {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #0d2b4e;
  font-size: 36px;
  line-height: 1.15;
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 0;
}

.opg-full-width .opg { padding-top: 8px; }

/* Footer viejo de Theme Builder — reemplazado por el footer compacto de Home */
.opg-full-width .et-l--footer { display: none; }

@media (max-width: 640px) {
  .opg-full-width h1.entry-title { font-size: 28px; padding: 32px 20px 0; }
}