/* Site stylesheet. Carries the shell's own --ech-* tokens (SiteHeader,
   SiteFooter and the converted pages all use them) so the blog and the
   converted pages sit on the same ground as /inicio.

   This replaced the original placeholder sheet, which painted the body
   white, clamped main to 44rem and used a red accent — the cause of the
   white pages, the white stripe above the footer, the narrow /herramientas
   and the red subscribe button. */

:root {
  --ech-navy:       #06123A;
  --ech-navy-deep:  #020817;
  --ech-navy-soft:  #0A1948;
  --ech-border:     #3A4A78;
  --ech-white:      #FFFFFF;
  --ech-copy:       #E8ECF7;
  --ech-muted:      #B8C2DE;
  --ech-coral:      #FB4E3D;
  --ech-orange:     #FF8C42;
  --ech-green:      #38C793;
  --ech-card:       rgba(6, 18, 58, .9);

  /* Legacy names kept so nothing that still references them breaks. */
  --ink:    var(--ech-copy);
  --muted:  var(--ech-muted);
  --line:   var(--ech-border);
  --accent: var(--ech-orange);
  --bg:     var(--ech-navy-deep);

  --prose: 880px;
}

* { box-sizing: border-box; }

html { background: var(--ech-navy-deep); }

body {
  margin: 0;
  background: var(--ech-navy-deep);
  color: var(--ech-copy);
  font-family: "League Spartan", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Full width. Pages and articles set their own reading width — clamping
   here is what made /herramientas narrow. No bottom padding: the gap it
   created is the white stripe that used to sit above the footer. */
main { width: 100%; margin: 0; padding: 0; }

h1, h2, h3, h4 { color: var(--ech-white); font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); line-height: 1.14; margin: 0 0 .5em; letter-spacing: -.02em; }
h2 { font-size: clamp(1.45rem, 2.7vw, 1.85rem); line-height: 1.22; margin: 2.2rem 0 .7rem; }
h3 { font-size: 1.24rem; line-height: 1.3; margin: 1.8rem 0 .5rem; }

a { color: var(--ech-orange); text-underline-offset: 2px; }
a:hover { color: var(--ech-coral); }
:focus-visible { outline: 2px solid var(--ech-orange); outline-offset: 2px; }

/* ---------- article ---------- */

.post {
  max-width: var(--prose);
  margin: 0 auto;
  padding: 3rem 1.25rem 4.5rem;
}

.post > header { margin-bottom: 2rem; }

.meta, .count { color: var(--ech-muted); font-size: .92rem; margin: 0 0 .6rem; }
.lede { color: var(--ech-muted); font-size: 1.16rem; line-height: 1.6; margin: .8rem 0 0; }

.prose { color: var(--ech-copy); }
.prose p { margin: 0 0 1.15em; }
.prose strong, .prose b { color: var(--ech-white); font-weight: 700; }
.prose img {
  max-width: 100%; height: auto; border-radius: 14px;
  display: block; margin: 1.9rem auto;
}
.prose table {
  width: 100%; border-collapse: collapse; margin: 1.8rem 0;
  font-size: .95rem;
}
/* The hero is a two-column <table> holding the image and the title block.
   Blanket cell borders drew a box around it. Any table carrying an image
   is a layout table, not a data table, so it loses the rules. */
