/* Landing pública de Repos — la maquetación del canvas `Nube Home v2` sobre
 * los tokens de `broadsheet.css`. Los estilos inline del diseño están aquí
 * como clases: el diseño se retoca en un solo archivo, no view por view.
 */

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-600); text-decoration: underline; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px 120px; }

/* — barra superior — */
.nav-top { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; padding: 32px 0 0; }
.nav-top a { font-size: 16px; }
.marca { font-family: var(--font-heading); font-weight: 700; font-size: 24px; letter-spacing: 0.01em; }
.espaciador { flex: 1; }
.nav-top .btn-primary { padding: 10px 16px; }

/* — encabezado — */
.hero { padding: 120px 0 64px; display: flex; flex-direction: column; gap: var(--space-6); max-width: 900px; }
.kicker { font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent-700); }
.kicker-alt { color: var(--color-accent-2-700); }
.titulo-hero {
  margin: 0; font-size: clamp(40px, 6vw, 76px); line-height: 1.03;
  letter-spacing: -0.02em; text-wrap: pretty;
}
.entrada {
  margin: 0; font-size: clamp(18px, 2vw, 22px); line-height: 1.55;
  max-width: 52ch; text-wrap: pretty;
}
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); padding-top: var(--space-2); }
.btn-grande { font-size: 18px; padding: 15px 24px; }

/* — secciones — */
.seccion { padding-bottom: 128px; }
.seccion-apilada { display: flex; flex-direction: column; gap: var(--space-8); }
.duo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-8) 64px; align-items: center;
}
.duo-arriba { align-items: start; }
.columna { display: flex; flex-direction: column; gap: var(--space-4); }

.titulo-2 { margin: 0; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.01em; text-wrap: pretty; }
.titulo-3 { margin: 0; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; }
.titulo-cta { margin: 0 0 var(--space-4); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; max-width: 24ch; text-wrap: pretty; }
.parrafo-grande { margin: 0; font-size: 18px; line-height: 1.6; max-width: 46ch; text-wrap: pretty; }
.parrafo { margin: 0; font-size: 17px; line-height: 1.6; }
.parrafo-apagado { color: var(--color-neutral-800); }

/* — huecos de imagen —
   Los GIF del producto todavía no existen: el hueco reserva el espacio con
   el mismo aspecto que el diseño y dice qué falta, en vez de dejar un salto
   de maquetación cuando lleguen. */
.slot {
  width: 100%; display: grid; place-items: center; padding: var(--space-4);
  background: var(--color-surface);
  border: 1px dashed var(--color-neutral-400);
  border-radius: var(--radius-lg);
  color: var(--color-neutral-700); font-size: 14px; text-align: center;
}
.slot-16-9 { aspect-ratio: 16 / 9; }
.slot-4-3 { aspect-ratio: 4 / 3; }
.slot-16-10 { aspect-ratio: 16 / 10; }
.pie { margin: var(--space-3) 0 0; font-size: 15px; line-height: 1.5; color: var(--color-neutral-700); }
.pie-corto { margin-top: var(--space-2); }

/* — qué incluye / preguntas — */
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-8) 56px; }
.rejilla-ancha { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-8) 64px; }
.rejilla-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); }
.rejilla h3, .rejilla-ancha h3 { margin: 0 0 var(--space-2); font-size: 21px; }
.rejilla p, .rejilla-ancha p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--color-neutral-800); }

/* — precio — */
.precio {
  margin: 0; font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(64px, 8vw, 104px); line-height: 1; letter-spacing: -0.03em;
}
.precio-nota { margin: var(--space-4) 0 0; font-size: 21px; line-height: 1.4; }
.precio-letra { margin: var(--space-2) 0 0; font-size: 17px; line-height: 1.6; max-width: 34ch; color: var(--color-neutral-800); }
.titulo-precio { margin: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.12; max-width: 30ch; }
.beneficios { display: flex; flex-direction: column; gap: var(--space-3); }

/* — formulario — */
.formulario { display: flex; flex-direction: column; gap: var(--space-3); }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.aviso-form { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-neutral-700); }
.error-campo { display: block; margin-top: 4px; font-size: 12px; color: var(--color-accent-2-700); }
.input.entrada-invalida { border-color: var(--color-accent-2-600); }
.resumen-error {
  margin: 0; padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--color-accent-2-100); color: var(--color-accent-2-800); font-size: 15px;
}
.resumen-error ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.gracias {
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-accent-100); border: 1px solid var(--color-accent-300);
}
.gracias h3 { margin: 0 0 var(--space-2); font-size: 21px; }
.gracias p { margin: 0; font-size: 17px; line-height: 1.6; }

/* — pie — */
.pie-sitio {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-6);
  font-size: 15px; color: var(--color-neutral-700);
}
.pie-sitio .marca { font-size: 18px; color: var(--color-text); }

/* — páginas simples (error, aviso) — */
.pagina-simple { padding: 96px 0 0; max-width: 60ch; }

/* Texto legal: el aviso de privacidad es una página larga de puro texto —
   se lee, no se escanea, así que hereda el ancho de columna de arriba y solo
   necesita jerarquía y aire entre secciones. */
.legal h1 { margin: 0 0 var(--space-2); font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1; }
.legal .fecha { margin: 0 0 var(--space-6); font-size: 15px; color: var(--color-neutral-700); }
.legal h2 { margin: var(--space-6) 0 var(--space-3); font-size: 21px; line-height: 1.2; }
.legal p, .legal li { font-size: 17px; line-height: 1.65; }
.legal p { margin: 0 0 var(--space-3); }
.legal ul, .legal ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.legal li { margin-bottom: var(--space-2); }

@media (max-width: 720px) {
  .wrap { padding: 0 20px 72px; }
  .nav-top { gap: 18px; padding-top: 24px; }
  .hero { padding: 64px 0 48px; }
  .seccion { padding-bottom: 80px; }
  .pagina-simple { padding-top: 56px; }
}

/* Trampa de bots: fuera de la pantalla, nunca oculta con display:none —
   algunos bots ignoran justamente los campos ocultos así. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }