/* Página de presentación de Acopio. Los colores son los de la app
   (lib/app/theme.dart): violeta de noche y ámbar de la ventana encendida. */

:root {
  --violeta: #6d28d9;
  --violeta-oscuro: #2a1070;
  --noche: #1a0b47;
  --ambar: #fbbf24;
  --ambar-oscuro: #b45309;

  --fondo: #faf8ff;
  --superficie: #ffffff;
  --texto: #1c1530;
  --texto-suave: #4b4463;
  --borde: #e4dcf5;
  --acento: var(--violeta);
  --acento-fondo: #efe7fd;

  --radio: 18px;
  --ancho: 1040px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #120a2b;
    --superficie: #1d1340;
    --texto: #f1ecff;
    --texto-suave: #bfb5dc;
    --borde: #33285c;
    --acento: #c4a8ff;
    --acento-fondo: #2a1c57;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 18px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--acento); }

img { max-width: 100%; height: auto; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Encabezado ---------- */

.portada {
  background: linear-gradient(135deg, var(--violeta), var(--violeta-oscuro) 60%, var(--noche));
  color: #fff;
  padding: 20px 0 64px;
}

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 48px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
}

.marca img { width: 40px; height: 40px; border-radius: 10px; }

.barra nav { display: flex; gap: 20px; }
.barra nav a { color: #fff; opacity: .85; text-decoration: none; font-size: 1rem; }
.barra nav a:hover { opacity: 1; text-decoration: underline; }

.portada-cuerpo {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
}

.portada h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.portada h1 span { color: var(--ambar); }

.portada .lema {
  font-size: 1.2rem;
  opacity: .92;
  margin: 0 0 28px;
  max-width: 36em;
}

.botones { display: flex; flex-wrap: wrap; gap: 12px; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .15s, box-shadow .15s;
}

.boton:hover { transform: translateY(-1px); }
.boton:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; }

.boton-principal { background: var(--ambar); color: var(--noche); box-shadow: 0 6px 20px rgba(251, 191, 36, .35); }
.boton-claro { border-color: rgba(255, 255, 255, .6); color: #fff; }
.boton-proximamente { border-color: rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .8); cursor: default; }
.boton-proximamente:hover { transform: none; }

.nota-portada { margin: 18px 0 0; font-size: .95rem; opacity: .85; }

.portada-logo {
  justify-self: center;
  width: min(300px, 70vw);
  aspect-ratio: 1;
  border-radius: 28%;
  background: radial-gradient(circle at 50% 48%, #12082f 0%, var(--noche) 50%, #7c3aed 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 30px 80px rgba(10, 4, 30, .55), 0 0 0 1px rgba(255, 255, 255, .08);
}

.portada-logo img { width: 100%; height: 100%; border-radius: inherit; }

/* ---------- Secciones ---------- */

section { padding: 64px 0; }
section + section { border-top: 1px solid var(--borde); }

h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  line-height: 1.2;
  margin: 0 0 12px;
}

.intro { color: var(--texto-suave); max-width: 40em; margin: 0 0 32px; }

.pasos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: paso;
}

.pasos li {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 24px;
  counter-increment: paso;
}

.pasos li::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--violeta);
  color: #fff;
  font-weight: 700;
  margin-bottom: 12px;
}

.pasos h3, .tarjetas h3 { margin: 0 0 6px; font-size: 1.15rem; }
.pasos p, .tarjetas p { margin: 0; color: var(--texto-suave); }

.tarjetas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 24px;
}

.tarjeta .icono {
  font-size: 1.8rem;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--acento-fondo);
  margin-bottom: 14px;
}

.privacidad-caja {
  background: var(--acento-fondo);
  border-radius: var(--radio);
  padding: 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
}

.privacidad-caja .icono { font-size: 2.6rem; line-height: 1; }
.privacidad-caja ul { margin: 12px 0 0; padding-left: 1.2em; }
.privacidad-caja li { margin: 4px 0; }

/* ---------- Donaciones ---------- */

.apoyo {
  background: linear-gradient(135deg, var(--noche), var(--violeta-oscuro));
  color: #fff;
  border-radius: 28px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
}

.apoyo h2 { color: #fff; }
.apoyo p { margin: 0 0 12px; opacity: .92; }
.apoyo ul { margin: 0 0 12px; padding-left: 1.2em; opacity: .92; }

.apoyo .botones { flex-direction: column; }
.apoyo .boton { width: 100%; }

.boton-cafe { background: var(--ambar); color: var(--noche); }
.boton-mp { background: #fff; color: #0a3a8c; }

.apoyo .letra-chica { font-size: .9rem; opacity: .75; margin: 8px 0 0; }

/* ---------- Preguntas ---------- */

.preguntas details {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  margin-bottom: 12px;
  padding: 0 20px;
}

.preguntas summary {
  cursor: pointer;
  font-weight: 700;
  padding: 18px 0;
  list-style-position: outside;
}

.preguntas details p { margin: 0 0 18px; color: var(--texto-suave); }

/* ---------- Pie ---------- */

footer {
  border-top: 1px solid var(--borde);
  padding: 32px 0 48px;
  color: var(--texto-suave);
  font-size: .95rem;
}

footer .contenedor { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ---------- Aviso de privacidad ---------- */

.documento { max-width: 760px; padding-top: 40px; padding-bottom: 64px; }
.documento h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.2; margin: 0 0 8px; }
.documento h2 { font-size: 1.3rem; margin: 32px 0 8px; }
.documento .fecha { color: var(--texto-suave); margin: 0 0 24px; }

.encabezado-simple {
  background: linear-gradient(135deg, var(--violeta), var(--violeta-oscuro));
  padding: 16px 0;
}

.encabezado-simple .barra { margin: 0; }

/* ---------- Celular ---------- */

@media (max-width: 820px) {
  .portada-cuerpo, .apoyo { grid-template-columns: 1fr; }
  .portada-logo { display: none; }
  .pasos, .tarjetas { grid-template-columns: 1fr; }
  .barra { margin-bottom: 32px; }
  .barra nav { display: none; }
  .apoyo { padding: 28px 22px; }
  .privacidad-caja { grid-template-columns: 1fr; padding: 24px; }
  .botones .boton { flex: 1 1 100%; }
  section { padding: 48px 0; }
}

@media (min-width: 821px) and (max-width: 1000px) {
  .tarjetas { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton { transition: none; }
}