/* Supergerminados — pagina de venta del libro.
 * Paleta y voz: ~/.claude/skills/feed-placas/brands/supergerminador.json
 * Sin @import ni Google Fonts A PROPOSITO: en agosto se dejaron las peticiones a
 * terceros en 0 y eso no se deshace por una tipografia. Georgia (la del libro,
 * crea continuidad con la muestra) + pila de sistema. Cero descargas nuevas.
 *
 * GOTCHA DIVI (verificado 08/09 en et-core-unified-996.min.css): Divi mete
 * body:not(.home) p{font-family:'Asap'}, especificidad 0-1-2, que gana al valor
 * HEREDADO. Por eso aqui se DOBLA la clase (.sgv.sgv p = 0-2-1) igual que en
 * .asasa-cap. Sin !important: eso luego no hay quien lo discuta.
 */

.sgv {
  --sgv-verde: #2F4A22;
  --sgv-verde-hondo: #1E3216;
  --sgv-brote: #5A8F33;
  --sgv-hoja: #A8C85A;
  --sgv-ocre: #D99A2B;
  --sgv-ocre-hondo: #B8801E;
  --sgv-terracota: #B45A38;
  --sgv-agua: #3F8697;
  --sgv-papel: #FBF8F0;
  --sgv-crema: #F4EDDD;
  --sgv-tinta: #2B2620;
  --sgv-tinta-2: #5A5347;
  --sgv-linea: #E4DAC3;
  --sgv-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sgv-serif: Georgia, "Times New Roman", serif;

  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
  color: var(--sgv-tinta);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-align: left;
}

.sgv.sgv,
.sgv.sgv p,
.sgv.sgv li,
.sgv.sgv dd,
.sgv.sgv dt,
.sgv.sgv span,
.sgv.sgv a { font-family: var(--sgv-sans); }

.sgv.sgv h1,
.sgv.sgv h2,
.sgv.sgv h3 {
  font-family: var(--sgv-serif);
  color: var(--sgv-verde);
  line-height: 1.2;
  text-wrap: balance;
  padding: 0;
}

.sgv p { margin: 0 0 1rem; }
.sgv a { color: var(--sgv-brote); }
.sgv ul, .sgv ol { padding-left: 1.15rem; }
.sgv li { margin-bottom: .45rem; }

/* --- Hero --- */
.sgv-hero {
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid var(--sgv-linea);
  margin-bottom: 2.5rem;
}
.sgv-eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sgv-ocre-hondo);
  margin: 0 0 .6rem;
}
.sgv.sgv .sgv-h1 {
  font-size: clamp(2.1rem, 7vw, 3.2rem);
  margin: 0 0 .5rem;
  color: var(--sgv-verde-hondo);
}
.sgv .sgv-lead {
  font-family: var(--sgv-serif);
  font-size: clamp(1.15rem, 3.6vw, 1.45rem);
  font-style: italic;
  color: var(--sgv-brote);
  margin: 0 0 1.25rem;
}
.sgv .sgv-promesa { font-size: 1.125rem; margin-bottom: 1.75rem; }
.sgv .sgv-muestra-nota {
  font-size: .95rem; color: var(--sgv-tinta-2); margin: 1rem 0 0;
}

/* --- Bloques --- */
.sgv-bloque { margin: 0 0 3rem; }
.sgv.sgv .sgv-bloque > h2 {
  font-size: clamp(1.45rem, 4.5vw, 1.85rem);
  margin: 0 0 1rem;
}
.sgv.sgv .sgv-bloque h3 { font-size: 1.1rem; margin: 0 0 .5rem; }
.sgv .sgv-intro { color: var(--sgv-tinta-2); margin-bottom: 1.5rem; }

/* --- Rejillas --- */
.sgv-dos, .sgv-tres { display: grid; gap: 1rem; }
@media (min-width: 620px) {
  .sgv-dos  { grid-template-columns: 1fr 1fr; }
  .sgv-tres { grid-template-columns: repeat(3, 1fr); }
}

