/* Estilos compartidos de las landings de jicara.mx (web/).
   Patrones que se repiten entre / y /productos/ — si algo de aquí se
   repite también fuera de web/, se promueve al design system.

   ── Revisión de auditoría (30 ago 2026). Cambios marcados con [Hxx]. ── */

.hero { padding: var(--sp-8) 0; }
/* [H12] 15ch dejaba una palabra huérfana en la tercera línea en ambas
   páginas y empujaba el "tu" de acento al final del renglón. 22ch + balance
   reparte el título en dos líneas parejas. */
.hero h1 { font-size: var(--text-3xl); max-width: 22ch; text-wrap: balance; }
.hero .bajada { font-size: var(--text-lg); margin-top: var(--sp-4); max-width: 52ch; color: var(--fg-suave); text-wrap: pretty; }
.hero .ctas { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; align-items: center; }

.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--sp-4); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-5); align-items: center; }

.kicker { margin-bottom: var(--sp-3); }
/* [H24] 22ch cortaba títulos de dos palabras y rompía el remate de
   "Desde $1,900 al mes. Punto." en móvil. */
.seccion h2 { max-width: 26ch; text-wrap: balance; }
.lead { color: var(--fg-suave); margin-top: var(--sp-3); max-width: 58ch; text-wrap: pretty; }

/* [H15] El triángulo nativo de <details> era el único control sin tematizar
   del sitio. Marcador propio + objetivo táctil de 44px. */
.faq details { background: var(--superficie); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin-top: var(--sp-3); box-shadow: var(--sombra-1); }
.faq summary {
  font-weight: 700; cursor: pointer; color: var(--marca);
  list-style: none; display: flex; align-items: center; gap: var(--sp-4);
  justify-content: space-between; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl);
  line-height: 1; color: var(--acento-texto);
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--acento-texto); }
.faq p { margin-top: var(--sp-3); font-size: var(--text-sm); max-width: 68ch; }

/* [D2] La cifra es el gesto grande de la página: regla mandarina encima en
   lugar de más mandarina repartida en chips. */
.precio-big { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); color: var(--marca); }
.precio-big small { font-size: var(--text-md); font-weight: 600; color: var(--fg-suave); }
.regla-acento, .regla-oro { width: 56px; height: 4px; background: var(--acento); border-radius: var(--r-full); margin-bottom: var(--sp-3); }

.pie-grid { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding-block: var(--sp-6); }

.check { list-style: none; padding: 0; }
.check li { padding-left: 26px; position: relative; margin: var(--sp-2) 0; }
.check li::before { content: "✓"; position: absolute; left: 0; color: var(--acento-texto); font-weight: 800; }
.tema-oscuro .check li::before { color: var(--acento); }

/* [H11] auto-fit rompía a 3+1 huérfano entre ~880 y ~976px de viewport.
   Rejilla explícita: 4 · 2 · 1. */
.pasos { counter-reset: paso; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5) var(--sp-4); }
@media (max-width: 1000px) { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .pasos { grid-template-columns: 1fr; } }
.paso { counter-increment: paso; }
.paso::before {
  content: counter(paso);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-family: var(--font-display); font-weight: 800;
  background: var(--marca); color: var(--j-marfil);
  margin-bottom: var(--sp-3);
}
.tema-oscuro .paso::before { background: var(--acento); color: var(--j-tinta); }

/* [H13] Las tablas comparativas llegaban a 531px de alto con celdas de
   170px en móvil. Envoltorio con scroll y ancho mínimo legible. */
.tabla-env { overflow-x: auto; border-radius: var(--r-lg); box-shadow: var(--sombra-1); -webkit-overflow-scrolling: touch; }
.tabla-env .tabla { min-width: 460px; box-shadow: none; }

/* [H17] Tarjeta con borde para agrupar sin pedir atención (variante del
   sistema) usada donde antes había una banda oscura de más. */
.destacado { border-left: 4px solid var(--acento); }

/* [H14] La escala de espaciado no bajaba en móvil: 72px por sección
   convertían cada página en 7 pantallas de scroll. */
@media (max-width: 640px) {
  .seccion { padding: var(--sp-7) 0; }
  .hero { padding: var(--sp-7) 0 var(--sp-8); }
  .grid2, .grid3 { gap: var(--sp-4); }
}