/* Sitio de Cuentas Claras: inicio y páginas legales. Mismos colores que la
   app y que /premium (verde petróleo y oro). */
:root {
  --fondo: #f6f8f7;
  --tarjeta: #ffffff;
  --linea: #dfe6e4;
  --texto: #17211f;
  --suave: #5c6965;
  --acento: #0f3d3a;
  --enlace: #0f5c55;
  --oro: #f2c14e;
  --hero: #0f3d3a;
  --sobre-hero: #f4f1e8;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0d1413;
    --tarjeta: #151f1d;
    --linea: #24312e;
    --texto: #e8efed;
    --suave: #9fada9;
    --acento: #f2c14e;
    --enlace: #f2c14e;
    --hero: #143f3b;
    --sobre-hero: #f4f1e8;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 500;
  line-height: 1.6;
}

a { color: var(--enlace); font-weight: 700; }

.contenedor {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  color: var(--texto);
  text-decoration: none;
  margin-bottom: 24px;
}

.hero {
  background: var(--hero);
  color: var(--sobre-hero);
  border-radius: 28px;
  padding: 40px 24px;
  text-align: center;
}

.hero img { width: 88px; height: 88px; }
.hero h1 { font-size: clamp(30px, 7vw, 44px); line-height: 1.1; margin: 16px 0 8px; letter-spacing: -0.02em; }
.hero p { margin: 0 auto; max-width: 520px; opacity: 0.9; font-size: 17px; }

.tiendas { margin-top: 20px; font-weight: 700; color: var(--oro); }

.funciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 24px 0;
}

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 18px;
}

.tarjeta h2, .tarjeta h3 { margin: 0 0 6px; font-size: 17px; }
.tarjeta p { margin: 0; color: var(--suave); }

article h1 { font-size: clamp(26px, 6vw, 34px); line-height: 1.15; margin: 0 0 4px; letter-spacing: -0.01em; }
article h2 { font-size: 20px; margin: 32px 0 8px; }
article h3 { font-size: 16px; margin: 20px 0 6px; }
article ul, article ol { padding-left: 22px; }
article li { margin: 4px 0; }
.fecha { color: var(--suave); margin: 0 0 24px; }

.resumen {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--oro);
  border-radius: 14px;
  padding: 14px 16px;
}

table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--linea); }
th { color: var(--suave); font-weight: 700; }

.pasos { counter-reset: paso; list-style: none; padding: 0; }
.pasos li {
  counter-increment: paso;
  position: relative;
  padding: 12px 12px 12px 52px;
  margin: 8px 0;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: 14px;
}
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 12px;
  top: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--acento);
  color: var(--fondo);
  display: grid;
  place-items: center;
  font-weight: 800;
}

.boton {
  display: inline-block;
  background: var(--acento);
  color: var(--fondo);
  padding: 12px 20px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 800;
}

footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--linea);
  color: var(--suave);
  font-size: 14px;
}
footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; }
footer a { color: var(--suave); }