.sgv-si, .sgv-no, .sgv-card {
  background: var(--sgv-papel);
  border: 1px solid var(--sgv-linea);
  border-radius: 10px;
  padding: 1.15rem 1.25rem;
}
.sgv-si { border-left: 3px solid var(--sgv-brote); }
.sgv-no { border-left: 3px solid var(--sgv-terracota); }
.sgv.sgv .sgv-no h3 { color: var(--sgv-terracota); }
.sgv-si ul, .sgv-no ul { margin: 0; }

.sgv .sgv-num {
  display: inline-block;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sgv-ocre-hondo);
  margin-bottom: .5rem;
}
.sgv-card p { margin: 0; font-size: .97rem; color: var(--sgv-tinta-2); }

/* --- Muestras gratis --- */
.sgv-muestra {
  display: block;
  background: #fff;
  border: 2px solid var(--sgv-hoja);
  border-radius: 10px;
  padding: 1.15rem 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.sgv-muestra:hover, .sgv-muestra:focus-visible {
  border-color: var(--sgv-brote);
  transform: translateY(-2px);
  text-decoration: none;
}
.sgv-muestra p { font-size: .95rem; color: var(--sgv-tinta-2); margin: 0 0 .75rem; }
.sgv .sgv-link { font-weight: 600; color: var(--sgv-brote); font-size: .95rem; }

/* --- Indice --- */
.sgv-indice { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.sgv-indice li {
  display: flex; align-items: baseline; gap: .75rem;
  padding: .6rem .25rem;
  border-bottom: 1px solid var(--sgv-linea);
  margin: 0;
}
.sgv .sgv-cap-n {
  flex: 0 0 1.9rem;
  font-family: var(--sgv-serif);
  font-size: .95rem; font-weight: 700;
  color: var(--sgv-ocre-hondo);
  text-align: right;
}
.sgv .sgv-cap-t { flex: 1 1 auto; }
.sgv .sgv-badge {
  flex: 0 0 auto;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--sgv-hoja); color: var(--sgv-verde-hondo);
  padding: .16rem .5rem; border-radius: 99px;
}
.sgv-libre .sgv-cap-t { font-weight: 600; }

/* --- Autor --- */
.sgv-autor {
  background: var(--sgv-crema);
  border-radius: 10px;
  padding: 1.5rem 1.5rem .75rem;
}
.sgv.sgv .sgv-autor h2 { margin-top: 0; }

/* --- Regla del Bote --- */
.sgv-bote {
  background: var(--sgv-papel);
  border: 2px dashed var(--sgv-ocre);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.75rem;
}
.sgv.sgv .sgv-bote h3 { color: var(--sgv-ocre-hondo); font-size: 1.2rem; }
.sgv .sgv-bote p:last-child { margin-bottom: 0; }
.sgv .sgv-bote-cierre {
  border-top: 1px solid var(--sgv-linea);
  padding-top: .9rem; margin-top: .9rem;
}

/* --- CTA (lo pinta el mu-plugin segun haya o no enlace de pago) --- */
.sgv-cta { margin: 1.5rem 0; }
.sgv-caja-compra {
  background: var(--sgv-verde);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  color: #fff;
}
.sgv .sgv-precio {
  font-family: var(--sgv-serif);
  font-size: 2.4rem; font-weight: 700;
  color: #fff; display: block; line-height: 1.1;
}
.sgv .sgv-precio-nota {
  color: var(--sgv-hoja); font-size: .9rem; margin: .35rem 0 1.1rem;
}
.sgv-boton {
  display: inline-block;
  background: var(--sgv-ocre);
  color: var(--sgv-verde-hondo);
  font-weight: 700; font-size: 1.05rem;
  padding: .85rem 2rem;
  border-radius: 99px;
  text-decoration: none;
  border: 2px solid var(--sgv-ocre);
  transition: background .15s ease, color .15s ease;
}
.sgv-boton:hover, .sgv-boton:focus-visible {
  background: #fff; color: var(--sgv-verde-hondo); text-decoration: none;
}
.sgv .sgv-tras-boton {
  color: var(--sgv-hoja); font-size: .88rem; margin: .9rem 0 0;
}

/* Variante lista de espera: cuando todavia no hay enlace de pago */
.sgv-caja-espera {
  background: var(--sgv-crema);
  border: 1px solid var(--sgv-linea);
  border-left: 4px solid var(--sgv-ocre);
  border-radius: 10px;
  padding: 1.35rem 1.5rem;
}
.sgv.sgv .sgv-caja-espera h3 { margin-top: 0; }
.sgv .sgv-caja-espera p:last-child { margin-bottom: 0; }

/* --- FAQ --- */
.sgv-faq { margin: 0; }
.sgv.sgv .sgv-faq dt {
  font-family: var(--sgv-serif);
  font-weight: 700; font-size: 1.05rem;
  color: var(--sgv-verde);
  margin-top: 1.35rem;
}
.sgv .sgv-faq dd {
  margin: .35rem 0 0;
  padding-left: 0;
  color: var(--sgv-tinta-2);
}

/* --- Movil --- */
@media (max-width: 420px) {
  .sgv { font-size: 1rem; padding-left: 1rem; padding-right: 1rem; }
  .sgv-indice li { flex-wrap: wrap; }
  .sgv .sgv-badge { margin-left: 2.65rem; }
  .sgv-bote, .sgv-autor, .sgv-caja-compra { padding: 1.15rem; }
}

/* ==========================================================================
 * RECONQUISTA DE LOS <p> FRENTE A DIVI
 *
 * Divi sirve esto en su et-cache (leido el 09/09 en
 * wp-content/et-cache/10/et-core-unified-10.min.css):
 *
 *   body:not(.home) p{font-family:'Asap';color:#333!important;
 *                     font-size:20px!important;line-height:1.3em!important}
 *
 * font-family NO lleva !important: por eso el 08/09 basto doblar la clase en
 * .asasa-cap y se dejo escrito "se dobla la clase, no !important". Pero color,
 * font-size y line-height SI lo llevan, y contra un !important ajeno la unica
 * respuesta posible es !important con mas especificidad:
 *   .sgv.sgv p        = 0-2-1  (dos clases, un elemento)
 *   body:not(.home) p = 0-1-2  (una clase, dos elementos)  -> pierde
 *
 * No es una chapuza ni un atajo: no hay otra via. Va todo junto en este bloque
 * para que se vea de un vistazo cuanto important hay y por que. Medido antes:
 * los <p> salian a 20px/26px/#333 en vez de 17px/1.65/#2B2620.
 * ========================================================================== */
.sgv.sgv p {
  font-size: 1.0625rem !important;
  line-height: 1.65 !important;
  color: var(--sgv-tinta) !important;
}
.sgv.sgv .sgv-eyebrow {
  font-size: .72rem !important;
  line-height: 1.4 !important;
  color: var(--sgv-ocre-hondo) !important;
}
.sgv.sgv .sgv-lead {
  font-size: clamp(1.15rem, 3.6vw, 1.45rem) !important;
  line-height: 1.35 !important;
  color: var(--sgv-brote) !important;
}
.sgv.sgv .sgv-promesa { font-size: 1.125rem !important; }
.sgv.sgv .sgv-intro,
.sgv.sgv .sgv-muestra-nota,
.sgv.sgv .sgv-card p,
.sgv.sgv .sgv-muestra p { color: var(--sgv-tinta-2) !important; }
.sgv.sgv .sgv-card p,
.sgv.sgv .sgv-muestra p { font-size: .97rem !important; }
.sgv.sgv .sgv-muestra-nota { font-size: .95rem !important; }
.sgv.sgv .sgv-precio-nota,
.sgv.sgv .sgv-tras-boton { color: var(--sgv-hoja) !important; }
.sgv.sgv .sgv-precio-nota { font-size: .9rem !important; }
.sgv.sgv .sgv-tras-boton { font-size: .88rem !important; }

@media (max-width: 420px) {
  .sgv.sgv p { font-size: 1rem !important; }
  .sgv.sgv .sgv-promesa { font-size: 1.0625rem !important; }
  .sgv.sgv .sgv-card p,
  .sgv.sgv .sgv-muestra p { font-size: .95rem !important; }
}