.prose table:has(img) td,
.prose table:has(img) th { border: 0; padding: 0; }
.prose table:has(img) { margin: 0 0 1.6rem; font-size: inherit; }
.prose td img { margin: 0; }
.prose td, .prose th {
  border: 1px solid var(--ech-border);
  padding: .6rem .75rem; vertical-align: top;
}
.prose th { background: var(--ech-navy-soft); color: var(--ech-white); text-align: left; }
.prose hr { border: 0; border-top: 1px solid var(--ech-border); margin: 2.4rem 0; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.15em; }
.prose li { margin: .4rem 0; }
.prose blockquote {
  margin: 1.8rem 0; padding: 1rem 1.25rem;
  border-left: 3px solid var(--ech-orange);
  background: var(--ech-navy-soft);
  border-radius: 0 10px 10px 0;
  color: var(--ech-copy);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code {
  background: var(--ech-navy-soft); color: var(--ech-copy);
  padding: .12em .38em; border-radius: 4px; font-size: .9em;
}

.disclosure {
  border-left: 3px solid var(--ech-orange);
  background: var(--ech-navy-soft);
  padding: .8rem 1.05rem;
  border-radius: 0 10px 10px 0;
  font-size: .9rem;
  color: var(--ech-muted);
  margin: 1.5rem 0;
}

.tags { margin-top: 2.5rem; }
.tag {
  display: inline-block; margin: 0 .4rem .4rem 0; padding: .2rem .7rem;
  border: 1px solid var(--ech-border); border-radius: 999px;
  font-size: .8rem; color: var(--ech-muted);
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .prose table:not(:has(img)) { display: block; overflow-x: auto; }
  .prose table:has(img), .prose table:has(img) tbody,
  .prose table:has(img) tr, .prose table:has(img) td { display: block; width: 100% !important; padding-right: 0 !important; }
  .post { padding: 2rem 1.1rem 3rem; }
}

/* Light surfaces. The Stripe checkout pages were built on white in
   ClickFunnels and carry dark body copy, so they keep a light ground
   instead of inheriting the navy. Keyed on the route via body[data-page]
   so convert_pages.py can overwrite the page without losing this. */
body[data-page^="/ppc-management-checkout"],
body[data-page^="/auditoria-ppc-premium-checkout"],
body[data-page^="/analisis-de-nicho-amazon-checkout"] {
  background: #ffffff;
  color: #334155;
}

/* ============ SECTION RHYTHM — the three service pages ============
   /inicio does not sit on one flat colour: .ech-section is --ech-navy
   (#06123A) and the page alternates --deep, --soft and #001247 bands
   down the page. The service pages set background:transparent on every
   section because ClickFunnels painted the ground behind them, so they
   were inheriting the global --ech-navy-deep and reading pitch black.
   Give them /inicio's ground instead. */
/* :not(...checkout) matters here. "/auditoria-ppc-premium" is a prefix of
   "/auditoria-ppc-premium-checkout", and this block sits after the light
   checkout rule, so without the guard it repainted the checkout page navy
   and the dark body copy on it became unreadable. */
body[data-page^="/auditoria-ppc-premium"]:not([data-page*="checkout"]),
body[data-page^="/manejo-de-tu-ppc"]:not([data-page*="checkout"]),
body[data-page^="/analisis-de-nicho-en-amazon"]:not([data-page*="checkout"]) {
  background: var(--ech-navy);
}
/* No positional alternation here on purpose: these wrappers are a mix of
   <section> and <div>, so :nth-of-type counts them in separate sequences
   and the bands land at random. /inicio alternates because its markup
   carries --deep / --soft modifier classes; this markup carries none.
   Naming the sections that should go dark is the way to add bands. */

/* ============ THE BLOG IS LIGHT ============
   The original blog was a light page and stays one. Only the ground and
   the text ramp flip — the signup card keeps its navy treatment, which
   is what it looked like on ClickFunnels too. */
body[data-page^="/blog/"]:not([data-page="/blog/"]) {
  background: #FFFFFF;
  color: #2f2f2f;
}
body[data-page^="/blog/"]:not([data-page="/blog/"]) h1,
body[data-page^="/blog/"]:not([data-page="/blog/"]) h2,
body[data-page^="/blog/"]:not([data-page="/blog/"]) h3,
body[data-page^="/blog/"]:not([data-page="/blog/"]) h4,
body[data-page^="/blog/"]:not([data-page="/blog/"]) .prose strong,
body[data-page^="/blog/"]:not([data-page="/blog/"]) .prose b { color: #001247; }

body[data-page^="/blog/"]:not([data-page="/blog/"]) .prose { color: #2f2f2f; }
body[data-page^="/blog/"]:not([data-page="/blog/"]) .meta,
body[data-page^="/blog/"]:not([data-page="/blog/"]) .count,
body[data-page^="/blog/"]:not([data-page="/blog/"]) .lede,
body[data-page^="/blog/"]:not([data-page="/blog/"]) .tag { color: #5B6472; }

body[data-page^="/blog/"]:not([data-page="/blog/"]) .prose blockquote {
  background: #F4F6FA;
  color: #2f2f2f;
  border-left-color: var(--ech-orange);
}
body[data-page^="/blog/"]:not([data-page="/blog/"]) .prose th { background: #F4F6FA; color: #001247; }
body[data-page^="/blog/"]:not([data-page="/blog/"]) .prose td,
body[data-page^="/blog/"]:not([data-page="/blog/"]) .prose th,
body[data-page^="/blog/"]:not([data-page="/blog/"]) .tag { border-color: #E4E7EC; }
body[data-page^="/blog/"]:not([data-page="/blog/"]) .prose hr { border-top-color: #E4E7EC; }
body[data-page^="/blog/"]:not([data-page="/blog/"]) .prose code { background: #F1F3F7; color: #2f2f2f; }
body[data-page^="/blog/"]:not([data-page="/blog/"]) .disclosure {
  background: #FAF7F4;
  color: #5B6472;
  border-left-color: var(--ech-orange);
}

/* ============ THE CLICKFUNNELS COLUMN GRID ============
   Converted pages keep ClickFunnels' section/row/column markup, but nothing
   ever styled it, so every multi-column row collapsed into a stack. The three
   checkout pages are the visible casualty: the cart and the hand-built sales
   column are a two-column row in the source (the custom HTML block is even
   labelled "Columna DERECHA"), and they were rendering one under the other. */
.cf-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
}
.cf-column { flex: 1 1 320px; min-width: 0; }
.cf-column img { max-width: 100%; height: auto; }

/* The checkout pages: a real page width, and images that stay decorative
   instead of rendering at their natural size across the whole column. */
body[data-page$="-checkout/"] main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}
body[data-page$="-checkout/"] .cf-column img {
  max-width: 260px;
  display: block;
  margin: 0 auto 18px;
}
body[data-page$="-checkout/"] .cf-row > .cf-column:first-child { flex: 0 1 420px; }
body[data-page$="-checkout/"] .cf-row > .cf-column:last-child  { flex: 1 1 480px; }
@media (max-width: 860px) {
  .cf-row { gap: 24px; }
  body[data-page$="-checkout/"] .cf-row > .cf-column { flex: 1 1 100%; }
}

/* Left column breathing room. The cart sat hard against the copy above it. */
body[data-page$="-checkout/"] .ec-cart { margin: 26px 0 22px; }
body[data-page$="-checkout/"] .ec-cart-embed { margin-top: 20px; }
body[data-page$="-checkout/"] .cf-column > :first-child { margin-top: 0; }
body[data-page$="-checkout/"] .cf-section { padding: 0; }